🚀 Web Development Learning Hub

Learn HTML, CSS, JavaScript & GitHub step by step

0% Complete
🚀 Explore Advanced Topics →

📝 HTML Basics

Learn the foundation of web pages

Lesson 1: HTML Structure

HTML (HyperText Markup Language) is the standard markup language for creating web pages.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My First Page</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

🎯 Activity: Build Your First HTML Page

Stage: 1/2 ⏳ In Progress

Lesson 2: HTML Elements & Tags

HTML uses tags to structure content. Common tags include:

  • <h1> to <h6> - Headings
  • <p> - Paragraphs
  • <a> - Links
  • <img> - Images
  • <div> - Containers

🎯 Activity: Create a Profile Card

Stage: 1/2 ⏳ In Progress

Create an HTML structure with your name, a heading, a paragraph about yourself, and a link.

🎨 CSS Styling

Make your web pages beautiful

Lesson 1: CSS Basics

CSS (Cascading Style Sheets) controls the visual appearance of HTML elements.

/* Selector targets HTML elements */
h1 {
    color: blue;
    font-size: 24px;
}

/* Class selector */
.my-class {
    background-color: yellow;
}

/* ID selector */
#my-id {
    border: 2px solid black;
}

🎯 Activity: Style Your Page

Stage: 1/2 ⏳ In Progress

Styled Heading

This is a paragraph that will be styled with your CSS.

Lesson 2: Layout & Flexbox

Flexbox makes it easy to create flexible layouts.

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

🎯 Activity: Create a Flexbox Layout

Stage: 1/2 ⏳ In Progress

⚡ JavaScript Programming

Add interactivity to your websites

Lesson 1: JavaScript Basics

JavaScript makes web pages interactive. You can manipulate the DOM, handle events, and more.

// Variables
let name = "John";
const age = 25;

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

// DOM Manipulation
document.getElementById("myId").textContent = "New text";

🎯 Activity: Interactive Counter

Stage: 1/2 ⏳ In Progress

Create a counter that increases when you click the button.

Count: 0

Lesson 2: Event Listeners & DOM

Learn how to respond to user interactions.

// Add event listener
button.addEventListener('click', function() {
    alert('Button clicked!');
});

// Change styles dynamically
element.style.color = 'red';
element.classList.add('active');

🎯 Activity: Color Changer

Stage: 1/2 ⏳ In Progress

Create buttons that change the background color.

🐙 GitHub & Version Control

Collaborate and manage your code

Lesson 1: Git Basics

Git is a version control system. GitHub is a platform for hosting Git repositories.

# Initialize a repository
git init

# Add files to staging
git add .

# Commit changes
git commit -m "Initial commit"

# Connect to GitHub
git remote add origin https://github.com/username/repo.git

# Push to GitHub
git push -u origin main

🎯 Activity: Simulate Git Workflow

Stage: 1/3 ⏳ In Progress

$

Status: No repository initialized

Lesson 2: GitHub Features

GitHub provides many features for collaboration:

  • Repositories: Store your code
  • Branches: Work on different features
  • Pull Requests: Review and merge code
  • Issues: Track bugs and features

🎯 Activity: Create Your First Repository

Stage: 1/2 ⏳ In Progress

Create New Repository

No repositories yet. Create one above!

🚀 Advanced Topics & Frameworks

Level up your skills with modern frameworks and backend technologies

Lesson 1: Vue.js - Progressive Framework

Vue.js is a progressive JavaScript framework for building user interfaces. It's easy to learn and powerful!

// Vue.js Component
const { createApp } = Vue;

createApp({
  data() {
    return {
      message: 'Hello Vue!',
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  }
}).mount('#app');

🎯 Activity: Build a Vue Counter

Stage: 1/2 ⏳ In Progress

Create a Vue.js reactive counter that updates when you click buttons!

Vue Counter: {{ count }}

Lesson 2: React - Component-Based UI

React is a JavaScript library for building user interfaces, especially single-page applications.

// React Component
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

🎯 Activity: Create a React Component

Stage: 1/2 ⏳ In Progress

Build a React component with state management!

React preview will appear here (simulated)

Lesson 3: PHP - Server-Side Scripting

PHP is a popular server-side scripting language perfect for web development!

<?php
// PHP Basics
$name = "World";
echo "Hello, $name!";

// Functions
function greet($name) {
    return "Hello, " . $name . "!";
}

// Arrays
$fruits = ["apple", "banana", "orange"];
?>

🎯 Activity: PHP Form Handler

Stage: 1/2 ⏳ In Progress

Create a PHP script that processes form data!

Form Simulator

Lesson 4: Laravel - PHP Framework

Laravel is a powerful PHP framework that makes web development elegant and enjoyable!

// Laravel Route
Route::get('/users', function () {
    return User::all();
});

// Laravel Controller
class UserController extends Controller {
    public function index() {
        return view('users.index', [
            'users' => User::all()
        ]);
    }
}

// Blade Template
@foreach ($users as $user)
    <p>{{ $user->name }}</p>
@endforeach

🎯 Activity: Laravel Route Builder

Stage: 1/2 ⏳ In Progress

Create Laravel routes and see them in action!

Route Tester

No routes defined yet. Add routes above!

Lesson 5: Node.js - JavaScript Runtime

Node.js lets you run JavaScript on the server! Build fast, scalable network applications.

// Node.js Server
const http = require('http');

const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/html' });
  res.end('<h1>Hello from Node.js!</h1>');
});

server.listen(3000, () => {
  console.log('Server running on port 3000');
});

// Express.js (Popular Framework)
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello Express!');
});

app.listen(3000);

🎯 Activity: Node.js API Builder

Stage: 1/2 ⏳ In Progress

Create a simple Node.js API endpoint!

API Endpoint Tester

Lesson 6: Common Programming Languages

Explore popular programming languages used in web development and beyond!

🐍 Python

Versatile, readable, great for beginners

# Python
def greet(name):
    return f"Hello, {name}!"

print(greet("World"))

☕ Java

Object-oriented, platform-independent

// Java
public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello World!");
    }
}

🦀 Rust

Fast, safe, systems programming

// Rust
fn main() {
    println!("Hello, World!");
}

🐹 Go

Simple, efficient, concurrent

// Go
package main
import "fmt"

func main() {
    fmt.Println("Hello, World!")
}

🎯 Activity: Language Quiz Challenge

Stage: 1/3 ⏳ In Progress

Test your knowledge of programming languages!

Which language is known for its simplicity and readability?

Score: 0/0