What I am most proud of:
I am most proud of successfully implementing a responsive design that looks great on both mobile and desktop devices. This project allowed me to deepen my understanding of CSS Flexbox and media queries, and I was able to create a layout that adapts seamlessly to different screen sizes. Additionally, I am proud of the clean and maintainable code I wrote, using CSS custom properties to ensure consistency across the design.
What I would do differently next time:
Next time, I would like to focus more on accessibility features to ensure that the website is usable by everyone, including people with disabilities. This would include adding ARIA labels, improving keyboard navigation, and ensuring sufficient color contrast. I would also explore using CSS Grid for more complex layouts, as it offers more flexibility and control over the design. Finally, I would consider incorporating a CSS preprocessor like Sass to streamline my workflow and make my CSS more modular and easier to maintain.
What challenges did you encounter, and how did you overcome them?Challenges:
-
Responsive Design:
- Ensuring that the card layout looked good on both mobile and desktop devices was challenging. I had to carefully use Flexbox and media queries to adjust the layout for different screen sizes.
- Solution: I adopted a mobile-first approach, starting with the design for smaller screens and then using media queries to adjust the layout for larger screens. This helped me create a consistent and responsive design.
-
CSS Custom Properties:
- Managing and maintaining consistent styles across the project was initially difficult.
- Solution: I used CSS custom properties (variables) to define common styles such as colors and font sizes. This made it easier to maintain consistency and update styles across the project.
-
Image Alignment:
- Aligning images within the card and ensuring they were responsive was tricky.
- Solution: I used Flexbox to center the images and set their maximum width to 100% with auto height. This ensured that the images were properly aligned and scaled correctly on different screen sizes.
-
Box Shadow and Border Radius:
- Applying box shadows and border-radius properties to create a visually appealing card design required some experimentation.
- Solution: I experimented with different values for box-shadow and border-radius until I achieved the desired look. I also used online tools to visualize and fine-tune these properties.
By tackling these challenges, I was able to improve my skills and create a polished and responsive blog preview card.
