# Design Basics for Developers

Learn to see a page the way a designer does: show what matters first, line things up, give them room, choose type that reads well and colors with enough contrast, then add finishing touches with restraint.

Updated: November 10, 2026

## [Seeing Like a Designer](https://www.ask-codey.com/courses/css-in-depth/topics/css-seeing-like-a-designer)

1. [Hierarchy, Alignment and Whitespace](https://www.ask-codey.com/lessons/css-design-hierarchy-alignment-whitespace) (Apprentice): A page looks designed when the most important thing is seen first, everything lines up on a few shared edges, and space groups the things that belong together, and CSS sets all three with size, weight, color, text-align, padding and margin.
2. [Type That Reads Well: Scale, Line Length and Pairing](https://www.ask-codey.com/lessons/css-design-typography) (Journeyman): Text reads well when its sizes come from a type scale in rem, its lines hold about 45 to 75 characters, its line height suits body text and headings, and the page uses two fonts at most.
3. [Color That Works: Palettes and Contrast](https://www.ask-codey.com/lessons/css-color-and-contrast) (Journeyman): A small palette (a brand color, neutrals, an accent, and success and error colors) makes a site look like one brand, and text that meets a contrast ratio of 4.5 to 1, with meaning never shown by color alone, makes it readable for everyone.

## [Finishing Touches](https://www.ask-codey.com/courses/css-in-depth/topics/css-finishing-touches)

1. [Finishing Touches: Rounded Corners, Shadows and Gradients](https://www.ask-codey.com/lessons/css-shadows-corners-gradients) (Apprentice): border-radius rounds corners, a soft layered box-shadow lifts a card off the page, linear-gradient() and radial-gradient() blend colors in a background, and opacity fades a whole element, and each looks best used sparingly.

## [Exercise: Redesign the Farmers Market Page](https://www.ask-codey.com/courses/css-in-depth/topics/exercise-css-farmers-market-redesign)

1. [Exercise: Redesign the Farmers Market Page](https://www.ask-codey.com/lessons/exercise-css-farmers-market-redesign) (Journeyman): Redesign the Saturday Farmers Market's cluttered event page with a type scale in rem, readable line lengths and line heights, a palette that passes 4.5 to 1 contrast, rem spacing and soft vendor cards, and let ten checks measure each part.

Source: https://www.ask-codey.com/courses/css-in-depth/chapters/css-design-basics-for-developers