FCC Product Gaming PC Feedback

[daiwik]

Hi everyone,
I just completed my Product Landing page for gaming PC
Product Landing Page
Please take some time to provide your valuable feedback and improvement I can make on this.
Thank you

[themagicbean]

Looks good. But if I shrink the browser enough, while the text shrinks to fit, the images/price elements don’t (-> horizontal navbar). I also feel like “how it works” and “pricing” are poor descriptions (maybe “media” and “models” or something). Finally, when I click on “how it works” or “pricing” on a large screen, they both appear to go to the same place (i.e., there isn’t enough “bottom” to the page for “pricing” to visually link further down).

If you want more feedback, you might want to change the title of the post to “Product Landing Page: Gaming PC Feedback.” When I read your title I thought you were going to build a FCC-sponsored/sold gaming PC and wanted feedback on the PC (which made me ignore your post at first). IDk, maybe just me.

[Imstupidpleasehelp]

I like the layout, but don’t forget to think about mobile users!

[Roma]

Your page looks good @daiwik. Some things 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.
• 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.
• 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 HTML misses things which is why I recommend W3C
  • The one for CSS is good. Use it, there’s something to clean up.
• Check that a correct email has been input when clicking the submit button. Throw an error if not. You learned how to do this when you made the survey form.
• Your page needs to be responsive. Your pricing boxes don’t stack and causes a scrollbar on smaller screens.

[Sylvant]

Hey i just finished this project myself so i thought id drop a line or two, altho im no pro at that so take my opinion with grain of salt.
Id advise you try to differ a bit from the example project. They are good example on how things can be done, but you should implement your own approach in order to truly learn . “Steal” as much techniques from the example, as you can, but make sure you are able to utilize and adjust them according your own needs. The project criteria are very light and allow for a great freedom and creativity.
Colors are major way in styling your content and id put more focus on learning how to use them. I like the contrasting red which you used on the buttons there, it certainly serves its purpose to draw the attention, but their green border seem to be rather out of place and with no particular purpose. Id either get rid of that border or use a color which complements the remaining content of the page, so in the end the buttons will belong with it. Ofc you could call this just matter of my own preference.