Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
30
Comments
130

Saad Hisham

@Saad-HishamEgypt1,770 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

  • 🔥Online Rock Paper Scissors game with animations🔥

    #bootstrap#firebase#framer-motion#react#redux

    Saad Hisham•1,770
    Submitted over 1 year ago

    2 comments
  • 💕Animated News homepage Bootstrap💕


    Saad Hisham•1,770
    Submitted over 1 year ago

    7 comments
  • 😼Animated Newsletter sign up form with success message😼


    Saad Hisham•1,770
    Submitted over 1 year ago

    3 comments
  • ✨Animated Project tracking intro component✨


    Saad Hisham•1,770
    Submitted over 1 year ago

    2 comments
  • Dynamic expenses chart component


    Saad Hisham•1,770
    Submitted over 1 year ago

    1 comment
  • 💥Advice generator app React + Axios 💥


    Saad Hisham•1,770
    Submitted over 1 year ago

    0 comments
View more solutions

Latest comments

  • Alessandra Oliveira•710
    @itsale-o
    Submitted over 1 year ago

    News Homepage Solution

    1
    Saad Hisham•1,770
    @Saad-Hisham
    Posted over 1 year ago

    Hi there! 🙋‍♂️ Great job completing the challenge! 🎉 If you try to zoom out, you may notice that the design gets ruined, especially on larger screens like 4K and 2K. To solve this issue, you can wrap your page content in a container. This container should have a maximum width and be centered on the screen. You can achieve this by adding the following code to your existing code:

    main {
        max-width: 1110px
        margin: auto;
    }
    

    Great job keep it up ✨

    Marked as helpful
  • Nivrii•410
    @nivrii
    Submitted over 1 year ago

    html css JS

    1
    Saad Hisham•1,770
    @Saad-Hisham
    Posted over 1 year ago

    Hi there 🙋‍♂️ this media query breaks the site on screens over 1440px on my 1920 screen, I see the mobile design just remove the max (max-width: 1440px) to ensure it works well on all big sizes screen

    the rest is epic keep it up 💖

  • waltertaya•110
    @waltertaya
    Submitted over 1 year ago

    age-calculator-app-main

    1
    Saad Hisham•1,770
    @Saad-Hisham
    Posted over 1 year ago

    to center the app on screen add this line to the body min-height: 100vh; and remove those

    body {
        /* margin: 1rem; */
        /* margin-top: 8rem; */
    }
    
    Marked as helpful
  • Ahmad Majid•190
    @ahmad-majid
    Submitted over 1 year ago

    Age Calculator

    #react#node
    1
    Saad Hisham•1,770
    @Saad-Hisham
    Posted over 1 year ago

    Hi there! 🙋‍♂️ It seems like you made a small mistake. You didn't deploy the site; instead, you attached the GitHub link in the deployment input. To resolve this, you need to deploy the site on a free hosting platform. One of the best options I've tried is Vercel. Here's what you can do:

    1. Create an account on Vercel.
    2. Link your Vercel account with GitHub.
    3. Deploy the site directly from Vercel.

    Alternatively, you can also consider using Netlify, which offers an easy drag-and-drop deployment process. Simply drag and drop the build version of your project into Netlify, and it will handle the deployment for you.

    Keep up the great work, and happy coding! 💖

  • Abdul Khaliq 🚀•72,360
    @0xabdulkhaliq
    Submitted over 1 year ago

    LOOPSTUDIOS LANDING PAGE 🎯 [ ACCESSIBLE - BEM - VANILLA CSS3 ]

    #accessibility#lighthouse#bem
    4
    Saad Hisham•1,770
    @Saad-Hisham
    Posted over 1 year ago

    Welcome back, bro 🎉😅

  • Naglaa Hamdi•160
    @Naglaa99
    Submitted over 1 year ago

    Huddle landing page by html & css

    1
    Saad Hisham•1,770
    @Saad-Hisham
    Posted over 1 year ago

    Hi there 🙋‍♂️ Congratulations on completing the challenge!🎉 Here are some tips to improve your solution:

    1.Wrap the entire content inside the <body> tag within a <main> tag. This will help structure your HTML code properly:

    <body>
      <main>
        <!-- Your content goes here -->
      </main>
    </body>
    

    2.Add the following styles to the <body> tag to center it vertically and horizontally on the page:

    body {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    

    3.Apply the following style to the text within the section to better match the design:

    .section .text {
      max-width: 41rem;
    }
    

    Keep up the great work✨

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

Mentor of the Week - 3rd Place

This badge is awarded to the 3rd placed community member on the weekly Wall of Fame.

Fun fact

The Hansen Writing Ball shown in the badge was the first commercially produced typewriter. It was put into production in 1870 with its unique ergonomic design. It was overtaken in the market in 1873 by the Sholes and Glidden typewriter which was the first keyboard to utilise the QWERTY layout we now use today.

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