CodeLaunch Web Development Learning Hub | Project Plan

CIS 89A Website Project

CodeLaunch Project Plan

A complete plan for a beginner-friendly web development learning website designed to help students confidently learn HTML, CSS, and project-building skills.

Explore the Plan

01

Project Overview

Purpose of the Website

Project Statement

CodeLaunch will be a beginner-friendly educational website that introduces students to web development. It will explain foundational HTML and CSS concepts, provide examples, and guide visitors through small coding projects.

The purpose is to make web development feel organized, approachable, and practical instead of overwhelming. Each page will focus on one learning goal and include clear explanations, examples, and suggested activities.

Main Goals

  • Explain HTML and CSS in simple language.
  • Show useful code examples.
  • Help beginners create their first websites.
  • Encourage students to practice independently.
  • Provide trusted learning resources.

02

Users

Audience and User Experience

Primary Audience

Middle school, high school, and college students who are beginning web development and have little or no previous coding experience.

Secondary Audience

Teachers, club leaders, and self-directed learners who need a simple collection of introductory web design lessons and examples.

Intended Experience

Visitors should feel welcomed rather than intimidated. The experience will be clean, easy to navigate, and divided into manageable learning sections.

User Experience Priorities

Simple Short explanations and clear headings
Consistent Shared navigation and design on every page
Accessible Readable text, labels, contrast, and alt text
Responsive Usable on desktop, tablet, and mobile devices

03

Site Outline

Planned Website Pages

The completed website will contain five HTML pages connected to one shared CSS file.

index.html

Home

Introduces CodeLaunch, explains what visitors can learn, and provides clear links to every major section.

Starting point

html-basics.html

HTML Basics

Explains document structure, headings, paragraphs, links, images, lists, tables, and semantic HTML.

Learn structure

css-design.html

CSS Design

Introduces selectors, colors, fonts, spacing, borders, Flexbox, Grid, and responsive design.

Learn styling

projects.html

Practice Projects

Provides several beginner projects, such as a profile page, restaurant menu, photo gallery, and portfolio.

Practice skills

resources.html

Resources

Lists helpful documentation, coding tools, validators, accessibility checkers, and continued-learning sites.

Continue learning

04

Navigation

How Visitors Will Move Through the Site

Home HTML Basics CSS Design Projects Resources

Main Navigation

Every page will contain the same navigation menu near the top. The current page will receive a visual active state so users always know where they are.

Additional Navigation

The footer will repeat important links. Longer pages will also include section links and a “Back to Top” link to reduce unnecessary scrolling.

05

Visual Direction

CSS Theme and Style Plan

Colors

Navy communicates reliability, while blue and purple create an energetic technology theme. Light backgrounds provide contrast and prevent the pages from feeling crowded.

Fonts

Clear Headings

Comfortable paragraph text

The site will use a modern sans-serif font for most content. Large, bold headings will create hierarchy, while body text will remain highly readable.

Layout

CSS Grid will organize page sections and cards. Flexbox will align navigation and smaller components. Mobile media queries will stack columns vertically.

Planned CSS Features

  • CSS variables for consistent colors and spacing
  • Grid and Flexbox layouts
  • Cards with rounded corners and subtle shadows
  • Hover and focus effects for links and buttons
  • Responsive media queries for smaller screens
  • Accessible color contrast and visible keyboard focus
  • One shared stylesheet for all five pages

06

Search Visibility

SEO Keywords and Similar Websites

Planned Search Keywords

beginner web development learn HTML learn CSS student coding projects web design tutorials HTML CSS learning hub

These keywords describe the site's content and intended audience. They are also included in the page's HTML keywords meta element.

Similar Website 01

MDN Web Docs

This site provides organized documentation and learning material for HTML, CSS, JavaScript, accessibility, and modern web development.

Visit MDN Learning Web Development

07

Quality Plan

Testing and Accessibility

HTML Validation

Check every HTML page for missing tags, invalid attributes, and structural errors.

Mobile Testing

Test the layout at desktop, tablet, and mobile screen sizes to confirm that content remains readable.

Accessibility

Use headings in order, alt text, labels, keyboard focus, readable colors, and descriptive link text.

Browser Testing

Preview the completed site in more than one browser and verify that links and navigation work correctly.