Stats preview card component using HTML5 and CSS3

Community feedback

• 

  Etienne Desfontaines•160

  @etiennedesfontainesPosted over 3 years ago

  Hi Satwik,

  Well done on completing your first Frontend Mentor solution.

  For positioning:

  1. Using "Display: flex" on your body element and justifying and aligning your content to centre is an excellent choice, well done.
     Instead of using float to position the elements within your main element, you can also turn to flexbox. It's a really versatile tool. Here is an incredible resource that helped me fully understand how to use it: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

  2. Your choice to use absolute positioning to lay your color-box over your photo is great. However, it would be easier if you gave your main element a position of relative, and stipulated the top property of your color-box to be 0. An absolutely positioned element is removed from normal document flow and positioned relative to it's nearest positioned ancestor. See this link for full details on positioning: https://developer.mozilla.org/en-US/docs/Web/CSS/position

  -Alternatively, and perhaps more effectively, you can use mix-blend mode for your color overlay. Checkout @W1lsonCodes solution for an example as to how effective this method can be.

  3. Your mobile view looks like it could do with some adjustment. You have chosen to approach this challenge with a desktop-first solution, which is fine. It will just require you to use media queries to adjust some of your style declarations for mobile responsiveness. e.g @media screen and (max-width: 345px){ body{display: block} etc etc} Here is a link to help you out if you're not yet familiar with media queries: https://www.google.com/search?client=firefox-b-d&q=using+medias+queries+yourtube#kpvalbx=_jm3tYMeLDIXC8gLAwKWADQ17

  I hope my feedback brings some guidance. I look forward to seeing another iteration of this solution.

  Marked as helpful

  3

  ---

  

  Satwik Modi•10

  @SatwikModiPosted over 3 years ago

  @etiennedesfontaines Thanks for the feedback.

  0

  

  Etienne Desfontaines•160

  @etiennedesfontainesPosted over 3 years ago

  @SatwikModi It's a pleasure. please feel free to drop me any further questions you may have, I will happily provide advice and guidance where I can.

  0

  

  Satwik Modi•10

  @SatwikModiPosted over 3 years ago

  @etiennedesfontaines Hi Etienne, thanks for the help. I have modified the code and did as advised. Please check it out.

  Solution URL: https://github.com/SatwikModi/Stats-preview-card-components

  Live site: https://satwikmodi.github.io/Stats-preview-card-components/

  Thanks in advance.

  0

  

  Etienne Desfontaines•160

  @etiennedesfontainesPosted over 3 years ago

  @SatwikModi

  Your desktop (1440px) styling is looking on point with the design, well done.

  That said, I think there are a few things, worth being aware of, that will make stying future projects a lot easier:

  1. The CSS Box Model. Everything in CSS has a box around it. Being able to understand these boxes is key to understanding how CSS elements interact with one another and being able to create predictable layouts.

  • Most importantly, for future projects, I would suggest you include "box-sizing: border-box" as part of your universal style declaration. e.g

  • { margin: 0; padding: 0; box-sizing: border-box} It essentially activates the alternate box model, which calculates the content area of an element by taking the value of the width and height properties and subtracting the padding and border values from them. ie An element will always remain true to it's width and height settings, rather than having them change when you add border or padding. Very useful.

  -I do not recommend applying this to you existing project because it will result in you needing to adjust all of your your width and height values.

  -Check out this link for full details: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model

  2. Your use of flexbox is working, but I think you could have made your life far easier by wrapping your .message and .image-header in another div. i.e .card That way, if you were to apply "Display: flex; to .card it would automatically create the desired layout for its children elements.

  3. Responsiveness: Although your desktop styling is looking great, it is still not responsive and as such is not translating well on a mobile screen (375px wide). In order to create this responsiveness:

  a) Use your browser dev tools to view your card component on a 375px screen. Heres a link for how to do it in chrome incase you're not yet aware: https://www.browserstack.com/guide/view-mobile-version-of-website-on-chrome

  b) At the bottom of your current CSS styling, create a media query that reads: @media screen and(max-width: 375px){}

  c)Adjust your current styling to resemble the mobile design image included in your design folder. You do this by adding your new styles between the curly brackets of your media query: eg:

  @media screen and (max-width: 375px){ body{ flex-direction: column; } }

  The link I added in my earlier feedback is for a great video that gives, what I found to be, a really helpful overview of media queries.

  I look forward to seeing your mobile view all styled up. If you manage to get it as close to the design as you have your desktop iteration, then you're doing really really well.

  Remember that padding is your friend. ;)

  Good luck.

  1

  

  Satwik Modi•10

  @SatwikModiPosted over 3 years ago

  @etiennedesfontaines Thank you so much for your valuable feedback. Will keep in mind all the points.

  0
• 

  Chinmay Agarwal•235

  @chinmayagarwal3007Posted over 3 years ago

  You can use CSS grid 😊

  Marked as helpful

  0

  ---

  

  Satwik Modi•10

  @SatwikModiPosted over 3 years ago

  @chinmayagarwal3007 Thanks. Will keep it in mind.🙂

  0
• 

  Jaydi•355

  @ruedasjnthnPosted over 3 years ago

  You can use grid to properly control your card component, take note the it might be easier to use grid with sass

  0

  ---

  

  Satwik Modi•10

  @SatwikModiPosted over 3 years ago

  @ruedasjnthn Thanks. Will keep it in mind.

  0