Responsive 3 column preview card component using Flexbox and Sass
Design comparison
Solution retrospective
I would appreciate any feedback or tips.
Specifically, I'm wondering how I did on my mixins and media queries. I struggled a lot with the phone layout.
Why isn't my background color working?
I thought I'd give utility classes a try for margins. It worked, but I'm not sure if I should have used them in this case.
Also, I'm looking for any feedback on how I could make my code better, prettier, more efficient, and up to date. I tried to keep accessibility tips from my last challenge in mind, so we'll see how I did this time.
Community feedback
- @kens-visualsPosted about 3 years ago
Hey @laurel-ray 👋🏻
I have some suggestions to help you fix the HTML issues and some other things.
- First, it's awesome that you already added
aria-hidden="true"
to the icons, however, you still need emptyalt
tags for them to fix the errors. - Next,
backgrounnd-color
ofbody
should be#f2f2f2
, instead of plain white. - Also, I suggest adding transition: all 0.2s; to the button and the links, this will make :hover smoother.
I hope this was helpful 👨🏻💻 you did a superb job for the second project, keep it up. Cheers 👾
Marked as helpful1@laurel-rayPosted about 3 years ago@kens-visuals Hi again! Thanks for your feedback. I was able to fix these issues, I think.
0@kens-visualsPosted about 3 years agoHi again @laurel-ray, sorry I forgot to mention that you still need
alt
tag but empty in this case. I know it's kind of weird, but that' just HTML 😅0 - First, it's awesome that you already added
- @seekinfoxPosted about 3 years ago
You have wrong variable-name /spelling-mistake in
background
that's why it is not working.I had trouble finding main scss file, I think you can put .scss files in
scss
folder and compile them incss
folder, that would organize your code well.Also you can add README.md file so visiters can have understanding of your project without going through your code.
You can use read-template.md file for reference, it's available in download zip.
Marked as helpful1@laurel-rayPosted about 3 years ago@seekinfox Thank you, I think I was able to fix these issues. I appreciate your feedback.
0 - @laurel-rayPosted about 3 years ago
I wanted to mention I'm still pretty new to github so if this repository looks a mess, that's why.
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