A breakdown of my first project on FCC

Code Feedback
1

Hi everyone! Just finished my first project, it passed the test but I would love some feedback.

I had to keep going back to the lessons and search the internet for how to do certain things (should’ve taken notes during the lessons!) but it was really satisfying when it was finally over.

Issues faced:

  1. I used fonts from Google Fonts and the ‘strong’ attribute that I’d entered in HTML did not seem to work on them. Maybe it would have worked through CSS styling but it seemed daunting to add an ID or class for all the years so I didn’t try that route and went with the ‘u’ attribute instead. Is there a better way to add decoration to only parts of the text?

  2. Upon using the inspect option, I saw what the page would look like on a small screen and it was not pleasing at all. The image seemed fine, however, the text was too big and looked unappealing. I played around with the “vw” attribute for the headings and text but it didn’t change anything. I finally added it to the body element in CSS but it still had no effect. Any suggestions?

  3. My approach to margin, padding and font-size was completely trial and error and I am not confident that I could make a page layout exactly as per someone’s specifications, but it feels like one of those things that you get a hang of only after practicing a lot so I’m looking forward to that!

  4. Is the only way to add space between individual lists through adding a ‘br’ attribute? I tried adding padding to the ‘tribute-info’ ID but that did not work.

Thank you for taking the time! :slight_smile:

2

I can help you if u share your code pen codes
If u adding spaces in your code u can use margin / padding b/w your li use these thing in % it will Work

3

Everything looks good, but I feel that there is so much margin and padding.

4

Your page looks good @s_kosaria. Something to revisit;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
    • The test script should be included, with all tests passing, when you submit your projects.
  • Review the lesson about giving meaningful text to links.

This is because you imported a weight of 600. Try selecting the normal/regular weight of 400 and also the bold weight 700. Then you’ll notice the difference when specify something to be bold.
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Upright:wght@400;700&display=swap');

Don’t use fixed dimensions on elements, use max-width/height and relative units like % and vw to keep everything responsive.

No, don’t use the <br> element to force spacing or line breaks. You should use margin and/or padding in CSS.
If I’m understanding what you mean, give a class to each li and then pad or add margin.