Stats Preview Card Using Utility Classes and semantic HTML
Design comparison
Solution retrospective
Hello everyone, I would like some feedback on the HTML markup and whether if there is a better way I could have approached the spacing/breaking the sentences to how it looks on the design. Is there anything you would have done differently?
Community feedback
- @AbhijitSarodePosted almost 3 years ago
Hi Farzeen,
Your code seems well written but since there is just one component I think <main> would suffice instead of <article>
You are already using global variables for colors so instead of just mentioning the values of colors you can mention them as hsl, RGB or hex colors, It becomes little easier to use especially when intellisense doesn't work as expected
When it comes to setting values for three different scenarios(or screen sizes) I think 'clamp()' gets the job done that way you don't have to mention it separately in media query
Btw you have <body> tag declared at two different places, I don't think it's a good practice to redeclare <body> tag so do look into it.
Instead of using precise percentage on width you can use 'calc()' and let CSS do the calculation work for you
Hope this helps
0@FarzeenKistPosted almost 3 years agoHey Abhijit, thank you for the feedback. I will make the necessary changes for the clamp,replacing article with main and using calc for the width.
Can you please clarify the 2nd paragraph(the one about the global variables), are you talking about my naming convention for my color utility classes?
Can you also please tell me on what line did I re-declare the body?
Awaiting your reply, Have a good evening/day : )
0@AbhijitSarodePosted almost 3 years ago@FarzeenKist Sure, in app.css your code looks like this - :root { --clr-dark-blue: 233 47% 7%; }
My suggestion was - :root { --clr-dark-blue: hsl(233 47% 7%); }
So your utility class becomes like this - .dark-blue { background-color: var(--clr-dark-blue) }
It's a minor change but sometimes small changes make huge differences
Do check Line 53 & 174 in app.css for body redeclaration
Hope this explanation clears things out for you. If you need more clarification, feel free to ask
1@AbhijitSarodePosted almost 3 years ago@FarzeenKist Sure, in app.css your code looks like this - :root { --clr-dark-blue: 233 47% 7%; }
My suggestion was - :root { --clr-dark-blue: hsl(233 47% 7%); }
So your utility class becomes like this - .dark-blue { background-color: var(--clr-dark-blue) }
It's a minor change but sometimes small changes make huge differences
Do check Line 53 & 174 in app.css for body redeclaration
Hope this explanation clears things out for you. If you need more clarification, feel free to ask
0@FarzeenKistPosted almost 3 years agoHey Abhijit Sarode. Thank you for your clarifications, I understand what you mean now. The reason I went this direction for the color variables is due to one of the things I've learnt from Kevin Powell's Space Website Course on Scrimba. Basically one of his recommendations was putting it this way would make it easier to deal with alpha values whenever needed when using rgb or hsl. Do you still suggest to make the necessary changes? I'll be making the changes for the body declaration issue, thanks for the tip!
Awaiting your response and wishing you a good day/evening.
0@AbhijitSarodePosted almost 3 years ago@FarzeenKist as soon as I saw your code, I understood you did Kevin's course (I did that too). I think it comes down design requirements and personal preference, either above method & if needed then separate {opacity: x} code or {hsl: (x,y,z /a)}
Personally if opacity is seldomly used then I prefer separate {opacity} code.
Btw, did you finish his space website? I am having trouble running it locally. My navigation tabs images in 2nd and 3rd page are not working. (Can't change planets and people images as tab is clicked) other content changes perfectly except images. If you have any thoughts on that, do let me know
1@FarzeenKistPosted almost 3 years agoHey @AbhijitSarode, makes sense. I'll take that into consideration next time and yeah here it would make sense to use opacity over alpha values so your suggestions about modifying the utility classes would make sense(when I have time,I'll do what you suggested). Sadly I can't help you yet :/ , I haven't been able to complete the course yet(since I'm trying to finish my full stack course first) and I'm currently on section 2/6 but if I do find something that could help you out, I'll definitely let you know. Have a good day/evening :).
0@AbhijitSarodePosted almost 3 years ago@FarzeenKist yes, that'll be big help, thanks a lot Farzeen🙏
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