Web Development 2

Before Flexbox and Grid, web layouts involved hacks — floats, clearfixes, inline-block tricks. Those days are over. These two systems handle 99% of layout needs, and understanding them is non-negotiable.

Flexbox: One-Dimensional Layout

Flexbox handles layout in one direction at a time — either a row or a column. It's perfect for:

• Navigation bars
• Card rows
• Centering content (vertically and horizontally)
• Distributing space between elements

Essential Flexbox Properties

On the container (parent):

• display: flex — activates flexbox
• flex-direction — row (default) or column
• justify-content — horizontal alignment: flex-start, center, space-between, space-around
• align-items — vertical alignment: stretch, center, flex-start, flex-end
• flex-wrap — nowrap (default) or wrap (items wrap to next line)
• gap — spacing between items. Use this instead of margins.

On the items (children):

• flex: 1 — item grows to fill available space
• flex: 0 0 200px — item stays fixed at 200px
• order — reorder items without changing HTML

CSS Grid: Two-Dimensional Layout

Grid handles rows and columns simultaneously. It's the right choice for:

• Full page layouts
• Image galleries
• Dashboard-style interfaces
• Any layout where you need precise control over both axes

Essential Grid Properties

• display: grid — activates grid
• grid-template-columns — defines columns. 1fr 1fr 1fr = three equal columns. repeat(3, 1fr) = same thing.
• grid-template-rows — defines rows. Often left to auto-size.
• gap — spacing between grid cells
• grid-column: span 2 — item spans two columns
• grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) — responsive grid that auto-wraps. This one line replaces a media query.

When to Use Which

• Flexbox for components: navbars, button groups, card rows, centering
• Grid for page structure: overall layout, galleries, complex arrangements
• They nest perfectly — use Grid for the page, Flexbox inside each Grid cell

If you're fighting CSS to get something to line up, you're probably using the wrong layout system. Switch between Flex and Grid until one feels natural for the job.

Static sites feel dead. A few well-placed animations and interactive touches make your site feel professional and alive — without JavaScript.

CSS Transitions

Transitions animate the change between two states of a property. They're triggered by state changes like :hover, :focus, or class toggles.

• transition: property duration easing — e.g., transition: background-color 0.3s ease
• transition: all 0.2s ease — transitions all changed properties (use sparingly, be specific when you can)
• Common properties to transition: color, background-color, transform, opacity, box-shadow, border-color

Performance tip: Only transform and opacity are GPU-accelerated. Animating width, height, or top causes layout recalculations and janky performance.

Hover Effects

Hover states are the most common interactive touch. Some practical patterns:

• Scale on hover: transform: scale(1.05) — subtle zoom effect on cards or images
• Shadow lift: Add or increase box-shadow on hover to make elements feel like they're lifting off the page
• Color shifts: Change background or text color. Combine with transition for smoothness.
• Underline animation: Use a ::after pseudo-element with transform: scaleX(0) → scaleX(1) for animated underlines

CSS Animations with @keyframes

Keyframe animations run automatically (not just on hover) and can loop, reverse, or play once:

• Define the animation with @keyframes name { from { } to { } }
• Apply it with animation: name duration easing delay iteration-count direction
• Common uses: fade-in on page load, pulsing buttons, subtle background movement, loading spinners

Scroll-Triggered Effects

For elements that animate when scrolled into view, you have two options:

• CSS-only: The new animation-timeline: view() (limited browser support as of 2026, but growing)
• JavaScript: Use IntersectionObserver to add a class when an element enters the viewport, then animate that class with CSS

The IntersectionObserver approach is a few lines of JavaScript and works everywhere:

• Create the observer, set a threshold (e.g., 0.1 = 10% visible)
• When the element enters view, add a class like .visible
• CSS: .fade-in { opacity: 0; transform: translateY(20px); transition: all 0.6s ease; }
• CSS: .fade-in.visible { opacity: 1; transform: translateY(0); }

What Not To Do

• Don't animate everything. If every element bounces, slides, and fades, your site feels like a carnival.
• Don't slow things down. Most transitions should be 200-400ms. Anything over 500ms feels sluggish.
• Respect prefers-reduced-motion. Some users disable animations for accessibility. Wrap your animations: @media (prefers-reduced-motion: no-preference) { }

You know HTML and CSS now. That puts you ahead of 90% of creators. But you should also understand the tools that most of the web actually runs on — because sometimes a CMS is the right tool for the job.

What Is a CMS?

A Content Management System lets you create, edit, and publish web content without writing code for every page. You write content; the CMS handles the template, navigation, and publishing.

WordPress

WordPress powers ~43% of all websites. Two versions exist:

• WordPress.com — Hosted service. Free tier with limitations, paid tiers for custom domains and features. Good for blogging.
• WordPress.org — Self-hosted. Download the software, install on your own server. Full control, unlimited themes and plugins. Requires a hosting provider ($5-20/mo).

When to use WordPress: blogs, content-heavy sites, sites that need frequent updates, sites where non-technical people need to add content.

Why knowing HTML/CSS matters: WordPress themes are built with HTML, CSS, and PHP. When a theme doesn't do exactly what you want (it won't), you can customize it instead of being stuck.

Squarespace

Squarespace is a drag-and-drop website builder. No code required, no hosting to manage.

• Strengths: Beautiful templates, built-in e-commerce, great for portfolios and small businesses
• Limitations: Less flexible than WordPress, more expensive ($16-49/mo), harder to customize beyond what templates offer
• When to use: You want a polished site fast and don't need deep customization

Other Platforms Worth Knowing

• Wix — Similar to Squarespace, more design freedom but messier code output. Good for small business sites.
• Shopify — E-commerce focused. If you're selling physical or digital products, this is the standard.
• Carrd — Single-page sites. $19/year for pro. Perfect for link-in-bio pages, landing pages, or simple portfolios.
• GitHub Pages — Free static site hosting. You write HTML/CSS/JS, push to GitHub, and it's live. No CMS, but no cost and full control.
• Linktree / Beacons — Link-in-bio tools. Not full websites, but most creators need one. Linktree is simpler; Beacons has more features.

When to Code vs. When to Use a Builder

• Code from scratch when: you want full control, unique design, fast load times, or you're learning (which you are)
• Use a builder when: speed matters more than customization, you need e-commerce fast, or a non-technical collaborator needs to edit the site
• Use a CMS when: the site has lots of content that changes often (blog, product catalog, community)

Knowing HTML and CSS means you're never locked into a platform. You can always build it yourself or customize whatever tool you choose.