The document provides an overview of HTML, CSS, and introductory JavaScript topics. It begins with an agenda that lists HTML, CSS, an introduction to JavaScript, and portfolio. Under HTML, it defines HTML, describes its structure and basic tags like headings, paragraphs, lists, links, tables, and divs. CSS is then introduced as a stylesheet language used to describe the presentation of HTML documents. It discusses CSS selectors, properties for fonts, text, backgrounds, borders, boxes and more. Finally, it gives a brief introduction to JavaScript concepts like variables, functions, arrays, and buttons.

2. Agenda
HTML
CSS
INTRO TO JAVASCRIPT
PORTFOLIO

3. HTML

4. HTML stands for HyperText
Markup Language.
It is used to design web pages
using a markup language. HTML is
the combination of Hypertext and
Markup language.
Hypertext defines the link between
web pages. A markup language is
used to define the text document
within the tag which defines the
structure of web pages.
The language uses tags to define
what manipulation has to be done
on the text.

5. Basic HTML structure

6. Tags

7. Headings
An HTML heading tag is used to define the
headings of a page.
There are six levels of headings defined by
HTML.
These 6 heading elements are h1, h2, h3, h4,
h5, and h6; with h1 being the highest level
and h6 being the least.

8. Paragraph
The <p> tag in HTML defines a paragraph. These have both
opening and closing tags. So anything mentioned within <p> and
</p> is treated as a paragraph.

9. Lists
A list is a record of short pieces of related information or used to
display the data or any information on web pages in the ordered or
unordered form.
2
1
Ordered lists Unordered lists

10. The HTML Unordered List: An unordered list starts with the “ul”
tag. Each list item starts with the “li” tag. The list items are
marked with bullets i.e small black circles by default.
HTML Ordered List: An ordered list starts with the “ol” tag.

11. Links
It is a connection from one web resource to another.
Links are specified in HTML using the “a” tag.
By using the ‘a’ tag, you can link one element of the code to
another element that may/may not be in your code.

12. An image can be used to create a link to a specified URL. When
the viewer clicks on the link, it redirects them to another page.
img src stands for image source ( i.e URL or file address )
<a href="link address"><img src="image destination"></a>

13. Table
An HTML table is defined with the “table” tag.
Each table row is defined with the “tr” tag.
A table header is defined with the “th” tag. By default,
table headings are bold and centered.
A table data/cell is defined with the “td” tag.

14. Div
The div tag is used in HTML to make divisions of content in the web
page. Div tag has both open (<div>) and closing (</div>) tag and it is
mandatory to close the tag.
The Div is the most usable tag in web development because it helps
us to separate out data in the web page and we can create a
particular section for particular data or function in the web pages.

15. The id attribute is a
unique identifier that is
used to specify the
document.
id attribute class attribute
The class attribute is used to
specify one or more class
names for an HTML element.
The class attribute can be
used on any HTML element.

16. CSS

17. CSS (Cascading Style Sheets) is a
stylesheet language used for
describing the look and formatting of a
document written in HTML
(Hypertext Markup Language).
CSS
CSS is used to define the layout, font,
color, and other visual
aspects of a webpage, and it helps to
separate the content of a
webpage from its presentation.

18. Introduction to Styles
3
2
1
Inline Internal External

19. Selectors and Properties

20. Selectors and Properties

21. FONT PROPERTIES IN CSS

22. TEXT PROPERTIES IN CSS

23. BACKGROUND PROPERTIES IN CSS

24. BORDERS PROPERTIES IN CSS

25. BOX MODEL PROPERTIES IN CSS
The CSS box model is a structure that encloses
every HTML
element, and is composed of margins, borders,
padding, and the
element's content. This model is utilized to design
and arrange the
layout of web pages.

27. COLORS PROPERTIES IN CSS

28. TABLE PROPERTIES IN CSS

29. ANIMATION PROPERTIES IN CSS

30. TRANSITION PROPERTIES IN CSS

31. CSS FLEXBOX
Flexbox is a CSS layout system that makes it easy to align and
distribute items within a container using rows and columns. It
allows items to "flex" and adjust their size to fit the available
space, making responsive design simpler to implement. Flexbox
makes formatting HTML elements more straightforward and
efficient.

32. The Grid layout is a 2-dimensional system in CSS that allows
for the creation of complex and responsive web design
layouts with consistent results across different browsers. It
makes it easier to build these types of layouts.
CSS GRID

33. JAVASCRIPT

34. let name="Devesh"
Variables

35. Functions
function sayHello()
{
console.log("Hello!");
}
sayHello();

36. Array
let myArray = [1, 2, 3, 4, 5];

37. let button = document.querySelector("button");
button.addEventListener("click", function()
{
console.log("Button clicked!");
});
Button

38. KAHOOT QUIZ
PIN-5973552