Design comparison
Solution retrospective
?
What challenges did you encounter, and how did you overcome them?the picture , putting it in the center, buttons.
What specific areas of your project would you like help with?if any one can help me with the picture or any part of my project will great
Community feedback
- @volrarPosted 21 days ago
To start, I'd recommend not using such hard coded styles. For example, with your image you are setting the dimensions with pixels. It works for this instance, but different mobile phones have a different dpi, so 30px can look drastically different between devices. Trying using styles such as 'rem' (1rem is equal to 1 unit of the font size of the root element) or 'em' (1em is equal to 16px so I wouldn't recommend it for sizing elements on mobile viewports).
For your image, I believe your issue lies in your file pathing. Since your image is in a folder you'd want to use the following pathing: src="./assets/images/avatar-jessica.jpeg". Removing the '/' at the start of your code will also produce the same result.
Additionally, I'd recommend making it practice to not name your class'/Id's so similar. For example, in your css you have .work, .works, .workz, .workk. It looks like you did this because you made the social links buttons. An alternative way to accomplish this without the confusing class names is to convert that div container with the buttons to an unorganized list with list elements containing anchor tags. Doing it this way means you only need 3 classes, 1 for the unorganized list container, 1 for the list elements, and one for the anchor tags if you need to adjust the font styles. Not only would this require less code, but it would also make it easier for someone else to pick up the code if you were to say work with a group.
All that being said, you did a great job! There's a few things I would personally do differently, but overall it looks like you're getting the gist of things.
1
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