Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
10
Comments
7

HagarRagab

@HagarRagab270 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Rock Paper Scissors game using TypeScript

    #typescript

    HagarRagab•270
    Submitted about 2 months ago

    0 comments
  • multi-step-form using React.js

    #react#react-hook-form

    HagarRagab•270
    Submitted about 2 months ago

    0 comments
  • Social proof section using Tailwind CSS

    #tailwind-css

    HagarRagab•270
    Submitted 11 months ago

    0 comments
  • Testimonial gird section

    #sass/scss

    HagarRagab•270
    Submitted 11 months ago

    1 comment
  • four-card-feature

    #sass/scss

    HagarRagab•270
    Submitted 11 months ago

    1 comment
  • Product preview card component

    #sass/scss

    HagarRagab•270
    Submitted 11 months ago

    1 comment
View more solutions

Latest comments

  • P
    Nate Valline•420
    @nvalline
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    This challenge was a good and simple project to build and reinforce my knowledge of CSS Grid.

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

    This project didn't pose many challenges other than coming up with class names.

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

    I would appreciate any tips/suggestions to improving the quality of my code.

    CSS Grid Area w/ SASS

    #sass/scss
    1
    HagarRagab•270
    @HagarRagab
    Posted 11 months ago

    Great job, I checked your code and I do not have any comment. The final page looks exactly same as the original one. I like how you applied grid template areas. Your code is very clean and readable. I highly recommend you to check 7-1 architecture pattern for SASS projects it is for structuring your SASS code. Good luck :)

    Marked as helpful
  • Michael Wilson•260
    @mikewil245
    Submitted 11 months ago
    What challenges did you encounter, and how did you overcome them?

    I encountered a few challenges while working with CSS Grid, especially when it came to the desktop view layout. At first, I struggled to understand how to achieve the desired layout, but learning about grid-template-areas helped me precisely place grid items where I wanted them. Initially, I thought I needed to apply max-width to the grid items for proper sizing. However, I realized that using grid-template-columns effectively handles the resizing of elements across different screen sizes without the need for max-width.

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

    Seems like compared to the design in desktop view the width of my elements seem shorter , can't seem to understand how that happened

    4 Card feature section | By Mike Wilson

    #sass/scss#bem
    1
    HagarRagab•270
    @HagarRagab
    Posted 11 months ago

    Good job, I like how you arrange the sass code it's clean and easy to read for bigger projects you can follow the 7-1 architecture pattern in which you can arrange SASS code into 7 folders and one file. This link for a small project used this pattern https://github.com/KittyGiraudel/sass-boilerplate. Stay save and never give up :)

    Marked as helpful
  • dnomjr•210
    @dnomjr
    Submitted almost 2 years ago

    Product preview card component solution

    #node#react#sass/scss#tailwind-css#react-native
    1
    HagarRagab•270
    @HagarRagab
    Posted 11 months ago

    Great job, your code is clean and readable. The only comment I have is you used the same image in both desktop and mobile and you cropped the image on the mobile there is a solution for this you can use CSS rule > background-image: url() so you will be able to change the URL in the mobile by using media query. Stay save and never give up :)

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

    I proud of my improve about web design skills.

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

    I didn't encounter this challenge.

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

    I would like to receive help in topics like responsive design.

    Basic website about a recipe with html, css and responsive design

    1
    HagarRagab•270
    @HagarRagab
    Posted 11 months ago

    Great job, your code is readable and clean. You can try to use @import in the CSS file to add google fonts links instead of using multiple link attributes in the HTML file. For example: @import url(....); And instead of using <div class="section">..</div> you can exploit semantic HTML elements and use <section></section> element.

  • Maged Ashraf•140
    @magedashraf73
    Submitted 11 months ago

    social-links-profile

    1
    HagarRagab•270
    @HagarRagab
    Posted 11 months ago

    Does the solution include semantic HTML?

    • No Is it accessible, and what improvements could be made?
    • Yes. The improvements could be using anchors instead of divs and add CSS styles in a separated sheet. Does the layout look good on a range of screen sizes?
    • Yes Is the code well-structured, readable, and reusable?
    • Yes Does the solution differ considerably from the design?
    • No
    Marked as helpful
  • Alshimaa_Jamal•100
    @Al-Shimaa2001
    Submitted 12 months ago
    What are you most proud of, and what would you do differently next time?

    It was a simple design

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

    it was a simple project

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

    w3school , chatgpt , workflow

    I did it using Html and CSS

    1
    HagarRagab•270
    @HagarRagab
    Posted 11 months ago

    Does the solution include semantic HTML?

    • No Is it accessible, and what improvements could be made?
    • Yes, it's accessible and the changes that could be made are the box shadow, border radius and hover. Does the layout look good on a range of screen sizes?
    • Yes Is the code well-structured, readable, and reusable?
    • Yes Does the solution differ considerably from the design?
    • The solution does not differ considerably from the design but there are some differences in box shadow, border radius and hover.
    Marked as helpful
View more comments
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

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

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