Skip to content
Submitted 10 months ago

Responsive grid, media query, flex-box, position absolute

Daniel Sodré•40
@DanielJavaprogrammer
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Tentei explorar propriedades como position relative e absolute, ja que so trabalho com flex-box e css grid. Creio ter ficado bom. Projeto simples, mas e gostoso para poder praticar. Sinta-se livre para comentar e dar dicas.

I tried to explore properties like position relative and absolute, since I only work with flex-box and css grid. I think it turned out good. Simple project, but fun to practice. Feel free to comment and give tips.

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted 10 months ago

    Hello there 👋. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    • The <figure> tag should be used only when captions are required with <figcaption>. In this challenge, it is not required.

    • For a photo of a person, use their name as the alt text

    • The alt attribute should not contain the words "image", "photo", or "picture", because the image tag already conveys that information.

    • Use min-height: 100vh instead of height. Setting the height to 100vh may result in the component being cut off on smaller screens, such as a mobile phone in landscape orientation.

    I hope you find it useful! 😄 Above all, the solution you submitted is great!

    Happy coding!

    Marked as helpful
    1
    Daniel Sodré•40
    @DanielJavaprogrammerPosted 10 months ago

    Tks for suggestions.I will make the requested changes. @MelvinAguilar

    0
  • Daniel 🛸•44,270
    @danielmrz-devPosted 10 months ago

    Fala Daniel!

    Mais um excelente projeto! Parabéns!

    Tenho apenas uma sugestão nesse:

    • Visto que o título principal do card é o texto HTML & CSS foundations, coloca o h1 nele ao invés do texto Learning.

    Isso pode te gerar a dúvida:

    • Po, vou colocar o h1 no meio do card e um h2 antes dele?

    Bom, aquela caixinha não é um título, então pode muito bem ser um span (ideal pra pequenas porções de texto ou palavras soltas)

    Espero que ajude!

    Fora isso, está excelente!

    Marked as helpful
    0
    Daniel Sodré•40
    @DanielJavaprogrammerPosted 10 months ago

    Opa chará .. Verdade. Não tinha pensado nisso. Valeu @danielmrz-dev

    0

Please log in to post a comment

Log in with GitHub

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