Design comparison
Solution retrospective
All comments are welcome ^^
Community feedback
- @siavhnzPosted about 2 years ago
Hello Nien, Congrats on completing this challenge
I like your comments on the CSS custom variable; I'll apply your approach in my upcoming solutions.
I have some recommendations if you don't mind:
It will be better to use landmark tags like
<main>
and<article>
for accessibility instead of a bunch of<div>
; More on this topicIt's easier to start with mobile workflow and proceed to the desktop mode. To begin with the mobile-first design, you can use chrome dev tools. This also may help you
Don't put your images in the CSS file; instead, use the below code with the appropriate media value.
<picture> <source media="(max-width: 1023px)" srcset="./assets/images/image-header-mobile.jpg" /> <source media="(min-width: 1024px)" srcset="./assets/images/image-header-desktop.jpg" /> <img class="" src="./assets/images/image-header-mobile.jpg" alt="" /> </picture>
I hope this helps you.
That will be great if you come to my solutions page and tell me what you think and which part I must improve.
Happy coding
Marked as helpful1@trandainienPosted about 2 years ago@siavhnz Thank you for your detail comment. Really appreciate it <3
1
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