Skip to content
OverviewSolutions
15
Comments
38
Yusuf K. Muhammad
@kyusufm

All comments

  • Yusuf K. Muhammad•570
    @kyusufmPosted 9 months 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!

    0
  • Yusuf K. Muhammad•570
    @kyusufmPosted 9 months 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
    1
  • Yusuf K. Muhammad•570
    @kyusufmPosted 10 months 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

    1
  • Yusuf K. Muhammad•570
    @kyusufmPosted 10 months 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
    0
  • Yusuf K. Muhammad•570
    @kyusufmPosted 10 months 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!

    0
  • Ellyxina•50
    @EllyxinaSubmitted 10 months ago

    I'm still learning Front-end development and will welcome any feedback you can provide.

    I'd like to know how long a card or a page like this should take to write the code for. It took me about 1 hour and 15 min to write it and another 30-40 min before to check the measurements since I'm on a free account and don't have access to the Figma file.

    Thank you for any responses.

    Product-Preview-Card-Component

    2
    Yusuf K. Muhammad•570
    @kyusufmPosted 10 months 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!

    1
  • Yusuf K. Muhammad•570
    @kyusufmPosted 10 months 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
    0
  • Chisom Ohanu•20
    @ChiblessedSubmitted 10 months ago

    Feedbacks are welcome. Also can some help me on how to get my repository link

    Recipe Page

    1
    Yusuf K. Muhammad•570
    @kyusufmPosted 10 months 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!

    1
  • Yusuf K. Muhammad•570
    @kyusufmPosted 10 months 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

    0
  • Yusuf K. Muhammad•570
    @kyusufmPosted 10 months ago

    dang, i missed the font-size

    0
  • Yusuf K. Muhammad•570
    @kyusufmPosted 10 months 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
    0
  • Yusuf K. Muhammad•570
    @kyusufmPosted 10 months 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
    0