Looking to get feedback for my Product Landing Page

Tell us what’s happening:
Hi, I wish to have some feedback on my product landing page. I do not know when to use a class or id attribute at times. Furthermore, I wish to know if my code is a bit lengthy, and if there are better alternatives to it.

You can find my code here https://codepen.io/rusted57/pen/poELNjz
Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36.

Challenge: Build a Technical Documentation Page

Link to the challenge:

@Rust Welcome to the FreeCodeCamp forums! That site looks really good and works great on my mobile phone. To remember when to use classes and ids it is more of a styling thing. If you have a ton of the same thing for example a list that you want styled the same you could use a class on it. But if it is a main thing like your YouTube embed then probably an id because you want it styled unique! Happy coding! :smile:

1 Like

Cool, thanks for your feedback!

1 Like

Welcome to the forums @Rust. Your page looks good. Some things to revisit;

  • 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.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Remember, an id must be unique within the document.

Read up a little more on semantic elements. You want the header and footer elements outside of the main element.

On a side note, part of the commented out text that came when you forked the pen is uncommented and appears at the bottom of your page.
Also, the sample projects are just that, an example of one way to do the project. You don’t have to replicate the style. The instructions say to make your page “functionally similar” and to “give it your own style”.

Yes, FCC is having you use an id quite a bit but, in general, an id is typically used when you want to target HTML elements with JavaScript. A class is used to style the page. You can use an id to style the page if you want but know that it has more weight than a class does and the id will override a class targeting the same element.
In your own personal projects that you create outside of freeCodeCamp some people recommend only using a class to style the page and an id if using JavaScript in your project. However, JavaScript can target a class too, so you may not need id's that much in your personal projects.

Thank you for your help!