WEB
DEVELOPME
NT
MAHNOOR FAZ
TOPIC
WEB DEVELOPMENT
WEB DESIGNING
EDITOR/IDE
VS CODE
HTML INTRO
WHAT IS TAG+ELEMENT
What is web development
Web development is the process of creating, building, and maintaining websites or
web applications that run on the internet.
Main Parts of Web Development
1️⃣ Front-End (Client-Side)
This is the part of the website the user can see and interact with.
Think of it like the face of a shop – everything you see in front.
Technologies used:
HTML – Creates the structure (headings, paragraphs, images)
CSS – Adds styling (colors, layout, design)
JavaScript – Adds interactivity (buttons, animations, dynamic content)
🖧 2️⃣ Back-End (Server-Side)
This is the behind-the-scenes part of the website.
Users cannot see it, but it makes everything work.
What it does:
•Handles business logic (what happens when you click submit)
•Processes data (e.g., saving your form details)
•Connects to the database and sends results back to the front-end
Technologies used:
•Programming languages like PHP, Python, Node.js, Java, C#
•Frameworks like Express.js, Django, Laravel
3️⃣ Database
This is where all the data is stored permanently.
Think of it as the warehouse where all products or information are
kept.
Examples of data stored:
•Usernames & passwords
•Product details (price, name, description)
•Blog posts & comments
Technologies used:
•SQL Databases: MySQL, PostgreSQL
•NoSQL Databases: MongoDB, Firebase
Putting It All Together (Simple Flow)
1.Front-end → User clicks "Login" button
2.Back-end → Checks data & processes logic
3.Database → Verifies if username & password
are correct
4.Back-end → Sends response (success or error)
5.Front-end → Shows message to user ("Welcome,
Mahnoor!")
DIFFERENCE
Web Designing Web Development
•ocuses on functionality & coding of the
website.
•Focuses on look & feel of the website (UI/UX).
•Uses HTML, CSS, JavaScript, Backend
•Uses HTML, CSS, Canva, Figma, Photoshop
languages, Databases.
(for mockups).
•Builds interactive features & logic
•Decides colors, layout, fonts, images.
(forms, login, data storage).
•Goal: Make website beautiful, user-friendly,
•Goal: Make website work properly.
responsive.
•Example: Making that landing page
•Example: Designing a landing page layout.
clickable, functional, and connected to
database.
Simple Way to Remember:
Designers make the website look good
Developers make the website work well
Code Editor
A code editor is a simple tool where you write and edit code.
It’s like Notepad but made for programming.
Examples:
VS Code (most popular)
Sublime Text
Atom
Features:
Syntax highlighting (colors for code)
Auto-completion (helps you write faster)
Lightweight & easy to use
Use it when: You just want to write simple code quickly (HTML, CSS, JS).
IDE (Integrated Development
Environment)
An IDE is a complete development tool that includes everything you need to code, test, and debug in one place.
It’s like a big toolbox for programmers.
Examples:
IntelliJ IDEA (for Java)
PyCharm (for Python)
Visual Studio (for C#, .NET)
Eclipse
Features:
Code editor (built-in)
Debugger (find errors easily)
Compiler / Interpreter (runs code)
Project management tools
Use it when: You are working on large projects or coding in complex languages (Java, C++, etc.).
VS Code (Visual Studio Code)
VS Code is a free, lightweight, and very popular code editor created by Microsoft.
Developers use it to write, edit, and manage code for websites, apps, and software.
Key Features of VS Code
•Free & Open Source – Anyone can download and use it.
•Multi-Language Support – Works with HTML, CSS, JS, Python, C++, Java, etc.
•Extensions – Add extra features like code formatting, live server, themes.
•Syntax Highlighting – Different colors for keywords, making code easy to read.
•Auto-Completion – Suggests code as you type.
•Built-in Terminal – You can run commands inside VS Code.
•Debugger – Helps find and fix error
How a vs code can become an IDE
VS Code by default is a code editor, but you can make it work like a full IDE by
adding the right extensions and tools.
Once you have:
Language support
Debugger
Terminal
Git integration
Extensions for productivity
VS Code becomes a lightweight but powerful IDE
Simple Way to Remember:
VS Code = Editor
VS Code + Extensions + Debugger + Terminal = IDE
What is HTML
HTML (HyperText Markup Language)
Definition:
HTML is the standard language used to create the structure of a webpage.
It tells the browser what to display (headings, paragraphs, images, links, forms, etc.).
Key Points
HyperText = Text with links (connects one page to another).
Markup Language = Uses tags (< >) to mark content.
Not a programming language → it’s a markup language.
Works together with CSS (for styling) and JavaScript (for functionality).
Structure of an HTML Pag
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first webpage using HTML.</p>
</body>
</html>
Real Life Example
When you open a website:
•The text, headings, links, and images are all written in HTML.
•Without HTML, a website would have no structure – just a blank page.
•
• In Simple Words:
HTML = skeleton of a website
CSS = skin & design
JavaScript = muscles (make it move)
Thanks
