Introduction to Web Development

Protected: Web Development Bootcamp: Master HTML, CSS, and JavaScript in 3 Weeks

About Lesson

1. Overview of Web Technologies: HTML, CSS, and JavaScript

Web technologies are the backbone of modern websites and applications, each playing a unique role in creating a functional and visually appealing online experience. Here’s an overview of the three core technologies:

1. HTML (HyperText Markup Language)

Purpose: Defines the structure and content of a webpage.
Key Features:
- Acts as the skeleton of a website.
- Uses tags to organize and display elements like headings, paragraphs, images, and links.
- Supports semantic elements (<header>, <footer>, <article>, <section>) to improve accessibility and SEO.

Examples:

<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <h1>Welcome to My Webpage</h1>
    <p>This is a paragraph with content.</p>
  </body>
</html>

2. CSS (Cascading Style Sheets)

Purpose: Adds styling and visual design to HTML elements.
Key Features:
- Controls layout, colors, fonts, and overall aesthetics of a webpage.
- Enables responsive design for different screen sizes using media queries.
- Offers advanced styling techniques like animations and transitions.

Examples:

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  margin: 0;
}

h1 {
  color: #333;
  text-align: center;
}

3. JavaScript (JS)

Purpose: Adds interactivity and dynamic behavior to web pages.
Key Features:
- Executes directly in the browser without additional software.
- Manipulates the DOM (Document Object Model) to dynamically update content.
- Handles user events like clicks, form submissions, and input changes.
- Forms the basis for advanced frameworks and libraries like React, Angular, and Vue.js.

Examples:

// Display a greeting message
document.querySelector('h1').textContent = "Hello, JavaScript!";

// Add an event listener
document.querySelector('button').addEventListener('click', () => {
  alert("Button Clicked!");
});

How They Work Together

HTML: Provides the foundation for the content.
CSS: Styles and positions the content to make it visually appealing.
JavaScript: Adds interactivity and dynamic functionality to engage users.

Example Integration:

<!DOCTYPE html>
<html>
<head>
  <title>Interactive Page</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; }
    button { padding: 10px 20px; background-color: #007BFF; color: white; border: none; cursor: pointer; }
    button:hover { background-color: #0056b3; }
  </style>
</head>
<body>
  <h1>Welcome to Web Development</h1>
  <button>Click Me!</button>
  <script>
    document.querySelector('button').addEventListener('click', () => {
      alert("Welcome to the World of Web Development!");
    });
  </script>
</body>
</html>

This example shows how HTML creates the structure, CSS styles it, and JavaScript makes it interactive.

2. Setting Up the Development Environment for Web Development (VS Code + Live Server)

A smooth development workflow is crucial for productivity. Here’s how to set up your development environment using Visual Studio Code (VS Code) and Live Server for live previewing of your web pages.

Step 1: Install Visual Studio Code (VS Code)

Download VS Code
- Visit VS Code’s official website.
- Download and install the version for your operating system (Windows, macOS, Linux).
Install VS Code
- Follow the on-screen instructions to complete the installation.
Launch VS Code
- Open VS Code after installation.
- You should now see a clean workspace ready for development.

Step 2: Install Live Server Extension in VS Code

Open the Extensions View
- Click on the Extensions icon on the left sidebar (or press Ctrl+Shift+X).
Search for “Live Server”
- In the search bar, type Live Server.
- Look for the extension by Ritwick Dey and click on Install.
Verify Installation
- After installation, the “Go Live” button will appear in the bottom-right corner of the status bar.
- If it doesn’t show, restart VS Code, and it should appear.

Step 3: Create Your First Web Project

Create a New Folder
- Create a folder on your computer to store your web project files (e.g., WebDevelopmentProject).
Open Folder in VS Code
- In VS Code, go to File > Open Folder and select the folder you created.

Create an HTML File

Inside your project folder, create a new file named index.html.

Add some basic HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Web Page</title>
</head>
<body>
  <h1>Welcome to Web Development</h1>
  <p>This is my first webpage!</p>
</body>
</html>

Save the File
- Press Ctrl+S to save the file.

Step 4: Run the Project Using Live Server

Launch Live Server
- Right-click on index.html in the Explorer panel.
- Select Open with Live Server, or click the Go Live button in the bottom-right corner.
View the Live Preview
- Your default web browser will automatically open a live preview of your webpage.
- Any changes you make to the HTML file will be instantly reflected in the browser (no need to manually refresh).

Step 5: Install Other Useful Extensions

Prettier – Code Formatter
- Search for Prettier in the Extensions panel and install it.
- This will auto-format your code for better readability.
Emmet
- Emmet comes pre-installed with VS Code and provides shorthand syntax for writing HTML and CSS faster.
Bracket Pair Colorizer
- This extension helps distinguish matching brackets by color coding them, making it easier to work with nested code.

Step 6: Customizing VS Code Settings (Optional)

Font and Theme Customization
- Go to File > Preferences > Color Theme to change the theme (e.g., Dark Mode or Light Mode).
- Go to File > Preferences > Settings to customize the font family and size.
Enable Auto Save
- Open settings and search for “Auto Save.”
- Set it to afterDelay for automatic saving every few seconds.

Step 7: Begin Coding!

Now that you have your development environment set up, you’re ready to start coding. You can edit your HTML, CSS, and JavaScript files and see the live changes in real-time using Live Server.

3. How Websites Work: Front-End vs. Back-End

When building a website, two main components come into play: the front-end and the back-end. Understanding the distinction between them helps you grasp how websites function as a whole. Let’s break down both sides:

1. Front-End (Client-Side)

The front-end refers to everything that users interact with directly in their web browser. It’s the visual and interactive part of a website or web application.

Key Responsibilities of Front-End:

Structure: Defines the layout and structure of the web page using HTML.
Design & Styling: Styles the web page and adds visual appeal with CSS.
Interactivity: Implements interactivity and dynamic behaviors using JavaScript.

Technologies Used in Front-End:

HTML (HyperText Markup Language): Provides the structure and content.
CSS (Cascading Style Sheets): Styles the content, controlling layout, colors, and fonts.
JavaScript: Adds interactivity (e.g., buttons, forms, and animations).

Front-End Tools:

Frameworks/Libraries:
- React.js, Vue.js, Angular for dynamic content.
- Bootstrap, Tailwind CSS for responsive design and layout.
Preprocessors:
- Sass, LESS for more advanced CSS styling.
Build Tools:
- Webpack, Parcel, Vite for bundling assets and optimizing the development process.

User Interaction:

When users visit a website, everything they see on the screen (e.g., images, text, buttons, navigation menus) is the front-end.
The front-end handles tasks like:
- Form submissions (user input).
- Updating the page content dynamically without refreshing (using JavaScript).
- Interacting with elements like dropdowns, buttons, and modals.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>My Front-End Page</title>
  <style>
    h1 { color: blue; }
  </style>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <button onclick="alert('Hello World!')">Click Me!</button>

  <script>
    // JavaScript for interactivity
    console.log("This is the front-end");
  </script>
</body>
</html>

2. Back-End (Server-Side)

The back-end is the part of the website that users don’t see. It handles the logic, database interactions, and server-side operations. When users interact with the front-end, the back-end processes requests, retrieves data, and returns responses.

Key Responsibilities of Back-End:

Database Management: Stores and retrieves data (e.g., user information, products, or blog posts).
Server Logic: Handles requests from the front-end (e.g., submitting a form or fetching data).
Authentication and Security: Manages user login, password protection, and data security.
API Development: Exposes data to the front-end via APIs (Application Programming Interfaces).

Technologies Used in Back-End:

Programming Languages:
- Node.js, Python, PHP, Ruby, Java, C# for writing server-side logic.
Databases:
- MySQL, MongoDB, PostgreSQL for storing and retrieving data.
Web Servers:
- Apache, Nginx, Express.js for handling HTTP requests and responses.
Frameworks:
- Express.js (Node.js), Django (Python), Laravel (PHP) for rapid back-end development.

Back-End Workflow:

The back-end receives requests from the front-end (e.g., a form submission).
It processes the request, interacts with the database (if needed), and sends a response back to the front-end.
Examples include logging in a user, retrieving blog posts from a database, or processing an online payment.

Example:

For a simple Node.js back-end using Express to handle a request:

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Welcome to My Website!');
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

How Front-End and Back-End Work Together

User Request:
- A user interacts with the front-end (e.g., submits a form).
Request Sent to Back-End:
- The front-end sends a request (often through an API) to the back-end to process the data (e.g., logging in or retrieving user info).
Back-End Processes:
- The back-end executes the server-side logic (e.g., checking the user’s credentials against a database).
Response Sent Back to Front-End:
- Once processed, the back-end sends a response back to the front-end (e.g., a success message or data).
Front-End Updates:
- The front-end dynamically updates the page using JavaScript to display the data or feedback from the back-end.

Full-Stack Development

A full-stack developer works on both the front-end and back-end. They have the skills to handle the entire web development process, from designing the user interface to managing server-side logic and databases.

Key Differences Between Front-End and Back-End:

Feature	Front-End	Back-End
What It Is	The user-facing side of the website.	The server-side logic, data, and APIs.
Languages Used	HTML, CSS, JavaScript	Node.js, PHP, Python, Ruby, Java, C#
Role	Handles user interface and experience.	Manages database, server, and logic.
Example	Website layout, design, animations.	User authentication, database queries.
Visible to Users	Yes	No