Feedback Portfolio & other projects (Web Design Certif.)

manon_boiteau · November 11, 2020, 10:22am

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 on:
-code itself (html, css and scss), clean or not
-mistakes
-visual design
-improvement

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

gusakmarina · November 11, 2020, 11:23am

c’est magnifique!

Roma · November 12, 2020, 12:17am

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.
- Web Accessibility in Mind has a more thorough explanation.
  - “learn more” is not accessible
Do not use the   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   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   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   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   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

dieplumpe · November 12, 2020, 12:41am

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.

manon_boiteau · November 12, 2020, 4:24pm

Hi @dieplumpe,

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

manon_boiteau · November 12, 2020, 4:34pm

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.

Roma · November 12, 2020, 5:09pm

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

mdshariq · November 12, 2020, 5:48pm

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

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.

manon_boiteau · November 13, 2020, 9:00am

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

Thanks again,

manon_boiteau · November 13, 2020, 9:37am

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

montanapear · November 13, 2020, 9:46am

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!

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

manon_boiteau · November 13, 2020, 10:07am

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

Good luck in your fCC projects!

Roma · November 13, 2020, 1:25pm

Good job cleaning things up @manon_boiteau.

For your images, you can google something like “free image hosting”.
For the   elements, you can rework your projects another time. Reread the articles about   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  's by using multiple paragraph elements.

Topic		Replies	Views
Got my Responsive Web certificate, would love feedback Code Feedback	3	317	August 21, 2021
I want to get some feedback for the responsive web design projects that I've made Code Feedback	5	346	April 16, 2022
My first ever 2 webpages - feedback request Code Feedback	12	878	June 1, 2021
Please someone review my project Code Feedback	7	432	December 16, 2021
Responsive Web Design Certification Complete - Feedback would be great! :) Code Feedback	9	1067	February 6, 2021