Hands-on Exercise Style and Layout a Website with CSS

webdev
Exercices
Auteur
Affiliations

Emmanuel BRUNO

Université de Toulon

LIS UMR CNRS 7020

Date de publication

2024-10-13

PART I: Individual Work

Exercise 1: Basic Styling

  1. Create a new HTML file and link a CSS file:
    • Create a file named styles.css.
    • Link it in your HTML file (index.html):
    <link rel="stylesheet" href="styles.css">
  2. Add a heading, paragraph, and an image:
    • Add the following HTML to your index.html:
    <section>
  <h1>Welcome to My E-commerce Store</h1>
  <p>Discover our range of products and shop online.</p>
  <img src="path/to/image.jpg" alt="Sample Image">
</section>
  3. Style the text and image using CSS properties:
    • Add the following CSS to styles.css:
    h1 {
  color: #333;
  font-family: Arial, sans-serif;
  text-align: center;
}

p {
  color: #666;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
}

img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

Exercise 2: Box Model

  1. Create a box with content, padding, border, and margin:
    • Add the following HTML to your index.html:
    <div class="box">
  <p>This is a box with padding, border, and margin.</p>
</div>
  2. Experiment with different values for padding, border, and margin:
    • Add the following CSS to styles.css:
    .box {
  padding: 20px;
  border: 2px solid #333;
  margin: 20px;
  background-color: #f9f9f9;
}

Exercise 3: Flexbox Layout

  1. Create a flex container with multiple items:
    • Add the following HTML to your index.html:
    <div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>
  2. Use flex properties to arrange the items in different ways:
    • Add the following CSS to styles.css:
    .flex-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px;
  background-color: #e9e9e9;
}

.flex-item {
  padding: 20px;
  background-color: #ccc;
  border: 1px solid #333;
}

Exercise 4: Responsive Design

  1. Create a responsive layout using media queries:
    • Add the following CSS to styles.css:
    @media (max-width: 600px) {
  .flex-container {
    flex-direction: column;
  }
}
  2. Test the layout on different screen sizes:
    • Resize your browser window to see the layout change.

Additional Tips:

  • Validate Your CSS:
  • Test Your Pages:
    • Test your web pages in different browsers to ensure compatibility.
  • Keep Practicing:
    • Experiment with different styles and layouts to improve your CSS skills.

Part II: Using a Framework: Bootstrap

Exercise 5: Bootstrap Table

  • Objective: Create a table with Bootstrap classes.
  • Instructions:
    • Create a new HTML file and include Bootstrap via CDN.
    • Create a table and apply Bootstrap classes like table, table-striped, etc.

Step 1: Setting Up Bootstrap

  • Include Bootstrap via CDN:

    • Add the following <link> and <script> tags to the <head> section of your HTML file.

      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Table Exercise</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
  <!-- Your content here -->

  <!-- Bootstrap JS and dependencies -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>

Step 2: Creating a Basic Table

  • Create a basic table:

    • Add the following HTML inside the <body> tag.

      <div class="container mt-5">
  <h2>Basic Bootstrap Table</h2>
  <table class="table">
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
      <tr>
        <td>Data 3</td>
        <td>Data 4</td>
      </tr>
    </tbody>
  </table>
</div>

Step 3: Adding Table Styles

  • Enhance the table with Bootstrap classes:

    • Modify the table to include table-striped and table-bordered classes.

      <div class="container mt-5">
  <h2>Styled Bootstrap Table</h2>
  <table class="table table-striped table-bordered">
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
      <tr>
        <td>Data 3</td>
        <td>Data 4</td>
      </tr>
    </tbody>
  </table>
</div>

Step 4: Adding More Features

  • Add hover effect and responsive table:

    • Modify the table to include table-hover and table-responsive classes.

      <div class="container mt-5">
  <h2>Enhanced Bootstrap Table</h2>
  <div class="table-responsive">
    <table class="table table-striped table-bordered table-hover">
      <thead>
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
        </tr>
        <tr>
          <td>Data 3</td>
          <td>Data 4</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Step 5: Adding Contextual Classes

  • Add contextual classes to rows:

    • Modify the table to include table-primary, table-secondary, etc., for different row styles.

      <div class="container mt-5">
  <h2>Contextual Bootstrap Table</h2>
  <div class="table-responsive">
    <table class="table table-striped table-bordered table-hover">
      <thead>
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
        </tr>
      </thead>
      <tbody>
        <tr class="table-primary">
          <td>Primary Data 1</td>
          <td>Primary Data 2</td>
        </tr>
        <tr class="table-secondary">
          <td>Secondary Data 1</td>
          <td>Secondary Data 2</td>
        </tr>
        <tr class="table-success">
          <td>Success Data 1</td>
          <td>Success Data 2</td>
        </tr>
        <tr class="table-danger">
          <td>Danger Data 1</td>
          <td>Danger Data 2</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Look at the code snippet in the official Bootstrap web site and experiment them : https://getbootstrap.com/docs/5.3/examples/

PART II: Group Work

  • Once you have completed Part I, reform groups and add style to your project with CSS and bootstrap Final Project and Review, mainly Part I.
  • Each group member should contribute to different sections style or components of the website.

Réutilisation