Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
12
Comments
5

Zakaria Jamali

@ZakJam140 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

  • Recipe page


    Zakaria Jamali•140
    Submitted 12 months ago

    1 comment
  • Social links profile solution


    Zakaria Jamali•140
    Submitted 12 months ago

    1 comment
  • blog card preview


    Zakaria Jamali•140
    Submitted 12 months ago

    1 comment
  • html e css


    Zakaria Jamali•140
    Submitted almost 2 years ago

    0 comments
  • Product preview card component


    Zakaria Jamali•140
    Submitted almost 2 years ago

    1 comment
  • Html e css


    Zakaria Jamali•140
    Submitted almost 2 years ago

    0 comments
View more solutions

Latest comments

  • P
    Abdessalam Barka•460
    @barka-dev
    Submitted 12 months ago

    Responsive Product preview card component using CSS Grid

    1
    Zakaria Jamali•140
    @ZakJam
    Posted 12 months ago

    Good job!

  • FATMA•300
    @Fatma-M
    Submitted 12 months ago

    Recipe Component

    1
    Zakaria Jamali•140
    @ZakJam
    Posted 12 months ago

    You have to do also the mobile version

  • simgeduru•50
    @simgeduru
    Submitted 12 months ago
    What are you most proud of, and what would you do differently next time?

    I'm happy with my current progress, but there are places where I'm not sure at some points. I think I will move forward better after I am sure about them

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

    i had to make calculations when setting the padding values in mobile and dextop view, this forced me

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

    How can I achieve proportional values on mobile and desktop without using media queries? I also don't find using % logical. I used media queries both to adjust the size of the div and the padding values. Is this logical? Also, I'm struggling with writing media queries, and you might find them illogical upon inspection.

    Responsive page with grid flex media-query

    2
    Zakaria Jamali•140
    @ZakJam
    Posted 12 months ago
    1. When I hover my mouse over the buttons the cursor it is not a pointer.

    2. Border-radius is almost invisible, before seeing the code I thought there wasn't

    3.Currently the method that I use to make a layout proportional in various size it's this : 1.I give the percentage
    2. after I give the limits , min-width, min-height, max-width, max-height. 3.If I think that the limits are too low for bigger size , I use media queries and I rise up the limits. I hope you have found it helpful and it wasn't my intention to be harsh, keep going.

  • P
    Karen L Byrd•60
    @klb-dev
    Submitted 12 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud that it did not take me hours. Usually, I need help remembering how to do things in CSS that I spend lots of time googling. But I did not have to Google a single thing: progress.

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

    Some text sizing was off with the Figma design and style sheet. I used what I thought was natural for the look.

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

    I am confident that I provided the best code for this one to the best of my knowledge. However, I am always looking for feedback to help me improve my Front-End Development.

    Blog-preview card

    1
    Zakaria Jamali•140
    @ZakJam
    Posted 12 months ago

    use flexbox and put in the center the container .

    body { display: flex; justify-content: center; align-items: center; }

  • Darke•10
    @InTheDarkHood
    Submitted 12 months ago
    What challenges did you encounter, and how did you overcome them?

    I started out by making things a lot more complicated for myself, when the solution was very simple. I will make sure to break down the project and create more achievable and bite-sized tasks for myself.

    QR Code Component Solution Using HTML & CSS

    1
    Zakaria Jamali•140
    @ZakJam
    Posted 12 months ago

    To ensure that your web page maintains good proportions when scaling up or down, you can make several improvements and adjustments to your HTML and CSS. Here are some suggestions and corrections to help with responsiveness and overall design:

    Suggestions for HTML and CSS Use Responsive Units:

    Instead of using fixed units like px for padding, margins, and fonts, use relative units like em, rem, %, or vh/vw to make your design more responsive. Add a Responsive Container:

    Use a container to limit the maximum width of the content to prevent it from stretching too much on large screens.

    Marked as helpful
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