Semantic Html elements, CSS custom properties, Javascript
Design comparison
Solution retrospective
I am proud of being able to use media queries to display optimal layout for devices with different screen sizes and also being able to advance the project more with my personal idea with javascript.
What challenges did you encounter, and how did you overcome them?The challenge i encountered was the appropriate use of media queries and i was able to overcome this by making research. You can check out the resource i used in my github repo
What specific areas of your project would you like help with?Anywhere you think that i should improve on?
Community feedback
- @StroudyPosted 2 months ago
Hello again, Fantastic effort on this! You’re really nailing it. Just a few things I noticed that could make it even better…
-
Having a clear and descriptive
alt
text for images is important because it helps people who use screen readers understand the content, making your site more accessible. It also improves SEO, as search engines usealt
text to understand the image's context, helping your site rank better, Check this out Write helpful Alt Text to describe images, -
This should be in lowercase
<h4>PERFUME</h4>
and styled in CSS withtext-transform: uppercase;
, Keeping text lowercase in HTML improves accessibility and SEO. Usingtext-transform: uppercase;
in CSS separates content from style, ensuring screen readers interpret the text correctly. -
While
px
is useful for precise, fixed sizing, such asborder-width
,border-radius
,inline-padding
, and<img>
sizes, it has limitations. Pixels don't scale well with user settings or adapt to different devices, which can negatively impact accessibility and responsiveness. For example, usingpx
for font sizes can make text harder to read on some screens, Check this article why font-size must NEVER be in pixels. In contrast, relative units likerem
and adjust based on the user’s preferences and device settings, making your design more flexible and accessible. Usepx
where exact sizing is needed, but prefer relative units for scalable layouts. If you want a deeper explanation watch this video by Kevin Powell CSS em and rem explained. Another great resource I found useful is this px to rem converter based on the default font-size of 16 pixel. -
Using
rem
orem
units in@media
queries is better thanpx
because they are relative units that adapt to user settings, like their preferred font size. This makes your design more responsive and accessible, ensuring it looks good on different devices and respects user preferences. -
For future project, You could download and host your own fonts using
@font-face
improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable. Place to get .woff2 fonts
You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟
0 -
- @nimrodEDEPosted 2 months ago
you can center the container by giving the body a display:flex and align-items : center.
that should do the trick !
other then that looks great ! keep up the good work .
0
Please log in to post a comment
Log in with GitHubJoin 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