Skip to content
Submitted 6 months ago

Responsive layout using CSS flexbox

P
VirginiaPatrika•260
@VirginiaPat
A solution to the Blog preview card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proud that I completed the challenge and now I am getting used to "read" better the figma files. I didn't read all the instructions before starting coding, so I used media queries. Next time I will be more careful.

What specific areas of your project would you like help with?

Any feedback is helpful!

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Kamran Kiani•2,780
    @kaamiik

    Some notes which may improve your code:

    1. Decorative images do not need an alt message. The alt attribute in your img tag should be empty, like alt="". It seems that the top image is decorative here. Additionally, note that avatar images do not need alt text either.
    1. It is recommended to use a proper CSS reset at the start of your CSS file. Both Andy Bell and Josh Comeau offer excellent CSS resets. You can easily find them by searching on the internet.
    1. Using font-size: 62.5%; is generally considered a bad practice. It was also mentioned in the last challenge. It is better to adopt the habit of considering 1rem as equal to 16px. This will help maintain consistency and readability.
    1. It is advisable to use a unitless value for line-height. This approach ensures better scalability and consistency across different font sizes.
    1. There is no need to use media queries for the max-width of a container in this challenge. You should only have one max-width defined in your CSS.
    Marked as helpful
  • Tathiani Lima•120
    @TathianiLima

    Você foi muito bem, Parabéns!

    Minha sugestão é apenas mudar o <html lang="en"> para

    <html lang="pt-br">.
    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord