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

Responsive Stats Preview Card Component

@guilherme-dm

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'm curious about how you guys have handled responsivity on this one. I feel like i had to trigger a breaking point quite soon because text were starting to get very messy. If you have any suggestions, let me know šŸ¤™

Community feedback

Yazdunā€¢ 1,310

@Yazdun

Posted

Hello Guilherme ! Well done on this challenge. I studied your approach a little bit and here are issues I found :

GIT ISSUE

  • Before we get to the solution itself, There is a issue with your repo. I suggest you to create a main branch and put each solution on separate branch, so it will be easier to maintain the repo and also other people can contribute to your code more easily !

SOLUTION ISSUE

  • You don't need two media queries, first write your style for mobile and only then, write a media query for desktop.
  • Instead of span, You must use div for block level elements, for example .text-content is a block level element so you must use div instead of span.
  • for stats, You'll be better off with something like
<ul>
      <li>10k+<span>companies</span></li>
      <li>314 <span>templates</span></li>
      <li>12m+ <span>queries</span></li>
</ul>

instead of using div and span and heading. using ul is more efficient in this case IMO.

  • html elements are block level by default ( also this is one of the reason for why approaching mobile first is better ), so you won't need display:flex and flex-direction:column for initial style, you get the column by default.
  • Specify two font families in your styles, so if one of them is not supported by user's browser, the other one will be loaded and your design won't break.
  • Instead of .page-container, Use
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;

on body to centralize your element.

  • Instead of giving h1 and p text-align:center;, give their parent text-align:center and all children will inherit it.
  • You have access to the initial style you write for a element in media queries, so you only need to change parts that need to be changed, for example you don't need to specify font-family in media queries, it will remain the same anyway unless you want to change it.
  • Use prettier extension on your IDE to format your code.

āœ… Also I opened a pull request to your repo which will fix some of these issues

I hope this was helpful

Marked as helpful

1

@guilherme-dm

Posted

@Yazdun Thank you so much Yazdun. That was VERY helpful. I'll take a look on these topics you mentioned and at your pull requests.

About the Git issue. Is it possible at this point to separate the challenges i've already made into branches? Having each challenge in a different branch, can I still have a direct link to them? Thanks once again šŸ™Œ

0
Yazdunā€¢ 1,310

@Yazdun

Posted

@guilherme-dm Glad I could help šŸ¤ ! for git issue, Github pages supports only one branch for deployment, so you have two options :

  • First is creating separate repository for each challenge which will get messy and hard to manage overtime.
  • Second is creating one main repo, put each challenge on separate branch, and then deploy each branch on NETLIFY which is free and really useful ! All you need to do is create a free account, then sync your github with netlify, and each time you create new branch on your main repo, netlify will sync it and you can deploy it with one click on their website.

I do the same with my challenges repo

This way you can sharpen your git skills too which is great in the long run !

Marked as helpful

1

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