Part 1 • HyperText Markup Language
HTML Fundamentals & Structure
HTML provides the skeleton and structural backbone of every webpage.
Page Architecture
<head> vs <body>
Every standard HTML document is cleanly split into two distinct areas:
<head>: Contains metadata, page title, character encoding, SEO tags, and links to external CSS stylesheets and fonts. This part is not rendered visually on the webpage.<body>: Contains all the visual content the user actually sees and interacts with (headings, text, buttons, images, videos, links).
HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<!-- CSS & Fonts linked here -->
</head>
<body>
<h1>Welcome to My Website!</h1>
<p>All visible content lives here.</p>
</body>
</html>
Hyperlinks
Anchor Tag (<a>) & href
The Anchor Tag (<a>) defines a hyperlink to connect pages or resources. The href (Hypertext REFerence) attribute tells the browser where to navigate:
- External Link:
href="https://google.com"withtarget="_blank"(opens new tab). - Internal Page:
href="about.html". - Page Anchor:
href="#section-id"(smooth jumps to an ID). - Email & Phone:
href="mailto:user@domain.com"ortel:+123.
Anchor & href Examples
<!-- External link opening in new tab -->
<a href="https://github.com" target="_blank">Visit GitHub</a>
<!-- Internal page link -->
<a href="index.html">Back to Portfolio</a>
<!-- Email link -->
<a href="mailto:gimbhalshailesh587@gmail.com">Email Shailesh</a>
Live Rendered Preview:
Configuration
HTML Attributes Explained
Attributes provide extra instructions and details for an HTML element. They are always written inside the opening tag in name="value" pairs:
id="...": Unique identifier for an element (one per page).class="...": Reusable label for styling multiple elements.src="...": Source path for images, audio, or scripts.alt="...": Alternative text for images (vital for accessibility).target="_blank": Instructs browser to open a link in a new tab.
Attribute Anatomy
<!-- tag attr1="val1" attr2="val2" -->
<button id="submitBtn" class="btn-primary" title="Click to submit">
Submit Form
</button>
Typography & Content
Headings (<h1>-<h6>) & Paragraphs (<p>)
Text hierarchy organizes information for readers and search engines:
<h1>to<h6>: Headings represent rank and importance. A page should typically have exactly one<h1>for SEO.<p>: Defines a paragraph block with automatic spacing.<br>: Inserts a single line break inside text.<hr>: Inserts a thematic divider horizontal rule.
Headings & Paragraphs
<h1>Main Page Title</h1>
<h2>Subheading Topic</h2>
<p>This is the first paragraph with clean spacing.</p>
<hr>
<p>Second paragraph with a <br> line break.</p>
Live Rendered Preview:
Main Page Title (h1)
Subheading Topic (h2)
This is an example paragraph demonstrating natural typography and body text flow.
Visual Media
Adding Images (<img>)
The <img> tag is an empty / self-closing element used to embed images:
src="...": Path to the image file (e.g.profile.jpgor external URL).alt="...": Text read by screen readers and displayed if the image fails to load.width&height: Sets dimensions to prevent layout shifts.
Image Tag Example
<img
src="profile.jpg"
alt="Portrait of Shailesh Gimbhal"
width="120"
height="120">
Live Rendered Preview:
Shailesh Gimbhal
Rendered with <img src="profile.jpg" alt="...">
Part 2 • Cascading Style Sheets
CSS Styling, Colors & Design
CSS controls how HTML elements are painted, positioned, styled, and brought to life.
Architecture
3 Ways to Apply CSS
CSS can be included in three distinct ways:
- 1. External Stylesheet (Recommended): Linked in
<head>via<link rel="stylesheet" href="style.css">. Cleanest, easiest to maintain. - 2. Internal Styles: Written inside
<style>tags inside the<head>. Great for single-page templates. - 3. Inline Styles: Written directly inside the element's
style="..."attribute. Useful for quick one-off overrides.
How to include CSS
<!-- 1. External in <head> -->
<link rel="stylesheet" href="style.css">
<!-- 2. Internal in <head> -->
<style>
body { background-color: #f8fafc; }
</style>
<!-- 3. Inline on element -->
<p style="color: #0070f3; font-weight: bold;">Styled text</p>
Visuals
Background Color & Gradients
The background-color property sets a solid color, while background supports smooth linear and radial gradients:
- Named colors:
white,blue,black. - Hex codes:
#0070f3(Royal Blue),#0f172a(Slate Dark). - RGB / RGBA:
rgba(0, 112, 243, 0.25)(includes opacity). - Linear Gradients:
linear-gradient(135deg, #0070f3, #0ea5e9).
Background Styles
.solid-card {
background-color: #0070f3;
color: #ffffff;
}
.gradient-card {
background: linear-gradient(135deg, #0070f3, #0ea5e9);
color: #ffffff;
}
Interactive Live Color Preview:
Dynamic Background Box
#0070f3
Typography
Text Color & Font Styling
CSS gives you complete control over text appearance:
color: Defines the color of the text characters.font-family: Specifies fonts (e.g.'Inter', sans-serif).font-size: Sets size inpx,rem, orclamp().font-weight: Controls thickness (400 normal, 700 bold).text-align: Aligns text (left,center,right).
Text Styling
p.highlight-text {
color: #0070f3;
font-family: 'Outfit', sans-serif;
font-size: 1.25rem;
font-weight: 600;
text-align: center;
}
Live Text Preview:
"Clean code creates beautiful experiences."
Media Presentation
Styling Images with CSS
Raw HTML images can overflow or look flat. CSS transforms them into modern components:
max-width: 100%; height: auto;: Makes images fully responsive on mobile.border-radius: 12px;: Softens harsh corners;50%makes circular avatars.object-fit: cover;: Prevents image distortion or squishing.box-shadow&transform: hover: Creates depth and 3D hover lift.
Image CSS Rules
img.styled-card {
width: 100%;
height: 120px;
object-fit: cover;
border-radius: 12px;
border: 2px solid #0070f3;
box-shadow: 0 8px 20px rgba(0, 112, 243, 0.2);
}
Before vs After Comparison:
Raw HTML <img>
Square & Flat
Styled with CSS
Rounded, Border & Shadow
Layout Foundation
The CSS Box Model
Every HTML element on a webpage is a rectangular box made of four layers:
- Content: The text, image, or video inside the box.
- Padding: Transparent inner space around the content.
- Border: The line wrapping around the padding.
- Margin: Space outside the border separating elements from neighbors.
Interactive Box Model Visual:
MARGIN (Outer Space)
BORDER (Line edge)
PADDING (Inner Breathing Room)
CONTENT (Text / Images)