Submitted almost 5 years ago

Four Card Challenge using HTML + CSS

Nikkita Leftwich•140

@nlefty

Preview site View code

This is a solution for...Four card feature section

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Two months ago, I initially coded this as desktop first with the mobile layout in my media query. Today, I changed the css to be mobile first, then added the desktop modification in the media query.

Open to suggestions on other ways to write the html for the three column layout. For the desktop version, I added three divs within the main-card-wrapper div. It works but I'm suppose could be cleaner/simpler.

Community feedback

Matt Studdert•13,611
@mattstuddertPosted almost 5 years ago
Nice work on this challenge, Nikkita! How did you get on working mobile-first as opposed to desktop-first?

Your solution looks really good. I've just got a couple of small suggestions that will hopefully help:

I'd recommend never using IDs for styling purposes. They're too specific and can't be reused on the page. Instead, I'd stick to class, attribute, pseudo, and type selectors. It will keep your code much more maintainable, especially as you start building bigger projects.

I would recommend using display: grid on the .main-card-wrapper class. This will allow you to remove all the .card-column elements from your HTML, which will clean it up a little.

Overall though you've done an awesome job. Let me know if you have any questions! 👍
0
Nikkita Leftwich•140
@nleftyPosted almost 5 years ago
@mattstuddert thanks much for the feedback. I will def clean this up and keep in mind for the future.

Well this the very first challenge I started but when I viewed it on my phone, it was misaligned. So I worked on a few other challenges and submitted the Price Grid solution and one of the comments was to consider mobile-first the next time. When I came back to this one, I kept a lot of things but switched the code for a mobile first layout. I then had to tweak it a it bit with the middle column-which I def need more practice with-but overall I was quite pleased. 😉
0
Matt Studdert•13,611
@mattstuddertPosted almost 5 years ago
@nlefty nice! Yeah, you did a really good job! 👍
0

Please log in to post a comment

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