I'm excited to share my journey of learning CSS over the past few weeks. As an aspiring full stack developer, mastering CSS has been an important milestone for me. Here's what I learned and how I applied it to real projects.

🖌️ The Learning Journey

1. Understanding the Basics

My CSS journey began with the fundamentals—selectors, properties, and values. I started by styling simple HTML elements, learning how to:

• Apply color, typography, and spacing.
• Use different types of selectors like class, ID, and attribute selectors.
• Implement basic layouts using display properties like block, inline, and inline-block.

2. Diving into Flexbox and Grid

One of the most exciting parts of learning CSS was getting hands-on with Flexbox and Grid. These powerful layout systems made it easier to create responsive and complex designs.

• Flexbox: I learned how to align items, distribute space, and create flexible layouts. This helped me understand concepts like justify-content, align-items, and flex-direction.
• Grid: The CSS Grid layout system was a game-changer. It allowed me to create two-dimensional layouts with rows and columns effortlessly. I played around with properties like grid-template-columns, grid-gap, and grid-area to build responsive grids.

3. Responsive Design with Media Queries

Responsive design was a key focus for me. I learned how to use media queries to adapt layouts to different screen sizes, making sure my designs looked great on mobile, tablet, and desktop devices.

@media (max-width: 768px) {
  /* Styles for devices with a width of 768px or less */
} 

4. Adding Flair with Animations and Transitions

To make my websites more interactive and visually appealing, I explored CSS animations and transitions. From simple hover effects to keyframe animations, these techniques helped bring my designs to life.

.element {
  transition: transform 0.3s ease-in-out;
}

.element:hover {
  transform: scale(1.1);
}

This is a basic example of adding a smooth scale effect on hover, making the UI feel more dynamic.

🚀 My CSS Project

To put everything I learned into practice, I built a responsive website as a personal project. Here are some of the key features:

• Responsive Layout: The site adapts beautifully across different screen sizes using Flexbox, Grid, and media queries.
• Custom Animations: Added subtle hover effects and animations to enhance the user experience.
• Clean Code: I focused on writing clean, maintainable CSS using the BEM (Block, Element, Modifier) methodology. 👉 Check out the live demo! https://writingsdev.vercel.app/ 👉 View the project on GitHub! https://github.com/ShivanshuPrajapati212/writings.dev 🔧 Tools and Resources I Used CSS-Tricks: My go-to resource for all things CSS. Flexbox Froggy: A fun way to practice Flexbox. Grid Garden: Helped me master CSS Grid. MDN Web Docs: For detailed CSS documentation and examples. 🌟 What's Next? Now that I've got a solid grasp of CSS, I'm moving on to JavaScript to make my web pages more interactive. Stay tuned for more updates on my learning journey!