Key Topics ···

Provides the basic structure of sites,

which is enhanced and modified by other
HTML technologies like CSS and JavaScript.

Used for styling HTML elements on the

web page, making the user interface
CSS visually appealing.

Makes websites interactive and dynamic,

JavaScript enhancing the user experience.

A platform and framework for building

client-side single-page applications using
HTML and TypeScript, offering a
comprehensive solution with tools for
Angular routing, forms, HTTP client, and more.

Front-End (Client-Side) A library for building user interfaces,

particularly single-page applications where
React you need a fast, interactive user experience.

CSS preprocessors that allow developers

to write cleaner and more efficient code
with functionalities not available in pure
SASS/LESS CSS.

Modern CSS technologies for designing

flexible and complex layouts with less
Flexbox/CSS Grid effort.

An approachable, versatile, and

performant JavaScript framework for
Vue building UIs and single-page applications.

Allows developers to use JavaScript on

the server-side, making it possible to
build a full application with a single
Node.js programming language.

A minimal and flexible Node.js web

application framework that provides a
robust set of features for web and mobile
Express applications.
1

A lightweight WSGI web application

framework in Python, easy to get started
Back-End (Server-Side)
with but powerful enough for complex
Flask applications.

A high-level Python framework that

encourages rapid development and
clean, pragmatic design, ideal for building
Django scalable web applications.

PHP

A NoSQL database that stores data in

flexible, JSON-like documents, making
data integration for certain types of
MongoDB applications faster and easier.

An advanced, open-source object-

relational database system that uses and
Databases extends the SQL language combined
with many features that safely store and
PostgreSQL scale complicated data workloads.
STACK - Web Dev
MySQL

Enable communication between different

software applications, allowing them to
API Interaction API exchange data and functionalities.

Jest
1
Testing
Mocha
1

Docker
1

Deployment and Containers Heroku

1

Vercel
1

Git
1
Version Control
GitHub
1

Context API
1
State Management
Redux
1

mongo

react
1
MERN Stack
nodejs
1

express

MongoDB

Angular
MEAN Stack
Express.js

Node.js

MongoDB

Vue.js
YOU CAN CHOOSE STACK MEVN Stack
Express.js

Node.js

Linux

Apache
LAMP Stack
MySQL

PHP (or Python/Perl)

PostgreSQL
FULL STACK WEB
React
DEVELOPMENT PERN Stack
Express.js

Node.js

It connects millions of computers globally, forming a network

Understanding the Internet

which any computer can communicate with any other computer as long
as they are both connected to the internet.

is a way of accessing information over the medium of the internet

The World Wide Web (WWW)

It is an information system where documents and other web
resources are identified by Uniform Resource Locators (URLs)

Every device connected to the internet is assigned a unique number known as an

Internet Protocol (IP) address
IP Addresses
Understanding the Internet Example: An IP address looks like this: 192.168.1.1.

Since remembering numbers can be difficult, DNS translates domain

names (like www.example.com)

DNS (Domain Name System)

Example: Typing www.example.com into your browser sends a request to a
DNS server to fetch the IP address associated with that domain.

Staying safe online involves being cautious about the information you share, knowing who
you're interacting with, and understanding the security of the websites you visit.
Internet Safety
Always look for HTTPS in the URL to ensure a secure connection.

The journey begins when a URL (Uniform Resource Locator) is typed into a web browser. This URL
Entering the URL specifies the address of a web resource on the internet.

The browser initiates a DNS (Domain Name System) query to translate the domain name into an IP
DNS Lookup address, which identifies the server where the website is hosted.

With the IP address identified, the browser sends an HTTP (Hypertext Transfer Protocol) request
to the server. If the website is secured with SSL/TLS, this request is sent over HTTPS (HTTP
Browser Sends Request Secure), encrypting the data exchanged to enhance security.
How Websites Work
The server receives the request, processes it, and then sends back an HTTP response,
containing the requested webpage data, status of the request, and possibly a redirection to
Server Processes Request another URL if the resource has moved.

Once the browser receives the data, it starts rendering the webpage. HTML is read first, followed
Browser Renders the Webpage by CSS for styling, and JavaScript for interactive elements, producing the webpage we see.

These are computer systems that store, process, and deliver web pages to users. They handle
incoming requests from browsers and respond with the appropriate content.
Web Servers
Examples include Apache and Nginx.

Web hosting refers to the service of providing storage space for a website on a server,
making it accessible via the internet.
Introduction to Web Servers and Hosting
Multiple websites are stored on the same
Hosting Shared Hosting server, sharing resources.

A server hosts only one website, offering

Types Dedicated Hosting more control and resources.

Websites are hosted across a network of

connected virtual and physical cloud
Cloud Hosting servers, offering scalability and reliability.

Version Control and the Importance of Git 10

Visit the Visual Studio Code website.

Download the version compatible with

code editor (e.g., Visual Studio Code) your operating system.

Download and install Follow the installation prompts.

Google Chrome

Live Server: Provides a quick

development live server with live
browser reload capability.

Prettier: An opinionated code formatter

that supports many languages and
integrates with most editors.

ESLint: A tool for identifying and

Development Environment Setup reporting on patterns found in
Extensions for Web Development: ECMAScript/JavaScript code.

Css Peek

Material Theme

ES7/React Snippets
Ex
Configuring the editor with essential extensions for web Emmet
development (e.g., Live Server, Prettier).
Color highlight

Bracket pair colorizer

Open VS Code.

Go to the Extensions view by clicking on

the square icon on the sidebar or
Installation of Extensions pressing Ctrl+Shift+X.

Search for the extensions mentioned

above and click 'Install'.

Next Day 46