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

Ahmed Abu Qahf

@ahmedsomaaTanta, GH, Egypt130 points

A full stack software engineer with a strong focus in front-end in React. I aim to create beautiful and functional software that is both intuitive and enjoyable for users.

Latest solutions

  • Responsive with Next.js, Tailwind CSS, Shadcn/ui & Tanstack Query

    #next#shadcn#tailwind-css#tanstack-query

    Ahmed Abu Qahf•130
    Submitted 8 months ago
    • RSC with users' state variables (client-side forms with RSC).

    0 comments
  • Responsive Product Preview Card Component with Flexbox


    Ahmed Abu Qahf•130
    Submitted 11 months ago

    1 comment
  • Responsive Recipe Page with Media Query & Flexbox


    Ahmed Abu Qahf•130
    Submitted about 1 year ago

    2 comments
  • Social Links Profile Using Flexbox and CSS Selectors


    Ahmed Abu Qahf•130
    Submitted about 1 year ago

    I tried doing it with CSS position but it didn't work good on mobile devices so a good guide on doing responsive design with CSS regular positioning would be helpful.


    1 comment
  • Responsive Blog Preview Card Solution using CSS Flexbox & BEM


    Ahmed Abu Qahf•130
    Submitted about 1 year ago

    Responsive web-site design.


    1 comment
  • QR Code Component Solution Using Flexbox & BEM


    Ahmed Abu Qahf•130
    Submitted about 1 year ago

    1 comment

Latest comments

  • Nandhakumar•50
    @nandha126
    Submitted about 1 year ago

    FMCC Recipe Page

    2
    Ahmed Abu Qahf•130
    @ahmedsomaa
    Posted about 1 year ago

    Hey, amazing job. Congrats on completing this challenge!

    A few tips!

    HTML:

    • I like the fact that you used <figure/> as a container for the <img/>.
    • It would be better to divide your page into sections using <section/> element and give each one a unique id instead of using a <div/>, this would give it a better semantic meaning. Example of sections could be Ingredients, Instructions...etc.

    CSS:

    • You can import multiple fonts in one @import statement like this @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&family=Young+Serif&display=swap");
    • Set the font-size: 16px for the whole document and then use rem for any other font-size like <h1/>, <h2/>. Also, your document's font size is set to 11px which way too small, make it 16px or 14px at least.
    • Change the color of the text in the document to stone-600 as this is much closer to the design that the one's you used.
    • Change the list-style of the Ingredients to square at least that's how I see it. It's too small.
    • Add a line-height: 1.5 or margin-top & margin-bottom for list items as this looks bigger in the design.
  • Meryem El Karati•150
    @Cristal32
    Submitted about 1 year ago

    Responsive Interactive Social Links Profile with Flexbox

    1
    Ahmed Abu Qahf•130
    @ahmedsomaa
    Posted about 1 year ago

    HTML

    First, I want to commend you on the clear structure and use of essential HTML elements. The layout is straightforward, and it’s great to see you’ve included meta tags for viewport settings and a favicon. Here’s some feedback to further enhance your work:

    • Use <img> for the user's avatar instead of the background-image as this improves accessibility and SEO by allowing descriptive alt text and better semantic meaning, whereas background-image does not support these features.
    • Use alt text for images or add descriptive aria-label to interactive elements for screen readers.
    • Consider using <button> or <a> tags for interactive elements instead of div with title attributes.
    • Define or remove the container class since it's referenced in HTML but not styled in CSS.

    CSS

    Your CSS demonstrates a good understanding of layout and styling principles. The use of Google Fonts and consistent color schemes is commendable. Here’s how you can refine your work:

    • Add media queries to ensure responsiveness across different screen sizes (e.g., 320px to 1440px).
    • Include comments in the CSS to describe the purpose of different sections for better readability and maintainability.
    • Define styles for the .container class or remove it if not used.
    • Update the hover state color for .social-link to match the design specification (hsl(75, 94%, 57%)).
    • Ensure color consistency throughout the stylesheet to match the design guide, define them in the :root or using @property.
    Marked as helpful
  • bobyanov•100
    @bobyanov
    Submitted about 1 year ago

    Blog preview card

    1
    Ahmed Abu Qahf•130
    @ahmedsomaa
    Posted about 1 year ago

    Great Job! I like that you did the whole challenge using the CSS selectors and neither using Flexbox nor Grid.

    A couple of things to consider here:

    • maybe next time try to look into CSS architectures like OOCSS, BEM...etc, they make maintaining your CSS much better.
    • try to make the website responsive for screens <= 320.
    • try to do it with Flexbox or Grid, see whether you'd prefer them or keep using CSS positions.
  • Gakii•600
    @G-Gakii
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I was able to build a responsive website using media queries

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

    The main challenge was making the website responsive

    Responsive QR Code Component

    2
    Ahmed Abu Qahf•130
    @ahmedsomaa
    Posted about 1 year ago

    The HTML provided is mostly semantic, using a div for the container and including appropriate elements like h2 and p for headings and paragraphs. However, it could be improved by using more descriptive tags. For example, wrapping the entire content in a <main> tag could enhance the semantic structure of the document. You could also add a more descriptive alternate text to the image such as "QR code for Frontend Mentor website."

    Marked as helpful

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