CodingHelp LogoCodingHelp Wiki
Back to Web DevelopmentNext: Frontend Frameworks

HTML & CSS

Learn the fundamental building blocks of web development. HTML provides structure and content, while CSS handles styling and layout.

📚 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

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