08.exercises.md

Exercise 1: Basic Content Box with REM Units, Box-Sizing, and Root Font-Size

Task: Style a simple content box with a title and a paragraph, using REM units for sizing, experiment with the box-sizing property, and observe changes when modifying the root font size.

Requirements:

• Create a div element containing a h1 title and a p paragraph.
• Use rem units to set margin, padding, and border for the div.
• Apply box-sizing: content-box to the div, and observe the calculation of the total size (content width/height plus padding and border).
• Change box-sizing to border-box and note how padding and border are included within the width/height.
• Adjust the div's width, height, padding, and border sizes in rem units and see the changes.
• After experimenting with box-sizing, modify the font-size property of the HTML element (root element) in your CSS. Try different sizes, such as 16px, 20px, or 24px.
• Observe how the size of the box, including its padding and margin, changes in response to the root font-size adjustment. This illustrates how rem units are relative to the HTML element's font size.
• This exercise helps students understand the direct impact of changing the root element's font-size on elements styled with rem units, and the difference in element sizing with various box-sizing values.

Including this step will give students a more comprehensive understanding of how rem units work in relation to the root font size and how box-sizing can affect element dimensions. This knowledge is crucial for mastering responsive design principles.

Exercise 2: Horizontal List Menu

Task: Create a basic horizontal navigation menu using an unordered list, styled with inline-block display.

Requirements:

• An unordered list <ul> with several list items <li>.
• Apply display: inline-block to the list items to align them horizontally.
• Style the list items with padding and margin, using px or em units.

Exercise 3: Simple Image Gallery with Percentage Width

Task: Display a row of images with captions, setting image widths relative to the parent container's width.

Requirements:

• Multiple div elements, each containing an img element and a p caption.
• Use percentage (%) units to set the width of each image, demonstrating responsive design.
• Align images horizontally using display: block and applying float: left to each div.

Exercise 4: Footer with Relative Positioning

Task: Create a simple page layout with a header, content area, and a footer using relative positioning.

Requirements:

• Separate header, main (for content), and footer elements.
• Use position: relative for the footer, and demonstrate how it interacts with other elements.
• Experiment with margin-top in percentage (%) to control the footer's position relative to the content.

Exercise 5: Colored Boxes with Hover Effect and Viewport Units

Task: Create several boxes with different background colors, changing color on hover, using viewport units for sizing.

Requirements:

• Multiple div elements, each styled with a different background color.
• Use the :hover pseudo-class to change the background color when the mouse hovers over a box.
• Apply viewport units (vw for width, vh for height) to adapt the box sizes to different screen sizes.

Certainly! Let's create exercises specifically focusing on sticky and fixed positioning in CSS. These exercises will help understand how these positioning properties can be applied in different scenarios.

Exercise 6: Sticky Navigation Bar

Task: Create a navigation bar that becomes sticky at the top of the page when you scroll down.

Requirements:

• A header section with some introductory content.
• A nav bar with a few menu items, initially positioned normally in the flow of the document.
• Apply position: sticky to the nav bar and set top: 0, so it sticks to the top of the viewport when scrolled past its initial position.
• Add enough content below the nav bar to allow for scrolling.

Exercise 7: Fixed Sidebar

Task: Design a page layout with a sidebar that stays fixed on the side of the screen as the user scrolls.

Requirements:

• A div element representing the main content area and a div for the sidebar.
• Use position: fixed on the sidebar and set it to align to the left or right of the viewport.
• The main content div should be scrollable, with enough content to demonstrate the fixed position of the sidebar.
• Style the sidebar with a different background color to distinguish it from the main content.

Exercise 8: Sticky Footer with Offset

Task: Create a footer that sticks to the bottom of the viewport but lifts up when scrolling to the bottom of the page.

Requirements:

• A main content area with sufficient content to enable vertical scrolling.
• A footer element styled with position: sticky and placed at the bottom (bottom: 0).
• Ensure there's an offset (like margin-top) for the footer, so it appears above the end of the main content when scrolled to the bottom.
• The footer should "stick" to the bottom of the viewport on scroll but should not overlap the main content when reaching the bottom of the page.

These exercises provide hands-on experience with sticky and fixed positioning, illustrating how they function differently and can be utilized in web layouts.