
Design comparison
Solution retrospective
Learnt more on styling. Take more time on researching.
What challenges did you encounter, and how did you overcome them?Styling the image avator.
What specific areas of your project would you like help with?As of now i am gaining more confidence with css.
Community feedback
- @JunbolPosted 11 months ago
Hi Raven! here are some recommendation for your project: PROS: Most of the features are there, it’s almost done. I see you changed the color of the main title yes why not, nice.
CONS:
-
README.md: Remember you have to use the README.md template and adjust it (using Markdown syntax) with your own details
-
Screenshot: Your screenshot doesn’t match the original design, the drawing is out of place in the screenshot.
-
Alignment:
a. The alignment of the element don’t follow the design brief given they are centered (unless you intended to do so) and they should be aligned left
b. The card is not centered in the screen on desktop view: Reason: You forgot to add display:flex in the .container class
-
Credits: The photo and the Name title are not centered: You could used
-
Footer: The footer need to be away from the Name and Photo of the presenter: You could add margin-bottom: 2rem on the .name class.
-
Box-shadow: The **box-shadow **property is not inline with the design brief (unless you wanted to change the design).
RECOMMENDATIONS:
-
Semantic HTML: Try to use as much as you can semantic HTML in your index.html file this with readability , accessibility (AOM) (screen readers) (SEO). You could go here and check it out: (https://web.dev/learn/html/semantic-html) I went there again and I realized to add the ARIA ‘role’ attribute (in all my htmls 🤪
-
Flexbox: I’m sure you use 3wschools to refresh stuff. But these two new kids on the block are really great:
-
[Flexbox] (https://web.dev/learn/css/flexbox)
-
[Flexbox] (https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/) Good look and Keep going!
Cheers
Junier
0 -
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord