🚀 HTML/CSS Introduction

🎯 Complete Definition

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It structures content using elements like headings, paragraphs, links, and images. CSS (Cascading Style Sheets) describes how HTML elements are displayed on screen, paper, or in other media. Together they form the foundation of the World Wide Web.

🔬 Core Characteristics

HTML: Markup language (not programming) – defines structure and semantics.
CSS: Style sheet language – controls layout, colors, fonts, responsiveness.
Separation of concerns: Content (HTML) vs presentation (CSS).
Declarative: You describe what you want, not how to achieve it.
Accessibility: Semantic HTML ensures content is accessible to all users.
Browser rendering: Parsed and rendered by user agents (browsers).
Responsive by design: CSS media queries adapt to different devices.

📊 Industry Usage

100% of websites use HTML and CSS. Every web developer, designer, and browser relies on these technologies. Modern frameworks (React, Vue, Angular) ultimately render HTML/CSS. CSS preprocessors (Sass, Less) extend CSS capabilities. Used in web apps, mobile apps (via webviews), emails, and even PDF generation.

<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
    <style>
        body { font-family: Arial; background: #f0f0f0; }
        h1 { color: #e34c26; }
    </style>
</head>
<body>
    <h1>Hello, HTML/CSS!</h1>
    <p>This is a simple web page.</p>
</body>
</html>
    

🔍 Live Preview Concept:

Hello, HTML/CSS!

This is a simple web page.

📄 HTML Basics

🎯 Complete Definition

HTML documents are built with elements (tags) that define the structure. The basic template includes <!DOCTYPE html>, <html>, <head>, and <body>. Elements have opening and closing tags, attributes provide additional info. HTML5 introduced semantic elements like <header>, <nav>, <article>, and <footer>.

🏗️ Core Structure

<!DOCTYPE html> – declares HTML5.
<html> – root element.
<head> – meta-information, title, links to CSS.
<body> – visible content.
Attributes: id, class, src, href, alt.
Comments:

<!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>
    <!-- main content starts here -->
    <h1 id="main-title" class="title">Hello World</h1>
    <p>This is a paragraph.</p>
</body>
</html>
    

📝 Text & Semantics

🎯 Complete Definition

Semantic HTML uses elements that convey meaning about the content they enclose. This improves accessibility, SEO, and code readability. Text elements range from headings (<h1> to <h6>) to paragraphs (<p>), and inline semantics like <strong>, <em>, <mark>.

<article>
    <h1>The Future of Web Development</h1>
    <p>Published on <time datetime="2026-02-20">Feb 20, 2026</time></p>
    <p><strong>HTML5</strong> and <em>CSS3</em> have revolutionized web design.</p>
    <blockquote cite="https://example.com">
        <p>The web is for everyone.</p>
    </blockquote>
    <p>Use <code>&lt;section&gt;</code> for grouping content.</p>
</article>
    

🔗 Links & Navigation

🎯 Complete Definition

Hyperlinks are what make the web "web". The <a> tag (anchor) creates links to other pages, files, or locations within the same page. Navigation is typically built with <nav> wrapping lists of links. Attributes control behavior: href (destination), target (where to open), rel (relationship).

🔗 Link Types

Absolute: href="https://example.com"
Relative: href="about.html"
Internal (anchor): href="#section"
Email: href="mailto:user@domain.com"
Telephone: href="tel:+1234567890"
Download: download attribute

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html" target="_blank">About (new tab)</a></li>
        <li><a href="#contact">Contact Section</a></li>
        <li><a href="mailto:hello@codeorbit.com">Email Us</a></li>
        <li><a href="resume.pdf" download>Download PDF</a></li>
    </ul>
</nav>
    

🖼️ Images & Media

🎯 Complete Definition

Images (<img>) bring visual content. <figure> and <figcaption> associate captions. For audio and video, use <audio> and <video> with source elements. Responsive images use srcset and sizes to serve different resolutions.

📺 Media Tags

<img> – src (source), alt (alternative text)
<picture> – multiple sources for art direction
<figure> – self-contained content (diagrams, code)
<figcaption> – caption for figure
<video> – video player with controls
<audio> – audio player
<iframe> – embed another document

<figure>
    <img src="logo.png" alt="CodeOrbitPro Logo" width="200">
    <figcaption>Company logo since 2026</figcaption>
</figure>

<picture>
    <source media="(min-width: 800px)" srcset="large.jpg">
    <source media="(min-width: 400px)" srcset="medium.jpg">
    <img src="small.jpg" alt="Responsive image">
</picture>

<video controls width="400">
    <source src="tutorial.mp4" type="video/mp4">
    Your browser does not support video.
</video>
    

📊 Tables

🎯 Complete Definition

HTML tables organize data in rows and columns. Use <table> with <tr> (rows), <th> (header cells), <td> (data cells). Semantic improvements: <thead>, <tbody>, <tfoot>, and scope attribute for accessibility.

🏛️ Table Structure

<caption> – title/description of table
<thead> – header section
<tbody> – main data section
<tfoot> – footer (summaries)
colspan / rowspan – merge cells

<table border="1">
    <caption>Programming Languages</caption>
    <thead>
        <tr>
            <th scope="col">Language</th>
            <th scope="col">Paradigm</th>
            <th scope="col">First appeared</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Python</td>
            <td>Multi-paradigm</td>
            <td>1991</td>
        </tr>
        <tr>
            <td>Elixir</td>
            <td>Functional</td>
            <td>2012</td>
        </tr>
    </tbody>
</table>
    

📋 Forms & Inputs

🎯 Complete Definition

Forms (<form>) collect user input. They contain controls like text fields, checkboxes, radio buttons, and submit buttons. Attributes define behavior: action (where to send), method (GET/POST). Modern input types (email, tel, date, range) enhance UX and validation.

📝 Form Elements

<input> – many types: text, password, email, number, etc.
<textarea> – multi-line text
<select> – dropdown list
<button> – clickable button
<label> – associates text with input
<fieldset> / <legend> – groups related inputs

<form action="/submit" method="POST">
    <fieldset>
        <legend>Personal Info</legend>
        
        <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" placeholder="example@mail.com">
        
        <label>Age:</label>
        <input type="number" min="0" max="120">
        
        <label>Subscribe:</label>
        <input type="checkbox" name="subscribe" checked> Yes
        
        <button type="submit">Send</button>
    </fieldset>
</form>
    

🎨 CSS Basics

🎯 Complete Definition

CSS (Cascading Style Sheets) rule sets consist of selectors and declaration blocks. Selectors target HTML elements; declarations contain property:value pairs. CSS can be inline, internal (<style>), or external (.css file). The cascade determines which rule applies when conflicts arise.

🎯 Selector Types

Element: h1 { color: blue; }
Class: .menu { display: flex; }
ID: #header { background: black; }
Universal: * { box-sizing: border-box; }
Attribute: [type="text"] { border: 1px solid; }
Pseudo-class: a:hover { color: red; }
Pseudo-element: p::first-line { font-weight: bold; }

/* External CSS */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
}

.highlight {
    background-color: yellow;
    padding: 5px;
}

#main-title {
    color: #e34c26;
    border-bottom: 2px solid #2965f1;
}

/* Nested and combinators */
nav ul li a {
    text-decoration: none;
}

nav ul li a:hover {
    text-decoration: underline;
}
    

📦 Box Model

🎯 Complete Definition

The CSS box model describes the rectangular boxes generated for elements. It consists of: content, padding (inside border), border, and margin (outside). Understanding the box model is essential for layout control. box-sizing: border-box; includes padding and border in width/height.

📦 Box Components

Content: actual text/image
Padding: transparent space around content
Border: line surrounding padding
Margin: space outside border (collapsing)
Width/Height: by default only content width

.box {
    width: 200px;
    padding: 20px;          /* adds 20px inside */
    border: 5px solid black; /* 5px border */
    margin: 15px;            /* outside space */
    background-color: lightblue;
}

/* Traditional box model: total width = 200 + 40 + 10 + 30 = 280px */

/* Modern reset */
* {
    box-sizing: border-box;
}
/* Now width includes padding+border: total width = 200px */
    

🔍 Box Model Visual:

Content inside

🔲 Layout & Flexbox

🎯 Complete Definition

Flexbox (Flexible Box Layout) is a one‑dimensional layout model for distributing space and aligning items. It excels at rows or columns. The parent (display: flex) controls flow, wrapping, alignment; children can grow, shrink, or reorder.

🎛️ Flexbox Properties

Container: flex-direction, flex-wrap, justify-content (main axis), align-items (cross axis), align-content
Items: flex-grow, flex-shrink, flex-basis, align-self, order

.container {
    display: flex;
    flex-direction: row;      /* default row */
    justify-content: space-between; /* main axis */
    align-items: center;      /* cross axis */
    flex-wrap: wrap;
    height: 300px;
    border: 2px solid #e34c26;
}

.item {
    flex: 1 1 150px;          /* grow, shrink, basis */
    background: #2965f1;
    color: white;
    padding: 20px;
    margin: 5px;
    text-align: center;
}

/* Special item */
.item.special {
    align-self: flex-end;      /* overrides align-items */
    order: -1;                 /* moves to front */
}
    

🔍 Flexbox Preview:

🔳 CSS Grid

🎯 Complete Definition

CSS Grid is a two‑dimensional layout system that can handle both rows and columns simultaneously. Define a grid container with display: grid, then set track sizes with grid-template-columns/rows. Place items using line numbers, named areas, or spans.

🧩 Grid Concepts

Grid container: display: grid
Tracks: grid-template-columns: 1fr 2fr 1fr;
Gaps: gap: 20px;
Lines: numbered automatically
Areas: grid-template-areas for named placement
Item placement: grid-column: span 2;

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto 200px;
    gap: 15px;
    background: #eee;
    padding: 10px;
}

.header {
    grid-column: 1 / -1;      /* spans all columns */
    background: #e34c26;
    color: white;
    padding: 20px;
}

.sidebar {
    grid-row: 2 / 3;
    background: #2965f1;
}

.main {
    grid-column: 2 / 3;
    background: #6e45a0;
}

.footer {
    grid-column: 1 / -1;
    background: #333;
    color: white;
}
    

📱 Responsive Design

🎯 Complete Definition

Responsive Web Design ensures content looks good on all devices. Core techniques: fluid grids (using % or fr), flexible images (max-width: 100%), and media queries that apply CSS based on viewport width, resolution, or orientation. Mobile‑first approach starts with small screen styles then enhances.

📐 Media Query Examples

@media (max-width: 600px) { ... }
@media (min-width: 768px) and (max-width: 1024px) { ... }
@media (orientation: portrait) { ... }
@media (prefers-color-scheme: dark) { ... }

/* Mobile first */
body { font-size: 16px; }

.container {
    display: flex;
    flex-direction: column;
}

/* Tablet */
@media (min-width: 600px) {
    .container {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .item { width: 50%; }
}

/* Desktop */
@media (min-width: 1024px) {
    .item { width: 33.33%; }
}

/* Responsive image */
img {
    max-width: 100%;
    height: auto;
}

/* Responsive typography */
h1 {
    font-size: clamp(1.5rem, 5vw, 3rem);
}
    

✨ Animations

🎯 Complete Definition

CSS animations bring interfaces to life. Two primary methods: transition (simple state changes) and @keyframes (complex multi‑step animations). Properties like transform (translate, rotate, scale) and opacity are performance‑optimized (GPU accelerated).

🎬 Animation Properties

transition: property duration timing-function delay
transform: translateX(20px), rotate(45deg)
@keyframes: define animation steps
animation: name duration timing-function iteration-count

/* Transition */
.button {
    background: #e34c26;
    transition: background 0.3s ease, transform 0.2s;
}
.button:hover {
    background: #2965f1;
    transform: scale(1.1);
}

/* Keyframes animation */
@keyframes slide-in {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.animated-box {
    animation: slide-in 0.8s ease-out forwards;
    width: 100px;
    height: 100px;
    background: linear-gradient(45deg, #e34c26, #2965f1);
}

/* Infinite animation */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.pulse {
    animation: pulse 2s infinite;
}
    

🔍 Hover to see transition:

Hover me

🚀 Advanced CSS

🎯 Complete Definition

Modern CSS includes powerful features like custom properties (CSS variables), calc(), min()/max()/clamp(), nesting (native), container queries, subgrid, and :has() relational pseudo-class. Preprocessors (Sass, PostCSS) extend syntax but native CSS is catching up.

🚀 Cutting‑edge Features

CSS Variables: --main-color: purple; var(--main-color)
calc(): width: calc(100% - 40px);
clamp(): font-size: clamp(1rem, 4vw, 2rem);
Container queries: @container (min-width: 400px) { ... }
:has(): div:has(p) { border: 1px solid; } – parent selector
Nesting (native): parent { & child { } }

:root {
    --primary: #e34c26;
    --secondary: #2965f1;
    --spacing: 20px;
}

.card {
    background: white;
    padding: var(--spacing);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    width: clamp(250px, 50%, 500px);
    margin: var(--spacing) auto;
}

.card:has(> h2) {
    border-left: 5px solid var(--primary);
}

/* Container query */
.card-container {
    container-type: inline-size;
}

@container (min-width: 400px) {
    .card {
        display: flex;
    }
}

/* Nesting (if supported) */
.nav {
    background: #333;
    
    & ul {
        display: flex;
        
        & li {
            list-style: none;
            
            & a {
                color: white;
                
                &:hover {
                    color: var(--primary);
                }
            }
        }
    }
}
    

🚀 HTML/CSS Introduction

🎯 Complete Definition

🔬 Core Characteristics

📊 Industry Usage

🔍 Live Preview Concept:

Hello, HTML/CSS!

📄 HTML Basics

🎯 Complete Definition

🏗️ Core Structure

📝 Text & Semantics

🎯 Complete Definition

🔤 Common Semantic Tags

🔗 Links & Navigation

🎯 Complete Definition

🔗 Link Types

🖼️ Images & Media

🎯 Complete Definition

📺 Media Tags

📊 Tables

🎯 Complete Definition

🏛️ Table Structure

📋 Forms & Inputs

🎯 Complete Definition

📝 Form Elements

🎨 CSS Basics

🎯 Complete Definition

🎯 Selector Types

📦 Box Model

🎯 Complete Definition

📦 Box Components

🔍 Box Model Visual:

🔲 Layout & Flexbox

🎯 Complete Definition

🎛️ Flexbox Properties

🔍 Flexbox Preview:

🔳 CSS Grid

🎯 Complete Definition

🧩 Grid Concepts

📱 Responsive Design

🎯 Complete Definition

📐 Media Query Examples

✨ Animations

🎯 Complete Definition

🎬 Animation Properties

🔍 Hover to see transition:

🚀 Advanced CSS

🎯 Complete Definition

🚀 Cutting‑edge Features