Scribd
Upload
6 views8 pages

Python Test User

This document provides an overview of fundamental concepts in web development, including the differences between websites and web applications, types of web resources, and environment setup for development. It emphasizes the importance of a common development environment across different operating systems and outlines the necessary tools such as Node.js and Visual Studio Code. Additionally, it highlights various web resources like blogs, wikis, and podcasts, along with their functionalities and examples.

Uploaded by

Kishore r K
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views8 pages

Python Test User

This document provides an overview of fundamental concepts in web development, including the differences between websites and web applications, types of web resources, and environment setup for development. It emphasizes the importance of a common development environment across different operating systems and outlines the necessary tools such as Node.js and Visual Studio Code. Additionally, it highlights various web resources like blogs, wikis, and podcasts, along with their functionalities and examples.

Uploaded by

Kishore r K
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

Web Development – Fundamental Concepts

& Environment Setup (Notes)

1. Introduction
 Previously discussed:
o What is a Web Server
o What is a Website
 IIS (Internet Information Services):
o Comes by default in Windows
o Sometimes unavailable on some systems
 To avoid OS-specific issues, we use a common development environment that
works on:
o Windows
o macOS
o Linux
 This environment will be used throughout the entire Full Stack Development
course

2. Website: Technical Meaning


 A Website is a Virtual Directory
 It consists of:
1. Virtual Path
 Used by clients (users) to access resources
2. Physical Path
 Used by developers to store website files

3. Website vs Web Application


3.1 Website

 Contains only static resources


 Static means:
o Only information display
o No interaction
 Users can:
o View content
o Read information
 No features like:
o Login
o Search
o Chat
o Registration

Example:

 A course information site (only course details, faculty info)

3.2 Web Application

 Contains static + dynamic resources


 Allows user interaction
 Users can:
o Search
o Login
o Register
o Chat
o Book / Reserve

Examples:

 Amazon
 Flipkart
 IRCTC

📌 If you can build a web application, building a website is easy (≈10% of effort).

3.3 Developer Perspective

 UI Developer:
o Can build only websites
 Full Stack Developer:
o Builds web applications
o Needs:
 Frontend knowledge
 Backend knowledge

4. Types of Web Resources on Internet


4.1 Website

 One-time usage
 Informational
 No frequent updates

4.2 Blog

 Origin: Web Log


 Used for:
o Regular updates
o Journals
 Maintained by individuals
 Content updated periodically

Examples:

 Faculty blogs
 Food blogs

📌 Blogs can generate income using Google Ads

Free Blog Platform:

 [Link]

4.3 Vlog (Video Blog)

 Content in video format


 Popular today
 Replaced text-based blogs

Example:

 YouTube Channels

4.4 Wiki

 Origin: Hawaiian word “Wiki” = Quick


 Special feature:
o Users can edit content
 Changes are verified by admin teams

Examples:

 Wikipedia
 IMDb
 Google Maps

📌 Anything that allows user editing is called a Wiki

4.5 Broadcasting / Podcasting

 Pod = Multimedia (Audio + Video)


 Allows media broadcasting to other devices

Examples:

 YouTube
 Netflix
 Amazon Prime
 Spotify
 Saavn

📌 Can broadcast content to:

 Smart TV
 Bluetooth speakers
 Wi-Fi devices

4.6 Widgets

 Small gadgets embedded into websites/apps


 Used for specific functionality

Examples:

 Weather widget
 Currency converter
 EMI calculator
 BMI calculator
 Barcode scanner
 QR code payment

📌 Often built using:

 JavaScript
 jQuery
5. Browser & Web Debugger
5.1 Browser

 Software to open:
o Websites
o Web applications
o Blogs
o Wikis

5.2 Web Debugger (Developer Tools)

 Used to:
o Inspect code
o Debug errors
o Track performance
o Measure load time

How to open:

 Right-click → Inspect

5.3 Advanced Debuggers

 Browser tools are limited


 Used in real-time projects:
o Postman
o Fiddler
o Swagger
o Firebug (Firefox)

6. Environment Setup for Web Development


6.1 Step 1: Install [Link]

Why [Link]?

1. Used later as a server-side technology


2. Provides npm (Node Package Manager)
6.2 Package Manager (npm)

 Simplifies library installation


 Avoids manual download & copy

Example:

npm install bootstrap

📌 Automatically:

 Downloads library
 Installs dependencies
 Adds to project

Popular Package Managers:

 npm
 yarn
 nuget
 bower
 grunt
 ruby gems

6.3 [Link] Installation

 Website: [Link]
 Use LTS version
 Windows:
o Install .msi file
 [Link] supports:
o Windows
o macOS
o Linux
 Windows 7 not supported (need Windows 8+)

6.4 Verify Installation


node -v
npm -v

Requirements:

 [Link] ≥ 10
 npm ≥ 5
7. Install Code Editor
7.1 Visual Studio Code

 Free
 Lightweight
 Cross-platform
 Best for modern web technologies
 Excellent TypeScript support (by Microsoft)

📌 Do not confuse with Visual Studio

8. VS Code Extensions (Plugins)


8.1 Live Server (Mandatory)

 Runs projects locally


 No need for IIS or Tomcat

8.2 VS Code Icons (Optional but Recommended)

 Shows icons for:


o HTML
o CSS
o JS files
 Improves file recognition

8.3 IntelliSense for CSS Class Names

 Auto-suggestions for HTML & CSS


 Helps beginners
 Improves speed and accuracy

9. Final Environment Checklist


✔ [Link]
✔ npm
✔ Visual Studio Code
✔ Live Server extension
✔ VS Code Icons
✔ IntelliSense

📌 This setup will be used until the end of the Full Stack course

If you want next:

You might also like