2. Frontend Fundamentals

This section covers the foundational skills every modern developer needs. We’ll start with the building blocks of the web: HTML, CSS, and JavaScript.

Why Code Knowledge Matters in the AI Era
  • AI can write code—but it doesn’t know what you want.
  • You need to communicate clearly with AI tools.
  • You need to tweak, debug, and improve what they generate.
  • You need to read docs and learn new tools quickly.
  • Most importantly: you need to build what you want—not just what the tool gives you.

Frontend vs Backend

A typical web project has two sides: the Frontend and the Backend.

The Frontend is everything the user sees and interacts with—HTML, CSS, and JavaScript. It lives in the browser.

The Backend is the stuff behind the scenes—servers, databases, APIs.

Frontend and Backend

You can also think of them as public vs private code. The frontend is public and visible to everyone. The backend is private and not visible to the public.

Why Start With Frontend?

  • You get instant feedback—see your code run in the browser.
  • You can build and break stuff freely.
  • It’s empowering—no waiting on backend setup.

To get started, let’s set up your coding environment using Cursor.

Setting Up Cursor

Cursor is an AI-powered editor that helps you write, fix, and understand code faster.

Installing Cursor

  • Download Cursor from cursor.com/download.
  • Install it for your OS (Mac, Windows, or Linux).
  • Launch the app and sign up with Google or email.
  • Accept default settings and you’re in.

Need help? Check out the Cursor docs.

Basic HTML

HTML is the structure of the web. Think of it as the skeleton of a page.

Setup

Download the starter code here.

  • Unzip and open the folder in Cursor.
  • Open index.html.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
</head>
<body>
  <h1>My Website</h1>
</body>
</html>

Preview in Browser

  • Open a terminal in Cursor.
  • Run npx serve.
  • Visit http://localhost:3000.

HTML Reference Page

Take a look at all of the HTML tags and elements in the HTML Reference.

Practice Prompting HTML

  • "Add a header with a title and subtitle."
  • "Add a main content area with a title and paragraph."
  • "Add a footer with a copyright message."

Now let’s add some style.

Basic CSS

CSS is the style of the web. It’s how you make your site look good—colors, fonts, layout.

Setup

Use the styles.css file from your starter project.

/* This is where we'll add our styles. */

body {
  background-color: white;
  font-family: sans-serif;
}

CSS Reference Page

Take a look at all of the CSS properties and values in the CSS Reference.

Practice Prompting CSS

  • "Style the header with padding and a background color."
  • "Add layout styles for a main content section."
  • "Style the footer to be fixed to the bottom of the page."

Basic JavaScript

JavaScript is the behavior of the web. It lets you make your site interactive.

Setup

Open script.js in your project.

// This is where we'll add our JavaScript.

console.log("Hello, world!");

JavaScript Reference Page

Take a look at all of the JavaScript features in the JavaScript Reference.

Practice Prompting JavaScript

  • "Add a button that logs 'clicked' when pressed."

Basic JSON

JSON is how we store and share structured data—used everywhere in web development.

Setup

Open data.json in your project.

{
  "title": "Why Vibe Coding Is Awesome",
  "description": "Check out these cool reasons why Vibe Coding is awesome.",
  "features": [
    {
      "id": 1,
      "name": "",
      "description": ""
    }
  ]
}

JSON Reference Page

Take a look a how JSON is structured in the JSON Reference.

Practice Prompting JSON

  • "Add a new feature object with a name and description."

UI/UX Design Fundamentals

UI/UX is about how your site looks and feels to real humans.

UI - User Interface

The visible parts of your site. See examples in the UI/UX Reference.

UX - User Experience

How it feels to use your site. Some key principles:

  • Consistency
  • Feedback
  • Accessibility
  • Responsiveness
  • Performance
  • Security
  • SEO
  • Usability

Practice Prompting UI/UX

  • "Add a modal for a Sign Up button."
  • "Make the site responsive."
  • "Add accessibility features."
  • "Optimize for performance."

How the Pros Work

Pros Use JavaScript Frameworks

These tools make it easier to build complex web apps. They also make add interactivity easier with less vanilla JavaScript. And usually have a community and ecosystem behind them, so you're not alone. But come with a learning curve. We’ll explore them later—don’t worry.

JavaScript Frameworks

Some popular JS frameworks and libraries are:

  • JQuery
  • React (what most AI tools use)
  • Angular
  • Svelte
  • Vue (what I use)
  • Alpine
  • HTMX
  • Solid

Pros Use CSS Frameworks

For large projects, vanilla CSS can get messy fast. CSS frameworks help you write clean, maintainable CSS. Most of them are utility-first, so you can build your own design system.

CSS Frameworks

Some popular CSS frameworks are:

  • Bootstrap
  • Foundation
  • Semantic UI
  • Materialize
  • UIKit
  • Tailwind (what most AI tools use)
  • DaisyUI
  • Open Props

Pros Don't write Raw HTML

There are too many to name, but pros typically use templating languages to create their HTML. They allow you to split your html into chunnks and add dyanmic values. They're usually combined with a backend or frontend framework. But can also be used with a static site generator (SSG).

Templating Languages

Some popular templating languages are:

  • Handlebars
  • EJS
  • Pug
  • Nunjucks
  • Liquid
  • JSX (HTML in React)
  • Blade (HTML in Laravel)

Pros Use Web Frameworks

In the real world, developers don't build websites from scratch. Some of the javascript frameworks listed above have been extended to include features like routing, templating, and more. These "full stack" frameworks are loaded with features and can be used to build complex web apps. or simple static sites.

Full Stack Frameworks
  • Full Stack JS Frameworks
    • Next.js (React)
    • Nuxt (Vue)
    • SvelteKit (Svelte)
  • Backend Frameworks
    • Express (Node.js)
    • Laravel (PHP)
    • Ruby on Rails (Ruby)
    • Django (Python)

Static Site Generators (SSGs)

If you don't need the extra features, you can use a static site generator. Their sole purpose is to generate static HTML files from templates and data.

Static Site Generators
  • Eleventy
  • Hugo
  • Jekyll
  • Gatsby
  • Vuepress
  • Docusaurus

In the next section, you'll be building your first site using a static site generator.

A note on "stacks"
The term "full stack" is thrown around a lot. It's a term that means different things to different people. It's basically a term for something/someone works with both frontend and backend technologies.
And different "stacks" can have different names and silly accronyms to describe them. Example: LAMP, MEAN, JAM, etc.

Final Thoughts

Congrats—you’ve just covered the real front-end fundamentals. You now know more than most people launching sites with AI tools.

Don’t Want to Learn All This?

You don’t have to. But it helps. Even a little bit of knowledge makes AI tools more powerful and your results more reliable.

Feel Like You’re Not a "Real" Coder?

Everyone starts somewhere. You are doing it. Keep going.

Ready to Build More Complex Stuff?

Great! This is your launch pad. APIs, games, databases—all of that builds on this foundation.

  • Crawl before you run.
  • You’ll be surprised what’s possible already.
  • Simple is often better.

Stick with me. We’re just getting started.