Building Your First Website

The 14-year-old who got hired

In 2019, a teenager in Nigeria named Bello Shehu built a personal portfolio website — just HTML, CSS, and some JavaScript. He posted it on Twitter. Within a week, it had thousands of retweets. Within a month, he had job offers from tech companies. He was 14.

His website wasn't complicated. It had his name, a short bio, links to his projects, and a contact section. But it was real — live on the internet, accessible to anyone. That's what separated him from the millions of people who "know a little coding" but have nothing to show for it.

In this module, you'll build a portfolio website and deploy it to the web for free. By the end, you'll have a URL you can share with anyone.

🔑Your portfolio is your resume

In web development, nobody cares about certificates or degrees — they care about what you've built. A live portfolio website is the single most powerful thing you can have when looking for web dev work. It proves you can do the thing you say you can do.

What we're building

A single-page portfolio with four sections:

Hero section — Your name, a tagline, and a call-to-action button

About section — A short bio with a photo

Projects section — Cards showcasing 3 projects (real or placeholder)

Contact section — Links to your email and social profiles

You'll use everything from the previous four modules: semantic HTML from Module 2, CSS flexbox, grid, and responsive design from Module 3, and event listeners and DOM manipulation from Module 4. This is where it all comes together.

3filesAll you need

0$Cost to deploy

1URLLive on the internet

Step 1: Project setup

Create a folder called portfolio with three files:

portfolio/
  index.html
  styles.css
  script.js

Step 2: The HTML structure

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Name — Web Developer</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <nav class="navbar">
    <a href="#" class="logo">YourName</a>
    <div class="nav-links">
      <a href="#about">About</a>
      <a href="#projects">Projects</a>
      <a href="#contact">Contact</a>
    </div>
  </nav>

  <header class="hero">
    <h1>Hi, I'm <span class="highlight">Your Name</span></h1>
    <p>I build things for the web.</p>
    <a href="#projects" class="btn">See My Work</a>
  </header>

  <section id="about" class="about">
    <h2>About Me</h2>
    <div class="about-content">
      <img src="https://placehold.co/300x300" alt="Your photo" class="about-img" />
      <div class="about-text">
        <p>I'm a web developer who loves building clean, responsive websites.
           I started learning HTML, CSS, and JavaScript recently and I'm hooked.</p>
        <p>When I'm not coding, I enjoy [your hobbies here].
           I'm currently looking for my first web development role.</p>
      </div>
    </div>
  </section>

  <section id="projects" class="projects">
    <h2>My Projects</h2>
    <div class="project-grid">
      <div class="project-card">
        <h3>Project One</h3>
        <p>A responsive landing page built with HTML and CSS. Features flexbox layout and mobile-first design.</p>
        <a href="#" class="project-link">View Project</a>
      </div>
      <div class="project-card">
        <h3>Project Two</h3>
        <p>An interactive todo list built with vanilla JavaScript. Features add, complete, and delete functionality.</p>
        <a href="#" class="project-link">View Project</a>
      </div>
      <div class="project-card">
        <h3>Project Three</h3>
        <p>A weather dashboard that fetches real-time data from a public API and displays it beautifully.</p>
        <a href="#" class="project-link">View Project</a>
      </div>
    </div>
  </section>

  <section id="contact" class="contact">
    <h2>Get In Touch</h2>
    <p>I'm currently looking for new opportunities. Whether you have a question or just want to say hi, my inbox is always open.</p>
    <a href="mailto:[email protected]" class="btn">Say Hello</a>
  </section>

  <footer>
    <p>Built with HTML, CSS, and JavaScript. No frameworks.</p>
  </footer>

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

Notice the semantic HTML: <nav>, <header>, <section>, <footer>. Proper heading hierarchy: one <h1>, then <h2> for each section. Accessibility-friendly alt text on the image.

🔒

Customize and extend the HTML

25 XP

Copy the HTML above into your `index.html` file. Personalize it AND add a new section: 1. Replace "Your Name" with your actual name (in both the `<title>` and `<h1>`) 2. Write a real bio in the About section 3. Change the project descriptions to things you've built (or want to build) 4. Update the email address in the contact section 5. **Add a new "Skills" section** between About and Projects using a `<section id="skills">` with an `<h2>` and an unordered list of technologies you're learning (HTML, CSS, JavaScript, plus any others) 6. Add a "Skills" link in the `<nav>` Open it in your browser. You should see five sections. The new Skills section proves you can extend a template, not just fill in blanks.

Step 3: The CSS

css

/* Reset and base styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  color: #333;
}

/* Navigation */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 5%;
  background: #1a1a2e;
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo {
  color: #e94560;
  font-size: 24px;
  font-weight: 700;
  text-decoration: none;
}

.nav-links a {
  color: #eee;
  text-decoration: none;
  margin-left: 24px;
  transition: color 0.3s;
}

.nav-links a:hover {
  color: #e94560;
}

/* Hero section */
.hero {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  color: white;
  text-align: center;
  padding: 120px 20px;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 16px;
}

.highlight {
  color: #e94560;
}

.hero p {
  font-size: 1.25rem;
  color: #ccc;
  margin-bottom: 32px;
}

.btn {
  display: inline-block;
  padding: 14px 32px;
  background: #e94560;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  transition: transform 0.2s, background 0.3s;
}

.btn:hover {
  background: #c81e45;
  transform: translateY(-2px);
}

/* About section */
.about {
  padding: 80px 5%;
  max-width: 1000px;
  margin: 0 auto;
}

.about h2 {
  font-size: 2rem;
  margin-bottom: 32px;
  text-align: center;
}

.about-content {
  display: flex;
  gap: 40px;
  align-items: center;
}

.about-img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
}

.about-text p {
  margin-bottom: 16px;
  color: #555;
}

/* Projects section */
.projects {
  padding: 80px 5%;
  background: #f8f9fa;
}

.projects h2 {
  font-size: 2rem;
  margin-bottom: 32px;
  text-align: center;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}

.project-card {
  background: white;
  padding: 32px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  transition: transform 0.2s;
}

.project-card:hover {
  transform: translateY(-4px);
}

.project-card h3 {
  margin-bottom: 12px;
  color: #1a1a2e;
}

.project-card p {
  color: #666;
  margin-bottom: 16px;
}

.project-link {
  color: #e94560;
  font-weight: 600;
  text-decoration: none;
}

/* Contact section */
.contact {
  padding: 80px 5%;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.contact h2 {
  font-size: 2rem;
  margin-bottom: 16px;
}

.contact p {
  color: #555;
  margin-bottom: 32px;
}

/* Footer */
footer {
  background: #1a1a2e;
  color: #888;
  text-align: center;
  padding: 24px;
  font-size: 14px;
}

/* Responsive design */
@media (max-width: 768px) {
  .hero h1 { font-size: 2rem; }

  .about-content {
    flex-direction: column;
    text-align: center;
  }

  .project-grid {
    grid-template-columns: 1fr;
  }

  .nav-links a {
    margin-left: 16px;
    font-size: 14px;
  }
}

✗ CSS concepts used

✗Flexbox
✗CSS Grid
✗Media queries
✗Transitions
✗Position sticky
✗Box shadow
✗Linear gradient
✗Border radius

✓ Where they appear

✓Navbar, about section
✓Project cards grid
✓Mobile responsive layout
✓Hover effects on buttons and cards
✓Navbar stays at top on scroll
✓Card depth effect
✓Hero background
✓Buttons, cards, profile image

There Are No Dumb Questions

Why system-ui instead of a specific font like Arial?

system-ui uses the operating system's default font — San Francisco on Mac, Segoe UI on Windows, Roboto on Android. It looks native on every device, loads instantly (no font download), and is beautiful on all platforms.

Do I need to memorize all these CSS properties?

No. Professional developers look things up constantly. Bookmark MDN Web Docs (developer.mozilla.org) — it's the definitive reference. What you need to memorize is the concepts (flexbox, grid, box model). The exact property names you'll learn through repetition.

Step 4: The JavaScript

javascript

// Smooth scroll for navigation links
document.querySelectorAll('a[href^="#"]').forEach(link => {
  link.addEventListener("click", function(event) {
    event.preventDefault();
    const target = document.querySelector(this.getAttribute("href"));
    if (target) {
      target.scrollIntoView({ behavior: "smooth" });
    }
  });
});

// Navbar background change on scroll
const navbar = document.querySelector(".navbar");
window.addEventListener("scroll", function() {
  if (window.scrollY > 50) {
    navbar.style.boxShadow = "0 2px 20px rgba(0,0,0,0.3)";
  } else {
    navbar.style.boxShadow = "none";
  }
});

// Simple scroll reveal animation
const revealElements = document.querySelectorAll(".project-card, .about-content");

function reveal() {
  revealElements.forEach(el => {
    const windowHeight = window.innerHeight;
    const elementTop = el.getBoundingClientRect().top;
    if (elementTop < windowHeight - 100) {
      el.style.opacity = "1";
      el.style.transform = "translateY(0)";
    }
  });
}

// Set initial hidden state
revealElements.forEach(el => {
  el.style.opacity = "0";
  el.style.transform = "translateY(20px)";
  el.style.transition = "opacity 0.6s ease, transform 0.6s ease";
});

window.addEventListener("scroll", reveal);
reveal(); // Run once on load

This JavaScript adds three professional touches:

Smooth scrolling — Navigation links glide to their sections instead of jumping

Navbar shadow — A subtle shadow appears when you scroll down, adding depth

Scroll reveal — Project cards and content fade in as you scroll to them

🔒

Build and test your portfolio

50 XP

1. Copy the CSS into `styles.css` and the JavaScript into `script.js` 2. Open `index.html` in your browser 3. Test every section: Does the navigation scroll smoothly? Do cards fade in? Does the navbar get a shadow on scroll? 4. Resize the browser to mobile width — do the project cards stack vertically? Does the about section rearrange? 5. Customize at least 3 things: change the accent color (`#e94560`), update the project descriptions, change the hero tagline Your portfolio should look professional and work on both desktop and mobile.

Step 5: Deploy to the internet (for free)

Your website only exists on your computer. Let's put it on the internet so anyone can visit it.

Option A: Netlify (simplest)

Go to netlify.com and sign up for a free account

From the dashboard, find the drag-and-drop deploy area

Drag your entire portfolio folder onto it

Wait 30 seconds. Netlify gives you a URL like random-name-123.netlify.app

Click Site settings > Change site name to get a cleaner URL like yourname.netlify.app

Option B: Vercel

Go to vercel.com and sign up with your GitHub account

Push your portfolio folder to a GitHub repository

In Vercel, click New Project and import your repo

Click Deploy. Your site is live at yourname.vercel.app

Option C: GitHub Pages

Create a new GitHub repository called yourusername.github.io

Push your portfolio files to the repo

Go to Settings > Pages and set the source to the main branch

Your site is live at yourusername.github.io

All three options are completely free and give you a live URL you can share anywhere.

🔑Custom domains

All three platforms support custom domains. You can buy a domain like `yourname.com` for around $10/year from Namecheap or Google Domains and point it to your deployed site. It's optional but makes your portfolio look more professional.

There Are No Dumb Questions

Is my website really free to host forever?

Yes. Netlify, Vercel, and GitHub Pages all have generous free tiers for static websites (HTML, CSS, JS). You'll only need to pay if you add server-side features or your site gets millions of visitors per month.

What if I want to make changes after deploying?

With Netlify drag-and-drop, you re-deploy by dragging the folder again. With Vercel or GitHub Pages, push your code to GitHub and it deploys automatically. This is called continuous deployment.

🔒

Deploy your portfolio

25 XP

Pick one of the three deployment options above and put your portfolio on the internet. Once it's live: 1. Visit the URL on your phone — does it look good on mobile? 2. Share the URL with a friend and ask them to open it 3. Copy the URL and save it somewhere — this is your first live website Write down the URL of your deployed site. You just shipped something to the internet.

What to learn next

You've covered the fundamentals. Here's the roadmap for continuing your web development journey:

Skill	Why	Time to learn
Git & GitHub	Version control — every dev job requires it	1-2 weeks
Tailwind CSS	Utility-first CSS framework — ships faster	1 week
React	The most popular JavaScript framework	4-8 weeks
Node.js	Run JavaScript on the server	2-4 weeks
Next.js	Full-stack React framework (this site uses it)	2-4 weeks
Databases	Store and query data (SQL, PostgreSQL)	2-4 weeks

🔑The best way to learn

Build projects. Not tutorials — projects. Clone a website you like. Build a tool you actually need. Every portfolio project you ship teaches you more than 10 hours of video courses. The developers who get hired are the ones who can point to live URLs.

Where to go from here

You've completed the Web Development track. Here's what you built across five modules:

You went from understanding how the web works to having a live portfolio at a public URL. That foundation — HTML, CSS, JavaScript — is the same foundation that powers every website on the internet, from personal blogs to billion-dollar platforms.

From Bello's tweet to your URL

Bello Shehu didn't have a CS degree or a bootcamp certificate. He had a live URL. That's what you have now, too. A website you built from scratch — semantic HTML, styled CSS, interactive JavaScript — hosted on the open web for anyone to visit. It's not a course project that sits on your hard drive. It's a real thing at a real address. Every website you've ever admired started exactly where you are: a folder with three files, a person who decided to learn, and a deploy button. The difference between people who learn web development and people who become web developers is simple: the second group ships.

Key takeaways

A portfolio website is the most important asset for a web development career
Three files — index.html, styles.css, script.js — are all you need for a complete website
Semantic HTML, responsive CSS, and interactive JavaScript work together
Netlify, Vercel, and GitHub Pages provide free hosting for static websites
Continuous deployment means pushing to GitHub automatically updates your live site
Build real projects and deploy them — that's how you become a developer
Your next steps: Git, a CSS framework, React, then server-side JavaScript

Knowledge Check

1.What is the minimum set of files needed to build and deploy a complete portfolio website?

2.Which of the following is a free hosting platform for static websites?

3.What does 'continuous deployment' mean?

4.Why is position: sticky used on the navbar in this portfolio?