flexbox, position and @media queries

Please log in to post a comment
Log in with GitHubCommunity feedback
- @bccpadge
Hello @aneeshthakur67. Congratulations on completing this challenge!!!🎉
Here are a few suggestions you might want to implement to improve your solution.
HTML 📃:
- Images must have alt text for screen readers
Example:
<img class="profile-pic" src="./assets/images/avatar-jessica.jpeg" alt="headshot of Jessica Randall">
- Every website needs to have a
h1
and you can do one of two things.- Wrap the text Jessica Randall in a
h1
- Wrap the text Jessica Randall in a
- Wrap the title of the website in a
h1
like this<h1>Frontend Mentor | Social links profile</h1>
for screen readers and keep the text Jessica Randall in ah2
- When using Heading Tags be sure to use them in chronological order.
I use this
.visually-hidden
CSS class.visually-hidden:not(:focus):not(:active):not(:focus-within) { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
- The code below needs to improve upon
<div class="social-buttons"> <button class="buttons">GitHub</button> <button class="buttons">Frontend Mentor</button> <button class="buttons">LinkedIn</button> <button class="buttons">Twitter</button> <button class="buttons">Instagram</button> </div>
Be sure to understand the purpose of a HTML tags when you code your projects.
button
andlinks
are two different thingsMore info📚:
Example:
<ul> <li> <a href="www.github.com">Github </a> </li> </ul>
CSS 🎨:
- To center your component in the middle of the page use Flexbox or CSS Grid on the
body
Flexbox
body{ display:flex; justify-center: center; align-items: center; min-height: 100vh; }
CSS Grid
body{ display: grid; place-content:center; min-height:100vh; }
You can remove the styles that are commented out because it unnecessary to add styles when you don't need them
.container { /* position: relative; */ /* top: 10rem; */ /* margin: 0 auto; */ /* width: 25%; */ /* display: flex; */ /* flex-direction: column; */ /*align-items: center;*/ /*justify-content: center; */ background: hsl(0, 0%, 12%); border-radius: 10px; }
When you use
max-width
on your.container
you don't need to use media queries Add this code below and use rem units improve accessibilityYou can play around with the
padding
value.container{ max-width: 25rem; padding: 2rem; } img{ max-width: 100% display: block; } h2, p{ text-align: center; }
I hope you find this useful and don't hesitate to reach out if you have any questions
Marked as helpful
Join 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