Responsive Stats preview

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted over 1 year ago

  I'm afraid you need to change quite a bit in this. It's really important you learn to apply well structured meaningful html before moving on.

  1. The image half of the component should contain a picture element not just an img. The mobile img src should be the default and then the desktop image src goes in the source tag with a media query defined in rem or em.
  2. Look up how and when to write alt text on images. There is an excellent post about this in the resources channel on discord.
  3. The 3 stats in the component should be a list with 3 list items in it. Don't use span or divs only for text, you should always be able to use a meaningful element. This is a really important step to learn - translating designs into html is all about imagining the content separate to the design and choosing the most appropriate elements for that content.
  4. Don't style on IDs! That's not what they are for. Every ID must be unique on a page so you cannot use them like this for component styling. They also drastically increase css specificity so would create a nightmare managing styles in bigger projects. Use single class selectors for styling whenever possible. For more about what the ID attribute is I've written a full post about IDs
  5. It is better for performance to link fonts in the html head instead of css imports.
  6. Always use a modern css reset at the start of the styles in every project. Get into the habit of using it now. Andy Bell has a good one you can look up and use.
  7. Never limit the height of elements that contain text. You must change height 100vh to min-height. This will be causing a serious overflow bug in your code at the moment.
  8. The max width on a component must be in rem not px or %. This means it will work well for all users, including those who use a larger text size.
  9. Don't set height on this component. Let the browser do it's job and decide what height is needed based on the content. Remove all heights and widths in this. Only the img will need height and width 100% on desktop.
  10. You can place the border radius once on the component along with overflow hidden to crop out the overflowing child corners instead of setting it on individual child corners.
  11. To do the image colour that half of the card should have the violet background color and the img should have mix blend mode multiply and opacity 0.7.
  12. font-variation-settings is only applied to variable fonts. You don't need to add that or font-optical-sizing in this. You also don't need to set font style normal unless applying it to something that wouldn't be. It's already the default.
  13. ⚠️ Font size must never ever be in px. Use rem.
  14. Media queries must be defined in rem or em not px and you will never need to apply one at a small screen size like the equivalent of 375px. You only add a media query at the point where there is room for the layout to change. It's worth reading my post about media queries

  16