Skip to Content
0
0
FREE Job Interview Checklist
0
0
FREE Job Interview Checklist
WebDev Learning Hub
Courses
Notes
Reminders
Progress
Settings

Your Progress

30% Complete

Web Development Course

Module 1: HTML Basics

Learn the foundation of web development with HTML. Create your first web page structure.

  • HTML Syntax
  • Text Formatting
  • Links & Images
  • Lists & Tables
2 hours

Module 2: CSS Styling

Make your web pages beautiful with CSS. Learn layout, colors, and responsive design.

  • CSS Selectors
  • Box Model
  • Flexbox & Grid
  • Responsive Design
3 hours

Module 3: JavaScript Fundamentals

Add interactivity to your websites with JavaScript programming basics.

  • Variables & Data Types
  • Functions & Events
  • DOM Manipulation
  • Basic Algorithms
4 hours

HTML Basics

Learn the structure of web pages with HTML

What is HTML?

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It describes the structure of a web page and consists of a series of elements that tell the browser how to display content.

<!-- Basic HTML Structure -->
<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>
  <h1>My First Heading</h1>
  <p>My first paragraph.</p>
</body>
</html>

Try it yourself!

Edit the code below to create a heading with your name:

<h1>Your Name Here</h1>

Quick Quiz

What does HTML stand for?

Hyperlinks and Text Markup Language
HyperText Markup Language
Home Tool Markup Language
Hyper Transfer Markup Language

CSS Styling

Make your web pages beautiful with CSS

Introduction to CSS

CSS (Cascading Style Sheets) is used to style and layout web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.

/* This is a CSS comment */
body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

Try it yourself!

Edit the CSS below to make the paragraph red and centered:

p {
  color: black;
  text-align: left;
}

JavaScript Fundamentals

Add interactivity to your websites with JavaScript

What is JavaScript?

JavaScript is a programming language that enables interactive web pages. It is an essential part of web applications and is supported by all modern web browsers.

// JavaScript code example
let message = "Hello, World!";
console.log(message);

// Function example
function greet(name) {
  return "Hello, " + name + "!";
}

let greeting = greet("Web Developer");
console.log(greeting);

Try it yourself!

Edit the function below to return "I love JavaScript":

function myFunction() {
  return "Edit this text";
}

Your Notes

HTML Structure

The basic structure of every HTML document includes html, head, and body tags.

CSS Box Model

Content, padding, border, and margin - the four components of the CSS box model.

JS Variables

Use let and const for variable declaration in modern JavaScript.

Upcoming Reminders

Complete HTML Practice

Due: Tomorrow, 10:00 AM

Watch CSS Flexbox Video

Due: In 2 days

JavaScript Quiz

Due: Friday, 3:00 PM

Your Learning Progress

Track your journey through the web development course

Overall Completion

30% Complete

HTML Basics

Your progress in HTML module

4 of 10 lessons completed

CSS Styling

Your progress in CSS module

2 of 10 lessons completed

JavaScript Fundamentals

Your progress in JavaScript module

1 of 10 lessons completed

Settings

Customize your learning experience

Account Settings

Learning Preferences