Frontend
HTML/CSS
The semantic structure (HTML) and presentation (CSS) of the web — headings, landmarks and forms for meaning and accessibility, plus flexbox, grid, custom properties and media queries for responsive layout. Semantic markup is what screen readers and search engines depend on. CSS's cascade and specificity are both its power and its sharpest footguns.
Purpose
HTML gives a page its meaning — headings, landmarks, lists, forms — and CSS gives it its presentation: layout, colour, type, motion. The separation exists so the same semantic document can serve browsers, screen readers, search engines and print alike.
When to Use It
Everything on the web bottoms out here, whatever framework sits on top. Semantic elements (<nav>, <main>, <button>) buy accessibility and SEO for free; flexbox and grid handle real-world layout; custom properties and media queries make one stylesheet serve every screen size.
Trade-offs
CSS's cascade and specificity are its power and its sharpest footguns — global by default, styles collide as projects grow, which is why methodologies (BEM), scoping tools and utility frameworks like Tailwind exist. Div-soup with click handlers 'works' but silently discards accessibility and semantics.
Implementation
Start with the correct element for the job — a <button>, not a clickable <div>; structure documents with one <h1> and logical heading order. Lay out with flexbox for one dimension and grid for two, keep specificity flat, and let media queries and relative units carry responsiveness.