Share
Explore

10 use cases of building CSS and Flexbox into a web page.

Patterns of Usage for CSS and Flex Boxes.

Meet Divvy: Your guide to the BOM

Here are 10 use cases of building CSS and Flexbox into a web page, showcasing the practical application of CSS selectors, rules, and decorators:

Responsive Navigation Menu: Utilize Flexbox to create a responsive navigation menu that adapts to different screen sizes. Apply CSS selectors to style menu items, and use pseudo-classes for interactive effects like hover.
Media Gallery Layout: Implement a media gallery with flexible alignment of images or videos using Flexbox. Use CSS selectors to apply consistent styles and responsive features to the media items.
Dynamic Product Cards: Create product cards for an e-commerce site. Use Flexbox for layout and CSS selectors for styling elements like product images, descriptions, and price tags.
Interactive Dropdown Menus: Design dropdown menus that become visible on hover or click. Apply CSS pseudo-classes for dynamic interactions and Flexbox for positioning the dropdown content.
Multi-Column Content Layout: Build a multi-column layout for articles or blog posts. Use CSS to style headings, paragraphs, and other content elements, with Flexbox ensuring a flexible and adaptive layout.
User Profile Cards: Create user profile cards displaying user information and social links. Use CSS for styling and Flexbox for arranging content elements like profile pictures, names, and social media icons.
Testimonials Section: Design a testimonials section with customer quotes and ratings. Utilize CSS for text styles and Flexbox for aligning testimonial elements, such as customer photos and quotes.
Pricing Table: <Introduces JavaScript into the BOM> Implement a pricing table for services or products. Use CSS to highlight different pricing plans and Flexbox to ensure a responsive layout across devices.
Footer Layout with Social Links: Create a website footer with contact information, quick links, and social media icons. Apply CSS for styling and Flexbox for organizing the footer content in a clean, responsive manner.
These use cases demonstrate how CSS and Flexbox can be effectively used to create various components of a web page, offering both aesthetic appeal and functional layout.

Here is a more in-depth example of what you can do in the Web Browser with JavaScript:


Lab 0: Warm up and getting Started:

Lab Instruction Workflow: Responsive Web Page Layout with Flexbox

Objective: Learn to create a flexible and responsive web page layout using HTML and CSS Flexbox.

Part 1: Setup

Task 1: Create a new HTML file named flexbox-layout.html.
Task 2: Create a new CSS file named flexbox-style.css.

Part 2: HTML Structure

flexbox-layout.html:
htmlCopy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Layout</title>
<link rel="stylesheet" href="flexbox-style.css">
</head>
<body>
<header class="main-header">Header</header>
<nav class="main-nav">Navigation</nav>
<section class="main-content">Content</section>
<aside class="sidebar">Sidebar</aside>
<footer class="main-footer">Footer</footer>
</body>
</html>

Task 3: Link your CSS file within the HTML head section.
Task 4: Create the basic structure of a web page with header, navigation, content, sidebar, and footer.

Part 3: CSS Styling with Flexbox

flexbox-style.css:
cssCopy code
body {
margin: 0;
font-family: Arial, sans-serif;
}

.main-header, .main-nav, .main-footer {
text-align: center;
padding: 1rem;
background-color: #333;
color: white;
}

.main-content, .sidebar {
padding: 1rem;
}

/* Flexbox container */
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}

.main-content {
flex: 1;
}

/* Responsive design */
@media (min-width: 768px) {
body {
flex-direction: row;
}

.main-nav, .main-content, .sidebar {
flex: 1;
}

.sidebar {
order: -1; /* Move sidebar to the left side */
}
}

Task 5: Add CSS to style each section of the page. Use Flexbox to create a column layout for mobile and switch to a row layout for wider screens.

Part 4: Testing and Validation

Task 6: Open flexbox-layout.html in a web browser and resize the window to see how the layout adapts from a column to a row structure.
Task 7: Check the layout on various devices using browser developer tools to simulate different screen sizes.

Part 5: Lab Exercises

Exercise 1: Modify the Flexbox properties to change the order of the elements in the layout.
Exercise 2: Add more content to the .main-content and .sidebar sections and apply additional Flexbox properties to align items.
Exercise 3: Experiment with different flex values to see how they affect the flex items' size and distribution.

Conclusion

After completing this lab, students should have a solid understanding of how to use Flexbox for creating responsive layouts. They should be comfortable with the basic Flexbox properties and how they affect the layout of the web page content. The exercises encourage experimentation with Flexbox to reinforce the concepts covered in the lab.

Responsive Menu Navigation

Lab workbook for a "Mission Control Webpage for Space Command's Mission to Mars" using HTML, CSS, and Flexbox involves multiple steps.

### Lab Workbook: Building a Mission Control Webpage

**Objective**: To implement a responsive navigation menu for Space Command's mission to Mars using Flexbox, CSS selectors, and pseudo-classes.

Part 1: HTML Structure

**File**: `index.html`
```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Space Command: Mission to Mars</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <nav id="navbar"> <ul class="nav-links"> <li><a href="#mission">Mission</a></li> <li><a href="#crew">Crew</a></li> <li><a href="#gallery">Gallery</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </header> <!-- Content sections will be added here --> </body> </html> ```

Part 2: CSS Styling

**File**: `styles.css`
```css body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; }
header { background-color: #333; color: #fff; padding: 10px 0; }
#navbar { display: flex; justify-content: center; }
.nav-links { list-style: none; padding: 0; }
.nav-links li { display: inline; margin: 0 15px; }
.nav-links a { text-decoration: none; color: white; transition: color 0.3s ease; }
.nav-links a:hover { color: #f76c6c; } ```
Part 3: Implementing Responsive Design
Add media queries to ensure the navigation menu is responsive and adapts to different screen sizes.
```css @media (max-width: 600px) { .nav-links li { display: block; text-align: center; margin: 10px 0; } } ```
#### Part 4: Adding Interactive Effects
Using pseudo-classes to enhance interactivity, such as changing colors on hover.
```css .nav-links a:hover, .nav-links a:focus { color: #4caf50; border-bottom: 2px solid #4caf50; } ```

Part 5: Extending the Webpage

Continuing from Part 4, let's extend the webpage with additional content sections relevant to the Space Command's Mission to Mars.

Adding Content Sections

In `index.html`, below the `<header>` section, add the following HTML to create content sections:
```html <main> <section id="mission"> <h2>Mission Overview</h2> <p>Details about the mission to Mars...</p> </section> <section id="crew"> <h2>Meet the Crew</h2> <p>Information about the astronauts...</p> </section> <section id="gallery"> <h2>Mission Gallery</h2> <p>Photos and videos from the mission...</p> </section> <section id="contact"> <h2>Contact Us</h2> <p>Contact information for Space Command...</p> </section> </main> ```
**Styling Content Sections**
In `styles.css`, add CSS to style the content sections:
```css main { padding: 20px; background-color: #fff; }
section { margin-bottom: 40px; }
section h2 { color: #333; font-size: 24px; margin-bottom: 10px; }
section p { color: #666; line-height: 1.6; } ```

Part 6: Flexbox for Layout

Use Flexbox to create layouts for sections like the crew or gallery.
```css #crew, #gallery { display: flex; flex-wrap: wrap; justify-content: space-around; }
#crew .member, #gallery .photo { flex-basis: 45%; margin: 10px; text-align: center; } ```

Part 7: Adding Interactivity with JavaScript

**File**: `script.js` (Link this file in your HTML before the `</body>` tag.)
```javascript document.addEventListener('DOMContentLoaded', function() { // JavaScript code for interactive elements can be added here. }); ```

Part 8: Conclusion and Exercises

**Exercise 1**: Enhance the navigation menu by adding a dropdown for sub-sections under 'Mission'.
**Exercise 2**: Use JavaScript to dynamically update the 'Mission Gallery' section based on user interaction.
**Exercise 3**: Implement a responsive design for the 'Meet the Crew' section, ensuring it looks good on mobile devices.
This lab workbook provides a practical approach to building a mission control webpage using HTML, CSS, and Flexbox. It covers key concepts like responsive design, Flexbox layouts, CSS selectors, and pseudo-classes.
Students are encouraged to extend the project with the exercises, deepening their understanding of web development in a real-world context.


Media Gallery Layout: Implement a media gallery with flexible alignment of images or videos using Flexbox. Use CSS selectors to apply consistent styles and responsive features to the media items.

TO DO: Create a detailed lab workbook for a "Gallery Webpage for Great European Art History from the 1500 to the 18th Century" using HTML, CSS, and Flexbox.


Lab Workbook: European Art History Gallery Webpage

**Objective**: To create a media gallery webpage showcasing European art from the 1500 Renaissance to the 18th Century using Flexbox and CSS for styling and layout.

Part 1: HTML Structure

**File**: `gallery.html`

```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>European Art History Gallery</title> <link rel="stylesheet" href="gallery.css"> </head> <body> <header> <h1>Great European Art: 1500 - 18th Century</h1> </header> <main id="art-gallery"> <!-- Sample Artwork Section --> <section class="art-period" id="renaissance"> <h2>Renaissance Art</h2> <div class="artworks"> <!-- Artwork items will be added here --> <!-- Example: --> <!-- <article class="artwork"> <img src="path-to-renaissance-art.jpg" alt="Renaissance Artwork"> <h3>Artwork Title</h3> <p>Artist Name</p> <p>Year</p> </article> --> </div> </section> <!-- Additional art periods like Baroque, Rococo, etc., will follow --> </main> <footer> <p>Gallery of European Art History</p> </footer> </body> </html> ```

Part 2: CSS Styling

**File**: `gallery.css`
```css body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 0; background-color: #f8f8f8; }
header { background-color: #333; color: #fff; text-align: center; padding: 10px 0; }
header h1 { margin: 0; }
#art-gallery { padding: 20px; display: flex; flex-direction: column; align-items: center; }
.art-period { margin-bottom: 30px; }
.art-period h2 { font-size: 24px; color: #444; }
.artworks { display: flex; flex-wrap: wrap; justify-content: center; }
.artwork { border: 1px solid #ddd; margin: 10px; padding: 10px; width: calc(33% - 20px); text-align: center; }
.artwork img { width: 100%; height: auto; border-bottom: 1px solid #ddd; margin-bottom: 10px; }
footer { background-color: #333; color: #fff; text-align: center; padding: 10px 0; position: relative; bottom: 0; width: 100%; } ```

Part 3: Responsive Design

Implement media queries for responsive design.
```css @media (max-width: 800px) { .artwork { width: calc(50% - 20px); } }
@media (max-width: 500px) { .artwork { width: 100%; } }

Dynamic Product Cards: Create product cards for an e-commerce site. Use Flexbox for layout and CSS selectors for styling elements like product images, descriptions, and price tags.

Objective: To develop dynamic product cards for an e-commerce website using HTML and CSS, with Flexbox for layout.

Part 1: HTML Structure

**File**: `products.html`
```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>E-commerce Product Cards</title> <link rel="stylesheet" href="products.css"> </head> <body> <main id="product-container"> <article class="product-card"> <img src="path-to-product-image.jpg" alt="Product Name" class="product-image"> <div class="product-info"> <h3 class="product-name">Product Name</h3> <p class="product-description">A brief description of the product.</p> <span class="product-price">$Price</span> </div> </article> <!-- Additional product cards --> </main> </body> </html> ```

Part 2: CSS Styling

**File**: `products.css`
```css body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; }
#product-container { display: flex; flex-wrap: wrap; justify-content: space-around; padding: 20px; }
.product-card { background-color: #fff; border: 1px solid #ddd; margin: 10px; width: calc(33% - 20px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: box-shadow 0.3s ease; }
.product-card:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
.product-image { width: 100%; height: auto; }
.product-info { padding: 15px; }
.product-name { margin: 0 0 10px 0; color: #333; }
.product-description { margin: 0 0 15px 0; color: #666; }
.product-price { font-weight: bold; color: #f76c6c; } ```
#### Part 3: Responsive Design
Implement media queries for responsive design.
```css @media (max-width: 800px) { .product-card { width: calc(50% - 20px); } }
@media (max-width: 500px) { .product-card { width: 100%; } } ```

Part 4: Conclusion and Exercises

Exercise: Enhance the product cards with CSS animations when hovered.
To enhance the product cards with CSS animations when hovered, we will add some interactive styling to the product cards.
This will involve modifying the existing CSS file (`products.css`) to include hover effects and CSS animations.
Step 1: Modify CSS for Hover Effects
In the `products.css` file, we will add hover effects to the `.product-card` class. We will make the product card slightly larger and change the box shadow for a more pronounced effect.
**File**: `products.css`
```css /* Existing styles ... */
.product-card { /* ... existing styles ... */ transition: transform 0.3s ease, box-shadow 0.3s ease; }
.product-card:hover { transform: scale(1.05); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25); }
/* ... Rest of the existing styles ... */ ```
### Step 2: Add Animation to Image and Text
We can add more animations to the image and text within the card to enhance the hover effect. For instance, we can make the image slightly zoom in and change the text color.
**Continue in `products.css`**:
```css .product-image { /* ... existing styles ... */ transition: transform 0.3s ease; }
.product-card:hover .product-image { transform: scale(1.1); }
.product-name, .product-price { transition: color 0.3s ease; }
.product-card:hover .product-name, .product-card:hover .product-price { color: #007bff; /* or any other color */ } ```

Step 3: Testing and Validation

After implementing these changes, test the webpage by hovering over the product cards. You should see the card slightly enlarging, the image zooming in, and the text color changing. Ensure that the transitions are smooth and visually appealing.
Conclusion
With these CSS enhancements, the product cards on the e-commerce site will have an interactive and engaging feel, improving the user experience. This exercise demonstrates how CSS animations and transitions can be used effectively to create dynamic and responsive web content.



Interactive Dropdown Menus: Design dropdown menus that become visible on hover or click.

Designing interactive dropdown menus involves creating HTML structures for the menus and submenus and then using CSS for styling and positioning.

We'll utilize Flexbox for layout and CSS pseudo-classes for dynamic interactions like hover effects.

Step 1: HTML Structure for Dropdown Menus

Create the basic structure of the dropdown menu within the HTML document.

**File**: `menu.html`

```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Interactive Dropdown Menus</title> <link rel="stylesheet" href="menu.css"> </head> <body> <nav class="navbar"> <ul class="menu"> <li class="menu-item"> <a href="#">Home</a> </li> <li class="menu-item dropdown"> <a href="#">Services</a> <ul class="dropdown-content"> <li><a href="#">Web Design</a></li> <li><a href="#">Web Development</a></li> <li><a href="#">Graphic Design</a></li> </ul> </li> <li class="menu-item"> <a href="#">About</a> </li> <li class="menu-item"> <a href="#">Contact</a> </li> </ul> </nav> </body> </html> ```
### Step 2: CSS Styling and Flexbox Positioning
Style the navbar and dropdown menu, and use Flexbox for positioning.
**File**: `menu.css`
```css .navbar { background-color: #333; overflow: hidden; }
.menu { list-style-type: none; margin: 0; padding: 0; display: flex; }
.menu-item { float: left; }
.menu-item a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; transition: background-color 0.3s; }
.menu-item a:hover { background-color: #555; }
.dropdown { position: relative; }
.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }
.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }
.dropdown-content a:hover { background-color: #f1f1f1; }
.dropdown:hover .dropdown-content { display: block; } ```

Step 3: Workflow Implementation Instructions

1. **Integration**: Integrate the provided HTML and CSS into your project. Ensure that the `menu.html` and `menu.css` are properly linked.
2. **Testing**: Test the dropdown menu by hovering over the "Services" menu item. The submenu should appear with options like "Web Design", "Web Development", and "Graphic Design".
3. **Customization**: Customize the menu items and links as per your website’s requirements. You can add more dropdown items or change the styling in the CSS file.
4. **Accessibility Considerations**: For better accessibility, consider adding JavaScript to handle the dropdown functionality on click and focus events, especially for keyboard navigation.
5. **Responsive Design**: Ensure that the dropdown menu is responsive. You may need to adjust the CSS for different screen sizes or implement a mobile-friendly navigation design.
6. **Cross-Browser Testing**: Test the dropdown menu across different browsers to ensure compatibility and consistent behavior.
By following these steps, you should have a fully functional interactive dropdown menu on your website, enhancing the navigation experience for your users.



Multi-Column Content Layout: Build a multi-column layout for articles or blog posts. Use CSS to style headings, paragraphs, and other content elements, with Flexbox ensuring a flexible and adaptive layout.

Creating a multi-column layout for articles or blog posts using CSS and Flexbox involves structuring your HTML content and applying styles for a responsive and adaptive layout. Here's a step-by-step guide to implement this feature.

Step 1: HTML Structure for Multi-Column Layout

Create the basic HTML structure for your articles or blog posts.

**File**: `articles.html`
```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Multi-Column Blog Layout</title> <link rel="stylesheet" href="articles.css"> </head> <body> <div class="container"> <article class="blog-post"> <h2>Blog Post Title</h2> <p>This is the content of the blog post...</p> <!-- Add more content elements like images, lists, etc. --> </article> <article class="blog-post"> <h2>Another Blog Post Title</h2> <p>This is another blog post content...</p> <!-- Additional content elements --> </article> <!-- More blog posts --> </div> </body> </html> ```

Step 2: CSS Styling and Flexbox Layout

Style the blog posts and use Flexbox for a multi-column layout.
**File**: `articles.css`
```css .container { display: flex; flex-wrap: wrap; gap: 20px; padding: 20px; }
.blog-post { flex-basis: calc(50% - 20px); /* Adjust the width as needed */ border: 1px solid #ddd; padding: 15px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
.blog-post h2 { margin-top: 0; color: #333; }
.blog-post p { line-height: 1.6; color: #666; }
/* Responsive design for smaller screens */ @media (max-width: 600px) { .blog-post { flex-basis: 100%; } } ```

Step 3: Workflow Implementation Instructions

1. **Integration**: Integrate the provided HTML (`articles.html`) and CSS (`articles.css`) into your project. Ensure that they are properly linked.
2. **Content Addition**: Populate your `.blog-post` elements with actual blog post content, including titles, paragraphs, images, and other HTML elements as needed.
3. **Styling Customization**: Customize the styles in `articles.css` to match your website's design. You can change colors, fonts, spacing, and other CSS properties.
4. **Responsive Testing**: Test the layout on various devices and screen sizes to ensure it is responsive. The blog posts should adapt to the screen size, shifting from a multi-column to a single-column layout on smaller screens.
5. **Browser Compatibility**: Check the layout across different browsers to ensure consistent behavior and appearance.
6. **Accessibility Checks**: Make sure your content is accessible, including proper heading structure and readable fonts and colors.
7. **Performance Optimization**: Optimize images and other media for fast loading times, especially important for layouts with multiple content elements.
8. **SEO Considerations**: Ensure that your HTML structure and content are SEO-friendly, with appropriate use of headings, alt text for images, and semantic HTML.
Following these steps, you'll have a responsive and flexible multi-column layout for your articles or blog posts, enhancing the readability and aesthetic appeal of your content.


User Profile Cards: Create user profile cards displaying user information and social links. Use CSS for styling and Flexbox for arranging content elements like profile pictures, names, and social media icons.

Detailed lab instruction workflow for a lab session focusing on HTML, CSS, and Flexbox. This lab will guide students through the process of creating a responsive web page layout using CSS Flexbox.

Lab Instruction Workflow: Creating User Profile Cards with Flexbox

Objective: Learn to create responsive user profile cards using HTML and CSS with Flexbox for layout and styling.

Part 1: Environment Setup

Task 1: Create a new HTML file named user-profiles.html.
Task 2: Create a new CSS file named profile-styles.css.

Part 2: HTML Structure for User Profile Cards

user-profiles.html:
htmlCopy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Profile Cards</title>
<link rel="stylesheet" href="profile-styles.css">
</head>
<body>
<section class="profile-card" id="user1">
<img src="user1.jpg" alt="User Name" class="profile-image">
<div class="profile-info">
<h2 class="user-name">User Name</h2>
<p class="user-bio">User's short bio goes here...</p>
<div class="social-links">
<!-- Social media icons with links -->
<a href="https://twitter.com/user" class="social-icon">Twitter</a>
<a href="https://linkedin.com/in/user" class="social-icon">LinkedIn</a>
<a href="https://github.com/user" class="social-icon">GitHub</a>
</div>
</div>
</section>
<!-- Repeat for additional user profiles -->
</body>
</html>

Task 3: Link the CSS file within the HTML head section.
Task 4: Create a user profile card with placeholders for an image, user name, bio, and social media links.

Part 3: CSS Styling with Flexbox

profile-styles.css:
cssCopy code
body {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
padding: 20px;
background-color: #f4f4f4;
}

.profile-card {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 10px;
overflow: hidden;
width: 300px;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.profile-image {
width: 100%;
height: auto;
border-bottom: 1px solid #ddd;
}

.profile-info {
padding: 15px;
text-align: center;
}

.user-name {
margin-top: 10px;
font-size: 1.5rem;
}

.user-bio {
font-size: 0.9rem;
color: #666;
}

.social-links {
display: flex;
justify-content: center;
gap: 10px;
padding-top: 10px;
}

.social-icon {
text-decoration: none;
color: #333;
/* Add more styles for icons */
}

Task 5: Add CSS to style the user profile card. Use Flexbox to arrange the layout of the card and its elements.

Part 4: Testing and Validation

Task 6: Test the user profile cards by adding multiple sections within the body to ensure the Flexbox layout is responsive and the cards wrap correctly on smaller screens.
Task 7: Validate the design on various devices and screen sizes using the browser's developer tools.

Part 5: Lab Exercises

Exercise 1: Enhance the social media links with icons using a web font like Font Awesome or images.
Exercise 2: Add a hover effect to the social media icons.
Exercise 3: Create a modal pop-up that appears when clicking on a user profile card, showing more detailed information about
the user.

Part 6: Lab Exercises

Exercise 1: Enhance the social media links with icons using a web font like Font Awesome or images.
Instructions:
Include the Font Awesome library in your HTML file by adding the link to their CDN in the <head> section.
Replace the text inside .social-icon with the appropriate Font Awesome classes for each social media platform.
Exercise 2: Add a hover effect to the social media icons.
Instructions:
In profile-styles.css, add a :hover pseudo-class to the .social-icon selector.
Define a CSS transformation that slightly increases the size of the icons and changes their color when hovered over.
Exercise 3: Create a modal pop-up that appears when clicking on a user profile card, showing more detailed information about the user.
Instructions:
Define a hidden modal structure in your HTML with a class of .modal.
In profile-styles.css, set the initial display of .modal to none and define styles for its visible state.
Write JavaScript to handle the click event on the profile card, toggling the visibility of the modal.

Part 7: Conclusion

Task 8: Review the key concepts learned in this lab:
Flexbox for responsive layouts.
CSS styling for user interfaces.
HTML structure for profile information.
Task 9: Encourage students to experiment with different layouts, styles, and interactions to create unique user profile cards.
By completing this lab, students should have a practical understanding of using HTML, CSS, and Flexbox to create attractive and functional user interface components. They will have hands-on experience with modern web development techniques that are key to front-end development.


Lab Instruction Workflow: Creating a Testimonials Section with Flexbox

Objective: This lab will teach you how to create a testimonials section for a website using HTML and CSS, with Flexbox for layout and alignment.
Part 1: Environment Setup
Task 1: Create a new HTML file named `testimonials.html`Task 2: Create a new CSS file named `testimonials.css`
#### Part 2: HTML Structure for Testimonials
**testimonials.html**:
```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Testimonials Section</title> <link rel="stylesheet" href="testimonials.css"> </head> <body> <section class="testimonials"> <div class="testimonial"> <img src="customer-1.jpg" alt="Customer Name" class="customer-photo"> <blockquote class="quote"> “This is a fantastic product that has helped me in my daily routine!” </blockquote> <p class="customer-name">- Jane Doe</p> <div class="rating"> <!-- Insert star icons for rating --> ⭐⭐⭐⭐⭐ </div> </div> <!-- Repeat for additional testimonials --> </section> </body> </html> ```
**Task 3**: Link the CSS file within the HTML head section. **Task 4**: Create a testimonials section with individual testimonial blocks containing an image, quote, customer name, and rating.
#### Part 3: CSS Styling with Flexbox
**testimonials.css**:
```css body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 20px; }
.testimonials { display: flex; flex-direction: column; align-items: center; }
.testimonial { background-color: #fff; border: 1px solid #ddd; padding: 20px; margin-bottom: 20px; width: 80%; max-width: 700px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.customer-photo { width: 100px; height: 100px; border-radius: 50%; margin-bottom: 20px; }
.quote { font-style: italic; color: #666; }
.customer-name { color: #333; font-weight: bold; }
.rating { /* Add styles for the rating stars */ } ```
**Task 5**: Add CSS to style the testimonials section and each testimonial block.
#### Part 4: Testing and Validation
**Task 6**: Test the testimonials section by adding multiple `.testimonial` blocks and ensure the layout is responsive.
**Task 7**: Validate the design on various devices and screen sizes using browser developer tools.
Part 5: Lab Exercises
**Exercise 1**: Add hover effects to the `.testimonial` blocks to make them stand out when the user hovers over them. **Exercise 2**: Integrate a font icon library like Font Awesome and replace the text star ratings with star icons. **Exercise 3**: Implement a slider functionality using JavaScript to allow users to navigate through different testimonials.

Conclusion
After completing this lab, students will have a functional and styled testimonials section on their web page. They will understand how to use Flexbox for layout and alignment and how to style text
and other elements using CSS. The exercises encourage them to apply interactive features and enhance their understanding of user interface design.
**Task 8**: Encourage students to explore different design variations by changing fonts, colors, and the Flexbox arrangement.
**Task 9**: Discuss the importance of testimonials in web design for building credibility and trust with potential customers.
By the end of this lab session, students should feel comfortable creating a testimonials section from scratch, utilizing HTML for structure, CSS for styling, and Flexbox for layout.
You should also be able to add interactive and dynamic elements to enhance user engagement.


Lab Instruction Workflow: Creating a Responsive Pricing Table with HTML, CSS, Flexbox, and JavaScript

Note: By now you are very comfortable with HTML and CSS. Now let’s start to layer in JavaScript.
Lab Objective: Develop a responsive pricing table with the ability to add new entries using a form. Utilize HTML and CSS for structure and styling, Flexbox for layout, and JavaScript to dynamically create and insert DOM elements.

Part 1: Environment Setup

Task 1: Create a new HTML file named `pricing-table.html`. Task 2: Create a new CSS file named `pricing-styles.css`. Task 3: Create a new JavaScript file named `pricing-actions.js`.

Part 2: HTML Structure for Pricing Table and Entry Form

pricing-table.html:
```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pricing Table</title> <link rel="stylesheet" href="pricing-styles.css"> </head> <body> <section class="pricing-form"> <input type="text" id="productName" placeholder="Product Name"> <input type="number" id="quantityInStock" placeholder="Quantity in Stock"> <input type="text" id="pricePerItem" placeholder="Price Per Item"> <button onclick="addProduct()">Submit</button> </section> <section id="pricing-table" class="pricing-table"> <!-- Pricing entries will be inserted here --> </section>
<script src="pricing-actions.js"></script> </body> </html> ```
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.