CSS, Flexbox

Please log in to post a comment
Log in with GitHubCommunity feedback
- @eneyedev
Nice job. There is only a correction I think you'll like to make: Reducing the size of the image. I Hope These Is Helpful👍
- @correlucas
👾Hello @ismaelazanza, congratulations for your first solution!👋 Welcome to the Frontend Mentor Coding Community!
Great start and great first solution! You’ve done really good work here putting everything together, I’ve some suggestions you can consider applying to your code:
Something I've noticed in your code is that in many occasions you've added some
<div>
to wrap contents that don't really need to be inside of a div block. Note that for this challenge all you need is a single block to hold all the content, can be<div>
or<main>
if you want to use a semantic tag to wrap the content, the cleanest structure for this challenge is made by a block of content with div/main and all the content inside of it (img, h1 and p) without need of any other div or something. See the structure below:<body> <main> <img src="./images/image-qr-code.png" alt="Qr Code Image" > <h1>Improve your front-end skills by building projects</h1> <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p> </main> </body>
Use
<main>
instead of<div>
to wrap the card container, its better to use<main>
in this case because you’re indicating that’s the main block of content of this page and also because<div>
doesn’t have any meaning, it's just a block element.Every page needs a main heading, the
<h1>
to show which is the most important heading. You need to increase the headings by one level, like h1, h2, h3 to show the titles hierarchy. Remember that you cannot have more than one h1 heading.Save your time using a CSS RESET to remove all default settings that are annoying as the margins, paddings, decorations and optimize it making easier to work,see the article below where you can copy and paste this css code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/
✌️ I hope this helps you and happy coding!
- @denielden
Hi Ismael, great job! 😁
Some little tips:
- add
main
tag and wrap the card for improve the Accessibility - also you can use
article
tag instead of a simplediv
to the container card for improve the Accessibility - add descriptive text in the
alt
attribute of the images - remove all unnecessary code, the less you write the better as well as being clearer: for example the
div
container of image - remove all
margin
fromcontenedor
- 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
Hope this help! Happy coding 😉
- add
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