Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Solution using CSS and HTML

prisnak 10

@prisnak

Desktop design screenshot for the Base Apparel coming soon page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any feedback about structure and how I could improve the CSS of this project is welcome.

Community feedback

P
Matt Studdert 13,611

@mattstuddert

Posted

Nice work on this challenge and congrats on submitting your first solution! Here are a couple of pointers after taking a look at your code:

  • Avoid using IDs as CSS selectors. They have high specificity and can't be reused on the page, so they're not good for the purpose of styling. Instead, I'd recommend sticking to class, attribute, pseudo, and type selectors. Using these will help keep your CSS more maintainable.
  • The responsive side of your project could do with a review. From 376px up to small desktop size, the layout doesn't fit the screen creating a horizontal scrollbar. Have you ever tried using min-width media queries instead of max-width? It's quite a common workflow with front-end developers to use them and work mobile-first. It can often lead to less CSS code and has the benefit of loading in fewer styles for mobile users, which can be a nice performance gain. It is also simpler than mixing both min-width and max-width, as you've done.

I hope these pointers help. Let me know if you have any questions. Keep up the great work!

0

prisnak 10

@prisnak

Posted

@mattstuddert Thanks a lot for this feedback. I will pay attention on those points next time. :)

0

Please log in to post a comment

Log in with GitHub
Discord logo

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