Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Mobile first site using HTML, CSS, and Flexbox

Tamera 110

@tlbodrick

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi, everyone. I'm pretty new to HTML and CSS and this is the first thing I've ever coded after watching a short, basic HTML and CSS guide, so go a bit easy on me.

Questions:

Is there anything I could've done more efficiently/succinct?

I found myself confused on when to use padding and when to use margin when there isn't a border to create a difference in appearance. What's standard?

I didn't know what media query min/max-width to use for when to switch between mobile and desktop and instead chose the px for when the image started to be cut off. Do you have any reccomendations?

Community feedback

dewslyse 3,025

@dewslyse

Posted

Hello Tamera.

Congrats on building your first project. You did good on this challenge.

In simple terms, margins create extra space around an element while padding creates space within an element. These links from MDN Web Docs should be helpful 🔽

For breakpoints ('media query min/max-width'), you can use these examples from w3schools as a reference

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

All the best

0

Please log in to post a comment

Log in with GitHub
Discord logo

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