I actually think the biggest issues here are with html knowledge. I recommend you spend some time really focusing in on meaningful html structure as this needs quite a few changes (some essential, and some general recommendations). I'll try to list them out.
- All content should be contained within landmarks. It's great you've got a main landmark in here, but make sure the attribution is in a footer.
- This is one component. That could be one section but shouldn't be split into two sections. Try to think of a section as a chunk of content that has a h2. (Sections are actually meaningless unless labelled, but I think it's good to get into the habit of using them well in case you ever need/want to label one in future.
- There's no need for the div wrapping main. If you want the body or the main to have padding, give it padding.
- This component should be using the picture element not two Img elements. The mobile img src should be the default in the img element within the picture, and there should be a source tag above referencing the larger screen img source with a min-width media query defined in rem or em. It's important to learn how to use the picture element so you're serving images in a performant way and not forcing all users to download all images.
- This is not how you write img alt. There is a great post in the resources channel on discord about how and when to write alt text that is worth reading!
- There is only one heading in this. It's extremely important for accessibility and SEO to only use headings appropriately and in the correct order. They are the main elements that explain the content structure on a page and they are relied on for navigation by those using assistive tech. Remove the h2s and h3s in this.
- Those stats should be a list with 3 list items. Note the list items are the meaningful elements here. The numbers and words must be read out together to make any sense. To split them visually only, so you can apply different styles use strong and span (or both spans, but set to display block so they can vertically stack).
- If links are set to open in a new tab you need to notify assistive tech users of that behavior. The most common way to do that is with some visually hidden text in a span within the link that says "(opens in a new tab)"
Marked as helpful
With the styling I recommend you try to simplify this and get it closer to the design if you can.
- only have a single max width on the component in rem, then another wider max width on larger screens (still in rem). Remove any other explicit widths, min or max widths in this. They're unnecessary and can cause bugs.
- to do the image colour like the design that half of the card needs the violet background, then the img needs mix-blend-mode multiply and opacity 0.7.
- remember text color and alignment will inherit from parent elements so doesn't need repeating a lot.
- to center the component on the screen use flex properties and min-height 100svh (eg on the body).
- remember if using flex or grid, you have the gap property at your disposal. Much cleaner than a directional margin on the child elements to create those gaps.
- the border radius can be set once at component level. It isn't needed on the child elements and to change in media queries. Just make sure you include overflow hidden on the component so overlapping child corners can be cropped out.
- Never ever define font size in px. This is really important.
Marked as helpful
@mrsaviBeliVojvoda
Posted
@grace-snow
I want to thank you for your time and for the valuable comments regarding the solution I posted. You are completely right about the <picture> tag, which I completely forgot about. I've heard of it, but I didn't realize it could have excellent application in this case. I also understand that I should have presented the statistical data as <li> elements, which would greatly simplify the design and transformation from a column display to a row display. I understand your criticism regarding the use of semantically specific tags and how important it can be for optimization.
I will try to improve my knowledge of HTML architecture and apply the advice you generously gave me in the next projects.
@mrsaviBeliVojvoda refactor this project before moving on to anything else.
