Semantic HTML5 markup, CSS custom properties, Flexbox

Community feedback

• 

  P

  clickglue•440

  @clickglue

  Posted 8 months ago

  Wauw if this is your first project, you've done an excellent job and there will be great things coming! Your style of coding is clean and precise. You keep things simple and well structured, very important. Three tips that you might find usefull: the more complicated the projects become, the important it will become to plan your work in steps. Maybe you already doing that, but it might help. Secondly: many good websites use a CSS reset, to make sure the design shows up correctly. Het is a link. Thirdly, you might consider looking into CSS variables. This helps you making consistent layouts, also in complex projects. Good luck, you will be great!

  00
• 

  

  Grace•32,130

  @grace-snow

  Posted 8 months ago

  The html is pretty good in this, well done! The only improvement to suggest there is to treat this card more like a card component you would build in a real site — that means consider the context of how an where it would be used. A card like this would never be used to serve the main heading on a page, so you know it shouldn't have a h1. Use a lower importance heading level like h2 instead. Also, the alt text on the image would be more specific to the card where it's used. So instead of just "QR code", this should also say where that code goes ("to FrontendMentor.io").

  Last thing in html - make sure you Indent the code consistently so it's easier to read and spot bugs. Your code editor can even do this formatting automatically for you with prettier.

  01