
Design comparison
Solution retrospective
I am proud of my workflow and effeciency in this project.
What challenges did you encounter, and how did you overcome them?I struggled to get the avatar image to the correct size, then i realised that i wasnt styling the actual image to be the right size i was only stylying the container.
Community feedback
- @ExtendoGHPosted about 2 months ago
Project Objective
The goal of the project is to faithfully replicate the design.
I see that I used a different avatar and text, which is fine, but the styling is incorrect.
-
The container should be centered both vertically and horizontally. I recommend using flexbox for this.
-
The image should be circular. Use
border-radius: 50%
for this. -
There should be 5 social media links, but you have 4.
-
The colors also differ slightly from the project.
-
The design is not responsive. The links are too narrow at a width of 768px, and it also doesn’t look good at 475px.
-
Alt Text: Writing longer and descriptive alt attributes for images would improve accessibility and make your website easier to use for people with disabilities.
-
SEO Improvements: Consider adding tags like meta description and meta keywords in the
<head>
section to enhance the website's SEO potential. -
Responsive Design: To make the project fully responsive, it is recommended to use only rem units. Here's an article explaining why: Fedmentor - Font Size & Units. While you mostly use rem, there are instances (e.g., padding or margins) where px units appear.
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