@AdrianoEscarabote
Posted
Hi Luke Janssen, how are you?
I really liked the result of your project, but I have some tips that I think you will enjoy:
- every Html document must contain the main tag, so we can identify the main content, to fix this, wrap all the content with the main tag. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology
- images must have alt text unless it is a decorative image, for any decorative image each IMG tag must have empty
alt=""
and addaria-hidden="true"
attributes to make all the assistive technologies of the Web, as screen reader. Learn the differences between decorative/meaningless images vs important content. - To align some content in the center of the screen, always prefer to use
display: flex;
it will make the layout more responsive!
Example:
body {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
To prevent the background image from breaking at higher resolutions, we can prevent this in two different ways:
-
Add a
background-repeat: repeat-x;
, the image will repeat on the horizontal axis, preventing it from breaking. -
Add a
background-size: 100% 50vmin;
, the50vmin
will set its height as the page target, and100%
will make it stretch on the horizontal axis.
Feel free to choose one of the two!
The rest is great!
I hope it helps... 👍
Marked as helpful
@lukejans
Posted
@AdrianoEscarabote Thanks so much for the help on this one! I was in the process of going with flexbox on the main container which has massively helped! I appreciate the feedback massively and have just made this more accessible for screen readers and fixed the background!
@AdrianoEscarabote
Posted
@lukejans happy coding!!