🌐 Web Development Beginner Notes
Instructor: Sarthak Sharma
🚀 Introduction to Web Development
Web development is the process of building websites and web applications that run on the
internet.
Whenever you open a website like Google, Instagram, or Amazon, you are interacting with
something built using web development.
A website is made up of two major parts:
🧠 Types of Web Development
1. Frontend Development (Client Side)
Frontend is everything that a user can see and interact with on a website.
This includes:
● Text
● Images
● Buttons
● Layout
● Animations
Frontend developers focus on creating visually appealing and interactive user interfaces.
Technologies used:
● HTML (Structure)
● CSS (Design)
● JavaScript (Logic)
2. Backend Development (Server Side)
Backend is everything that happens behind the scenes.
This includes:
● Storing data
● Handling user authentication (login/signup)
● Server logic
● APIs
Technologies used:
● [Link]
● Python
● Databases (MongoDB, MySQL, etc.)
🧱 Core Technologies of the Web
HTML (HyperText Markup Language)
HTML is used to create the structure of a webpage.
It defines what content appears on the page.
Think of HTML as the skeleton of a website.
CSS (Cascading Style Sheets)
CSS is used to style and design the website.
It controls:
● Colors
● Layout
● Fonts
● Spacing
Think of CSS as the appearance or design layer.
JavaScript
JavaScript adds interactivity and logic to a website.
It allows you to:
● Handle user actions
● Create dynamic content
● Build applications
Think of JavaScript as the brain of the website.
💻 Introduction to VS Code
Visual Studio Code (VS Code) is a lightweight and powerful code editor developed by Microsoft.
It is one of the most popular tools used by developers to write and manage code.
Why we use VS Code:
● Clean and easy interface
● Supports multiple programming languages
● Provides extensions to enhance productivity
● Built-in terminal support
⚙️ Installing VS Code (Step-by-Step Guide)
🔵 For Windows Users
Step 1: Open your browser (preferably Brave or Chrome)
Step 2: Search for "VS Code"
Step 3: Open the official website: [Link]
Step 4: Click on "Download for Windows"
Step 5: Wait for the .exe file to download
Step 6: Open the downloaded file
Step 7: Follow installation steps:
● Click "Next"
● Accept the agreement
● Choose installation location (default is fine)
Step 8: Important options (DO NOT SKIP):
● ✔ Add to PATH (VERY IMPORTANT)
● ✔ Add "Open with Code" option
Step 9: Click Install
Step 10: Once installation is complete, click Finish
Step 11: Open VS Code from Desktop or Start Menu
🍎 For Mac Users
Step 1: Open your browser
Step 2: Search for "VS Code"
Step 3: Open [Link]
Step 4: Click on "Download for Mac"
Step 5: A .zip file will be downloaded
Step 6: Extract the zip file
Step 7: Drag "Visual Studio Code" into the Applications folder
Step 8: Open Applications → Open VS Code
Step 9: If security warning appears:
● Go to System Settings → Privacy & Security
● Click "Open Anyway"
🧩 Setting Up VS Code for Web Development
Opening a Project Folder
1. Open VS Code
2. Click on "File" → "Open Folder"
3. Create a new folder (Example: Web-Development)
4. Select that folder and open it
🔌 Important VS Code Extensions (Must Install)
Open Extensions panel (left sidebar or Ctrl + Shift + X / Cmd + Shift + X)
1. Live Server
Purpose:
Runs your HTML files in a live browser
Why important:
● Automatically refreshes when you save changes
● Gives real-time preview
2. Prettier
Purpose:
Formats your code automatically
Why important:
● Keeps code clean and readable
● Saves time
3. Auto Rename Tag
Purpose:
Automatically renames closing tag when you edit opening tag
Example:
If you change <div> → <section>, closing tag also updates
4. HTML CSS Support
Purpose:
Provides better suggestions and auto-complete
🌍 Installing Brave Browser
Step 1: Search for "Brave Browser"
Step 2: Open official website: [Link]
Step 3: Click Download
Step 4: Install it like any normal application
Step 5: Use it as your primary browser for development
Why Brave:
● Fast
● Less distractions
● Good developer tools
⌨️ VS Code Shortcuts (Essential for Productivity)
Basic Shortcuts
● Save file → Ctrl + S / Cmd + S
● Copy → Ctrl + C / Cmd + C
● Paste → Ctrl + V / Cmd + V
● Undo → Ctrl + Z / Cmd + Z
Navigation & Editing
● New File → Ctrl + N / Cmd + N
● Open File → Ctrl + O / Cmd + O
● Search → Ctrl + F / Cmd + F
● Select All → Ctrl + A / Cmd + A
Advanced Shortcuts
● Open Terminal → Ctrl + / Cmd +
● Duplicate Line → Shift + Alt + Down / Shift + Option + Down
● Move Line → Alt + Up/Down / Option + Up/Down
● Multi Cursor → Alt + Click / Option + Click
📄 Introduction to HTML
HTML is a markup language used to structure content on the web.
It uses tags to define elements.
🧩 Basic HTML Boilerplate
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
</body>
</html>
Explanation:
● <!DOCTYPE html> → tells browser this is HTML5
● <html> → root element
● <head> → metadata (not visible)
● <body> → visible content
🔤 Headings (h1 to h6)
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Smaller Heading</h3>
<h4>...</h4>
<h5>...</h5>
<h6>Smallest Heading</h6>
Use:
To define titles and hierarchy
📜 Paragraph
<p>This is a paragraph.</p>
Used for writing content.
✨ Text Formatting Tags
<b>Bold Text</b>
<i>Italic Text</i>
<u>Underline</u>
<sub>Subscript</sub>
<sup>Superscript</sup>
📋 Lists
Ordered List
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
Unordered List
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
🧠 How to Learn Effectively
● Do not just read, always practice
● Type code yourself (avoid copy-paste)
● Experiment and make mistakes
● Repeat concepts daily
🎯 Homework (Very Important)
1. Practice HTML Basics
Create a file named [Link] and write:
● Boilerplate
● Headings (h1 to h6)
● Paragraph
● Lists
2. Learn New Tags (Self Research)
Anchor Tag (<a>)
Use:
To create links
Example:
<a href="[Link] to Google</a>
Image Tag (<img>)
Use:
To display images
Example:
<img src="[Link]" alt="description">
3. Task
Create a simple webpage that includes:
● Headings
● Paragraph
● List
● One link
● One image
💬 Final Note
If you stay consistent and practice daily, web development can become a powerful skill for you.
Focus on understanding, not memorizing.