Unit 3: Mastering Full-Stack Fundamentals

Welcome to Unit 3! Now that you've built a strong foundation, it's time to level up. In this unit, you’ll dive deeper into advanced HTML, CSS, and JavaScript, and take your first steps into backend development with Node.js and Next.js. Let’s go from building sites to building full applications.

Lesson 3.1: Building Smarter Web Pages

Learn how to create well-structured, stylish, and responsive pages using advanced HTML and CSS.

Modern Techniques with HTML & CSS

We’ll explore HTML5 semantic tags, responsive design strategies, and CSS tricks that improve user experience across devices.

Clean HTML5 Layout

Here’s a sample structure using modern HTML elements:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample Layout</title>
</head>
<body>
  <header>
    <h1>Site Title</h1>
    <nav>
      <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#blog">Blog</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section>
      <h2>Welcome</h2>
      <p>This is a responsive site example.</p>
    </section>
  </main>

  <footer>
    <p>© 2025 My Website</p>
  </footer>
</body>
</html>

CSS Responsive Styling

Use media queries and flexible layouts to adapt across screen sizes:

body {
  margin: 0;
  font-family: system-ui, sans-serif;
}

.container {
  max-width: 960px;
  margin: auto;
  padding: 1rem;
}

@media (max-width: 600px) {
  h1 {
    font-size: 20px;
  }

  nav ul {
    flex-direction: column;
    padding: 0;
  }
}

Lesson 3.2: Leveling Up JavaScript

Take JavaScript beyond the basics with asynchronous code, classes, and dynamic updates.

Going Deeper with JavaScript

ES6+ Features in Practice

Use classes and async/await to structure smarter apps:

const API = '/data.json';

class SiteData {
  constructor() {
    this.items = [];
  }

  async load() {
    try {
      const res = await fetch(API);
      this.items = await res.json();
      this.show();
    } catch (err) {
      console.error('Load error', err);
    }
  }

  show() {
    const root = document.getElementById('root');
    root.innerHTML = this.items.map(i => `<div><h3>${i.title}</h3><p>${i.text}</p></div>`).join('');
  }
}

const site = new SiteData();
site.load();

Handling Forms and Events

React to user actions and submit forms with feedback:

document.addEventListener('DOMContentLoaded', () => {
  const form = document.querySelector('form');

  form.addEventListener('submit', async e => {
    e.preventDefault();
    const formData = Object.fromEntries(new FormData(form));
    try {
      const res = await fetch('/api/form', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData),
      });
      alert(res.ok ? 'Submitted!' : 'Failed to submit');
    } catch {
      alert('Server error');
    }
  });
});

Lesson 3.3: Getting Started with the Backend

Take your first steps into backend development with Node.js and Next.js API routes.

Intro to Server-Side Code

Using TypeScript with Node

Example of defining types and writing safe backend code:

interface User {
  id: number;
  name: string;
  email: string;
}

function registerUser(user: Omit<User, 'id'>): User {
  return { ...user, id: Date.now() };
}

const newUser = registerUser({ name: 'Jane', email: 'jane@example.com' });
console.log(newUser);

API Routes with Next.js

Here's how to define a basic GET API in Next.js:

// pages/api/hello.ts
import type { NextApiRequest, NextApiResponse } from 'next';

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'GET') {
    res.status(200).json({ message: 'Hello from the server!' });
  } else {
    res.setHeader('Allow', ['GET']);
    res.status(405).end('Method Not Allowed');
  }
}

Homework: Apply What You’ve Learned

Take your site to the next level with advanced HTML, CSS, and interactivity.

Project Instructions

Open Your Unit 2 Site:
- • Use GitHub and Codespaces to access your existing project.
Make Improvements:
- • Use CSS to make your layout responsive.
- • Enhance user experience with transitions or effects.
- • Add at least one new section using semantic HTML.
Submit for Review:
- • Turn in your updated project through Schoology.

Was this page helpful?