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

Salah Al-Din Kaki

@Filostkana140 points

CS50 survivor | Now mastering the art of front-end wizardry.

Latest solutions

  • Responsive Testimonials Grid Section built using HTML, CSS, and Sass

    #cube-css#sass/scss#accessibility

    Salah Al-Din Kaki•140
    Submitted 4 months ago

    1 comment
  • Responsive Social media dashboard built using HTML, CSS, js, and Sass

    #cube-css#sass/scss

    Salah Al-Din Kaki•140
    Submitted 4 months ago

    0 comments
  • Responsive Four Card Feture built using HTML, CSS, and Sass

    #cube-css#sass/scss

    Salah Al-Din Kaki•140
    Submitted 4 months ago

    1 comment
  • Responsive product breview card built using HTML, CSS, and Sass


    Salah Al-Din Kaki•140
    Submitted 5 months ago

    1 comment
  • Responsive recipepage using HTML, CSS, and Sass

    #sass/scss

    Salah Al-Din Kaki•140
    Submitted 5 months ago

    1 comment
  • Social links profile built using HTML, CSS, and Sass

    #sass/scss

    Salah Al-Din Kaki•140
    Submitted 5 months ago

    How can I use local font in my project ?


    1 comment
View more solutions

Latest comments

  • Adesh Katiya•420
    @adeysh
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of creating it without struggling in the grid section. I would probably try to build these kinds of projects faster because it took me a lot of time to build it.

    What challenges did you encounter, and how did you overcome them?
    • The challenging thing that I found was with setting up your project with base styles. I mean it probably took me a lot of time just for creating the base styles and also confusing about whether I am including any unnecessary base styles that are probably not required for this kind of project🤞😅.

    • The grid section was easy so I tried creating it with more detailed directory structure. Also used vite to setup the project and was confused where was it generating the css files 😂

    • Tried to use calc() and clamp() functions for the styles.

    What specific areas of your project would you like help with?
    • I wanna learn how do you define the scale of the project. Here I have done probably a lot of complex organization because the same kind of styles can be created with less number of partials so if I am using a build tool is it necessary to be more organized and descriptive with the styles?

    • In all the starter files that you get in frontend mentor challenge, the style guide markdown file has a body copy font-size given. How do i figure out about rest of styles for heading? Is the method that I have used here correct or standard way or is there another way of doing this? If you can give me some tips or what you use, that would be really helpful for my future projects. So please provide me with your feedback.💫

    Responsive Testimonial grid section using HTML, SCSS/CSS, and vite.

    #accessibility#bem#sass/scss#vite
    1
    Salah Al-Din Kaki•140
    @Filostkana
    Posted 4 months ago

    will done adeysh

    • you do will with the semantic HTML
    • and I like how your code is structured

    ** keep do what are doing your great**

  • P
    KonradJam•1,140
    @KonradJam
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of making my project responsive using CSS Grid.

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

    The biggest challenge was that the design in Figma has a lot of different sizes. I think this is unnecessary. So this time my solution is not pixel perfect.

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

    It's my solution with a use of CSS Grit was a most efficient? Is there a better solution for this challenge? But all suggestions are welcome :)

    Four card feature section using CSS Grid and Flexbox

    #accessibility#cube-css#sass/scss
    3
    Salah Al-Din Kaki•140
    @Filostkana
    Posted 4 months ago

    nice job konrad :

  • Damir Ademi•250
    @DamirByte
    Submitted 5 months ago

    Product preview card component - Mobile first

    1
    Salah Al-Din Kaki•140
    @Filostkana
    Posted 5 months ago

    Hi Damir you've done a very nice Job over there. There is some notes to make it even better::

    • *Semantic HTML: considering to use much more semantic HTML elements like <main>, <article>.. ect instead of just using row divs, it's which they good for accessibility and SEO.

    • using picture tag: I like the way that you handled the pictures switch, but you can do the same by using <picture>

    <picture class="product__img">
              <source
                srcset="/assets/images/image-product-desktop.jpg"
                media="(min-width:600px)"
              />
              <img
                src="/assets/images/image-product-mobile.jpg"
                alt="Gabrielle Essence perfume bottle flat on a table with green leaves above an below"
              />
    
  • Mouad•110
    @mouadbimk
    Submitted 5 months ago

    Recipe Page - A Beautiful and Responsive Recipe Website

    #sass/scss
    1
    Salah Al-Din Kaki•140
    @Filostkana
    Posted 5 months ago

    will done bro you can do even better by using more semantic HTML elements instated of row dives. but the layout look very good on every screen size, and your code well-structured and so readable. Keep do what you doing, you are great bro

    Marked as helpful
  • Dago Salas•180
    @Dago04
    Submitted over 1 year ago

    Social links profile Solution

    #sass/scss
    1
    Salah Al-Din Kaki•140
    @Filostkana
    Posted 5 months ago

    Will-done I think you do will withe the semantic HTML, but I don't know why your solution is differ considerably from the design may be you have some issues white the spacing . but overall you do a very good job keep coding

  • P
    Simon Cassan•260
    @SimonCassan
    Submitted 5 months ago

    Social links profile with flexbox

    2
    Salah Al-Din Kaki•140
    @Filostkana
    Posted 5 months ago

    Great work bro you've did again.. 🤙

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