Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
6
Comments
4
Riska997
@Riska997

All comments

  • Mussie Habtemichael•420
    @mussieh
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I was able to complete the project in a few hours. I think I might use a framework next time.

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

    I faced a challenge with the responsiveness but was able to figure it out in the end.

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

    I would love any feedback on the correctness of my approach to the challenge.

    Responsive Recipe Page (Flexbox + Media Queries)

    1
    Riska997•110
    @Riska997
    Posted about 1 year ago

    Great job on completing the project!

    • Your code is easy to understand because you've used clear class names and added comments where needed. - You made sure your webpage looks good on different devices by using media queries.
    • Also, your typography system gives clear rules for fonts, making everything look nice together.

    Some improvements

    • Consider grouping related CSS rules together, such as all styles for the .section-omelette-recipe, .section-preparation-time, etc.
    • This can enhance readability and maintainability, especially as your stylesheets grow.
    /* Group related styles together */
    .section-omelette-recipe,
    .section-preparation-time,
    .section-ingredients,
    .section-instructions,
    .section-nutrition {
        /* Your styles */
    }
    
    • Instead of .omellete-recipe-header, you can simply use h1.omellete-recipe-header.
    • This helps in reducing specificity and makes your CSS more efficient.
    /* Simplify selectors */
    .omellete-recipe-header {
        /* Your styles */
    }
    
    • In some cases, you're using pixel values for font sizes (font-size: 2.5rem) while in others, you're using rem.
    /* Normalize font sizes */
    h1, h2, h3 {
        font-size: 2.5rem;
    }
    
    • Ensure that all images have appropriate alt attributes for accessibility purposes.
    /* Ensure accessibility */
    .img-omelette {
        /* Your styles */
    }
    

    Overall, you've done a commendable job

    Keep up the great work!

    Marked as helpful
  • JmsLpz•80
    @JmsLpz
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I am proud that I have learned a little bit of how to use the grid display.

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

    The challenges I encountered were having no knowledge before on using the grid display.

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

    The specific part of the project I would like to help with is learning some techniques of placing easily since I want to make the layout become nice.

    Social Links Profile

    1
    Riska997•110
    @Riska997
    Posted about 1 year ago
    1. Duplicate <body> Tag
    • There is a duplicate <body> tag in your HTML code.
    • You only need one <body> tag to enclose the content of your web page.
    • Remove the redundant <body> tag.
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Social Links Profile</title>
        <link rel="stylesheet" href="style.css">
        <link rel="icon" href="images/favicon-32x32.png">
    </head>
    <body>
        <header>
            <!-- Header content goes here -->
        </header>
    </body>
    </html>
    
    

    2.Incorrect Usage of Heading Tags

    • In the header section, you are using <h2> tags for elements like name, location, and role.
    • It's semantically incorrect.
    • Consider using appropriate tags like <h1> for the name and perhaps <h3> for the location and role.
    <header>
        <div class="imgProfile">
            <img src="images/avatar-jessica.jpeg" alt="imageProfile">
            <div class="nameLocation">
                <h1 class="name">Jessica Randall</h1>
                <h3 class="location">London, United Kingdom</h3>
                <p class="role">"Front-end developer and avid reader"</p>
                <div class="buttons">
                    <!-- Buttons content goes here -->
                </div>
            </div>
        </div>
    </header>
    
    

    3.Buttons as Headings

    • Buttons like "GitHub", "Frontend Mentor", etc., are marked up using <h2> tags, which is semantically incorrect.
    • Use <button> tags for buttons and consider adding appropriate classes or IDs for styling and JavaScript functionality.
    <div class="buttons">
        <button class="github">GitHub</button>
        <button class="frontendMentor">Frontend Mentor</button>
        <button class="linkedIn">LinkedIn</button>
        <button class="twitter">Twitter</button>
        <button class="instagram">Instagram</button>
    </div>
    
    

    4.Font Face Declaration

    • There's a font face declaration in your CSS code, but the font file path seems to be incorrect.
    • Ensure that the font file path is correct or use a web font service like Google Fonts.
    @import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,500;1,500&family=Inter:wght@600&display=swap');
    

    5.Inconsistent Height Units

    • In various CSS rules, you're using both absolute (px) and relative (vh, rem) height units inconsistently.
    • Consider using consistent units throughout your stylesheets for better maintainability and responsiveness.

    6.Media Query Adjustments

    • In the media query section, adjust the styles based on the viewport width.
  • kiryu130•40
    @kiryu130
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    Making all the spacings, i would do more semantic tags as the previous commenter said it just that i didn't know much

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

    Making everything in place as i am not aware of all the tags, but i will learn as i go just to make sure i am not stuck

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

    learning all the tags and the css properties does require some research or knowledge beforehand

    Blog Preview Card

    2
    Riska997•110
    @Riska997
    Posted about 1 year ago

    Make the card design responsive

    -Width is set to a fixed percentage (width: 15%;).

    -This means that the card will always occupy 15% of the viewport width, regardless of the screen size.

    -To make the card design responsive, use relative units like percentages or viewport width (vw) to ensure that the card adjusts its size based on the screen size.

     .Card {
      /* Instead of fixed percentage, use percentage or viewport width for responsiveness */
      width: 90%; /* Example: occupy 90% of the viewport width */
    }
    

    Make use of semantic HTML elements

    -Semantic HTML elements provide meaning to the content, making it easier for browsers, search engines, and screen readers to understand the structure of the document.

    -Instead of using generic <div> elements for structural purposes, use semantic elements to better convey the purpose of each section of the webpage.

    <header>
      <!-- Header content goes here -->
    </header>
    
    <article>
      <!-- Main content/article section goes here -->
    </article>
    
    <footer>
      <!-- Footer content goes here -->
    </footer>
    
    
    Marked as helpful
  • denis rahman•20
    @denisfilab
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I dont think i do anything 'great' here. One thing I learned is definitely flexbox and how to use it the way I wanted it to be.

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

    I want to create the .container width using relative measurement. I was trying to use the same resolution as the content inside with added padding. I tried fit-content but it seems that the width doesn't fit according to the content inside. So I ended up using absolute measurement

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

    I'd like to know how to adjust size according to the content inside. And I want to know which part of my code could be improved according to industry standard.

    QR-code using flex-box

    1
    Riska997•110
    @Riska997
    Posted about 1 year ago

    There is no source code to view on this project as the GitHub link is non-accessible.
    I am unable to to do the review.

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub