Submitted about 2 months ago

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

Johann Maldonado•100

@Johann-Alpha

Preview site View code

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 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.

Community feedback

Steven Stroud•11,870
@StroudyPosted about 2 months ago
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
1
Johann Maldonado•100
@Johann-AlphaPosted about 2 months ago
@Stroudy Thank you for your insightful comments. I will definitely put your advice into practice. I didn't know about that swap value existed. The comment about the line height was also very helpful.
1
Steven Stroud•11,870
@StroudyPosted about 2 months ago
Hey @Johann-Alpha, No problem, I'm glad you found this information useful, Let's go 💪
1
MikDra1•6,920
@MikDra1Posted about 2 months ago
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
0
Johann Maldonado•100
@Johann-AlphaPosted about 2 months ago
@MikDra1 Thank you for your advice. I learnt a lot by reading you. I had forgotten about the BEM convention, so your advice is a very good refresher. Thank you for the reset suggestion, I will use it from now onwards. I will have to learn a bit about that clamp() function. It is totally new for me. Thank you for your time and your suggestions.
0

Please log in to post a comment

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