← Back to Course Overview

Module 4: HTML & CSS II

In this module, we'll dive deeper into HTML and CSS to build more sophisticated and well-structured web pages. You'll learn advanced techniques for creating semantic markup and styling your content with CSS.

Advanced HTML

HTML provides a rich set of elements to structure web content in a meaningful way. Using semantic HTML not only improves the organization of your code but also enhances accessibility, SEO, and maintainability.

Semantic HTML

Semantic HTML uses meaningful tags that clearly describe their purpose to both browsers and developers. Using semantic elements makes your HTML more accessible and easier to understand:


<div class="header">My Website</div>
<div class="navigation">...</div>
<div class="main-content">...</div>
<div class="footer">...</div>


<header>My Website</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>

Common Semantic Elements

  • <header> - Container for introductory content or navigation links
  • <nav> - Section with navigation links
  • <main> - Main content of the document
  • <article> - Self-contained content that could stand independently
  • <section> - Thematic grouping of content
  • <aside> - Content tangentially related to the content around it
  • <footer> - Footer for the document or section
  • <figure> and <figcaption> - For images, diagrams, etc., with captions

Benefits of Semantic HTML

  • Accessibility: Screen readers can better interpret your content
  • SEO: Search engines better understand your page content
  • Maintainability: Code is easier to understand and maintain
  • Mobile Optimization: Helps with responsive design implementation

HTML Forms

Forms are a crucial part of web development, enabling user interaction and data collection. HTML provides various form elements for different input types:

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Message:</label>
  <textarea id="message" name="message" rows="4"></textarea>

  <button type="submit">Submit</button>
</form>

Common Form Elements

  • <input type="text"> - Text input field
  • <input type="email"> - Email input field
  • <input type="password"> - Password field
  • <input type="checkbox"> - Checkbox
  • <input type="radio"> - Radio button
  • <input type="number"> - Numerical input
  • <input type="date"> - Date picker
  • <select> and <option> - Dropdown selection
  • <textarea> - Multiline text input
  • <button> - Clickable button

Semantic HTML (curated content)

HTML Forms (curated content)

Advanced CSS

CSS (Cascading Style Sheets) is a powerful language for styling web pages. Beyond basic styling, CSS offers various layout systems and techniques to create responsive, attractive designs.

The CSS Box Model

The CSS Box Model is fundamental to understanding how elements are sized and spaced in CSS. Every HTML element is treated as a box with content, padding, border, and margin areas:

Box Model Components

  • Content: The actual content of the element (text, images, etc.)
  • Padding: Space between the content and border
  • Border: Line around the padding
  • Margin: Space outside the border, creating distance from other elements
.box {
  width: 300px;
  height: 150px;
  padding: 20px;
  border: 5px solid #333;
  margin: 25px;
  box-sizing: border-box; /* Important property */
}

box-sizing Property

The box-sizing property controls how the width and height of elements are calculated:

  • content-box (default): Width and height apply to the content only
  • border-box: Width and height include padding and border

Using box-sizing: border-box; makes layout calculations much more intuitive and is a common modern practice.

Flexbox Layout

Flexbox (Flexible Box Layout) is a one-dimensional layout system designed for arranging items in rows or columns. It's particularly useful for creating responsive elements within a container:

/* Container styles */
.flex-container {
  display: flex;
  flex-direction: row; /* or column */
  justify-content: space-between; /* horizontal alignment */
  align-items: center; /* vertical alignment */
  flex-wrap: wrap; /* allow items to wrap */
  gap: 20px; /* space between items */
}

/* Item styles */
.flex-item {
  flex: 1; /* shorthand for flex-grow, flex-shrink, flex-basis */
  min-width: 200px;
}

Key Flexbox Properties

For the container:

  • display: flex - Creates a flex container
  • flex-direction - Sets the main axis (row, column)
  • justify-content - Aligns items along the main axis
  • align-items - Aligns items along the cross axis
  • flex-wrap - Controls whether items wrap to new lines
  • gap - Sets spacing between flex items

For the items:

  • flex-grow - How much an item can grow
  • flex-shrink - How much an item can shrink
  • flex-basis - Initial main size of the item
  • align-self - Overrides the container's align-items
  • order - Controls the order of items

Responsive Design

Responsive design ensures websites look and function well on all devices and screen sizes. Key techniques include:

/* Using relative units */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  font-size: 1rem;
}

/* Media queries */
@media (max-width: 768px) {
  .container {
    width: 95%;
  }
  .flex-container {
    flex-direction: column;
  }
}

Responsive Design Principles

  • Fluid grids: Use percentage-based widths instead of fixed pixels
  • Flexible images: Make images scale with their containers
  • Media queries: Apply different styles based on device characteristics
  • Mobile-first approach: Design for mobile first, then enhance for larger screens
  • Relative units: Use rem, em, %, vh, vw instead of pixels when appropriate

CSS Box Model (curated content)

CSS Flexbox (curated content)

CSS Responsive Design (curated content)

Understanding the general structure of a CSS rule

Learning general CSS properties

Overwriting User Agent CSS Rules By Utilizing Resets

CSS Selectors

Guided Project

Now that you've learned about advanced HTML and CSS concepts, it's time to put your knowledge into practice with a guided project. In this project, you'll build a responsive webpage that incorporates semantic HTML elements and uses CSS flexbox for layout.

Project: Build a Responsive Portfolio Page

Project Requirements

  1. Create a responsive portfolio page that looks good on mobile, tablet, and desktop screens
  2. Use semantic HTML elements throughout your page
  3. Implement a navigation menu using flexbox
  4. Create a projects section with flex cards for each project
  5. Include a contact form with proper form elements and styling
  6. Use the CSS box model effectively for spacing and borders
  7. Implement media queries to adjust layout for different screen sizes

Project Tips

  • Start with a mobile-first approach, then add media queries for larger screens
  • Use a CSS reset or normalize.css to ensure consistent rendering across browsers
  • Test your design at various screen sizes using browser developer tools
  • Remember to use relative units (%, rem, em) for responsive sizing
  • Implement box-sizing: border-box; for more intuitive layouts

Project Structure

Your portfolio should include the following sections:

<!-- Basic structure example -->
<header>
  <nav>
    <!-- Navigation menu -->
  </nav>
</header>

<main>
  <section class="hero">
    <!-- Hero/Intro section -->
  </section>

  <section class="projects">
    <!-- Projects section with flex cards -->
  </section>

  <section class="contact">
    <!-- Contact form -->
  </section>
</main>

<footer>
  <!-- Footer content -->
</footer>

Example CSS for Responsive Layout

/* Base styles (mobile first) */
* {
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

.container {
  width: 90%;
  margin: 0 auto;
}

nav ul {
  display: flex;
  flex-direction: column; /* Stack on mobile */
  list-style: none;
  padding: 0;
}

.projects {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Tablet styles */
@media (min-width: 768px) {
  nav ul {
    flex-direction: row;
  }
  
  .projects {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .project-card {
    flex: 0 0 calc(50% - 20px);
  }
}

/* Desktop styles */
@media (min-width: 1024px) {
  .container {
    width: 80%;
    max-width: 1200px;
  }
  
  .project-card {
    flex: 0 0 calc(33.333% - 20px);
  }
}

HTML & CSS II Guided Project

Additional Resources

To deepen your understanding of HTML and CSS concepts covered in this module, explore these additional resources:

Semantic HTML Resources

HTML Forms Resources

CSS Box Model Resources

CSS Flexbox Resources

Responsive Design Resources

Practice Resources

Developer Tools

Modern browsers come with powerful developer tools that let you inspect and modify HTML and CSS in real-time. Practice using:

  • Element inspector to view and modify HTML structure
  • Styles panel to see and edit CSS rules
  • Device mode to test responsive designs
  • Console to debug JavaScript interactions

Access developer tools by right-clicking on a webpage and selecting "Inspect" or by pressing F12.