Feedback Portfolio & other projects (Web Design Certif.)

Hello freeCodeCampers,

I am learning to code since 3 months and I really like that for the moment.

I just finished the 5 projects of the Responsive Web Design Certification, and it will be good for me if you could give me your feedback :slight_smile: on:
-code itself (html, css and scss), clean or not
-mistakes
-visual design
-improvement

Thanks in advance for your precious help :blush: and have a nice day!

8 Likes

c’est magnifique! :sparkles:

1 Like

Your pages look good @manon_boiteau. Some things to revisit;

Tribute

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
  • Codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it, there’s something to clean up.
      • Be careful of duplicating selectors
  • Accessibility is about being accessible to all users. Review the lesson about giving meaningful text to links.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.

survey

  • Same as above, codepen provides the boilerplate
  • The checkbox forces user’s to select “Maison Mauricette website”
  • User’s do not have access to your google acc’t so they cannot see the image.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.

product landing

  • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 15/16 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • Codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it, there’s something to clean up.
      • Be careful of duplicating properties.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.

tech doc

  • same thing about codepen providing boilerplate
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.

portfolio

  • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 11/12 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • Links to your projects should open in a new tab
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Make your page responsive. Remember, the R in RWD stands for Responsive.
    • There’s a horizontal scrollbar on large and small screens
1 Like

Hi!

I’m a novice here and just wanted to say that your work is truly amazing!

But when I’m on phone I can’t see the end of the “me” section for some reason.

1 Like

Hi @dieplumpe,

Thank you for your answer! I add overflow: scroll; to the section “me”., it should works now :slight_smile:

1 Like

Thank you very much @Roma for your return. It is very useful!

I am trying to fix all the points you mentioned. I still have some issues:
-The signs >"" at the top left of some projects (Product Landing Page for example);
-The horizontal scrollbar in the Personal Portfolio project. I don’t understand why there is one.

Could you help me again?

Thanks in advance,

Have a nice evening.

Your nav is too wide. Everything you see on a webpage is just a box you need to move around and resize. Try adding the following to the top of your CSS section to see what I mean;

* {
  border: 1px solid red;
}

and you’ll see how it spills out wider.

In your ‘Settings’ I changed this;
<meta charset="utf-8" />

to this;
<meta charset="utf-8">
and got rid of the "> on your page

1 Like

Hey @manon_boiteau this looks really good!!! All of your pages looks great!! But i have some little suggestions

  • Font size is a bit too small in the portfolio page. Headings are good but some text like the about me content text is a bit hard to read. I know small and thin fonts looks amazing but i think accessibility should also be kept in mind.
  • And yes this :

You can use a chrome extension called Pesticide to visualize all the boxes on the screen and then figure out what is causing this problem like this :


As you can see the nav bar is taking more space than the screen size and some other divs are also going out of the body try using box-sizing: border-box; which fixes issue of those extra margins and paddings that we give to elements and then forget they exist :sweat_smile: when i tried this it fixed the nav bar. But there are still some divs which are wider than body I’m sure you’ll figure out why that is.

I don’t see any other issues right now all the other ones are already addressed by Roma .

You did a great job.

Also Congratulations you got your first freeCodeCamp Certificate.

Looking forward to see more great projects from you.

1 Like

Thank you @mdshariq for your recommendations and wishes!
I changed the font-size so as to be a bit more bigger. I also fixed the scrollbar ; I did a mistake on it by putting the padding left on the navbar and not on the ul element :slight_smile:

Thanks again,

1 Like

Thank you again @Roma !

"> was in fact < html lang=“en”>.
I also fixed the scrollbar, thank you for your tips.

I have still
to manage in every projects and Google images (but I think I will let like this because I have no other way to use this images that are only on my computer unfortunately).

Thanks again for your pretty help :pray:t2:

Hi, Manon!

I enjoyed looking at each of your pages. I loved the style you picked for each of them, with the product page being my favorite!

Sadly I can’t offer constructive feedback of raw code since I’m brand new to fCC and just poking around the forums right now. I did notice on your tribute page the quote you placed it overlaps the photo that’s next to it. I’m not sure if you intended for that to happen - if so, then my apologies for pointing out the obvious! :sweat_smile:

Regardless, best of luck on your coding endeavors! I hope to see you around here more.

1 Like

Hi @montanapear, thank you for your message :blush:
Yes, the quote is over the photo , I hesitated but finally I like it like that :slight_smile: but thank you to point it to me, every feedbacks are good to know!

Good luck in your fCC projects!

1 Like

Good job cleaning things up @manon_boiteau.

For your images, you can google something like “free image hosting”.
For the <br> elements, you can rework your projects another time. Reread the articles about <br> in my original feedback to be aware of why it’s not a good idea to use them excessively since you can, and should, use CSS.
In your tech doc page you can get rid of some of the <br>'s by using multiple paragraph elements.

2 Likes