Mohammod Hanif• 40
@hanif017363
Submitted
P
adhSwede
@adhSwede
All comments
Pros:
- Layout looks similar
- The correct fonts are being used
- Code formatting looks good.
Cons:
- Try using more semantics in your code. Instead of divs for the big card element try <main>, instead of divs for the sections inside try <section>
- Colors are a bit off I would recommend using instant eyedropper if you want a quick and easy tool to get hex color codes. -the table needs a bit or work, the lines are not the same as the design.
Overall: Good job and hang in there, mistakes allow us to grow, but take the positives to heart aswell. You earned them.
0- nimbo• 50
@7bibi
Submitted
What are you most proud of, and what would you do differently next time?
I'm proud that I tried more than once to get the same result as the provided design.
What challenges did you encounter, and how did you overcome them?
I had a lot of issues with centering elements and containing them in their parent elements. I tried multiple ways, but I could've done better.
What specific areas of your project would you like help with?
CSS centering and containing with flexbox and grid. I want to get comfortable using them and use the best solution a person can come up with. I need to learn more CSS!
Pros:
- Colors and fonts are correct
- Use of flexbox is great for this type of task.
Cons:
- Semantics in HTML kind of lacking (may i suggest ul>li for list type usage like the link list).
- Dimensions, Border radiuses, Fontsizes missmatch a bit.
Overall, GOOD JOB! If i could suggest something to work on, i would suggest you practice semantic HTML for SEO and screen readers to handle your work easier.
Marked as helpful
0 - mahdigithubr• 20
@mahdigithubr
Submitted
What are you most proud of, and what would you do differently next time?
The challenge is very interesting
What challenges did you encounter, and how did you overcome them?
very easy
What specific areas of your project would you like help with?
amazing
Pros:
- Code format is nice and readable
- Nailed the dimensions.
- Colors are on point.
- End result is pretty spot on (only downside is the attribution tag pushing everything up a bit)
Cons (Not really in your case, just a few heads up):
- I would use an H1 instead of an H4 for semantics, since it is the main heading on the page.
- Could do with a bit less divs and a little more semantic tags. e.g. <main> <footer>
Summary: All in all Amazingly done on the styles, the use semantics and the use of H1 are the only things i would improve here.
Bonus tip: For my attribution tags I've went with an absolute position about 2 rem from the bottom, it takes the element out of the normal flow and in your case it would have made your solution 1:1 with the design since you were already good on the dimensions.
0 - Mubarak1204• 20
@Mubarak1204
Submitted
What are you most proud of, and what would you do differently next time?
My use of BEM naming convention and modern CSS for responsiveness.
What challenges did you encounter, and how did you overcome them?
Trying to apply the box shadow to the main element. I was trying another thing entirely until I remembered the box shadow.
- Colors look good.
- Correct Fonts and Font weights across the board.
- Dimensions looks fairly close.
- Description in <img> tag was better than mine.
- I can tell there was an effort to use semantic tags. I do not recognize them all but that could be on me.
- Nice and neat code structure. Looke like prettier was being used.
- Dimensions are a little off, but nothing too serious.
- Could do with a little commenting. I like to pretend someone else might read my code, even if that isn't always the case.
Nicely done!
Marked as helpful
0 - PTimothé Bissonnette• 200
@Fable54321
Submitted
What are you most proud of, and what would you do differently next time?
Proud of the way I've used utility classes
- Card itself is the correct shape and dimensions.
- Font and weight of the h1 looks spot on.
- P looks like the right font.
- Background colors look good.
- Alignment of the card itself could use a revision.
- The text color looks black to me, it's supposed to be something navy-ish
- Font weight is a little bit off on the p.
Overall, good job!
1
