HTML and CSS Review

Workplace Context

Imagine you are a new front-end developer at a company focused on creating accessible and responsive websites for various clients. Your team emphasizes the importance of well-structured, semantic HTML and clean, efficient CSS to ensure all web applications are inclusive and perform well across different devices. Before diving into your first project, you need to review these foundational concepts to ensure your code meets the company’s high standards for accessibility and responsiveness.

Learning Objectives

By the end of this lesson, you will be able to:

• Create well-structured, responsive web pages using semantic HTML and CSS.
• Explain and apply the CSS box model, selectors, and properties effectively.
• Use responsive design techniques, including media queries, fluid grids, and flexible images.

Semantic HTML

Semantic HTML provides meaning to the web content, improving accessibility and search-engine optimization (SEO). Each element clearly describes its purpose, making it easier for screen readers and search engines to interpret the content.

Key Semantic Elements:

• <header>: Represents introductory content or navigation.
• <nav>: Contains navigation links.
• <main>: Main content of the document, unique to the page.
• <section>: Thematic grouping of content, often with a heading.
• <article>: Self-contained content, like a blog post or news article.
• <footer>: Contains information about its containing element, like copyright info or links.

CSS Fundamentals: Selectors, Properties, and the Box Model

CSS Selectors allow you to target HTML elements to apply styles. These include:

• Element selectors: p { color: blue; }
• Class selectors: .container { padding: 20px; }
• ID selectors: #header { background-color: lightgray; }
• Attribute selectors: input[type="text"] { border: 1px solid #ccc; }

The CSS Box Model: Every HTML element is a rectangular box, consisting of:

• Content: The actual content, like text or an image.
• Padding: Space between the content and the border.
• Border: A line surrounding the padding (if any) and content.
• Margin: Space outside the border, creating distance from other elements.

In this example, for the p element with the id of text1:

• The light blue area is the content.
• The light green area is the padding.
• The orange area is the border.
• The orange-red area is the outline.

Visualizing the Box Model: Use browser developer tools to inspect and understand the box model of elements.

Responsive Web Design Principles

Responsive web design ensures that web pages look and function well on all devices, from desktops to smartphones.

Fluid Grids and Flexible Images:

• Fluid grids use relative units like percentages rather than fixed units like pixels.
• Flexible images resize themselves within their parent containers to prevent overflow.

Media Queries: Allow you to apply CSS rules based on device characteristics like screen width.

Example:

/* Default styles */
body {
  font-size: 16px;
  margin: 0;
}
 
/* Styles for screens wider than 768px */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

Activities

Code Along: Building a Basic Responsive Web Page

• Time: 1 hour
• Objective: Practice semantic HTML and responsive CSS techniques.
• Task: Build a web page with a header, main content area, and footer.
• Steps:
  1. Create semantic HTML structure with meaningful elements.
  2. Use CSS to style the page, applying the box model and basic properties.
  3. Add media queries to adjust the layout for different screen sizes.

Sample Code:

Hands-On: Implementing a Responsive Navigation Menu

• Time: 1.5 hours
• Objective: Create a navigation menu that adjusts for different screen sizes.
• Task: Design a horizontal navigation bar that switches to a dropdown menu on smaller screens.
• Steps:
  1. Write HTML for a navigation menu.
  2. Style the menu using Flexbox for a horizontal layout.
  3. Use media queries to change the layout to a vertical menu on small screens.

Knowledge Check

Summary

In this lesson, you reviewed semantic HTML, core CSS concepts, and responsive design techniques. You also applied these concepts through hands-on activities, building a well-structured and responsive web page. These skills are essential for creating modern, accessible, and adaptable web experiences.

References

• MDN Web Docs - HTML 
• MDN Web Docs - CSS 
• W3C - Introduction to Responsive Design 

Additional Resources

• CSS Tricks - A Complete Guide to Flexbox 
• A List Apart - Responsive Web Design