Lesson 1 - Introduction to Web Development
Lesson 1: Introduction to Web Development
- Web Development is the process of building websites and web applications.
- It includes Frontend (client-side) and Backend (server-side) development.
- Frontend: What users see (HTML, CSS, JavaScript).
- Backend: Server logic, databases (Node.js, PHP, Python, etc.).
- Tools:
- Browser (Chrome, Firefox)
- Text Editor (VS Code, Sublime)
- DevTools (Inspect Element, Console)
Lesson 2 - HTML Basics
Lesson 2: HTML Basics
- HTML stands for HyperText Markup Language.
- It structures content on the web.
- Basic Tags:
- <!DOCTYPE html>
- <html>, <head>, <title>, <body>
- <h1> to <h6>, <p>, <a>, <img>, <ul>, <ol>, <li>
- Attributes: href, src, alt, title
- Nesting elements properly is important.
Lesson 3 - CSS Basics
Lesson 3: CSS Basics
- CSS stands for Cascading Style Sheets.
- Used for styling HTML elements.
- Types:
- Inline: <p style="color:red;">
- Internal: <style> in <head>
- External: Linked .css file
- Common Properties:
- color, background-color, font-size
- margin, padding, border
- CSS Selectors: element, .class, #id
Lesson 4 - JavaScript Basics
Lesson 4: JavaScript Basics
- JavaScript makes web pages interactive.
- Basic Syntax:
- console.log("Hello World");
- let, const, var for variables
- Data Types: string, number, boolean, array, object
- Operators: +, -, *, /, ==, ===, &&, ||
- Functions and events (like onclick)
Lesson 5 - Creating Your First Web Page
Lesson 5: Creating Your First Web Page
- Combine HTML, CSS, and JavaScript.
- Simple Page Example:
- HTML: Structure
- CSS: Styling
- JavaScript: Interactivity
- Project:
- Create an index.html
- Add style.css and script.js
- Link CSS and JS in HTML file
- Use a browser to open your web page and test.