Full stack Web Development

Full stack web development:

Frontend HTML?
1. HTML overview:

HTML(hyper text markup language) is the backbone of any website. It defines the structure and content of web pages using tags.

Example:

<!DOCTYPE html>

<head>

<title>My First Page</title>

</head>

<body>

<h1>Hello, World!</h1>

</body>

</html>

2. Page structure & boilerplate:
Key tags:

<!DOCTYPE html> - declares HTML5 document.
<html> - root element.
<head> - meta info, title, styles.
<body> - visible content.

Example with structure:

<!DOCTYPE html>

<head>

<title>Advanced HTML</title>

</head>

<body>

<h1>Welcome to My Site</h1>

</header>

<main>

<p>This is the main content.</p>

</main>

</footer>

</body>

</html>

3. Semantic HTML (for SEO and accessibility):

Semantic tags describe the content meaningfully, making your page better for users, search engines, and screen readers.

Common tags:

<header>, <footer>
<main>, <article>, <section>
<nav>, <aside>, <figure>, <figcaption>

Example:

<h2>Blog Post Title</h2>

<p>This is the blog post content.</p>

</article>

4. Advanced forms:

Forms collect input from users, HTML5 adds powerful typed and validation.

Key elements:

<form>, <input>, <select>, <textarea>
Attributes: required, pattern, min, max, step

Example with validation:

<label for="email">Email:</label>

<button type="submit">Submit</button>

</form>

5. Media elements (Image, audio, elements)

Images:

Audio:

Your browser does not support audio.

</audio>

Video:

Your browser does not support video.

</video>

6. Tables for tabular data:

<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

<td>Alice</td><td>30</td>

</tr>

<tr>

</tr>

</tbody>

</table>

7. Accessibility:

Make sites usable for everyone, including screen readers.

Tips:

Use alt attributes on images.
Use landmarks: <main>, <nav>, <aside>
Add aria-* attributes when necessary

Example:

8. Integration with CSS & Javascript:

HTML is static; CSS styles it, JS makes it interactive.

Linking CSS:

Linking JS:

9. Custom Elements and Web Components(advanced):

HTML5 allows creating your own elements with javascript.

Example:

Html

<my-greeting></my-greeting>

// In script.js

class MyGreeting extends HTMLElement {

connectedCallback() {

this.innerHTML = "<h2>Hello from a custom element!</h2>";

}

customElements.define('my-greeting', MyGreeting);

10. Tips for writing Clean HTML:

Use proper indentation and nesting.
Avoid unnecessary <div>S(use semantic tags)

2. What is CSS?

CSS (castecading style sheets) is used to style and layout HTML elements- colors, fonts, positioning, responsiveness, and more.

Example:

<style>

h1 {

color: blue;

font-family: Arial, sans-serif;

}

</style>

2. CSS syntax:

selector {

property: value;

}

Example:

p {

color: #333;

font-size: 16px;

}

3. Ways to add CSS:

Inline

<p style="color:

red;">Inline style</p>

Internal

<style>

p { color: green; }

</style>

External

4. Selectors(Advanced)

Basic selectors

element- p, h1
#id- #header
.class- .menu

Combinators

Descendant: div p
Child: ul > li
Adjacent sibling: h2 + p
General sibling: h2 ~ p

Example

.container > p {

color: navy;

}

5. Box model (Important)

Each HTML is a box:

content
Padding
Border
Margin

Example

div {

padding: 10px;

border: 2px solid black;

margin: 20px;

}

6. Units :

px (fixed)
%, em, rem (relative)
vw, vh (viewport)

Example

.container {

width: 50vw;

padding: 2rem;

}

7. Colors

Names: red, blue
HEX: #f f0000
RGB: rgb(255, 0, 0)
RGBA: rgba( 255, 0, 0, 0.5)
HSL: hsl( 0, 100%, 50%)

8. Fonts & text styling

body {

font-family: 'Roboto', sans-serif;

font-size: 18px;

font-weight: 500;

line-height: 1.6;

text-align: justify;

}

9. Positioning

Static (default)
Relative
Absolute
Fixed
Sticky

Example

.box {

position: absolute;

top: 20px;

left: 50px;

}

10. Flexbox (layout system)

.container {

display: flex;

justify-content: space-between;

align-items: center;

}

Common properties:

flex - direction: row/ column
justify - content: align horizontally
align - items: align vertically

11. Grid (Advanced layout system)

.grid {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 20px;

}

Each item auto-places in the grid.

12. Media Queries (responsive design)

Make your design adapt to screen size.

@media (max-width: 768px) {

.container {

flex-direction: column;

}

13. Pseudo-classes & elements

a:hover {

color: red;

}

p::first-letter {

font-size: 200%;

}

14. Transitions & Animations

Transitions:

.button {

transition: background-color 0.3s ease;

}

.button:hover {

background-color: green;

}

Animations

@keyframes slideIn {

from { transform: translateX(-100%); }

to { transform: translateX(0); }

}

.box {

animation: slideIn 0.5s ease-in;

}

15. CSS Variables(Custom properties)

:root {

--main-color: #3498db;

}

h1 {

color: var(--main-color);

}

16. Advanced: layering & Z-index

.box1 {

position: absolute;

z-index: 10;

}

.box2 {

position: absolute;

z-index: 5;

}

17. Advanced selectors

Attribute selector:

input[type="text"] {

border: 1px solid #ccc;

}

:nth-child(n):

li:nth-child(even) {

background-color: #f0f0f0;

}

18. Best practices

Use external CSS for scalability
Use Semantic HTML with meaningful classes
Avoid using ! important unless needed
Organize styles: layout, components, utilities
Use naming conventions like BEM (.block___element - - modifier)

Bonus: Dark Mode with media query

@media (prefers-color-scheme: dark) {

body {

background-color: #111;

color: #eee;

}

3. What is JavaScript?

JavaScript is a programming language that runs in the browser, letting you add interactivity to websites.

Example:

<button onclick="sayHello()">Click Me</button>

function sayHello() {

alert("Hello, World!");

}

</script>

2. JavaScript syntax variables:

let name = "John";

const age = 25;

var isAdmin = true;

Let- modern, block-scoped
Const- constant, block-scoped
Var- old, function-scoped

3. Data types

String: “hello”
Number: 1 2 3
Boolean: true/false
Array: [1, 2, 3]
Object: { name: “Alice” }
Null / undefined

Example:

let user = {

name: "Alice",

age: 30,

isMember: true

};

4. Functions

Traditional

function greet(name) {

return "Hello " + name;

}

Arrow functions

const greet = name => `Hello ${name}`;

5. DOM Manipulation (Core of frontend JS)

The DOM is your HTML page represented in JavaScript.

Selecting elements:

document.querySelector("h1");

document.getElementById("main");

Changing content:

document.querySelector("#message").textContent = "Updated!";

Changing style:

document.querySelector("p").style.color = "blue";

6. Event handling

<button id="btn">Click</button>

document.getElementById("btn").addEventListener("click", () => {

alert("Button clicked!");

});

</script>

7. Loops & conditions

If statement

if (age > 18) {

console.log("Adult");

} else {

console.log("Minor");

}

Loops

for (let i = 0; i < 5; i++) {

console.log(i);

}

8. Arrays & Array methods

let fruits = ["apple", "banana", "cherry"];

fruits.push("mango"); // add

fruits.pop(); // remove

fruits.forEach(fruit => console.log(fruit));

9. Objects & access

let user = {

name: "Bob",

email: "bob@example.com"

};

console.log(user.name); // Dot notation

console.log(user["email"]); // Bracket notation

10. JSON (JavaScript Object notation)

used to send data between frontend and backend.

let jsonString = JSON.stringify(user);

let parsedUser = JSON.parse(jsonString);

11. Fetch API (AJAX call)

fetch("https://jsonplaceholder.typicode.com/posts")

.then(res => res.json())

.then(data => console.log(data))

.catch(err => console.error("Error:", err));

12. Asynchronous Programming

Promises

let p = new Promise((resolve, reject) => {

setTimeout(() => resolve("Done!"), 1000);

});

p.then(data => console.log(data));

Async/Await

async function loadData() {

try {

let res = await fetch("https://api.example.com");

let data = await res.json();

console.log(data);

} catch (err) {

console.error(err);

}

13. Form handling

<button>Submit</button>

</form>

document.getElementById("myForm").addEventListener("submit", function (e) {

e.preventDefault();

let name = document.getElementById("name").value;

console.log("Name submitted:", name);

});

</script>

14. Local storage

Save data in browser

localStorage.setItem("user", "John");

let user = localStorage.getItem("user");

console.log(user);

15. Classes in JS (OOP)

class Person {

constructor(name) {

this.name = name;

}

greet() {

console.log(`Hello, I’m ${this.name}`);

}

let p1 = new Person("Alex");

p1.greet();

16. ES6 + features (Modern JavaScript)

Destrucring

let { name, age } = user;

Spread operator

let newArr = [...fruits, "grape"];

Template literals

let msg = `Welcome, ${name}!`;

17. Modules (Code Split)

math .js

export function add(a, b) {

return a + b;

}

main .js

import { add } from './math.js';

console.log(add(2, 3));

18. Debugging tools

Console .log( )- check values
Console .error( )- show error
Browser Dev Tools: inspect

—console sources

19. Event Delegation

document.querySelector("#parent").addEventListener("click", (e) => {

if (e.target.tagName === "BUTTON") {

console.log("Clicked:", e.target.textContent);

}

});

20. Best Practices

use const and let, avoid var
Keep JS modular and readable
Avoid Global Variables
Use arrow functions and modern syntax
Handles errors properly with try/catch

4. What is backend?

The backend is that part of a web apps that runs on the server.

It:

Handles request
Talks to databases
Sends response to the frontend
Performs authentication, validation

Node.js + express.js (JavaScript)

What is node.js?

Node.js lets you runs javascript on the server.

What is express.js?

Express is the minimal web framework for node.js to build APIs quickly.

Step-by-step set-up

Initialize project

npm init -y

npm install express

Basic server

// index.js

const express = require('express');

const app = express();

app.use(express.json()); // Middleware to parse JSON

app.get('/', (req, res) => {

res.send('Hello from Express!');

});

app.listen(3000, () => {

console.log('Server running on http://localhost:3000');

});

REST API Example

const users = [

{ id: 1, name: "Alice" },

{ id: 2, name: "Bob" }

];

app.get('/users', (req, res) => {

res.json(users);

});

app.post('/users', (req, res) => {

const newUser = { id: Date.now(), ...req.body };

users.push(newUser);

res.status(201).json(newUser);

});

Midleware example

function logger(req, res, next) {

console.log(`${req.method} ${req.url}`);

next();

}

app.use(logger);

Connect to mangoDB (with Mongoose)

Bash

npm install mongoose

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/myapp');

const UserSchema = new mongoose.Schema({ name: String });

const User = mongoose.model('User', UserSchema);

Django (python)

6. What is Django?

Django is a high level python web framework that lets you build secure, scalable apps fast.

Step-by-step setup

Install Django

pip install django

Stat project

django-admin startproject mysite

cd mysite

python manage.py startapp api

Basic view

# api/views.py

from django.http import JsonResponse

def hello(request):

return JsonResponse({'message': 'Hello from Django!'})

Connect URL

# mysite/urls.py

from django.contrib import admin

from django.urls import path

from api.views import hello

urlpatterns = [

path('admin/', admin.site.urls),

path('hello/', hello)

]

Djanbo REST Framework

Bash

pip install djangorestframework

Python

# api/views.py

from rest_framework.decorators import api_view

from rest_framework.response import Response

@api_view(['GET'])

def users(request):

return Response([{'id': 1, 'name': 'Alice'}])

Models and databases:

Python

# api/models.py

from django.db import models

class User(models.Model):

name = models.CharField(max_length=100)

Bash

python manage.py makemigrations

python manage.py migrate

Bonus: full stack integration

Your can:

Use express.js or Django for backend
Use HTML/CSS/JS, React, or Vue for frontend
Connect using REST APIs or GraphQL.