Alex Chang

Pseudo-classes select elements based on state like :hover, :focus, :active, and :visited. I use :nth-child() and :nth-of-type() for pattern-based selection. The :first-child, :last-child, and :only-child target specific positions. Form pseudo-classes

CSS transitions animate property changes with transition: property duration timing-function delay. I use transition-property to specify which properties animate. The timing-function controls acceleration with values like ease, ease-in, ease-out, cubic

CSS custom properties define reusable values with --variable-name syntax and access with var(--variable-name). I scope variables at :root for global access or within selectors for local scope. Variables cascade and inherit unlike preprocessor variable

Media queries adapt layouts to different screen sizes using @media rules with breakpoints. I use mobile-first approach starting with base mobile styles and progressively enhancing with min-width queries. Common breakpoints are 640px (sm), 768px (md),

CSS specificity determines which styles apply when multiple rules target the same element. I calculate specificity as (inline, IDs, classes/attributes/pseudo-classes, elements/pseudo-elements). Inline styles have highest specificity at 1000. ID select

CSS positioning controls element placement with static, relative, absolute, fixed, and sticky values. The position: relative creates a positioning context without removing from document flow. Using position: absolute removes elements from flow and pos

CSS Grid provides two-dimensional layout control for rows and columns simultaneously. I use display: grid to create grid containers. The grid-template-columns and grid-template-rows properties define track sizes. The fr unit distributes available spac

Flexbox provides one-dimensional layout for rows or columns. I use display: flex on containers to enable flexbox. The flex-direction property controls main axis direction (row, column, row-reverse, column-reverse). The justify-content property aligns

Meta tags provide metadata about HTML documents for search engines and social media. I use <meta name="description"> for search result snippets (150-160 characters). The viewport meta tag ensures responsive design on mobile devices. Open Graph t

HTML5 form validation uses attributes like required, pattern, min, max, and type to validate input. I leverage native validation before JavaScript. The <label> element associates text with inputs for accessibility. Input types like email, tel, u

Semantic HTML uses meaningful elements like <header>, <nav>, <main>, <article>, and <footer> instead of generic <div> tags. I structure content with proper heading hierarchy (<h1> to <h6>). Semantic mark