HTML, CSS, and JavaScript Concepts

HTML Tags

Basic Structure


<!DOCTYPE html>
<html>
    <head>
        <title>Document Title</title>
    </head>
    <body>
        <h1>Main Heading</h1>
        <p>This is a paragraph.</p>
        <br>
        <hr>
    </body>
</html>

Text Formatting


<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is a paragraph.</p>
<br>
<hr>

Lists


<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

<ol>
    <li>First</li>
    <li>Second</li>
</ol>

Links and Images


<a href="https://www.example.com">This is a link</a>
<img src="https://www.example.com/image.jpg" alt="Description">

Tables


<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>

Forms


<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <textarea rows="4" cols="50"></textarea>
    <button type="submit">Submit</button>
    <select>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
    </select>
</form>

Media


<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

Semantic Tags


<header>
    <h1>Website Header</h1>
</header>

<nav>
    <a href="#home">Home</a>
    <a href="#about">About</a>
</nav>

<main>
    <article>
        <h2>Article Title</h2>
        <p>This is an article.</p>
    </article>
</main>

<footer>
    <p>Footer content.</p>
</footer>

Div and Span


<div>This is a block-level container</div>
<span>This is an inline container</span>

Iframe


<iframe src="https://www.example.com" width="600" height="400"></iframe>

CSS Concepts

Selectors


p { color: blue; }
.class { font-size: 20px; }
#id { background-color: yellow; }

Basic Properties


body { color: #333; background-color: #f4f4f4; }
h1 { font-size: 2em; text-align: center; }
p { margin: 20px; padding: 10px; }

Layout


.container { display: flex; flex-direction: row; }
.box { width: 100px; height: 100px; background-color: red; }

Borders and Spacing


.box { border: 2px solid black; border-radius: 10px; margin: 20px; padding: 10px; }

Pseudo-classes and Pseudo-elements


a:hover { color: green; }
button:active { background-color: red; }
p::before { content: "Note: "; font-weight: bold; }

JavaScript Concepts

Basic Syntax


alert("Hello World!");
console.log("Logging to the console.");
var name = "John";
let age = 30;
const PI = 3.14;

function greet() {
    console.log("Hello!");
}

DOM Manipulation


document.getElementById("example").innerHTML = "New Content";
document.querySelector(".example").style.color = "red";

Events


document.getElementById("btn").onclick = function() {
    alert("Button clicked!");
};

Loops and Conditions


for (let i = 0; i < 5; i++) {
    console.log(i);
}

if (age > 18) {
    console.log("Adult");
} else {
    console.log("Minor");
}

Functions and Scope


function add(a, b) {
    return a + b;
}

let result = add(5, 3);
console.log(result);

Arrays and Objects


let array = [1, 2, 3];
array.push(4);
console.log(array);

let obj = {name: "John", age: 30};
console.log(obj.name);

Basic Algorithms


let numbers = [4, 2, 7, 1];
numbers.sort();
console.log(numbers);

let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers);

Interactivity


let name = prompt("What's your name?");
alert("Hello, " + name + "!");