@Ishmaelsealey
Posted
Hi There!
Well done on completing your first challenge! 💯
To answer your question about centering the content: Yes, there are many ways of centering your content. Although you are already doing part of what is necessary to center your content!
Your body is a flexbox and has the justify-content: center; and align-items: center; properties, however your body does not span the width and height of the user's screen.
Use the min-width: 100vw; and min-height: 100vh; on your body tag to make it appear centered.
Media Queries are used to change the styling of specific elements on a webpage when the size of the screen changes. Styles can be nested in a media query, meaning that you do not need to write a new media query before each element you style.
@media screen and (min-width: 700px) {
body { ...styles... }
h1 { ...styles... }
}
Designing a mobile first website means that all your styles will be made for a mobile device initially Then you will use media queries so the styles change when the screen gets bigger than a specified size.
Finally, for the purpose of accessibility, your websites should contain one <h1> tag. I saw you used a <h3> for your header.
I hope my comment helps you! Happy Coding! 🪁
