Design comparison
Solution retrospective
- Is it best practice to always structure a HTML page using the
<header>,<main>,<footer>tags regardless of what will go in the page? - Any general recommendations for making the HTML I wrote more semantic?
- I always feel like every tiny element in my page should become it's own React component so I can reuse it. When do you think this becomes a waste of time?
- Is there a best practice way of deciding what should become a CSS variable?
- What are your thoughts on using "derived variables", something like below. Is it best practice?
:root{
--fs-regular: 1rem;
--fs-medium: calc(var(--fs-regular) * 1.2);
}
Community feedback
- @DavidMorgadePosted about 2 years ago
Hello Mike, congrats on finishing the challenge! great job, you almost got it pixel perfect!
Let me try to answer your questions.
-
Well, depends a lot but most of the time is a must to use those tags to give your site more accesibility and search engine optimization, but, for example, for a web application that doesn't need to rank on search engines, or for simple challenges like this that doesn't even haver a header or footer, is not necessary!. For example, figma web doesn't even use any semantic tag, because is a web application that you access from other page and doesn't need any kind of SEO optimization.
-
I would probably use a
<button>instead of an anchor tag with a div for the add to cart button, only use theatag, if the thing you are clicking is getting you to other part of the page, or outside the page, basically use it if its for navegate to other place. -
Never, the more components you get, the more optimized your code will be, you will encounter less bugs and your code will be much more readable if you structure it well in different folders depending on the type of components, for this challenge it doesn't matter that much, but for biggest projects it will be more usefull to avoid repetition.
-
I'm not that fan of defining variables for sizes, but in the way you wrote it there it will be easy to scale you app and make changes on the sizes faster.
Hope my feedback helps you, and thank you for making some interesting questions here!, good solution too!
1@craftzniacPosted about 2 years ago@DavidMorgade hello David, I hope you are doing fine! Thank you so so much for taking time out of your busy schedule to go through my solution and give some feedback (this is my very first challenge). I appreciate the points you made and I will be taking note of them when I start working on my next challenge. In your final point, you said you're not a fan of defining variables for sizes, I am just curious but is there a reason to that or just personal preference?
1@DavidMorgadePosted about 2 years ago@MikeyOnyedika Personal preference, I just don't like it, but that doesn't mean that is a bad practice!
1 -
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord