Skip to content
Submitted 24 days ago

Responsive Web Page with Custom Typography and Adaptive Font Sizes

Ahmed-Abdul-ghaffar•40
@Ahmed-Abdul-ghaffar
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 proud of overcoming challenges and learning new things throughout this project. One key challenge was working with custom font families installed locally, rather than using web font services. Initially, I didn't fully understand the purpose of each font file or how to implement them. However, after researching, I was able to grasp it and successfully apply them, thanks to God.

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

Using a custom font family locally on my computer was a key learning experience. For example, the file Figtree-Italic-VariableFont_wght is used when I want to apply the italic style with various font weights. Here's how to include it in the CSS file:

@font-face {
  font-family: "figtree";
  src: url(assets/fonts/Figtree-Italic-VariableFont_wght.ttf) format("truetype");
  font-weight: 100 900;
  font-style: italic;
}
What specific areas of your project would you like help with?

HTML File:

  • How is the overall structure of the page? Any feedback on its organization?

CSS File:

  • I noticed that the first image in the card is displayed differently on desktop and mobile (cropped on mobile devices). To address this, I manually cropped the image and used it specifically for the mobile version, so now I have two images: one for desktop and one for mobile. Is this approach considered professional?

Overall Feedback:

  • Is it acceptable to rely solely on ChatGPT for help with this project, or should I explore other resources and websites for a more comprehensive approach?

Community feedback

  • Kamran Kiani•1,170
    @kaamiikPosted 13 days ago

    Hi Ahmed. Congrats for doing this challenge. I noticed some points in your code I wanna mention:

    1. Try to use a proper CSS reset at the start of your CSS style. Andy Bell and Josh Comeau both have a good one. You can simply search on the internet to find them.

    2. The header tag should be outside the main and as a sibling not a child. Usually We use header for logo images and navigation items at the top of the page and other contents are main and footer. Here you do not need any header in your html.

    3. Decorative images do not need an alt message and inside your img tag the alt attribute should be empty like alt="". It seems that the top image is decorative here.

    4. Elements that have hover effect are interactive. So because you have hover effects for your h1 then It needs to be a or button. So now you have too choose between a and button. If the element take you to a new page It should be an a tag and If do an action like submit a form or add to cart then It should be a button. In your challenge you have h1 and inside the h1 you have to wrap it into a interactive element too.

    5. You do not need any footer in this challenge.

    6. height: 100vh strictly confines the height to the viewport size, potentially causing overflow issues if the content is larger than the viewport. On the other hand, min-height: 100vh allows your element to grow in height if the content exceeds the viewport size.

    7. Never limit your width and height in acontainer or element or tag that contains text inside. When you limit the width and height of elements containing text, you risk the text being cut off, overflowing, or becoming unreadable, especially on smaller screens or when the text dynamically changes. It's generally better to allow the container to adjust its size based on its content or set a flexible size that can adapt to different screen sizes and text lengths. You only need max-width here because it prevents elements from stretching beyond a certain point, keeping them visually appealing across different screen sizes. It ensures your design remains adaptive and doesn't get too wide on larger screens.

    8. For the Learning tag inside your card you can simply use a p tag. there is no need to use ::before here.

    9. Your font-size and max-width unit should always be in rem. Read this article from Grace Snow to see why. Also for margin and padding try to use rem or em too.

    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