Unit I: HTML Foundations

Unit II: CSS Styling

Unit III: JavaScript

Units IV-V: Server & Full-Stack

Requirements

• View all students in a responsive table
• Add new students with a form
• Edit student information
• Delete students with confirmation
• Search and filter students
• Mobile-responsive design

Technologies Used

• Frontend: HTML, CSS, Bootstrap 5, JavaScript
• Backend: Node.js, Express
• Database: MySQL
• Communication: REST API + Fetch

Architecture

student-portal/
|-- backend/
|   |-- server.js         # Express + routes
|   |-- config/
|   |   |-- database.js   # MySQL pool
|   |-- models/
|   |   |-- Student.js    # Data model
|   |-- routes/
|   |   |-- students.js   # API routes
|   |-- middleware/
|   |   |-- validate.js   # Input validation
|   |-- .env
|   |-- package.json
|
|-- frontend/
|   |-- index.html        # Main page
|   |-- css/
|   |   |-- style.css     # Custom styles
|   |-- js/
|       |-- api.js        # API service
|       |-- app.js        # UI logic
|
|-- setup.sql             # Database schema
|-- README.md

Schema Design

CREATE DATABASE student_portal;
USE student_portal;

CREATE TABLE students (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    email VARCHAR(150) UNIQUE NOT NULL,
    age INT CHECK(age BETWEEN 15 AND 100),
    course VARCHAR(50) NOT NULL,
    semester INT DEFAULT 1,
    gpa DECIMAL(3,2),
    status ENUM('active', 'inactive',
        'graduated') DEFAULT 'active',
    created_at TIMESTAMP
        DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP
        DEFAULT CURRENT_TIMESTAMP
        ON UPDATE CURRENT_TIMESTAMP
);

CREATE INDEX idx_course
    ON students(course);
CREATE INDEX idx_status
    ON students(status);

Design Decisions

• AUTO_INCREMENT id: Reliable primary key
• UNIQUE email: Prevents duplicates
• CHECK constraint: Validates age range
• ENUM status: Limited valid options
• DEFAULT values: Sensible defaults
• Timestamps: Audit trail
• Indexes: Faster queries on common filters

UI Components

• Navbar: Bootstrap dark navbar with brand
• Dashboard cards: Total, active, GPA stats
• Search bar: Real-time filtering
• Data table: Responsive, sortable
• Add form: With validation
• Edit modal: Bootstrap modal popup
• Delete confirmation: Alert before delete
• Toast notifications: Success/error messages

Bootstrap Classes Used

container, row, col-*
navbar, navbar-dark, bg-dark
card, card-body, card-header
table, table-striped, table-hover
form-control, form-select
btn, btn-primary, btn-danger
modal, modal-dialog
alert, alert-success
spinner-border
d-flex, justify-content-between

JavaScript Architecture

// api.js - API Service Layer
class StudentAPI {
    constructor(baseUrl) {
        this.baseUrl = baseUrl;
    }

    async getAll(search = '') { ... }
    async getById(id) { ... }
    async create(data) { ... }
    async update(id, data) { ... }
    async delete(id) { ... }
}

// app.js - UI Logic Layer
class StudentApp {
    constructor() {
        this.api = new StudentAPI(API_URL);
        this.init();
    }

    init() {
        this.bindEvents();
        this.loadStudents();
    }

    bindEvents() {
        // Form submit
        // Search input
        // Edit/Delete buttons
    }

    async loadStudents() {
        this.showLoading();
        const result = await this.api.getAll();
        this.renderTable(result.data);
    }

    renderTable(students) { ... }
    showAlert(message, type) { ... }
}

HTML Best Practices

• Use semantic tags (header, nav, main, footer)
• Always include alt text on images
• Use proper heading hierarchy (h1-h6)
• Validate your HTML

CSS Best Practices

• Use external stylesheets
• Mobile-first responsive design
• Use CSS variables for themes
• Use Flexbox/Grid for layouts
• Avoid !important

JavaScript Best Practices

• Use const and let, never var
• Use async/await for async code
• Always handle errors (try/catch)
• Validate input on both sides
• Prevent XSS (escape HTML output)

Backend Best Practices

• Use environment variables for secrets
• Prepared statements (prevent SQL injection)
• Connection pooling for databases
• Proper error handling middleware
• Input validation on the server
• Use HTTPS in production

General Best Practices

• Use version control (Git)
• Write clean, readable code
• Comment complex logic
• Keep functions small and focused
• Test on multiple browsers/devices
• Follow the DRY principle

Frontend Mistakes

1. Missing viewport meta tag

<!-- Always include this! -->
<meta name="viewport"
    content="width=device-width,
    initial-scale=1.0">

2. Using inline styles everywhere

<!-- Bad -->
<p style="color:red; font-size:16px;">

<!-- Good -->
<p class="error-text">

3. Not handling API errors

// Bad - no error handling
const data = await fetch(url);

// Good - with error handling
try {
    const response = await fetch(url);
    if (!response.ok) throw new Error('Failed');
    const data = await response.json();
} catch (error) {
    showError(error.message);
}

Backend Mistakes

4. SQL Injection vulnerability

// Bad - string concatenation
const query = `SELECT * FROM users
    WHERE name = '${name}'`;

// Good - prepared statement
const [rows] = await pool.execute(
    'SELECT * FROM users WHERE name = ?',
    [name]
);

5. Hardcoded credentials

// Bad
const password = 'my_secret_123';

// Good - use .env
const password = process.env.DB_PASSWORD;

6. Missing CORS configuration

// Results in: blocked by CORS policy
// Fix: add cors middleware
const cors = require('cors');
app.use(cors());

7. Not validating input

// Always validate before database operations
if (!name || !email) {
    return res.status(400).json({
        error: 'Name and email required'
    });
}

Frontend Path

Backend Path

HTML Topics

• Document structure (DOCTYPE, head, body)
• Semantic tags and their purpose
• Forms: input types, validation
• Tables: structure, colspan, rowspan
• Links, images, lists

CSS Topics

• Selectors: element, class, ID, combinators
• Specificity and cascade
• Box model: margin, padding, border
• Positioning: static, relative, absolute, fixed
• Flexbox and Grid basics
• Media queries and responsive design

JavaScript Topics

• Variables (let, const), data types
• Functions (regular, arrow)
• DOM: querySelector, innerHTML, events
• Arrays and objects
• Fetch API and promises

Backend Topics

• Node.js and npm basics
• Express routes and middleware
• MySQL: CREATE, SELECT, INSERT, UPDATE, DELETE
• REST API design
• SQL injection prevention
• CORS

What You've Accomplished

• Built web pages with HTML5
• Styled them beautifully with CSS3
• Made them interactive with JavaScript
• Created backends with Node.js + Express
• Stored data with MySQL
• Built responsive UIs with Bootstrap
• Connected frontend to backend via REST APIs
• Learned security best practices

Final Advice

1. Build a portfolio - Showcase your work
2. Use Git/GitHub - Version control everything
3. Read documentation - MDN is your best friend
4. Practice daily - Even 30 minutes helps
5. Join communities - Stack Overflow, Discord, Reddit
6. Stay curious - Technology never stops evolving
7. Never stop learning - The journey has just begun!