Learn Web Development & Bash Scripting

Master HTML, CSS, JavaScript, and Bash with our comprehensive tutorials and interactive examples.

Start Learning

Technologies You'll Learn

HTML

Learn the building blocks of web pages with HTML. Structure content and create semantic markup.

Learn More

CSS

Style your web pages with CSS. Create beautiful layouts, animations, and responsive designs.

Learn More

JavaScript

Add interactivity to your websites with JavaScript. Create dynamic content and handle user events.

Learn More

Bash Scripting

Automate tasks and work efficiently with Bash scripting. Master the command line interface.

Learn More

HTML Tutorial

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It describes the structure of a web page.

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>Document</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>This is a paragraph.</p>
</body>
</html>

HTML Forms

<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    
    <input type="submit" value="Submit">
</form>

CSS Tutorial

CSS (Cascading Style Sheets) is used to style and layout web pages — for example, to alter the font, color, size, and spacing of your content.

Basic CSS Syntax

/* Selector */
body {
    /* Declaration block */
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 20px;
}

/* Class selector */
.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* ID selector */
#header {
    background-color: #333;
    color: white;
    padding: 10px;
}

CSS Flexbox

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

.item {
    flex: 1 0 200px;
    margin: 10px;
    padding: 20px;
    background-color: #f9f9f9;
}

JavaScript Tutorial

JavaScript is a programming language that enables interactive web pages. It is an essential part of web applications.

JavaScript Variables and Functions

// Variables
let name = "John";
const age = 30;
var isStudent = false;

// Function declaration
function greet(person) {
    return `Hello, ${person}!`;
}

// Function expression
const multiply = function(a, b) {
    return a * b;
};

// Arrow function
const divide = (a, b) => a / b;

// Using the functions
console.log(greet(name)); // Output: Hello, John!
console.log(multiply(5, 3)); // Output: 15

DOM Manipulation

// Select an element
const button = document.getElementById('myButton');
const output = document.querySelector('.output');

// Add event listener
button.addEventListener('click', function() {
    output.textContent = 'Button clicked!';
    output.style.color = 'green';
});

// Create and append new element
const newElement = document.createElement('div');
newElement.textContent = 'This is a new element';
document.body.appendChild(newElement);

Bash Scripting Tutorial

Bash is a Unix shell and command language. It's widely used for its powerful command-line interface and scripting capabilities.

Basic Bash Script

#!/bin/bash

# This is a comment
echo "Hello, World!"

# Variables
name="Alice"
age=25

# Using variables
echo "My name is $name and I am $age years old."

# Reading input
echo "What's your favorite color?"
read color
echo "Your favorite color is $color."

Conditionals and Loops in Bash

#!/bin/bash

# If statement
if [ "$1" == "hello" ]; then
    echo "You said hello!"
elif [ "$1" == "goodbye" ]; then
    echo "You said goodbye!"
else
    echo "You said something else."
fi

# For loop
for i in {1..5}; do
    echo "Number: $i"
done

# While loop
count=1
while [ $count -le 3 ]; do
    echo "Count: $count"
    ((count++))
done