Design comparison
Solution retrospective
I used this project to simply build better habits when coding, such as outlining things better, tackling the project section by section, etc.
I do not have too many questions, as this one is pretty straightforward, but once again, I am open to suggestions and helpful comments.
Community feedback
- @denieldenPosted about 2 years ago
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
main
tag 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
article
tag instead of a simplediv
to the container card for improve the Accessibility img
element must have analt
attribute, it's very important!- remove all unnecessary code, the less you write the better as well as being clearer: for example the
header
container of image - remove all
margin
from.main-card
class because with flex they are superfluous - use flexbox to the body to center the card. Read here -> best flex guide
- after, add
min-height: 100vh
to 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 helpful1@Azulio123Posted about 2 years ago@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.
0@denieldenPosted almost 2 years ago@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 emptyalt=""
main
is the tag that contains and indicates the main content of the page... i.e. everything that is not aheader, footer or sidebar
Keep it up Liz :)
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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