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

Yahia-kilany

@Yahia-kilany90 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

  • Responsive grid card desgin


    Yahia-kilany•90
    Submitted 11 months ago

    I used the grid layout for the first time and it took some effort to adjust to it.


    1 comment
  • responsive , flexbox.


    Yahia-kilany•90
    Submitted 11 months ago

    the code is not clean and i am sure there are more efficient ways to improve it


    1 comment
  • Recipe page


    Yahia-kilany•90
    Submitted 12 months ago

    I didn't check how the website preforms at different screen widths and on phones. Actually, I never thought of phone functionality when I did the last challenges...I belive I should start looking into how to make my websites accessible to phones but Idk how to start so advise is pretty much appreciated. I also belive that my code isn't super clean and I did a lot of things that could be considered "hacks" and actual solutions. I would appreciate it if someone pointed out the faults and suggested better ways.


    1 comment
  • Social media links


    Yahia-kilany•90
    Submitted 12 months ago

    1 comment
  • 3 column solution


    Yahia-kilany•90
    Submitted 12 months ago

    I feel like my code is a bit bloated and I feel like there is a way to make it a lot neater. and the sizes of the fonts and the margins are all over the place for some reason


    0 comments
  • Blog card with some hover effects


    Yahia-kilany•90
    Submitted 12 months ago

    2 comments
View more solutions

Latest comments

  • adewalemudasiru•120
    @adewalemudasiru
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    This challenge took longer than expected but It feels good I was able to complete it. I decided on some implementation which I think is not the best approach to my challenges, but It work😂. I'll probably do it better once I figure out a better design approach.

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

    My biggest challenge during this project was placing the content card/box in the correct position. I didn't immediately think the CSS grid was the solution, so it took me longer trying to figure out how to position the boxes. I just started learning Grid actually and I guess I didn't understand I could use Grid in such a manner. I stumbled upon a similar design and inspected the code and saw what they did, so I just copied their code to Codepen and played with it, it seems easy but I still feel I don't understand it enough but hey, it worked😂. I also had a hard time getting the title description displayed correctly. I had to set a min-max for the description to get the result I wanted but I'm not sure if that was the correct solution but again it worked 😁.

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

    I would love to get more clarity on the CSS grid. While ChatGPT and Claude Ai have been helpful, I think getting a professional to help me understand the concept would help me improve my skills a lot.

    Four card feature section solution

    2
    Yahia-kilany•90
    @Yahia-kilany
    Posted 11 months ago

    Good work. Using clamp for sizes is a good practice from what I hear though I am not sure of the ::before tags when you could just do border-top:5px; border-color:... It's way neater than my solution tho lmao.

  • DarkCityTreno•80
    @DarkCityTreno
    Submitted 11 months ago
    What specific areas of your project would you like help with?

    Just wanna keep getting better at it even if slowly.

    Grid, Flex, mobile-first

    2
    Yahia-kilany•90
    @Yahia-kilany
    Posted 11 months ago

    The code is nice, using CSS variables and responsive design effectively imo. However, you should consider using the letter-spacing property on "perfume" to achieve the same effect as in the original design. it should be something like this

    .product-type{
    letter-spacing: 3px;
    }
    

    other than that I don't think I can give any other advice.

    Marked as helpful
  • sergicente•80
    @sergicente
    Submitted 12 months ago

    Responsive recipe using html and css

    1
    Yahia-kilany•90
    @Yahia-kilany
    Posted 12 months ago

    pretty clean and solid code in my opinion...I can't see the issue with it. However, the font weights and the color of the divisor lines aren't very accurate to the original which is a bit trivial tbh. Bravo!!

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

    first time i use media query

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

    actually i am currently practising flexbox and media query

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

    It is good

    responsive social link profile

    3
    Yahia-kilany•90
    @Yahia-kilany
    Posted 12 months ago

    The design is nice but completely different from the original.

  • nonsur•30
    @nonsur
    Submitted 12 months ago

    blog-preview-card

    1
    Yahia-kilany•90
    @Yahia-kilany
    Posted 12 months ago

    I think you should put the display: flex;, justify-content: center;, and align-items: center; properties in the body element instead of the container class. The container div does not include the entire page so it can't really center the card vertically. otherwise, I think this is solid.

  • LucasNgTg•210
    @LucasNgTg
    Submitted 12 months ago

    HTML and CSS

    1
    Yahia-kilany•90
    @Yahia-kilany
    Posted 12 months ago

    neat solution

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