Skip to content
Submitted 3 months ago

Blog Preview solution

Mickell G•50
@Mickellg
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

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

I'm most proud of using a mobile first css styling.

What challenges did you encounter, and how did you overcome them?

Styling the image to both be responsive and show the correct parts of the image was challenging.

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

I wasn't confident on when to use max-width or width and define the width. Using margin sometimes worked, but was tricky styling the image.

Community feedback

  • Marcus•120
    @222sucramPosted 2 months ago

    The solution follows the design for the most part and is responsive on different screen sizes. However, the card itself isn't centered vertically.

    The easiest improvement would be to add semantic HTML, using an <article> tag for your wrapper, and a <figure> tag for the images.

    When using max-width, I usually set the max width of parent elements and the content within that element dictates the width up to a certain point.

    I found this video to be helpful:

    https://www.youtube.com/watch?v=x4u1yp3Msao&t=923s

    Marked as helpful
    0
    Mickell G•50
    @MickellgPosted 2 months ago

    @222sucram Are you suggesting I use <figure> tags in order to set everything under as the fig caption? Why is the reasoning and use cases behind your reasoning?

    I'll be sure to take a look at this video!!!

    0
    Marcus•120
    @222sucramPosted 2 months ago

    @Mickellg In this case I think a figure tag is suitable, but you can also use an <article> tag

    The reasoning and use cases for using Semantic HTML is for accessibility purposes as well as SEO. While you the developer may know that a div is supposed to be a header and another div is the footer, the browser doesn't recognize this.

    Whereas, using a <header> or <footer> tag; site readers for visually impaired users can understand the structure of the page. The same applies to SEO. A site that uses semantic tags will perform better on search engines.

    I used the following link as reference:

    https://www.semrush.com/blog/semantic-html5-guide/#semantic-html-tips-&-best-practices

    Hope this helps.

    Marked as helpful
    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