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

Jawad

@J-JawadSyria170 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

  • single price grid


    Jawad•170
    Submitted 10 months ago

    0 comments
  • Results Layout


    Jawad•170
    Submitted 10 months ago

    0 comments
  • Testimonial Grid Section


    Jawad•170
    Submitted 10 months ago

    1 comment
  • Four Card Feature Section


    Jawad•170
    Submitted 10 months ago

    1 comment
  • Product preview card


    Jawad•170
    Submitted 10 months ago

    1 comment
  • 3 column cards


    Jawad•170
    Submitted 10 months ago

    0 comments
View more solutions

Latest comments

  • a-yemisi•110
    @a-yemisi
    Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    Getting the layouts right

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

    I encountered issues with the width of the layout as the screen got bigger, found a work around

    Testimonials grid section

    1
    Jawad•170
    @J-Jawad
    Posted 10 months ago

    Wonderful job!! Though i have to point out that the background color is off, as well as some font sizes and colors. Otherwise the layout is PERFECT. Keep on coding and improving!!

    Marked as helpful
  • Teboho Mokgosi•130
    @SirTebz
    Submitted 10 months ago

    Responsive Four-card feature

    1
    Jawad•170
    @J-Jawad
    Posted 10 months ago

    Your background color isn't the same, as well as the header font size for the cards. Font color of the paragraphs is much darker, and the side cards aren't really centered. Line height isn't accurate. These are little details that matter. You can easily avoid them by using the photo editor. Open the edit tab on the provided design images and use the crop tool to know the measurements of the elements you are adding (the measurements are shown in the crop box in pixels). You can also put the image on top of the website to check if you used the correct colors and shades.

  • Sakthivel Ramesh•150
    @sakthivel155
    Submitted 10 months ago

    product-preview-component mobileFirst responsive design(optimised CSS)

    1
    Jawad•170
    @J-Jawad
    Posted 10 months ago

    You did a great job on this. One thing I'd like to mention is that you should set the min width of the media queries to be slightly bigger than big mobile screens (426px) this way it will show the mobile version on mobile devices (425px and less) and the desktop versions on tablets and desktop devices (even ones with slightly smaller screens than 1440px). Whereas what you did is show the mobile version on any screen that is smaller than 1440px (including smaller desktops and tablets).

    Marked as helpful
  • Dan Harabagiu-Dimitrescu•340
    @danHD2
    Submitted 10 months ago

    Recipe Page

    1
    Jawad•170
    @J-Jawad
    Posted 10 months ago

    Great job in general. I have to point out that your background color selection as well as the nutrition value color aren't correct( I made the same mistake XD). Some font weights as well. Other wise great job!!

  • Elena Girma Mandefro•70
    @Ela1650
    Submitted 11 months ago

    Frontend-Mentor---Social-links-profile-solution

    1
    Jawad•170
    @J-Jawad
    Posted 11 months ago

    your design is great, but you didn't center the card properly. You can do that simply by giving the body a display of flex and align items to center and justify items to center as well. Other than that great job!!

    Marked as helpful
  • Dei•60
    @deidalopez
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud about the amount of time it took me to churn this out.

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

    I struggled with the card's width on mobile devices without using media queries, I think using rem units helped out a bit.

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

    Best practices to handle a responsive design.

    Also, why not use media queries?

    Blog preview card

    2
    Jawad•170
    @J-Jawad
    Posted 11 months ago

    You did great. Much better than i did so i cant really criticize your work. I really liked how neat and readable the code is.

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