Web Development Basics

Why Learn Web Development?

🌐

Universal Platform

The web is accessible on virtually every device, making it the most universal platform for applications.

🚀

High Demand Skills

Web development skills are among the most sought-after in the tech industry, with abundant job opportunities.

💪

Empowerment

Creating your own websites gives you the ability to turn your ideas into reality and share them with the world.

The Three Core Technologies

Web development is built upon three fundamental technologies:

HTML - Structure and content
CSS - Design and presentation
JavaScript - Interactivity and behavior

Learning these three technologies is essential for anyone starting in web development. In this tutorial, we'll cover the basics of each.

HTML Basics

What is HTML?

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It defines the structure and content of a webpage using tags.

HTML Document Structure

Every HTML document follows a basic 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 Webpage</title>
            </head>
            <body>
                <!-- Content goes here -->
                <h1>Hello, World!</h1>
                <p>This is my first webpage.</p>
            </body>
            </html>

Tip: The <!DOCTYPE html> declaration tells the browser that the document is an HTML5 document.

Essential HTML Tags

Headings

HTML provides six levels of headings, from <h1> (most important) to <h6> (least important).

This is a Heading 1
This is a Heading 2
This is a Heading 3
This is a Heading 4
This is a Heading 5
This is a Heading 6
            

Paragraphs and Text Formatting

Paragraphs are defined with the <p> tag. You can format text using tags like <strong>, <em>, and <br>.

This is a paragraph with bold text and italicized text.

This paragraph has a line break.
This text appears on a new line.

Lists

HTML supports both ordered (numbered) and unordered (bulleted) lists.

Item 1
Item 2
Item 3

First item
Second item
Third item

Links and Images

Links are created with the <a> tag, and images are inserted with the <img> tag.

Visit Example.com Description of the image

Important: Always include the alt attribute in <img> tags for accessibility.

Forms

Forms allow users to input data. They are created with the <form> tag and can contain various input elements.

CSS Fundamentals

What is CSS?

CSS (Cascading Style Sheets) is a language used to style HTML elements. It controls the layout, colors, fonts, and overall appearance of your web pages.

Adding CSS to HTML

There are three ways to include CSS in your HTML:

1. Inline CSS

This paragraph has inline CSS.

2. Internal CSS

3. External CSS (Recommended)

/* styles.css */
p {
    color: blue;
    font-size: 16px;
}
            

Tip: External CSS is the preferred method for larger projects as it separates content (HTML) from presentation (CSS).

CSS Selectors

CSS selectors determine which HTML elements to style. Here are the most common types:

/* Element selector */
p {
    color: blue;
}

/* Class selector */
.highlight {
    background-color: yellow;
}

/* ID selector */
#header {
    font-size: 24px;
}

/* Descendant selector */
article p {
    line-height: 1.6;
}

/* Pseudo-class selector */
a:hover {
    text-decoration: underline;
}
            

Box Model

Every HTML element is treated as a box in CSS. The box model consists of:

Content - The actual content of the element
Padding - Space between the content and the border
Border - Line surrounding the padding
Margin - Space outside the border

.box {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 2px solid black;
    margin: 30px;
}
            

Common CSS Properties

Typography

body {
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
}

h1 {
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
}
            

Colors and Backgrounds

.container {
    color: #333;                   /* Text color */
    background-color: #f5f5f5;     /* Background color */
    border: 1px solid #ddd;        /* Border color */
}

.gradient {
    background: linear-gradient(to right, #ff0000, #00ff00);
}
            

Layout

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar {
    width: 25%;
    float: left;
}

.content {
    width: 75%;
    float: right;
}
            

JavaScript Introduction

What is JavaScript?

JavaScript is a programming language that adds interactivity to websites. It allows you to create dynamic content, validate forms, respond to user actions, and much more.

Adding JavaScript to HTML

JavaScript can be added to HTML in two ways:

1. Internal JavaScript

2. External JavaScript (Recommended)

// script.js
function greet() {
    alert("Hello, World!");
}
            

JavaScript Basics

Variables and Data Types

// Variables
let name = "John";       // String
let age = 30;            // Number
let isStudent = true;    // Boolean
let hobbies = ["reading", "coding", "swimming"];  // Array
let person = {           // Object
    firstName: "John",
    lastName: "Doe",
    age: 30
};

// Constants (values that don't change)
const PI = 3.14159;
            

Functions

// Function declaration
function greet(name) {
    return "Hello, " + name + "!";
}

// Arrow function (modern syntax)
const greet = (name) => {
    return "Hello, " + name + "!";
};

// Function call
console.log(greet("John"));  // Outputs: Hello, John!
            

Conditionals

let age = 20;

if (age >= 18) {
    console.log("You are an adult");
} else if (age >= 13) {
    console.log("You are a teenager");
} else {
    console.log("You are a child");
}
            

Loops

// For loop
for (let i = 0; i < 5; i++) {
    console.log("Iteration " + i);
}

// While loop
let count = 0;
while (count < 5) {
    console.log("Count: " + count);
    count++;
}

// For...of loop (for arrays)
const fruits = ["apple", "banana", "orange"];
for (const fruit of fruits) {
    console.log(fruit);
}
            

DOM Manipulation

The Document Object Model (DOM) is a programming interface for HTML documents. JavaScript can manipulate the DOM to change content, structure, and style of a webpage.

// Select elements
const heading = document.getElementById("main-heading");
const paragraphs = document.getElementsByTagName("p");
const buttons = document.getElementsByClassName("btn");
const firstButton = document.querySelector(".btn");
const allButtons = document.querySelectorAll(".btn");

// Change content
heading.textContent = "New Heading";
heading.innerHTML = "New Heading";

// Change styles
heading.style.color = "blue";
heading.style.fontSize = "24px";

// Add/remove classes
heading.classList.add("highlight");
heading.classList.remove("old-class");
heading.classList.toggle("active");

// Create new elements
const newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
document.body.appendChild(newParagraph);
            

Event Handling

JavaScript can respond to user actions (events) like clicks, keyboard input, mouse movements, etc.

// Add event listener using JavaScript const button = document.getElementById("myButton"); button.addEventListener("click", function() { alert("Button was clicked!"); }); // Alternative shorthand using HTML attribute //

Responsive Web Design

What is Responsive Design?

Responsive web design is an approach that makes web pages render well on all devices and screen sizes. Instead of creating separate websites for different devices, you create one website that adjusts to various screen sizes.

Key Components of Responsive Design

1. Viewport Meta Tag

This tag ensures that the browser renders the page at the width of the device and sets the initial zoom level.

2. Fluid Layouts

Use relative units (%, em, rem) instead of fixed units (px) for layout elements.

.container {
    width: 90%;           /* Relative to parent */
    max-width: 1200px;    /* Maximum width */
    margin: 0 auto;       /* Center on page */
}

.column {
    width: 33.33%;        /* Fluid columns */
    float: left;
    padding: 1rem;        /* Padding based on font size */
}
            

3. Media Queries

Media queries allow you to apply different CSS styles based on the characteristics of the device (like screen width).

/* Base styles for all screen sizes */
.column {
    width: 100%;
    padding: 1rem;
}

/* Styles for tablets and larger */
@media (min-width: 768px) {
    .column {
        width: 50%;
        float: left;
    }
}

/* Styles for desktops and larger */
@media (min-width: 1024px) {
    .column {
        width: 33.33%;
    }
}
            

4. Flexible Images

Make images scale with their container to prevent overflow on small screens.

img {
    max-width: 100%;
    height: auto;
}
            

Tip: Use the mobile-first approach: start with styles for small screens and then add media queries for larger screens.

CSS Flexbox and Grid

Modern CSS layout systems like Flexbox and Grid make responsive design much easier.

Flexbox

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.item {
    flex: 1 1 300px;  /* Grow, shrink, base width */
    margin: 1rem;
}
            

CSS Grid

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}
            

This grid layout automatically adjusts the number of columns based on the available space, with each column being at least 300px wide.

Additional Resources

MDN Web Docs

Comprehensive documentation for web technologies, maintained by Mozilla.

Visit

W3Schools

Tutorials and references with simple examples for beginners.

Visit

CSS-Tricks

Articles, tutorials, and guides focusing on CSS techniques.

Visit

Web Development Fundamentals

Why Learn Web Development?

Universal Platform

High Demand Skills

Empowerment

The Three Core Technologies

HTML Basics

What is HTML?

HTML Document Structure

Essential HTML Tags

Headings

This is a Heading 1

This is a Heading 2

This is a Heading 3

This is a Heading 4

This is a Heading 5

This is a Heading 6

Paragraphs and Text Formatting

Lists

Links and Images

Forms

CSS Fundamentals

What is CSS?

Adding CSS to HTML

1. Inline CSS

2. Internal CSS

3. External CSS (Recommended)

CSS Selectors

Box Model

Common CSS Properties

Typography

Colors and Backgrounds

Layout

JavaScript Introduction

What is JavaScript?

Adding JavaScript to HTML

1. Internal JavaScript

2. External JavaScript (Recommended)

JavaScript Basics

Variables and Data Types

Functions

Conditionals

Loops

DOM Manipulation

Event Handling

Responsive Web Design

What is Responsive Design?

Key Components of Responsive Design

1. Viewport Meta Tag

2. Fluid Layouts

3. Media Queries

4. Flexible Images

CSS Flexbox and Grid

Flexbox

CSS Grid

Additional Resources

MDN Web Docs

W3Schools

CSS-Tricks