Web Development I

Build stunning, mobile-responsive websites from scratch using semantic HTML5 and modern CSS3. Learn industry-standard design principles, layout architectures, and web deployment fundamentals.

🎓 COLLEGE & AP PREPAREDNESS 🛠️ 4 PORTFOLIO CAPSTONES ⚡ 1-ON-1 MENTORSHIP PACING

Web Development I — (Modern HTML5, CSS3 & Responsive Layouts)

A high-trust, project-driven foundation in modern web design. Students learn semantic markup, CSS box model mechanics, flexbox layouts, mobile responsiveness, and live cloud publishing with Git.

PHASE 01 // SEMANTIC HTML5 FOUNDATIONS

Web Structure & Document Architecture

OUTCOME: PERSONAL STUDENT BIO CARD

🎯 Phase 01 Overview & Objectives: In this phase, students learn the foundational building blocks of the web by crafting clean, structural markup with HTML5. They will set up a professional developer environment using VS Code and master element nesting, text formatting, and image embedding.

Document Setup & Metadata

Initialize standard web pages with <!DOCTYPE html> declarations and configure essential metadata inside the <head> element using VS Code.

Semantic Page Layout

Organize webpage sections logically using semantic elements like <header>, <main>, <article>, and <footer>.

Text Hierarchy & Inline Tags

Craft structured content hierarchies utilizing <h1> through <h6> headings alongside <p> paragraph tags.

Hyperlinks & Media Embedding

Connect external resources using the <a> anchor tag with the href attribute and display visual assets with <img> and src.

Lists & Structured Content

Format ordered and unordered lists using <ul>, <ol>, and <li> tags for clean content presentation.

DOM Inspection & Debugging

Debug layout structure and inspect live DOM trees using Chrome DevTools element inspection tools.

👤

STUDENT PORTFOLIO DELIVERABLE

Personal Student Bio Card: A clean, semantic HTML5 webpage showcasing student achievements, biography, social links, and embedded imagery.

PHASE 02 // MODERN CSS3 STYLING & BOX MODEL

Visual Design & Box Model Mechanics

OUTCOME: INTERACTIVE STYLED MENU PAGE

🎯 Phase 02 Overview & Objectives: In this phase, students transition from plain markup to visual styling by learning core CSS3 principles. They master selector specificity, typography styling, color theory, and the essential CSS Box Model.

External Stylesheets & Syntax

Link external CSS files using the <link> tag with rel attributes to separate content structure from styling.

Selectors, Classes & IDs

Target elements using class selectors .className, unique ID selectors #elementId, and tag selectors.

Color Systems & Web Fonts

Apply custom color schemes with hex codes alongside custom typography loaded from Google Fonts.

The CSS Box Model

Control element dimensions and inner/outer spacing using padding, border, and margin properties.

Interactive Hover States

Design interactive UI components using the :hover pseudo-class and smooth transition effects.

CSS Resets & Sizing Norms

Normalize browser default margins across operating systems using standard CSS reset rules and border-box sizing.

🎨

STUDENT PORTFOLIO DELIVERABLE

Interactive Digital Menu Page: A beautifully styled digital restaurant menu featuring styled menu cards, custom web typography, and interactive hover highlights.

PHASE 03 // FLEXBOX & GRID LAYOUT ARCHITECTURE

Modern Layout Systems & Alignment

OUTCOME: TECH PRODUCT LANDING PAGE

🎯 Phase 03 Overview & Objectives: In this phase, students unlock complex, modern web layout architectures using CSS Flexbox and CSS Grid. They will build multi-column page components, navigation bars, and flexible content containers without legacy floats.

Flexbox Containers & Alignment

Activate flexible layouts using display: flex and align items horizontally using justify-content.

Flex Direction & Axis Control

Orient flex items vertically using flex-direction: column and align along the cross axis using align-items.

Navigation Bar Architecture

Construct header navigation bars with brand logos and menu links using justify-content: space-between.

CSS Grid Fundamentals

Create two-dimensional layout grids by applying display: grid and defining columns with grid-template-columns.

Grid Gaps & Fractional Units

Manage grid gutter spacing using the gap property and distribute responsive column widths with fr units.

Composite Layout Systems

Nest flexible flexbox components inside two-dimensional grid layouts to assemble robust web application interfaces.

📐

STUDENT PORTFOLIO DELIVERABLE

Tech Product Landing Page: A multi-column marketing website with a flexbox navigation header, feature card grid, pricing table, and call-to-action hero banner.

PHASE 04 // RESPONSIVE DESIGN & CLOUD PUBLISHING

Mobile Media Queries & Live Deployment

OUTCOME: LIVE RESPONSIVE PORTFOLIO WEBSITE

🎯 Phase 04 Overview & Objectives: In this final phase, students make their web applications fully mobile-responsive across all screen sizes and device viewports. They will learn version control with Git and publish their finished portfolio live to the web using GitHub Pages.

Viewport Meta Tags & Fluid Units

Configure responsive mobile viewports using <meta> tags and fluid size units like % and rem.

CSS Media Queries

Adapt layout structures for mobile phones and tablets using @media queries and screen width breakpoints.

Mobile-First Layout Patterns

Reorganize multi-column desktop layouts into touch-friendly single-column mobile stacks for seamless mobile navigation.

Git Version Control Basics

Track code changes and manage software revisions using Git inside the VS Code integrated terminal.

GitHub Code Repositories

Create remote source code repositories on GitHub and push local commits using terminal command workflows.

Cloud Hosting with GitHub Pages

Deploy static web projects to live public URLs accessible on the internet using GitHub Pages hosting.

🌐

STUDENT PORTFOLIO DELIVERABLE

Live Student Portfolio Website: A multi-page, fully mobile-responsive developer portfolio website hosted publicly on the web via GitHub Pages.

Web Development I — (Modern HTML5, CSS3 & Responsive Layouts)

Web Structure & Document Architecture

Document Setup & Metadata

Semantic Page Layout

Text Hierarchy & Inline Tags

Hyperlinks & Media Embedding

Lists & Structured Content

DOM Inspection & Debugging

Visual Design & Box Model Mechanics

External Stylesheets & Syntax

Selectors, Classes & IDs

Color Systems & Web Fonts

The CSS Box Model

Interactive Hover States

CSS Resets & Sizing Norms

Modern Layout Systems & Alignment

Flexbox Containers & Alignment

Flex Direction & Axis Control

Navigation Bar Architecture

CSS Grid Fundamentals

Grid Gaps & Fractional Units

Composite Layout Systems

Mobile Media Queries & Live Deployment

Viewport Meta Tags & Fluid Units

CSS Media Queries

Mobile-First Layout Patterns

Git Version Control Basics

GitHub Code Repositories

Cloud Hosting with GitHub Pages

1-on-1 Expert Mentorship

Tangible Portfolio Assets

College Readiness & Prep

Intellectual Property & Patents

The Value of Technical Education for College Prep

The Power of Small Circle: Why Live, Small Group Learning Works

Beyond the Screen: Preparing Teens for a Digital-First Economy