Front-end developer with 10+ years building modern web applications. Expert in responsive design, performance optimization, and accessibility. Passionate about creating...
/* Interactive pseudo-classes */
a:link { color: blue; }
a:visited { color: purple; }
a:hover { text-decoration: underline; }
a:active { color: red; }
a:focus { outline: 2px solid orange; }/* Basic transitions */
.button {
background-color: blue;
color: white;
padding: 1rem 2rem;
transition: background-color 0.3s ease;// Theme switching with CSS variables
const themeToggle = document.getElementById('theme-toggle');
const root = document.documentElement;
// Load saved theme
const savedTheme = localStorage.getItem('theme') || 'light';/* Mobile-first base styles (no media query needed) */
.container {
width: 100%;
padding: 1rem;
margin: 0 auto;
}/* Specificity: 0,0,0,1 - Element selector */
p {
color: black;
}
/* Specificity: 0,0,1,0 - Class selector *//* Static positioning (default) */
.static {
position: static; /* Normal document flow */
}
/* Relative positioning *//* Basic grid container */
.grid-container {
display: grid;
/* Define columns: 3 equal columns */
grid-template-columns: 1fr 1fr 1fr;/* Basic flexbox container */
.flex-container {
display: flex;
/* flex-direction: row | row-reverse | column | column-reverse */
flex-direction: row; /* default */<!DOCTYPE html>
<html lang="en">
<head>
<!-- Essential meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form Validation Example</title>
<style><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic HTML Example</title>