Plan the Site Before You Code
Enterprise engineering mandates rigorous preemptive architectural planning. Establishing clear UI/UX topologies, state transition diagrams, and component hierarchies before code instantiation is the fundamental delimiter between amateur scripting and professional software engineering.
We're going to build a personal portfolio — the website every developer needs to show who they are and what they've built. First, decide what sections it needs. A classic, effective structure is:
- Header / Navigation — your name/logo and links to jump around.
- Hero — the big first impression: who you are in one line.
- About — a short paragraph about you.
- Projects — cards showing your work.
- Contact + Footer — how to reach you.
Sketching the page as a wireframe
- Start with the header at the top — it stays visible as visitors scroll.
- The hero is the first thing people see. One strong sentence about you.
- An about section builds trust with a short bio.
- Projects are the proof — the reason someone hires you.
- A contact + footer closes the page. That's a complete, professional layout.
Draw it on paper firstSketch these boxes with a pen before writing any code. A wireframe turns a vague idea into a concrete plan you can build one box at a time.
Under the Hood: Data models dictate UI structuresProfessional wireframing isn't about drawing pretty boxes; it's about identifying the underlying data schema. Before styling a 'Projects' grid, a senior engineer defines the JSON schema that will populate it. UI design is merely the visual representation of data architecture.
Set Up Your Project Files
Scalable web architectures necessitate deterministic file-system scaffolding. Adhering to strict, industry-standard directory topologies ensures module discoverability, streamlines CI/CD pipelines, and prevents monolithic coupling as the codebase complexity naturally compounds.
Create a folder called my-portfolio and put three files inside it. These three are the heart of almost every website you'll ever build:
The three files of a website
index.html— the structure. Browsers always look for "index" as the home page.styles.css— the styling. Linked from the HTML's<head>.script.js— the behaviour. Linked at the end of the<body>.
Connect them inside index.html so the browser loads all three together:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sara — Portfolio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- our sections go here -->
<script src="script.js"></script>
</body>
</html>Don't have an editor? Use oursYou can build this whole project right now in the Pro Web Editor — it already has the three files and a live preview. Follow along there.
Under the Hood: Version control is the foundation of architectureNo enterprise project exists without Git. Before creating index.html, a professional initializes a repository. Version control provides atomic rollbacks, isolated feature branching, and acts as the singular source of truth for CI/CD deployment pipelines.
Build the Structure (HTML)
Architectural integrity demands a strict separation of concerns. The construction phase must focus exclusively on generating pure, semantic HTML to ensure robust Accessibility Object Model (AOM) parsing and accurate DOM tree generation prior to any CSSOM rendering.
Using the semantic tags from the HTML course, each planned box becomes a real element. Notice how the HTML reads like the wireframe you drew. Why not just use <div> everywhere? By using semantic tags like <header>, <nav>, <section>, and <footer>, you create a document that is accessible to screen readers, friendly to search engines (SEO), and easier for other developers to read. Every tag has a purpose.
<header>
<h1>Sara</h1>
<nav>
<a href="#about">About</a>
<a href="#projects">Projects</a>
</nav>
</header>
<section class="hero">
<h2>Hi, I'm Sara — a Web Developer</h2>
<a class="btn" href="#projects">See my work</a>
</section>
<section id="about"> … </section>
<section id="projects"> … </section>
<footer> … </footer>The raw HTML page (no CSS yet)
- The
<header>renders your name as an<h1>. - The
<nav>links appear — plain and underlined for now. - The hero
<h2>states who you are. - The about and projects sections stack below.
- It's ugly — but the structure is complete and correct. CSS is next.
Under the Hood: Semantic HTML is the original APIScreen readers and search engine crawlers do not see CSS or execute complex JS. They parse the raw HTML AST. Utilizing strict, semantic landmarks (<main>, <nav>) provides a robust, machine-readable API that guarantees accessibility and SEO indexing.
Style the Layout (CSS)
Following structural validation, we instantiate the presentation layer. By systematically applying deterministic CSS methodologies—leveraging Flexbox matrices, Custom Properties (variables) for theme consistency, and strict Box Model mathematics—we synthesize a responsive, highly polished user interface.
Start every stylesheet like a pro: a reset, some CSS variables for your palette, and a base font. Then style section by section. We rely heavily on Flexbox to align items inside the header and CSS Grid to lay out our projects. These modern layout systems eliminate the need for hacks like floats, allowing us to align elements flawlessly with just a few lines of code (e.g., justify-content: space-between;).
* { margin: 0; box-sizing: border-box; }
:root { --brand: #b534ff; }
body { font-family: 'Outfit', sans-serif; line-height: 1.6; }
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 40px;
}CSS transforms the bare page
- Style the header: Flexbox spreads the logo and nav apart, with padding.
- The hero gets a background, big centred text and a button — the eye-catcher.
- The about section gets comfortable spacing and readable width.
- Projects and footer are styled too. Same HTML — now it looks like a real site.
Style top-to-bottomWork through your sections in order, previewing after each. Small, visible steps keep you motivated and make bugs easy to spot.
Under the Hood: Design Tokens enforce systemic consistencyHardcoding hex values (#b534ff) leads to fractal inconsistencies. Enterprise CSS relies on Design Tokens—abstracted CSS Custom Properties defined at the :root. Changing --color-primary instantly mutates the application's entire theme mathematically.
Make It Responsive
Ubiquitous cross-device accessibility requires strict adherence to fluid, mobile-first design paradigms. We utilize algorithmic CSS media queries to orchestrate complex layout recalculations, ensuring viewport-agnostic rendering fidelity across a heavily fragmented hardware ecosystem.
The recipe: use flexible units (like rem and %), let content wrap, and add a media query for narrow screens that stacks columns and swaps the desktop nav for a mobile menu. A Mobile-First approach is often best: write your default CSS for small screens, and then use @media (min-width: 768px) to add complexity for larger screens. For this project, we show a desktop-first approach to start, which scales down the grid when the screen width drops below 700px.
/* projects: 3 columns on desktop */
.projects-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* phones: stack into 1 column */
@media (max-width: 700px) {
.projects-grid { grid-template-columns: 1fr; }
nav { display: none; }
.burger { display: block; }
}The same site on desktop and phone
- On a wide screen: full nav on top, projects in a 3-column grid.
- Shrink to a phone — the media query fires: columns stack to one, and the nav collapses into a burger menu.
- Back to desktop, the full layout returns. One codebase, every device.
Test narrow constantlyIn your browser, drag the window narrow (or press F12 → device toolbar) after every change. Responsive bugs hide until you actually look at a small screen.
Under the Hood: Fluid typography scales infinitelyStatic pixel breakpoints are rigid. Modern responsiveness deploys fluid mathematical functions like clamp(1rem, 2vw + 1rem, 2.5rem). This instructs the browser rendering engine to linearly interpolate font sizes and margins based on exact viewport dimensions without media queries.
Add Interactivity (JavaScript)
Static HTML dictates a stateless user experience. We now inject programmatic interactivity by parsing the DOM and attaching asynchronous event listeners to the Event Loop, enabling deterministic state mutations and dynamic interface toggling without requiring a full document refresh.
The burger button needs to open and close the menu. This is the exact "select an element → listen for a click → toggle a class" pattern from the DOM course. In addition to this, a professional site often includes smooth scrolling, which can be achieved purely in CSS (html { scroll-behavior: smooth; }) or with JavaScript for more control. Here, we focus on the core interaction:
const burger = document.querySelector(".burger");
const menu = document.querySelector(".mobile-menu");
burger.addEventListener("click", () => {
menu.classList.toggle("open");
});Tapping the burger toggles the menu
- On a phone, the menu is hidden and only the burger shows.
- The user taps it → the
clickevent fires →classList.toggle("open")slides the menu down. - The visitor picks a link and navigates.
- Tapping again toggles the same class off — the menu closes. Clean, professional behaviour in 4 lines.
Good places for a little JSMobile menu toggle, smooth-scrolling nav links, a "back to top" button, a simple contact-form validation, a dark-mode switch. Small touches, big professional feel.
Under the Hood: Progressive enhancement prevents blank screensJavaScript fails: CDNs drop, networks lag, browser extensions block scripts. A professional site functions fundamentally without JS (links navigate, forms submit). JavaScript should only be injected as an enhancement layer to intercept and optimize these native behaviors.
Polish & Details
Production readiness is defined by rigorous optimization heuristics and edge-case mitigation. We execute a strict audit encompassing semantic SEO metadata injection, critical rendering path analysis, progressive enhancement, and WCAG 2.2 accessibility validation.
- Typography — use one nice web font (Google Fonts) and consistent sizes.
- Spacing — generous, consistent padding. Cramped pages feel amateur.
- Hover states — buttons and links should react (
:hover+transition). - Shadows & radius — soft
box-shadowand rounded corners add depth. - A colour system — 1 brand colour, 1 accent, neutrals. Don't use ten colours.
- Alt text & a good
<title>— accessibility and SEO. - Semantic Contrast — ensure text has high contrast against the background so it is readable by everyone.
- Performance — compress your images so the site loads instantly.
A project card, before and after polish
- A flat, plain card. Functional, but forgettable.
- Round the corners — instantly friendlier.
- Add breathing-room padding so the content isn't cramped.
- A soft shadow lifts it off the page.
- A hover lift + accent border. Now it looks designed, not default.
Under the Hood: The critical rendering path dictates LCPTo achieve sub-second Largest Contentful Paint (LCP) metrics, professionals aggressively optimize the critical rendering path. This involves preloading hero images, deferring non-essential JavaScript, and inlining critical CSS into the <head> to eliminate render-blocking network requests.
Publish It Live on the Internet
The final deployment phase transitions local code to a globally distributed edge network. We orchestrate a CI/CD pipeline via modern hosting platforms, automating the compilation, asset minification, and immutable deployment of our build artifacts to a global Content Delivery Network (CDN).
Your site is just three files, so any static host works. Two beginner-friendly, free options:
- GitHub Pages — push your folder to a GitHub repository, enable Pages in the settings, and you get a
yourname.github.ioaddress. - Netlify — even simpler: drag your project folder onto app.netlify.com/drop and it's live in seconds with a free URL.
From your folder to a live URL
- You have your finished folder of three files.
- Upload it (Netlify drag-and-drop) or push it (GitHub).
- The host copies your files to its servers worldwide.
- Seconds later it's live at a real URL anyone on earth can open. You have a website. 🎉
You did it — you're a web developerYou planned, structured, styled, made responsive, added interactivity to, and published a real website. That is the entire front-end workflow professionals use every day. Everything from here is just more practice and bigger projects.
Under the Hood: Immutable deployments prevent driftDeploying via FTP is obsolete. Modern GitOps workflows (Vercel, Netlify, GitHub Pages) generate immutable cryptographic builds for every commit. If a deployment fails, the architecture can atomically rollback to the previous hash instantly, guaranteeing zero downtime.
Congratulations — you can build websites now 🚀
You've completed the entire Web Development track: HTML, CSS, JavaScript, the DOM, React, and this full build. You genuinely have the skills to make your own first website. So go build it — for real, for you.