Design comparison
Solution retrospective
Hello good ppl,
Tried some more mobile-first, responsive design here. It's a bit of a rough draft - haven't gone over it carefully for problems yet. I'd appreciate it if anyone had any good tips or ways to reduce code / write more efficient code for this kind of page. I am constantly feeling like there are better ways for writing up the CSS in particular. Anyway, cheers!
*edit I've applied some of the feedback given in the comments, in particular regarding semantic HTML. I've also added a completed README.md file, and fixed up a couple other little things here and there. Thank you very much for the feedback!
Community feedback
- @darryncodesPosted over 3 years ago
Hi Jordan,
Great effort, well done.
Three concepts for you:
- BEM - some people hate it some love it but I find it useful when writing SCSS
- SASS - it enables you to write clean and re-useable code. Some features are variables, nested selectors, mixins and more
- Semantic HTML - essential for accessibility, this will help clear up your accessibility report. Use a
<main>instead of a<div>here:<div class="card-container">
Good luck with it all!
Marked as helpful2 - @dusanlukic404Posted over 3 years ago
Hi Jordan, very good challenge by you man, congratulations! It is probably one of the best solutions of this challenge I've seen.
Like @darryncodes I recommend you using semantic HTML elements, especially <main> in this challenge and also you can maybe try to add only two divs in first-half class other than three just to reduce that space between first two divs.
Good luck and well done one more time!
Marked as helpful1 - @afrusselPosted over 3 years ago
Good work. I just want to request you please take a look of my solution
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