From 7d3b180a194623a2ada85e5a05bc389ab4691e32 Mon Sep 17 00:00:00 2001 From: Chetan Khulage Date: Sat, 11 Oct 2025 23:21:34 +0530 Subject: [PATCH 1/2] Add CSS positioning foundation exercises - Add 01-absolute-positioning: Exercise for learning absolute positioning basics - Add 02-layering: Exercise for understanding z-index and element layering - Add 03-fixed-header: Exercise for creating fixed headers with proper spacing Each exercise includes: - HTML and CSS starter files - Complete solutions with explanations - README with instructions and hints - Placeholder for desired outcome images --- .../01-absolute-positioning/README.md | 24 +++++++ .../desired-outcome.txt | 8 +++ .../01-absolute-positioning/index.html | 18 +++++ .../solution/solution.css | 66 +++++++++++++++++++ .../solution/solution.html | 18 +++++ .../01-absolute-positioning/style.css | 52 +++++++++++++++ foundations/positioning/02-layering/README.md | 27 ++++++++ .../02-layering/desired-outcome.txt | 10 +++ .../positioning/02-layering/index.html | 18 +++++ .../02-layering/solution/solution.css | 61 +++++++++++++++++ .../02-layering/solution/solution.html | 18 +++++ foundations/positioning/02-layering/style.css | 51 ++++++++++++++ .../positioning/03-fixed-header/README.md | 25 +++++++ .../03-fixed-header/desired-outcome.txt | 7 ++ .../positioning/03-fixed-header/index.html | 49 ++++++++++++++ .../03-fixed-header/solution/solution.css | 63 ++++++++++++++++++ .../03-fixed-header/solution/solution.html | 49 ++++++++++++++ .../positioning/03-fixed-header/style.css | 58 ++++++++++++++++ 18 files changed, 622 insertions(+) create mode 100644 foundations/positioning/01-absolute-positioning/README.md create mode 100644 foundations/positioning/01-absolute-positioning/desired-outcome.txt create mode 100644 foundations/positioning/01-absolute-positioning/index.html create mode 100644 foundations/positioning/01-absolute-positioning/solution/solution.css create mode 100644 foundations/positioning/01-absolute-positioning/solution/solution.html create mode 100644 foundations/positioning/01-absolute-positioning/style.css create mode 100644 foundations/positioning/02-layering/README.md create mode 100644 foundations/positioning/02-layering/desired-outcome.txt create mode 100644 foundations/positioning/02-layering/index.html create mode 100644 foundations/positioning/02-layering/solution/solution.css create mode 100644 foundations/positioning/02-layering/solution/solution.html create mode 100644 foundations/positioning/02-layering/style.css create mode 100644 foundations/positioning/03-fixed-header/README.md create mode 100644 foundations/positioning/03-fixed-header/desired-outcome.txt create mode 100644 foundations/positioning/03-fixed-header/index.html create mode 100644 foundations/positioning/03-fixed-header/solution/solution.css create mode 100644 foundations/positioning/03-fixed-header/solution/solution.html create mode 100644 foundations/positioning/03-fixed-header/style.css diff --git a/foundations/positioning/01-absolute-positioning/README.md b/foundations/positioning/01-absolute-positioning/README.md new file mode 100644 index 000000000000..4139b1a87554 --- /dev/null +++ b/foundations/positioning/01-absolute-positioning/README.md @@ -0,0 +1,24 @@ +# Absolute Positioning + +This exercise will help you understand how to use CSS absolute positioning to place elements exactly where you want them within a container. + +You need to position four elements using absolute positioning: +- Red box: top-left corner of the container +- Blue box: top-right corner of the container +- Green box: bottom-left corner of the container +- Overlay: centered in the container, overlapping other elements + +## Desired Outcome +![outcome](./desired-outcome.png) + +### Self Check +- Are all boxes positioned correctly using absolute positioning? +- Is the container set as the positioning context (relative positioning)? +- Does the overlay appear on top of and centered in the container? +- Are the boxes positioned exactly at the corners as specified? + +### Hints +- Remember that absolutely positioned elements are positioned relative to their nearest positioned ancestor +- The container needs to be the positioning context +- Use `top`, `right`, `bottom`, and `left` properties to specify exact positions +- The overlay should be centered both horizontally and vertically diff --git a/foundations/positioning/01-absolute-positioning/desired-outcome.txt b/foundations/positioning/01-absolute-positioning/desired-outcome.txt new file mode 100644 index 000000000000..58e3488b1973 --- /dev/null +++ b/foundations/positioning/01-absolute-positioning/desired-outcome.txt @@ -0,0 +1,8 @@ +This would be an image showing the desired outcome: +- A grey container with a black border +- Red box positioned in the top-left corner +- Blue box positioned in the top-right corner +- Green box positioned in the bottom-left corner +- White overlay with dashed border centered in the container + +You can create this image by taking a screenshot of the solution.html file in a browser. diff --git a/foundations/positioning/01-absolute-positioning/index.html b/foundations/positioning/01-absolute-positioning/index.html new file mode 100644 index 000000000000..907b4966c6be --- /dev/null +++ b/foundations/positioning/01-absolute-positioning/index.html @@ -0,0 +1,18 @@ + + + + + + + Absolute Positioning + + + +
+
Red Box
+
Blue Box
+
Green Box
+
Overlay
+
+ + diff --git a/foundations/positioning/01-absolute-positioning/solution/solution.css b/foundations/positioning/01-absolute-positioning/solution/solution.css new file mode 100644 index 000000000000..3ac1654bab30 --- /dev/null +++ b/foundations/positioning/01-absolute-positioning/solution/solution.css @@ -0,0 +1,66 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 20px; +} + +.container { + background-color: #f0f0f0; + border: 2px solid #333; + width: 400px; + height: 300px; + margin: 0 auto; + /* SOLUTION: Set positioning context */ + position: relative; +} + +.box { + width: 80px; + height: 80px; + border: 2px solid #000; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + color: white; +} + +.red { + background-color: #ff6b6b; + /* SOLUTION: Position in top-left corner */ + position: absolute; + top: 0; + left: 0; +} + +.blue { + background-color: #4ecdc4; + /* SOLUTION: Position in top-right corner */ + position: absolute; + top: 0; + right: 0; +} + +.green { + background-color: #45b7d1; + /* SOLUTION: Position in bottom-left corner */ + position: absolute; + bottom: 0; + left: 0; +} + +.overlay { + background-color: rgba(255, 255, 255, 0.9); + border: 2px dashed #999; + width: 120px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + /* SOLUTION: Center in container using absolute positioning */ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} diff --git a/foundations/positioning/01-absolute-positioning/solution/solution.html b/foundations/positioning/01-absolute-positioning/solution/solution.html new file mode 100644 index 000000000000..7b19a47f5ae1 --- /dev/null +++ b/foundations/positioning/01-absolute-positioning/solution/solution.html @@ -0,0 +1,18 @@ + + + + + + + Absolute Positioning + + + +
+
Red Box
+
Blue Box
+
Green Box
+
Overlay
+
+ + diff --git a/foundations/positioning/01-absolute-positioning/style.css b/foundations/positioning/01-absolute-positioning/style.css new file mode 100644 index 000000000000..50b311c52d11 --- /dev/null +++ b/foundations/positioning/01-absolute-positioning/style.css @@ -0,0 +1,52 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 20px; +} + +.container { + background-color: #f0f0f0; + border: 2px solid #333; + width: 400px; + height: 300px; + margin: 0 auto; + /* Add position property here */ +} + +.box { + width: 80px; + height: 80px; + border: 2px solid #000; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + color: white; +} + +.red { + background-color: #ff6b6b; + /* Position this box in the top-left corner of the container */ +} + +.blue { + background-color: #4ecdc4; + /* Position this box in the top-right corner of the container */ +} + +.green { + background-color: #45b7d1; + /* Position this box in the bottom-left corner of the container */ +} + +.overlay { + background-color: rgba(255, 255, 255, 0.9); + border: 2px dashed #999; + width: 120px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + /* Position this element in the center of the container, overlapping other elements */ +} diff --git a/foundations/positioning/02-layering/README.md b/foundations/positioning/02-layering/README.md new file mode 100644 index 000000000000..6f40879db4ee --- /dev/null +++ b/foundations/positioning/02-layering/README.md @@ -0,0 +1,27 @@ +# Layering with Z-Index + +This exercise teaches you how to control the layering of absolutely positioned elements using the `z-index` property. + +You need to position four overlapping elements and control their stacking order: +- Background layer: positioned behind all others +- Middle layer: positioned above background but below foreground +- Foreground layer: positioned above middle but below top +- Top layer: positioned on top of all others + +The layers should overlap in a cascading pattern from top-left to bottom-right. + +## Desired Outcome +![outcome](./desired-outcome.png) + +### Self Check +- Are all elements absolutely positioned within the container? +- Do the elements overlap in the correct stacking order? +- Is the container set as the positioning context? +- Are the z-index values used correctly to control layering? + +### Hints +- Use `position: relative` on the container to establish positioning context +- Use `position: absolute` on all layer elements +- Use `z-index` to control which elements appear on top +- Higher z-index values appear above lower ones +- Elements positioned later in the HTML appear above earlier ones by default diff --git a/foundations/positioning/02-layering/desired-outcome.txt b/foundations/positioning/02-layering/desired-outcome.txt new file mode 100644 index 000000000000..0598b29d628c --- /dev/null +++ b/foundations/positioning/02-layering/desired-outcome.txt @@ -0,0 +1,10 @@ +This would be an image showing the desired outcome: +- A grey container with a black border +- Four colored squares overlapping in a diagonal cascade pattern +- Background layer (red) at top-left +- Middle layer (teal) overlapping background +- Foreground layer (blue) overlapping middle +- Top layer (green) overlapping foreground +- Each layer properly stacked using z-index + +You can create this image by taking a screenshot of the solution.html file in a browser. diff --git a/foundations/positioning/02-layering/index.html b/foundations/positioning/02-layering/index.html new file mode 100644 index 000000000000..d82b9168c23f --- /dev/null +++ b/foundations/positioning/02-layering/index.html @@ -0,0 +1,18 @@ + + + + + + + Layering with Z-Index + + + +
+
Background Layer
+
Middle Layer
+
Foreground Layer
+
Top Layer
+
+ + diff --git a/foundations/positioning/02-layering/solution/solution.css b/foundations/positioning/02-layering/solution/solution.css new file mode 100644 index 000000000000..e6b44abd2cc4 --- /dev/null +++ b/foundations/positioning/02-layering/solution/solution.css @@ -0,0 +1,61 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 20px; +} + +.container { + width: 300px; + height: 300px; + margin: 0 auto; + border: 2px solid #333; + background-color: #f9f9f9; + /* SOLUTION: Set positioning context */ + position: relative; +} + +.layer { + width: 120px; + height: 120px; + border: 2px solid #000; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + color: white; + text-align: center; + /* SOLUTION: All layers absolutely positioned */ + position: absolute; +} + +.background { + background-color: #ff6b6b; + /* SOLUTION: Background layer - lowest z-index */ + top: 20px; + left: 20px; + z-index: 1; +} + +.middle { + background-color: #4ecdc4; + /* SOLUTION: Middle layer */ + top: 60px; + left: 60px; + z-index: 2; +} + +.foreground { + background-color: #45b7d1; + /* SOLUTION: Foreground layer */ + top: 100px; + left: 100px; + z-index: 3; +} + +.top { + background-color: #96ceb4; + /* SOLUTION: Top layer - highest z-index */ + top: 140px; + left: 140px; + z-index: 4; +} diff --git a/foundations/positioning/02-layering/solution/solution.html b/foundations/positioning/02-layering/solution/solution.html new file mode 100644 index 000000000000..3d5f1714402d --- /dev/null +++ b/foundations/positioning/02-layering/solution/solution.html @@ -0,0 +1,18 @@ + + + + + + + Layering with Z-Index + + + +
+
Background Layer
+
Middle Layer
+
Foreground Layer
+
Top Layer
+
+ + diff --git a/foundations/positioning/02-layering/style.css b/foundations/positioning/02-layering/style.css new file mode 100644 index 000000000000..c06f057d00d0 --- /dev/null +++ b/foundations/positioning/02-layering/style.css @@ -0,0 +1,51 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 20px; +} + +.container { + width: 300px; + height: 300px; + margin: 0 auto; + border: 2px solid #333; + background-color: #f9f9f9; + /* Add position property here */ +} + +.layer { + width: 120px; + height: 120px; + border: 2px solid #000; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + color: white; + text-align: center; + /* All layers should be absolutely positioned */ +} + +.background { + background-color: #ff6b6b; + /* Position this layer behind all others */ + /* Position at: top: 20px, left: 20px */ +} + +.middle { + background-color: #4ecdc4; + /* Position this layer in the middle */ + /* Position at: top: 60px, left: 60px */ +} + +.foreground { + background-color: #45b7d1; + /* Position this layer above middle but below top */ + /* Position at: top: 100px, left: 100px */ +} + +.top { + background-color: #96ceb4; + /* Position this layer on top of all others */ + /* Position at: top: 140px, left: 140px */ +} diff --git a/foundations/positioning/03-fixed-header/README.md b/foundations/positioning/03-fixed-header/README.md new file mode 100644 index 000000000000..8af4926f155d --- /dev/null +++ b/foundations/positioning/03-fixed-header/README.md @@ -0,0 +1,25 @@ +# Fixed Header + +This exercise demonstrates how to create a header that stays fixed at the top of the viewport while the user scrolls through the page content. + +You need to: +- Make the header stick to the top of the viewport using fixed positioning +- Ensure the header appears above all other content +- Add appropriate padding to the content so it's not hidden behind the header +- Make sure the header stays in place when scrolling + +## Desired Outcome +![outcome](./desired-outcome.png) + +### Self Check +- Does the header stay fixed at the top when you scroll? +- Is the header positioned above all other content? +- Is the main content properly spaced so it's not hidden behind the header? +- Do the navigation links work correctly? + +### Hints +- Use `position: fixed` to make the header stick to the viewport +- Use `top: 0` to position it at the very top +- Use `z-index` to ensure it appears above other content +- Add `padding-top` to the main content equal to the header's height +- Consider the header's width - it should span the full viewport diff --git a/foundations/positioning/03-fixed-header/desired-outcome.txt b/foundations/positioning/03-fixed-header/desired-outcome.txt new file mode 100644 index 000000000000..b542f6c0ee29 --- /dev/null +++ b/foundations/positioning/03-fixed-header/desired-outcome.txt @@ -0,0 +1,7 @@ +This would be an image showing the desired outcome: +- A dark header fixed at the top of the viewport containing "Fixed Header" title and navigation links +- The header should remain visible when scrolling +- Main content sections below the header with proper spacing +- Content should not be hidden behind the fixed header + +You can create this image by taking a screenshot of the solution.html file in a browser and scrolling to show the fixed behavior. diff --git a/foundations/positioning/03-fixed-header/index.html b/foundations/positioning/03-fixed-header/index.html new file mode 100644 index 000000000000..23bd6f66a206 --- /dev/null +++ b/foundations/positioning/03-fixed-header/index.html @@ -0,0 +1,49 @@ + + + + + + + Fixed Header + + + +
+

Fixed Header

+ +
+ +
+
+

Section 1

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, quod. Adipisci eos nulla quae nobis, voluptatum officia consequuntur accusantium nam!

+

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

+

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, quod. Adipisci eos nulla quae nobis, voluptatum officia consequuntur accusantium nam!

+

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

+
+ +
+

Section 2

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, quod. Adipisci eos nulla quae nobis, voluptatum officia consequuntur accusantium nam!

+

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

+

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, quod. Adipisci eos nulla quae nobis, voluptatum officia consequuntur accusantium nam!

+

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

+
+ +
+

Section 3

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, quod. Adipisci eos nulla quae nobis, voluptatum officia consequuntur accusantium nam!

+

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

+

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, quod. Adipisci eos nulla quae nobis, voluptatum officia consequuntur accusantium nam!

+

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

+
+
+ + diff --git a/foundations/positioning/03-fixed-header/solution/solution.css b/foundations/positioning/03-fixed-header/solution/solution.css new file mode 100644 index 000000000000..74a26ef73ffc --- /dev/null +++ b/foundations/positioning/03-fixed-header/solution/solution.css @@ -0,0 +1,63 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + line-height: 1.6; +} + +.fixed-header { + background-color: #333; + color: white; + padding: 1rem 2rem; + display: flex; + justify-content: space-between; + align-items: center; + /* SOLUTION: Fixed positioning */ + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1000; +} + +.fixed-header h1 { + margin: 0; + font-size: 1.5rem; +} + +.fixed-header nav a { + color: white; + text-decoration: none; + margin-left: 2rem; + font-weight: bold; +} + +.fixed-header nav a:hover { + color: #4ecdc4; +} + +.content { + /* SOLUTION: Add top padding to account for fixed header height */ + padding: 2rem; + padding-top: 6rem; /* Adjust based on header height */ + max-width: 800px; + margin: 0 auto; +} + +.content section { + margin-bottom: 3rem; + padding: 2rem; + background-color: #f9f9f9; + border-radius: 8px; +} + +.content h2 { + color: #333; + border-bottom: 2px solid #4ecdc4; + padding-bottom: 0.5rem; +} + +.content p { + margin-bottom: 1rem; + color: #666; +} diff --git a/foundations/positioning/03-fixed-header/solution/solution.html b/foundations/positioning/03-fixed-header/solution/solution.html new file mode 100644 index 000000000000..1d2c37865685 --- /dev/null +++ b/foundations/positioning/03-fixed-header/solution/solution.html @@ -0,0 +1,49 @@ + + + + + + + Fixed Header + + + +
+

Fixed Header

+ +
+ +
+
+

Section 1

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, quod. Adipisci eos nulla quae nobis, voluptatum officia consequuntur accusantium nam!

+

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

+

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, quod. Adipisci eos nulla quae nobis, voluptatum officia consequuntur accusantium nam!

+

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

+
+ +
+

Section 2

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, quod. Adipisci eos nulla quae nobis, voluptatum officia consequuntur accusantium nam!

+

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

+

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, quod. Adipisci eos nulla quae nobis, voluptatum officia consequuntur accusantium nam!

+

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

+
+ +
+

Section 3

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, quod. Adipisci eos nulla quae nobis, voluptatum officia consequuntur accusantium nam!

+

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

+

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, quod. Adipisci eos nulla quae nobis, voluptatum officia consequuntur accusantium nam!

+

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

+
+
+ + diff --git a/foundations/positioning/03-fixed-header/style.css b/foundations/positioning/03-fixed-header/style.css new file mode 100644 index 000000000000..85d7363ac652 --- /dev/null +++ b/foundations/positioning/03-fixed-header/style.css @@ -0,0 +1,58 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + line-height: 1.6; +} + +.fixed-header { + background-color: #333; + color: white; + padding: 1rem 2rem; + display: flex; + justify-content: space-between; + align-items: center; + /* Make this header stick to the top of the viewport */ + /* Add appropriate positioning and z-index */ +} + +.fixed-header h1 { + margin: 0; + font-size: 1.5rem; +} + +.fixed-header nav a { + color: white; + text-decoration: none; + margin-left: 2rem; + font-weight: bold; +} + +.fixed-header nav a:hover { + color: #4ecdc4; +} + +.content { + /* Add top padding to prevent content from hiding behind the fixed header */ + padding: 2rem; + max-width: 800px; + margin: 0 auto; +} + +.content section { + margin-bottom: 3rem; + padding: 2rem; + background-color: #f9f9f9; + border-radius: 8px; +} + +.content h2 { + color: #333; + border-bottom: 2px solid #4ecdc4; + padding-bottom: 0.5rem; +} + +.content p { + margin-bottom: 1rem; + color: #666; +} From e4ab9575a83293a13781c01c67c48c7fb905cb78 Mon Sep 17 00:00:00 2001 From: Chetan Khulage Date: Sun, 12 Oct 2025 11:24:50 +0530 Subject: [PATCH 2/2] feat: added positioning in foundations --- .../01-absolute-positioning/README.md | 6 +- .../01-absolute-positioning/index.html | 8 +- .../solution/solution.html | 8 +- foundations/positioning/02-layering/README.md | 4 + .../positioning/02-layering/index.html | 8 +- .../02-layering/solution/solution.html | 8 +- .../positioning/03-fixed-header/README.md | 4 + .../03-fixed-header/desired-outcome.png | Bin 0 -> 37806 bytes .../03-fixed-header/desired-outcome.txt | 7 -- .../positioning/03-fixed-header/index.html | 89 ++++++++++++++---- .../03-fixed-header/solution/solution.html | 89 ++++++++++++++---- 11 files changed, 169 insertions(+), 62 deletions(-) create mode 100644 foundations/positioning/03-fixed-header/desired-outcome.png delete mode 100644 foundations/positioning/03-fixed-header/desired-outcome.txt diff --git a/foundations/positioning/01-absolute-positioning/README.md b/foundations/positioning/01-absolute-positioning/README.md index 4139b1a87554..b5a8c074ca0d 100644 --- a/foundations/positioning/01-absolute-positioning/README.md +++ b/foundations/positioning/01-absolute-positioning/README.md @@ -3,21 +3,25 @@ This exercise will help you understand how to use CSS absolute positioning to place elements exactly where you want them within a container. You need to position four elements using absolute positioning: + - Red box: top-left corner of the container -- Blue box: top-right corner of the container +- Blue box: top-right corner of the container - Green box: bottom-left corner of the container - Overlay: centered in the container, overlapping other elements ## Desired Outcome + ![outcome](./desired-outcome.png) ### Self Check + - Are all boxes positioned correctly using absolute positioning? - Is the container set as the positioning context (relative positioning)? - Does the overlay appear on top of and centered in the container? - Are the boxes positioned exactly at the corners as specified? ### Hints + - Remember that absolutely positioned elements are positioned relative to their nearest positioned ancestor - The container needs to be the positioning context - Use `top`, `right`, `bottom`, and `left` properties to specify exact positions diff --git a/foundations/positioning/01-absolute-positioning/index.html b/foundations/positioning/01-absolute-positioning/index.html index 907b4966c6be..6ab97047803a 100644 --- a/foundations/positioning/01-absolute-positioning/index.html +++ b/foundations/positioning/01-absolute-positioning/index.html @@ -1,11 +1,11 @@ - - - + + + Absolute Positioning - +
diff --git a/foundations/positioning/01-absolute-positioning/solution/solution.html b/foundations/positioning/01-absolute-positioning/solution/solution.html index 7b19a47f5ae1..21ef510122f0 100644 --- a/foundations/positioning/01-absolute-positioning/solution/solution.html +++ b/foundations/positioning/01-absolute-positioning/solution/solution.html @@ -1,11 +1,11 @@ - - - + + + Absolute Positioning - +
diff --git a/foundations/positioning/02-layering/README.md b/foundations/positioning/02-layering/README.md index 6f40879db4ee..0f912e8cd20a 100644 --- a/foundations/positioning/02-layering/README.md +++ b/foundations/positioning/02-layering/README.md @@ -3,6 +3,7 @@ This exercise teaches you how to control the layering of absolutely positioned elements using the `z-index` property. You need to position four overlapping elements and control their stacking order: + - Background layer: positioned behind all others - Middle layer: positioned above background but below foreground - Foreground layer: positioned above middle but below top @@ -11,15 +12,18 @@ You need to position four overlapping elements and control their stacking order: The layers should overlap in a cascading pattern from top-left to bottom-right. ## Desired Outcome + ![outcome](./desired-outcome.png) ### Self Check + - Are all elements absolutely positioned within the container? - Do the elements overlap in the correct stacking order? - Is the container set as the positioning context? - Are the z-index values used correctly to control layering? ### Hints + - Use `position: relative` on the container to establish positioning context - Use `position: absolute` on all layer elements - Use `z-index` to control which elements appear on top diff --git a/foundations/positioning/02-layering/index.html b/foundations/positioning/02-layering/index.html index d82b9168c23f..33afd890d3ea 100644 --- a/foundations/positioning/02-layering/index.html +++ b/foundations/positioning/02-layering/index.html @@ -1,11 +1,11 @@ - - - + + + Layering with Z-Index - +
diff --git a/foundations/positioning/02-layering/solution/solution.html b/foundations/positioning/02-layering/solution/solution.html index 3d5f1714402d..119cb4325cde 100644 --- a/foundations/positioning/02-layering/solution/solution.html +++ b/foundations/positioning/02-layering/solution/solution.html @@ -1,11 +1,11 @@ - - - + + + Layering with Z-Index - +
diff --git a/foundations/positioning/03-fixed-header/README.md b/foundations/positioning/03-fixed-header/README.md index 8af4926f155d..b1f502ae78e0 100644 --- a/foundations/positioning/03-fixed-header/README.md +++ b/foundations/positioning/03-fixed-header/README.md @@ -3,21 +3,25 @@ This exercise demonstrates how to create a header that stays fixed at the top of the viewport while the user scrolls through the page content. You need to: + - Make the header stick to the top of the viewport using fixed positioning - Ensure the header appears above all other content - Add appropriate padding to the content so it's not hidden behind the header - Make sure the header stays in place when scrolling ## Desired Outcome + ![outcome](./desired-outcome.png) ### Self Check + - Does the header stay fixed at the top when you scroll? - Is the header positioned above all other content? - Is the main content properly spaced so it's not hidden behind the header? - Do the navigation links work correctly? ### Hints + - Use `position: fixed` to make the header stick to the viewport - Use `top: 0` to position it at the very top - Use `z-index` to ensure it appears above other content diff --git a/foundations/positioning/03-fixed-header/desired-outcome.png b/foundations/positioning/03-fixed-header/desired-outcome.png new file mode 100644 index 0000000000000000000000000000000000000000..11ebe526ae57ab1eafa6b80f1203f5e9a0d6df86 GIT binary patch literal 37806 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 literal 0 HcmV?d00001 diff --git a/foundations/positioning/03-fixed-header/desired-outcome.txt b/foundations/positioning/03-fixed-header/desired-outcome.txt deleted file mode 100644 index b542f6c0ee29..000000000000 --- a/foundations/positioning/03-fixed-header/desired-outcome.txt +++ /dev/null @@ -1,7 +0,0 @@ -This would be an image showing the desired outcome: -- A dark header fixed at the top of the viewport containing "Fixed Header" title and navigation links -- The header should remain visible when scrolling -- Main content sections below the header with proper spacing -- Content should not be hidden behind the fixed header - -You can create this image by taking a screenshot of the solution.html file in a browser and scrolling to show the fixed behavior. diff --git a/foundations/positioning/03-fixed-header/index.html b/foundations/positioning/03-fixed-header/index.html index 23bd6f66a206..9c25aa938e23 100644 --- a/foundations/positioning/03-fixed-header/index.html +++ b/foundations/positioning/03-fixed-header/index.html @@ -1,11 +1,11 @@ - - - + + + Fixed Header - +
@@ -20,29 +20,80 @@

Fixed Header

Section 1

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, quod. Adipisci eos nulla quae nobis, voluptatum officia consequuntur accusantium nam!

-

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

-

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, quod. Adipisci eos nulla quae nobis, voluptatum officia consequuntur accusantium nam!

-

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, + quod. Adipisci eos nulla quae nobis, voluptatum officia consequuntur + accusantium nam! +

+

+ Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris. +

+

+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum + dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat. +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, + quod. Adipisci eos nulla quae nobis, voluptatum officia consequuntur + accusantium nam! +

+

+ Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris. +

Section 2

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, quod. Adipisci eos nulla quae nobis, voluptatum officia consequuntur accusantium nam!

-

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

-

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, quod. Adipisci eos nulla quae nobis, voluptatum officia consequuntur accusantium nam!

-

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, + quod. Adipisci eos nulla quae nobis, voluptatum officia consequuntur + accusantium nam! +

+

+ Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris. +

+

+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum + dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat. +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, + quod. Adipisci eos nulla quae nobis, voluptatum officia consequuntur + accusantium nam! +

+

+ Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris. +

Section 3

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, quod. Adipisci eos nulla quae nobis, voluptatum officia consequuntur accusantium nam!

-

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

-

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, quod. Adipisci eos nulla quae nobis, voluptatum officia consequuntur accusantium nam!

-

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, + quod. Adipisci eos nulla quae nobis, voluptatum officia consequuntur + accusantium nam! +

+

+ Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris. +

+

+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum + dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat. +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, + quod. Adipisci eos nulla quae nobis, voluptatum officia consequuntur + accusantium nam! +

+

+ Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris. +

diff --git a/foundations/positioning/03-fixed-header/solution/solution.html b/foundations/positioning/03-fixed-header/solution/solution.html index 1d2c37865685..66f758064a4a 100644 --- a/foundations/positioning/03-fixed-header/solution/solution.html +++ b/foundations/positioning/03-fixed-header/solution/solution.html @@ -1,11 +1,11 @@ - - - + + + Fixed Header - +
@@ -20,29 +20,80 @@

Fixed Header

Section 1

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, quod. Adipisci eos nulla quae nobis, voluptatum officia consequuntur accusantium nam!

-

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

-

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, quod. Adipisci eos nulla quae nobis, voluptatum officia consequuntur accusantium nam!

-

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, + quod. Adipisci eos nulla quae nobis, voluptatum officia consequuntur + accusantium nam! +

+

+ Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris. +

+

+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum + dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat. +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, + quod. Adipisci eos nulla quae nobis, voluptatum officia consequuntur + accusantium nam! +

+

+ Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris. +

Section 2

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, quod. Adipisci eos nulla quae nobis, voluptatum officia consequuntur accusantium nam!

-

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

-

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, quod. Adipisci eos nulla quae nobis, voluptatum officia consequuntur accusantium nam!

-

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, + quod. Adipisci eos nulla quae nobis, voluptatum officia consequuntur + accusantium nam! +

+

+ Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris. +

+

+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum + dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat. +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, + quod. Adipisci eos nulla quae nobis, voluptatum officia consequuntur + accusantium nam! +

+

+ Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris. +

Section 3

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, quod. Adipisci eos nulla quae nobis, voluptatum officia consequuntur accusantium nam!

-

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

-

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, quod. Adipisci eos nulla quae nobis, voluptatum officia consequuntur accusantium nam!

-

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, + quod. Adipisci eos nulla quae nobis, voluptatum officia consequuntur + accusantium nam! +

+

+ Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris. +

+

+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum + dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat. +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, + quod. Adipisci eos nulla quae nobis, voluptatum officia consequuntur + accusantium nam! +

+

+ Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris. +