Design comparison
Solution retrospective
The buttons!
What challenges did you encounter, and how did you overcome them?The buttons.
Community feedback
- @bccpadgePosted 4 months ago
Hello @ArjayGithub-dev. Congratulations on completing this challenge!!!π
I have a few tips you might be interested in to improve your solution.
HTML π:
- Every website should have at least one landmark like a
main tag
. You can wrap all your content usingmain
tag. - Attribution can be contained in a footer tag
- Images must have
alt
text for screen readers- Example:
<img src="assets/images/avatar-jessica.jpeg" alt="headshot of Jessica Randall">
- Example:
To make your HTML more accessible
- Use semantic HTML tags
For the social media wrap them in
ul
tag<ul> <li> <a href="wwww.github.com"> Github</a> </li> </ul>
The code above is showing that a user can link on the Github link and go to the website.
More infoπ:
CSS π¨:
- Best practice to remove all the default styles using CSS Reset
- A Modern CSS Reset by Josh Comeau
- A 'more' Modern CSS Reset by Andy Bell
- Font size must be in rem units. Pixels don't scale when users want to change their font size in their preferred web browser.
The code below is updated with comments explaining my corrections.
body{ /* height: 100vh; */ Using height or width gives elements a fixed size so you can change it to min-height /* margin: auto; */ You can remove this line of code because it is unnecessary. display: grid; /* justify-content: center; */ You can use place-content: center which is CSS shortand property for justify-content:center and align-items:center /* align-items: center; */ background-color: hsl(0, 0%, 8%); font-family: "Inter", sans-serif; } .container { background-color: hsl(0, 0%, 12%); border-radius: 10px; /* width: 90vw; */ You can remove this line of code because it is unnecessary. max-width: 300px; padding: 20px; text-align: center; }
Here is my solution to this challenge Social links profile
I hope you find this useful and don't hesitate to reach out if you have any questions.
1 - Every website should have at least one landmark like a
- @Ridwan10000Posted 4 months ago
@ArjayGithub-dev Good Job. Use
<main>
land marks. Also use<footer>
instead of<div>
to include attributions. Instead of usingcolor: white
in too many places use it in.container
rule. Try to use em instead of px as long as you can avoid using px.Nice clean code. Very good job. Keep coding!
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