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 component using flexbox mobile first design pattern

Rashi• 165

@shangum

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


  1. When using responsive css units is it common to begin using them from the beginning in design or do most people start with pixels and then convert those pixel values to responsive units?

  2. I was a little paranoid about getting the hue and brightness of the image correct. It seems like mine is a little bit darker but I left it as is. At one point I was playing around with the idea of having a white/gray div overlay with a super low opacity. My thought was that would make the body background as well as the image purple a tad lighter. Is this approach common or should I be more concerned with properly setting the "mix-blend-mode" and playing with the opacity of the color behind the image?

  3. I added the css rules targeting a tablet of size 768px as a bonus. When designing for the 3 main screen sizes ( Desktop, Tablet, and Mobile) what are the general rules of thumb that are used when doing these layouts. Aka what are the screen sizes or constraints that you usually start out with? (Note: it wasn't to bad for me during this challenge since the style guide said to target 1440px and 375px)

Feel free to dish out design pattern critiques or thoughts/meditations.

Thanks

Community feedback

Raymart Pamplona• 16,140

@pikapikamart

Posted

Hey, awesome work on this one. Layout in desktop looks great, the responsiveness could be better, because at point 1000px going down to 750px, the content on the left side gets hidden. The mobile layout however looks really great.

For your questions:

  • I always use responsive unit, mostly rem. When I am coding, it is troublesome to convert manually every pixel unit to rem, that is why, in my scss, I create function where I could just put the pixel unit, then it convert it to rem.
  • For this one, I don't really know what to use since I haven't made this project. Some uses what you mentioned, background-blend-mode along with opacity to control the color of the purple overlay. You can see other solutions on this one challenge if you visit your solution, then click visit challenge hub then in there, select the solutions tab.
  • Usually, the mobile version is what I use on tablet layout. Since I now do mobile first, using maybe 800-900 pixels, is where I set the desktop layout, but sometimes I change, it depends on how the design looks at some screen-size. Sometimes, I mix the desktop layout and mobile layout, before transitioning to only desktop or mobile.

Some other suggestions would be:

  • Always have main element to wrap the main content of your webpage. This helps users to properly navigate your site. For this one, you could use main on the card selector instead of just div.
  • For the .card-content you don't need to add width: 36.667em.
  • The text Get insights that help your business grow. should be a heading tag, using h1 would be really great on this.
  • Also, when you have a text-content, do not just use div to wrap the text, use p tag. Make sure to wrap content in a meaningful element.
  • For the card-stats selector, you can use ul element on those, since if you look at it, those are "list" of information about the company website.

If you have more queries, just drop it here okay. Aside from those, great workagain on this one.

Marked as helpful

1
Rashi• 165

@shangum

Posted

Hey @pikamart . Thank you for the information. It was beyond useful. Currently I am currently in the beginning phase of another challenge and will make sure to implement it in the manner you suggested.

Right after I will update the code for this project in an attempt to cement the concepts.

Wish me luck as I now need to take the Sass leap of faith.

Thank you again for taking the time to review my submission!

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