Web Foundations | Karan Singde

Module Overview

Version 0.2 Last Updated: April 10, 2025

Welcome to the first stop on my development journey! In this module, I'm documenting everything I've learned about HTML, CSS, and responsive design principles. This very website is being built using these skills, and I'm updating this module as I learn and apply new concepts.

My goal with this module is to establish a solid foundation in web development while creating a platform that will grow with me throughout my learning journey. Below, you'll find my notes, code examples, challenges I've faced, and solutions I've discovered.

Key Concepts Covered

HTML document structure and semantic elements
CSS selectors, properties, and the box model
Flexbox and CSS Grid for layout
Responsive design with media queries
CSS variables and modern techniques
Web accessibility best practices

HTML Fundamentals

HTML (HyperText Markup Language) is the backbone of every web page. It provides the structure and semantics for content. Here are the key concepts I've learned about HTML:

Document Structure

Every HTML document follows a standard structure that includes doctype declaration, html, head, and body elements.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document Title</title>
</head>
<body>
  <!-- Content goes here -->
</body>
</html>

Semantic HTML

Semantic elements provide meaning to the content structure, improving accessibility, SEO, and code readability.

Non-Semantic Elements

<div> - Generic container
<span> - Generic inline container

Semantic Elements

<header> - Page or section header
<nav> - Navigation links
<main> - Main content area
<section> - Standalone section
<article> - Independent content
<aside> - Related but separate content
<footer> - Page or section footer

Learning Insight:

When I first started building this website, I relied heavily on <div> elements. After learning about semantic HTML, I refactored my code to use appropriate semantic elements. This not only made my code more readable but also improved accessibility for users with screen readers.

CSS Fundamentals

CSS (Cascading Style Sheets) controls the presentation and layout of HTML elements. Here's what I've learned:

Selectors & Specificity

CSS selectors target HTML elements for styling. Specificity determines which styles are applied when multiple rules target the same element.

/* Element selector */
p {
  color: #333;
}

/* Class selector */
.highlight {
  color: #00bfff;
}

/* ID selector */
#hero {
  background-color: #f0f4f8;
}

/* Attribute selector */
input[type="text"] {
  border: 1px solid #ccc;
}

/* Pseudo-class */
a:hover {
  color: #0077b6;
}

Box Model

The CSS box model is fundamental to layout. Every element is a rectangular box with content, padding, border, and margin areas.

margin

border

padding

content

.box {
  /* Content dimensions */
  width: 300px;
  height: 200px;
  
  /* Padding (inner space) */
  padding: 20px;
  
  /* Border */
  border: 2px solid #333;
  
  /* Margin (outer space) */
  margin: 30px;
  
  /* Modern box sizing */
  box-sizing: border-box;
}

Learning Insight:

The box-sizing: border-box; property was a game-changer for me. By default, CSS uses content-box, which means padding and border are added to the specified width/height. Setting box-sizing: border-box; makes padding and border included in the element's dimensions, making layout calculations much more intuitive.

Responsive Design

Responsive design ensures websites look good on all devices. Here are the key techniques I've learned:

Media Queries

Media queries allow applying different styles based on device characteristics like screen width.

/* Base styles for all devices */
.container {
  padding: 20px;
}

/* Styles for tablets */
@media (max-width: 768px) {
  .container {
    padding: 15px;
  }
}

/* Styles for mobile phones */
@media (max-width: 480px) {
  .container {
    padding: 10px;
  }
}

Flexbox Layout

Flexbox is a one-dimensional layout method for arranging items in rows or columns.

.flex-container {
  display: flex;
  flex-direction: row; /* or column */
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.flex-item {
  flex: 1; /* Grow and shrink equally */
}

Learning Insight:

When building this website, I found that using a mobile-first approach made responsive design much simpler. I started with styles for mobile devices and then added media queries for larger screens. This approach resulted in cleaner code and better performance on mobile devices.

Mini Projects

Throughout learning these fundamentals, I've completed several mini-projects to practice my skills:

Personal Website v0.1

My very first attempt at creating a personal website using HTML and basic CSS.

View Demo Source Code

Responsive Profile Card

A simple profile card component that adapts to different screen sizes.

View Demo Source Code

Learning Resources

Here are the resources I found most helpful while learning HTML, CSS, and responsive design:

MDN Web Docs

Comprehensive documentation for web technologies including HTML, CSS, and JavaScript.

Visit Resource

CSS-Tricks

Excellent tutorials and references, especially for Flexbox and CSS Grid.

Visit Resource

freeCodeCamp

Free interactive coding challenges and projects for HTML and CSS fundamentals.

Visit Resource

Coding Challenges

Test your understanding of HTML and CSS with these challenges. I've solved them as part of my learning journey, and you can try them too!

Challenge #1: Build a Navbar

Create a responsive navigation bar that collapses into a hamburger menu on mobile devices.

Requirements:

Navigation links should be horizontally aligned on desktop
On mobile (below 768px), links should be hidden and replaced with a hamburger icon
Clicking the hamburger should show/hide the navigation links
Use semantic HTML elements

HTML:

<nav class="navbar">
  <div class="logo">Brand</div>
  <div class="menu-toggle">
    <div class="hamburger"></div>
  </div>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS:

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #333;
  color: white;
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 2rem;
}

.nav-links a {
  color: white;
  text-decoration: none;
}

.menu-toggle {
  display: none;
  cursor: pointer;
}

.hamburger {
  width: 30px;
  height: 3px;
  background-color: white;
  position: relative;
}

.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 3px;
  background-color: white;
}

.hamburger::before {
  top: -10px;
}

.hamburger::after {
  bottom: -10px;
}

@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }
  
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background-color: #333;
    padding: 1rem;
  }
  
  .nav-links.active {
    display: flex;
  }
}

JavaScript:

document.querySelector('.menu-toggle').addEventListener('click', function() {
  document.querySelector('.nav-links').classList.toggle('active');
});

Challenge #2: Create a Responsive Grid Layout

Build a responsive grid of cards that adjusts the number of columns based on screen size.

Requirements:

4 columns on large screens (1200px+)
3 columns on desktop (992px+)
2 columns on tablets (768px+)
1 column on mobile devices
Each card should have consistent spacing

HTML:

<div class="card-grid">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
  <div class="card">Card 5</div>
  <div class="card">Card 6</div>
  <div class="card">Card 7</div>
  <div class="card">Card 8</div>
</div>

CSS:

.card-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  padding: 20px;
}

.card {
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  min-height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
}

/* Responsive breakpoints */
@media (min-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .card-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}