Web Development

Web Tech Stack

Overview of modern web development technologies covering from HTML, CSS, JS, frameworks, and backend tools.

Web Structure

Modern website uses HTML (HyperText Markup Language) to define the structure of webpage, CSS (Cascading Style Sheets) used to style and layout HTML elements. JS (JavaScript) allows you to make a webpage interaction.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Title</title>
    <style> /* CSS styles for this file */</style>
    <link rel="stylesheet" href="example.css"> <!-- External CSS link -->
</head>
<body>
    <h1>This is a Header</h1>
    <p>This is a paragraph. Html are made of element with tags, they may have some attribute declared inside the tags<>. id attribute is used to uniquely give an id to an elements, while class attribute is used to groups elements. </p>

    <button id="button1" class="buttonClass" >Click Me!</button>

    <script></script> <!-- Internal JS script -->
    <script src="example.js"></script> <!-- External JS link -->
</body>
</html>

body {
    font-family: Arial, sans-serif;
}
h1 {
    color: green;
}
#button1 {
    color: gray;
}
.buttonClass {
    background-color: green;
}

// Declaring variables
var x = 5;        // Global or function-scoped
let y = 10;       // Block-scoped (good practice)
const z = 15;     // Constant value, cannot be changed

// Function declaration
function sayHello(name) {
    console.log("Hello " + name + "!");
    return true;
}
sayHello("User");

// Anonymous Function
let multiply = function(a, b) { return a * b; };
console.log(multiply(5, 3)); // Outputs: 15

// Arrow Function
let divide = (a, b) => a / b;
console.log(divide(10, 2)); // Outputs: 5

However, coding from scratch is less effective. But there is lots of framework with many functionalies and feature to be introduced in this site.

JavaScript

Click here to understand basics of JavaScript

CSS Frameworks

Some tools to enhance the quality and productivity of CSS

Bootstrap

A simple and quick developement CSS framework for easy designing by adding predefined bootstrap class such as buttons, styles, layout on the html element class attribute. Visit Bootstrap website for more info and customization. Add the following source in html to start using bootstrap.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Responsive Web Design

Click here to explore more about responsive web design with Bootstrap

SASS & SCSS

SASS

SASS (Syntactically Auwsome Style Sheets) is a CSS extension to add more functionality to CSS, and needs to compile to CSS. SASS have similar syntax to python. While SCSS (Sassy SASS) is a syntax of SASS similar to Java. The key feature are variables, nesting, mixins (bundle some properties), inheritance, mathematics operations and partials (multiple files). Below are the example page and code.

Legacy Demo Unavailable

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>SCSS and Sass Example</title>
      <link rel="stylesheet" href="styles.css">
  </head>
  <body>
      <div class="container">
          <header class="header">
              <h1>Demo</h1>
          </header>
          <div class="content">
              <p>This is a demo for SCSS and Sass features.</p>
              <button class="button">Primary Button</button>
              <button class="secondary-btn">Secondary Button</button>
          </div>
          <footer class="footer">
              <p>&copy; 2024 Nut17</p>
          </footer>
      </div>
  </body>
  </html>


/* Generated CSS */
.button, .secondary-btn {
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  border-radius: 5px;
  text-transform: uppercase;
}
.button:hover, .secondary-btn:hover {
  background-color: #217dbb;
}

.secondary-btn {
  background-color: #2ecc71;
}
.secondary-btn:hover {
  background-color: #25a25a;
}

.button, .secondary-btn {
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  border-radius: 5px;
  text-transform: uppercase;
}
.button:hover, .secondary-btn:hover {
  background-color: #217dbb;
}

.secondary-btn {
  background-color: #2ecc71;
}
.secondary-btn:hover {
  background-color: #25a25a;
}

body {
  font-family: Helvetica, sans-serif;
  background-color: #e1f0fa;
  margin: 0;
  height: 100vh; /* Make sure the body takes the full height of the viewport */
  display: flex;
  justify-content: center;
  align-items: center;
}/*# sourceMappingURL=styles.css.map */

/* From styles.scss */
@import 'variables';  /* From _variables.scss */
@import 'mixins';     /* From _mixins.scss */
@import 'buttons';    /* From _buttons_.scss */
@import 'layout';     /* From _layout_.scss */

body {
  font-family: $font-stack;
  background-color: lighten($primary-color, 40%);
  margin: 0;
  height: 100vh; /* Make sure the body takes the full height of the viewport */

  @include flex-center;
}

/* From _variables.scss  */

$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-stack: Helvetica, sans-serif;
$base-padding: 10px;

/* From _mixins.scss */

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

/* From _buttons_.scss */

.button {
  padding: $base-padding 20px;
  background-color: $primary-color;
  color: white;
  @include border-radius(5px);
  text-transform: uppercase;

  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

.secondary-btn {
  @extend .button;
  background-color: $secondary-color;
  
  &:hover {
    background-color: darken($secondary-color, 10%);
  }
}

/* From _layout_.scss */

.button {
  padding: $base-padding 20px;
  background-color: $primary-color;
  color: white;
  @include border-radius(5px);
  text-transform: uppercase;

  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

.secondary-btn {
  @extend .button;
  background-color: $secondary-color;

  &:hover {
    background-color: darken($secondary-color, 10%);
  }
}

/* From styles.sass */

@import variables
@import mixins
@import buttons
@import layout

body
  font-family: $font-stack
  background-color: lighten($primary-color, 40%)
  margin: 0


/* From _variables.sass */

$primary-color: #3498db
$secondary-color: #2ecc71
$font-stack: Helvetica, sans-serif
$base-padding: 10px

/* From _mixins.sass */

=flex-center
  display: flex
  justify-content: center
  align-items: center

=border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius: $radius
  border-radius: $radius

/* From _buttons_.sass */

.button
  padding: $base-padding 20px
  background-color: $primary-color
  color: white
  +border-radius(5px)
  text-transform: uppercase

  &:hover
    background-color: darken($primary-color, 10%)

.secondary-btn
  @extend .button
  background-color: $secondary-color

  &:hover
    background-color: darken($secondary-color, 10%)

/* From _layout_.sass */

.container
  width: 100%
  padding: $base-padding

  .header
    +flex-center
    height: 100px
    background-color: $primary-color
    color: white

  .content
    display: flex
    flex-direction: column
    padding: $base-padding * 2

  .footer
    height: 50px
    text-align: center
    background-color: $secondary-color
    padding: $base-padding

Tailwind CSS

A optimized and lightweight CSS framework with highly customizable developement and more configuration space than Bootstrap. Tailwind CSS does not impose a predefined style for components, but they have a utilities class to help building components. Tailwind also have 'purge' feature to remove unused CSS.

Tailwind CSS

Click here to explore more about TailwindCSS

Purge CSS

PurgeCSS

A tool to remove unused CSS. Visit PurgeCSS to learn how to use. Build tools like PostCSS or TailwindCSS can configure and automate the purging of CSS.

npm install -g purgecss
purgecss --css styles.css --content index.html --output purified.css

Font

Fonts-families tell what font type to be used. Font-weight defind the thickness of the font. Font-styles are like italic, underline, etc.

Font Family	Characteristics
Serif	Classic, traditional official fonts
Sans-serif	Modern, simple fonts
Monospace	Every character have same width
Cursive	Cursive writing

Scaling units

Unit	Description	Example
Pixel	The absolute pixel size	16px
Em	Relative unit based on parent element	1.5em
Rem	Relative to root element	1.5 rem
Percentage	Relative to the parent element	50%
Viewport	1 unit is the 1% of the browser's visible window	3vw(width); 4vh(height)
Points	1 points is 1/72 inch used in traditional printing media	12pt

The font size represent the height of the character from the top to the bottom of the part. IT industry uses combination of rem for consistenst typography across pages and vw for large dynamic text that adapt screen size. Default of html font size is 16px.

Below shows an example using Google Fonts

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Fonts Example</title>
    <!-- Link to Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Lobster&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Roboto', sans-serif;
        }
        h1 {
            font-family: 'Lobster', cursive; /* Use Lobster font */
            font-size: 48px;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Website!</h1>
    <p>The title uses Lobster font while paragraph uses Roboto font </p>
</body>
</html>

Icons

Discover amazing icon from FontAwesome and embed into web.

fontawesome-example.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Awesome with Custom Styles</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        .icon {
            margin: 15px;
        }
        /* Custom styles for different icons */
        .fa-home {
            color: #4CAF50; /* Green */
            font-size: 2em;
        }
    </style>
</head>
<body>
    <i class="fas fa-home icon"></i>    <!-- Home icon with custom styles -->
</body>
</html>

Figma

Figma is a web application for interface design. Making layout with autolayout, variable. However, the website need to be coded manually by looking at the design information. Learn more about it here

For quick web UI/UX design tutorial, watch this and for color testing, visit this website .

Frontend Frameworks

Frontend Frameworks provide better way to make website efficiently, dynamically, and consistent.

Static Site	Dynamic Site
Website consisting only HTML, CSS, JS	Interacts with backend

React vs Vue (Dynamic)

Both are open-source java library for building frontend application, focusing on dynamic UI and data changes. Vue is inspired by Angular.

Features	React	Vue
Learning Curve	Steep	Gentle
Syntax	JSX (Complicated)	HTML (Cleaner)
Performance	Great on large, complex project	Great on small-medium project, single page application
State Management	Using hooks	Using reactive data (Pinia)
Data Binding	One-way data binding (parent to child)	Two-way data binding
Community	Vast and mass support and supported by Facebook	Growing Rapidly
Larger Framework	Next.js	Nuxt.js

Vue

Click here to explore more about Vue, Nuxt.js framework

React

Click here to explore more about React, Next.js framework and web developement concepts

Hugo (Static)

Hugo

A framework wrtitten on GO for static content developement and management. It's very quick to build up.

Backend Tools

Typescript

A language derived from javascript to deal with variable type consistency and adds Java programming features like OOP, generics, enum, union and intersection types. Typescript can be compiled to javascript. Tyepscript is suitable for developing and debugging huge JS projects. Visit Typescript website to learn more.

TypeScript Code

// TypeScript Example: Person and Employee Management

// Define a type alias for a string or number
type ID = string | number;

// Interface for an Employee
interface Employee {
  id: ID;
  name: string;
  age: number;
  position: string;
  displayInfo(): string;
}

// Class for a Person
class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet(): string {
    return `Hello, my name is ${this.name}, and I am ${this.age} years old.`;
  }
}

// Class Employee that extends Person and implements Employee interface
class FullTimeEmployee extends Person implements Employee {
  id: ID;
  position: string;

  constructor(id: ID, name: string, age: number, position: string) {
    super(name, age);
    this.id = id;
    this.position = position;
  }

  // Implementation of displayInfo method from Employee interface
  displayInfo(): string {
    return `Employee ID: ${this.id}, Name: ${this.name}, Position: ${this.position}`;
  }
}

// Function to print a person's greeting
function printGreeting(person: Person): void {
  console.log(person.greet());
}

// Create an instance of FullTimeEmployee
const employee: FullTimeEmployee = new FullTimeEmployee(101, "John Doe", 28, "Software Engineer");

// Use the methods
printGreeting(employee); // Output: Hello, my name is John Doe, and I am 28 years old.
console.log(employee.displayInfo()); // Output: Employee ID: 101, Name: John Doe, Position: Software Engineer

Eslint

A tool to identifying and fixing common issue in JavaScript on syntax error, potential bugs and code style

Wordpress

A full-stack online web CMS (Content Management System). Build website with templates easily without coding.

Backend Framework

Server-Side Rendering	Client-Side Rendering
HTML generated at server	HTML generated at client
Faster initial load, better SEO (Search Engine Optimization)	Slower initial, faster transition between pages
Suitable for content-heavy website, SEO-cricital apps	Highly interactive, dynamic apps

	Static Site	Dynamic Site
Description	A website consisting only of HTML, CSS, and JavaScript files with no backend	A website that interacts with a backend for features like APIs or databases
Hosting Platform	Netlify, Vercel, GitHub Pages, Firebase Hosting, AWS S3 + Cloud Front	Netlify, Vercel, Heroku, Render, AWS (EC2, Elastic Beanstack, Lambda)
Frameworks	React(Vite), Vue(Vite), Next.js, Nuxt.js, Hugo	Vue, React, Angular, Svelte, Node.js, Python, PHP Laravel, Ruby on Rails

A backend web server is used to manage client request (Apache or Ngnix). Visit production to learn more on how to make website available to public.

Production

Click here to learn more about hosting platform

Vite

A fast, modern build tool and development server for JavaScript and TypeScript projects. It focuses on lightning-fast cold starts and efficient bundling for production. It can handle CSR, SSR, SSG, Dynamic Rendering. Vite website

Nitro

Nitro is an open-source TypeScript server engine, largely known as the backend driving Nuxt 3. Works with Vite to handle the backend/API side of a full-stack project. Works anywhere (Node.js, Bun, Deno, Cloudflare Workers), Zero-Config: Automatically handles routing, caching, and deployment presets.

Node.js

Node.js is a JavaScript runtime environment available on backend. It is event driven, non-blocking I/O, fast and lightweight.

Tool	Description
`npm` (Node Package Manager)	Well known for its vast ecosystem of libraries and module, it installs packages globally. For beginner, small projects.
`npx`	Runs package without installing them globally
`pnpm`	A fast, disk-space-efficient package manager. It only stores one copy of a package. Good for large projects.
`yarn`	A fast, reliable, and secure package manager using package lock. Suitable for deteministic local machine. Might not suitable for older tool compatibility

Node.js uses .js file extension, require(), module.exports.
ES module use .mjsfile extension, import, export. Set "type": "module" in package.json to use ES module if you're using .js

Commands	Description
`npm init -y`	Generate `package.json` that record npm dependencies and metadata
`npm run dev`	Runs the development server
`npm run generate`	Generates a static site in `.output/public` folder
`npm run build`	Creates a production-ready Node.js server in `.output` folder
`npm run start`	Runs the production server
`npm run preview`	Preview the production build locally
`npx serve .output/public`	Preview the static site locally

server.js

// Import the built-in modules
const http = require('http');
const fs = require('fs');
const path = require('path');
const PORT = 3000;
const FILE_PATH = './picture.jpg';

// Create an HTTP server
const server = http.createServer((req, res) => {
  const filePath = path.join(__dirname, FILE_PATH);
  fs.readFile(filePath, (err, data) => {
    if (err) {
      res.writeHead(404);
      res.end('File not found!');
      return;
    }
    // Browser will allow request made to different domain
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT");
    res.setHeader("Access-Control-Allow-Headers", "Content-Type");
    res.writeHead(200, { 'Content-Type': 'image/jpg' });
    res.end(data);
  });
});

// Define a port and start the server
server.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}`);
});

Run the server using this command

node server.js

To run multiple server at same time

package.json

{
  "scripts": {
    "start:hugo": "hugo server",    // Replace hugo with your actual package
    "start:node": "node server.js", // Replace "server.js" with your actual Node server file name
    "start": "concurrently \"npm run start:hugo\" \"npm run start:node\""
  }
}

Express.js

Express.js is a minimal web framework for Node.js, designed to simplify building web applications and APIs.

Express.js

Explore how Express.js works!

Django

Django is a high-level Python web framework that enables rapid development of secure and maintainable web applications. Comes with built-in admin panel, and user authentication. Django have ORM (Object-Relational Mapping) allowing developers work with database without writing raw SQL and uses MVT architecture for it's software design pattern.

Model: Represents the data structure and database schema. It defines the shape of the data and handles database queries via Django's ORM.
View: Handles the logic for what data is presented to the user. Views fetch data from models and send it to templates.
Template: Responsible for rendering the final HTML that the user sees. Templates receive data from views and format it for display.

PHP

PHP (Hypertext Preprocessor) is a popular, open-source server-side scripting language designed primarily for web development. It is widely used to create dynamic and interactive web pages. PHP code is executed on the server, and the result is sent back to the client as plain HTML. PHP works by embedding PHP code within HTML using <?php ...?>

PHP

Explore how PHP works!

Database

A database used to store datas and can be hosted on different server.

SQL

SQL (Structured Query Language) databases are structured database using tables with rows and columns to store data, and use keys to refer to other table for relation.

SQL Databases	Feature
PostgreSQL	Open-sourced supporting relational and object-oriented feature, nosql and have strong performance. Industry standard for relational database.
MySQL	Classic SQL database
SQLite	Suitable for smaller projects and edge devices

NoSQL

NoSQL Databases are suitable for unstructured data. Often used for real-time and distributed system.

NoSQL Databases	Feature
MongoDB	For document
Firestore	Google cloud
Redis	Key-value
Neo4j	Graph database

Tech Stack

A tech stack refers to a set of tools, programming languages, and technologies that work together to build digital products or solutions such as websites, mobile, and web apps. Frontend tech stack is the client-side appplication such as visual appereance. Backend is the server-side software developement.

Tech Stack	Tech	Description
LAMP	Linux, Apache, MySQL, PHP	Cost efficiency, flexibility, performance
MEAN	MongoDB, Express.js, Angular, Node.js	JS focused, open source, fast
MERN	MongoDB, Express.js, React, Node.js	MEAN with React as frontend
MEVN	MongoDB, Express.js, Vue, Node.js	MEAN with Vue as frontend
ASP.NET	ASP.NET MVC, IIS, Angular, SQL, Azure	For Windows
Python	Python, Django	Easy to use

SVG sourced from Iconduck, techicons, svgrepo.com. aws-icon

docs.editcommon.ordocs.report

Native Apps

Quick note for native apps concept including PWA, Hybrid, and Cross-Platform frameworks.

Responsive Web Design

Principles of Responsive Web Design (RWD), CSS Flexbox, and Bootstrap layoutting.