Design comparison
Solution retrospective
Hello, I am self-taught developer, currently practicing HTML & CSS. I would like you to help me with feedback so I can continue learning. Thanks
Community feedback
- @DavidMorgadePosted about 2 years ago
Buenas Alba, enorabuena por terminar el challenge y bienvenida a la comunidad de FrontEndMentor
Además de lo ya dicho por lucas, me gustaría ayudarte con el tema de centrar tu card, de una manera un poco más sencilla.
En vez de utilizar
margins
en tu<section>
para poder centrar el card, puedes usar mejor flexbox en el body (que es su elemento padre) y así poder centrarlo, solo necesitas añadirle unheight: 100vh
para que el body te ocupe toda la pantalla del navegador, y usar flex de esta manera en tu body:body { text-align: center; background-color: var(--color-primary-light); margin: 0; color: var(--color-dark-grey); font-family: 'Fraunces', serif; font-weight: 500; display: flex; justify-content: center; align-items: center; flex-direction: column; min-height: 100vh; }
Recuerda que para que esto funcione tienes que quitar los margins del section, y así tu componente quedará completamente centrado!
Espero que mi feedback te sea de ayuda, si tienes alguna pregunta o necesitas ayuda con algo no dudes en preguntarme, que estamos aquí para ayudar!, un saludo
Marked as helpful0 - @correlucasPosted about 2 years ago
👾Hello Alba, congratulations for your first solution! 👋 Welcome to the Frontend Mentor Coding Community!
You did a good work putting everything together in this challenge, something you can do to improve the image, is not using it by the CSS because it's not a good practice for SEO reasons, instead of that use
<picture>
or<img>
wrap both images. You can manage better this images inside the<picture>
tag and use the html to code to set when the images should change setting the devicemax-width
depending of the device (phone / computer) Here’s a guide about how to usepicture
:https://www.w3schools.com/tags/tag_picture.asp
You jumped from h3 to h5 and it's better follow the sequence of headings to have the hierarchy, h1, h2, h3...
✌️ I hope this helps you and happy coding!
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