@bccpadge
Posted
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.