Day 1:
Form Validation in HTML (Without JavaScript)
Yes, HTML provides built-in validation using attributes.
Validation Attributes
1. required → Makes the field mandatory before submission.
2. min → Sets the minimum value (for number input).
3. max → Sets the maximum value (for number input).
4. minlength → Sets the minimum number of characters for text input.
5. maxlength → Sets the maximum number of characters for text input.
6. disabled → Makes the input disabled (not editable, not submitted).
7. readonly → Input is not editable, but its value will be submitted.
Regular Expressions (Regex)
Regex is used to match patterns in input fields.
Common Symbols
● [] → Represents a group (character set).
● {} → Specifies a range/length.
○ {a} → Exactly a characters.
○ {a,} → Minimum a characters.
○ {a,b} → Between a and b characters.
● \d → Any digit (0–9).
● \w → Any word character (letters, digits, underscore).
● . → Any single character (wildcard).
● * → 0 or more occurrences.
● + → 1 or more occurrences.
Examples
● Email validation: [A-Za-z0-9]+@[A-Za-z]+\.[A-Za-z]{2,}
● Phone number validation: [0-9]{10}
Day-2
CSS Introduction
CSS (Cascading Style Sheets)
● CSS is used to style and design the layout or appearance of web pages.
● Cascading means that styles are applied in a specific order of priority.
📌 Ways to Apply CSS in HTML
1. Inline Styling
○ Styles applied directly inside an element using the style attribute.
Example:
<h1 style="color: blue; font-size: 20px;">Hello</h1>
○
2. Internal Styling
○ Styles are written inside a <style> tag in the <head> section.
Example:
<style>
p {
color: green;
font-size: 18px;
}
</style>
○
3. External Styling
○ Styles are written in a separate .css file and linked to HTML.
Example:
<link rel="stylesheet" href="[Link]">
○
⚖️ Priority of CSS
1. !important → Highest priority
2. Inline Styling
3. Internal / External Styling (whichever comes last in the code)
👉 Example:
h1 {
color: red !important; /* Highest priority */
}
🎯 CSS Selectors
Tag Name Selector → Selects all elements of a specific tag.
p {
color: blue;
}
1.
Class Selector (.classname) → Selects one or multiple elements with the same class.
.highlight {
background-color: yellow;
}
2. ID Selector (#idname) → Selects a unique element by ID (only one per page).
#main-title {
font-size: 24px;
}
3. Universal Selector (*) → Applies styles to all elements in the webpage.
* {
text-align: center;
}
4. ✅ Priority Rule Between Selectors:
id > class > tagname
🎨 CSS Colors, Fonts, Units &
Background
1️⃣ Colors in CSS
Colors decide the brand identity and user interface design of a webpage.
It is recommended to use colors according to the brand theme and target audience.
Ways to Define Colors:
1. Hex Code
○ 6-digit hexadecimal value preceded by #.
Example:
h1 { color: #ff5733; }
○
2. RGB / RGBA
○ Combination of Red, Green, Blue values (0–255).
○ Alpha (0.0 – 1.0) controls transparency.
Example:
p { color: rgba(0, 128, 255, 0.7); }
○
3. Color Names
○ Predefined color names supported in CSS.
Example:
div { background-color: lightgreen; }
○
2️⃣ Fonts in CSS
Every font family belongs to one of the 5 basic types:
1. Serif → Fonts with strokes at corners (e.g., Times New Roman).
2. Sans-serif → Clean fonts without strokes (e.g., Arial, Calibri).
3. Monospace → Equal-width fonts (e.g., Courier New).
4. Cursive → Styled, curved fonts (e.g., Brush Script).
5. Fantasy → Decorative fonts for special effects.
Font Properties
font-family → Apply specific font.
h1 { font-family: Arial, sans-serif; }
●
font-size → Set size of font.
p { font-size: 18px; }
● font-weight → Thickness (100–900, or bold/bolder).
h2 { font-weight: 700; }
● font-style → Normal or italic.
● em { font-style: italic; }
Importing Fonts from Google Fonts
1. Search Google Fonts.
2. Choose a font → Click Get Font.
Copy embed code (<link> or @import) into HTML/CSS.
@import
url('[Link]
body { font-family: 'Roboto', sans-serif; }
3️⃣ CSS Units
px (pixels) → Smallest screen unit.
h1 { font-size: 24px; }
1. % (percentage) → Relative to parent element.
div { width: 50%; }
2. vh / vw → Relative to viewport height/width.
section { height: 100vh; width: 100vw; }
4️⃣ Background in CSS
Properties to style backgrounds:
background-color → Set background color.
body { background-color: #f0f0f0; }
● background-image → Apply image or gradient.
● body { background-image: url("[Link]");
● background-repeat → repeat / repeat-x / repeat-y / no-repeat.
● background-position → left / right / center / top / bottom.
● background-size → auto / cover / contain.
● background-attachment → scroll / fixed / local.
👉 Example:
body {
background-image: url("[Link]");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
}
Day-4
Gradient Text → heading with a gradient fill.
Linear Gradient Box → smooth left-to-right color transition.
Radial Gradient Box → circular gradient.
Box Model Demo → shows how border, padding, margin, and border-radius work.
Day-5
CSS Positioning
The position property in CSS defines how an element is placed in the document.
Types of Positioning
1. static (default)
○ All elements are static by default.
○ They flow normally in the page.
○ top, left, right, bottom don’t work here.
.static {
position: static;
}
2. relative
○ Positioned relative to its original (normal) position.
○ Shifts when top, left, right, bottom are applied, but the space it occupied is
still reserved.
.relative {
position: relative;
top: 20px; /* moves 20px down */
left: 30px; /* moves 30px right */
}
3. absolute
○ Positioned relative to the nearest positioned ancestor (if none, then relative to
<body>).
○ The element is removed from normal flow, so no space is reserved.
○ Scroll affects it (it moves with the page).
.absolute {
position: absolute;
top: 0;
left: 0;
}
4. fixed
○ Positioned relative to the viewport (screen).
○ Does not scroll with the page → always visible.
○ Commonly used for navbars, sticky buttons.
.fixed {
position: fixed;
bottom: 10px;
right: 10px;
}
5. sticky
○ A mix of relative + fixed.
○ Acts like relative until a scroll threshold is reached → then behaves like
fixed until parent ends.
.sticky {
position: sticky;
top: 0; /* sticks to top when scrolled */
6. }
Day-6
🌟 CSS Flexbox
Flexbox (Flexible Box Layout) is a layout model used to align and distribute space among
items in a single direction — row or column.
🔹 Parent (Container) Properties
1. display: flex
Enables Flexbox. All direct children become flex items.
.container {
display: flex;
}
2. flex-direction
Defines the main axis (direction of items).
a. row (default, left → right)
b. row-reverse (right → left)
c. column (top → bottom)
d. column-reverse (bottom → top)
flex-direction: column;
gap
Creates space between flex items (better than margins).
gap: 20px;
1. justify-content (along main axis)
○ flex-start (default)
○ flex-end
○ center
○ space-between (first + last at edges, rest spaced)
○ space-around (equal spacing with outer margins)
○ space-evenly (equal spacing everywhere)
justify-content: space-between;
2. align-items (along cross axis)
○ stretch (default, fills container)
○ flex-start
○ flex-end
○ center
○ baseline (aligns text baselines)
align-items: center;
3. flex-wrap
Controls wrapping of items.
○ nowrap (default, items stay in one line)
○ wrap (items move to next line)
○ wrap-reverse (wrap in opposite direction)
flex-wrap: wrap;
align-content (when multiple rows exist due to wrapping)
Works like justify-content but for rows on cross-axis.
align-content: space-around;
🔹 Child (Item) Properties
order
Controls order of an item (default 0). Smaller → comes first.
.item1 { order: 2; }
.item2 { order: 1; }
1. align-self
Overrides align-items for a single item.
.item1 { align-self: flex-end; }
2. flex-grow
Defines how much an item grows relative to others.
.item1 { flex-grow: 2; } /* grows 2x more than others */
3. flex-shrink
Defines how much an item shrinks relative to others.
.item2 { flex-shrink: 3; }
4. flex-basis
Sets the initial size (before grow/shrink).
.item3 { flex-basis: 200px; }
