Scribd
Upload
37 views

HTML Css Js Revision

Uploaded by

princebatar21
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
37 views

HTML Css Js Revision

Uploaded by

princebatar21
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

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

You might also like