Advanced Topics - Web Dev Learning Hub

📝 Vue.js - Progressive Framework

Build reactive user interfaces with ease

Lesson 1: Vue.js Basics

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 }}

⚛️ React - Component-Based UI

Build powerful user interfaces with components

Lesson 1: React Components

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)

🐘 PHP - Server-Side Scripting

Powerful server-side language for web development

Lesson 1: PHP Basics

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

🎨 Laravel - PHP Framework

Build elegant applications with MVC architecture

Lesson 1: Laravel MVC Architecture

Laravel follows the Model-View-Controller (MVC) pattern. Let's understand how it works:

📦 Model

Represents data and business logic. Interacts with the database.

👁️ View

What the user sees. The presentation layer (Blade templates).

🎮 Controller

Handles user input, processes data, and returns views.

// Model (app/Models/User.php)
class User extends Model {
    protected $fillable = ['name', 'email'];
}

// Controller (app/Http/Controllers/UserController.php)
class UserController extends Controller {
    public function index() {
        $users = User::all(); // Get data from Model
        return view('users.index', ['users' => $users]); // Return View
    }
}

// View (resources/views/users/index.blade.php)
@foreach ($users as $user)
    <p>{{ $user->name }}</p>
@endforeach

// Route (routes/web.php)
Route::get('/users', [UserController::class, 'index']);

🎯 Activity: Build a Laravel MVC Application

Stage: 1/4 ⏳ In Progress

Create a complete MVC application for managing products! Follow the steps below.

Create the Product Model

Models represent your database tables. Create a Product model with name, price, and description fields.

Create the ProductController

Controllers handle requests and return responses. Create methods to list and show products.

Create the Blade View

Views display data to users. Create a Blade template to show products.

Define Routes

Routes connect URLs to controller methods. Define routes for your product pages.

🎬 Live Preview

Complete all MVC components to see the preview!

⚡ Node.js - JavaScript Runtime

Run JavaScript on the server

Lesson 1: Node.js Basics

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

🌍 Common Programming Languages

Explore popular programming languages

Lesson 1: Language Showcase

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