GDG On Campus NBNSCOE Web Workshop Day 1 : HTML & CSS

Web Dev Workshop
Day 1- HTML and CSS
Speakers: Mayuresh(HTML)
Tanuja (CSS)

Let’s get to know everyone
Scan this QR code!!

Introduction
to HTML
Speaker:Mayuresh Sherala
(Tech co-lead)

Before working with html , things to do
Install Visual studio code in your pc
Open a browser for testing your html code
Install live server from extensions in vs code
Open any browser and go to this link to install vs code :
https://code.visualstudio.com/download

How will we proceed?
●Day 1 - HTML and CSS
●Day 2 - Javascript
●Day 3 - React and Node js
Note : you are advised to do the tasks simultaneously

What is HTML
HTML stands for HyperText
Markup Language, and it is the
standard language used to create
and structure content on the web.
It forms the backbone of almost
every website.

Points to cover
Document
Structure
Links and
Multimedi
a
Lists
Tables
1
2
3
4
5
6
Text
contents Forms

Document Structure
● <!DOCTYPE>: Declares the HTML version.
● <html>: The root element.
● <head>: Contains meta-information about the document.
● <title>: Specifies the title of the document.
● <body>: Contains the visible content of the webpage.

Basic structure of html
<!DOCTYPE html> 
<html lang="en"> 
<head>
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Webpage</title> 
</head>
<body>
<h1>Welcome to My Website!</h1> 
<p>This is my first webpage created using HTML.</p> 
<a href="https://example.com">Visit Example.com</a> 
</body>
</html>

Text Content
● <h1> to <h6>: Headings (from largest to smallest).
● <p>: Paragraph.
● <br>: Line break.
● <hr>: Horizontal rule (line).
● <b>: Bold text.
● <i>: Italic text.
● <u>: Underlined text.
● <strong>: Strong emphasis (bold).
● <em>: Emphasized text (italic).
● <mark>: Highlighted text.
● <small>: Small text.
● <sub>: Subscript.
● <sup>: Superscript.

Links and Multimedia
● <a>: Creates hyperlinks.
● <img>: Embeds an image.
● <audio>: Embeds audio content.
● <video>: Embeds video content.

Lists
● <ul>: Unordered list.
● <ol>: Ordered list.
● <li>: List item.

Tables
● <table>: Creates a table.
● <tr>: Table row.
● <th>: Table header.
● <td>: Table data cell.

Forms
● <form>: Creates a form.
● <input>: Input field (text, radio, checkbox, etc.).
● <label>: Label for form elements.
● <textarea>: Multi-line text input.
● <option>: Options in a dropdown.
● <select>: Dropdown list.
● <button>: Button.

Forms
● <form>: Creates a form.
● <input>: Input field (text, radio, checkbox, etc.).
● <label>: Label for form elements.
● <textarea>: Multi-line text input.
● <button>: Button.
● <select>: Dropdown list.
● <option>: Options in a dropdown.
Introduction
to CSS
Speaker : Tanuja Suryawanshi
(Network lead)

What is CSS
CSS stands for Cascading Style
Sheet. Like HTML, CSS is not a
programming language. It's not a
markup language either. CSS is a
style sheet language.Used to style &
design web pages by controlling
layout, colors, fonts, making them
visually responsive.

Basic structure of html
● CSS Syntax: (selector { property: value; })
● Types of CSS: (Inline ,Internal & External)
● CSS Selectors: (Universal, Type, Class, ID, Grouping)
● CSS Colors: (Named, Hex, RGB, RGBA, HSL, HSLA)
● Backgrounds: (Color, Image, Repeat, Size, Attachment)
● Fonts and Typography: (Font-Family, Font-Size, Font-Weight, Font-Style, Line-
Height)
● Text Styling: (Color, Alignment, Decoration, Indentation)
● CSS Units: (px, %, em, rem, vw, vh)
● Box Model: (Margin, Border, Padding)
● Box Sizing: (Content-Box, Border-Box)
● Comments in CSS: (/* comment */)
● CSS Priority and Specificity: (Inline > IDs > Classes > Elements > Universal)
● Flexbox
Point to cover

CSS Syntax
CSS syntax consists of three main parts:
1. Selector: Specifies the HTML element to style.
2. Property: Defines what aspect of the element to style (e.g., color, font-size).
3. Value: Specifies the style to apply for the property.
4. selector {
property: value;
}
EX :
h1 {
color: blue;
font-size: 24px;
}

Types of CSS
Inline CSS:
● Written directly in the style attribute of an HTML element.
● Example: <h1 style="color: blue;">Hello</h1>
Internal CSS:
● Defined inside a <style> tag in the <head> section of the HTML file.
Example:<style>h1 { color: red; }</style>
External CSS:
● Written in a separate .css file and linked using <link>.
● Example: <link rel="stylesheet" href="styles.css">

CSS Selectors
Universal Selector (*)
● Targets all elements.
● Example: * { margin: 0; padding: 0; }
Type Selector (Element Selector)
● Targets all elements of a specific type.
● Example: p { color: blue; }
Descendant Selector (Space)
● Targets elements that are descendants of another element.
● Example:
div p { color: green; }

Class Selector (.)
● Targets elements with a specific class.
● Example:
.button { background-color: red; }
ID Selector (#)
● Targets an element with a specific ID.
Example:
#header { font-size: 24px; }
Pseudo-Class Selector (:)
● Targets elements in a specific state (like hover).
● Example: a:hover { color: red; }

CSS Colors
Named Colors
● Predefined color names in CSS (e.g., red, blue).
● Example: color: red;
Hexadecimal Colors
● Represents colors with 6 digits (RGB in hex).
● Example: color: #ff5733; /* Red-orange */
RGB (Red, Green, Blue)
● Specifies color using RGB values (0-255).
Example: color: rgb(255, 87, 51); /* Red-orange */

RGBA (RGB + Alpha)
● RGB with transparency (alpha value from 0 to 1).
● Example:
color: rgba(255, 87, 51, 0.5);
HSL (Hue, Saturation, Lightness)
● Hue (0-360), Saturation (0-100%), and Lightness (0-100%).
● Example:
color: hsl(9, 100%, 60%);
HSLA (HSL + Alpha)
● HSL with transparency (alpha value from 0 to 1).
● Example:
color: hsla(9, 100%, 60%, 0.5);

CSS Background
background-color
● Sets the background color of an element.
Example: background-color: lightblue;
background-image
● Sets an image as the background.
● Example: background-image: url('image.jpg');
background-position
● Specifies the position of the background image.
● Example: background-position: center;

CSS Font & Typography
font-family
● Specifies the font for text.
Example: font-family: Arial, sans-serif;
font-size
● Sets the size of the font.
● Example: font-size: 16px;
font-weight
● Defines the thickness of the font (e.g., bold, normal).
● Example: font-weight: bold;

CSS Text Styling
text-decoration
● Adds decorations to text (e.g., underline, line-through).
● Example: text-decoration: underline;
text-transform
● Controls the capitalization of text (e.g., uppercase, lowercase).
● Example: text-transform: uppercase;
text-align
● Aligns the text horizontally (e.g., left, center, right).
● Example: text-align: center;

CSS Units
px (Pixels)
● Fixed size, commonly used for precise layout control.
● Example: width: 100px;
% (Percentage)
● Relative to the parent element's size.
● Example: width: 50%;
em
● Relative to the font-size of the element.
Example: font-size: 2em; /* 2 times the element's font size */

CSS Box Model
Border:
● The edge around the padding.
● Example: border: 2px solid black;
Margin:
● Space outside the border, separating elements.
● Example: margin: 20px;
Padding:
● Space between content and border.
● Example: padding: 10px;

CSS Box Sizing
The box-sizing property determines how the total width and height of an element are
calculated.
content-box (default)
● Width and height apply only to the content area. Padding and border are added
outside the element's specified width and height.
● Example: box-sizing: content-box;
border-box
● Width and height include padding and border. The specified width and height are the
total size, including padding and border.
● Example: box-sizing: border-box;

Comments in CSS
Comments in CSS are used to explain the code or make it more readable. They are
ignored by the browser and do not affect the rendering of the page.
Syntax: /* Single-line or multi-line comment */
Example:/* This is a comment */
body {
background-color: lightblue;
}
● Comments are used to add explanations or notes and are ignored by the browser.

CSS Priority & Specificity
1. Specificity:
Determines which CSS rule is applied based on the selector’s specificity.
○ Inline styles: Highest specificity (1000).
○ IDs: (100).
○ Classes, pseudo-classes, attributes: (10).
○ Element (type) selectors: (1).
○ Universal selector (*): Lowest specificity.
2. Priority:
○ !important overrides other declarations, regardless of specificity.
○ If two rules have the same specificity, the one last in the stylesheet takes
priority.
○ Example: #header { color: red; } /* ID selector*/
○ p { color: blue; } /* Element selector */

CSS Flexbox
Flexbox is a CSS layout model that allows for easy alignment and distribution of elements in a
container, both horizontally and vertically.
Flex Container: The parent element that holds the flex items. Defined by setting display: flex or
display: inline-flex.
Flex Items: The children of the flex container. These are automatically laid out using Flexbox.
Container:
● display: flex: Defines the flex container.
● flex-direction: Defines the main axis (row, column, etc.).
● justify-content: Aligns items horizontally (start, center, space-between, etc.).
● align-items: Aligns items vertically (start, center, stretch, etc.).
● align-self: Allows individual flex items to align differently than others.
● flex-wrap: Allows items to wrap onto multiple lines if needed.

Whatsapp channel link:
Click here
All the updates / notes will be posted on
whatsapp channel.
Tomorrow Day 2 :
Intro to JS

Follow us on :
LinkedIn : gdg-nbnscoe
Instagram : gdg_nbnscoe
Twitter : gdg_nbnscoe

Thank You..! Q & A ?
Day 2 Registration Link:
Get Your tickets

GDG On Campus NBNSCOE Web Workshop Day 1 : HTML & CSS

More Related Content

Similar to GDG On Campus NBNSCOE Web Workshop Day 1 : HTML & CSS

Recently uploaded

GDG On Campus NBNSCOE Web Workshop Day 1 : HTML & CSS