This document provides an overview of HTML, CSS, and JavaScript for building a website. It discusses key topics like: - HTML tags and syntax used to structure content - Viewing HTML source code to understand how websites are built - CSS properties that control styling and layout - Making websites responsive for different devices using CSS media queries - Common JavaScript concepts like variables, functions, and DOM manipulation - A hackathon challenge to build a portfolio website using only HTML, CSS, and JS by a deadline.

2. Agenda
● What is HTML
● HTML Tags
● HTML Source Code
● Readable Code
● Hands-On Project
● What is CSS
● How CSS works
● Responsive CSS

3. What is HTML ?
● Hyper Text Markup Language
● Not a Programming Language
● No Complicated Programming
● Easy to Write And Learn
● Interpreted by the Browser
to display content

4. HTML Tags and Syntax
● Tags are the most important part of HTML
● <start> middle </end> AND <block>
- <p> This is a paragraph tag </p>
- <img> Image tag to add images
● Tag names are related to their purpose
- <title> To add a title </title>
- <h1> This is a Heading Tag </h1>
- <a> Anchor tag to add a link </a>
● Popular Tags
- <p> A paragraph tag with a <a>link</a> tag</p>

5. HTML Source Code
● Where to find HTML source code?
- Simply Right click on your browser and click “View Source Code”
● Can I just copy everyone’s code?
- Yes you can, but it’s not a very healthy practise.
● Does all website only contains HTML?
- There’s more to a website than just HTML
● Why view Source code?
- To check how well a website is been written
- To find Problems

6. Readable Code
● Add Attributes to the tags
● Always use Right Tag at Right Place
● Properly start and end your tag,with proper details
● Use Tab space wherever necessary
- <ul>
<li> List Tag</li>
<li> 2nd list element</li>
</ul>

7. Hand-On Project
A very interesting
Portfolio

8. ● Cascaded Style Sheet
● CSS is used to design a website.
● With CSS one can change size,color and spacing of HTML elements.
What is CSS?

9. How CSS Works?
1. CSS is written in separate file from HTML.
2. You can apply CSS to specific HTML elements and accordingly change it’s
look and feel.
3. In the example below ,CSS is applied to ‘<h1>’ element.

10. CSS Box-Model
● CSS box model is a container which
contains multiple properties including
borders, margin, padding and the
content itself.
● Margin:outer space of element.
Padding:inner space of element.
Content:Element itself.
Border:Outline of element.

11. CSS Classes
● Class is an attribute that defines
group of HTML elements in order to
apply unique styling to them.
● Class Names always start with
period(.)
● If period is not present then css will
not be applied.
● Tags do not require a period.

12. Responsiveness Using CSS
● Web pages can be viewed using many different devices:
desktops, tablets, and phones.
● Your web page should look good, and be easy to use, regardless
of the device.
● Responsiveness can be achieved using media queries in CSS.
Desktop View
Tablet View
Mobile View

14. What is JavaScript?
● A scripting Language.
● Allows you to implement complex features on
web.
● Can be used for client-side server development
as well as development side server.

15. Hello world!
● To print the variable or any string in Javascript
we use is console.log() function. So let’ try
with String “Hello World”.
-> console.log(“Hello World”).
● By using this function you can print variables,
strings, array, etc.

16. Variables and data
types
Primitive Data type
● String - any valid string.
● Number - there is no concept of int/float in JS. Every number is a 64 bit
floating point number.
● Boolean - true/false.
● Undefined - This is assigned to variables which have not been initialized.
All these variables are defined using let, const, var keywords.
var- Variables declared with var are in the globally or function scope.
let - Variables declared as let are in the block scope.
const - Variables declared as const are in the block scope.

17. Variables and data
types
● Non-Primitive Data types
● Objects:
- Objects are variables too. But objects can
contain many values.
- Object values are written in name:value pairs
(separated by colon).
- Array is considered as object only where the
indices are the names of the variables of array.

18. Decision making and loops
Condition statements in
javascript are if, if else,
switch.
Loops in JavaScript:
let i =0;
while (i < 10) {
console.log(i);
i++;
}
for (let i = 0; i < 10; i++) {
console.log(i);
}
if (num === 1) {
console.log("ONE");
} else if (num === 2) {
console.log("TWO");
} else if (num === 3) {
console.log("THREE");
} else {
console.log("UNKNOWN");
}

19. Functions in javascript
● Functions are set of instructions bundled
together to achieve outcome.
● In javascript functions are also objects.
● Just like any other object functions can be
stored in a variable.
● JavaScript Functions are defined with the
function keyword.
● Declared Functions are not executed
immediately. They are “saved for later use”
and will get executed later, when they are
invoked.

20. HTML DOM
When a web page is loaded, the browser creates a
Document Object Model (DOM) of the page.
With the object model Javascript can make the website
dynamic as well. The methods of document helps us to
change or Modify any element of html and it’s style as
well.
Method which are used commonly:
querySelector(): this method returns the first
element within the document that matches.the specified
selector or group of selectors.
querySelectorAll(): this method returns the array of
all elements within the document that matches.the
specified selector or group of selectors.

22. Hackathon
1. Create Your Portfolio.
2. Hackathon Registrations Close on 12 September 2021 at 11:59PM.
3. Hackathon Start Date: 13 September 2021 at 12:00AM.
4. Hackathon End Date: 14 September 2021 at 11:59PM.
5. Result on 17 September 2021.
THE WEB DEV HEIST

23. 1. Only Use of HTML CSS JS
2. No use of external frameworks like Bootstrap, Tailwind CSS, etc
3. Excluding Navbar,Home page and Contact Page ,participant shall
include at least two more sections eg:-
Achievements,Skills,Certificates,Projects etc
4. Participants should host their portfolio on Github Pages and
Repository should be public during the judges round(Before
judgement round can be kept private).
Rules