Skip to content
Submitted 10 months ago

media queries, HTML5, CSS3, position:relative, position:absolute

P
Johann Maldonado•100
@Johann-Alpha
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'm proud that I could better understand relative and absolute positioning. I did it on purpose because there are new techniques to centring elements on the page and there are very few pages where this topic is well explained. I also learnt that I should use viewport heights (vh) instead of percentages to push elements to the centre of the page. I also learnt that I had to subtract half the height of the element so that it got completely centred on the page.

Next time I would try to find ways to reuse code, so that I don't have to write the same things every time I have a new breakpoint.

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

I noticed that there was a top padding on some of my text, but I had set all margins and paddings to zero. That made my layout not match perfectly. After some research, specially on https://www.figma.com/blog/line-height-changes/, I learnt that some fonts have that predetermined surrounding space and we can do nothing about it. I overcame this challenge by mathematically adjusting the relative positioning. Another thing that I didn't understand was why the footer didn't align well with the icon and the author's name. It turns out that the descender of the font is also taken into account for the height of the containing box, and that's why the icon lied above the letters. I could solve this by using the vertical-align CSS property set to text-bottom on the icon. That way, they icon would align with the descender.

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

So far, I could solve all the problems I faced. I will think about this question in future challenges.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Steven Stroud•11,890
    @Stroudy

    Awesome job tackling this challenge! You’re doing amazing, and I wanted to share a couple of suggestions that might help refine your approach…

    • Having a clear and descriptive alt text for images is important because it helps people who use screen readers understand the content, making your site more accessible. It also improves SEO, as search engines use alt text to understand the image's context, helping your site rank better, Check this out Write helpful Alt Text to describe images,

    • These <span> should really have semantic tags like headings (<h1> to <h6>) and paragraphs (<p>) convey structure and meaning to content, improving accessibility, SEO, and readability by helping search engines and screen readers interpret the content.<span class="author">Greg Hooper</span>

    • Using font-display: swap in your @font-face rule improves performance by showing fallback text until the custom font loads, preventing a blank screen (flash of invisible text). The downside is a brief flash when the font switches, but it’s usually better than waiting for text to appear.

    • Line height is usually unitless to scale proportionally with the font size, keeping text readable across different devices. Best practice is to use a unitless value like 1.5 for flexibility. Avoid using fixed units like px or %, as they don't adapt well to changes in font size or layout.

    • Using rem or em units in @media queries is better than px because they are relative units that adapt to user settings, like their preferred font size. This makes your design more responsive and accessible, ensuring it looks good on different devices and respects user preferences.

    • Avoid using the role attribute when native HTML tags (e.g., <main>, <body>) already provide meaning, as this is redundant and unnecessary for proper accessibility.

    You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟

    Marked as helpful
  • P
    MikDra1•7,470
    @MikDra1

    Well done, here are some things to review 😊:

    • REM for Units: It's best to use rem for all units instead of px, as this ensures scalability and consistency in spacing and font sizes based on the user's root font size. It helps improve accessibility.

    • Semantic HTML: Consider ensuring all elements are wrapped in semantic HTML tags like <main>, <section>, and <article> to enhance the structure and SEO-friendliness of the page.

    • BEM/Convention for Class Naming: Apply a class naming convention like BEM (Block Element Modifier) to make the styles modular and more maintainable. For example, use .card__title or .card--highlighted.

    • CSS Reset: Consider adding a full modern CSS reset (like normalize.css or custom resets at the beginning of the stylesheet) to ensure consistent styling across different browsers. Here is a link to one I really like.

    • Clamp() for Responsiveness: Use the clamp() function for fluid typography and spacing, allowing elements to resize smoothly between a minimum and maximum value based on the viewport size (e.g., font-size: clamp(1rem, 2vw, 1.5rem)).

    • Responsive Card: To make the card responsive, ensure the layout uses flex or grid combined with max-width instead of fixed width values. This will make the design more flexible and adapt better to different screen sizes.

    • Use max-width/min-width and max-height/min-height: Instead of using fixed width and height, opt for max-width or min-width to allow the elements to resize smoothly on different screen sizes, improving overall responsiveness.

    Hope you found this comment helpful 💗💗💗

    Good job and keep going 😁😊😉

    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