🧠 Web Development – Beginner
Notes
1. Introduction to Web Development
● Definition: Web development is the process of building, creating, and
maintaining websites and web applications that run on the internet.
Type Focus Key Role Example Technologies
Front-end What users see and User Interface HTML, CSS, JavaScript
interact with (UI)
(Client-side)
Back-end The logic, databases, Server Logic & [Link], Python, PHP
and servers that power Data
the front-end Management
(Server-side)
Full-stack A combination of both Handles the All of the above
front-end and back-end entire process
⭐ Key Takeaway: Web development turns ideas into interactive, accessible online
experiences.
2. How the Web Works (The Request-Response
Cycle)
Step-by-Step:
1. You type a website URL(e.g.,
[[Link]]([Link] in your browser.
2. The browser sends a request to the web server using the HTTP/HTTPS protocol.
3. The server locates the requested resource (file or data).
4. The server sends the response (usually HTML, CSS, JS) back to the browser.
5. The browser renders the webpage on your screen.
HTTP vs. HTTPS
Feature HTTP HTTPS
Meaning HyperText Transfer HyperText Transfer Protocol
Protocol Secure
Security Data sent in plain text Data is encrypted using an
SSL/TLS certificate.
An SSL/TLS(Secure Sockets
Layer/Transport Layer
Security)certificate is a
digital certificate that
establishes an encrypted
connection between a
browser and a website's
server, ensuring data is
transmitted privately and
securely
Port 80 443
Used For Non-sensitive websites Secure websites ()
⭐ Key Takeaway: HTTPS protects user data from interception and ensures
authenticity.
3. Introduction to Full-Stack Development
Definition: Full-stack development involves working on both front-end (user
interface) and back-end (server logic) parts of a web project.
The Stack Components
● Front-end (Client-side):
○ Languages: HTML, CSS, JavaScript
○ Frameworks/Libraries: React, [Link], Angular
● Back-end (Server-side):
○ Languages: [Link], Python (Django/Flask), PHP, Java
○ Frameworks: [Link], Laravel, Spring
● Database: (For storing and organizing data)
○ Relational (): MySQL, PostgreSQL
○ Non-relational (): MongoDB, Firebase
Basic Tools for Development
1. Code editor (VS Code)
2. Browser developer tools (Inspect Element)
3. Git & GitHub for version control
4. Terminal/Command line
⭐ Key Takeaway: A full-stack developer handles everything from the user interface
to server logic and data storage.
4. Website vs. Web Application
Feature Website Web Application
Definition Collection of static or Interactive software
informational pages accessible through a browser
Interactivity Mostly read-only (low High user interaction (doing
user input) tasks, transactions)
Example Blog, portfolio site Facebook, Gmail, Netflix
Backend Logic Minimal Complex server-side logic
Database Use Optional Essential (to store user
data/state)
⭐ Key Takeaway: Websites inform; web applications interact (and perform
tasks).
5. Introduction to Web Security
● Definition: Protecting websites and applications from unauthorized access,
data breaches, or attacks.
Basic Security Principles ( 🔒 Essential)
● Authentication: Confirming user identity (e.g., password check).
● Authorization: Controlling user access rights (e.g., is this user an ’admin’?).
● Encryption: Protecting data during transmission (HTTPS).
● Validation: Checking all user input (never trust user data).
● Least Privilege: Giving the minimum access necessary for a user/system to
function.
⭐ Key Takeaway: Security must be built into every stage of development, not
added later.
6. Common Web Attacks and Prevention
Attack Type Description Prevention
Brute Force Attack Automated trial of many Use strong passwords,
passwords until one limit login attempts,
works and enable 2FA
Phishing Fake websites/emails Educate users, verify
tricking users into domains, and use
revealing data anti-phishing tools
SQL Injection Malicious commands Use prepared
inserted through input statements, validate
fields inputs, and sanitize
data
⭐ Key Takeaway: Always validate inputs and use secure coding practices.
7. Web Hosting and Domain Name
Web Hosting
● What it is: A service that stores your website files on a server so users can
access them online.
● Types: Shared Hosting, Dedicated Hosting, Cloud Hosting (AWS, Google Cloud).
Domain Name
● What it is: The human-readable address of your website (e.g.,
[[Link]]([Link]
● How it works: Registered through domain registrars (GoDaddy, whogohost)
and linked to your hosting server via DNS (Domain Name System).
⭐ Key Takeaway: Hosting = where your website lives; Domain = how users find
it.
8. Web Overhauling
● Definition: The process of updating, redesigning, or optimizing an existing
website to improve performance, security, and user experience.
When to Overhaul:
● Outdated design or technology
● Slow performance
● Poor ranking
● Security vulnerabilities
Overhaul Steps:
1. Audit the current website (find the weak spots).
2. Redesign or refactor code (improve the structure).
3. Optimize performance and.
4. Test responsiveness and accessibility.
5. Deploy the updated version.
⭐ Key Takeaway: Overhauling keeps your website modern, secure, and
user-friendly.