GUIDE 4

Chapter 12: Web Page Layout

Introduction to Web Structure with HTML5

Overview of common page sections: <header>, <nav>, <section>, <footer>, and <aside>
Purpose of each section and visual examples of their placement​
12-A Structural Elements of a Page
Key Structural Tags: <header>, <nav>, <section>, <aside>, <footer>, <article>
Usage Considerations: <div> and <span> for fallback, ensuring SEO and accessibility​
12-B Absolute and Relative Positioning
Positioning Techniques:
Absolute Positioning: Placing elements anywhere on the page with specified
coordinates
Fixed Positioning: Keeping elements in place even during scrolling
Relative Positioning: Adjusting position relative to the original spot of the element​​
12-C Flexible Boxes (Flexbox)
Flexbox Basics: Flex container and flex items, properties for container (display: flex)
Properties for Control:
Main Axis (justify-content) and Cross Axis (align-content): Options like flex-start, flex-
end, center, space-between, space-around, and space-evenly
Flex-Direction and Flex-Wrap for multi-line layouts​​
12-D CSS Grids
Introduction to CSS Grid: Defining grid layout and cell placement
Grid Properties:
Grid-template-columns and Grid-template-rows: Define grid tracks
Grid-Auto-Rows and Grid-Column shortcuts for efficient setup
Minmax Function: Setting min-max constraints for responsive grids​

Chapter 13: Responsive Design

13-A Flexbox for Responsive Design

Using Flexbox to adapt layouts across screen sizes with <meta name="viewport">​
13-B CSS Grid for Responsive Layouts
Using grids with media queries for dynamic layouts that adjust based on screen width​
13-C Combining Flexbox and CSS Grid
Integration of Flexbox and Grid for complex, flexible layouts optimized for responsive
design​

Chapter 14: Web Showcase Project

Practical Project: Building a showcase site to implement HTML, CSS, Flexbox, and Grid
principles in a cohesive project​
HTML5 Structural Tags: Introduction

HTML5 introduces semantic elements that help define the structure and improve the accessibility
of web pages. These structural tags—such as <header>, <nav>, <section>, <footer>, and <aside>—
provide meaning to the layout, making it easier for search engines and assistive technologies to
interpret page content.

Overview of Key Structural Tags

1. <header>

Purpose: The <header> element serves as a container for introductory content or navigation
links.
Typical Contents:
Site or section titles (<h1> - <h6> tags)
Logo or branding image
Author or site information
Taglines or brief descriptions
Some navigation links (like a login link)
Placement:
Commonly placed at the top of the page or within sections.
Multiple <header> elements are allowed in a single document, but they should not be
nested within other <header> or <footer> elements​.

2. <nav>

Purpose: The <nav> element is used to define a block of navigation links for primary site
navigation.
Usage Notes:
Not all links need to be included in <nav>; only the main navigation links belong here.
Often displayed as a list (<ul>) with styles like bullet points removed for clean navigation
bars.
Accessibility:
Enhances screen reader navigation by indicating the presence of primary links, improving
the user experience for those with disabilities​​.

3. <section>

Purpose: Defines a standalone section within a page, grouping related content by theme or
purpose.
Usage Context:
Frequently used for dividing the main content into thematic sections, each <section>
containing a coherent part of the content.
Ideal for blogs, articles, or thematic areas within the page.
Styling Tips:
Use CSS to place and style <section> elements centrally to enhance readability​.
4. <aside>

Purpose: Represents content that is tangentially related to the main content, often used for
sidebars or additional links.
Common Use Cases:
Frequently contains links to related resources, such as blogs, external references, or
author information.
Ideal for supplementary information that enhances the main content but can be omitted
without disrupting flow.
Design Note:
Typically positioned to the side, like in a sidebar, though CSS customization is often
needed to achieve this layout​​.

5. <footer>

Purpose: The <footer> element provides a dedicated area for page or section footers,
containing concluding or legal information.
Typical Contents:
Author or site details
Copyright or trademark information
Contact links or social media icons
Sitemap or “Back to top” links
Placement:
Often located at the bottom of pages or sections, though multiple <footer> elements can
be used throughout a document as needed for section-specific information​.

Introduction to Positioning with CSS

CSS positioning is crucial for designing precise layouts, as it controls how elements are placed on
a web page. By mastering absolute, fixed, and relative positioning, you can customize where
elements appear in relation to other content, achieving flexible and visually appealing layouts.

CSS Positioning Types

1. Absolute Positioning (position: absolute)

Description: Places an element precisely within its containing block based on coordinates
(left, right, top, bottom). This element is removed from the normal document flow,
meaning other elements ignore it.
Usage:
After setting position: absolute, use top, left, right, and bottom to control exact
placement.
Elements positioned absolutely overlay others unless adjusted with z-index.
Example:
.header {
position: absolute;
top: 10px;
 left: 20px;
}

This places the.header element 10px from the top and 20px from the left of its containing
element​​.
1. Fixed Positioning (position: fixed)
Description: Similar to absolute, but remains in place during page scrolling. Fixed-
positioned elements are often used for navigation bars or headers that should stay visible.
Usage:
Combine fixed with top, left, right, and bottom to define placement.
Elements remain on top of scrolling content, and z-index can control their overlay
order.
Example:
.navbar {
position: fixed;
top: 0;
width: 100%;
}

Here,.navbar remains at the top of the viewport while the page is scrolled​​.
1. Relative Positioning (position: relative)
Description: Shifts an element from its normal position without affecting the layout of
other elements. Useful for subtle adjustments without removing the element from the
document flow.
Usage:
Use top, left, right, and bottom values to slightly adjust position relative to its original
spot.
This type of positioning does not remove the element from the flow, so space is
preserved.
Example:
.content {
position: relative;
top: 5px;
left: 15px;
}

The.content element shifts 5px down and 15px to the right, keeping its spot in the
document flow​​.

Practical Exercises with HTML and CSS

The document provides hands-on exercises to practice CSS positioning:

1. HTML and CSS Setup:

Open Index.html and StyleSheet.css provided in the Positionnement CSS folder.
This includes initial HTML and pre-styled elements to distinguish their layouts.
 2. Absolute Positioning Exercise:
Modify .header with position: absolute and set coordinates with top, left, right, or bottom.
Save and reload in a browser to observe how .header overlays other elements on the
page.
3. Fixed Positioning Exercise:
Apply position: fixed to .navbar and use coordinates to set a location.
Scroll through the page to see .navbar stay fixed in position, visible over other content​.
4. Relative Positioning Exercise:
Update .content to have position: relative, shifting it with top, left, etc.
Note how .content retains its space in the layout, moving only within its own area​​.

Introduction to Flexbox

Flexbox is a layout model introduced in CSS to create responsive designs by allowing flexible
arrangements of items within a container. Flexbox primarily aligns items along two axes—the
main axis and the cross axis—and adjusts items based on the available space.

Key Flexbox Components

1. Flex Container:
To use Flexbox, define a container with display: flex;.
The container then serves as a parent, allowing for easy manipulation of child items.
2. Flex Items:
Direct children of the flex container, which can be arranged in various ways along the
axes.

Properties for Flex Container Control

1. Main Axis (Horizontal or Vertical Alignment)

Controlled by setting the justify-content property.
Values:
flex-start: Aligns items at the start of the container.
flex-end: Aligns items at the end of the container.
center: Centers items along the main axis.
space-between: Distributes items with equal space between them, with no space at the
container edges.
space-around: Adds equal space around each item.
space-evenly: Provides equal space between items and the container edges​​.
2. Cross Axis (Vertical or Horizontal Alignment)
Controlled with the align-content property.
Values:
stretch (default): Stretches items to fill the container.
flex-start: Aligns items at the start of the cross axis.
flex-end: Aligns items at the end of the cross axis.
center: Centers items along the cross axis.
space-between, space-around, space-evenly: Similar to justify-content, but applied to
the cross axis​.
3. Flex Direction
 Specifies the direction of the main axis within the flex container.
Values:
row (default): Aligns items in a horizontal row, left to right.
row-reverse: Aligns items in a horizontal row, right to left.
column: Aligns items in a vertical column, top to bottom.
column-reverse: Aligns items in a vertical column, bottom to top​​.
4. Flex Wrap
Controls whether items should wrap onto multiple lines.
Values:
nowrap: All items are on a single line (default).
wrap: Items wrap to the next line if necessary.
wrap-reverse: Items wrap to the next line in reverse order​​.

Practical Exercise Setup

1. HTML & CSS Files:

Create an Index.html file and a StyleSheet.css file.
Set up a flex container in CSS and experiment with each property by changing values and
observing the impact in a browser.

CSS Grids:

CSS Grids is a powerful layout system introduced to simplify complex webpage layouts by
creating flexible grids of rows and columns, enabling responsive and intricate design structures.

Basics of CSS Grids

1. Grid Layout and Cell Placement

Grid Container: An element with display: grid;, which acts as a container where child
elements are organized into a grid.
Tracks: Horizontal (rows) and vertical (columns) areas within the grid; defined by grid
properties.
Cells: Smallest units in the grid, where elements are placed and manipulated without
altering neighboring cells​​.

Key Grid Properties for Layout Control

1. Grid-template-columns and Grid-template-rows

Purpose: Define the number and size of columns and rows in the grid.
Syntax:
Example: grid-template-columns: 200px 1fr 200px; creates three columns: the first and
last are fixed at 200px, and the middle one adjusts to the remaining space (using
fractional units fr).
Fractional Units (fr): Allows flexible layouts, with units that represent portions of the
available space in the container​​.
2. Grid-Auto-Rows and Grid-Auto-Columns
Purpose: Automatically generates rows and columns for content that exceeds the defined
grid boundaries.
 Usage: Example: grid-auto-rows: 100px; ensures all auto-generated rows have a height of
100px. Useful for handling unpredictable content without modifying the primary grid
definition​.
3. Minmax Function for Responsive Grids
Purpose: Sets minimum and maximum size constraints for rows or columns, allowing
flexibility while preserving layout integrity.
Example: grid-template-rows: minmax(100px, auto); sets rows to be at least 100px high,
but they can expand based on content size, making it ideal for dynamic or responsive
layouts​​.

Practical Grid Techniques

1. Setting Up a Basic Grid

Start by defining a grid with specific column and row properties in the CSS file.
Experiment by creating a grid with mixed units, such as fixed pixel columns combined with
flexible fractional columns, to achieve a responsive layout that adapts to screen resizing​.
2. Using Repeat Notation
Syntax: repeat(n, value); simplifies the creation of grids with repeated columns or rows.
Example: grid-template-columns: repeat(3, 1fr); generates three equally spaced columns
that each take up one fraction of the available space, reducing repetitive code​.
3. Implicit and Explicit Grids
Explicit Grids: Created using grid-template-rows and grid-template-columns explicitly
setting the track sizes.
Implicit Grids: Formed when additional rows or columns are required for content outside
the defined grid; size can be set with grid-auto-rows and grid-auto-columns​.
Flexbox for Responsive Design:

Using Flexbox in responsive web design allows elements to adapt flexibly to various screen sizes
and orientations. The <meta name="viewport"> tag plays a critical role in controlling how the
page displays across devices, particularly for mobile responsiveness.

Using Flexbox for Layout Adaptability

1. Flexbox Basics for Responsive Design

Flex Container and Items: Set up a container using display: flex; to align and organize flex
items responsively.
Responsive Scaling:
Use properties like flex-grow, flex-shrink, and flex-basis to let elements expand,
contract, and define their base size within the available space.
These settings make Flexbox ideal for layouts that need to adjust dynamically based
on screen space​​.

The <meta name="viewport"> Tag for Responsive Web Design

Purpose: The <meta name="viewport"> tag sets the visible area of a webpage and adjusts it
to suit different devices.
Key Properties:
width=device-width: Ensures the viewport width matches the device’s screen width, using
CSS pixels to scale content proportionally across devices.
initial-scale=1.0: Sets the initial zoom level when a page first loads, ensuring consistent
display across screen sizes.
CSS Pixel Explanation: Unlike physical pixels, CSS pixels adjust dynamically, providing a
stable layout across various devices and display resolutions​​.

Flexbox Properties for Control and Responsiveness

1. Main Axis Alignment (Horizontal)

justify-content: Aligns items within the flex container on the main axis. Useful values for
responsive design:
flex-start, flex-end: Aligns items to the start or end of the container.
center: Centers items along the main axis.
space-between, space-around, space-evenly: Adjusts spacing around and between
items, crucial for balanced layouts on larger screens​.
2. Cross Axis Alignment (Vertical)
align-content: Aligns items across the container’s secondary axis.
Commonly used values: stretch (default), center, and space-around.
Supports balanced vertical spacing, making it ideal for taller screens or portrait
orientations​.
3. Flex-Direction and Flex-Wrap for Multi-Line Layouts
Flex-Direction:
row or column: Arranges items horizontally (default) or vertically.
row-reverse and column-reverse: Reverses item order based on screen size needs.
 Flex-Wrap:
wrap: Allows items to wrap onto multiple lines as the viewport shrinks.
nowrap: Prevents wrapping (default), keeping items on one line even if the container
shrinks​​.

CSS Grid for Responsive Layouts:

CSS Grid is a flexible system for building dynamic, responsive layouts that adapt to varying
screen sizes. By combining CSS Grid properties with media queries, you can adjust content
placement across devices, achieving layouts that fit both large screens and mobile devices.

Key Concepts in CSS Grid for Responsive Design

1. Defining Grids and Cell Placement

Grid Container: Define a container with display: grid;, which sets up a grid layout for child
elements.
Rows and Columns:
Use grid-template-columns and grid-template-rows to define the layout tracks in the
grid.
These properties allow precise control over layout by specifying the size and number
of columns and rows, which automatically adjust with screen size when combined with
media queries​​.
2. Responsive Adjustment with Media Queries
Media Queries: CSS media queries allow you to set conditions for applying specific styles
based on device characteristics (e.g., screen width).
Syntax:
@media (max-width: 600px) {
/* CSS rules for smaller screens */
}

For example, if a layout is too compressed at 500px, use a media query to adjust the
display, stacking or resizing elements as needed​​.
1. Grid-template-columns and Grid-template-rows
Define columns and rows with units like px, %, or fr (fractional units for flexible space).
For example: grid-template-columns: repeat(2, 1fr); creates two equal columns.
This approach allows easy adjustments for screen width changes by redefining these
properties within media queries for different breakpoints​​.
2. Implicit Grids and Grid-Auto Rows/Columns
When content exceeds defined grid boundaries, CSS Grid can automatically create new
rows or columns.
Use grid-auto-rows to set default row height for these implicit rows, enhancing layout
consistency as new items are added on smaller screens​​.
3. Using Minmax for Responsive Layouts
Minmax Function: Sets minimum and maximum size constraints for columns or rows,
allowing them to adjust fluidly.
Example: grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); creates flexible
columns that are at least 150px wide, expanding as space allows.
 This function is ideal for maintaining an organized look across screen sizes, ensuring
columns don't shrink below a readable size while expanding when space permits​​.

Practical Steps for Applying CSS Grid with Media Queries

1. Initial Large Screen Layout

Define columns and rows for desktop using grid-template-columns and grid-template-
rows.
Set up a default layout with sufficient spacing and proportions that fit a large screen.
2. Adding Media Queries for Smaller Screens
Use @media to apply new CSS rules when the screen width drops below a set value, like
600px.
Adjust grid-template-columns to reduce the number of columns or stack elements
vertically for readability on small screens.
3. Testing Responsiveness
Use browser developer tools to test different screen widths and confirm that the layout
adjusts smoothly.
Check for overflow or spacing issues, especially on devices with very narrow screens.

Combining Flexbox and CSS Grid for Responsive Layouts

Combining Flexbox and CSS Grid in web design enables the creation of flexible, complex layouts
that adapt seamlessly to different screen sizes. Using these two tools together leverages the
unique strengths of each layout model: Grid for overall page structure and Flexbox for controlling
individual components within that structure.

Key Concepts for Integration

1. Using CSS Grid for Main Layout Structure

Grid Setup: Define large sections of the page using grid-template-columns and grid-
template-rows in the CSS Grid model. This approach is useful for setting up a multi-
column layout with clear divisions for headers, footers, sidebars, and main content.
Flexible Grid Areas: Place primary elements like <header>, <nav>, <main>, <aside>, and
<footer> in defined grid areas. For example, set the header to span multiple columns, or
use rows for organizing main and sidebar content​​.
2. Using Flexbox for Component-Level Flexibility
Flexbox Containers within Grid Cells: Within each grid area, define sections as flex
containers using display: flex. This setup is useful for arranging items within these larger
grid cells, allowing individual elements like navigation links or gallery items to be
organized flexibly.
Responsive Flex Properties: Adjust the display of elements with justify-content, align-
items, and flex-wrap to ensure items wrap or align based on screen size. Flexbox
properties are particularly helpful in sections like footers, where items need to be evenly
spaced​.

Implementing Responsive Design with Media Queries

1. Defining Breakpoints for Grid Adjustments

 Use media queries to adjust grid layouts at specific screen widths. For example, a two-
column layout might shift to a single-column layout on screens below 600px.
Example:
@media (max-width: 600px) {
grid-template-columns: 1fr;
}

This setup allows for greater control over layout changes as screen size decreases,
ensuring content remains readable and accessible​​.
1. Adjusting Flexbox Settings within Grid Areas
Inside each grid cell, use media queries to modify Flexbox properties. For example, switch
flex-direction from row to column in smaller viewports, stacking items vertically instead of
horizontally.
Example:
@media (max-width: 600px) {
flex-direction: column;
}

These adjustments optimize the use of space within each grid section, ensuring a
balanced layout across all devices​.

Practical Tips for Integration

1. Using Grid for Overall Structure, Flexbox for Content

Reserve CSS Grid for structuring large areas, like defining the placement of headers,
footers, and main sections.
Use Flexbox within each grid area to handle the alignment and distribution of smaller
elements, like buttons or text blocks, making them adaptable to different screen sizes​​.
2. Testing with Developer Tools
Regularly test layouts by resizing the browser window and using developer tools to
inspect behavior at different breakpoints.
Adjust grid and flex properties as needed to fix overflow issues or adjust alignment for
small screen sizes​.
Understand the Purpose of a "Site Vitrine"

A "site vitrine" (showcase website) is designed to present an organization’s products or

services in an attractive, simple way without direct sales functions.

Step 1: Setup and File Organization

1. Create the Folder Structure:

Main Project Folder: Store all website files here.
Inside the main folder, create:
CSS Folder: For your stylesheet, StyleSheet.css.
Images Folder: For all images you’ll use (like product photos).
HTML Files: Start with Index.html as the main page.

Step 2: Building the HTML Structure

1. Basic HTML Skeleton in Index.html:

Start with <!DOCTYPE html> and create a <head> section with <title> and link your
StyleSheet.css.
Use <body> for the main content. This is where all visible content goes​.

Step 3: Creating the Navigation Bar

1. HTML for <nav>:

Add <nav> inside <body>.
Inside <nav>, include:
A <img> for the company logo.
Three <a> tags for links to pages: Home, Products/Services, and Contact.
CSS Styling for <nav>:
Center-align the content with display: flex; justify-content: space-between;.
Use margin-right to separate the links evenly, and remove default link underlines with
text-decoration: none;​​.

Step 4: Header Section for Introduction

1. HTML for <header>:

Add a <header> element with <h1> for the business name and <h4> for a tagline.
2. CSS for <header>:
Set a background image with background-image: url("your-image.jpg"); background-size:
cover;.
Style text for a professional look, adjusting padding and setting flex-direction: column; to
stack elements vertically.

Step 5: Main Content Section with Cards

1. HTML for the Main Content (<section>):

In <section>, each "card" is a <div>with:
Left side: Text content in one <div>.
 Right side: Image in another <div>.
2. CSS for Card Layout:
Use display: flex; to create a side-by-side layout.
Set the image to a standard size, like width: 400px; height: 300px;, so all images are
uniform​​.

Step 6: Responsive Design with Media Queries

1. CSS Adjustments:
Use @media (max-width: 768px) {} to change layout for small screens.
Within this query:
Set flex-direction: column; for <section> to stack cards vertically.
Adjust text and image widths to 100% for smaller displays​​.

Step 7: Creating Additional Pages

1. Create Filesfor linked pages:

Produits.html, Compagnons.html, and Beaute.html are additional pages that provide more
details.
Link each page in <nav> by adding the correct href values in <a> tags.
2. Repeat Basic Setup:
Each page should have a basic HTML structure and link back to StyleSheet.css for
consistent styling​​.

Step 8: Footer Section

1. HTML for Footer:

Use <footer> for company info, policy links, or additional resources.
2. CSS Styling:
Set footer background color and center-align text.
Adjust link colors to ensure they stand out on the footer background​.

Step 9: Finishing Touches and Testing

1. Consistency Checks:
Make sure links work and layout looks right on different screen sizes.
2. Developer Tools:
Use browser tools (like Chrome DevTools) to simulate mobile and tablet views and test
responsiveness.