HTML Basics
HTML (HyperText Markup Language) is the skeleton of every webpage. It defines structure using tags — elements enclosed in angle brackets that the browser renders visually.
ANATOMY OF AN HTML PAGE
<!-- Every HTML file starts with this -->
<!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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome to Aawiskar!</h1>
<p>This is my <strong>first</strong> webpage.</p>
<a href="https://aawiskar.com">Visit Aawiskar</a>
<img src="photo.jpg" alt="A photo" width="300">
</body>
</html>
COMMON HTML TAGS
<!-- Headings -->
<h1>Main Title</h1> <h2>Subtitle</h2> <h3>Section</h3>
<!-- Lists -->
<ul>
<li>Arduino</li>
<li>ESP32</li>
</ul>
<!-- Table -->
<table>
<tr><th>Component</th><th>Symbol</th></tr>
<tr><td>Resistor</td><td>R</td></tr>
</table>
<!-- Containers -->
<div class="card">Block container</div>
<span class="highlight">Inline text</span>
HTML Forms
Forms collect user input. Every web app — login, search, checkout — relies on forms. Master input types, labels, and validation.
<form action="/submit" method="POST">
<label for="name">Your Name:</label>
<input type="text" id="name" name="name" placeholder="Enter name" required>
<input type="email" placeholder="you@example.com">
<input type="password" placeholder="Password">
<input type="number" min="1" max="100">
<input type="checkbox"> I agree to terms
<select name="course">
<option value="electronics">Electronics</option>
<option value="python">Python</option>
</select>
<textarea rows="4" placeholder="Your message..."></textarea>
<button type="submit">Submit</button>
</form>
Semantic HTML5
Semantic tags describe the purpose of content — making your site more accessible, SEO-friendly, and readable to developers and screen readers.
<!-- Bad (meaningless divs) -->
<div class="header">...</div>
<div class="nav">...</div>
<!-- Good (semantic HTML5) -->
<header>
<nav>
<a href="/">Home</a>
<a href="/courses">Courses</a>
</nav>
</header>
<main>
<article>
<h1>Arduino Guide</h1>
<section><h2>Setup</h2><p>Steps here...</p></section>
</article>
<aside><h3>Related</h3></aside>
</main>
<footer><p>© 2025 Aawiskar RoboLabs</p></footer>
🔑 Key Semantic Tags: header, nav, main, footer, article, section, aside, figure, figcaption, time, mark, summary, details. Each tells the browser (and Google!) exactly what the content represents.
CSS Fundamentals
CSS (Cascading Style Sheets) controls the visual appearance — colors, fonts, spacing, and layout. Without CSS, every webpage would look like a plain text document.
/* Selectors */
h1 { color: #1a4fd6; } /* tag */
.card { background: #fff; } /* class */
#hero { padding: 80px; } /* id */
a:hover{ color: #00d4ff; } /* pseudo-class */
/* The Box Model */
.box {
width: 200px;
height: 100px;
padding: 16px; /* inside space */
margin: 20px auto; /* outside (auto = center) */
border: 2px solid #3d7fff;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
box-sizing: border-box; /* include padding in width */
}
/* Typography */
body {
font-family: 'Rajdhani', sans-serif;
font-size: 16px;
line-height: 1.6;
}
/* CSS Variables — define once, reuse everywhere */
:root {
--primary: #1a4fd6;
--cyan: #00d4ff;
--radius: 8px;
}
.btn {
background: var(--primary);
border-radius: var(--radius);
transition: all 0.3s ease;
}
.btn:hover { transform: translateY(-2px); }
Flexbox Layout
Flexbox arranges items along one axis (row or column). It's the go-to for navigation bars, centering things, and building rows of cards.
/* Apply to the PARENT (container) */
.navbar {
display: flex;
justify-content: space-between; /* horizontal */
align-items: center; /* vertical */
gap: 20px;
}
/* Center anything perfectly */
.hero {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
flex-direction: column; /* stack vertically */
}
/* Responsive card row that wraps */
.card-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 1 1 280px; /* grow, shrink, base-width */
}
/* justify-content values:
flex-start | flex-end | center
space-between | space-around | space-evenly */
🎮 Learn by playing: Visit flexboxfroggy.com — a free browser game that teaches Flexbox through puzzles. Complete all 24 levels and you'll know Flexbox inside out!
CSS Grid
CSS Grid is two-dimensional layout — rows AND columns simultaneously. Perfect for page layouts, dashboards, and image galleries.
/* Basic 3-column grid */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal cols */
gap: 20px;
}
/* Mixed widths: sidebar | main | aside */
.layout {
display: grid;
grid-template-columns: 250px 1fr 300px;
grid-template-rows: auto 1fr auto; /* header|content|footer */
min-height: 100vh;
}
/* Named grid areas */
.page {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-rows: 80px 1fr 60px;
}
header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }
/* Span columns */
.hero { grid-column: 1 / -1; } /* span ALL columns */
🎮 Practice Grid: Visit cssgridgarden.com — 28 interactive levels to master CSS Grid. Great companion to Flexbox Froggy!
Responsive Design
Responsive design makes your site look great on every screen. Use media queries to change styles at different breakpoints, and flexible units to scale smoothly.
/* Mobile-first: write mobile styles first,
then override for larger screens */
.grid {
display: grid;
grid-template-columns: 1fr; /* 1 col on mobile */
gap: 16px;
}
/* Tablet (600px+) */
@media (min-width: 600px) {
.grid { grid-template-columns: repeat(2, 1fr); }
nav { display: flex; }
}
/* Desktop (1024px+) */
@media (min-width: 1024px) {
.grid { grid-template-columns: repeat(3, 1fr); }
nav { padding: 20px 60px; }
}
/* Fluid typography — scales between min and max */
h1 {
font-size: clamp(1.8rem, 5vw, 3.5rem);
}
/* Always do this for images! */
img { max-width: 100%; height: auto; }
📱 Test responsive: In Chrome, press F12 → click the phone/tablet icon → choose device presets. Test iPhone SE (375px), iPad (768px), and 1440px desktop. The most common mistake is forgetting to test on mobile first!
JavaScript Fundamentals
JavaScript brings webpages to life with interactivity, dynamic content, form validation, and real-time data from servers.
// Variables
const siteName = "Aawiskar e-Siksha"; // can't change
let score = 0; // can change
// Arrays
const courses = ["Electronics", "Python", "Web Dev"];
courses.push("Robotics");
console.log(courses[0]); // Electronics
// Objects
const student = {
name: "Raju",
age: 17,
greet() { return `Hello, I'm ${this.name}`; }
};
console.log(student.greet());
// Arrow functions
const double = (n) => n * 2;
const square = n => n ** 2; // shorthand, single param
// Array methods — the power trio
const nums = [1, 2, 3, 4, 5];
const doubled = nums.map(n => n * 2); // [2,4,6,8,10]
const evens = nums.filter(n => n % 2 === 0); // [2,4]
const total = nums.reduce((sum,n) => sum+n, 0); // 15
// Template literals
const msg = `${student.name} scored ${score} points!`;
// Destructuring
const { name, age } = student;
const [first, second] = courses;
// Spread operator
const allCourses = [...courses, "IoT", "AI"];
DOM Manipulation
The DOM (Document Object Model) is JavaScript's interface to the HTML page. You can read, change, add, or remove any element in real time.
// SELECT elements
const title = document.getElementById("main-title");
const buttons = document.querySelectorAll(".btn"); // NodeList
const first = document.querySelector(".card"); // first match
// READ and CHANGE content
console.log(title.textContent); // read text
title.textContent = "New Title!"; // change text
title.innerHTML = "Title <b>bold</b>"; // change HTML
// CHANGE styles directly
title.style.color = "#00d4ff";
title.style.fontSize = "2rem";
// CLASSES — the preferred way to toggle styles
title.classList.add("active");
title.classList.remove("hidden");
title.classList.toggle("dark"); // on/off
title.classList.contains("active"); // true/false
// CREATE elements dynamically
const card = document.createElement("div");
card.className = "course-card";
card.innerHTML = `<h3>New Course</h3><p>Description</p>`;
document.querySelector(".grid").appendChild(card);
// READ input values
const inputVal = document.querySelector("#name").value;
// REMOVE elements
document.querySelector("#old-item").remove();
Events & Fetch API
Events let your page react to user actions. Fetch API loads data from servers without page reloads — the foundation of modern dynamic web apps.
EVENT LISTENERS
const btn = document.querySelector("#myBtn");
btn.addEventListener("click", (event) => {
console.log("Clicked!", event.target);
btn.textContent = "Clicked!";
});
// Common events: click mouseover mouseout
// keydown keyup input change scroll submit
document.addEventListener("keydown", (e) => {
if (e.key === "Escape") closeModal();
if (e.ctrlKey && e.key === "s") saveFile();
});
const form = document.querySelector("form");
form.addEventListener("submit", (e) => {
e.preventDefault(); // stop page reload!
const name = document.querySelector("#name").value;
if (!name) { alert("Name required!"); return; }
console.log(`Submitted: ${name}`);
});
FETCH API — ASYNC/AWAIT
async function loadUsers() {
try {
// Free test API at jsonplaceholder.typicode.com
const response = await fetch("https://jsonplaceholder.typicode.com/users");
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const users = await response.json();
const list = document.querySelector("#user-list");
list.innerHTML = ""; // clear existing
users.forEach(user => {
const li = document.createElement("li");
li.textContent = `${user.name} — ${user.email}`;
list.appendChild(li);
});
} catch (error) {
console.error("Failed:", error.message);
document.querySelector("#status").textContent = "Load failed!";
}
}
document.querySelector("#load-btn").addEventListener("click", loadUsers);
Project: Portfolio Website
Build your personal portfolio — the most important project you'll make. Showcase your skills, projects, and contact info to future employers and collaborators.
PROJECT STRUCTURE
portfolio/
├── index.html ← main page
├── style.css ← styles
├── script.js ← interactivity
└── images/
├── profile.jpg
└── project1.jpg
KEY SECTIONS TO BUILD
<!-- 1. NAVBAR -->
<nav class="navbar">
<div class="logo">Raju.dev</div>
<ul><li><a href="#projects">Projects</a></li></ul>
</nav>
<!-- 2. HERO -->
<section class="hero">
<img src="images/profile.jpg" class="avatar">
<h1>Hi, I'm <span>Raju Sharma</span></h1>
<p>Electronics & Python enthusiast from Kathmandu</p>
<a href="#projects" class="btn">See My Work</a>
</section>
<!-- 3. SKILLS GRID -->
<section id="skills">
<h2>My Skills</h2>
<div class="skills-grid">
<div class="skill">⚡ Electronics</div>
<div class="skill">🐍 Python</div>
<div class="skill">🌐 Web Dev</div>
<div class="skill">🤖 Arduino</div>
</div>
</section>
<!-- 4. PROJECTS -->
<section id="projects">
<div class="project-card">
<img src="images/project1.jpg" alt="Night Light">
<h3>Smart Night Light</h3>
<p>Auto LED using LDR and transistor</p>
<a href="#" class="btn-sm">View Project →</a>
</div>
</section>
Deploy with GitHub Pages
Put your website live on the internet for FREE using GitHub Pages. Get your own URL (yourusername.github.io) with zero server setup in under 5 minutes.
- 1
Install Git from git-scm.com and create a free account at github.com.
- 2
Create a new repository on GitHub. Name it exactly: yourusername.github.io (replace "yourusername" with your actual GitHub username).
- 3
In your portfolio folder on your computer, open a terminal (right-click → "Open in Terminal" on Windows/Mac).
- 4
Run the commands below to push your files to GitHub.
- 5
Wait 2 minutes, then open https://yourusername.github.io — your site is live! 🎉
# Initialize git in your project folder
git init
git add .
git commit -m "My portfolio website"
# Connect to GitHub and push
git remote add origin https://github.com/yourusername/yourusername.github.io
git branch -M main
git push -u origin main
# Every time you make changes, update with:
git add .
git commit -m "Update portfolio"
git push
🌐 Custom .com.np Domain: Get a free .com.np domain from Mercantile Communications Nepal for students. Add a file called CNAME (no extension) to your repo containing just your domain name (e.g. rajusharma.com.np). Then configure your domain's DNS to point to GitHub Pages.