This is a solution to the Product preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects
Note: Delete this note and update the table of contents based on what sections you keep.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover and focus states for interactive elements
- Solution URL: [Add solution URL here] (https://github.com/carlosdamota/Reto_tarjeta_producto.git)
- Live Site URL: [Add live site URL here] (https://reto-tarjeta-producto-carlosdamota.vercel.app/ )
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- BEM metodology
One of the most important things I've learned is the importance of writing readme.
Other concepts have been the use of the BEM methodology to be able to guide myself through the CSS, I'm still a bit green and I create more code than necessary, I hope to polish this aspect.
If you want more help with writing markdown, we'd recommend checking out The Markdown Guide to learn more.
I had to make several semantic improvements compared to the first final version, such as replacing the divs that grouped the content of the card with (main). In the first version, I used 2 different images without using the (picture) tag. I have learned to use this tag, as well as how to improve the code to make it more semantic and responsive. In terms of the HTML structure, in the first version, there was a (p) tag inside the (button) which has been replaced with a (span) for better practices.
Some of the technologies and concepts that I am currently interested in improving include: Semantic HTML and more optimized CSS. Gradually, I would also like to improve my knowledge in library types like Bootstrap, and practice CSS methodologies like BEM.
- Example resource 1 - I want to thank the creators, because thanks to the concepts on this page, I can improve my use of semantic HTML.
- Example resource 2 - I want to thank the creators, because thanks to the concepts on this page, I can improve my use of semantic HTML.
- Website - Carlos Damota
- Frontend Mentor - @carlosdamota
- Twitter - @carlos_damota
- GitHub - @carlosdamota
- Linkedin - @carlos-damota
I would like to thank [@Hassiai] (https://www.frontendmentor.io/profile/Hassiai) for correcting my previous exercise and helping me better assimilate the concepts. I would also like to thank the people who believe in me and support me every day. Special mention to Angela Garcia [@Angela-GM] (https://github.com/Angela-GM), my wife, with whom I try to compete every day to improve. I would also like to thank [@openbootcamp] (https://open-bootcamp.com/) for their daily effort to bring "free" content to the platform and try to improve the community.
*I would also like to add that Open-bootcamp is an incredible and free platform with a great community. However, currently, due to the bubble in the industry, they have opened a donation line through GitHub. It would be a shame for this platform that can be so helpful to disappear, so if you want to support it, please consider making a donation (https://github.com/sponsors/Open-Bootcamp)