Web designers plan and build the pages people actually use โ sketching layout options, testing alternatives, then turning an approved design into a real, working site. The field splits into a more design-leaning track (layout, visual system, user flow) and a more code-leaning track (actually building the thing) โ most working web designers sit somewhere between the two.
Entry-Level Requirements
Portfolio
At least 3 live, working sites โ not screenshots โ including one built from real, hand-written HTML/CSS rather than only a drag-and-drop builder.
Tools
HTML/CSS fundamentals (freeCodeCamp, W3Schools, CodeSandbox), plus a page builder โ Google Sites, Wix, or Squarespace โ for speed. WordPress is the most common tool in professional studio work.
Degree?
Not required. A live portfolio URL a hiring manager can actually click through beats a resume line every time in this field.
Common entry titles
Income Potential
| Entry-Level (10th percentile) | National Median | Experienced (90th percentile) |
|---|---|---|
| $46,850 / yr | $84,960 / yr | $157,280 / yr |
Source: U.S. Bureau of Labor Statistics, Occupational Employment and Wage Statistics, Web Developers (SOC 15-1254), May 2023 โ the most recent complete national data available. If your work leans more toward visual design than code, the UI/UX page's Web and Digital Interface Designers figures may fit your track better. BLS doesn't track years of experience directly, so "entry-level" and "experienced" here stand in for the lowest and highest 10% of earners nationally.
Your Portfolio Plan
-
Grade 9 โ Learn the grid
Design Principles for Layout: Repetition, Contrast, Proximity, Alignment & Scale is the layout foundation every web page rests on, digital or not.
-
Grade 10 โ Ship your first real site
Portfolio Website with Google Sites gets a real, published, multi-page site live under your name.
-
Grade 11 โ Think in process, then learn real code
The Design Process plus self-directed HTML/CSS practice on freeCodeCamp or W3Schools builds the track from "designer" toward "designer who can also build it."
-
Ongoing โ Package it like a professional
Building Your Digital Design Portfolio turns your sites into one coherent body of work.
4+ Projects to Build Your Portfolio
Wireframe Before You Build
Sketch two layout options by hand for a site idea before opening any software โ force yourself to solve structure before pixels.
Sites that start on paper avoid the most common beginner mistake: rebuilding the layout three times inside the software instead of once on the page.
Ship a Real Portfolio Site
A live, published site with at least four working pages โ home, about, a project gallery, and contact.
Your first real, clickable web presence โ and the site every other project on this page will eventually live inside.
Redesign Sprint
Take an existing site โ yours, or a real small business's with permission โ and redesign one page. Document exactly what changed and why.
Redesign work โ improving something that already exists โ is a huge share of real professional web design work, more than building from scratch.
Your First Real Code
No dedicated lesson covers this yet: complete freeCodeCamp's Responsive Web Design certificate, then rebuild one portfolio page using hand-written HTML/CSS instead of a page builder.
This is the single biggest jump in hireability on this list โ most job postings for "web designer" quietly expect at least basic hand-coding ability.
A Site for a Real Client
Build a real, small site for a family member, a teacher, or a local business โ your first real client relationship, deadline and all.
Nothing on a portfolio speaks louder than "a real business actually uses this" โ it's proof, not just a sample.