How the Web Works (Browser, Server, HTTP)

The web is a client-server model. Think of it like ordering food at a restaurant.

• Client (Browser - Chrome, Firefox, Safari): You, the diner. You place an order (request) and consume the meal (render the response). The browser's job is to send requests and display the code it receives (HTML, CSS, JavaScript) as a visual webpage.

• Server (Computer that hosts a website): The kitchen and chef. It listens for orders and sends back the files (the meal).

• HTTP (Hypertext Transfer Protocol): The language or rules of the order. It’s the set of rules governing the conversation.

  • Request: What the browser sends.

    • Method: GET (I want to see this page), POST (I want to submit this form).

    • URL: The address (e.g., https://www.example.com/about).

    • Headers: Extra info (e.g., "I accept English", "I am using Chrome").

  • Response: What the server sends back.

    • Status Code: Did it work?

      • 200 OK: Success!

      • 404 Not Found: The page doesn't exist.

      • 500 Internal Server Error: The kitchen (server) is broken.

    • Body: The actual files (HTML, CSS, images).

Key Concept: When you type a URL and press Enter, the browser finds the server (via DNS), sends a GET request, waits for the 200 OK response containing HTML, and then renders that HTML on your screen.

2. Code Editors (VS Code)

Visual Studio Code (VS Code) is the industry standard because it's lightweight, free, and incredibly extensible.

Setup:

1. Download and install from code.visualstudio.com.

2. Open VS Code.

3. Open the Extensions view (click the square icon on the left sidebar or press Ctrl+Shift+X).

Essential Extensions for Beginners:

• Auto Rename Tag: Automatically renames the closing HTML tag when you rename an opening one.

• Live Server: Creates a local development server with live reload. (This is crucial—it lets you see changes instantly in your browser as you save your code).

• Prettier - Code formatter: Automatically formats your code to look clean and consistent.

Shortcuts:

• Ctrl + S (Win) / Cmd + S (Mac): Save.

• Ctrl + /: Comment/uncomment a line.

• ! + Tab (in an HTML file): Generates the basic HTML boilerplate structure.

3. Folder Structure & Best Practices

Never just save files to your desktop. A clean folder structure is essential for scalability and sanity.

Recommended Project Structure:
Create a main folder for your project (e.g., my-first-website). Inside, organize as follows:

text

my-first-website/
│
├── index.html          (The home page - must be named index.html)
├── about.html          (Another page)
│
├── css/                (All stylesheets)
│   └── style.css
│
├── js/                 (All JavaScript files)
│   └── script.js
│
├── images/             (All images)
│   ├── logo.png
│   └── hero-bg.jpg
│
└── assets/             (Optional: fonts, other media)

Best Practices:

• Use lowercase: Always use lowercase letters for file and folder names. Use hyphens (-) instead of spaces (e.g., my-profile-pic.jpg, not My Profile Pic.jpg).

• Relative paths: When linking files, use relative paths.

  • Good: css/style.css (links to the CSS folder from the root).

  • Bad: C:\Users\YourName\Desktop\my-first-website\css\style.css (absolute path—this will break when you upload to the internet).

Welcome to Web Wordsmithing! In this hands-on class, you’ll move beyond plain text and learn the foundational HTML skills needed to structure and present content like a professional. Whether you're building a blog, a business site, or an online portfolio, mastering these core elements is your first step to creating clear, engaging, and accessible web pages.

Here’s what we’ll cover:

Structuring Your Page

We’ll start with the building blocks of any web document. You’ll learn how to use:

• Headings (<h1> to <h6>) : We’ll explore how to create a clear content hierarchy, from the main page title to subsections, ensuring your content is both user-friendly and search-engine optimized.

• Paragraphs (<p>) : Discover how to group sentences into readable, well-spaced blocks of text that form the core of your message.

Adding Emphasis & Meaning

Not all text is created equal. We’ll use text formatting to add nuance and importance to your words. You’ll learn the difference between:

• <b> vs. <strong>: When to simply make text bold for visual weight, and when to use <strong> to indicate that a word or phrase has strong importance for accessibility and SEO.

• <i> vs. <em>: Similarly, we’ll distinguish between making text italic for stylistic purposes (like a book title) and using <em> to add emphasis that changes the tone of a sentence.

Organizing with Lists

Finally, we’ll bring order to information using lists—an essential tool for clarity. You’ll master:

• Unordered Lists (<ul>) : Perfect for bullet-point lists, features, and groupings where order doesn’t matter.

  • Create multi-level nested lists.

  • Style bullet points with CSS.

• Ordered Lists (<ol>) : Ideal for step-by-step instructions, rankings, and sequences where the order is critical.

  1. Learn to control numbering styles (e.g., letters, roman numerals).

  2. Understand how to start lists at a specific number.

  3. Build nested ordered lists for complex procedures.

Take the next step in your web development journey! In this project-focused class, you’ll learn how to transform a simple text page into a rich, interconnected website by mastering hyperlinks, images, and file organization. You’ll finish by building a simple personal webpage that brings everything together.

Here’s what we’ll cover:

Connecting the Web: Hyperlinks (<a>)

Links are what make the web a web. You’ll learn how to create pathways between pages and resources using the anchor tag. We’ll explore:

• Absolute Links: Linking to external websites (e.g., https://www.example.com).

• Relative Links: Connecting pages within your own site—essential for navigation and multi-page projects.

• Internal Links: Jumping to specific sections on the same page using id attributes.

• Link Attributes: Using target="_blank" to open links in a new tab and title for accessibility.

Adding Visuals: Images (<img>)

Images bring personality and clarity to your content. You’ll learn how to select, insert, and optimize images for the web:

• The <img> Tag: Understanding src, alt, width, and height attributes.

• Why alt Text Matters: Writing descriptive alternative text for accessibility and SEO.

• Image Formats: When to use JPEG, PNG, GIF, and modern formats like WebP.

Organizing Your Files: File Paths

A well-organized project is a successful one. You’ll learn how to structure your files and correctly point to them using:

• Relative Paths: Navigating folders with ./ (current directory) and ../ (parent directory).

  • Example: images/profile.jpg

  • Example: ../projects/index.html

• Absolute Paths: Understanding when they’re necessary and their limitations.

Move beyond generic <div>s and learn to build webpages with purpose. In this class, you’ll discover how semantic HTML gives your content structure, improves accessibility, and boosts SEO. You’ll use these elements to create a well-organized personal webpage.

What You’ll Learn

• <header>: Define the introductory area of your page or section—perfect for logos, titles, and navigation.

• <nav>: Create dedicated navigation blocks for your main site links.

• <section>: Group related content into meaningful, themed areas.

• <footer>: Add closing content like copyright info, contact links, or social media icons.

Build webpages with purpose and precision. In this class, you'll learn how to use semantic HTML to create well-structured, accessible content—and how to present data clearly using tables.

What You'll Learn

Semantic Layout

• <header>: Introductory content, logos, and navigation

• <nav>: Primary site navigation links

• <section>: Group related content into themed areas

• <footer>: Footer content like copyright and contact info

Tabular Data

• <table>: The foundation for displaying structured data

• <tr>: Table rows that organize horizontal groups of cells

• <td>: Standard data cells within each row

Build complete, interactive webpages. In this class, you'll learn how to combine semantic layout, structured data tables, and user input forms to create fully functional, accessible websites.

What You'll Learn

Semantic Layout

• <header>, <nav>, <section>, <footer>: Structure content meaningfully

Tabular Data

• <table>, <tr>, <td>: Present structured data clearly

Forms

• <form>: The container for collecting user input

• <input>: Various input types (text, email, submit, etc.)

• <label>: Connect descriptive text to form fields for accessibility

• <button>: Submit or reset form data

You've built the structure—now it's time to make it shine. In this class, you'll learn what CSS is and how to use it to control the visual presentation of your HTML content. You'll discover the different ways to apply styles and how to target specific elements using selectors.

What You'll Learn

What is CSS?

• Understanding the separation of content (HTML) and presentation (CSS)

• CSS syntax: selectors, properties, and values

Three Ways to Apply CSS

• Inline CSS: Styles applied directly to individual elements using the style attribute

  • Example: <p style="color: blue;">

• Internal CSS: Styles defined within a <style> tag in the <head> section

  • Best for single-page styling

• External CSS: Styles in a separate .css file linked via <link>

  • Best for multi-page consistency and maintainability

CSS Selectors

• Element Selector: Targets all instances of an HTML tag (p, h1, div)

• Class Selector: Targets elements with a specific class attribute (.card, .highlight)

• ID Selector: Targets a unique element with a specific ID (#header, #contact-form)

Bring your webpage to life with color and typography. In this class, you'll learn how to use CSS to create visually appealing text, choose the perfect fonts, and apply color schemes that enhance readability and design.

What You'll Learn

Colors

• Color Names: Predefined colors like red, blue, tomato

• Hex Codes: Six-digit codes for precise colors (#ff5733, #1a2b3c)

• RGB/RGBA: Red, green, blue values with optional opacity (rgb(255, 87, 51), rgba(0, 0, 0, 0.5))

• HSL/HSLA: Hue, saturation, lightness for intuitive color selection

• Applying Colors: color for text, background-color for backgrounds

Font & Text Styling

• font-family: Setting typefaces (serif, sans-serif, monospace)

• font-size: Sizing text with pixels (px), ems (em), or rems (rem)

• font-weight: Boldness levels (normal, bold, 100–900)

• text-align: Aligning text (left, center, right, justify)

• text-decoration: Underlines, overlines, or removal (none for links)

• line-height: Controlling spacing between lines for readability

Google Fonts

• Browsing and selecting fonts from the Google Fonts library

• Embedding fonts using the <link> method

• Applying custom fonts with font-family in your CSS

Take your styling to the next level by mastering the visual details that create polished, well-organized layouts. In this class, you'll learn how to use borders, backgrounds, and spacing to define structure, create visual separation, and improve overall readability.

What You'll Learn

Borders

• border: Adding lines around elements (width, style, color)

  • Example: border: 2px solid #333;

• Border Styles: solid, dashed, dotted, double, none

• Individual Sides: border-top, border-right, border-bottom, border-left

• Border Radius: Rounded corners with border-radius (5px, 50% for circles)

• Creating Visual Hierarchy: Using borders to separate sections, cards, and tables

Backgrounds

• background-color: Solid color backgrounds

• background-image: Adding images as backgrounds

  • Example: background-image: url('pattern.jpg');

• Background Properties:

  • background-repeat: repeat, repeat-x, repeat-y, no-repeat

  • background-position: center, top left, 50% 50%

  • background-size: cover, contain, or specific dimensions

• Combining Backgrounds: Gradients and images for modern effects

Spacing

• Margin: Space outside an element (pushes other elements away)

  • margin-top, margin-right, margin-bottom, margin-left

  • margin: 10px 20px; (top/bottom, left/right)

  • margin: 0 auto; for centering block elements

• Padding: Space inside an element (between content and border)

  • Similar shorthand properties as margin

• Box Model: Understanding how content, padding, border, and margin work together

• Spacing Best Practices: Creating visual breathing room and establishing consistent rhythm

Master the core concept that governs all layout in CSS: the box model. In this class, you'll learn how every element is a box, and how to control spacing, sizing, and borders to create precise, well-structured layouts.

What You'll Learn

The Box Model
Understanding the four layers that make up every element:

• Content: The actual text, images, or nested elements

• Padding: Space between content and border (inside the element)

• Border: The outline surrounding padding (or content)

• Margin: Space outside the border (pushes other elements away)

Margin

• Creating space outside elements

• margin-top, margin-right, margin-bottom, margin-left

• Shorthand: margin: 10px 20px 15px 5px; (top, right, bottom, left)

• Shorthand: margin: 10px 20px; (top/bottom, left/right)

• margin: 0 auto; to center block-level elements horizontally

• Collapsing margins: How adjacent margins combine

Padding

• Creating space inside elements, between content and border

• Same shorthand properties as margin

• Adds to the total width/height of an element (unless using box-sizing)

Border

• Border Width: border-width: 2px;

• Border Style: solid, dashed, dotted, double, groove, none

• Border Color: border-color: #333;

• Shorthand: border: 2px solid #333;

• Individual sides: border-top, border-right, border-bottom, border-left

• Border Radius: Rounded corners with border-radius: 8px; or border-radius: 50%; for circles

Width & Height

• width: Setting element width (px, %, vw, auto)

• height: Setting element height (use cautiously)

• max-width: Responsive sizing (prevents overflow)

• min-height: Ensuring a minimum height

• Box Sizing: box-sizing: border-box; to include padding and border in total width/height

Understanding the display property is essential for controlling layout behavior. In this class, you'll learn how elements interact with each other horizontally and vertically, and how to choose the right display value for any situation.

What You'll Learn

The Display Property
How every HTML element has a default display behavior that determines its layout and interaction with surrounding elements.

Block

• Default for: <div>, <p>, <h1>–<h6>, <section>, <header>, <footer>, <nav>, <ul>, <li>, <table>, <form>

• Characteristics:

  • Starts on a new line

  • Takes up full width available (100% by default)

  • Respects width, height, margin, padding

  • Pushes other elements to the next line

• Use cases: Page structure, containers, sections

Inline

• Default for: <span>, <a>, <strong>, <em>, <img>, <label>

• Characteristics:

  • Does NOT start on a new line

  • Only takes up as much width as needed

  • Does NOT respect width or height settings

  • Respects horizontal margin and padding (vertical may overlap)

• Use cases: Text within paragraphs, links, inline emphasis

Inline-Block

• Characteristics:

  • Does NOT start on a new line (flows inline like text)

  • Respects width, height, margin, padding (like block)

  • Perfect hybrid for creating flexible layouts

• Use cases: Navigation menus, buttons, cards in a row, image galleries

Comparing the Three

Learn two essential CSS properties for controlling content behavior and visual effects. In this class, you'll discover how to handle overflowing content and create transparency effects to enhance your designs.

What You'll Learn

Overflow
Controlling what happens when content exceeds its container's dimensions.

• overflow: visible (default): Content spills outside the container

• overflow: hidden: Excess content is clipped and hidden

• overflow: scroll: Adds scrollbars regardless of overflow

• overflow: auto: Scrollbars appear only when needed

• overflow-x & overflow-y: Control horizontal and vertical overflow separately

Opacity
Controlling transparency levels of elements.

• opacity: 1 (default): Fully opaque

• opacity: 0.5: 50% transparent

• opacity: 0: Fully transparent (hidden but still occupies space)

• Use cases: Hover effects, image overlays, modal backgrounds

Learn the classic CSS technique for wrapping content and creating multi-column layouts. In this class, you'll discover how to use floats and understand the essential clearing techniques to maintain proper layout flow.

What You'll Learn

Float
Moving elements to the left or right, allowing content to wrap around them.

• float: left;: Element shifts left, content wraps to the right

• float: right;: Element shifts right, content wraps to the left

• float: none;: Default behavior, no floating

• Common uses: Wrapping text around images, creating column layouts

Clearing Floats
Preventing elements from wrapping around floated items.

• clear: left;: Prevents wrapping around left-floated elements

• clear: right;: Prevents wrapping around right-floated elements

• clear: both;: Prevents wrapping around floats on either side

• clear: none;: Default, allows wrapping

Clearfix Hack
A technique to contain floats within parent elements:

css

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Flexbox is the modern, powerful CSS layout system that makes building responsive, flexible layouts simple and intuitive. In this class, you'll learn how to align, distribute, and reorder elements with ease—say goodbye to float hacks and complicated positioning.

What You'll Learn

Flex Container
The parent element that enables flex layout. Apply display: flex; to activate.

Flex Container Properties

• flex-direction: Row, column, or reverse direction

• justify-content: Horizontal alignment (center, space-between, space-around, flex-start, flex-end)

• align-items: Vertical alignment (center, stretch, flex-start, flex-end, baseline)

• flex-wrap: Allow items to wrap to multiple lines

• gap: Space between flex items (modern alternative to margins)

Flex Items
The child elements within a flex container.

Flex Item Properties

• flex-grow: How much an item can grow relative to others (default: 0)

• flex-shrink: How much an item can shrink (default: 1)

• flex-basis: Initial size before growing/shrinking

• flex shorthand: flex: 1; (grow equally) or flex: 1 1 200px;

• align-self: Override container's alignment for a single item

• order: Reorder items visually without changing HTML

Alignment is where Flexbox truly shines. In this class, you'll dive deep into the alignment properties that give you pixel-perfect control over spacing, positioning, and distribution of elements—both horizontally and vertically.

What You'll Learn

Main Axis Alignment (justify-content)
Controls spacing along the main direction (horizontal by default).

Cross Axis Alignment (align-items & align-self)
Controls alignment perpendicular to the main direction.

Multi-line Alignment (align-content)
Controls spacing between rows when items wrap.

• Works on flex containers with flex-wrap: wrap;

• Options: flex-start, flex-end, center, space-between, space-around, stretch

Individual Item Alignment (align-self)

• Overrides align-items for a single flex item

• Perfect for creating exceptions in a uniform layout

Gap Properties

• gap: Sets space between flex items

• row-gap: Vertical gap between wrapped rows

• column-gap: Horizontal gap between columns

CSS Grid is the ultimate layout system—a powerful, two-dimensional tool that lets you design complex, responsive layouts with both rows and columns simultaneously. In this class, you'll learn how to create magazine-style layouts, precise page structures, and responsive designs that Flexbox alone can't achieve.

What You'll Learn

Grid Container
The parent element that establishes the grid context with display: grid; or display: inline-grid;

Defining the Grid

Grid Items
Positioning items within the grid.

Grid Units & Functions

• fr (fraction unit): Distributes remaining space proportionally

• repeat(): Creates repeating patterns (repeat(3, 1fr))

• minmax(): Sets flexible ranges (minmax(200px, 1fr))

• auto: Automatically sizes to content

Grid Template Areas
Create visual layouts with named regions:

css

grid-template-areas: 
  "header header header"
  "sidebar main main"
  "footer footer footer";

Alignment in Grid

• justify-items: Align items horizontally within cells

• align-items: Align items vertically within cells

• justify-content: Align entire grid within container

• align-content: Align entire grid vertically

Grid and Flexbox aren't competing technologies—they're complementary tools that work best together. In this class, you'll learn how to leverage the strengths of each system: Grid for overall page structure, and Flexbox for component-level alignment. Together, they create robust, flexible, and maintainable layouts.

What You'll Learn

When to Use Each

The Power of Combination

• Grid for macro layout: Define the big picture—header, sidebar, main content, footer

• Flexbox for micro layout: Handle alignment within each grid cell—navigation, card content, form groups

Practical Patterns

1. Grid Page Layout + Flex Navigation

   • Use Grid to position header, main, sidebar, footer

   • Use Flexbox inside header to align logo and nav links

2. Grid Gallery + Flex Cards

   • Use Grid with repeat(auto-fit, minmax(250px, 1fr)) for responsive card container

   • Use Flexbox inside each card to align content (image, text, button) with flex-direction: column; justify-content: space-between;

3. Grid Form Layout + Flex Input Groups

   • Use Grid to arrange form fields in rows and columns

   • Use Flexbox to align labels with inputs or group buttons

Take full control over where elements appear on your page. In this class, you'll learn the five positioning types and how to use them to create overlays, sticky headers, modals, and precisely placed elements that break free from normal document flow.

What You'll Learn

The Position Property

Offset Properties
Used with positioned elements (except static):

• top, right, bottom, left: Set distance from reference edge

• z-index: Control stacking order (higher numbers appear on top)

Key Concepts

relative

• Element stays in document flow

• Offsets move it from original position (space remains reserved)

• Creates a new positioning context for absolute children

absolute

• Removed from document flow (no space reserved)

• Positions relative to the nearest positioned ancestor (relative, absolute, fixed)

• If no positioned ancestor exists, positions relative to <html>

fixed

• Removed from document flow

• Positions relative to viewport (stays fixed during scroll)

• Perfect for navigation bars, chat widgets, cookie notices

Make your websites look great on every device—from mobile phones to desktop monitors. In this class, you'll learn how to use media queries to apply different CSS styles based on screen size, resolution, and device capabilities.

What You'll Learn

What Are Media Queries?
CSS techniques that conditionally apply styles based on device characteristics.

Basic Syntax

css

@media (condition) {
  /* CSS rules apply only when condition is true */
}

Common Breakpoints

Key Features

Mobile-First vs Desktop-First

Common Responsive Patterns

• Flexible grids: Percentages instead of fixed widths

• Fluid images: max-width: 100%; height: auto;

• Stacking layouts: Columns become full width on mobile

• Typography: Adjust font sizes for smaller screens

Design with the smallest screen in mind and scale up. In this class, you'll learn the mobile-first approach—a modern strategy that prioritizes performance, usability, and progressive enhancement across all devices.

What You'll Learn

What is Mobile-First Design?
A design philosophy where you start by creating for mobile devices, then add enhancements for larger screens using min-width media queries.

Why Mobile-First?

Mobile-First vs Desktop-First

Key Principles

• Content priority: What matters most on small screens?

• Touch-friendly: Tap targets at least 44×44 pixels

• Readable fonts: Minimum 16px for body text

• Simplified navigation: Hamburger menus or stacked links

• Flexible layouts: Percentages, fr units, auto-fit

Mobile-First Media Query Structure

css

/* Base: Mobile styles (default) */

@media (min-width: 576px) {
  /* Small tablets */
}

@media (min-width: 768px) {
  /* Tablets */
}

@media (min-width: 992px) {
  /* Desktops */
}

@media (min-width: 1200px) {
  /* Large desktops */
}

Go beyond flexible grids and learn how to make every element—especially images—adapt seamlessly to any screen size. In this class, you'll master techniques for delivering the right image at the right size and building layouts that flow gracefully across all devices.

What You'll Learn

Responsive Images

Responsive Layout Patterns

Responsive Typography

• Viewport units: vw, vh for fluid typography

• clamp(): Fluid scaling with limits

  css

  font-size: clamp(1rem, 2.5vw, 2rem);

• Relative units: rem, em over px

Responsive Units

Project: "Peak Coffee" – A Modern Café Website

Build a professional business website for a local coffee shop.

Requirements:

Bonus Features:

• Sticky header

• Hover effects on menu items and buttons

• Google Fonts for branding

• srcset for hero image responsiveness

Project A: "Riverside Academy" – School Website

Build a welcoming school website with key information.

Requirements:

Project B: "TechInsight" – Blog Homepage

Build a blog homepage displaying articles with featured posts.

Requirements:

Bonus Features:

• Sticky sidebar

• order property to rearrange sidebar below articles on mobile

• Pagination links (Previous, 1, 2, 3, Next)

• Hover effects on article cards

Project Submission & Presentation

Class 1: Business Website due
Class 2: Portfolio Website due
Class 3: School Website + Blog Homepage due

Deliverables:

• Live HTML/CSS files with proper folder structure

• External CSS file (or multiple organized stylesheets)

• Responsive testing across device sizes

• Code comments demonstrating understanding

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NovaTech</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- Navbar -->
  <header>
    <nav class="nav">
      <h2 class="logo">NovaTech</h2>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Solutions</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- Hero -->
  <section class="hero">
    <div class="hero-text">
      <h1>Design. Build. Grow.</h1>
      <p>We craft high-performance websites and digital experiences that convert visitors into customers.</p>
      <div class="hero-btns">
        <a href="#" class="btn primary">Get Started</a>
        <a href="#" class="btn outline">View Work</a>
      </div>
    </div>
  </section>

  <!-- Features -->
  <section class="features">
    <h2>Why Choose Us</h2>
    <div class="feature-grid">
      <div class="box">
        <h3>Fast Performance</h3>
        <p>Optimized websites that load instantly and keep users engaged.</p>
      </div>
      <div class="box">
        <h3>Modern Design</h3>
        <p>Clean, user-focused designs that reflect your brand identity.</p>
      </div>
      <div class="box">
        <h3>SEO Driven</h3>
        <p>We build with search engines in mind for better visibility.</p>
      </div>
    </div>
  </section>

  <!-- Showcase -->
  <section class="showcase">
    <div class="showcase-text">
      <h2>We Help Brands Stand Out</h2>
      <p>Our team combines creativity and technology to deliver outstanding results for startups and businesses.</p>
      <a href="#" class="btn primary">Learn More</a>
    </div>
  </section>

  <!-- CTA -->
  <section class="cta">
    <h2>Let’s Build Something Amazing</h2>
    <a href="#" class="btn primary">Start Project</a>
  </section>

  <!-- Footer -->
  <footer>
    <p>© 2026 NovaTech. All rights reserved.</p>
  </footer>

</body>
</html>

Variables & Data Types

• Variables: let (changeable), const (fixed), var (avoid)

• Data Types: Strings, Numbers, Booleans, Undefined, Null

• Template Literals: `Hello ${name}` for dynamic strings