Submitted 29 days ago

HTML CSS

LaizeQueiroz•40

@LaizeQueiroz

Preview site View code

This is a solution for...Blog preview card

HTML
CSS

1newbie

Design comparison

SolutionDesign

Community feedback

doganayurgupluoglu•40

@doganayurgupluogluPosted 29 days ago

Hello LaizeQueiroz! Your code is well-structured and clean, but making a few improvements would be beneficial.

1. Importing Fonts Correctly

It seems that the font import is not visible in the comments section on Frontend Mentor. To ensure you are importing the font correctly, please check your HTML file in my GitHub repository.

Make sure you are importing the font in the correct location, ideally within the <head> section of your HTML file. Here’s an example of how it should be structured:

<head>
    <link href="https://fonts.googleapis.com/css2?family=Figtree:wght@300..900&display=swap" rel="stylesheet">
</head>

Then, in your CSS file, you can apply the font like this:

body { 
    font-family: "Figtree", sans-serif;
}

If the font is still not applying correctly, double-check your GitHub repository to ensure the import statement is correctly placed in your HTML file.

2. Using Semantic HTML for Better SEO and Accessibility

For better search engine optimization (SEO) and accessibility, your HTML tags should be more meaningful. Instead of using generic <div> elements, use semantic HTML tags like <main> and <footer>.

Example of `<main>` Usage:

<main>
    <div class="container">
        <div class="imagem-abstrata">
            <!-- Content -->
        </div>

        <div class="cardText">
            <!-- Content -->
        </div>
    </div>
</main>

Example of `<footer>` Usage:

Instead of using:

<div class="foot">
    <!-- Content -->
</div>

You should use:

<footer>
    <!-- Content -->
</footer>

This improves both readability and SEO performance.

3. Improving the "Learning" Section Styling

Instead of using a <button> element for the "Learning" section, you can assign a class to a <p> tag and apply the following CSS styles for better efficiency:

.learning { 
    display: inline-block; /* Ensures the element only takes up as much width as its content while maintaining block properties */
    background-color: hsl(47, 88%, 63%); /* Sets the background color to a yellow tone using HSL */
    padding: 5px; /* Adds 5px padding around the content */
    border-radius: 5px; /* Rounds the corners with a 5px radius */
    font-weight: 900; /* Makes the font bold */
}

This will help you structure your code better and improve its accessibility. Keep up the great work! 🚀

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