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

Omar Jalal

@omar-jalal110 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

  • STATS PREVIEW CARD COMPONENT

    #accessibility

    Omar Jalal•110
    Submitted almost 3 years ago

    1 comment
  • E-COMMERCE PRODUCT PAGE

    #accessibility#animation#sass/scss#bootstrap

    Omar Jalal•110
    Submitted over 2 years ago

    0 comments
  • ADVICE GENERATOR APP USING SVELTE/SVELTEKIT, TAILWIND, DAISYUI, VITE

    #accessibility#animation#fetch#svelte#tailwind-css

    Omar Jalal•110
    Submitted over 2 years ago

    0 comments
  • INTERACTIVE RATING COMPONENT

    #accessibility#animation

    Omar Jalal•110
    Submitted almost 3 years ago

    2 comments
  • NFT PREVIEW CARD COMPONENT

    #accessibility

    Omar Jalal•110
    Submitted almost 3 years ago

    2 comments
  • Product preview card component

    #accessibility

    Omar Jalal•110
    Submitted almost 3 years ago

    1 comment

Latest comments

  • holly•10
    @ookamidigital
    Submitted almost 3 years ago

    Product preview card component

    #sass/scss
    2
    Omar Jalal•110
    @omar-jalal
    Posted almost 3 years ago
    • Hey nice design, here's how you can fix the image you need to give it background-size: contain; and background-repeat: no-repeat;

    • You shouldnt use alot of divs in the HTML it's a bad practice for SEO and WAI-ARIA reasons search about them for more info, and you can't put a <p> inside a <button> too.

    • You can't skip or repeat a head tag you always start from <h1> because every page needs it and you keep ascending from there if you need to add more.

    • You need to wrap everything in the page in <main> tag

    • Use <picture> tag instead of importing the image in the css so you can switch between the desktop and mobile image versions responsively!

    • Hope that was helpful, happy coding!

    Marked as helpful
  • Dzakwan•10
    @dzakwanpxr
    Submitted almost 3 years ago

    Interactive rating component, HTML + CSS + JS

    1
    Omar Jalal•110
    @omar-jalal
    Posted almost 3 years ago
    • Hey your design is awesome but here a little tip to make it even better, make a class for transition and add it to every interactive element to make your design more smooth you can make it like this for example:

    .smooth { transition: all ease-in-out .25s; }

    • and you shouldn't use div so often but if you have to you need to use role="" attribute for accessibility reason, for more info search for: WAI-ARIA.

    • and you should add media query for mobile layout and desktop layout in css file.

    • HAPPY CODING!

  • Light Yagami•90
    @rakibhossainraju
    Submitted almost 3 years ago

    Product-preview-card-component

    #accessibility
    1
    Omar Jalal•110
    @omar-jalal
    Posted almost 3 years ago

    Hi, your design is awesome and accurate but you can improve it even more! -Use normalize.css to remove elements default values instead of doing it manually. -Use <picture> to switch between different photos in mobile layout instead of display: none/block. -Use Rem and Em instead of Px for media queries to make your website more accessible.

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