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

Stats Preview Card

Brotli 90

@Brotli

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


I would like some tips on how to make pages to adapt with mobiles too, I welcome any comments

Community feedback

@Mozzarella-chz

Posted

First thing i noticed with your code is your exclusive use of ID selectors for your elements. I would suggest learning when to use ID selectors versus class selectors. With proper usage of class selectors you could skim down your code to be much easier to work with and you will be all the more efficient. For example:

<div id="details"> <div id="companies"> <h2>10k+</h2> <p>COMPANIES</p> </div> <div id="templates"> <h2>314</h2> <p>TEMPLATES</p> </div> <div id="queries"> <h2>12M+</h2> <p>QUERIES</p> </div>

Instead of giving each statistic an ID you could give all three of those divs a class to group them similarly. It would look like this:

<div class="Statistics"> <div class="stat"> <h2>10k+</h2> <p>COMPANIES</p> </div> <div class="stat"> <h2>314</h2> <p>TEMPLATES</p> </div> <div class="stat"> <h2>12M+</h2> <p>QUERIES</p> </div>

This will make your CSS markup much easier to edit and format. My next suggestion would be to learn flexbox. It is incredibly helpful with layout and moving divs around in the exact way you want em. I did alot of reading on flex which it is a little overwhelming at first, but gets easier with practice. Here is a fun little game to get aquainted https://flexboxfroggy.com/

Good luck and good job!!! Keep coding!

Marked as helpful

1
maym42 370

@maym42

Posted

To make a mobile-friendly design use @media in your css file.

Example @media

Marked as helpful

1
Ahmed 105

@Kirin02

Posted

i would recommend that you study more flexbox so that you avoid positionning you elements using top and right and float with specfic use of px which made ur H1 and Description collapse into each other and media queries to make your website responsive on most devices

Marked as helpful

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