Web Tech Stack

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>

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

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

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>

SASS & SCSS

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.

Show Demo

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

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 of fonts

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 dynamix 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.

<!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. For color testing, visit this website from Juxtopposed to test with color selection.

Try to implement these design: minimal, glass morphic, neobrutalist, grainy, modern

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)

React is a JS library for building UI. React focusing on virtual DOM efficient rendering, and uses state (internal component data) and props (data passed to components) for dynamic data. It is suitable for creating complex web application.

Vue is an open-source JS framework for building single-page application similar to Angular. Vue uses reactivity system that change in data is automatically reflected to UI. Templates is available to bind DOM to Vue instance data.

Features	React	Vue
Learning Curve	Steep	Gentle
Performance	Great on large, complex project	Great on small-medium, simple project
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

Vue

Click here to explore more about Vue

React

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

Hugo (Static)

A framework wrtitten on GO for static content developement and management. It’s very quick to build up. This website is powered by Hugo.

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

Nuxt.js vs Next.js

Features	Nuxt	Next
Parent Framework	Vue	React
Render	Server-side render	Server-side render
Generation	Static	Static
Dev tool	Routing, state management	Routing, state management

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. Vite website

Node.js

Node.js is a JavaScript runtime environment available on backend. It is event driven, non-blocking I/O, fast and lightweight. npm (Node Package Manager) is well known for its vast ecosystem of libraries and module, it install the package globally. While npx runs package without installing them globally.

JS Node.js uses .js file extension, require(), module.exports.

ES Module ES module use .mjsfile extension, import, export. Set "type": "module" in package.json to use ES module if you’re using .js

Run npm init -y to generate package.json that record npm dependencies and metadata

Example of a basic web server using node.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

{
  "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.

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 ...?>

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 and have strong performance
MySQL	Classic SQL database
SQLite	Suitable for smaller database

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

Legacy Note

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

Edit this page on GitHub

Markdown

Responsive Web Design

Docs

Nut17

Title here

Web Tech Stack

Web Structure

JavaScript

CSS Frameworks

Bootstrap

SASS & SCSS

Tailwind CSS

Tailwind CSS

Purge CSS

Font

Icons

Figma

Frontend Frameworks

React vs Vue (Dynamic)

Vue

React

Hugo (Static)

Backend Tools

Typescript

Eslint

Wordpress

Backend Framework

Production

Nuxt.js vs Next.js

Vite

Node.js

Express.js

Express.js

Django

PHP

Database

SQL

NoSQL

Tech Stack

Legacy Note

Web Tech Stack

Web Structure#

JavaScript

CSS Frameworks#

Bootstrap#

SASS & SCSS#

Tailwind CSS#

Tailwind CSS

Purge CSS#

Font#

Icons#

Figma#

Frontend Frameworks#

React vs Vue (Dynamic)#

Vue

React

Hugo (Static)#

Backend Tools#

Typescript#

Eslint#

Wordpress#

Backend Framework#

Production

Nuxt.js vs Next.js#

Vite#

Node.js#

Express.js#

Express.js

Django#

PHP#

Database#

SQL#

NoSQL#

Tech Stack#

Legacy Note#

Web Structure

CSS Frameworks

Bootstrap

SASS & SCSS

Tailwind CSS

Purge CSS

Font

Icons

Figma

Frontend Frameworks

React vs Vue (Dynamic)

Hugo (Static)

Backend Tools

Typescript

Eslint

Wordpress

Backend Framework

Nuxt.js vs Next.js

Vite

Node.js

Express.js

Django

PHP

Database

SQL

NoSQL

Tech Stack

Legacy Note