Scribd
Upload
3 views

HTML CSS JS

The document provides an overview of HTML, CSS, and JavaScript, highlighting their roles in web development. It covers essential concepts such as UI/UX design, responsive design, and the development environment setup. Additionally, it discusses advanced topics like TypeScript, ES6, and various JavaScript functions and events.

Uploaded by

RAVI TEJA C
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

HTML CSS JS

The document provides an overview of HTML, CSS, and JavaScript, highlighting their roles in web development. It covers essential concepts such as UI/UX design, responsive design, and the development environment setup. Additionally, it discusses advanced topics like TypeScript, ES6, and various JavaScript functions and events.

Uploaded by

RAVI TEJA C
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

HTML CSS JS

1. Overview of HTML
HTML (HyperText Markup Language) is the foundation of web pages.
It structures content using tags like <p> , <h1> , <img> , etc.
Web browsers read HTML to display elements on the page.
It consists of elements, attributes, and nesting rules.
HTML5 introduced semantic tags like <header> , <article> , <section> .
Forms allow user input with <input> , <textarea> , and <button> .
🔹 Example:

<!DOCTYPE html>
<html>
<head><title>My Webpage</title></head>
<body><h1>Welcome to HTML</h1></body>
</html>

2. Overview of CSS
CSS (Cascading Style Sheets) styles HTML elements.
It controls layout, colors, fonts, and spacing of web pages.
There are three types of CSS: Inline, Internal, and External.
CSS3 introduced animations, flexbox, grid, and media queries.
CSS follows the Box Model: Margin, Border, Padding, and Content.
🔹 Example: Changing text color using CSS

p { color: blue; font-size: 20px; }

3. Concepts: UI/UX and Web Design


UI (User Interface) focuses on visual design and interactivity.
UX (User Experience) ensures smooth navigation and usability.
Web design includes layout, typography, colors, and responsiveness.
Wireframes and prototypes are used before actual development.
Modern web design follows Material Design or Flat Design principles.

4. Overview of JavaScript
JavaScript adds interactivity and logic to web pages.
It runs in the browser and interacts with HTML & CSS.
It can handle events, animations, and DOM manipulations.
Supports variables, loops, functions, and object-oriented programming.
JS is used for both frontend and backend (Node.js).
🔹 Example: Displaying an alert

alert("Hello, JavaScript!");

5. Setting Up the Development Environment


A basic HTML, CSS, and JavaScript environment needs:

A code editor like VS Code or Sublime Text.


A web browser (Chrome, Firefox, Edge).
A local server (XAMPP, Live Server extension).

6. Working with Different HTML Elements


HTML includes text elements ( <p> , <h1> ), media ( <img> , <video> ), forms ( <input> ), and
layout ( <div> ).
🔹 Example: Creating a form

<form>
<input type="text" placeholder="Enter Name">
<button>Submit</button>
</form>
7. Build a Website
A website consists of HTML (structure), CSS (design), and JavaScript (functionality).
Frameworks like Bootstrap make web development faster.
Websites can be static or dynamic (connected to a backend).

8. Responsive Design
Responsive design ensures a website adapts to different screen sizes.
Uses CSS media queries to adjust styles for devices.
🔹 Example:

@media (max-width: 600px) {


body { background-color: lightgray; }
}

9. Inline & External CSS


Inline CSS: Added inside HTML tags using style attribute.
External CSS: Written in a separate .css file for better maintainability.
🔹 Example:

<p style="color:red;">This is inline CSS</p>


<link rel="stylesheet" href="styles.css">

10. CSS: Font, Background, Border, Padding


Fonts: font-family , font-size , font-weight .
Background: background-color , background-image .
Borders: border-width , border-radius .
Padding: Space inside an element.
🔹 Example:
p { font-family: Arial; background-color: yellow; padding: 10px; }

11. JavaScript: Working with IDs of HTML Elements


JavaScript manipulates HTML elements using IDs.
🔹 Example: Change text using JavaScript

<p id="demo">Hello</p>
<script>
document.getElementById("demo").innerHTML = "Hello, JavaScript!";
</script>

12. JavaScript: Datatypes & Variables


JS has string, number, boolean, array, object, null, undefined.
🔹 Example:

let name = "John";


let age = 25;

13. Operators, Arrays, Boolean Logic, Ternary Operator


JS supports arithmetic ( + - * / ), comparison ( == !== ), and logical ( && || ) operators.
🔹 Example:

let isAdult = (age >= 18) ? "Yes" : "No";

14. TypeScript & ES6


TypeScript is JavaScript with static types.
ES6 introduced let , const , arrow functions, template literals.
15. Functions & Objects
Functions store reusable code blocks.
Objects store key-value pairs.
🔹 Example:

function greet(name) { return "Hello " + name; }


console.log(greet("John"));

16. Type Conversion


JS automatically converts string to number, number to boolean, etc.
🔹 Example:

let num = "42";


console.log(Number(num));

17. Button Actions & Mouse Events


JS handles click, hover, focus, etc. events.
🔹 Example:

<button onclick="alert('Clicked!')">Click me</button>

18. Different JavaScript Functions


Built-in functions: Math.random() , parseInt() , toUpperCase() .

19. If-Else Statement, Trim, Len, ToUpper, ToLower


🔹 Example:
let text = " Hello ";
console.log(text.trim().length);

20. Working with div, span, header in HTML


<div> : Block-level container
<span> : Inline container
<header> : Semantic header section

21. Advanced Web Programming


Includes AJAX, APIs, Node.js, React, and databases.

You might also like