📚 What You'll Learn

HTML Fundamentals

  • HTML Structure: DOCTYPE, html, head, body elements
  • Text Elements: Headings, paragraphs, lists, links
  • Media Elements: Images, videos, audio
  • Forms: Input fields, buttons, validation
  • Semantic HTML: header, nav, main, article, section, footer

CSS Fundamentals

  • Selectors: Element, class, ID, attribute selectors
  • Box Model: Margin, border, padding, content
  • Layout: Flexbox, Grid, positioning
  • Responsive Design: Media queries, mobile-first approach
  • Animations: Transitions, keyframes, transforms
🎨

Hands-on Tutorial: Build Your First Web Page

1

Create a basic HTML file

Create a file called index.html and add this structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first web page.</p>
</body>
</html>
2

Add semantic HTML structure

Expand your HTML with proper semantic elements:

<body>
    <header>
        <h1>Welcome to My Site</h1>
        <nav>
            <ul>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section id="about">
            <h2>About Me</h2>
            <p>I'm learning web development!</p>
            <ul>
                <li>HTML for structure</li>
                <li>CSS for styling</li>
                <li>JavaScript for interactivity</li>
            </ul>
        </section>
    </main>
    
    <footer>
        <p>&copy; 2024 My Website</p>
    </footer>
</body>
3

Add CSS styling

Create a style.css file and link it in your HTML head:

/* In your HTML head: */
<link rel="stylesheet" href="style.css">

/* In style.css: */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
}

header {
    background-color: #2c3e50;
    color: white;
    padding: 1rem;
    text-align: center;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 1rem;
}

nav a {
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background-color 0.3s;
}

nav a:hover {
    background-color: #34495e;
}
4

Style the main content

Add styling for the main content area:

main {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

h2 {
    color: #2c3e50;
    margin-bottom: 1rem;
}

p {
    margin-bottom: 1rem;
}

ul {
    margin-left: 2rem;
    margin-bottom: 1rem;
}

footer {
    text-align: center;
    padding: 2rem;
    background-color: #34495e;
    color: white;
    margin-top: 2rem;
}
5

Make it responsive

Add responsive design with CSS media queries:

/* Responsive Design */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    main {
        margin: 1rem;
        padding: 1rem;
    }
    
    header, footer {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 14px;
    }
    
    h1 {
        font-size: 1.5rem;
    }
    
    h2 {
        font-size: 1.2rem;
    }
}
6

Test and view your page

Open your index.html file in a web browser to see your creation!

💡 Pro tips: Right-click → "Inspect Element" to see the HTML structure, try resizing your browser window to test responsiveness, and experiment with different colors and fonts!

HTML - HyperText Markup Language

HTML is the standard markup language for creating web pages. It describes the structure and content of a webpage using elements and tags.

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 First Web Page</title>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section id="home">
            <h2>Home Section</h2>
            <p>This is the main content of the page.</p>
        </section>
    </main>
    
    <footer>
        <p>&copy; 2024 My Website. All rights reserved.</p>
    </footer>
</body>
</html>

CSS - Cascading Style Sheets

CSS is used to style and layout web pages. It controls colors, fonts, spacing, positioning, and responsive behavior.

Basic CSS Example:

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
}

/* Header styles */
header {
    background-color: #2c3e50;
    color: white;
    padding: 1rem 0;
}

header h1 {
    text-align: center;
    margin-bottom: 1rem;
}

/* Navigation */
nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 2rem;
}

nav a {
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background-color 0.3s;
}

nav a:hover {
    background-color: #34495e;
}

/* Responsive design */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
        gap: 0.5rem;
    }
}

Modern CSS Features

🔧 Flexbox Layout

Perfect for one-dimensional layouts and component alignment.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

📱 CSS Grid

Powerful two-dimensional layout system for complex designs.

.grid {
  display: grid;
  grid-template-columns: 
    repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

📖 Recommended Learning Resources

Free Resources:

  • MDN Web Docs (HTML & CSS Reference)
  • freeCodeCamp (Interactive Lessons)
  • CSS-Tricks (Tips and Tutorials)
  • Flexbox Froggy (Flexbox Game)
  • Grid Garden (CSS Grid Game)

Practice Projects:

  • Personal Portfolio Website
  • Restaurant Landing Page
  • Photo Gallery with Grid
  • Responsive Navigation Menu
  • CSS Animation Showcase

🚀 Next Steps

Once you're comfortable with HTML and CSS fundamentals, you're ready to explore modern frontend frameworks and JavaScript libraries.

Learn Frontend Frameworks →
Back to Web DevelopmentNext: Frontend Frameworks