3 Column preview card component (HTML, SASS, Flexbox)
Design comparison
Solution retrospective
Hey there! 🫡 this is Nacho
This is my solution of the "3 column preview card component"
How was my experiencie in this project?
It is my first time using SASS, this project was funny and challenging for me because I've never used SASS. I loved!
What I used in this project?
- Semantic HTML
- SASS
- BEM
- Mobile-first workflow
I have some questions:
- Is my code okay?
- It is my first time using SASS, any tip?
I want to know your feedback! any tip or advice are helpful and welcome!
Cheers!
Community feedback
- @matusalab-devPosted almost 2 years ago
congrats for making it this far, the only bug that I found is in the layout justify content center breaks the layout at some point( tablet mode). try to use media query then set the justify content to flex-start at that break point.
Marked as helpful1 - @MelvinAguilarPosted almost 2 years ago
Hola! Felicitaciones por completar un nuevo desafió, tengo algunas sugerencias que le podrían interesar
- Elimina
width:100vw
en el elemento main, de lo contrario se creará un scrollbar horizontal en algunos dispositivos de escritorio.
- En mi humilde opinion, debería utilizar modificadores mas descriptivos al momento de nombrar clases con BEM, por ejemplo:
container__card--2
, el texto "2" no me dice en que estado esta el contenedor, puede usar colores en su lugar
- No se recomienda tener dos o más etiquetas h1 en una página web porque puede ser confuso para los motores de búsqueda. Los motores de búsqueda usan la etiqueta h1 para determinar el tema principal de una página.
Espero que lo encuentres útil! 😄 Sobre todo, la solución que ha presentado es genial!
Saludos!
2@matusalab-devPosted almost 2 years ago@MelvinAguilar sorry, I couldn't understand your language.
0 - Elimina
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