
Yusuf K. Muhammad
@kyusufmAll comments
- @Nabil-Zaim-NZ@kyusufm
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!
- @Nasifuad@kyusufm
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
- @unshreif@kyusufm
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@kyusufm
Hi Viccyace, Nice solutions!
Minor feedback from me
- you can remove the unused footer and update
body
, - you can set
heigh 100vh
, andjustify content center
- you can remove the unused footer and update
- @azgpapi@kyusufm
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!
- On the image: in your case, your image is on the same level with your index.html. so you should change the src to
- P@Ellyxina@kyusufm
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@kyusufm
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 andsummary
section.in this case, you can add
background white
andbox shadow
to your#container
, and then remove the box shadow inside the#bottom-page
Goodluck on the journey!
Marked as helpful - @Chiblessed@kyusufm
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!
- @dalhaldalha@kyusufm
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
- @kyusufm@kyusufm
dang, i missed the
font-size
- @JJ-codes-9@kyusufm
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@kyusufm
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 - @imabuzerkhan@kyusufm
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~
- @ayodejibello@kyusufm
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 - wrap the content using
- @Oksadeebila@kyusufm
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 - @yazizomar@kyusufm
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@kyusufm
Hi JJ, Congrats on finishing the challenge!
to make the line under the table, first you need to add
border-spacing: 0
totable
and to make the table more appealing, you can add
width:100%
and make bothtd
towidth:50%
Another thing, You can add the fonts from the challenge
style-guide.md
in your challenge folderMarked as helpful - @cchivers@kyusufm
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!