Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
15
Comments
38
Yusuf K. Muhammad
@kyusufm

All comments

  • Nabil-Zaim-NZ•40
    @Nabil-Zaim-NZ
    Submitted over 1 year ago

    html & css

    1
    Yusuf K. Muhammad•570
    @kyusufm
    Posted over 1 year ago

    Hi Nabil, Congrats on finishing the challenge!

    I have some suggestion on the HTML structure, you may use the semantic html tag like <main>, <section>, <article> to improve the SE.

    for more HTML semantic resources you can read it here: Semrush Semantic HTML5

    for the size, you can use image viewer app to measure the width and height of the container/content.

    Goodluck on the journey!

  • Nasif Fuad•300
    @Nasifuad
    Submitted over 1 year ago

    Used HTML and CSS to complete the QR code challanage.

    2
    Yusuf K. Muhammad•570
    @kyusufm
    Posted over 1 year ago

    Assalamualaikum Nasif,

    Congrats on finishing the challenge. here's some suggestion from me:

    • for the width in this case you shouldn't use wh or %. you may use exact pixels.
    • for the semantic html tag you should use main and remove the outer div. and there's some more regarding this html semantic tag. you can read it more Here at Semrush
  • muhmd•170
    @unshreif
    Submitted over 1 year ago

    social media links page

    2
    Yusuf K. Muhammad•570
    @kyusufm
    Posted over 1 year ago

    Hi unshreif

    Congratulations on finishing the challenges! Here are some suggestions to enhance your project further:

    • HTML Best Practices: Semantic HTML: Ensure that your HTML is semantic. For instance, use <main> for the main content and <section> for distinct sections.

    • Responsiveness Dont forget to add media-query so that the design won't break if we view it on phone (375px width)

    you can learn more about the semantic tag in Semrush HTML5

  • Viccyace•150
    @Viccyace
    Submitted over 1 year ago

    social-links-profile

    2
    Yusuf K. Muhammad•570
    @kyusufm
    Posted over 1 year ago

    Hi Viccyace, Nice solutions!

    Minor feedback from me

    • you can remove the unused footer and update body,
    • you can set heigh 100vh, and justify content center
  • azgpapi•90
    @azgpapi
    Submitted over 1 year ago

    Responsive Social-links page made with advanced css FlexBox

    3
    Yusuf K. Muhammad•570
    @kyusufm
    Posted over 1 year ago

    Hi @azgpapi, Congrats on the challenge!

    I have some suggestion on the HTML structure, you may use the semantic html tag like <main>, <section>, <article> to improve the SEO score. for more HTML semantic resources you can read it here: Semrush Semantic HTML5

    • On the image: in your case, your image is on the same level with your index.html. so you should change the src to src="imagename.jpg"

    There are some more, but for now i hope you can read more on the semantic HTML 5

    Goodluck on the journey!

  • P
    Ellyxina•50
    @Ellyxina
    Submitted over 1 year ago

    Product-Preview-Card-Component

    #accessibility#fresh
    2
    Yusuf K. Muhammad•570
    @kyusufm
    Posted over 1 year ago

    Beautifully done!

    just some minor thing that i can find of:

    • you can set the most used fonts inside the page in the body, so we don't need to add it for each text.

    other than that it is marvelous!

    Goodluck on the journey!

  • Genesisuzon•70
    @Genesisuzon
    Submitted over 1 year ago

    Result summary component using html and css

    1
    Yusuf K. Muhammad•570
    @kyusufm
    Posted over 1 year ago

    Hi @Genesisuzon, Congrats on the challenge!

    I have some suggestion on the HTML structure, you may use the semantic html tag like <main>, <section>, <article> to improve the SEO score.

    for more HTML semantic resources you can read it here: Semrush Semantic HTML5

    for the card, you can use wrapper to wrap both the result section and summary section.

    in this case, you can add background white and box shadow to your #container , and then remove the box shadow inside the #bottom-page

    Goodluck on the journey!

    Marked as helpful
  • Chisom Ohanu•20
    @Chiblessed
    Submitted over 1 year ago

    Recipe Page

    1
    Yusuf K. Muhammad•570
    @kyusufm
    Posted over 1 year ago

    Hi Chisom, Congrats on finishing the challenge!

    I have some suggestion on the HTML structure, you may use the semantic html tag like <main>, <section>, <article> to improve the SEO score.

    for more HTML semantic resources you can read it here: Semrush Semantic HTML5

    for the styling guide, you can find it on style-guide.md in the challenge folder.

    You can also add the fonts based on the styling guide.

    Goodluck on the journey!

  • Dalha•90
    @dalhaldalha
    Submitted over 1 year ago

    Responsive Product Card

    #accessibility
    2
    Yusuf K. Muhammad•570
    @kyusufm
    Posted over 1 year ago

    Hi Dalha, congratulations on finishing the challenge!

    I have some suggestion on the HTML structure, you may use the semantic html tag like <main>, <section>, <article> to improve the SEO score.

    for more HTML semantic resources you can read it here: Semrush Semantic HTML5

  • Yusuf K. Muhammad•570
    @kyusufm
    Submitted over 1 year ago

    Result summary pure html css

    2
    Yusuf K. Muhammad•570
    @kyusufm
    Posted over 1 year ago

    dang, i missed the font-size

  • JJ-codes-9•110
    @JJ-codes-9
    Submitted over 1 year ago

    Recipe Page using HTML and CSS

    3
    Yusuf K. Muhammad•570
    @kyusufm
    Posted over 1 year ago

    Hi JJ, for the font you can use this code below

    @font-face {
        font-family: 'YourFontName'; /* Choose a name for your font */
        src: url('path/to/your/font-file.ttf') format('truetype'); /* Adjust the path to your font file */
    }
    

    notes You can remove format(truetype).

    But it's better if you add fonts from cdn (maybe for another challenge, because they don't include it).

    Marked as helpful
  • uddyweb•110
    @uddyweb
    Submitted over 1 year ago

    A responsive social profile link

    2
    Yusuf K. Muhammad•570
    @kyusufm
    Posted over 1 year ago

    Hi @uddyweb,

    For deployment it's better to deploy in vercel.

    you can go to vercel.com, link your github account, and add new project to deploy.

    Marked as helpful
  • Md abuzer khan•30
    @imabuzerkhan
    Submitted over 1 year ago

    Responsive landing page using css

    2
    Yusuf K. Muhammad•570
    @kyusufm
    Posted over 1 year ago

    Hi Md, Congrats on solving this!

    Here's some way to improve the solution:

    • for all the styling, you can check styling-guide.md that you can find in the challenges folder
    • you can add border radius for the card
    • you may import the fonts that need to include in this design.
    • you can style the list color using li::marker

    for code:

    • better change your <div main-card> into <main>
    • for each section, you can change your div into <section>

    That's all from me. Goodluck~

  • Abdullah Abdulfatai•90
    @ayodejibello
    Submitted over 1 year ago

    Challenge recipe landing page using html and css

    1
    Yusuf K. Muhammad•570
    @kyusufm
    Posted over 1 year ago

    Hi @ayodejibello

    Here's some suggestion to improve the current solution:

    • wrap the content using <main> tag (you can put it after <body>
    • set the width of <main> to 736px
    • then you can set the border-radius and so on.
    Marked as helpful
  • oks || Oksa Dwi Nabila•50
    @Oksadeebila
    Submitted over 1 year ago

    use pure CSS for the design

    1
    Yusuf K. Muhammad•570
    @kyusufm
    Posted over 1 year ago

    Hi @oksadeebila

    To deploy it should be better to deploy it on vercel. you can check at vercel.com

    for content width, i think you can set with exact px, because if you use %. in this case you can use 736px.

    to make it dynamic for another device, you can use media-query:

    @media only screen and (max-width: 600px) {
      body {
        width: auto;
      }
    }
    

    you can read more here media-query

    Marked as helpful
  • Omar Ahmed•90
    @yazizomar
    Submitted over 1 year ago

    Product Review Card using HTML and CSS

    1
    Yusuf K. Muhammad•570
    @kyusufm
    Posted over 1 year ago

    Assalamualaikum Omar, Marvelous solution! I learn much from your code.

    Minor suggestion from me, You may add media query, so that the card don't break when we view it on mobile.

    Marked as helpful
  • JJ-codes-9•110
    @JJ-codes-9
    Submitted over 1 year ago

    Recipe Page using HTML and CSS

    3
    Yusuf K. Muhammad•570
    @kyusufm
    Posted over 1 year ago

    Hi JJ, Congrats on finishing the challenge!

    to make the line under the table, first you need to add border-spacing: 0 to table

    and to make the table more appealing, you can add width:100% and make both td to width:50%

    Another thing, You can add the fonts from the challenge style-guide.md in your challenge folder

    Marked as helpful
  • Craig•190
    @cchivers
    Submitted over 1 year ago

    3 Column Preview Card Component - Vanilla HTML/CSS

    2
    Yusuf K. Muhammad•570
    @kyusufm
    Posted over 1 year ago

    Hi Craig,

    Nice Solution. The font's not loading though. You can add padding for the button to make it more appealing. and also add more to the margin-top.

    For the semantic html: You need to add <h1> first. don't start with h2, it's not good practice and will make seo score lower. if the h1 size too big, you can set the font-size in your css.

    That's all for now. keep going man!

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

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