Code From ZeroCode From Zero
← Back to Course
Lesson 4 of 4
Module 3 · Lesson 4⏱ ~12 minJS

Putting It All Together

HTML, CSS, and JavaScript working as a team — build a real interactive project from scratch.

What You've Learned

Over three modules, you've learned the three core technologies that power every website on the internet:

HTML

Structure and content. Headings, paragraphs, images, links, lists, and forms — the building blocks of every page.

CSS

Colors, fonts, spacing, layout. The box model, classes, flexbox — making HTML look beautiful and professional.

JavaScript

Interactivity and events. Clicks, forms, validation, changing content and styles — bringing pages to life.

Together, these three technologies power every website you've ever visited — from simple personal blogs to Gmail, YouTube, and Twitter. And you now understand all three. That's not a small thing.

Project: Build an Interactive Profile Card

Let's bring HTML, CSS, and JavaScript together in a single project: an interactive profile card. It will have a photo, a name, a short bio, and a button that reveals more information when clicked.

What you're building: a card that looks polished (CSS), has structured content (HTML), and responds to clicks (JavaScript). This is exactly how real website components work.

Step 1: HTML Structure (index.html)

html
<!DOCTYPE html>
<html>
  <head>
    <title>Profile Card</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="card">
      <img
        src="https://placehold.co/200x200"
        alt="Profile photo"
        class="profile-pic"
      >

      <h2 class="name">Alex Johnson</h2>
      <p class="title">Web Developer</p>
      <p class="bio">
        I build things for the web — from scratch, one line at a time.
        Currently learning JavaScript and loving it.
      </p>

      <button id="moreBtn" class="btn">Show More</button>

      <div id="extraInfo" class="extra hidden">
        <h3>Skills</h3>
        <ul>
          <li>HTML &amp; CSS</li>
          <li>JavaScript</li>
          <li>Responsive Design</li>
        </ul>
        <h3>Contact</h3>
        <p>alex@example.com</p>
      </div>
    </div>

    <script src="app.js"></script>
  </body>
</html>

Step 2: CSS Styling (styles.css)

css
/* ----- Page Background ----- */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f4ff;
  font-family: system-ui, sans-serif;
}

/* ----- Card ----- */
.card {
  background-color: white;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  padding: 32px;
  max-width: 360px;
  text-align: center;
}

/* ----- Profile Picture ----- */
.profile-pic {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #f0f4ff;
  margin-bottom: 16px;
}

/* ----- Text Styles ----- */
.name {
  font-size: 24px;
  color: #2c3e50;
  margin-bottom: 4px;
}

.title {
  font-size: 14px;
  color: #4F7EF7;
  font-weight: 600;
  margin-bottom: 12px;
}

.bio {
  font-size: 14px;
  color: #666666;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* ----- Button ----- */
.btn {
  display: inline-block;
  padding: 10px 24px;
  background-color: #4F7EF7;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn:hover {
  background-color: #3A5FC8;
}

/* ----- Extra Info ----- */
.extra {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e5e5e5;
  text-align: left;
}

.extra h3 {
  font-size: 14px;
  color: #2c3e50;
  margin-bottom: 6px;
}

.extra ul {
  margin: 0 0 12px 0;
  padding-left: 20px;
  font-size: 13px;
  color: #666666;
}

.extra p {
  font-size: 13px;
  color: #666666;
  margin: 0;
}

/* ----- Utility ----- */
.hidden {
  display: none;
}

Step 3: JavaScript Interaction (app.js)

js
// Track whether extra info is showing
let isVisible = false;

document.getElementById("moreBtn").onclick = function() {
  const extraInfo = document.getElementById("extraInfo");
  const button = document.getElementById("moreBtn");

  if (isVisible) {
    // Hide the extra info
    extraInfo.classList.add("hidden");
    button.innerHTML = "Show More";
    isVisible = false;
  } else {
    // Show the extra info
    extraInfo.classList.remove("hidden");
    button.innerHTML = "Show Less";
    isVisible = true;
  }
};

How it works: the hidden CSS class has display: none; — it makes the element invisible. JavaScript toggles this class on and off using .classList.add() and .classList.remove(). When the user clicks the button, the extra info appears (or disappears) and the button text changes between "Show More" and "Show Less".

Notice that the JavaScript is clean and focused — it only handles the interaction. The HTML handles structure. The CSS handles appearance. Each technology does what it's best at, and they work together through clear, predictable interfaces (class names, IDs). This separation of concerns is the hallmark of professional web development.

How Real Websites Work

In production websites, HTML, CSS, and JavaScript are separate files linked together — exactly like the project you just built. The HTML file is the foundation, the CSS file handles all styling, and the JS file handles all behavior.

Modern frameworks build on these fundamentals. React, Vue, Angular — they're all JavaScript frameworks that generate HTML and apply CSS under the hood. When you learn a framework later, you'll recognize everything underneath: <div> elements, CSS classes, event handlers, and DOM manipulation. The framework just automates the patterns you've been doing by hand.

Everything you've learned transfers directly:

  • HTML elements like <div>, <button>, <input> are exactly what frameworks render
  • CSS properties like color, padding, border-radius work the same everywhere
  • JavaScript concepts like variables, functions, events, and getElementById are the same regardless of framework
  • The separation of HTML/CSS/JS is a universal pattern — React components just package all three together in one file

Next Steps

You've learned the foundations. Here's where you can go from here:

Keep Practicing

  • freeCodeCamp — free, comprehensive web development curriculum with interactive exercises
  • MDN Web Docs (developer.mozilla.org) — the definitive reference for HTML, CSS, and JavaScript
  • JavaScript.info — the best free JavaScript tutorial on the web, from basics to advanced

Learn a Framework

If you want to build complex, interactive web apps, consider learning React. It's the most popular frontend framework and builds directly on everything you've learned. Code From Zero has a React course coming soon.

Try Python

If you're more interested in data, automation, or AI than building websites, Python is the next step. It's the world's most popular programming language for data science, machine learning, and automation.

Publishing Your Site

Your HTML/CSS/JS files are a complete website sitting on your computer. To share it with the world, you need to put it on a web server. Here are three free options:

GitHub Pages

Free hosting for static sites. Create a GitHub account, upload your files to a repository, enable Pages in settings, and you'll get a URL like yourname.github.io. Takes about 10 minutes the first time.

Netlify

Drag-and-drop your project folder onto netlify.com and it's live. Free tier includes a custom subdomain and automatic HTTPS. The easiest option for beginners.

Vercel

Similar to Netlify — connect your GitHub repo and it deploys automatically. Free tier is generous. Used by many professional developers.

All three work the same way: you upload your HTML, CSS, and JS files, and they give you a URL. Your profile card project could be live on the internet in minutes. Imagine sending a link to a friend and saying "I built this from scratch." That's not a hypothetical — you can do that right now with the files you have.

Try It Yourself

Build the interactive profile card project:

  1. Create the three files: index.html, styles.css, and app.js
  2. Copy the HTML, CSS, and JS from the project above (or type it out for better learning)
  3. Open index.html in your browser and test the toggle button
  4. Customize it: change the name, photo, bio, skills, and colors to make it yours
  5. Bonus: add a second button that changes the background color of the card
  6. Bonus: publish it using GitHub Pages, Netlify, or Vercel and share the link

This is a real project. It uses the same patterns professional developers use every day. Be proud of what you've built.

Key Terms

Frontend
The part of a website that users see and interact with — HTML, CSS, and JavaScript running in the browser. Also called 'client-side.'
Framework
A pre-built set of tools and conventions (like React or Vue) that makes building complex websites faster. Frameworks build on HTML/CSS/JS fundamentals — they don't replace them.
Hosting
Putting your website files on a server so people can access them on the internet. Free options include GitHub Pages, Netlify, and Vercel.
Deployment
The process of taking your website from your computer (where only you can see it) to a hosting service (where anyone can see it).

Check Your Understanding

What are the three core web technologies and what does each handle?

Answer: HTML handles structure and content (what things are — headings, paragraphs, images). CSS handles presentation and style (how things look — colors, spacing, layout). JavaScript handles interactivity and behavior (what things do — clicks, forms, dynamic content). Together they power every website.

Why separate HTML, CSS, and JavaScript into different files?

Answer: Separation keeps your code organized and maintainable. Each file does one job well: HTML for structure, CSS for style, JS for behavior. When you need to change colors, you go to the CSS file. When you need to fix a button, you go to the JS file. This pattern scales to teams and large projects. It's also what professional frameworks like React do under the hood.

How can you put your website online for free?

Answer: Use a static hosting service like GitHub Pages (upload files to a GitHub repo, enable Pages in settings), Netlify (drag-and-drop your project folder), or Vercel (connect a GitHub repo). All three are free and give you a public URL. Your HTML, CSS, and JS files become a real website anyone can visit.
Previous: Working with FormsNext: Python From Zero