Design comparison
Solution retrospective
Hi guys.
I am very pleased with the design of this particular project. I am proud that I was able to use two days to finish it.
However, I hope to improve the speed next time.
What challenges did you encounter, and how did you overcome them?Designing with pure CSS is a little challenging. However, I am proud that I can now design interfaces with CSS Flexbox and Grid.
What specific areas of your project would you like help with?I know how to get media queries. But I have a challenge with declaring different media queries and using them on the same project.
Can someone help me with an explanation concerning declaring multiple media queries on CSS and using them in the same project to cover all devices for that project?
Community feedback
- @grace-snowPosted 8 months ago
There are fairly significant problems in the html on this and the way you are approaching vue. Is this your first attempt at a Vue project?
You shouldn't be using things like query selectors in vue but more computed props and v-ifs.
Don't forget the essential foundations of good html when you start working with js frameworks like:
- always containing content within landmarks (this needs a header and main)
- appropriate alt text on images
- not repeating markup for mobile vs desktop
- an accessible disclosure button pattern directly before the nav list for the mobile menu toggle.
- using the picture element for serving responsive images in a performant way.
- not wrapping elements in extra divs for no reason.
- including appropriate headings, even if these need to be visually-hidden when not included in the design (this is extremely important in this particular challenge)
- using headings at the correct level as well as links for the article headings.
- never ever having font size or line height in px (extremely important)
Marked as helpful1
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