Table of Contents
Table of Contents
1. Introduction
2. HTML Basics
3. CSS Basics
4. JavaScript Basics
Chapter 1: Introduction
Welcome to the comprehensive HTML, CSS, and JavaScript revision guide. This guide covers
essential elements, properties, and methods, providing a detailed reference for web development
basics.
Chapter 2: HTML Basics
HTML Basics
Basic Tags and Structure
- <!DOCTYPE html>: Defines the document type.
- <html>: Root element of an HTML page.
- <head>: Contains meta-information about the HTML document.
- <title>: Sets the title of the document.
- <meta>: Metadata about the HTML document.
- <link>: Links to external resources.
- <style>: Embeds internal CSS.
- <script>: Embeds or links to JavaScript.
- <body>: Contains the content of the document.
Text Formatting
- <h1> to <h6>: Headings.
- <p>: Paragraph.
- <br>: Line break.
- <hr>: Horizontal rule.
- <strong>, <b>: Bold text.
- <em>, <i>: Italic text.
- <u>: Underlined text.
- <small>: Smaller text.
- <mark>: Marked/highlighted text.
- <sub>, <sup>: Subscript and superscript text.
Links and Media
- <a>: Anchor (link).
- <img>: Image.
- <map>, <area>: Image maps.
- <audio>: Audio content.
- <video>: Video content.
- <source>: Multiple media resources.
- <embed>: External content.
- <object>: External resources.
- <iframe>: Inline frame.
Lists
- <ul>: Unordered list.
- <ol>: Ordered list.
- <li>: List item.
- <dl>, <dt>, <dd>: Description list, term, and description.
Tables
- <table>: Table.
- <tr>: Table row.
- <td>: Table cell.
- <th>: Table header cell.
- <thead>, <tbody>, <tfoot>: Table sections.
- colspan, rowspan: Cell spanning.
Forms and Input
- <form>: HTML form.
- <input>: Input control.
- <textarea>: Multi-line text input.
- <button>: Button.
- <select>, <option>, <optgroup>: Drop-down list.
- <label>: Label for input.
- <fieldset>, <legend>: Grouping form elements.
- Input types: text, password, submit, reset, radio, checkbox, file, hidden, image, date, email,
number, search, tel, url, etc.
Semantic Elements
- <header>, <footer>, <nav>, <main>, <article>, <section>, <aside>, <figure>, <figcaption>.
Chapter 3: CSS Basics
CSS Basics
Selectors
- Universal selector *.
- Type selector element.
- Class selector .class.
- ID selector #id.
- Attribute selector [attribute=value].
- Pseudo-classes: :hover, :focus, :nth-child(n), :first-child, :last-child, :not(selector).
- Pseudo-elements: ::before, ::after, ::first-letter, ::first-line.
Properties
- Color and Background:
- color
- background-color
- background-image
- background-repeat
- background-position
- background-size
- Text:
- font-family
- font-size
- font-weight
- font-style
- text-align
- text-decoration
- text-transform
- line-height
- letter-spacing
- Box Model:
- width
- height
- margin
- padding
- border
- border-radius
- box-shadow
- Display and Positioning:
- display
- visibility
- position
- top
- right
- bottom
- left
- z-index
- float
- clear
- overflow
- Flexbox:
- display: flex
- flex-direction
- justify-content
- align-items
- flex-wrap
- flex-grow
- flex-shrink
- flex-basis
- Grid:
- display: grid
- grid-template-columns
- grid-template-rows
- grid-column
- grid-row
- gap
- justify-items
- align-items
- Responsive Design:
- Media queries @media
- max-width
- min-width
- max-height
- min-height
- orientation
- aspect-ratio
Chapter 4: JavaScript Basics
JavaScript Basics
Variables and Data Types
- var, let, const
- Data Types: Number, String, Boolean, Object, Array, Function, Null, Undefined, Symbol, BigInt
Operators
- Arithmetic: +, -, *, /, %, **
- Assignment: =, +=, -=, *=, /=, %=
- Comparison: ==, !=, ===, !==, >, <, >=, <=
- Logical: &&, ||, !
- Bitwise: &, |, ^, ~, <<, >>, >>>
Control Structures
- Conditional statements: if, else if, else
- Switch statement: switch
- Loop statements: for, while, do while
- Control flow: break, continue
Functions
- Function declaration:
function functionName(parameters) {
// code to be executed
- Function expression:
const functionName = function(parameters) {
// code to be executed
};
- Arrow function:
const functionName = (parameters) => {
// code to be executed
};
Objects and Arrays
- Objects:
const person = {
firstName: "John",
lastName: "Doe",
age: 30,
fullName: function() {
return this.firstName + " " + this.lastName;
};
- Arrays:
const numbers = [1, 2, 3, 4, 5];
DOM Manipulation
- document.getElementById()
- document.querySelector()
- document.querySelectorAll()
- element.innerHTML
- element.textContent
- element.setAttribute()
- element.getAttribute()
- element.classList.add()
- element.classList.remove()
- element.classList.toggle()
Events
- element.addEventListener()
- Common events: click, dblclick, mouseover, mouseout, mousedown, mouseup, mousemove,
keydown, keyup, keypress, submit, change, focus, blur
ES6 Features
- let, const
- Arrow functions
- Template literals
- Destructuring
- Default parameters
- Rest and spread operators
