Skip to content
OverviewSolutions
4
Comments
5
doganayurgupluoglu
@doganayurgupluoglu

All comments

  • Macomi27•90
    @Macomi27Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    Learning how to utilize the CSS box model and especially the tricky align-items property.

    Responsive recipe page

    1
    doganayurgupluoglu•40
    @doganayurgupluogluPosted 7 days ago

    nice one!

    0
  • doganayurgupluoglu•40
    @doganayurgupluogluPosted 19 days ago

    This is good one!

    0
  • doganayurgupluoglu•40
    @doganayurgupluogluPosted 19 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! 🚀

    0
  • doganayurgupluoglu•40
    @doganayurgupluogluPosted 19 days ago

    Nice!

    1
  • doganayurgupluoglu•40
    @doganayurgupluogluPosted 20 days ago

    Semantic HTML

    Your HTML structure is quite simple and well-organized. However, making some improvements to enhance its semantic meaning would be beneficial.

    • The entire content should be wrapped inside a <main> tag to properly define the main content of the page.
    • Instead of using a <div> with the class .divFirst, consider using a more meaningful tag like <section>.

    Example:

    <main>
  <section class="qr-card">
    <!-- Content -->
  </section>
</main>

    Code Structure & Readability

    • Repeated font-family declarations can be defined once inside the body selector.
    • Instead of using inline styles in <h2> and <p>, move all styles to the style.css file.
    • The font-weight: 700px; declaration is incorrect. The correct syntax is:
    font-weight: 700;

    Design Consistency

    • The overall layout looks similar to the original design, but there are spacing and alignment inconsistencies.
    • The QR code is too close to the edges of the .divFirst container. Adding padding would make it look cleaner.

    If you need further guidance, feel free to check my repo:
    GitHub Repository

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

    1