HTML, CSS & JavaScript Course

From Hello World to Complete Todo App in 10 Lessons

Lesson 1: Hello World & HTML Basics

Students learn the foundation of web development by creating their first HTML page with basic structure and elements.

Go to Lesson 1
Learning Objectives:
  • Understand HTML structure and tags
  • Create first HTML document
  • Learn headings, paragraphs, and basic elements

Hello World!

This is my first website!

About Me

I'm learning web development and it's amazing!

Smiley Face
Key HTML Concepts:
<!DOCTYPE html> - Document type
<html> - Root element
<head> - Metadata section
<body> - Visible content
<h1> to <h6> - Headings
<p> - Paragraphs
<img> - Images

Lesson 2: Styling with CSS

Transform plain HTML into beautiful webpages using CSS for colors, fonts, and layout.

Go to Lesson 2
Learning Objectives:
  • Understand CSS syntax and selectors
  • Apply colors, fonts, and spacing
  • Connect CSS to HTML documents

Hello Styled World!

Now my webpage looks amazing with CSS!

This button shows CSS hover effects without JavaScript!
CSS Concepts Learned:
body { background-color: lightblue; }
h1 { color: purple; font-family: Arial; }
p { font-size: 18px; }
button { background: purple; color: white; }

Lesson 3: Introduction to Bootstrap

Learn to use Bootstrap framework for professional-looking responsive designs with minimal effort.

Go to Lesson 3
Learning Objectives:
  • Include Bootstrap in projects via CDN
  • Use Bootstrap's grid system
  • Apply utility classes and components

Hello Bootstrap!

Bootstrap Card

This professional-looking card was made with just Bootstrap classes!

Success!

Bootstrap makes styling so much easier!

Bootstrap Features:
.container, .row, .col-* - Grid system
.card, .card-body - Card components
.btn, .btn-primary - Button styles
.alert, .text-* - Utility classes

Lesson 4: JavaScript Basics & Interactivity

Add interactivity to webpages with JavaScript variables, functions, and events.

Go to Lesson 4
Learning Objectives:
  • Learn JavaScript variables and functions
  • Handle user interactions with events
  • Create dynamic content

Interactive Demo

Click a button above!
JavaScript Concepts:
let name = "JavaScript"; - Variables
function sayHello() { } - Functions
onclick="function()" - Events
document.getElementById() - DOM access

Lesson 5: DOM Manipulation

Learn to dynamically change webpage content using JavaScript's Document Object Model.

Go to Lesson 5
Learning Objectives:
  • Understand the DOM structure
  • Select and modify HTML elements
  • Change content and styling dynamically

DOM Manipulation Demo

Original content here
DOM Methods:
document.getElementById('id') - Select element
element.innerHTML = "text" - Change content
element.className = "class" - Change CSS class
element.style.color = "red" - Direct styling

Lesson 6: Lists, Arrays, and Loops

Work with collections of data using JavaScript arrays and loops to generate dynamic content.

Go to Lesson 6
Learning Objectives:
  • Create and manipulate arrays
  • Use for loops for iteration
  • Generate HTML lists dynamically

My Favorite Movies

    Programming Languages

      Array & Loop Concepts:
      let movies = ['Movie1', 'Movie2']; - Array creation
      for(let i = 0; i < array.length; i++) - For loop
      array[i] - Array access
      html += "string" - String concatenation

      Lesson 7: Forms and User Input

      Create interactive forms to collect user data and validate input before processing.

      Go to Lesson 7
      Learning Objectives:
      • Create HTML forms with various input types
      • Handle form submission events
      • Validate user input
      Form Concepts:
      <form onsubmit="function(event)"> - Form handling
      event.preventDefault() - Stop form submission
      input.value - Get input value
      required - HTML5 validation

      Lesson 8: Building the Todo App Structure

      Combine all learned skills to start building a complete todo list application.

      Go to Lesson 8
      Learning Objectives:
      • Plan and structure a complete application
      • Implement add and display functionality
      • Combine HTML, CSS, and JavaScript skills

      My Todo List

      • Learn HTML basics ✓
      • Style with CSS and Bootstrap ✓
      • Add JavaScript interactivity
      Application Structure:
      let todos = []; - Data storage
      function addTodo() - Add functionality
      function displayTodos() - Render function
      Global state management

      Lesson 9: Advanced Todo Features

      Implement complete todo functionality including delete, toggle completion, and editing tasks.

      Go to Lesson 9
      Learning Objectives:
      • Add delete and toggle functionality
      • Implement task editing
      • Manage complex user interactions

      Advanced Todo List

      3
      Total
      1
      Active
      2
      Completed
        Advanced Features:
        function toggleTodo(id) - Toggle completion
        function deleteTodo(id) - Remove tasks
        function updateStats() - Live statistics
        Array methods: filter, map, find

        Lesson 10: Local Storage & Polish

        Add data persistence with localStorage and final polish to create a complete, professional application.

        Go to Lesson 10
        Learning Objectives:
        • Implement data persistence with localStorage
        • Add animations and visual polish
        • Handle errors and edge cases

        Complete Todo App

        Your tasks persist between sessions!

        0
        Total
        0
        Active
        0
        Completed
          Professional Features:
          localStorage.setItem() - Save data
          localStorage.getItem() - Load data
          JSON.stringify/parse - Data conversion
          Error handling and animations