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

Salah Shadoud

@SalahShadoudSyria240 points

Front-end Web Developer with good experience in HTML5, CSS, JS

I’m currently learning...

React.js, Tailwind CSS

Latest solutions

  • Huddle Landing Page (HTML5, CSS, Flexbox, Ressponsive)

    #accessibility#backbone#webflow#web-components

    Salah Shadoud•240
    Submitted about 2 years ago

    0 comments
  • Social Proof Section (HTML5, CSS, Flexbox, Ressponsive)

    #accessibility#backbone#webflow#web-components

    Salah Shadoud•240
    Submitted about 2 years ago

    0 comments
  • Four Card Feature Section

    #accessibility#backbone#webflow

    Salah Shadoud•240
    Submitted about 2 years ago

    0 comments
  • Single Price Grid Component (HTML5, CSS, CSS Grid, Ressponsive)

    #accessibility#webflow#backbone

    Salah Shadoud•240
    Submitted about 2 years ago

    0 comments
  • Profile Card Component (HTML, CSS, Flexbox, Ressponsive)

    #accessibility#backbone#webflow

    Salah Shadoud•240
    Submitted about 2 years ago

    0 comments
  • 3 Column Preview Card (HTML, CSS, Flexbox, CSS Grid, Media Queries)

    #accessibility#backbone#web-components#webflow#styled-components

    Salah Shadoud•240
    Submitted about 2 years ago

    3 comments
View more solutions

Latest comments

  • basheer-ahamed-008•20
    @basheer-ahamed-008
    Submitted about 2 years ago

    FAQ accordion card

    1
    Salah Shadoud•240
    @SalahShadoud
    Posted about 2 years ago

    Hey There! Congrats on finishing the challenge i have few notes to improve your design:

    • use the padding on the text section of the design to mimic the space on the inline side of the design.
    • use display: flex; and flex-direction: column; on the container and space the elements inside of it with the gap property to have a nice looking container with little nice space between the elements.

    hope this gonna help you in your future challenges, Happy Coding.

  • Pratham•10
    @PrathamS1
    Submitted about 2 years ago

    Responsive Result Summary Page

    2
    Salah Shadoud•240
    @SalahShadoud
    Posted about 2 years ago

    Hey There! Congrats on Finishing the Challenge. i have a few notes for you and may this help you in your future challenges and projects:

    • You missed the summary resutls background colors, you can achive that by using the values they gave in the style-guide file in the hsla(Hue, Saturation, Lightness, Alpha) function, this way u can benefit from the alpha value that is responsible for the transperancy of the color.
    • Grid Property is a time saver property especially when it comes to ressponsive desings, so i recommend you to learn using it and start applaying it in your challenges, and here is a good video that will help u learn it in the easy way, Link Here
    • i recommend to follow the Mobile-first approach and it works by starting your work from small screens and gradually working up to larger screen sizes.

    hope this will be helpful, Happy Coding

    Marked as helpful
  • MICHAEL REID•100
    @MAR2409
    Submitted about 2 years ago

    Stat Solution

    #sass/scss
    2
    Salah Shadoud•240
    @SalahShadoud
    Posted about 2 years ago

    Hey There! Congrats on Finishing this Challenge. Writing HTML classes can save you alot of a time when you review your code or if your working with team on a project, i haev a few notes for you and maybe this will help you in your future challenges and projcts:

    • Try to choose class or id names based on the content and not on its styles (Use descriptive names), for example: you gave the purple text inthe header a class of purple but it doesn't describe what the class is for (prurple text, purple background) so you can give it a class of purple-text to clearify the purpose of the class when someone else read your code.
    • Use Comments for better structuring and understanding of the code (Avoid needless comments), for example comment your main sections of the code like the two sections (text or insights section, image section), and use comment on links and CDNs that you use on your project.
    • Use utility classes for most used styles like: (flex, grids, font sizes, font weights, colors, background colors), for example create two utility classes (one for flex-row and one for flex-column) and create utility classes for font weights that you are using in your prject to prevent reapeating this styles in css and instead use this classes on the html side.

    hope this can help you and give a well understanding of how to write a better and readable code, Happy Coding

  • Sudiarta, I Kadek•110
    @codederk
    Submitted about 2 years ago

    Result summary component using Basic HTML and CSS

    #bem
    2
    Salah Shadoud•240
    @SalahShadoud
    Posted about 2 years ago

    Hey Coder! i have few notes for better CSS and HTML coding:

    • Avoid global and element selectors (use classes of ids intsead).
    • Omit overly specific selectors.
    • Use semantic class names.
    • Combine Media Queries in one media query for better reading and editing.
    • use comments for better code structuring. Happy Coding
  • Cristina Kelly•140
    @cristinakellyt
    Submitted about 2 years ago

    Simple interactive card using TYPESCRIPT/SASS/WEBPACK

    #accessibility#sass/scss#webpack#typescript
    1
    Salah Shadoud•240
    @SalahShadoud
    Posted about 2 years ago

    Hi Cristina! Congrats on finishing the challenge! i have a note about the star icon container, which is stratching from top and bottom, so i think if u use display: flex on it will get rid of the extra spaces that it takes and center the star icon in the middle. Happy Coding

  • LidiaS98•30
    @LidiaS98
    Submitted about 2 years ago

    Results Summary Component

    2
    Salah Shadoud•240
    @SalahShadoud
    Posted about 2 years ago

    Hey There! Nice work ^_^ i have some ideas that may improve your design:

    1. for the summary elements, i recommend you to use flex nad justify-content: space-between to space the element so the first elemt wil stick to the beginning and the second elemnt will stick to the end of the container.
    2. and for background color of each item, u can use the background: hsla(x, y, z, a) function so u can reduce the alpha number of the color so it will increase the transperancy of the item

    Happy Coding <3

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