Skip to content

HTML & CSS Fundamentals

Overview

HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are the foundational technologies for building web pages.

  • HTML: Provides structure and content
  • CSS: Provides styling and layout

What You'll Learn

  • HTML semantic structure
  • CSS styling and layouts
  • Responsive design principles
  • Bootstrap framework basics
  • Box model and flexbox

Key Topics

HTML Basics

  • HTML5 document structure
  • Semantic HTML elements
  • Forms and input elements
  • Accessibility best practices

CSS Fundamentals

  • Selectors and specificity
  • Box model (margin, padding, border)
  • Flexbox and Grid layouts
  • Media queries for responsiveness

Bootstrap 5

  • Grid system
  • Components and utilities
  • Responsive design patterns

Getting Started

Start with basic HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Web Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Welcome to Web Development</h1>
    <p>This is your first web page!</p>
</body>
</html>

Resources

Refer to the PDF slides in the materials folder for comprehensive coverage of HTML, CSS, Bootstrap, and jQuery.