Build Your First Website
Eight deeper lessons that take you from page planning to a polished landing page, while keeping the same lesson flow and card-based UI.
Plan the Page Before You Code
Strong websites are planned before they are coded. Decide the audience, the goal of the page, and the sections the user should see in order.
A landing page usually needs a clear headline, one strong call to action, supporting proof, and an easy path to the next step. If the structure is fuzzy, the code will feel messy too.
A good rule for beginners: sketch the page in plain language first, then turn that sketch into HTML.
1<!-- Quick content plan -->
2<!-- 1. Hero -->
3<!-- 2. About -->
4<!-- 3. Projects or features -->
5<!-- 4. Contact / CTA -->
6
7<main>
8 <section>Hero</section>
9 <section>About</section>
10 <section>Projects</section>
11 <section>Contact</section>
12</main>- Start with the page goal and audience.
- Break the page into clear sections before styling.
- Good structure makes later coding easier.
Outline a one-page site for a club, personal brand, or school project before touching CSS or JavaScript.
- What should the visitor understand in the first five seconds?
- What is the single most important action on the page?
- Which sections support that goal instead of distracting from it?
Semantic HTML Structure
HTML is not just about placing text on the screen. It describes the meaning and structure of the content so browsers, search engines, and assistive tools can understand it.
Use semantic elements such as `header`, `main`, `section`, `article`, and `footer` when they match the content. That gives your page a stronger foundation than a pile of anonymous `div`s.
Beginners often race to styling. Do the opposite: get the structure right first, because good CSS depends on clear HTML.
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Fanoos Portfolio</title>
7 </head>
8 <body>
9 <header>
10 <h1>Build with Confidence</h1>
11 </header>
12 <main>
13 <section>
14 <h2>Featured Projects</h2>
15 </section>
16 </main>
17 <footer>
18 <p>Contact me</p>
19 </footer>
20 </body>
21</html>- Semantic HTML describes meaning, not just appearance.
- A page should usually contain a clear `head` and `body` structure.
- Headings and sections make content easier to read and navigate.
Replace vague container names in your draft with semantic sections that match the real content.
- When should you use `section` instead of a plain `div`?
- Why does heading hierarchy matter?
- What belongs in the `head` versus the `body`?
Content, Links, Images, and Lists
A real page needs more than headings and paragraphs. You will usually combine links, images, lists, and cards to guide the user through content.
Each HTML element exists for a reason. Links move users around, lists group repeated items, and images support meaning when paired with useful alternative text.
This is where pages begin to feel complete rather than like notes on a screen.
1<section>
2 <h2>Why Join the Club?</h2>
3 <ul>
4 <li>Weekly coding challenges</li>
5 <li>Peer reviews and teamwork</li>
6 <li>Portfolio-ready projects</li>
7 </ul>
8
9 <a href="#contact">Apply now</a>
10 <img src="/club-room.jpg" alt="Students collaborating during a coding session" />
11</section>- Use links, lists, and images to enrich the page structure.
- Alternative text should describe the image's purpose.
- Repeated information is often best modeled as a list.
Add one visual and one short list to your page that genuinely helps the visitor decide what to do next.
- What makes alt text useful instead of generic?
- When is a list better than multiple paragraphs?
- Should a link explain where it goes before the user clicks it?
CSS Selectors and Design Foundations
CSS controls how the structure looks. You target HTML elements with selectors, then apply properties such as color, spacing, typography, borders, and backgrounds.
The easiest way to keep a design consistent is to reuse a small palette, a small spacing scale, and a few text sizes. Random values make pages feel accidental.
Think in systems, even as a beginner. You are not just coloring a button; you are defining a visual language for the page.
1:root {
2 --bg: #08111f;
3 --panel: #0f1b31;
4 --text: #e5edf8;
5 --accent: #f5b83a;
6}
7
8body {
9 font-family: "Segoe UI", sans-serif;
10 background: var(--bg);
11 color: var(--text);
12}
13
14.cta-button {
15 background: var(--accent);
16 color: #08111f;
17 padding: 0.875rem 1.25rem;
18 border-radius: 999px;
19}- CSS selectors choose what to style.
- Reusable colors and spacing create consistency.
- A few shared design tokens beat many random values.
Choose one background color, one text color, and one accent color for your page, then reuse them everywhere.
- Why are CSS variables useful even in a small project?
- What makes a selector too broad or too specific?
- How do consistent spacing and color improve trust?
Layout with Flexbox and Spacing
Layout is about relationships: what sits beside what, what stacks, what stretches, and what needs room to breathe. Flexbox is the simplest modern tool for many of those decisions.
Use flexbox for rows, button groups, navigation, and cards that need even spacing. Combined with margin, padding, gap, and max-width, it solves a large portion of beginner layout work.
When a page feels crowded or uneven, the issue is often spacing, not color or typography.
1.hero {
2 display: flex;
3 align-items: center;
4 justify-content: space-between;
5 gap: 2rem;
6}
7
8.feature-list {
9 display: flex;
10 gap: 1rem;
11 flex-wrap: wrap;
12}- Flexbox helps align and distribute content.
- Gap and padding are layout tools, not decoration.
- Spacing is one of the biggest differences between rough and polished pages.
Take a crowded section and improve it using `display: flex`, `gap`, and stronger padding before changing any colors.
- When should content sit in a row versus a column?
- What is the difference between margin, padding, and gap?
- Why does `max-width` make text more readable?
Responsive Design and Accessibility
A page is not finished when it looks good on your laptop. It also needs to work on smaller screens and remain readable and usable for more people.
Responsive design means layouts can adapt, text remains readable, and buttons are tappable. Accessibility means the page has enough contrast, clear labels, semantic structure, and keyboard-friendly interactions.
This is not extra polish. It is part of building responsibly on the web.
1@media (max-width: 768px) {
2 .hero {
3 flex-direction: column;
4 align-items: flex-start;
5 }
6}
7
8button:focus-visible,
9a:focus-visible {
10 outline: 3px solid #f5b83a;
11 outline-offset: 3px;
12}- Responsive layouts adapt to screen size changes.
- Accessibility starts with structure, contrast, and focus states.
- Test on small screens before calling the page finished.
Shrink your page mentally to phone size and identify which section would break first. Then write the CSS change that would fix it.
- Why is `focus-visible` important for keyboard users?
- What usually changes first on mobile: text, spacing, or layout direction?
- How can semantic HTML help accessibility before CSS is added?
JavaScript, the DOM, and Interactions
HTML gives structure and CSS gives style, but JavaScript gives a page behavior. In the browser, JavaScript talks to the DOM, which is the browser's live representation of the page.
You can select elements, listen for events, and update text, classes, attributes, or styles when the user does something.
The best beginner interactions are small and purposeful: revealing a message, opening a menu, filtering cards, or changing a theme.
1const button = document.querySelector(".cta-button");
2const message = document.querySelector("#message");
3
4button.addEventListener("click", () => {
5 message.textContent = "Application started. Nice work.";
6 message.hidden = false;
7});- The DOM is the page structure JavaScript can read and change.
- Events let you respond to user actions.
- Simple, purposeful interactions are stronger than random effects.
Add one interaction that supports the page goal, such as opening a sign-up message or revealing project details.
- What does `querySelector` return?
- Why do event listeners matter?
- What user action should trigger your interaction and why?
Build the Full Landing Page
Now combine planning, structure, styling, layout, responsiveness, and interaction into one coherent page.
This capstone is still beginner-friendly, but it reads like a real project rather than disconnected snippets. That is the point: your learning should end in something you can show.
Start with the structure, then layer in styles, then add one meaningful interaction. Ship the simplest version that feels intentional.
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Fanoos Launch Pad</title>
7 <style>
8 :root {
9 --bg: #08111f;
10 --panel: #0f1b31;
11 --text: #e5edf8;
12 --accent: #f5b83a;
13 }
14
15 body {
16 margin: 0;
17 font-family: "Segoe UI", sans-serif;
18 background: radial-gradient(circle at top, #10213d, var(--bg) 55%);
19 color: var(--text);
20 }
21
22 main {
23 max-width: 960px;
24 margin: 0 auto;
25 padding: 4rem 1.25rem;
26 }
27
28 .hero {
29 display: flex;
30 flex-wrap: wrap;
31 gap: 2rem;
32 justify-content: space-between;
33 align-items: center;
34 }
35
36 .card-grid {
37 display: grid;
38 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
39 gap: 1rem;
40 margin-top: 2rem;
41 }
42
43 .card {
44 background: rgba(15, 27, 49, 0.9);
45 border: 1px solid rgba(245, 184, 58, 0.2);
46 border-radius: 1rem;
47 padding: 1.25rem;
48 }
49
50 .cta-button {
51 padding: 0.9rem 1.3rem;
52 border: none;
53 border-radius: 999px;
54 background: linear-gradient(90deg, #f5b83a, #d99a18);
55 color: #08111f;
56 font-weight: 700;
57 cursor: pointer;
58 }
59 </style>
60 </head>
61 <body>
62 <main>
63 <section class="hero">
64 <div>
65 <h1>Build better projects with a clear learning plan.</h1>
66 <p>From fundamentals to shipping, one focused path.</p>
67 <button class="cta-button">Join the next cohort</button>
68 <p id="message" hidden></p>
69 </div>
70 </section>
71
72 <section class="card-grid">
73 <article class="card">Hands-on lessons</article>
74 <article class="card">Live practice</article>
75 <article class="card">Portfolio-ready projects</article>
76 </section>
77 </main>
78
79 <script>
80 const button = document.querySelector(".cta-button");
81 const message = document.querySelector("#message");
82
83 button.addEventListener("click", () => {
84 message.hidden = false;
85 message.textContent = "You're on the list. Nice.";
86 });
87 </script>
88 </body>
89</html>- Real pages are built in layers: plan, structure, style, layout, interaction.
- A small complete project teaches more than many disconnected snippets.
- You now have a stronger template for any future one-page site.
Turn the capstone into a page for your own idea: a portfolio, club, event, or tiny product landing page.
- Does the page clearly say what it is and what to do next?
- Is the layout still readable on a narrow screen?
- Does the interaction support the page goal instead of distracting from it?