Media Queries & Pseudo-Classes: Make Your Website Smarter 📱✨

When I started learning CSS, two concepts helped me build better websites: Media Queries and Pseudo-Classes.

What is a Media Query? 📱

A media query makes your website responsive by changing the layout based on screen size.

@media (max-width: 768px) {
.container {
flex-direction: column;
}
}

What are Pseudo-Classes? 🎯

Pseudo-classes apply styles when a user interacts with an element.

Common examples:

button:hover {
background: blue;
color: white;
}

input:focus {
border: 2px solid green;
}
:hover → When the mouse is over an element
:focus → When an input is selected
:active → While the button is being clicked