Tribute, Survey and Product Landing Page

Code Feedback
1

Hello lovely people,

I’m from Chile and two weeks ago I started learning html and css from scratch thanks to FCC, its been a fun journey for now and I really want to thank the team for giving us this opportunity to learn in such a orderly way.

Here I share with you the first 3 projects I managed to create for now.
/¨* Here i wanted to share the 3 links but its not allowed for new users,
so I will share my codepen dashbord */

-Tribute Page

-Survey Form - It’s in Spanish and it’s a survey to join “my club”, it made my friends laugh (sadly no server behind).

-And finally, Product Landing where I sell Toilet Paper (lul), wrote a funny article in Spanish…

In this last one I still have to work on the media queries to really get it going on smartphones, resizing on the browser has worked but not on my phone.
Also I feel i have to get much more into Grid and Flexbox and I hope I get a better grasp on animation in the future, it seems very hard.

Any feedback is welcomed, sometimes I wished I had a tutor or someone with whom I could talk in real time while coding. Anyway, the future is bright, I want to give it 2 or 3 weeks more to HTML and CSS and then finally going to start with JavaScript, i’m excited.

Take care!!

2

Welcome to the forums @bafian. Your pages looks good. Some things to revisit;
tribute

  • 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.
    • Your page passes 6/10 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are HTML coding errors you should address.
  • Aside, there are quite a lot of fonts you call in CSS, though some you don’t link to or import. Best to choose one font and then have a default backup like sans-serif or serif.

survey

  • 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.
    • Your page passes 15/17 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are HTML coding errors you should address.
  • Again, don’t use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Make the page responsive. On smaller screens there’s a horizontal scrollbar, things fall out of the container.

product

  • 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.
    • 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.
  • As with the others, run your HTML code through the W3C validator.
    • In addition, you can ignore the warnings about adding a heading to your sections. That’s to help you make the page more semantic.
  • As with the others, make the page responsive.
1 Like
3

Thanks so much Roma, I was so unaware of those things !!
Lots of work to do!!

4

Hey Roma,
Just wanted you to know that I did the 3 projects again and fixed the issues, thanks again for explaining me how the test worked.
:slight_smile:

1 Like