diff --git a/foundations/positioning/01-absolute-positioning/README.md b/foundations/positioning/01-absolute-positioning/README.md new file mode 100644 index 000000000000..b5a8c074ca0d --- /dev/null +++ b/foundations/positioning/01-absolute-positioning/README.md @@ -0,0 +1,28 @@ +# 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..6ab97047803a --- /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..21ef510122f0 --- /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..0f912e8cd20a --- /dev/null +++ b/foundations/positioning/02-layering/README.md @@ -0,0 +1,31 @@ +# 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..33afd890d3ea --- /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..119cb4325cde --- /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..b1f502ae78e0 --- /dev/null +++ b/foundations/positioning/03-fixed-header/README.md @@ -0,0 +1,29 @@ +# 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.png b/foundations/positioning/03-fixed-header/desired-outcome.png new file mode 100644 index 000000000000..11ebe526ae57 Binary files /dev/null and b/foundations/positioning/03-fixed-header/desired-outcome.png differ diff --git a/foundations/positioning/03-fixed-header/index.html b/foundations/positioning/03-fixed-header/index.html new file mode 100644 index 000000000000..9c25aa938e23 --- /dev/null +++ b/foundations/positioning/03-fixed-header/index.html @@ -0,0 +1,100 @@ + + + + + + + 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..66f758064a4a --- /dev/null +++ b/foundations/positioning/03-fixed-header/solution/solution.html @@ -0,0 +1,100 @@ + + + + + + + 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; +}