FCC Challenge : CHIPS Tribute Page 💬

Hi folks,

After finishing my first tribute page (whick I don’t know if we could really call it a tribute page since it’s about chips) I was wondering if somebody could give me a little feedback on it. Being a beginner, there might be better/more efficient ways to structure the code ?

Just one tip could be great if you notice something weird or to improve. :slight_smile:

The link: https://codepen.io/EikichiOnizuka/pen/xxwONbb?editors=1100

Thank you in advance for your response !

Hello there.

Just on your code: You have some useless HTML elements, as well as some contradicting CSS. For example:

  • The main tag wrapping the body tag.
  • Multiple declarations of the height property in .container

Some things to note when using CodePen:

  1. CodePen does not expect any content outwith the body tags.
  2. All meta, link, and script information must be put in the :gear: settings section of the HTML editor.
  3. You do not need to/cannot link the CSS in your HTML, if you place the CSS in the appropriate section.
  4. If your project uses React, use the Babel preprocessor, and link the CDN in the appropriate :gear: section.
  5. The editors offer the ability to format and analyse your code, providing useful information about forgotten closing tags etc.

If you are still confused with how to use CodePen, please read the official documentation.

I am very glad you did the tribute page on chips…

Hope this helps

I like this and think it looks pretty good and it’s very creative. The only thing I would change is the margin on the .container div. I would do this:

margin: 0 auto;

This will center your .container div horizontally and still leave the 0px margins on the top and bottom.

Thank you very much for your feedbacks, I’m going to improve my code with your advices that’s so nice !

I effectively see some contradicting CSS, the editor that can analyse my code is very useful ! I’m going to read more about the fonctionnalities of CodePen as I should have done at the begining. :slight_smile:

It looks way better with the new margin values, it’s great !

It was very useful, a big thank you for you guys. :+1: