Stats product challenge (HTML and CSS)

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hola Lucas, congratulations for your solution!

  I saw that you did pretty much anything, the container is working fine, its flexible and responsive. But there's some work to do around the container design and semantics.

  1.Use semantic tags to wrap the content, for example using section for each column and main for the general container.

  2.Do the import for the image using picture or img.

  3.Give it the properly overlay effect, you've used filter but is hard to get the same color with this effect, instead use mix-blend-mode: multiply; inside the img tag (note that in this case you have to import the image inside the html with <img>).

  Hope it helps and happy coding!

  Marked as helpful

  0
• 

  Luan•200

  @LuanFlorenciooPosted over 2 years ago

  Hola Lucas, acabo de enviar una solicitud de extracción allí en tu repositorio de github para que puedas ver la mejora que hice en tu código. Espero poder ayudarte.

  Mejoré algunas líneas de código e implementé la funcionalidad para dispositivos móviles y tabletas.

  Marked as helpful

  0

  ---

  

  Lucas•70

  @lu0teroPosted over 2 years ago

  @LuanFlorencioo Perfecto! Ahi la acepto! Gracias!!

  1
• 

  romila•3,570

  @romila2003Posted over 2 years ago

  Hi Lucas,

  Congratulations 🎉 on your second challenge. It was a good attempt, particularly in the desktop version.

  When looking at your design and code, I noticed the lack of responsiveness of your card when adjusting the screen sizes. Approximately at 1100px and onwards, your card looks great however when the screen size is less than that, the card does not respond properly. At 375px, it also looks good though due to the use of media queries. Thus, a good approach for your problem would be to use a mobile-first approach instead. There are many resources explaining the benefits of this approach however the main reason is because it is easier to adjust the layout as you increase the screen size. If you do not understand this concept properly, you can always research more about this through YouTube or other sources like websites or articles. So instead of using @media screen and (max-width: 375px) { }, you should use the @media screen and (min-width: xx px instead). The xx indicates the screen size you can use when increasing the screen size e.g. @media screen and (min-width: 700px).

  Also, it is good practice to use the main tag to wrap your content as it is semantically correct e.g. <main class="container"></main>.

  Hope these comments and suggestions provide some use. I wish you all the best in your future projects 👍.

  Marked as helpful

  0

  ---

  

  Lucas•70

  @lu0teroPosted over 2 years ago

  @romila2003 Thanks for the help! In the next challenge I'm going to try using mobile first and also include the main tag! Thanks again! 😊

  1