blog-preview card

Hi, congrats on completing the challenge ! I see you are active on the challenges recently but I think you didn't get deep review on your previous submissions. I notice some things related to fundamentals that you should fix in this one and all the other challenges you completed.

Does the solution include semantic HTML?

• a <main> landmark is missing. The main element represents the main content of the body of a document or application. -w3c
• alt attribute should not mention image img, picture etc. They are here to describe the content of the image for users who cannot see it.
• is a <button> appropriate for the "learning" category? It will take focus.
• you can use the element <time> with the datetime attribute for the published date.

Is it accessible, and what improvements could be made?

• The container has a fixed width in pixels. so it doesn't scale with the content if the user change the default browser font size. Change this to a max-width in rem instead.
• The focus isn't correct as it only focus on "learning" when using keyboard navigation. The focus should be the title of the card. The card is a leading preview card of a blog article so there should be a link in this too.
• Missing indication of interaction on the title and on the card itself.
• the avatar alt can be skipped as the name is mentionned next to it.

Does the layout look good on a range of screen sizes?

• Centering the card will look better for this project as mentionned in the other comment :)
• You don't need media query on this challenge (and media query should use relative units too). Add a max-width in relative units (rem) intead of the fixed width you have now.

Is the code well-structured, readable, and reusable?

• You should really add a modern css reset at the beginning of your stylesheet. check Josh Comeau or Andy Bell css resets they are both great.
• Try to specify classes to style elements and don't style the direct html element unless its ment to be global style.

Does the solution differ considerably from the design?

• It looks close to the original design.

Try to check all these issues and recommandation and get in touch on discord if you have any questions. Don't rush on the challenges and improve the ones you already did :)

Happy coding !

Congratulations on completing this challenge. The page looks good and is responsive.

I notice that the card is not centered on the page in desktop view. This is because you are trying to position the card by using margin-top, margin-left, and margin-right. There is a better way using flex. By using the body element as a flex wrapper around the "container" div, you can use flex properties to center the container. Try this:

      body {
        background-color: hsl(47, 88%, 63%);
        font-family: "Figtree", sans-serif;
     /* add these display properties  */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
      }
      .container {
     /* remove these margins */
     /* margin-left: auto;
        margin-right: auto;
        margin-top: 20px;         */
        background-color: white;
        width: 350px;
        height: auto;
        padding: 15px;
        border-radius: 15px;
        box-shadow: 8px 8px 0px 0px #121212;
        border: 1px solid hsl(0, 0%, 7%);
      }

Also, the active state changes the color of the h3 when you hover over it.

      h3:hover {
        cursor: pointer;
        color: hsl(47, 88%, 63%);
      }

Hope this helps! And keep on coding.