Alin Li — Build Your First Website! 🌐

🛠️ YOUR TOOLKIT

All Free. All Open Source.

Everything you need — $0 total cost!

💻 VS Code / VSCodium (code editor)

🦊 Firefox / Brave (browser)

🐙 GitHub Pages (free hosting)

📝 HTML + CSS + JS (languages)

1

HTML — The Skeleton of Your Website

⏱️ 15 minutes

HTML (HyperText Markup Language) is the structure of every website. It tells the browser what content to show — headings, paragraphs, images, links, buttons. Think of it as the skeleton of your site.

Every HTML element uses tags: an opening tag <h1> and a closing tag </h1>. Content goes between them.

📖 Essential HTML Tags

<h1> to <h6> = Headings (h1 biggest, h6 smallest)
<p> = Paragraph
<a href="..."> = Link
<img src="..."> = Image
<ul> / <li> = List
<div> = Container (group things together)
<button> = Button

👇 Try editing the code below and click "Run"!

index.html

Preview

🎯 Challenge!

Change [YOUR NAME] to your actual name. Add more items to the list. Change the emoji! Then click Run.

2

CSS — Making It Beautiful!

⏱️ 20 minutes

CSS (Cascading Style Sheets) is the skin and clothes of your website. It controls colors, fonts, sizes, spacing, layout — everything visual. Without CSS, every website would look like a boring text document!

📖 Essential CSS Properties

color = Text color
background = Background color or image
font-size = Text size
font-family = Font style
padding = Space inside an element
margin = Space outside an element
border-radius = Rounded corners
text-align = center, left, right

styled-page.html

<!DOCTYPE html>
<html>
<head>
  <title>My Styled Website</title>
  <style>
    body {
      font-family: sans-serif;
      background: #f0fdf4;
      margin: 0;
      padding: 40px;
    }
    .card {
      background: white;
      border-radius: 16px;
      padding: 30px;
      max-width: 500px;
      margin: 0 auto;
      box-shadow: 0 4px 20px rgba(0,0,0,.08);
      text-align: center;
    }
    h1 {
      color: #0d9488;
      font-size: 2rem;
    }
    p { color: #475569; }
    .tag {
      display: inline-block;
      background: #ccfbf1;
      color: #0f766e;
      padding: 4px 14px;
      border-radius: 20px;
      font-size: 0.85rem;
      font-weight: 700;
      margin: 3px;
    }
    button {
      background: #0d9488;
      color: white;
      border: none;
      padding: 12px 28px;
      border-radius: 50px;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      margin-top: 16px;
    }
    button:hover { background: #0f766e; }
  </style>
</head>
<body>
  <div class="card">
    <h1>🐧 My Profile</h1>
    <p>Hi! I'm learning to build
    websites with open source!</p>
    <div>
      <span class="tag">HTML</span>
      <span class="tag">CSS</span>
      <span class="tag">Linux</span>
      <span class="tag">Open Source</span>
    </div>
    <button onclick="alert('🎉 You clicked!')">
      Say Hello!
    </button>
  </div>
</body>
</html>

Preview

🎯 Challenge!

Change the background color of the body. Change the color of h1. Add your own tags. Make the button a different color!

3

JavaScript — Making It Interactive!

⏱️ 20 minutes

JavaScript is the brain of your website. HTML is the skeleton, CSS is the skin — and JS makes it do things. Click a button, show/hide content, change colors, do math, create games — JavaScript makes it all happen!

interactive-page.html

<!DOCTYPE html>
<html>
<head>
  <title>Interactive Page</title>
  <style>
    body {
      font-family: sans-serif;
      background: #eef2ff;
      padding: 40px;
      text-align: center;
    }
    .box {
      background: white;
      border-radius: 16px;
      padding: 30px;
      max-width: 500px;
      margin: 0 auto;
      box-shadow: 0 4px 20px rgba(0,0,0,.08);
    }
    h1 { color: #4f46e5; }
    #output {
      font-size: 1.5rem;
      margin: 16px 0;
      padding: 16px;
      background: #eef2ff;
      border-radius: 10px;
      min-height: 60px;
    }
    button {
      background: #4f46e5;
      color: white;
      border: none;
      padding: 10px 22px;
      border-radius: 50px;
      font-size: 0.9rem;
      font-weight: 700;
      cursor: pointer;
      margin: 4px;
    }
    button:hover { opacity: .85; }
    .green { background: #059669; }
    .orange { background: #ea580c; }
    .pink { background: #db2777; }
    input {
      padding: 10px;
      border-radius: 8px;
      border: 2px solid #c7d2fe;
      font-size: 1rem;
      margin: 8px 0;
      width: 200px;
    }
  </style>
</head>
<body>
  <div class="box">
    <h1>⚡ JavaScript Magic!</h1>

<div id="output">Click a button!</div>

<button onclick="sayHello()">
      👋 Hello</button>
    <button class="green" onclick="showTime()">
      🕐 Time</button>
    <button class="orange" onclick="rollDice()">
      🎲 Dice</button>
    <button class="pink" onclick="changeColor()">
      🎨 Color</button>

<input type="text" id="nameInput"
      placeholder="Type your name...">
    <br>
    <button onclick="greetUser()">
      🎉 Greet Me!</button>
  </div>

Preview

🎯 Challenge!

Add a new button that shows a random emoji! Add a counter that goes up each time you click. Try changing the dice to have 20 sides!

4

🏆 Your Complete Website Project!

⏱️ 30 minutes — put it all together!

Now let's combine everything — HTML structure, CSS styling, and JavaScript interactivity — into one complete personal website! Edit the code below to make it yours.

my-website.html

<!DOCTYPE html>
<html>
<head>
  <title>My Portfolio</title>
  <style>
    * { margin: 0; padding: 0;
        box-sizing: border-box; }
    body {
      font-family: sans-serif;
      background: linear-gradient(135deg,
        #ecfdf5, #f0fdf4);
      min-height: 100vh;
      padding: 30px 16px;
    }
    .container {
      max-width: 600px;
      margin: 0 auto;
    }
    .hero-card {
      background: white;
      border-radius: 20px;
      padding: 36px;
      text-align: center;
      box-shadow: 0 4px 24px rgba(0,0,0,.06);
      margin-bottom: 20px;
    }
    .avatar {
      font-size: 4rem;
      margin-bottom: 12px;
    }
    h1 { color: #0f766e; font-size: 1.8rem; }
    .subtitle {
      color: #64748b;
      margin: 6px 0 16px;
    }
    .skills {
      display: flex; flex-wrap: wrap;
      gap: 6px; justify-content: center;
    }
    .skill {
      background: #ccfbf1;
      color: #0f766e;
      padding: 5px 14px;
      border-radius: 20px;
      font-size: 0.82rem;
      font-weight: 700;
    }
    .section-card {
      background: white;
      border-radius: 16px;
      padding: 24px;
      box-shadow: 0 2px 16px rgba(0,0,0,.04);
      margin-bottom: 16px;
    }
    .section-card h2 {
      color: #0f766e;
      font-size: 1.2rem;
      margin-bottom: 10px;
    }
    .project {
      padding: 12px;
      background: #f0fdf4;
      border-radius: 10px;
      margin-bottom: 8px;
    }
    .project h3 {
      font-size: 0.95rem;
      color: #134e4a;
    }
    .project p {
      font-size: 0.82rem;
      color: #64748b;
    }
    .footer-text {
      text-align: center;
      color: #94a3b8;
      font-size: 0.78rem;
      margin-top: 20px;
    }
    a { color: #0d9488; }
  </style>
</head>
<body>
  <div class="container">
    <div class="hero-card">
      <div class="avatar">🐧</div>
      <h1>Your Name Here</h1>
      <p class="subtitle">Future Open Source
      Developer | Linux Enthusiast</p>
      <div class="skills">
        <span class="skill">HTML</span>
        <span class="skill">CSS</span>
        <span class="skill">JavaScript</span>
        <span class="skill">Linux</span>
        <span class="skill">Python</span>
        <span class="skill">Open Source</span>
      </div>
    </div>

<div class="section-card">
      <h2>🚀 About Me</h2>
      <p>I'm a student learning to code
      with open-source tools. I believe
      technology should be free and
      accessible for everyone!</p>
    </div>

<div class="section-card">
      <h2>🏗️ My Projects</h2>
      <div class="project">
        <h3>📝 To-Do App</h3>
        <p>A task manager built with
        HTML, CSS, and JavaScript</p>
      </div>
      <div class="project">
        <h3>🌐 This Website!</h3>
        <p>My first portfolio site —
        built from scratch!</p>
      </div>
    </div>

<div class="section-card">
      <h2>🔗 Links</h2>
      <p><a href="https://github.com">
      🐙 My GitHub</a></p>
    </div>

<p class="footer-text">
      Made with ❤️ using open-source tools
      <br>Part of the Alin Li Course
    </p>
  </div>
</body>
</html>

Preview

🎉 Congratulations!

You just built a complete personal portfolio website! It has a hero section, about me, projects, and links — all styled beautifully. This is a REAL website that you can publish on the internet!

🚀 GO LIVE

Put Your Website on the Internet — Free!

Your website is ready. Now let the world see it!

🐙

GitHub Pages

Push your code to GitHub, enable Pages in settings — your site is live at yourname.github.io! The most popular way for open-source developers.

💚 100% Free

▲

Netlify

Drag and drop your files — instant website! Automatic HTTPS, custom domains, and it's incredibly fast.

💚 Free tier

▼

Vercel

Created by the makers of Next.js. Perfect for more advanced sites. Push to GitHub = automatic deployment.

💚 Free tier

🏔️

Codeberg Pages

Like GitHub Pages but fully non-profit and community-owned. No corporate tracking. True open source.

💚 100% Free & Open

🚀 WHAT'S NEXT

Keep Growing!

📚 Learn More at

freeCodeCamp.org — Full HTML/CSS/JS course (300+ hours, free!)
TheOdinProject.com — Full-stack web development curriculum
KhanAcademy.org — Interactive intro to HTML/CSS/JS
MDN Web Docs (developer.mozilla.org) — The best reference for web technologies

🌟 Your Journey

HTML/CSS → JavaScript → React or Vue → Node.js → Databases → Full-Stack Developer! And every single tool in this journey is free and open source. The web was built on open standards — and you're now part of it!

«عَلِّمُوا وَلَا تُعَنِّفُوا»

"Teach, and make it easy." — The web is meant to be open. Your website is now part of the open web. Share what you've learned! ✨