HTML Tutorial

HTML, or HyperText Markup Language, is the backbone of every web page you see online. It's not a programming language, but rather a markup language used to structure content on the web. Think of it as the skeleton of your website, providing the framework upon which everything else (like styling with CSS and interactivity with JavaScript) is built.

Every piece of content on a web page – from headings and paragraphs to images and videos – is defined using HTML elements. These elements are represented by tags, which tell the browser how to display the content.

Key Concepts You'll Master:

2. Basic HTML Document Structure

Before writing any content, it's crucial to understand the standard boilerplate for an HTML document. This structure ensures your page is correctly interpreted by web browsers.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Awesome Web Page</title>
</head>
<body>
    <!-- All visible content of your web page goes here -->
    <h1>Welcome to My Page!</h1>
    <p>This is a simple paragraph.</p>
</body>
</html>

Dissecting the Structure:

3. Text and Structural Elements

HTML provides a rich set of elements for structuring and formatting text content.

3.1 Headings (<h1> to <h6>)

Headings are used to define the structure and hierarchy of your content. <h1> is the most important (usually the main title of the page), and <h6> is the least important. Use them logically to outline your document.


<h1>Main Page Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>
<h4>Sub-subsection Title</h4>
<h5>Even Smaller Title</h5>
<h6>Least Important Title</h6>

3.2 Paragraphs (<p>)

The <p> tag is used for blocks of text, typically paragraphs. Browsers automatically add some space before and after paragraphs.


<p>This is the first paragraph of my amazing tutorial. It contains some introductory text about HTML.</p>
<p>Here is a second paragraph, discussing more details about web page structure. Each paragraph will start on a new line.</p>

3.3 Line Breaks (<br>) and Horizontal Rules (<hr>)


<p>This line of text will be followed by a break.<br>
And this text will appear on the next line.</p>

<hr> <!-- This creates a horizontal line -->

<p>This content is separated by a thematic break.</p>

3.4 Text Formatting and Semantics

HTML offers various tags to give semantic meaning or presentational styling to text.

Tag Description Example
<strong> Indicates strong importance (typically bold). <strong>Important!</strong>
<em> Indicates emphasis (typically italic). <em>Emphasized text</em>
<b> Bold text, but without added semantic importance. <b>Bold text</b>
<i> Italic text, often for technical terms, foreign words, etc. <i>Italic text</i>
<mark> Highlighted or marked text. <mark>Highlight me</mark>
<small> Represents side comments and small print. <small>Disclaimer</small>
<del> Represents deleted (struck-through) text. <del>Old price</del> $10
<ins> Represents inserted (underlined) text. <ins>New addition</ins>
<sub> Subscript text (e.g., for chemical formulas). H<sub>2</sub>O
<sup> Superscript text (e.g., for exponents). E=MC<sup>2</sup>
<blockquote> For long quotations that span multiple lines. <blockquote cite="...">...</blockquote>
<q> For short, inline quotations. He said <q>Hello!</q>
<code> For a fragment of computer code. The <code>console.log()</code> function.
<pre> Preformatted text, preserving spaces and line breaks. Often used for code blocks. <pre>...</pre>

4. Lists

Lists are crucial for organizing information in a structured and readable way.

4.1 Unordered Lists (<ul>)

Used for lists where the order of items does not matter. Each item is typically marked with a bullet point.


<h3>My Favorite Fruits:</h3>
<ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
    <li>Grapes</li>
</ul>

4.2 Ordered Lists (<ol>)

Used for lists where the order of items is important (e.g., steps in a recipe, rankings). Items are typically marked with numbers or letters.


<h3>Steps to Make Coffee:</h3>
<ol>
    <li>Boil water.</li>
    <li>Add coffee grounds to a filter.</li>
    <li>Pour hot water over grounds.</li>
    <li>Enjoy your coffee!</li>
</ol>

You can customize the numbering style using the type attribute (e.g., type="A" for uppercase letters, type="i" for lowercase Roman numerals).

4.3 Description Lists (<dl>)

Used for lists of terms and their descriptions, like a glossary. It contains <dt> (description term) and <dd> (description details) elements.


<h3>Web Development Glossary:</h3>
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language. The standard markup language for creating web pages.</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets. Used for describing the presentation of a document written in HTML.</dd>
    <dt>JavaScript</dt>
    <dd>A programming language that enables interactive web pages.</dd>
</dl>

6. Tables

HTML tables are used to display data in a tabular format, organized into rows and columns. They are ideal for presenting structured data like financial reports, product specifications, or schedules.


<table>
    <caption>Employee Performance Metrics - Q2 2025</caption>
    <thead>
        <tr>
            <th>Employee ID</th>
            <th>Name</th>
            <th>Department</th>
            <th>Projects Completed</th>
            <th>Rating</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>EMP001</td>
            <td>Alice Johnson</td>
            <td>Engineering</td>
            <td>5</td>
            <td>Excellent</td>
        </tr>
        <tr>
            <td>EMP002</td>
            <td>Bob Williams</td>
            <td>Marketing</td>
            <td>3</td>
            <td>Good</td>
        </tr>
        <tr>
            <td>EMP003</td>
            <td>Charlie Brown</td>
            <td>Design</td>
            <td>4</td>
            <td>Very Good</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">Total Employees Evaluated</td>
            <td>12</td>
            <td>-</td>
        </tr>
    </tfoot>
</table>

Table Structure Elements:

Cell Spanning Attributes:

7. Forms

HTML forms are essential for collecting user input, allowing users to interact with your website by submitting data (e.g., login credentials, search queries, contact information).


<form action="/submit-contact-form" method="POST">
    <div class="mb-4">
        <label for="name" class="block text-gray-700 text-sm font-bold mb-2">Your Name:</label>
        <input type="text" id="name" name="user_name" placeholder="John Doe" required
               class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
    </div>

    <div class="mb-4">
        <label for="email" class="block text-gray-700 text-sm font-bold mb-2">Your Email:</label>
        <input type="email" id="email" name="user_email" placeholder="john.doe@example.com" required
               class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
    </div>

    <div class="mb-6">
        <label for="message" class="block text-gray-700 text-sm font-bold mb-2">Message:</label>
        <textarea id="message" name="user_message" rows="5" placeholder="Your message here..." required
                  class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"></textarea>
    </div>

    <div class="flex items-center justify-between">
        <button type="submit"
                class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
            Send Message
        </button>
        <button type="reset"
                class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
            Reset Form
        </button>
    </div>
</form>

The <form> Tag Attributes:

7.1 Input Elements (<input>)

The <input> tag is the most common form element, with its behavior determined by the type attribute.

Type Description Example
text Single-line text input. <input type="text" name="username">
password Masked input for sensitive information. <input type="password" name="pwd">
email Input for email addresses; provides basic client-side validation. <input type="email" name="user_email">
number Input for numeric values; often includes spin buttons. <input type="number" name="quantity" min="1" max="10">
date Date picker interface. <input type="date" name="event_date">
checkbox Allows selection of zero or more options from a set. <input type="checkbox" name="interest" value="coding">
radio Allows selection of exactly one option from a set (use same name for group). <input type="radio" name="gender" value="male">
file Allows users to select one or more files from their device. <input type="file" name="upload_doc">
submit A button that submits the form data to the server. <input type="submit" value="Register">
reset A button that resets all form fields to their initial values. <input type="reset" value="Clear Form">
hidden A hidden input field not visible to the user, but its value is sent with the form. <input type="hidden" name="user_id" value="12345">

Common Input Attributes:

7.2 Other Important Form Elements:

8. Semantic HTML5

Semantic HTML refers to using HTML markup to reinforce the meaning, or semantics, of the information in web pages rather than just its presentation. HTML5 introduced several new semantic elements that make your web pages more meaningful to browsers, search engines, and assistive technologies.

Using semantic tags helps with:

Tag Purpose / Description Analogy
<header> Represents introductory content, typically at the top of a document or section. Often contains headings, navigation, logos. The "masthead" or "introduction" of a book.
<nav> Contains navigation links for the document or for major sections. The "table of contents" or "index" of a book.
<main> Represents the dominant content of the <body>. There should only be one <main> element per document. The "main story" or "core chapters" of a book.
<article> Represents a self-contained composition (e.g., a blog post, news article, forum post) that could be independently distributed. A single "chapter" or "essay" within a larger publication.
<section> Represents a standalone section of an HTML document, which doesn't have a more specific semantic element to represent it. Typically, sections have a heading. A "part" or "segment" within a chapter.
<aside> Represents a portion of a document whose content is only indirectly related to the document's main content (e.g., sidebars, pull quotes, ads). A "sidebar" or "footnote" in a book.
<footer> Represents a footer for its nearest sectioning content or sectioning root element. Often contains copyright information, contact info, sitemap. The "back cover" or "credits" section of a book.
<figure> Used to encapsulate media content like images, illustrations, diagrams, code snippets, etc., that is referenced from the main flow of the document. A "diagram" or "photo" with its caption.
<figcaption> Provides a caption or legend for the content of a <figure>. The "caption" directly under a photo.
<time> Represents a specific period in time (e.g., a date or a time). A "date stamp" or "timestamp." 

<body>
    <header class="bg-gray-800 text-white p-4">
        <h1 class="text-3xl">My Blog</h1>
        <nav>
            <ul class="flex space-x-4">
                <li><a href="#" class="hover:underline">Home</a></li>
                <li><a href="#" class="hover:underline">Articles</a></li>
                <li><a href="#" class="hover:underline">About</a></li>
            </ul>
        </nav>
    </header>

    <main class="p-4">
        <section>
            <h2>Latest Posts</h2>
            <article class="border p-4 rounded-lg mb-4">
                <h3>Understanding CSS Grid</h3>
                <p>Learn how to create powerful layouts with CSS Grid.</p>
                <footer>
                    Published on <time datetime="2025-07-29">July 29, 2025</time> by Jane Doe
                </footer>
            </article>
            <article class="border p-4 rounded-lg">
                <h3>JavaScript Async/Await</h3>
                <p>Simplifying asynchronous operations in JavaScript.</p>
                <footer>
                    Published on <time datetime="2025-07-28">July 28, 2025</time> by John Smith
                </footer>
            </article>
        </section>

        <aside class="mt-8 p-4 bg-gray-100 rounded-lg">
            <h3>Related Topics</h3>
            <ul class="list-disc pl-5">
                <li><a href="#">Flexbox Tutorial</a></li>
                <li><a href="#">Modern JavaScript Features</a></li>
            </ul>
        </aside>
    </main>

    <footer class="bg-gray-800 text-white p-4 text-center mt-8">
        <p>© 2025 My Blog. All rights reserved.</p>
    </footer>
</body>

9. Embedding Multimedia

HTML5 introduced tags for embedding audio and video directly without requiring plugins like Flash.

9.1 Audio (<audio>)

The <audio> tag embeds sound content.


<h3>Listen to our Sample Audio:</h3>
<audio controls preload="metadata">
    <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
    <source src="https://www.soundhelix.com/examples/ogg/SoundHelix-Song-1.ogg" type="audio/ogg">
    <p>Your browser does not support the audio element. Please try a different browser.</p>
</audio>

Common Attributes for <audio>:

The <source> tag allows you to specify multiple audio formats, letting the browser choose the first one it supports, ensuring broader compatibility.

9.2 Video (<video>)

The <video> tag embeds video content.


<h3>Watch our Sample Video:</h3>
<video width="640" height="360" controls poster="https://placehold.co/640x360/000/fff?text=Video+Thumbnail">
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
    <p>Your browser does not support the video tag. Please try a different browser.</p>
</video>

Common Attributes for <video>:

9.3 Iframes (<iframe>)

The <iframe> tag is used to embed another HTML document within the current HTML document. This is commonly used for embedding content from other websites, such as YouTube videos, Google Maps, or external applications.


<h3>Embedded YouTube Video:</h3>
<!-- Example of embedding a YouTube video -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    title="YouTube video player" frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen></iframe>

<h3>Embedded Google Map:</h3>
<!-- Example of embedding a Google Map -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.254101851226!2d144.9630576153163!3d-37.8162797797515!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0x5045675218ce7b0!2sFederation%20Square!5e0!3m2!1sen!2sau!4v1627548000000!5m2!1sen!2sau"
    width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

Important Considerations for <iframe>:

10. HTML Comments and Entities

10.1 HTML Comments (<!-- ... -->)

Comments are non-rendering notes within your HTML code. They are ignored by the browser but are invaluable for developers to explain code, leave reminders, or temporarily disable sections of code without deleting them.


<!-- This is a single-line comment. It's great for quick notes. -->

<p>This content is visible to the user.</p>

<!--
    This is a
    multi-line
    HTML comment.
-->

<!-- <img src="hidden.jpg" alt="This image is commented out"> -->

10.2 HTML Entities

HTML entities are special codes used to display reserved characters (like <, >, &) that have special meaning in HTML, or to display characters not easily available on a standard keyboard (like copyright symbols, mathematical symbols).

Character Description Entity Name Entity Number Output
< Less than sign &lt; &#60; <
> Greater than sign &gt; &#62; >
& Ampersand &amp; &#38; &
" Double quotation mark &quot; &#34; "
' Single quotation mark (apostrophe) &apos; &#39; '
  Non-breaking space &nbsp; &#160;  
© Copyright symbol &copy; &#169; ©
™ Trademark symbol &trade; &#8482; ™
€ Euro sign &euro; &#8364; € 

<p>To display a less than sign, use &lt; or &#60;.</p>
<p>Copyright &copy; 2025 - All Rights Reserved.</p>
<p>This sentence has&nbsp;&nbsp;&nbsp;&nbsp;multiple spaces.</p>

11. HTML Best Practices and Tips

Writing good HTML goes beyond just making the page render. It involves creating clean, maintainable, accessible, and performant code.

12. Next Steps: Where to Go From Here?

HTML is the foundation, but to build truly interactive and visually appealing websites, you'll need to learn more:

The web development journey is continuous learning. Keep building, experimenting, and exploring!

CSS Tutorial

CSS, or Cascading Style Sheets, is a stylesheet language used for describing the presentation of a document written in HTML. While HTML provides the structure of your web content, CSS is what makes it look good – controlling colors, fonts, layout, and overall visual appeal.

Without CSS, web pages would be plain text documents, much like a newspaper without any design. CSS allows you to separate the content (HTML) from its presentation, making your code more organized, easier to maintain, and more flexible for responsive design.

What You'll Learn:

2. CSS Syntax

A CSS rule-set consists of a selector and a declaration block.


selector {
  property: value;
  property: value;
}

3. How to Add CSS

There are three main ways to insert a style sheet:

3.1 External Stylesheets (Recommended)

External stylesheets are the most common and recommended method. They are ideal when the style is applied to many pages. Each page must link to the stylesheet using the <link> tag inside the <head> section.


<!-- In your HTML file's <head> -->
<link rel="stylesheet" href="styles.css">
                

/* In your styles.css file */
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
}
h1 {
  color: navy;
}

3.2 Internal Stylesheets

An internal stylesheet is used when a single HTML page has a unique style. It's defined within the <style> element inside the <head> section of the HTML page.


<head>
    <style>
        body {
            background-color: lightblue;
        }
        h1 {
            color: white;
            text-align: center;
        }
    </style>
</head>

3.3 Inline Styles

Inline styles are used to apply a unique style to a single HTML element. This is done by adding the style attribute directly to the HTML tag.


<h1 style="color:blue; text-align:center;">This is a Blue Heading</h1>
<p style="color:red;">This is a red paragraph.</p>

Note: Inline styles are generally discouraged for larger projects as they mix content and presentation, making maintenance difficult.

4. CSS Selectors

CSS selectors are used to "find" (or select) the HTML elements you want to style.

4.1 Element Selector

Selects HTML elements based on their tag name.


p {
  font-family: verdana;
  font-size: 20px;
}

4.2 ID Selector

Selects an element with a specific id attribute. An ID is unique within an HTML document, so the ID selector is used to select one unique element.


#header {
  background-color: lightblue;
  color: black;
}
                

<div id="header">Page Header</div>

4.3 Class Selector

Selects elements with a specific class attribute. A class can be used by multiple HTML elements.


.center {
  text-align: center;
  color: red;
}
                

<h1 class="center">Centered Heading</h1>
<p class="center">Centered paragraph.</p>

4.4 Universal Selector (*)

Selects all HTML elements on the page.


* {
  margin: 0;
  padding: 0;
}

4.5 Grouping Selectors

Groups selectors to apply the same styles to multiple elements, separated by commas.


h1, h2, p {
  text-align: center;
  color: blue;
}

4.6 Combinator Selectors

4.7 Pseudo-classes

Used to define a special state of an element (e.g., when a user mouses over an element, or when a link has been visited).

Pseudo-class Description Example
:hover When the user mouses over an element. a:hover { color: hotpink; }
:active When an element is being activated by the user (e.g., clicked). button:active { background-color: darkblue; }
:focus When an element has received focus (e.g., an input field). input:focus { border: 2px solid blue; }
:link A link that has not been visited. a:link { color: blue; }
:visited A link that has been visited. a:visited { color: purple; }
:first-child Selects the first child of its parent. p:first-child { font-weight: bold; }
:last-child Selects the last child of its parent. li:last-child { border-bottom: none; }
:nth-child(n) Selects elements based on their position among siblings. (e.g., :nth-child(odd), :nth-child(2n)) li:nth-child(odd) { background-color: #eee; }

4.8 Pseudo-elements

Used to style a specified part of an element.

Pseudo-element Description Example
::before Inserts content before the content of an element. p::before { content: "Read: "; }
::after Inserts content after the content of an element. a::after { content: " (link)"; }
::first-line Selects the first line of a block-level element. p::first-line { font-weight: bold; }
::first-letter Selects the first letter of a block-level element. p::first-letter { font-size: 2em; }
::selection Applies styles to the portion of an element that is selected by a user. ::selection { background-color: yellow; }

5. The CSS Box Model

All HTML elements can be considered as "boxes". In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.


.box {
  width: 200px; /* Content width */
  height: 100px; /* Content height */
  padding: 25px; /* Space between content and border */
  border: 5px solid blue; /* Border around padding */
  margin: 20px; /* Space outside the border */
  background-color: lightgray;
}

By default, the width and height properties refer to the content area. The CSS box-sizing property allows you to change this. Setting box-sizing: border-box; makes width and height include padding and border, which is often more intuitive for layout.


/* Best practice for all elements */
html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

6. Display and Positioning

6.1 The display Property

The display property is one of the most important CSS properties for controlling layout. Every HTML element has a default display value.

Value Description Characteristics
block Starts on a new line and takes up the full width available. <div>, <p>, <h1>, <section>
inline Does not start on a new line and only takes up as much width as its content. <span>, <a>, <img>, <strong>
inline-block Behaves like an inline element but can have width and height set. Useful for creating grid-like layouts before Flexbox/Grid.
none Hides an element completely (it will not take up any space). display: none;
flex Turns an element into a flex container, enabling Flexbox layout. display: flex;
grid Turns an element into a grid container, enabling CSS Grid layout. display: grid; 

span {
  display: block; /* Makes an inline span behave like a block element */
  margin-bottom: 10px;
}

6.2 The position Property

The position property specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky).

Value Description
static (Default) Elements are positioned according to the normal flow of the document. top, right, bottom, left properties have no effect.
relative Positioned relative to its normal position. top, right, bottom, left properties will move it from its normal position. Other content will not be adjusted to fit into any gap left by the element.
absolute Positioned relative to its nearest positioned ancestor (instead of the viewport). If no positioned ancestor exists, it uses the document body and moves along with page scrolling.
fixed Positioned relative to the viewport, meaning it always stays in the same place even if the page is scrolled. Often used for navigation bars or footers.
sticky Positioned based on the user's scroll position. It toggles between relative and fixed, depending on the scroll position. 

.parent {
  position: relative; /* Essential for absolute children */
  height: 200px;
  border: 2px solid green;
}
.child {
  position: absolute;
  top: 20px;
  left: 50px;
  background-color: yellow;
  padding: 10px;
}
.fixed-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: red;
  color: white;
  padding: 15px;
  border-radius: 50%;
  z-index: 100; /* Ensures it stays on top */
}

7. Flexbox (Flexible Box Layout)

Flexbox is a one-dimensional layout method for arranging items in rows or columns. It makes it easier to design flexible responsive layout structures without using float or positioning.

To use Flexbox, you define a flex container and its flex items.


.flex-container {
  display: flex; /* Makes the element a flex container */
  flex-direction: row; /* or column, row-reverse, column-reverse */
  justify-content: center; /* Aligns items along the main axis */
  align-items: center; /* Aligns items along the cross axis */
  gap: 10px; /* Space between flex items */
  height: 200px;
  border: 2px solid blue;
}

.flex-item {
  background-color: lightgray;
  padding: 20px;
  border: 1px solid #333;
}
                

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

Key Flexbox Properties:

8. CSS Grid Layout

CSS Grid Layout is a two-dimensional layout system for the web. It allows you to design complex responsive web design layouts more easily and consistently across different browsers. It works by dividing a page into rows and columns, and placing content into these sections.


.grid-container {
  display: grid; /* Makes the element a grid container */
  grid-template-columns: 1fr 2fr 1fr; /* Defines 3 columns: 1 part, 2 parts, 1 part */
  grid-template-rows: auto 100px; /* Defines 2 rows: auto height, 100px height */
  gap: 15px; /* Space between grid items */
  height: 300px;
  border: 2px solid purple;
}

.grid-item {
  background-color: lightcoral;
  padding: 20px;
  border: 1px solid #333;
}

/* Specific item placement */
.item-a {
  grid-column: 1 / 3; /* Spans from column line 1 to 3 */
  grid-row: 1;
}
.item-b {
  grid-column: 3;
  grid-row: 1 / 3; /* Spans from row line 1 to 3 */
}
                

<div class="grid-container">
  <div class="grid-item item-a">Item A</div>
  <div class="grid-item item-b">Item B</div>
  <div class="grid-item">Item C</div>
  <div class="grid-item">Item D</div>
</div>

Key CSS Grid Properties:

9. Typography

CSS provides extensive control over text and fonts.

Property Description Example
font-family Specifies the font for an element. Use fallback fonts. font-family: "Helvetica Neue", Arial, sans-serif;
font-size Sets the size of the text. (e.g., px, em, rem, %, vw) font-size: 16px; / font-size: 1.2em;
font-weight Sets the thickness of the characters. (e.g., normal, bold, 100-900) font-weight: bold; / font-weight: 600;
color Sets the color of the text. color: #333; / color: rgb(255, 0, 0);
text-align Aligns the text horizontally. (left, right, center, justify) text-align: center;
line-height Sets the height of a line of text. line-height: 1.5; (unitless is relative to font-size)
text-decoration Adds or removes decorations from text. (none, underline, overline, line-through) text-decoration: none;
text-transform Controls the capitalization of text. (none, uppercase, lowercase, capitalize) text-transform: uppercase;
letter-spacing Increases or decreases the space between characters. letter-spacing: 2px;
word-spacing Increases or decreases the space between words. word-spacing: 5px;

10. Colors, Backgrounds, and Borders

10.1 Colors

CSS allows you to specify colors using various formats:


.red-text { color: red; }
.hex-blue { color: #0000FF; }
.rgb-green { color: rgb(0, 128, 0); }
.rgba-purple { color: rgba(128, 0, 128, 0.7); }
.hsl-orange { color: hsl(30, 100%, 50%); }

10.2 Backgrounds

Control the background of elements.

Property Description Example
background-color Sets the background color of an element. background-color: #f0f0f0;
background-image Sets one or more background images for an element. background-image: url('image.png');
background-repeat Specifies if/how a background image will be repeated. (repeat, no-repeat, repeat-x, repeat-y) background-repeat: no-repeat;
background-position Sets the starting position of a background image. (e.g., center, top left, 50% 50%) background-position: center center;
background-size Specifies the size of the background image. (e.g., auto, cover, contain, 100% 100%) background-size: cover;
background-attachment Specifies whether a background image scrolls with the rest of the page or is fixed. (scroll, fixed, local) background-attachment: fixed;
background (shorthand) Shorthand for all background properties. background: url('img.png') no-repeat center / cover;

10.3 Borders

Define the border around an element.

Property Description Example
border-width Width of the border. border-width: 2px;
border-style Style of the border. (solid, dotted, dashed, double, none) border-style: solid;
border-color Color of the border. border-color: blue;
border (shorthand) Shorthand for width, style, and color. border: 1px solid black;
border-radius Adds rounded corners to an element's border. border-radius: 8px; / border-radius: 50%; (for circles)

11. Shadows, Transitions, and Animations

11.1 Box Shadows (box-shadow)

Adds shadow effects around an element's frame.


.card {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* h-offset v-offset blur-radius color */
  padding: 20px;
  background-color: white;
  border-radius: 8px;
}
.inset-shadow {
  box-shadow: inset 0 0 10px red; /* Inset shadow */
}

11.2 Text Shadows (text-shadow)

Adds shadow effects to text.


h1 {
  text-shadow: 2px 2px 4px #aaa; /* h-offset v-offset blur-radius color */
}

11.3 Transitions

Transitions allow you to smoothly change property values over a given duration. They are used to create simple animations when an element's state changes (e.g., on hover).


.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.button:hover {
  background-color: darkblue;
  transform: scale(1.05); /* Scales the button up slightly */
}

Key Transition Properties:

11.4 Animations

Animations allow for more complex, multi-step transitions and can run automatically without user interaction. They are defined using @keyframes rules.


/* Define the animation steps */
@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

.animated-box {
  width: 100px;
  height: 100px;
  background-color: green;
  animation-name: pulse; /* Name of the @keyframes rule */
  animation-duration: 2s; /* How long one cycle takes */
  animation-iteration-count: infinite; /* How many times it runs (or infinite) */
  animation-timing-function: ease-in-out; /* Speed curve */
}
                

<div class="animated-box"></div>

Key Animation Properties:

12. Responsive Design with Media Queries

Responsive web design is about making web pages look good on all devices (desktops, tablets, and phones). Media queries are a CSS technique that allows you to apply styles based on device characteristics, most commonly screen width.


/* Default styles for smaller screens (mobile-first) */
body {
  font-size: 16px;
}
.container {
  padding: 1rem;
}

/* Styles for screens wider than 600px (e.g., tablets) */
@media screen and (min-width: 600px) {
  body {
    font-size: 18px;
  }
  .container {
    padding: 2rem;
  }
}

/* Styles for screens wider than 992px (e.g., desktops) */
@media screen and (min-width: 992px) {
  body {
    font-size: 20px;
  }
  .container {
    max-width: 1200px;
  }
  .sidebar {
    display: block; /* Show sidebar on larger screens */
  }
}

The @media rule allows you to define different styles for different media types/devices. Common media features used in queries include:

Mobile-First Approach: It's a common and effective strategy to design for mobile devices first, then progressively enhance the design for larger screens using min-width media queries. This ensures a solid base experience for all users.

13. CSS Variables (Custom Properties)

CSS variables (also called custom properties) allow you to define reusable values throughout your stylesheets. This makes your CSS more maintainable, flexible, and easier to update.

Variables are defined with two hyphens (--) followed by a name, and accessed using the var() function.


:root { /* Define variables globally on the root element */
  --primary-color: #0d6efd;
  --secondary-color: #dc2626;
  --spacing-unit: 1rem;
  --font-stack: 'Inter', sans-serif;
}

body {
  font-family: var(--font-stack);
  background-color: var(--primary-color);
  color: white;
}

.button {
  background-color: var(--secondary-color);
  padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
  border-radius: 0.5rem;
  color: white;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: var(--primary-color);
}

Benefits of CSS Variables:

14. CSS Best Practices and Tips

Writing effective and maintainable CSS is crucial for any web project.

15. Next Steps: Beyond CSS

You've now gained a strong understanding of CSS, enabling you to style your web pages beautifully. To continue your journey in web development, here are the next logical steps:

Keep experimenting, keep learning, and enjoy bringing your designs to life on the web!

JavaScript Tutorial

JavaScript is a high-level, interpreted programming language that is one of the three core technologies of the World Wide Web, alongside HTML and CSS. While HTML provides the structure and CSS handles the styling, JavaScript brings interactivity and dynamism to your web pages.

It enables you to create dynamic content, control multimedia, animate images, validate forms, and much more. JavaScript runs directly in the user's web browser (client-side), making web applications fast and responsive.

What You'll Learn:

2. How to Add JavaScript

JavaScript code can be inserted into an HTML page in a few ways:

2.1 External JavaScript (Recommended)

The most common and preferred method. JavaScript code is placed in separate .js files and linked to the HTML using the <script> tag's src attribute.


<!-- In your HTML file, typically before the closing </body> tag -->
<script src="my-script.js"></script>
                

// In your my-script.js file
console.log("Hello from an external JavaScript file!");

document.addEventListener('DOMContentLoaded', () => {
    const myButton = document.getElementById('myButton');
    if (myButton) {
        myButton.addEventListener('click', () => {
            alert('Button clicked from external JS!'); // Using alert for demo, avoid in real apps
        });
    }
});

Placing scripts at the end of the <body> ensures that the HTML content is loaded and available before the JavaScript tries to interact with it.

2.2 Internal JavaScript

JavaScript code is placed directly within <script> tags inside the HTML document.


<body>
    <h1 id="greeting">Hello!</h1>

    <script>
        // This JavaScript code is embedded directly in the HTML
        const greetingElement = document.getElementById('greeting');
        greetingElement.textContent = 'Hello, World from Internal JS!';
    </script>
</body>

2.3 Inline JavaScript (Generally Discouraged)

JavaScript code is directly embedded into HTML attributes, often used for event handlers.


<button onclick="alert('Button clicked!');">Click Me</button>

Note: Inline JavaScript mixes structure and behavior, making code harder to read, debug, and maintain. Prefer external or internal scripts for better separation of concerns.

3. Variables and Data Types

3.1 Variables

Variables are containers for storing data values. In JavaScript, you can declare variables using var, let, or const.

Keyword Scope Reassignment Redeclaration
var Function-scoped Yes Yes (can lead to bugs)
let Block-scoped Yes No
const Block-scoped No (must be initialized) No 

// Using var (older way)
var greeting = "Hello";
greeting = "Hi"; // Reassignment is fine
var greeting = "Hey"; // Redeclaration is also fine (but can be confusing)

// Using let (preferred for mutable variables)
let userName = "Alice";
userName = "Bob"; // Reassignment is fine
// let userName = "Charlie"; // Error: Cannot redeclare block-scoped variable

// Using const (preferred for immutable variables/constants)
const PI = 3.14159;
// PI = 3.14; // Error: Assignment to constant variable

const user = { name: "Dave", age: 30 };
user.age = 31; // Allowed: properties of a const object can be changed
// user = { name: "Eve" }; // Error: Cannot reassign the const object itself

Best Practice: Use const by default. If you know the variable's value will change, use let. Avoid var in modern JavaScript due to its confusing scoping rules.

3.2 Data Types

JavaScript has several built-in data types:


let name = "Alice"; // string
let age = 25; // number
let isStudent = true; // boolean
let city; // undefined
let car = null; // null

let person = { // object
    firstName: "John",
    lastName: "Doe",
    age: 30
};

let colors = ["red", "green", "blue"]; // array (which is a type of object)

4. Operators

Operators are symbols that perform operations on values and variables.

4.1 Arithmetic Operators

OperatorDescription
+Addition
-Subtraction
*Multiplication
/Division
%Modulus (remainder)
**Exponentiation (ES6)
++Increment
--Decrement

4.2 Assignment Operators

OperatorExampleSame As
=x = 5x = 5
+=x += 5x = x + 5
-=x -= 5x = x - 5
*=x *= 5x = x * 5
/=x /= 5x = x / 5
%=x %= 5x = x % 5
**=x **= 5x = x ** 5

4.3 Comparison Operators

OperatorDescription
==Equal to (loose equality, type coercion)
===Strictly equal to (value and type)
!=Not equal to (loose inequality)
!==Strictly not equal to
>Greater than
<Less than
>=Greater than or equal to
<=Less than or equal to

Note: Always prefer === and !== for comparisons to avoid unexpected type coercion issues.

4.4 Logical Operators

OperatorDescription
&&Logical AND
||Logical OR
!Logical NOT
 

let a = 10, b = 5, c = "10";

console.log(a + b); // 15
console.log(a == c); // true (loose equality, "10" becomes 10)
console.log(a === c); // false (strict equality, different types)
console.log(a > b && b < 10); // true && true -> true
console.log(!(a === b)); // !false -> true

5. Control Flow (Conditionals and Loops)

5.1 Conditional Statements

Execute different blocks of code based on conditions.

5.2 Loops

Repeatedly execute a block of code until a condition is met.

6. Functions

Functions are blocks of code designed to perform a particular task. They allow you to write reusable code, making your programs more modular and efficient.

6.1 Function Declaration

The traditional way to define a function.


function greet(name) {
    return "Hello, " + name + "!";
}
console.log(greet("Alice")); // "Hello, Alice!"

6.2 Function Expression

Defining a function as part of an expression, often assigned to a variable.


const add = function(a, b) {
    return a + b;
};
console.log(add(5, 3)); // 8

6.3 Arrow Functions (ES6)

A more concise syntax for writing function expressions, especially useful for short, single-line functions.


const multiply = (a, b) => a * b;
console.log(multiply(4, 2)); // 8

const sayHi = () => console.log("Hi there!");
sayHi(); // "Hi there!"

const getSquare = num => num * num; // Parentheses optional for single parameter
console.log(getSquare(7)); // 49

6.4 Function Parameters and Arguments


function calculateArea(width, height) { // width, height are parameters
    return width * height;
}
let area = calculateArea(10, 5); // 10, 5 are arguments
console.log(area); // 50

7. Arrays and Objects

7.1 Arrays

Arrays are ordered collections of values. They are zero-indexed, meaning the first element is at index 0.


// Declaring an array
const fruits = ["apple", "banana", "cherry"];

// Accessing elements
console.log(fruits[0]); // "apple"
console.log(fruits[2]); // "cherry"

// Modifying elements
fruits[1] = "grape";
console.log(fruits); // ["apple", "grape", "cherry"]

// Array length
console.log(fruits.length); // 3

// Adding elements
fruits.push("orange"); // Adds to the end
fruits.unshift("kiwi"); // Adds to the beginning
console.log(fruits); // ["kiwi", "apple", "grape", "cherry", "orange"]

// Removing elements
fruits.pop(); // Removes from the end ("orange")
fruits.shift(); // Removes from the beginning ("kiwi")
console.log(fruits); // ["apple", "grape", "cherry"]

// Iterating over an array
fruits.forEach(function(fruit, index) {
    console.log(`${index}: ${fruit}`);
});
// Or with a for...of loop (ES6)
for (const fruit of fruits) {
    console.log(fruit);
}

7.2 Objects

Objects are unordered collections of key-value pairs. They are used to store structured data.


// Declaring an object
const person = {
    firstName: "John",
    lastName: "Doe",
    age: 30,
    isStudent: false,
    hobbies: ["reading", "hiking", "coding"],
    address: {
        street: "123 Main St",
        city: "Anytown"
    },
    greet: function() { // Method (function as a property)
        return `Hello, my name is ${this.firstName} ${this.lastName}.`;
    }
};

// Accessing properties
console.log(person.firstName); // "John" (dot notation)
console.log(person["age"]); // 30 (bracket notation, useful for dynamic keys)
console.log(person.address.city); // "Anytown"

// Modifying properties
person.age = 31;
person["isStudent"] = true;

// Adding new properties
person.email = "john.doe@example.com";

// Deleting properties
delete person.isStudent;

// Calling a method
console.log(person.greet()); // "Hello, my name is John Doe."

// Iterating over object properties (for...in loop)
for (const key in person) {
    if (typeof person[key] !== 'function') { // Exclude methods
        console.log(`${key}: ${person[key]}`);
    }
}

// Getting keys or values as arrays (ES6)
console.log(Object.keys(person)); // ["firstName", "lastName", "age", "hobbies", "address", "email", "greet"]
console.log(Object.values(person)); // ["John", "Doe", 31, Array(3), {…}, "john.doe@example.com", ƒ]

8. DOM Manipulation

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page structure as a tree of objects, allowing JavaScript to access and manipulate HTML elements and styles, and react to user events.

8.1 Selecting Elements

Method Description Example
document.getElementById() Selects a single element by its unique id. const el = document.getElementById('myId');
document.querySelector() Selects the first element that matches a specified CSS selector. const el = document.querySelector('.myClass');
document.querySelectorAll() Selects all elements that match a specified CSS selector, returning a NodeList. const els = document.querySelectorAll('p.intro');
document.getElementsByClassName() Selects all elements with a specific class name, returning an HTMLCollection. const els = document.getElementsByClassName('item');
document.getElementsByTagName() Selects all elements with a specific tag name, returning an HTMLCollection. const els = document.getElementsByTagName('div');

8.2 Modifying Content and Attributes


<p id="demo">Original text.</p>
<img id="myImage" src="https://placehold.co/100x100/ccc/000?text=Old" alt="Old Image">
                

const demoParagraph = document.getElementById('demo');
demoParagraph.textContent = "New text from JavaScript!"; // Changes text content
demoParagraph.innerHTML = "Bold new text!"; // Changes HTML content

const myImage = document.getElementById('myImage');
myImage.src = "https://placehold.co/100x100/007bff/fff?text=New"; // Changes src attribute
myImage.alt = "New Image Description"; // Changes alt attribute
myImage.setAttribute('data-custom', 'some-value'); // Sets a custom attribute

8.3 Modifying Styles


<div id="styledBox" class="w-24 h-24 bg-blue-500 rounded-lg"></div>
                

const styledBox = document.getElementById('styledBox');

// Direct style manipulation (inline styles)
styledBox.style.backgroundColor = "green";
styledBox.style.width = "150px";
styledBox.style.border = "2px solid purple";

// Manipulating classes (preferred for complex styling)
styledBox.classList.add('shadow-lg'); // Adds a Tailwind shadow class
styledBox.classList.remove('bg-blue-500'); // Removes blue background
styledBox.classList.add('bg-red-500'); // Adds red background
styledBox.classList.toggle('rounded-full'); // Toggles rounded-full class

8.4 Creating and Removing Elements


<ul id="myList">
    <li>Existing Item 1</li>
</ul>
                

const myList = document.getElementById('myList');

// Create a new list item
const newItem = document.createElement('li');
newItem.textContent = "New Item Added!";
myList.appendChild(newItem); // Adds to the end of the list

// Create and insert an element at a specific position
const firstItem = myList.firstElementChild;
const anotherItem = document.createElement('li');
anotherItem.textContent = "Inserted Item";
myList.insertBefore(anotherItem, firstItem); // Inserts before the first child

// Remove an element
const itemToRemove = myList.lastElementChild;
myList.removeChild(itemToRemove); // Removes the last item

9. Events and Event Handling

Events are actions or occurrences that happen in the browser, such as a user clicking a button, typing into an input field, or the page finishing loading. JavaScript allows you to detect these events and execute code in response.

9.1 Event Listeners

The most common and flexible way to handle events is using addEventListener().


<button id="myBtn" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Click Me!</button>
<p id="messageDisplay" class="mt-4 text-lg"></p>
                

document.addEventListener('DOMContentLoaded', () => {
    const myButton = document.getElementById('myBtn');
    const messageDisplay = document.getElementById('messageDisplay');

    // Add a click event listener
    myButton.addEventListener('click', function() {
        messageDisplay.textContent = "Button was clicked!";
        console.log("Button clicked!");
    });

    // Example of a hover effect using mouseenter/mouseleave
    myButton.addEventListener('mouseenter', () => {
        myButton.style.backgroundColor = '#4CAF50'; // Green
    });
    myButton.addEventListener('mouseleave', () => {
        myButton.style.backgroundColor = '#3b82f6'; // Original blue (Tailwind bg-blue-500)
    });
});

Interactive Demo:

9.2 Common Event Types

Event Type Description Example Element
clickWhen an element is clicked.<button>, <a>, any element
mouseover / mouseenterWhen the mouse pointer enters an element.Any element
mouseout / mouseleaveWhen the mouse pointer leaves an element.Any element
keydownWhen a key is pressed down.document, <input>
keyupWhen a key is released.document, <input>
submitWhen a form is submitted.<form>
changeWhen the value of an input element changes.<input>, <select>, <textarea>
loadWhen the entire page has loaded (including resources).window, <img>
DOMContentLoadedWhen the HTML document has been completely loaded and parsed (without waiting for stylesheets, images, etc.).document

10. Asynchronous JavaScript

JavaScript is single-threaded, meaning it executes one task at a time. However, many operations (like fetching data from a server, reading files) take time and would "block" the main thread, making the page unresponsive. Asynchronous JavaScript allows these operations to run in the background without blocking the main thread.

10.1 Callbacks (Older Approach)

Functions passed as arguments to other functions, to be executed after the main function completes.


function fetchData(callback) {
    setTimeout(() => {
        const data = "Data fetched!";
        callback(data); // Execute the callback with the data
    }, 2000); // Simulate 2-second delay
}

console.log("Start fetching data...");
fetchData(function(data) {
    console.log(data); // "Data fetched!" (appears after 2 seconds)
});
console.log("Continue doing other tasks...");

Note: Callbacks can lead to "callback hell" (deeply nested callbacks) for complex asynchronous flows.

10.2 Promises (Modern Approach)

Promises are objects that represent the eventual completion (or failure) of an asynchronous operation and its resulting value.


function fetchDataPromise() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = true; // Simulate success or failure
            if (success) {
                resolve("Data fetched successfully with Promise!");
            } else {
                reject("Failed to fetch data with Promise.");
            }
        }, 1500);
    });
}

console.log("Start fetching data with Promise...");
fetchDataPromise()
    .then(data => {
        console.log(data); // Handles successful resolution
    })
    .catch(error => {
        console.error(error); // Handles rejection
    })
    .finally(() => {
        console.log("Promise operation complete."); // Always runs
    });
console.log("Continuing other tasks after Promise call...");

10.3 Async/Await (ES2017 - Even More Modern)

async and await keywords make asynchronous code look and behave more like synchronous code, making it easier to read and write.


async function getMyData() {
    try {
        console.log("Fetching data with async/await...");
        const response = await fetchDataPromise(); // Await pauses execution until Promise resolves
        console.log(response);
        console.log("Data processing complete.");
    } catch (error) {
        console.error("Error in async/await:", error);
    }
}

getMyData();
console.log("This will run before getMyData finishes fetching.");

async functions always return a Promise. await can only be used inside an async function and pauses the execution of the async function until the Promise settles (resolves or rejects).

11. Error Handling (try...catch)

Error handling allows your program to gracefully manage unexpected situations or errors that occur during execution, preventing the entire script from crashing.


function divide(a, b) {
    if (b === 0) {
        throw new Error("Division by zero is not allowed.");
    }
    return a / b;
}

try {
    let result1 = divide(10, 2);
    console.log("Result 1:", result1); // Result 1: 5

    let result2 = divide(10, 0); // This will throw an error
    console.log("Result 2:", result2); // This line will not be reached
} catch (error) {
    console.error("An error occurred:", error.message); // An error occurred: Division by zero is not allowed.
} finally {
    console.log("Execution finished (regardless of error).");
}

12. Modern JavaScript (ES6+) Features

ECMAScript 2015 (ES6) introduced significant enhancements to JavaScript, making it more powerful and enjoyable to write. Many of these features are now standard practice.

13. JavaScript Best Practices and Tips

Writing robust, efficient, and maintainable JavaScript is key to building successful web applications.

14. Next Steps: Becoming a JavaScript Master

You've now covered the core concepts of JavaScript! This is a fantastic starting point. To truly become proficient in web development and build complex applications, consider these next steps:

JavaScript is a powerful and ever-evolving language. Embrace the learning journey, build amazing things, and enjoy the process!