← Back to Examples

231CSC601T - Complete Course Cheatsheet

Quick reference for all technologies covered in the Web Technologies course.

HTML5 - Structure
Document Structure
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>...</header>
    <nav>...</nav>
    <main>...</main>
    <footer>...</footer>
    <script src="app.js"></script>
</body>
</html>
Common Elements
<!-- Headings -->
<h1> to <h6>

<!-- Text -->
<p>, <span>, <strong>, <em>

<!-- Links & Images -->
<a href="url">Link</a>
<img src="img.jpg" alt="description">

<!-- Lists -->
<ul><li>...</li></ul>  (unordered)
<ol><li>...</li></ol>  (ordered)

<!-- Divisions -->
<div> (block), <span> (inline)

<!-- Semantic -->
<header>, <nav>, <main>,
<section>, <article>, <aside>, <footer>
Forms
<form action="/submit" method="POST">
    <input type="text" name="name" required>
    <input type="email" name="email">
    <input type="password" name="pass">
    <select name="option">
        <option value="1">One</option>
    </select>
    <textarea name="msg"></textarea>
    <button type="submit">Submit</button>
</form>
CSS3 - Styling
Selectors & Box Model
/* Selectors */
element { }     /* h1, p, div */
.class { }      /* .card, .btn */
#id { }         /* #header */
parent child { } /* div p */
parent > child { } /* div > p (direct) */

/* Box Model */
.box {
    width: 200px;
    padding: 20px;
    border: 1px solid #ccc;
    margin: 10px;
    box-sizing: border-box; /* include padding in width */
}

/* Colors */
color: #ff0000;           /* hex */
color: rgb(255, 0, 0);    /* rgb */
color: rgba(0,0,0,0.5);   /* transparent */
color: hsl(0, 100%, 50%); /* hsl */
Flexbox & Grid
/* Flexbox */
.flex-container {
    display: flex;
    justify-content: center;  /* main axis */
    align-items: center;      /* cross axis */
    gap: 10px;
    flex-wrap: wrap;
}

/* Grid */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

/* Responsive */
@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr;
    }
}

/* Positioning */
position: static;    /* default */
position: relative;  /* offset from normal */
position: absolute;  /* relative to parent */
position: fixed;     /* relative to viewport */
position: sticky;    /* scroll-aware */
JavaScript - Interactivity
Basics
// Variables
const name = 'Alice';  // constant
let age = 25;          // can change
// never use var

// Functions
function add(a, b) { return a + b; }
const add = (a, b) => a + b;  // arrow

// Arrays
const arr = [1, 2, 3];
arr.push(4);
arr.map(x => x * 2);   // [2, 4, 6, 8]
arr.filter(x => x > 2); // [3, 4]

// Objects
const user = { name: 'Alice', age: 25 };
user.name;              // 'Alice'
const { name, age } = user; // destructure

// Template Literals
const msg = `Hello ${name}, age: ${age}`;
DOM & Events
// Select elements
document.getElementById('id');
document.querySelector('.class');
document.querySelectorAll('p');

// Modify elements
element.textContent = 'text';
element.innerHTML = '<b>bold</b>';
element.style.color = 'red';
element.classList.add('active');

// Events
button.addEventListener('click', (e) => {
    e.preventDefault();
    console.log('Clicked!');
});

// Fetch API
async function getData() {
    const res = await fetch('/api/data');
    const data = await res.json();
    return data;
}

// POST Request
await fetch('/api/data', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name: 'Bob' })
});
Node.js + Express - Backend
Express Setup
// npm init -y
// npm install express cors dotenv

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());
app.use(express.json());

// GET route
app.get('/api/items', (req, res) => {
    res.json({ data: items });
});

// POST route
app.post('/api/items', (req, res) => {
    const { name } = req.body;
    // ... create item
    res.status(201).json({ data: newItem });
});

// PUT route
app.put('/api/items/:id', (req, res) => {
    const { id } = req.params;
    // ... update item
    res.json({ data: updated });
});

// DELETE route
app.delete('/api/items/:id', (req, res) => {
    // ... delete item
    res.json({ message: 'Deleted' });
});

app.listen(3000);
Middleware & Error Handling
// Custom middleware
app.use((req, res, next) => {
    console.log(`${req.method} ${req.path}`);
    next(); // pass to next handler
});

// Error handling middleware
app.use((err, req, res, next) => {
    console.error(err.stack);
    res.status(500).json({
        error: 'Something went wrong'
    });
});

// Route with async error handling
app.get('/api/data', async (req, res) => {
    try {
        const data = await fetchData();
        res.json(data);
    } catch (error) {
        res.status(500).json({
            error: error.message
        });
    }
});

// Serve static files
app.use(express.static('public'));

// Environment variables
require('dotenv').config();
const port = process.env.PORT || 3000;
MySQL - Database
SQL Commands
-- Create
CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    email VARCHAR(150) UNIQUE
);

-- Insert
INSERT INTO users (name, email)
VALUES ('Alice', 'alice@mail.com');

-- Select
SELECT * FROM users;
SELECT name, email FROM users WHERE id = 1;
SELECT * FROM users ORDER BY name LIMIT 10;

-- Update
UPDATE users SET name = 'Bob' WHERE id = 1;

-- Delete
DELETE FROM users WHERE id = 1;
Node.js + MySQL
// npm install mysql2 dotenv
const mysql = require('mysql2/promise');

const pool = mysql.createPool({
    host: process.env.DB_HOST,
    user: process.env.DB_USER,
    password: process.env.DB_PASSWORD,
    database: process.env.DB_NAME
});

// Prepared statement (SAFE!)
const [rows] = await pool.execute(
    'SELECT * FROM users WHERE id = ?',
    [userId]
);

// Insert
const [result] = await pool.execute(
    'INSERT INTO users (name, email) VALUES (?, ?)',
    [name, email]
);
console.log('ID:', result.insertId);

// NEVER do this (SQL injection):
// `SELECT * FROM users WHERE name = '${name}'`
Bootstrap 5 - UI Framework
Grid System
<!-- CDN -->
<link href="...bootstrap.min.css" rel="stylesheet">

<!-- Grid: container > row > col -->
<div class="container">
    <div class="row">
        <div class="col-12 col-md-6 col-lg-4">
            Responsive column
        </div>
    </div>
</div>

Breakpoints:
xs: <576px  | col-
sm: 576px+  | col-sm-
md: 768px+  | col-md-
lg: 992px+  | col-lg-
xl: 1200px+ | col-xl-
Common Classes
/* Spacing: {property}{sides}-{size} */
m-3, mt-3, mb-3, mx-auto  /* margin */
p-3, pt-3, pb-3, px-3     /* padding */

/* Display & Flex */
d-flex, d-none, d-block
justify-content-center
align-items-center

/* Text */
text-center, text-start, text-end
fw-bold, fst-italic
text-primary, text-danger

/* Background */
bg-primary, bg-dark, bg-light

/* Components */
btn btn-primary btn-lg
card card-body card-header
alert alert-success
table table-striped
form-control form-select
navbar navbar-dark bg-dark

Bookmark this page for quick reference during exams and projects!

← Back to Examples