Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
20 views

HTML Css Js Revision

Uploaded by

princebatar21
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
20 views

HTML Css Js Revision

Uploaded by

princebatar21
Copyright
© © All Rights Reserved
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