This is a solution to the Blog preview card challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- See hover and focus states for all interactive elements on the page
- Solution URL: https://github.com/P-Lucas-S/blog-preview-card-main
- Live Site URL: https://p-lucas-s.github.io/blog-preview-card-main/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
This project helped me improve my skills in creating responsive layouts using Flexbox. I learned how to effectively use Flexbox properties to center elements and create a responsive design that adapts well to different screen sizes.
Here's an example of a Flexbox container I am proud of:
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #F4D04E;
font-family: 'Figtree', sans-serif;
font-size: 17px;
font-weight: 500;
width: 100vw;
height: 100vh;
}In future projects, I want to continue focusing on responsive design, ensuring that my layouts look good on all devices. Additionally, I plan to explore CSS Grid to see how it compares to Flexbox for creating complex layouts.
- MDN Web Docs - Flexbox - This helped me understand Flexbox better and apply it effectively in my project.
- CSS Tricks - A Complete Guide to Flexbox - This guide was very useful for understanding the various properties of Flexbox and how to use them.
- Website - Pedro Lucas
- Frontend Mentor - @P-Lucas-S
I want to thank the Frontend Mentor community for their support and feedback. The resources provided by the community were incredibly helpful in completing this project.