@denielden
Posted
Hello Liz, You have done a good work! 😁
Some little tips to improve your code:
- To add the top image in the background just put more specific background properties to the body:
background: url("../img/pattern-background-desktop.svg") no-repeat top center;
background-size: contain;
background-color: #e0e8ff;
- use
maintag to wrap the card and improve the Accessibility but not as a container of that one element or inside elements of card: main is to contain the main page content of all the html page - also you can use
articletag instead of a simpledivto the container card for improve the Accessibility imgelement must have analtattribute, it's very important!- remove all unnecessary code, the less you write the better as well as being clearer: for example the
headercontainer of image - remove all
marginfrom.main-cardclass because with flex they are superfluous - use flexbox to the body to center the card. Read here -> best flex guide
- after, add
min-height: 100vhto body because Flexbox aligns child items to the size of the parent container
Keep learning how to code with your amazing solutions to challenges.
Hope this help 😉 and Happy coding!
Marked as helpful
@Azulio123
Posted
@denielden Excellent feedback. I will get back to this project soon and update with good changes. Thanks for taking the time!
I really like the <article> tag suggestion. I am really trying to take in all the information I can about accessibility.
I was told if the image is purely decorative, it doesn't necessarily need an alt tag. But! I will put one regardless. I always liked it.
<main> is for the entirety of the content of the body? Ok, nice.Gosh, there is still a lot to learn about the best grid to use for CSS.
As I go along sticking things together and making them not slide all over each other, I tend to delete most of the margin and padding rules I make. So removing the margin from .main-card makes perfect sense.
I really cannot thank you enough for taking the time. I appreciate it a lot.
@denielden
Posted
@Azulio123 It was a pleasure to spend my time to help you improve!
Yes, if the image is purely decorative it doesn't need the content of the alt tag. But remember to always put the alt tag in the images... if decorative leave the tag empty alt=""
main is the tag that contains and indicates the main content of the page... i.e. everything that is not a header, footer or sidebar
Keep it up Liz :)
Marked as helpful
