├── Exercise-01 display-grid
    ├── Solution
    │   ├── app.css
    │   └── index.html
    └── Starter
    │   ├── app.css
    │   └── index.html
├── Exercise-02-grid-template-rows
    ├── Solution
    │   ├── app.css
    │   └── index.html
    └── Starter
    │   ├── app.css
    │   └── index.html
├── Exercise-03 rows-and-columns
    ├── Solution
    │   ├── app.css
    │   └── index.html
    └── Starter
    │   ├── app.css
    │   └── index.html
├── Exercise-04 fractions
    ├── Solution
    │   ├── app.css
    │   └── index.html
    └── Starter
    │   ├── app.css
    │   └── index.html
├── Exercise-05 QUIZ
    ├── app.css
    └── index.html
├── Exercise-06 repeat
    ├── Solution
    │   ├── app.css
    │   └── index.html
    └── Starter
    │   ├── app.css
    │   └── index.html
├── Exercise-07 gaps
    ├── Solution
    │   ├── app.css
    │   └── index.html
    └── Starter
    │   ├── app.css
    │   └── index.html
├── Exercise-08 grid-column-start
    ├── Solution
    │   ├── app.css
    │   └── index.html
    └── Starter
    │   ├── app.css
    │   └── index.html
├── Exercise-09 positioning by row and column
    ├── Solution
    │   ├── app.css
    │   └── index.html
    └── Starter
    │   ├── app.css
    │   └── index.html
├── Exercise-10 grid-column-end and row-end
    ├── Solution
    │   ├── app.css
    │   └── index.html
    └── Starter
    │   ├── app.css
    │   └── index.html
├── Exercise-11 grid-row and grid-column
    ├── Solution
    │   ├── app.css
    │   └── index.html
    └── Starter
    │   ├── app.css
    │   └── index.html
├── Exercise-12 span
    ├── Solution
    │   ├── app.css
    │   └── index.html
    └── Starter
    │   ├── app.css
    │   └── index.html
├── Exercise-13 page layout
    ├── Solution
    │   ├── app.css
    │   └── index.html
    └── Starter
    │   ├── app.css
    │   └── index.html
├── Exercise-14 page layout areas
    ├── Solution
    │   ├── app.css
    │   └── index.html
    └── Starter
    │   ├── app.css
    │   └── index.html
├── Exercise-15 grid-auto-rows
    ├── Solution
    │   ├── app.css
    │   ├── app.js
    │   └── index.html
    └── Starter
    │   ├── app.css
    │   ├── app.js
    │   └── index.html
├── Exercise-16 grid-auto-flow
    ├── Solution
    │   ├── app.css
    │   └── index.html
    └── Starter
    │   ├── app.css
    │   └── index.html
├── Exercise-17 minmax
    ├── Solution
    │   ├── app.css
    │   └── index.html
    └── Starter
    │   ├── app.css
    │   └── index.html
├── Exercise-18 responsive
    ├── Solution
    │   ├── app.css
    │   └── index.html
    └── Starter
    │   ├── app.css
    │   └── index.html
└── Exercise-19 - autofit
    ├── Solution
        ├── app.css
        └── index.html
    └── Starter
        ├── app.css
        └── index.html


/Exercise-01 display-grid/Solution/app.css:
--------------------------------------------------------------------------------
 1 | /* 🚨🚫🙅  START OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 2 | body {
 3 |   font-family: Arial, Helvetica, sans-serif;
 4 |   background-color: #263238;
 5 | }
 6 | h1 {
 7 |   text-align: center;
 8 |   color: white;
 9 |   font-weight: 100;
10 | }
11 | .card {
12 |   position: relative;
13 |   height: 16.5em;
14 |   box-shadow: 0px 1px 13px rgba(0, 0, 0, 0.1);
15 |   cursor: pointer;
16 |   transition: all 120ms;
17 |   display: flex;
18 |   align-items: center;
19 |   justify-content: center;
20 |   background: #fff;
21 |   padding: 0.5em;
22 |   padding-bottom: 3.4em;
23 |   margin: 0 5px;
24 | }
25 | .card .title {
26 |   font-family: Arial, Helvetica, sans-serif;
27 |   font-size: 0.9em;
28 |   position: absolute;
29 |   left: 0.625em;
30 |   bottom: 1.875em;
31 |   font-weight: 400;
32 |   color: #000;
33 | }
34 | .card .price {
35 |   font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
36 |   font-size: 0.9em;
37 |   position: absolute;
38 |   left: 0.625em;
39 |   bottom: 0.625em;
40 |   color: #000;
41 | }
42 | 
43 | .image {
44 |   background: rgb(241, 241, 241);
45 |   width: 100%;
46 |   height: 100%;
47 |   display: flex;
48 |   justify-content: center;
49 |   align-items: center;
50 | }
51 | /* 🚨🚫🙅  END OF THE NO TOUCHING ZONE 🙅🚫🚨 */
52 | 
53 | /* ALL YOUR CODE GOES BELOW THIS LINE */
54 | /* ================================== */
55 | 
56 | #container {
57 |   margin: 0 auto;
58 |   width: 900px;
59 | 
60 |   /* ⬇️⬇️⬇️ STYLE THE GRID CONTAINER HERE ⬇️⬇️⬇️ */
61 |   display: grid;
62 |   grid-template-columns: 300px 300px 300px;
63 |   /* ⬆️⬆️⬆️ STYLE THE GRID CONTAINER HERE ⬆️⬆️⬆️ */
64 | }
65 | 


--------------------------------------------------------------------------------
/Exercise-01 display-grid/Solution/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 1</title>
 9 | 
10 |     <link rel="stylesheet" href="app.css">
11 | </head>
12 | 
13 | <body>
14 |     <!-- No need to touch anything in this HTML file! -->
15 |     <h1>Our Products</h1>
16 |     <div id="container">
17 |         <div class="card">
18 |             <div class="image"><span class="text">This is a product</span></div>
19 |             <span class="title">Cool Product</span>
20 |             <span class="price">$100</span>
21 |         </div>
22 |         <div class="card">
23 |             <div class="image"><span class="text">This is a product.</span></div>
24 |             <span class="title">Cool Product</span>
25 |             <span class="price">$200</span>
26 |         </div>
27 |         <div class="card">
28 |             <div class="image"><span class="text">This is a product.</span></div>
29 |             <span class="title">Cool Product</span>
30 |             <span class="price">$300</span>
31 |         </div>
32 |     </div>
33 | </body>
34 | 
35 | </html>
36 | 


--------------------------------------------------------------------------------
/Exercise-01 display-grid/Starter/app.css:
--------------------------------------------------------------------------------
 1 | /* 🚨🚫🙅  START OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 2 | body {
 3 |   font-family: Arial, Helvetica, sans-serif;
 4 |   background-color: #263238;
 5 | }
 6 | h1 {
 7 |   text-align: center;
 8 |   color: white;
 9 |   font-weight: 100;
10 | }
11 | .card {
12 |   position: relative;
13 |   height: 16.5em;
14 |   box-shadow: 0px 1px 13px rgba(0, 0, 0, 0.1);
15 |   cursor: pointer;
16 |   transition: all 120ms;
17 |   display: flex;
18 |   align-items: center;
19 |   justify-content: center;
20 |   background: #fff;
21 |   padding: 0.5em;
22 |   padding-bottom: 3.4em;
23 |   margin: 0 5px;
24 | }
25 | .card .title {
26 |   font-family: Arial, Helvetica, sans-serif;
27 |   font-size: 0.9em;
28 |   position: absolute;
29 |   left: 0.625em;
30 |   bottom: 1.875em;
31 |   font-weight: 400;
32 |   color: #000;
33 | }
34 | .card .price {
35 |   font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
36 |   font-size: 0.9em;
37 |   position: absolute;
38 |   left: 0.625em;
39 |   bottom: 0.625em;
40 |   color: #000;
41 | }
42 | 
43 | .image {
44 |   background: rgb(241, 241, 241);
45 |   width: 100%;
46 |   height: 100%;
47 |   display: flex;
48 |   justify-content: center;
49 |   align-items: center;
50 | }
51 | /* 🚨🚫🙅  END OF THE NO TOUCHING ZONE 🙅🚫🚨 */
52 | 
53 | /* ALL YOUR CODE GOES BELOW THIS LINE */
54 | /* ================================== */
55 | 
56 | #container {
57 |   margin: 0 auto;
58 |   width: 900px;
59 | 
60 |   /* ⬇️⬇️⬇️ STYLE THE GRID CONTAINER HERE ⬇️⬇️⬇️ */
61 | 
62 |   /* ⬆️⬆️⬆️ STYLE THE GRID CONTAINER HERE ⬆️⬆️⬆️ */
63 | }
64 | 


--------------------------------------------------------------------------------
/Exercise-01 display-grid/Starter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 1</title>
 9 | 
10 |     <link rel="stylesheet" href="app.css">
11 | </head>
12 | 
13 | <body>
14 |     <!-- 🙅🚫🚨 No need to touch anything in this HTML file! 🙅🚫🚨 -->
15 |     <h1>Our Products</h1>
16 |     <div id="container">
17 |         <div class="card">
18 |             <div class="image"><span class="text">This is a product</span></div>
19 |             <span class="title">Cool Product</span>
20 |             <span class="price">$100</span>
21 |         </div>
22 |         <div class="card">
23 |             <div class="image"><span class="text">This is a product.</span></div>
24 |             <span class="title">Cool Product</span>
25 |             <span class="price">$200</span>
26 |         </div>
27 |         <div class="card">
28 |             <div class="image"><span class="text">This is a product.</span></div>
29 |             <span class="title">Cool Product</span>
30 |             <span class="price">$300</span>
31 |         </div>
32 |     </div>
33 | </body>
34 | 
35 | </html>
36 | 


--------------------------------------------------------------------------------
/Exercise-02-grid-template-rows/Solution/app.css:
--------------------------------------------------------------------------------
 1 | /* 🚨🚫🙅  START OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 2 | 
 3 | .container > * {
 4 |   display: flex;
 5 |   align-items: center;
 6 |   justify-content: center;
 7 |   font-size: 2rem;
 8 |   font-family: sans-serif;
 9 | }
10 | .header {
11 |   background-color: #f06292;
12 | }
13 | .navbar {
14 |   background-color: #ba68c8;
15 | }
16 | 
17 | .main {
18 |   background-color: #9575cd;
19 | }
20 | 
21 | .footer {
22 |   background-color: #7986cb;
23 | }
24 | 
25 | /* 🚨🚫🙅  END OF THE NO TOUCHING ZONE 🙅🚫🚨 */
26 | 
27 | /* ALL YOUR CODE GOES BELOW THIS LINE */
28 | /* ================================== */
29 | 
30 | .container {
31 |   width: 800px;
32 |   margin: 0 auto;
33 | 
34 |   /* ⬇️⬇️⬇️ STYLE THE GRID CONTAINER HERE ⬇️⬇️⬇️ */
35 |   display: grid;
36 |   grid-template-rows: 150px 50px 400px 150px;
37 |   /* ⬆️⬆️⬆️ STYLE THE GRID CONTAINER HERE ⬆️⬆️⬆️ */
38 | }
39 | 


--------------------------------------------------------------------------------
/Exercise-02-grid-template-rows/Solution/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 2</title>
 9 | 
10 |     <link rel="stylesheet" href="app.css">
11 | </head>
12 | 
13 | <body>
14 |     <!-- 🙅🚫🚨 No need to touch anything in this HTML file! 🙅🚫🚨 -->
15 |     <div class="container">
16 |         <header class="header">THIS IS OUR PAGE HEADER</header>
17 |         <nav class="navbar">THIS IS OUR NAVBAR</nav>
18 |         <main class="main">THIS IS THE MAIN PAGE CONTENT</main>
19 |         <footer class="footer">THIS IS OUR PAGE FOOTER</footer>
20 |     </div>
21 | </body>
22 | 
23 | </html>
24 | 


--------------------------------------------------------------------------------
/Exercise-02-grid-template-rows/Starter/app.css:
--------------------------------------------------------------------------------
 1 | /* 🚨🚫🙅  START OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 2 | 
 3 | .container > * {
 4 |   display: flex;
 5 |   align-items: center;
 6 |   justify-content: center;
 7 |   font-size: 2rem;
 8 |   font-family: sans-serif;
 9 | }
10 | .header {
11 |   background-color: #f06292;
12 | }
13 | .navbar {
14 |   background-color: #ba68c8;
15 | }
16 | 
17 | .main {
18 |   background-color: #9575cd;
19 | }
20 | 
21 | .footer {
22 |   background-color: #7986cb;
23 | }
24 | 
25 | /* 🚨🚫🙅  END OF THE NO TOUCHING ZONE 🙅🚫🚨 */
26 | 
27 | /* ALL YOUR CODE GOES BELOW THIS LINE */
28 | /* ================================== */
29 | 
30 | .container {
31 |   width: 800px;
32 |   margin: 0 auto;
33 | 
34 |   /* create 4 rows:  
35 |   - 150px 
36 |   - 50px 
37 |   - 400px
38 |   - 150px  */
39 |   /* ⬇️⬇️⬇️ STYLE THE GRID CONTAINER HERE ⬇️⬇️⬇️ */
40 | 
41 |   /* ⬆️⬆️⬆️ STYLE THE GRID CONTAINER HERE ⬆️⬆️⬆️ */
42 | }
43 | 


--------------------------------------------------------------------------------
/Exercise-02-grid-template-rows/Starter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 2</title>
 9 | 
10 |     <link rel="stylesheet" href="app.css">
11 | </head>
12 | 
13 | <body>
14 |     <!-- 🙅🚫🚨 No need to touch anything in this HTML file! 🙅🚫🚨 -->
15 |     <div class="container">
16 |         <header class="header">THIS IS OUR PAGE HEADER</header>
17 |         <nav class="navbar">THIS IS OUR NAVBAR</nav>
18 |         <main class="main">THIS IS THE MAIN PAGE CONTENT</main>
19 |         <footer class="footer">THIS IS OUR PAGE FOOTER</footer>
20 |     </div>
21 | </body>
22 | 
23 | </html>
24 | 


--------------------------------------------------------------------------------
/Exercise-03 rows-and-columns/Solution/app.css:
--------------------------------------------------------------------------------
 1 | /* 🚨🚫🙅  START OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 2 | 
 3 | .box {
 4 |   background-color: #42a5f5;
 5 |   border: 3px solid black;
 6 |   font-size: 3em;
 7 |   padding: 0.5em;
 8 | }
 9 | /* 🚨🚫🙅  END OF THE NO TOUCHING ZONE 🙅🚫🚨 */
10 | 
11 | /* ALL YOUR CODE GOES BELOW THIS LINE */
12 | /* ================================== */
13 | 
14 | #container {
15 |   margin: 0 auto;
16 |   height: 600px;
17 |   width: 600px;
18 |   border: 1px solid black;
19 | 
20 |   /* ⬇️⬇️⬇️ STYLE THE GRID CONTAINER HERE ⬇️⬇️⬇️ */
21 |   display: grid;
22 |   grid-template-columns: 200px 400px;
23 |   grid-template-rows: 100px 400px 100px;
24 |   /* ⬆️⬆️⬆️ STYLE THE GRID CONTAINER HERE ⬆️⬆️⬆️ */
25 | }
26 | 


--------------------------------------------------------------------------------
/Exercise-03 rows-and-columns/Solution/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 3</title>
 9 | 
10 |     <link rel="stylesheet" href="app.css">
11 | </head>
12 | 
13 | <body>
14 |     <!-- 🙅🚫🚨 No need to touch anything in this HTML file! 🙅🚫🚨 -->
15 |     <div id="container">
16 |         <div class="box">1</div>
17 |         <div class="box">2</div>
18 |         <div class="box">3</div>
19 |         <div class="box">4</div>
20 |         <div class="box">5</div>
21 |         <div class="box">6</div>
22 |     </div>
23 | </body>
24 | 
25 | </html>
26 | 


--------------------------------------------------------------------------------
/Exercise-03 rows-and-columns/Starter/app.css:
--------------------------------------------------------------------------------
 1 | /* 🚨🚫🙅  START OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 2 | 
 3 | .box {
 4 |   background-color: #42a5f5;
 5 |   border: 3px solid black;
 6 |   font-size: 3em;
 7 |   padding: 0.5em;
 8 | }
 9 | /* 🚨🚫🙅  END OF THE NO TOUCHING ZONE 🙅🚫🚨 */
10 | 
11 | /* ALL YOUR CODE GOES BELOW THIS LINE */
12 | /* ================================== */
13 | 
14 | #container {
15 |   margin: 0 auto;
16 |   height: 600px;
17 |   width: 600px;
18 |   border: 1px solid black;
19 | 
20 |   /* Create 2 columns: 
21 |     - 200px 
22 |     - 400px 
23 |   Create 3 rows: 
24 |     - 100px
25 |     - 400px 
26 |     - 100px */
27 | 
28 |   /* ⬇️⬇️⬇️ STYLE THE GRID CONTAINER HERE ⬇️⬇️⬇️ */
29 | 
30 |   /* ⬆️⬆️⬆️ STYLE THE GRID CONTAINER HERE ⬆️⬆️⬆️ */
31 | }
32 | 


--------------------------------------------------------------------------------
/Exercise-03 rows-and-columns/Starter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 3</title>
 9 | 
10 |     <link rel="stylesheet" href="app.css">
11 | </head>
12 | 
13 | <body>
14 |     <!-- 🙅🚫🚨 No need to touch anything in this HTML file! 🙅🚫🚨 -->
15 |     <div id="container">
16 |         <div class="box">1</div>
17 |         <div class="box">2</div>
18 |         <div class="box">3</div>
19 |         <div class="box">4</div>
20 |         <div class="box">5</div>
21 |         <div class="box">6</div>
22 |     </div>
23 | </body>
24 | 
25 | </html>
26 | 


--------------------------------------------------------------------------------
/Exercise-04 fractions/Solution/app.css:
--------------------------------------------------------------------------------
 1 | /* 🚨🚫🙅  START OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 2 | body {
 3 |   height: 100vh;
 4 | }
 5 | .box {
 6 |   border: 2px solid black;
 7 |   font-size: 2em;
 8 |   padding: 0.5em;
 9 |   box-sizing: border-box;
10 | }
11 | /* 🚨🚫🙅  END OF THE NO TOUCHING ZONE 🙅🚫🚨 */
12 | 
13 | /* ALL YOUR CODE GOES BELOW THIS LINE */
14 | /* ================================== */
15 | 
16 | #container {
17 |   margin: 0 auto;
18 |   width: 50%;
19 |   height: 50%;
20 |   min-height: 300px;
21 |   border: 1px solid black;
22 | 
23 |   /* ⬇️⬇️⬇️ STYLE THE GRID CONTAINER HERE ⬇️⬇️⬇️ */
24 |   display: grid;
25 |   grid-template-columns: 1fr 1fr 1fr;
26 |   grid-template-rows: 2fr 1fr;
27 |   /* ⬆️⬆️⬆️ STYLE THE GRID CONTAINER HERE ⬆️⬆️⬆️ */
28 | }
29 | 


--------------------------------------------------------------------------------
/Exercise-04 fractions/Solution/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 4</title>
 9 | 
10 |     <link rel="stylesheet" href="app.css">
11 | </head>
12 | 
13 | <body>
14 |     <!-- 🙅🚫🚨 No need to touch anything in this HTML file! 🙅🚫🚨 -->
15 |     <div id="container">
16 |         <div class="box" style="background-color: #BA68C8;">1</div>
17 |         <div class="box" style="background-color: #7B1FA2;">2</div>
18 |         <div class="box" style="background-color: #BA68C8;">3</div>
19 |         <div class="box" style="background-color: #42A5F5;">4</div>
20 |         <div class="box" style="background-color: #1976D2;">5</div>
21 |         <div class="box" style="background-color: #42A5F5;">6</div>
22 |     </div>
23 | </body>
24 | 
25 | </html>
26 | 


--------------------------------------------------------------------------------
/Exercise-04 fractions/Starter/app.css:
--------------------------------------------------------------------------------
 1 | /* 🚨🚫🙅  START OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 2 | body {
 3 |   height: 100vh;
 4 | }
 5 | .box {
 6 |   border: 2px solid black;
 7 |   font-size: 2em;
 8 |   padding: 0.5em;
 9 |   box-sizing: border-box;
10 | }
11 | /* 🚨🚫🙅  END OF THE NO TOUCHING ZONE 🙅🚫🚨 */
12 | 
13 | /* ALL YOUR CODE GOES BELOW THIS LINE */
14 | /* ================================== */
15 | 
16 | #container {
17 |   margin: 0 auto;
18 |   width: 50%;
19 |   height: 50%;
20 |   min-height: 300px;
21 |   border: 1px solid black;
22 |   /* 
23 |   Create a layout with: 
24 |   - 3 equally sized columns 
25 |   - 2 rows.  The first should be twice as large as the second. */
26 | 
27 |   /* ⬇️⬇️⬇️ STYLE THE GRID CONTAINER HERE ⬇️⬇️⬇️ */
28 | 
29 |   /* ⬆️⬆️⬆️ STYLE THE GRID CONTAINER HERE ⬆️⬆️⬆️ */
30 | }
31 | 


--------------------------------------------------------------------------------
/Exercise-04 fractions/Starter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 4</title>
 9 | 
10 |     <link rel="stylesheet" href="app.css">
11 | </head>
12 | 
13 | <body>
14 |     <!-- 🙅🚫🚨 No need to touch anything in this HTML file! 🙅🚫🚨 -->
15 |     <div id="container">
16 |         <div class="box" style="background-color: #BA68C8;">1</div>
17 |         <div class="box" style="background-color: #7B1FA2;">2</div>
18 |         <div class="box" style="background-color: #BA68C8;">3</div>
19 |         <div class="box" style="background-color: #42A5F5;">4</div>
20 |         <div class="box" style="background-color: #1976D2;">5</div>
21 |         <div class="box" style="background-color: #42A5F5;">6</div>
22 |     </div>
23 | </body>
24 | 
25 | </html>
26 | 


--------------------------------------------------------------------------------
/Exercise-05 QUIZ/app.css:
--------------------------------------------------------------------------------
 1 | div {
 2 |   border: 1px solid black;
 3 | }
 4 | 
 5 | #container {
 6 |   margin: 0 auto;
 7 |   width: 600px;
 8 |   height: 500px;
 9 |   border: 1px solid black;
10 | 
11 |   display: grid;
12 |   grid-template-columns: 1fr 100px 200px 2fr;
13 | }
14 | 


--------------------------------------------------------------------------------
/Exercise-05 QUIZ/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 4</title>
 9 | 
10 |     <link rel="stylesheet" href="app.css">
11 | </head>
12 | 
13 | <body>
14 |     <div id="container">
15 |         <div style="background-color: #BA68C8;"></div>
16 |         <div style="background-color: #7B1FA2;"></div>
17 |         <div style="background-color: #BA68C8;"></div>
18 | 
19 |         <div style="background-color: #42A5F5;"></div>
20 |         <div style="background-color: #1976D2;"></div>
21 |         <div style="background-color: #42A5F5;"></div>
22 | 
23 | 
24 |     </div>
25 | </body>
26 | 
27 | </html>
28 | 


--------------------------------------------------------------------------------
/Exercise-06 repeat/Solution/app.css:
--------------------------------------------------------------------------------
 1 | /* 🚨🚫🙅  START OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 2 | 
 3 | div {
 4 |   border: 1px solid black;
 5 |   min-height: 20px;
 6 | }
 7 | /* 🚨🚫🙅  END OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 8 | 
 9 | /* ALL YOUR CODE GOES BELOW THIS LINE */
10 | /* ================================== */
11 | #container {
12 |   margin: 0 auto;
13 |   width: 500px;
14 |   height: 500px;
15 |   border: 1px solid black;
16 |   /* 
17 |   Using repeat and fractional units, create a layout with: 
18 |   - 5 equally sized columns
19 |   - 4 equally sized rows */
20 | 
21 |   /* ⬇️⬇️⬇️ STYLE THE GRID CONTAINER HERE ⬇️⬇️⬇️ */
22 |   display: grid;
23 |   grid-template-columns: repeat(5, 1fr);
24 |   grid-template-rows: repeat(4, 1fr);
25 |   /* ⬆️⬆️⬆️ STYLE THE GRID CONTAINER HERE ⬆️⬆️⬆️ */
26 | }
27 | 


--------------------------------------------------------------------------------
/Exercise-06 repeat/Solution/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 6</title>
 9 | 
10 |     <link rel="stylesheet" href="app.css">
11 | </head>
12 | 
13 | <body>
14 |     <!-- 🙅🚫🚨 No need to touch anything in this HTML file! 🙅🚫🚨 -->
15 |     <div id="container">
16 |         <div style="background-color: #BA68C8;"></div>
17 |         <div style="background-color: #7B1FA2;"></div>
18 |         <div style="background-color: #BA68C8;"></div>
19 |         <div style="background-color: #7B1FA2;"></div>
20 |         <div style="background-color: #BA68C8;"></div>
21 |         <div style="background-color: #7B1FA2;"></div>
22 |         <div style="background-color: #BA68C8;"></div>
23 |         <div style="background-color: #7B1FA2;"></div>
24 |         <div style="background-color: #BA68C8;"></div>
25 |         <div style="background-color: #7B1FA2;"></div>
26 |         <div style="background-color: #BA68C8;"></div>
27 |         <div style="background-color: #7B1FA2;"></div>
28 |         <div style="background-color: #BA68C8;"></div>
29 |         <div style="background-color: #7B1FA2;"></div>
30 |         <div style="background-color: #BA68C8;"></div>
31 |         <div style="background-color: #7B1FA2;"></div>
32 |         <div style="background-color: #BA68C8;"></div>
33 |         <div style="background-color: #7B1FA2;"></div>
34 |         <div style="background-color: #BA68C8;"></div>
35 |         <div style="background-color: #7B1FA2;"></div>
36 | 
37 | 
38 |     </div>
39 | </body>
40 | 
41 | </html>
42 | 


--------------------------------------------------------------------------------
/Exercise-06 repeat/Starter/app.css:
--------------------------------------------------------------------------------
 1 | /* 🚨🚫🙅  START OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 2 | 
 3 | div {
 4 |   border: 1px solid black;
 5 |   min-height: 20px;
 6 | }
 7 | /* 🚨🚫🙅  END OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 8 | 
 9 | /* ALL YOUR CODE GOES BELOW THIS LINE */
10 | /* ================================== */
11 | #container {
12 |   margin: 0 auto;
13 |   width: 500px;
14 |   height: 500px;
15 |   border: 1px solid black;
16 |   /* 
17 |   Using repeat and fractional units, create a layout with: 
18 |   - 5 equally sized columns
19 |   - 4 equally sized rows */
20 | 
21 |   /* ⬇️⬇️⬇️ STYLE THE GRID CONTAINER HERE ⬇️⬇️⬇️ */
22 | 
23 |   /* ⬆️⬆️⬆️ STYLE THE GRID CONTAINER HERE ⬆️⬆️⬆️ */
24 | }
25 | 


--------------------------------------------------------------------------------
/Exercise-06 repeat/Starter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 6</title>
 9 | 
10 |     <link rel="stylesheet" href="app.css">
11 | </head>
12 | 
13 | <body>
14 |     <!-- 🙅🚫🚨 No need to touch anything in this HTML file! 🙅🚫🚨 -->
15 |     <div id="container">
16 |         <div style="background-color: #BA68C8;"></div>
17 |         <div style="background-color: #7B1FA2;"></div>
18 |         <div style="background-color: #BA68C8;"></div>
19 |         <div style="background-color: #7B1FA2;"></div>
20 |         <div style="background-color: #BA68C8;"></div>
21 |         <div style="background-color: #7B1FA2;"></div>
22 |         <div style="background-color: #BA68C8;"></div>
23 |         <div style="background-color: #7B1FA2;"></div>
24 |         <div style="background-color: #BA68C8;"></div>
25 |         <div style="background-color: #7B1FA2;"></div>
26 |         <div style="background-color: #BA68C8;"></div>
27 |         <div style="background-color: #7B1FA2;"></div>
28 |         <div style="background-color: #BA68C8;"></div>
29 |         <div style="background-color: #7B1FA2;"></div>
30 |         <div style="background-color: #BA68C8;"></div>
31 |         <div style="background-color: #7B1FA2;"></div>
32 |         <div style="background-color: #BA68C8;"></div>
33 |         <div style="background-color: #7B1FA2;"></div>
34 |         <div style="background-color: #BA68C8;"></div>
35 |         <div style="background-color: #7B1FA2;"></div>
36 | 
37 | 
38 |     </div>
39 | </body>
40 | 
41 | </html>
42 | 


--------------------------------------------------------------------------------
/Exercise-07 gaps/Solution/app.css:
--------------------------------------------------------------------------------
 1 | /* 🚨🚫🙅  START OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 2 | .box {
 3 |   border: 1px solid black;
 4 |   background-color: #6a1b9a;
 5 |   min-height: 20px;
 6 | }
 7 | /* 🚨🚫🙅  END OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 8 | 
 9 | /* ALL YOUR CODE GOES BELOW THIS LINE */
10 | /* ================================== */
11 | 
12 | #container {
13 |   margin: 0 auto;
14 |   width: 500px;
15 |   height: 500px;
16 |   border: 1px solid black;
17 |   /*  
18 |   - Use the grid-template shorthand to create a layot with: 
19 |     - 7 rows equally sized
20 |     - 3 columns equally sized
21 |   - Add 10px gaps between the rows and columns
22 | 
23 |   /* ⬇️⬇️⬇️ STYLE THE GRID CONTAINER HERE ⬇️⬇️⬇️ */
24 |   display: grid;
25 |   grid-template: repeat(7, 1fr) / repeat(3, 1fr);
26 |   gap: 10px;
27 |   /* ⬆️⬆️⬆️ STYLE THE GRID CONTAINER HERE ⬆️⬆️⬆️ */
28 | }
29 | 


--------------------------------------------------------------------------------
/Exercise-07 gaps/Solution/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 7</title>
 9 | 
10 |     <link rel="stylesheet" href="app.css">
11 | </head>
12 | 
13 | <body>
14 |     <!-- 🙅🚫🚨 No need to touch anything in this HTML file! 🙅🚫🚨 -->
15 |     <div id="container">
16 |         <div class="box"></div>
17 |         <div class="box"></div>
18 |         <div class="box"></div>
19 |         <div class="box"></div>
20 |         <div class="box"></div>
21 |         <div class="box"></div>
22 |         <div class="box"></div>
23 |         <div class="box"></div>
24 |         <div class="box"></div>
25 |         <div class="box"></div>
26 |         <div class="box"></div>
27 |         <div class="box"></div>
28 |         <div class="box"></div>
29 |         <div class="box"></div>
30 |         <div class="box"></div>
31 |         <div class="box"></div>
32 |         <div class="box"></div>
33 |         <div class="box"></div>
34 |         <div class="box"></div>
35 |         <div class="box"></div>
36 |         <div class="box"></div>
37 |     </div>
38 | </body>
39 | 
40 | </html>
41 | 


--------------------------------------------------------------------------------
/Exercise-07 gaps/Starter/app.css:
--------------------------------------------------------------------------------
 1 | /* 🚨🚫🙅  START OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 2 | .box {
 3 |   border: 1px solid black;
 4 |   background-color: #6a1b9a;
 5 |   min-height: 20px;
 6 | }
 7 | /* 🚨🚫🙅  END OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 8 | 
 9 | /* ALL YOUR CODE GOES BELOW THIS LINE */
10 | /* ================================== */
11 | 
12 | #container {
13 |   margin: 0 auto;
14 |   width: 500px;
15 |   height: 500px;
16 |   border: 1px solid black;
17 |   /*  
18 |   - Use the grid-template shorthand to create a layout with: 
19 |     - 7 rows equally sized
20 |     - 3 columns equally sized
21 |   - Add 10px gaps between the rows and columns
22 | 
23 |   /* ⬇️⬇️⬇️ STYLE THE GRID CONTAINER HERE ⬇️⬇️⬇️ */
24 | 
25 |   /* ⬆️⬆️⬆️ STYLE THE GRID CONTAINER HERE ⬆️⬆️⬆️ */
26 | }
27 | 


--------------------------------------------------------------------------------
/Exercise-07 gaps/Starter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 7</title>
 9 | 
10 |     <link rel="stylesheet" href="app.css">
11 | </head>
12 | 
13 | <body>
14 |     <!-- 🙅🚫🚨 No need to touch anything in this HTML file! 🙅🚫🚨 -->
15 |     <div id="container">
16 |         <div class="box"></div>
17 |         <div class="box"></div>
18 |         <div class="box"></div>
19 |         <div class="box"></div>
20 |         <div class="box"></div>
21 |         <div class="box"></div>
22 |         <div class="box"></div>
23 |         <div class="box"></div>
24 |         <div class="box"></div>
25 |         <div class="box"></div>
26 |         <div class="box"></div>
27 |         <div class="box"></div>
28 |         <div class="box"></div>
29 |         <div class="box"></div>
30 |         <div class="box"></div>
31 |         <div class="box"></div>
32 |         <div class="box"></div>
33 |         <div class="box"></div>
34 |         <div class="box"></div>
35 |         <div class="box"></div>
36 |         <div class="box"></div>
37 |     </div>
38 | </body>
39 | 
40 | </html>
41 | 


--------------------------------------------------------------------------------
/Exercise-08 grid-column-start/Solution/app.css:
--------------------------------------------------------------------------------
 1 | /* 🚨🚫🙅  START OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 2 | #container {
 3 |   background-size: 100px 500px;
 4 |   background-image: linear-gradient(to right, grey 1px, transparent 1px),
 5 |     linear-gradient(to bottom, grey 1px, transparent 1px);
 6 |   margin: 0 auto;
 7 |   width: 500px;
 8 |   height: 500px;
 9 |   border: 1px solid black;
10 | }
11 | /* 🚨🚫🙅  END OF THE NO TOUCHING ZONE 🙅🚫🚨 */
12 | /* ALL YOUR CODE GOES BELOW THIS LINE */
13 | /* ================================== */
14 | 
15 | #container {
16 |   /* ⬇️⬇️⬇️ STYLE THE GRID CONTAINER HERE ⬇️⬇️⬇️ */
17 |   display: grid;
18 |   grid-template-columns: repeat(5, 1fr);
19 |   /* ⬆️⬆️⬆️ STYLE THE GRID CONTAINER HERE ⬆️⬆️⬆️ */
20 | }
21 | 
22 | #pinkbox {
23 |   background-color: #e91e63;
24 |   /* ⬇️⬇️⬇️ STYLE THE PINK BOX HERE ⬇️⬇️⬇️ */
25 |   grid-column-start: 4;
26 |   /* ⬆️⬆️⬆️ STYLE THE PINK BOX HERE ⬆️⬆️⬆️ */
27 | }
28 | 


--------------------------------------------------------------------------------
/Exercise-08 grid-column-start/Solution/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 8</title>
 9 | 
10 |     <link rel="stylesheet" href="app.css">
11 | </head>
12 | 
13 | <body>
14 |     <!-- 🙅🚫🚨 No need to touch anything in this HTML file! 🙅🚫🚨 -->
15 |     <div id="container" class="checkerboard">
16 |         <div id="pinkbox"></div>
17 |     </div>
18 | </body>
19 | 
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Exercise-08 grid-column-start/Starter/app.css:
--------------------------------------------------------------------------------
 1 | /* 🚨🚫🙅  START OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 2 | #container {
 3 |   background-size: 100px 500px;
 4 |   background-image: linear-gradient(to right, grey 1px, transparent 1px),
 5 |     linear-gradient(to bottom, grey 1px, transparent 1px);
 6 |   margin: 0 auto;
 7 |   width: 500px;
 8 |   height: 500px;
 9 |   border: 1px solid black;
10 | 
11 |   display: grid;
12 |   grid-template-columns: repeat(5, 1fr);
13 | }
14 | /* 🚨🚫🙅  END OF THE NO TOUCHING ZONE 🙅🚫🚨 */
15 | /* ALL YOUR CODE GOES BELOW THIS LINE */
16 | /* ================================== */
17 | 
18 | #pinkbox {
19 |   background-color: #e91e63;
20 |   /* ⬇️⬇️⬇️ STYLE THE PINK BOX HERE ⬇️⬇️⬇️ */
21 | 
22 |   /* ⬆️⬆️⬆️ STYLE THE PINK BOX HERE ⬆️⬆️⬆️ */
23 | }
24 | 


--------------------------------------------------------------------------------
/Exercise-08 grid-column-start/Starter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 8</title>
 9 | 
10 |     <link rel="stylesheet" href="app.css">
11 | </head>
12 | 
13 | <body>
14 |     <!-- 🙅🚫🚨 No need to touch anything in this HTML file! 🙅🚫🚨 -->
15 |     <div id="container" class="checkerboard">
16 |         <div id="pinkbox"></div>
17 |     </div>
18 | </body>
19 | 
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Exercise-09 positioning by row and column/Solution/app.css:
--------------------------------------------------------------------------------
 1 | /* 🚨🚫🙅  START OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 2 | .box {
 3 |   border: 1px solid black;
 4 |   background-color: #6a1b9a;
 5 | }
 6 | #container {
 7 |   margin: 0 auto;
 8 |   width: 500px;
 9 |   height: 500px;
10 |   border: 1px solid black;
11 |   background-size: 100px 100px;
12 |   background-image: linear-gradient(to right, grey 1px, transparent 1px),
13 |     linear-gradient(to bottom, grey 1px, transparent 1px);
14 | 
15 |   display: grid;
16 |   grid-template-columns: repeat(5, 1fr);
17 |   grid-template-rows: repeat(5, 1fr);
18 | }
19 | /* 🚨🚫🙅  END OF THE NO TOUCHING ZONE 🙅🚫🚨 */
20 | 
21 | /* ALL YOUR CODE GOES BELOW THIS LINE */
22 | /* ================================== */
23 | 
24 | #pinkbox {
25 |   background-color: #e91e63;
26 |   /* ⬇️⬇️⬇️ STYLE THE PINK BOX HERE ⬇️⬇️⬇️ */
27 |   grid-row-start: 3;
28 |   grid-column-start: 2;
29 |   /* ⬆️⬆️⬆️ STYLE THE PINK BOX HERE ⬆️⬆️⬆️ */
30 | }
31 | 


--------------------------------------------------------------------------------
/Exercise-09 positioning by row and column/Solution/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 9</title>
 9 | 
10 |     <link rel="stylesheet" href="app.css">
11 | </head>
12 | 
13 | <body>
14 |     <!-- 🙅🚫🚨 No need to touch anything in this HTML file! 🙅🚫🚨 -->
15 |     <div id="container" class="checkerboard">
16 |         <div id="pinkbox"></div>
17 |     </div>
18 | </body>
19 | 
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Exercise-09 positioning by row and column/Starter/app.css:
--------------------------------------------------------------------------------
 1 | /* 🚨🚫🙅  START OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 2 | .box {
 3 |   border: 1px solid black;
 4 |   background-color: #6a1b9a;
 5 | }
 6 | #container {
 7 |   margin: 0 auto;
 8 |   width: 500px;
 9 |   height: 500px;
10 |   border: 1px solid black;
11 |   background-size: 100px 100px;
12 |   background-image: linear-gradient(to right, grey 1px, transparent 1px),
13 |     linear-gradient(to bottom, grey 1px, transparent 1px);
14 | 
15 |   display: grid;
16 |   grid-template-columns: repeat(5, 1fr);
17 |   grid-template-rows: repeat(5, 1fr);
18 | }
19 | /* 🚨🚫🙅  END OF THE NO TOUCHING ZONE 🙅🚫🚨 */
20 | 
21 | /* ALL YOUR CODE GOES BELOW THIS LINE */
22 | /* ================================== */
23 | 
24 | #pinkbox {
25 |   background-color: #e91e63;
26 |   /* ⬇️⬇️⬇️ STYLE THE PINK BOX HERE ⬇️⬇️⬇️ */
27 | 
28 |   /* ⬆️⬆️⬆️ STYLE THE PINK BOX HERE ⬆️⬆️⬆️ */
29 | }
30 | 


--------------------------------------------------------------------------------
/Exercise-09 positioning by row and column/Starter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 9</title>
 9 | 
10 |     <link rel="stylesheet" href="app.css">
11 | </head>
12 | 
13 | <body>
14 |     <!-- 🙅🚫🚨 No need to touch anything in this HTML file! 🙅🚫🚨 -->
15 |     <div id="container" class="checkerboard">
16 |         <div id="pinkbox"></div>
17 |     </div>
18 | </body>
19 | 
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Exercise-10 grid-column-end and row-end/Solution/app.css:
--------------------------------------------------------------------------------
 1 | /* 🚨🚫🙅  START OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 2 | .box {
 3 |   border: 1px solid black;
 4 |   background-color: #6a1b9a;
 5 | }
 6 | 
 7 | #container {
 8 |   margin: 0 auto;
 9 |   width: 500px;
10 |   height: 500px;
11 |   border: 1px solid black;
12 |   background-size: 100px 100px;
13 |   background-image: linear-gradient(to right, grey 1px, transparent 1px),
14 |     linear-gradient(to bottom, grey 1px, transparent 1px);
15 | 
16 |   display: grid;
17 |   grid-template-columns: repeat(5, 1fr);
18 |   grid-template-rows: repeat(5, 1fr);
19 | }
20 | /* 🚨🚫🙅  END OF THE NO TOUCHING ZONE 🙅🚫🚨 */
21 | 
22 | /* ALL YOUR CODE GOES BELOW THIS LINE */
23 | /* ================================== */
24 | 
25 | #pinkbox {
26 |   background-color: #e91e63;
27 |   /* ⬇️⬇️⬇️ STYLE THE PINK BOX HERE ⬇️⬇️⬇️ */
28 |   grid-row-start: 2;
29 |   grid-row-end: 5;
30 |   grid-column-start: 3;
31 |   grid-column-end: 5;
32 |   /* ⬆️⬆️⬆️ STYLE THE PINK BOX HERE ⬆️⬆️⬆️ */
33 | }
34 | 


--------------------------------------------------------------------------------
/Exercise-10 grid-column-end and row-end/Solution/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 10</title>
 9 | 
10 |     <link rel="stylesheet" href="app.css">
11 | </head>
12 | 
13 | <body>
14 |     <!-- 🙅🚫🚨 No need to touch anything in this HTML file! 🙅🚫🚨 -->
15 |     <div id="container">
16 |         <div id="pinkbox"></div>
17 |     </div>
18 | </body>
19 | 
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Exercise-10 grid-column-end and row-end/Starter/app.css:
--------------------------------------------------------------------------------
 1 | /* 🚨🚫🙅  START OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 2 | .box {
 3 |   border: 1px solid black;
 4 |   background-color: #6a1b9a;
 5 | }
 6 | 
 7 | #container {
 8 |   margin: 0 auto;
 9 |   width: 500px;
10 |   height: 500px;
11 |   border: 1px solid black;
12 |   background-size: 100px 100px;
13 |   background-image: linear-gradient(to right, grey 1px, transparent 1px),
14 |     linear-gradient(to bottom, grey 1px, transparent 1px);
15 | 
16 |   display: grid;
17 |   grid-template-columns: repeat(5, 1fr);
18 |   grid-template-rows: repeat(5, 1fr);
19 | }
20 | /* 🚨🚫🙅  END OF THE NO TOUCHING ZONE 🙅🚫🚨 */
21 | 
22 | /* ALL YOUR CODE GOES BELOW THIS LINE */
23 | /* ================================== */
24 | 
25 | #pinkbox {
26 |   background-color: #e91e63;
27 |   /* ⬇️⬇️⬇️ STYLE THE PINK BOX HERE ⬇️⬇️⬇️ */
28 | 
29 |   /* ⬆️⬆️⬆️ STYLE THE PINK BOX HERE ⬆️⬆️⬆️ */
30 | }
31 | 


--------------------------------------------------------------------------------
/Exercise-10 grid-column-end and row-end/Starter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 10</title>
 9 | 
10 |     <link rel="stylesheet" href="app.css">
11 | </head>
12 | 
13 | <body>
14 |     <!-- 🙅🚫🚨 No need to touch anything in this HTML file! 🙅🚫🚨 -->
15 |     <div id="container">
16 |         <div id="pinkbox"></div>
17 |     </div>
18 | </body>
19 | 
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Exercise-11 grid-row and grid-column/Solution/app.css:
--------------------------------------------------------------------------------
 1 | /* 🚨🚫🙅  START OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 2 | 
 3 | .box {
 4 |   border: 1px solid black;
 5 |   background-color: #6a1b9a;
 6 | }
 7 | 
 8 | #container {
 9 |   margin: 0 auto;
10 |   width: 500px;
11 |   height: 500px;
12 |   border: 1px solid black;
13 |   background-size: 100px 100px;
14 |   background-image: linear-gradient(to right, grey 1px, transparent 1px),
15 |     linear-gradient(to bottom, grey 1px, transparent 1px);
16 | 
17 |   display: grid;
18 |   grid-template-columns: repeat(5, 1fr);
19 |   grid-template-rows: repeat(5, 1fr);
20 | }
21 | /* 🚨🚫🙅  END OF THE NO TOUCHING ZONE 🙅🚫🚨 */
22 | 
23 | /* ALL YOUR CODE GOES BELOW THIS LINE */
24 | /* ================================== */
25 | 
26 | #pinkbox {
27 |   background-color: #e91e63;
28 |   /* ⬇️⬇️⬇️ STYLE THE PINK BOX HERE ⬇️⬇️⬇️ */
29 |   grid-row: 2 / 4;
30 |   grid-column: 1 / 3;
31 |   /* ⬆️⬆️⬆️ STYLE THE PINK BOX HERE ⬆️⬆️⬆️ */
32 | }
33 | 
34 | #purplebox {
35 |   background-color: #9c27b0;
36 |   /* ⬇️⬇️⬇️ STYLE THE PURPLE BOX HERE ⬇️⬇️⬇️ */
37 |   grid-column: 2 / 5;
38 |   grid-row: 4;
39 |   /* ⬆️⬆️⬆️ STYLE THE PURPLE BOX HERE ⬆️⬆️⬆️ */
40 | }
41 | 
42 | #bluebox {
43 |   /* ⬇️⬇️⬇️ STYLE THE BLUE BOX HERE ⬇️⬇️⬇️ */
44 |   background-color: #2196f3;
45 |   grid-column-start: 3;
46 |   grid-row: 1/4;
47 |   /* ⬆️⬆️⬆️ STYLE THE BLUE BOX HERE ⬆️⬆️⬆️ */
48 | }
49 | 


--------------------------------------------------------------------------------
/Exercise-11 grid-row and grid-column/Solution/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 11</title>
 9 | 
10 |     <link rel="stylesheet" href="app.css">
11 | </head>
12 | 
13 | <body>
14 |     <!-- 🙅🚫🚨 No need to touch anything in this HTML file! 🙅🚫🚨 -->
15 |     <div id="container">
16 |         <div id="pinkbox"></div>
17 |         <div id="purplebox"></div>
18 |         <div id="bluebox"></div>
19 |     </div>
20 | </body>
21 | 
22 | </html>
23 | 


--------------------------------------------------------------------------------
/Exercise-11 grid-row and grid-column/Starter/app.css:
--------------------------------------------------------------------------------
 1 | /* 🚨🚫🙅  START OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 2 | .box {
 3 |   border: 1px solid black;
 4 |   background-color: #6a1b9a;
 5 | }
 6 | 
 7 | #container {
 8 |   margin: 0 auto;
 9 |   width: 500px;
10 |   height: 500px;
11 |   border: 1px solid black;
12 |   background-size: 100px 100px;
13 |   background-image: linear-gradient(to right, grey 1px, transparent 1px),
14 |     linear-gradient(to bottom, grey 1px, transparent 1px);
15 | 
16 |   display: grid;
17 |   grid-template-columns: repeat(5, 1fr);
18 |   grid-template-rows: repeat(5, 1fr);
19 | }
20 | /* 🚨🚫🙅  END OF THE NO TOUCHING ZONE 🙅🚫🚨 */
21 | 
22 | /* ALL YOUR CODE GOES BELOW THIS LINE */
23 | /* ================================== */
24 | 
25 | #pinkbox {
26 |   background-color: #e91e63;
27 |   /* ⬇️⬇️⬇️ STYLE THE PINK BOX HERE ⬇️⬇️⬇️ */
28 | 
29 |   /* ⬆️⬆️⬆️ STYLE THE PINK BOX HERE ⬆️⬆️⬆️ */
30 | }
31 | 
32 | #purplebox {
33 |   background-color: #9c27b0;
34 |   /* ⬇️⬇️⬇️ STYLE THE PURPLE BOX HERE ⬇️⬇️⬇️ */
35 | 
36 |   /* ⬆️⬆️⬆️ STYLE THE PURPLE BOX HERE ⬆️⬆️⬆️ */
37 | }
38 | 
39 | #bluebox {
40 |   background-color: #2196f3;
41 |   /* ⬇️⬇️⬇️ STYLE THE BLUE BOX HERE ⬇️⬇️⬇️ */
42 | 
43 |   /* ⬆️⬆️⬆️ STYLE THE BLUE BOX HERE ⬆️⬆️⬆️ */
44 | }
45 | 


--------------------------------------------------------------------------------
/Exercise-11 grid-row and grid-column/Starter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 11</title>
 9 | 
10 |     <link rel="stylesheet" href="app.css">
11 | </head>
12 | 
13 | <body>
14 |     <!-- 🙅🚫🚨 No need to touch anything in this HTML file! 🙅🚫🚨 -->
15 |     <div id="container">
16 |         <div id="pinkbox"></div>
17 |         <div id="purplebox"></div>
18 |         <div id="bluebox"></div>
19 |     </div>
20 | </body>
21 | 
22 | </html>
23 | 


--------------------------------------------------------------------------------
/Exercise-12 span/Solution/app.css:
--------------------------------------------------------------------------------
 1 | /* 🚨🚫🙅  START OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 2 | #container {
 3 |   margin: 0 auto;
 4 |   width: 500px;
 5 |   height: 500px;
 6 |   border: 1px solid black;
 7 |   background-size: 100px 100px;
 8 |   background-image: linear-gradient(to right, grey 1px, transparent 1px),
 9 |     linear-gradient(to bottom, grey 1px, transparent 1px);
10 | 
11 |   display: grid;
12 |   grid-template-columns: repeat(5, 1fr);
13 |   grid-template-rows: repeat(5, 1fr);
14 | }
15 | /* 🚨🚫🙅  END OF THE NO TOUCHING ZONE 🙅🚫🚨 */
16 | 
17 | /* ALL YOUR CODE GOES BELOW THIS LINE */
18 | /* ================================== */
19 | 
20 | #pinkbox {
21 |   background-color: #e91e63;
22 |   /* ⬇️⬇️⬇️ STYLE THE PINK BOX HERE ⬇️⬇️⬇️ */
23 |   grid-row: span 4;
24 |   /* ⬆️⬆️⬆️ STYLE THE PINK BOX HERE ⬆️⬆️⬆️ */
25 | }
26 | #purplebox {
27 |   background-color: #9c27b0;
28 |   /* ⬇️⬇️⬇️ STYLE THE PURPLE BOX HERE ⬇️⬇️⬇️ */
29 |   grid-column: 4 / span 2;
30 |   grid-row: 3 / span 3;
31 |   /* ⬆️⬆️⬆️ STYLE THE PURPLE BOX HERE ⬆️⬆️⬆️ */
32 | }
33 | 


--------------------------------------------------------------------------------
/Exercise-12 span/Solution/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 12 - span</title>
 9 | 
10 |     <link rel="stylesheet" href="app.css">
11 | </head>
12 | 
13 | <body>
14 |     <!-- 🙅🚫🚨 No need to touch anything in this HTML file! 🙅🚫🚨 -->
15 | 
16 |     <div id="container">
17 |         <div id="pinkbox"></div>
18 |         <div id="purplebox"></div>
19 |     </div>
20 | </body>
21 | 
22 | </html>
23 | 


--------------------------------------------------------------------------------
/Exercise-12 span/Starter/app.css:
--------------------------------------------------------------------------------
 1 | /* 🚨🚫🙅  START OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 2 | #container {
 3 |   margin: 0 auto;
 4 |   width: 500px;
 5 |   height: 500px;
 6 |   border: 1px solid black;
 7 |   background-size: 100px 100px;
 8 |   background-image: linear-gradient(to right, grey 1px, transparent 1px),
 9 |     linear-gradient(to bottom, grey 1px, transparent 1px);
10 | 
11 |   display: grid;
12 |   grid-template-columns: repeat(5, 1fr);
13 |   grid-template-rows: repeat(5, 1fr);
14 | }
15 | /* 🚨🚫🙅  END OF THE NO TOUCHING ZONE 🙅🚫🚨 */
16 | 
17 | /* ALL YOUR CODE GOES BELOW THIS LINE */
18 | /* ================================== */
19 | 
20 | #pinkbox {
21 |   background-color: #e91e63;
22 |   /* ⬇️⬇️⬇️ STYLE THE PINK BOX HERE ⬇️⬇️⬇️ */
23 | 
24 |   /* ⬆️⬆️⬆️ STYLE THE PINK BOX HERE ⬆️⬆️⬆️ */
25 | }
26 | #purplebox {
27 |   background-color: #9c27b0;
28 |   /* ⬇️⬇️⬇️ STYLE THE PURPLE BOX HERE ⬇️⬇️⬇️ */
29 | 
30 |   /* ⬆️⬆️⬆️ STYLE THE PURPLE BOX HERE ⬆️⬆️⬆️ */
31 | }
32 | 


--------------------------------------------------------------------------------
/Exercise-12 span/Starter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 12 - span</title>
 9 | 
10 |     <link rel="stylesheet" href="app.css">
11 | </head>
12 | 
13 | <body>
14 |     <!-- 🙅🚫🚨 No need to touch anything in this HTML file! 🙅🚫🚨 -->
15 | 
16 |     <div id="container">
17 |         <div id="pinkbox"></div>
18 |         <div id="purplebox"></div>
19 |     </div>
20 | </body>
21 | 
22 | </html>
23 | 


--------------------------------------------------------------------------------
/Exercise-13 page layout/Solution/app.css:
--------------------------------------------------------------------------------
 1 | /* 🚨🚫🙅  START OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 2 | #container > * {
 3 |   font-size: 2em;
 4 |   display: flex;
 5 |   justify-content: center;
 6 |   align-items: center;
 7 | }
 8 | 
 9 | #container {
10 |   margin: 0 auto;
11 |   width: 500px;
12 |   height: 500px;
13 |   border: 1px solid black;
14 |   background-size: 100px 125px;
15 |   background-image: linear-gradient(to right, grey 1px, transparent 1px),
16 |     linear-gradient(to bottom, grey 1px, transparent 1px);
17 | 
18 |   display: grid;
19 |   grid-template-columns: repeat(5, 1fr);
20 |   grid-template-rows: repeat(4, 1fr);
21 | }
22 | /* 🚨🚫🙅  END OF THE NO TOUCHING ZONE 🙅🚫🚨 */
23 | 
24 | /* ALL YOUR CODE GOES BELOW THIS LINE */
25 | /* ================================== */
26 | 
27 | .header {
28 |   background-color: #f44336bb;
29 |   /* ⬇️⬇️⬇️ STYLE THE HEADER HERE ⬇️⬇️⬇️ */
30 |   grid-column: 1 / span 5;
31 |   /* ⬆️⬆️⬆️ STYLE THE HEADER HERE ⬆️⬆️⬆️ */
32 | }
33 | 
34 | .nav {
35 |   background-color: #e91e63bb;
36 |   /* ⬇️⬇️⬇️ STYLE THE NAV HERE ⬇️⬇️⬇️ */
37 |   grid-row: 2 / span 3;
38 |   /* ⬆️⬆️⬆️ STYLE THE NAV HERE ⬆️⬆️⬆️ */
39 | }
40 | 
41 | .article {
42 |   background-color: #9c27b0bb;
43 |   /* ⬇️⬇️⬇️ STYLE THE ARTICLE HERE ⬇️⬇️⬇️ */
44 |   grid-row: 2/4;
45 |   grid-column: 2/5;
46 |   /* ⬆️⬆️⬆️ STYLE THE ARTICLE HERE ⬆️⬆️⬆️ */
47 | }
48 | 
49 | .ads {
50 |   background-color: #673ab7bb;
51 |   /* ⬇️⬇️⬇️ STYLE THE ADS HERE ⬇️⬇️⬇️ */
52 |   grid-row: 2/4;
53 |   grid-column: 5/6;
54 |   /* ⬆️⬆️⬆️ STYLE THE ADS HERE ⬆️⬆️⬆️ */
55 | }
56 | 
57 | .footer {
58 |   background-color: #2196f3bb;
59 |   /* ⬇️⬇️⬇️ STYLE THE FOOTER HERE ⬇️⬇️⬇️ */
60 |   grid-column: 2 / span 4;
61 |   grid-row: 4;
62 |   /* ⬆️⬆️⬆️ STYLE THE FOOTER HERE ⬆️⬆️⬆️ */
63 | }
64 | 


--------------------------------------------------------------------------------
/Exercise-13 page layout/Solution/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 13</title>
 9 | 
10 |     <link rel="stylesheet" href="app.css">
11 | </head>
12 | 
13 | <body>
14 |     <!-- 🙅🚫🚨 No need to touch anything in this HTML file! 🙅🚫🚨 -->
15 | 
16 |     <div id="container">
17 |         <header class="header">header</header>
18 |         <nav class="nav">nav</nav>
19 |         <main class="article">article</main>
20 |         <div class="ads">ads</div>
21 |         <footer class="footer">footer</footer>
22 |     </div>
23 | </body>
24 | 
25 | </html>
26 | 


--------------------------------------------------------------------------------
/Exercise-13 page layout/Starter/app.css:
--------------------------------------------------------------------------------
 1 | /* 🚨🚫🙅  START OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 2 | #container > * {
 3 |   font-size: 2em;
 4 |   display: flex;
 5 |   justify-content: center;
 6 |   align-items: center;
 7 | }
 8 | 
 9 | #container {
10 |   margin: 0 auto;
11 |   width: 500px;
12 |   height: 500px;
13 |   border: 1px solid black;
14 |   background-size: 100px 125px;
15 |   background-image: linear-gradient(to right, grey 1px, transparent 1px),
16 |     linear-gradient(to bottom, grey 1px, transparent 1px);
17 | 
18 |   display: grid;
19 |   grid-template-columns: repeat(5, 1fr);
20 |   grid-template-rows: repeat(4, 1fr);
21 | }
22 | /* 🚨🚫🙅  END OF THE NO TOUCHING ZONE 🙅🚫🚨 */
23 | 
24 | /* ALL YOUR CODE GOES BELOW THIS LINE */
25 | /* ================================== */
26 | 
27 | .header {
28 |   background-color: #f44336bb;
29 |   /* ⬇️⬇️⬇️ STYLE THE HEADER HERE ⬇️⬇️⬇️ */
30 | 
31 |   /* ⬆️⬆️⬆️ STYLE THE HEADER HERE ⬆️⬆️⬆️ */
32 | }
33 | 
34 | .nav {
35 |   background-color: #e91e63bb;
36 |   /* ⬇️⬇️⬇️ STYLE THE NAV HERE ⬇️⬇️⬇️ */
37 | 
38 |   /* ⬆️⬆️⬆️ STYLE THE NAV HERE ⬆️⬆️⬆️ */
39 | }
40 | 
41 | .article {
42 |   background-color: #9c27b0bb;
43 |   /* ⬇️⬇️⬇️ STYLE THE ARTICLE HERE ⬇️⬇️⬇️ */
44 | 
45 |   /* ⬆️⬆️⬆️ STYLE THE ARTICLE HERE ⬆️⬆️⬆️ */
46 | }
47 | 
48 | .ads {
49 |   background-color: #673ab7bb;
50 |   /* ⬇️⬇️⬇️ STYLE THE ADS HERE ⬇️⬇️⬇️ */
51 | 
52 |   /* ⬆️⬆️⬆️ STYLE THE ADS HERE ⬆️⬆️⬆️ */
53 | }
54 | 
55 | .footer {
56 |   background-color: #2196f3bb;
57 |   /* ⬇️⬇️⬇️ STYLE THE FOOTER HERE ⬇️⬇️⬇️ */
58 | 
59 |   /* ⬆️⬆️⬆️ STYLE THE FOOTER HERE ⬆️⬆️⬆️ */
60 | }
61 | 


--------------------------------------------------------------------------------
/Exercise-13 page layout/Starter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 13</title>
 9 | 
10 |     <link rel="stylesheet" href="app.css">
11 | </head>
12 | 
13 | <body>
14 |     <!-- 🙅🚫🚨 No need to touch anything in this HTML file! 🙅🚫🚨 -->
15 | 
16 |     <div id="container">
17 |         <header class="header">header</header>
18 |         <nav class="nav">nav</nav>
19 |         <main class="article">article</main>
20 |         <div class="ads">ads</div>
21 |         <footer class="footer">footer</footer>
22 |     </div>
23 | </body>
24 | 
25 | </html>
26 | 


--------------------------------------------------------------------------------
/Exercise-14 page layout areas/Solution/app.css:
--------------------------------------------------------------------------------
 1 | /* 🚨🚫🙅  START OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 2 | #container > * {
 3 |   font-size: 2em;
 4 |   display: flex;
 5 |   justify-content: center;
 6 |   align-items: center;
 7 | }
 8 | 
 9 | #container {
10 |   margin: 0 auto;
11 |   width: 500px;
12 |   height: 500px;
13 |   border: 1px solid black;
14 |   background-size: 100px 125px;
15 |   background-image: linear-gradient(to right, grey 1px, transparent 1px),
16 |     linear-gradient(to bottom, grey 1px, transparent 1px);
17 | }
18 | /* 🚨🚫🙅  END OF THE NO TOUCHING ZONE 🙅🚫🚨 */
19 | 
20 | /* ALL YOUR CODE GOES BELOW THIS LINE */
21 | /* ================================== */
22 | 
23 | #container {
24 |   display: grid;
25 |   grid-template-columns: repeat(5, 1fr);
26 |   grid-template-rows: repeat(4, 1fr);
27 |   /* ⬇️⬇️⬇️ STYLE THE GRID CONTAINER HERE ⬇️⬇️⬇️ */
28 |   grid-template-areas:
29 |     "header header header header header"
30 |     "nav article article article ads"
31 |     "nav article article article ads"
32 |     "nav footer footer footer footer";
33 |   /* ⬆️⬆️⬆️ STYLE THE GRID CONTAINER HERE ⬆️⬆️⬆️ */
34 | }
35 | 
36 | .header {
37 |   background-color: #f44336bb;
38 |   /* ⬇️⬇️⬇️ STYLE THE HEADER HERE ⬇️⬇️⬇️ */
39 |   grid-area: header;
40 |   /* ⬆️⬆️⬆️ STYLE THE HEADER HERE ⬆️⬆️⬆️ */
41 | }
42 | .nav {
43 |   background-color: #e91e63bb;
44 |   /* ⬇️⬇️⬇️ STYLE THE NAV HERE ⬇️⬇️⬇️ */
45 |   grid-area: nav;
46 |   /* ⬆️⬆️⬆️ STYLE THE NAV HERE ⬆️⬆️⬆️ */
47 | }
48 | .article {
49 |   background-color: #9c27b0bb;
50 |   /* ⬇️⬇️⬇️ STYLE THE ARTICLE HERE ⬇️⬇️⬇️ */
51 |   grid-area: article;
52 |   /* ⬆️⬆️⬆️ STYLE THE ARTICLE HERE ⬆️⬆️⬆️ */
53 | }
54 | 
55 | .ads {
56 |   background-color: #673ab7bb;
57 |   /* ⬇️⬇️⬇️ STYLE THE ADS HERE ⬇️⬇️⬇️ */
58 |   grid-area: ads;
59 |   /* ⬆️⬆️⬆️ STYLE THE ADS HERE ⬆️⬆️⬆️ */
60 | }
61 | 
62 | .footer {
63 |   background-color: #2196f3bb;
64 |   /* ⬇️⬇️⬇️ STYLE THE FOOTER HERE ⬇️⬇️⬇️ */
65 |   grid-area: footer;
66 |   /* ⬆️⬆️⬆️ STYLE THE FOOTER HERE ⬆️⬆️⬆️ */
67 | }
68 | 


--------------------------------------------------------------------------------
/Exercise-14 page layout areas/Solution/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 14</title>
 9 | 
10 |     <link rel="stylesheet" href="app.css">
11 | </head>
12 | 
13 | <body>
14 |     <!-- 🙅🚫🚨 No need to touch anything in this HTML file! 🙅🚫🚨 -->
15 |     <div id="container">
16 |         <header class="header">header</header>
17 |         <nav class="nav">nav</nav>
18 |         <main class="article">article</main>
19 |         <div class="ads">ads</div>
20 |         <footer class="footer">footer</footer>
21 |     </div>
22 | </body>
23 | 
24 | </html>
25 | 


--------------------------------------------------------------------------------
/Exercise-14 page layout areas/Starter/app.css:
--------------------------------------------------------------------------------
 1 | /* 🚨🚫🙅  START OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 2 | #container > * {
 3 |   font-size: 2em;
 4 |   display: flex;
 5 |   justify-content: center;
 6 |   align-items: center;
 7 | }
 8 | 
 9 | #container {
10 |   margin: 0 auto;
11 |   width: 500px;
12 |   height: 500px;
13 |   border: 1px solid black;
14 |   background-size: 100px 125px;
15 |   background-image: linear-gradient(to right, grey 1px, transparent 1px),
16 |     linear-gradient(to bottom, grey 1px, transparent 1px);
17 | }
18 | /* 🚨🚫🙅  END OF THE NO TOUCHING ZONE 🙅🚫🚨 */
19 | 
20 | /* ALL YOUR CODE GOES BELOW THIS LINE */
21 | /* ================================== */
22 | 
23 | #container {
24 |   display: grid;
25 |   grid-template-columns: repeat(5, 1fr);
26 |   grid-template-rows: repeat(4, 1fr);
27 | 
28 |   /* ⬇️⬇️⬇️ STYLE THE GRID CONTAINER HERE ⬇️⬇️⬇️ */
29 | 
30 |   /* ⬆️⬆️⬆️ STYLE THE GRID CONTAINER HERE ⬆️⬆️⬆️ */
31 | }
32 | 
33 | .header {
34 |   background-color: #f44336bb;
35 |   /* ⬇️⬇️⬇️ STYLE THE HEADER HERE ⬇️⬇️⬇️ */
36 | 
37 |   /* ⬆️⬆️⬆️ STYLE THE HEADER HERE ⬆️⬆️⬆️ */
38 | }
39 | .nav {
40 |   background-color: #e91e63bb;
41 |   /* ⬇️⬇️⬇️ STYLE THE NAV HERE ⬇️⬇️⬇️ */
42 | 
43 |   /* ⬆️⬆️⬆️ STYLE THE NAV HERE ⬆️⬆️⬆️ */
44 | }
45 | .article {
46 |   background-color: #9c27b0bb;
47 |   /* ⬇️⬇️⬇️ STYLE THE ARTICLE HERE ⬇️⬇️⬇️ */
48 | 
49 |   /* ⬆️⬆️⬆️ STYLE THE ARTICLE HERE ⬆️⬆️⬆️ */
50 | }
51 | 
52 | .ads {
53 |   background-color: #673ab7bb;
54 |   /* ⬇️⬇️⬇️ STYLE THE ADS HERE ⬇️⬇️⬇️ */
55 | 
56 |   /* ⬆️⬆️⬆️ STYLE THE ADS HERE ⬆️⬆️⬆️ */
57 | }
58 | 
59 | .footer {
60 |   background-color: #2196f3bb;
61 |   /* ⬇️⬇️⬇️ STYLE THE FOOTER HERE ⬇️⬇️⬇️ */
62 | 
63 |   /* ⬆️⬆️⬆️ STYLE THE FOOTER HERE ⬆️⬆️⬆️ */
64 | }
65 | 


--------------------------------------------------------------------------------
/Exercise-14 page layout areas/Starter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 14</title>
 9 | 
10 |     <link rel="stylesheet" href="app.css">
11 | </head>
12 | 
13 | <body>
14 |     <!-- 🙅🚫🚨 No need to touch anything in this HTML file! 🙅🚫🚨 -->
15 |     <div id="container">
16 |         <header class="header">header</header>
17 |         <nav class="nav">nav</nav>
18 |         <main class="article">article</main>
19 |         <div class="ads">ads</div>
20 |         <footer class="footer">footer</footer>
21 |     </div>
22 | </body>
23 | 
24 | </html>
25 | 


--------------------------------------------------------------------------------
/Exercise-15 grid-auto-rows/Solution/app.css:
--------------------------------------------------------------------------------
 1 | /* 🚨🚫🙅  START OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 2 | 
 3 | body {
 4 |   display: flex;
 5 |   flex-direction: column;
 6 |   align-items: center;
 7 | }
 8 | .box {
 9 |   background-color: #ff5722;
10 |   min-height: 20px;
11 | }
12 | /* 🚨🚫🙅  END OF THE NO TOUCHING ZONE 🙅🚫🚨 */
13 | #container {
14 |   margin: 0 auto;
15 |   width: 500px;
16 |   height: 1000px;
17 | 
18 |   /* Implement the following layout:
19 |   - 3 equally sized columns 
20 |   - Gaps of 10 pixels between each row and column 
21 |   - All Automatically created rows are 100px tall  */
22 | 
23 |   /* ⬇️⬇️⬇️ STYLE THE GRID CONTAINER HERE ⬇️⬇️⬇️ */
24 |   display: grid;
25 |   grid-template-columns: repeat(3, 1fr);
26 |   gap: 10px;
27 |   grid-auto-rows: 100px;
28 |   /* ⬆️⬆️⬆️ STYLE THE GRID CONTAINER HERE ⬆️⬆️⬆️ */
29 | }
30 | 


--------------------------------------------------------------------------------
/Exercise-15 grid-auto-rows/Solution/app.js:
--------------------------------------------------------------------------------
1 | const container1 = document.querySelector("#container");
2 | const button1 = document.querySelector("#button");
3 | 
4 | button1.addEventListener("click", function () {
5 |   const newBox = document.createElement("DIV");
6 |   newBox.classList.add("box");
7 |   container1.appendChild(newBox);
8 | });
9 | 


--------------------------------------------------------------------------------
/Exercise-15 grid-auto-rows/Solution/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 15</title>
 9 | 
10 |     <link rel="stylesheet" href="app.css">
11 | </head>
12 | 
13 | <body>
14 |     <!-- 🙅🚫🚨 No need to touch anything in this HTML file! 🙅🚫🚨 -->
15 | 
16 |     <button id="button">Click To Add A New Box</button>
17 | 
18 |     <div id="container">
19 |         <div class="box"></div>
20 |     </div>
21 | 
22 |     <script src="app.js"></script>
23 | </body>
24 | 
25 | </html>
26 | 


--------------------------------------------------------------------------------
/Exercise-15 grid-auto-rows/Starter/app.css:
--------------------------------------------------------------------------------
 1 | /* 🚨🚫🙅  START OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 2 | body {
 3 |   display: flex;
 4 |   flex-direction: column;
 5 |   align-items: center;
 6 | }
 7 | .box {
 8 |   background-color: #ff5722;
 9 |   min-height: 20px;
10 | }
11 | /* 🚨🚫🙅  END OF THE NO TOUCHING ZONE 🙅🚫🚨 */
12 | 
13 | #container {
14 |   margin: 0 auto;
15 |   width: 500px;
16 |   height: 1000px;
17 | 
18 |   /* Implement the following layout:
19 |   - 3 equally sized columns 
20 |   - Gaps of 10 pixels between each row and column 
21 |   - All Automatically created rows are 100px tall  */
22 | 
23 |   /* ⬇️⬇️⬇️ STYLE THE GRID CONTAINER HERE ⬇️⬇️⬇️ */
24 | 
25 |   /* ⬆️⬆️⬆️ STYLE THE GRID CONTAINER HERE ⬆️⬆️⬆️ */
26 | }
27 | 


--------------------------------------------------------------------------------
/Exercise-15 grid-auto-rows/Starter/app.js:
--------------------------------------------------------------------------------
1 | const container1 = document.querySelector("#container");
2 | const button1 = document.querySelector("#button");
3 | 
4 | button1.addEventListener("click", function () {
5 |   const newBox = document.createElement("DIV");
6 |   newBox.classList.add("box");
7 |   container1.appendChild(newBox);
8 | });
9 | 


--------------------------------------------------------------------------------
/Exercise-15 grid-auto-rows/Starter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 15</title>
 9 | 
10 |     <link rel="stylesheet" href="app.css">
11 | </head>
12 | 
13 | <body>
14 |     <!-- 🙅🚫🚨 No need to touch anything in this HTML file! 🙅🚫🚨 -->
15 | 
16 |     <button id="button">Click To Add A New Box</button>
17 | 
18 |     <div id="container">
19 |         <div class="box"></div>
20 |     </div>
21 | 
22 |     <script src="app.js"></script>
23 | </body>
24 | 
25 | </html>
26 | 


--------------------------------------------------------------------------------
/Exercise-16 grid-auto-flow/Solution/app.css:
--------------------------------------------------------------------------------
 1 | /* 🚨🚫🙅  START OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 2 | body {
 3 |   display: flex;
 4 |   flex-direction: column;
 5 |   align-items: center;
 6 | }
 7 | .box {
 8 |   background-color: #29b6f6;
 9 |   font-size: 1.7em;
10 | }
11 | .wide {
12 |   grid-column: span 2;
13 | }
14 | .tall {
15 |   grid-row: span 2;
16 | }
17 | /* 🚨🚫🙅  END OF THE NO TOUCHING ZONE 🙅🚫🚨 */
18 | 
19 | #container {
20 |   margin: 0 auto;
21 |   width: 500px;
22 |   height: 500px;
23 |   border: 1px solid black;
24 | 
25 |   display: grid;
26 |   grid-template-columns: repeat(5, 1fr);
27 |   grid-template-rows: repeat(5, 1fr);
28 |   gap: 2px;
29 |   /* ⬇️⬇️⬇️ STYLE THE GRID CONTAINER HERE ⬇️⬇️⬇️ */
30 |   grid-auto-flow: column dense;
31 |   /* ⬆️⬆️⬆️ STYLE THE GRID CONTAINER HERE ⬆️⬆️⬆️ */
32 | }
33 | 


--------------------------------------------------------------------------------
/Exercise-16 grid-auto-flow/Solution/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 16</title>
 9 | 
10 |     <link rel="stylesheet" href="app.css">
11 | </head>
12 | 
13 | <body>
14 |     <!-- 🙅🚫🚨 No need to touch anything in this HTML file! 🙅🚫🚨 -->
15 |     <div id="container">
16 |         <div class="box wide ">ONE</div>
17 |         <div class="box tall ">TWO </div>
18 |         <div class="box">THREE</div>
19 |         <div class="box wide">FOUR</div>
20 |         <div class="box wide tall">FIVE</div>
21 |         <div class="box tall">SIX</div>
22 |         <div class="box">SEVEN</div>
23 |         <div class="box wide">EIGHT</div>
24 |     </div>
25 | 
26 | 
27 |     <script src="app.js"></script>
28 | </body>
29 | 
30 | </html>
31 | 


--------------------------------------------------------------------------------
/Exercise-16 grid-auto-flow/Starter/app.css:
--------------------------------------------------------------------------------
 1 | /* 🚨🚫🙅  START OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 2 | body {
 3 |   display: flex;
 4 |   flex-direction: column;
 5 |   align-items: center;
 6 | }
 7 | .box {
 8 |   background-color: #29b6f6;
 9 |   font-size: 1.7em;
10 | }
11 | .wide {
12 |   grid-column: span 2;
13 | }
14 | .tall {
15 |   grid-row: span 2;
16 | }
17 | /* 🚨🚫🙅  END OF THE NO TOUCHING ZONE 🙅🚫🚨 */
18 | 
19 | #container {
20 |   margin: 0 auto;
21 |   width: 500px;
22 |   height: 500px;
23 |   border: 1px solid black;
24 | 
25 |   display: grid;
26 |   grid-template-columns: repeat(5, 1fr);
27 |   grid-template-rows: repeat(5, 1fr);
28 |   gap: 2px;
29 |   /* ⬇️⬇️⬇️ STYLE THE GRID CONTAINER HERE ⬇️⬇️⬇️ */
30 | 
31 |   /* ⬆️⬆️⬆️ STYLE THE GRID CONTAINER HERE ⬆️⬆️⬆️ */
32 | }
33 | 


--------------------------------------------------------------------------------
/Exercise-16 grid-auto-flow/Starter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 16</title>
 9 | 
10 |     <link rel="stylesheet" href="app.css">
11 | </head>
12 | 
13 | <body>
14 |     <!-- 🙅🚫🚨 No need to touch anything in this HTML file! 🙅🚫🚨 -->
15 |     <div id="container">
16 |         <div class="box wide ">ONE</div>
17 |         <div class="box tall ">TWO </div>
18 |         <div class="box">THREE</div>
19 |         <div class="box wide">FOUR</div>
20 |         <div class="box wide tall">FIVE</div>
21 |         <div class="box tall">SIX</div>
22 |         <div class="box">SEVEN</div>
23 |         <div class="box wide">EIGHT</div>
24 |     </div>
25 | 
26 | 
27 |     <script src="app.js"></script>
28 | </body>
29 | 
30 | </html>
31 | 


--------------------------------------------------------------------------------
/Exercise-17 minmax/Solution/app.css:
--------------------------------------------------------------------------------
 1 | /* 🚨🚫🙅  START OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 2 | .box {
 3 |   background-color: #ff7979;
 4 |   min-height: 20px;
 5 | }
 6 | .box.green {
 7 |   background-color: #badc58;
 8 | }
 9 | /* 🚨🚫🙅  END OF THE NO TOUCHING ZONE 🙅🚫🚨 */
10 | 
11 | #container {
12 |   margin: 0 auto;
13 |   width: 80%;
14 |   height: 500px;
15 |   border: 1px solid black;
16 |   /* ⬇️⬇️⬇️ STYLE THE GRID CONTAINER HERE ⬇️⬇️⬇️ */
17 |   display: grid;
18 |   grid-template-columns: 1fr minmax(300px, 1fr) 1fr;
19 |   /* ⬆️⬆️⬆️ STYLE THE GRID CONTAINER HERE ⬆️⬆️⬆️ */
20 | }
21 | 


--------------------------------------------------------------------------------
/Exercise-17 minmax/Solution/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 17</title>
 9 | 
10 |     <link rel="stylesheet" href="app.css">
11 | </head>
12 | 
13 | <body>
14 |     <!-- 🙅🚫🚨 No need to touch anything in this HTML file! 🙅🚫🚨 -->
15 |     <div id="container">
16 |         <div class="box"></div>
17 |         <div class="box green"></div>
18 |         <div class="box"></div>
19 |     </div>
20 | 
21 | 
22 |     <script src="app.js"></script>
23 | </body>
24 | 
25 | </html>
26 | 


--------------------------------------------------------------------------------
/Exercise-17 minmax/Starter/app.css:
--------------------------------------------------------------------------------
 1 | /* 🚨🚫🙅  START OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 2 | .box {
 3 |   background-color: #ff7979;
 4 |   min-height: 20px;
 5 | }
 6 | .box.green {
 7 |   background-color: #badc58;
 8 | }
 9 | /* 🚨🚫🙅  END OF THE NO TOUCHING ZONE 🙅🚫🚨 */
10 | 
11 | #container {
12 |   margin: 0 auto;
13 |   width: 80%;
14 |   height: 500px;
15 |   border: 1px solid black;
16 | 
17 |   /* Implement the following grid layout: 
18 |   - 3 equally sized columns 
19 |   - the middle column has a minimum size of 300px */
20 | 
21 |   /* ⬇️⬇️⬇️ STYLE THE GRID CONTAINER HERE ⬇️⬇️⬇️ */
22 | 
23 |   /* ⬆️⬆️⬆️ STYLE THE GRID CONTAINER HERE ⬆️⬆️⬆️ */
24 | }
25 | 


--------------------------------------------------------------------------------
/Exercise-17 minmax/Starter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 17</title>
 9 | 
10 |     <link rel="stylesheet" href="app.css">
11 | </head>
12 | 
13 | <body>
14 |     <!-- 🙅🚫🚨 No need to touch anything in this HTML file! 🙅🚫🚨 -->
15 |     <div id="container">
16 |         <div class="box"></div>
17 |         <div class="box green"></div>
18 |         <div class="box"></div>
19 |     </div>
20 | 
21 | 
22 |     <script src="app.js"></script>
23 | </body>
24 | 
25 | </html>
26 | 


--------------------------------------------------------------------------------
/Exercise-18 responsive/Solution/app.css:
--------------------------------------------------------------------------------
 1 | /* 🚨🚫🙅  START OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 2 | #container > * {
 3 |   display: flex;
 4 |   font-size: 1.5em;
 5 |   text-align: center;
 6 |   justify-content: center;
 7 |   align-items: center;
 8 |   font-family: sans-serif;
 9 |   font-weight: bold;
10 | }
11 | #container {
12 |   margin: 0 auto;
13 |   width: 80%;
14 |   height: 500px;
15 |   border: 1px solid black;
16 | 
17 |   display: grid;
18 |   grid-template-columns: 1fr 2fr 1fr;
19 |   grid-template-rows: 2fr 1fr;
20 |   grid-template-areas:
21 |     "ad main aside"
22 |     "footer footer footer";
23 |   gap: 8px;
24 | }
25 | 
26 | .main {
27 |   grid-area: main;
28 |   background-color: #1e88e5;
29 | }
30 | 
31 | .ad {
32 |   grid-area: ad;
33 |   background-color: #d81b60;
34 | }
35 | 
36 | .aside {
37 |   grid-area: aside;
38 |   background-color: #8e24aa;
39 | }
40 | 
41 | .footer {
42 |   grid-area: footer;
43 |   background-color: #7cb342;
44 | }
45 | /* 🚨🚫🙅  END OF THE NO TOUCHING ZONE 🙅🚫🚨 */
46 | 
47 | /* Write the styles to adjust the grid at screen sizes below 700px */
48 | /* ⬇️⬇️⬇️ YOUR STYLES GO HERE ⬇️⬇️⬇️ */
49 | @media (max-width: 700px) {
50 |   #container {
51 |     grid-template-areas:
52 |       "main main aside"
53 |       "ad footer footer";
54 |   }
55 | }
56 | /* ⬆️⬆️⬆️ YOUR STYLES GO HERE ⬆️⬆️⬆️ */
57 | 


--------------------------------------------------------------------------------
/Exercise-18 responsive/Solution/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 18</title>
 9 | 
10 |     <link rel="stylesheet" href="app.css">
11 | </head>
12 | 
13 | <body>
14 |     <!-- 🙅🚫🚨 No need to touch anything in this HTML file! 🙅🚫🚨 -->
15 |     <div id="container">
16 |         <div class="ad">AD</div>
17 |         <main class="main">MAIN CONTENT</main>
18 |         <aside class="aside">ASIDE</aside>
19 |         <footer class="footer">FOOTER</footer>
20 |     </div>
21 | 
22 | 
23 |     <script src="app.js"></script>
24 | </body>
25 | 
26 | </html>
27 | 


--------------------------------------------------------------------------------
/Exercise-18 responsive/Starter/app.css:
--------------------------------------------------------------------------------
 1 | /* 🚨🚫🙅  START OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 2 | #container > * {
 3 |   display: flex;
 4 |   font-size: 1.5em;
 5 |   text-align: center;
 6 |   justify-content: center;
 7 |   align-items: center;
 8 |   font-family: sans-serif;
 9 |   font-weight: bold;
10 | }
11 | #container {
12 |   margin: 0 auto;
13 |   width: 80%;
14 |   height: 500px;
15 |   border: 1px solid black;
16 | 
17 |   display: grid;
18 |   grid-template-columns: 1fr 2fr 1fr;
19 |   grid-template-rows: 2fr 1fr;
20 |   grid-template-areas:
21 |     "ad main aside"
22 |     "footer footer footer";
23 |   gap: 8px;
24 | }
25 | 
26 | .main {
27 |   grid-area: main;
28 |   background-color: #1e88e5;
29 | }
30 | 
31 | .ad {
32 |   grid-area: ad;
33 |   background-color: #d81b60;
34 | }
35 | 
36 | .aside {
37 |   grid-area: aside;
38 |   background-color: #8e24aa;
39 | }
40 | 
41 | .footer {
42 |   grid-area: footer;
43 |   background-color: #7cb342;
44 | }
45 | /* 🚨🚫🙅  END OF THE NO TOUCHING ZONE 🙅🚫🚨 */
46 | 
47 | /* Write the styles to adjust the grid at screen sizes below 700px */
48 | /* ⬇️⬇️⬇️ YOUR STYLES GO HERE ⬇️⬇️⬇️ */
49 | 
50 | /* ⬆️⬆️⬆️ YOUR STYLES GO HERE ⬆️⬆️⬆️ */
51 | 


--------------------------------------------------------------------------------
/Exercise-18 responsive/Starter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 18</title>
 9 | 
10 |     <link rel="stylesheet" href="app.css">
11 | </head>
12 | 
13 | <body>
14 |     <!-- 🙅🚫🚨 No need to touch anything in this HTML file! 🙅🚫🚨 -->
15 | 
16 |     <div id="container">
17 |         <div class="ad">AD</div>
18 |         <main class="main">MAIN CONTENT</main>
19 |         <aside class="aside">ASIDE</aside>
20 |         <footer class="footer">FOOTER</footer>
21 |     </div>
22 | 
23 | 
24 |     <script src="app.js"></script>
25 | </body>
26 | 
27 | </html>
28 | 


--------------------------------------------------------------------------------
/Exercise-19 - autofit/Solution/app.css:
--------------------------------------------------------------------------------
 1 | /* 🚨🚫🙅  START OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 2 | .card {
 3 |   background-color: #eceff1;
 4 |   border-radius: 10px;
 5 |   padding: 20px;
 6 |   box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
 7 | }
 8 | /* 🚨🚫🙅  END OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 9 | 
10 | #container {
11 |   margin: 0 auto;
12 |   width: 80%;
13 |   display: grid;
14 |   gap: 30px;
15 | 
16 |   /* Implement the following layout 
17 |   - a grid of columns that are at least 250px wide, with as many as possible in a single row
18 | 
19 | 
20 |   /* ⬇️⬇️⬇️ STYLE THE GRID CONTAINER HERE ⬇️⬇️⬇️ */
21 |   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
22 |   /* ⬆️⬆️⬆️ STYLE THE GRID CONTAINER HERE ⬆️⬆️⬆️ */
23 | }
24 | 


--------------------------------------------------------------------------------
/Exercise-19 - autofit/Solution/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 19</title>
 9 | 
10 |     <link rel="stylesheet" href="app.css">
11 | </head>
12 | 
13 | <body>
14 |     <!-- 🙅🚫🚨 No need to touch anything in this HTML file! 🙅🚫🚨 -->
15 |     <div id="container">
16 |         <div class="card">
17 |             <h2>Some Blog Post</h2>
18 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis unde consectetur modi
19 |                 impedit. Sapiente dignissimos, molestiae eius odio debitis, iste excepturi exercitationem unde quaerat
20 |                 ipsa
21 |                 asperiores sequi, cupiditate iusto sed.</p>
22 |         </div>
23 |         <div class="card">
24 |             <h2>Some Blog Post</h2>
25 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis unde consectetur modi
26 |                 impedit. Sapiente dignissimos, molestiae eius odio debitis, iste excepturi exercitationem unde quaerat
27 |                 ipsa
28 |                 asperiores sequi, cupiditate iusto sed.</p>
29 |         </div>
30 |         <div class="card">
31 |             <h2>Some Blog Post</h2>
32 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis unde consectetur modi
33 |                 impedit. Sapiente dignissimos, molestiae eius odio debitis, iste excepturi exercitationem unde quaerat
34 |                 ipsa
35 |                 asperiores sequi, cupiditate iusto sed.</p>
36 |         </div>
37 |         <div class="card">
38 |             <h2>Some Blog Post</h2>
39 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis unde consectetur modi
40 |                 impedit. Sapiente dignissimos, molestiae eius odio debitis, iste excepturi exercitationem unde quaerat
41 |                 ipsa
42 |                 asperiores sequi, cupiditate iusto sed.</p>
43 |         </div>
44 |         <div class="card">
45 |             <h2>Some Blog Post</h2>
46 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis unde consectetur modi
47 |                 impedit. Sapiente dignissimos, molestiae eius odio debitis, iste excepturi exercitationem unde quaerat
48 |                 ipsa
49 |                 asperiores sequi, cupiditate iusto sed.</p>
50 |         </div>
51 |         <div class="card">
52 |             <h2>Some Blog Post</h2>
53 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis unde consectetur modi
54 |                 impedit. Sapiente dignissimos, molestiae eius odio debitis, iste excepturi exercitationem unde quaerat
55 |                 ipsa
56 |                 asperiores sequi, cupiditate iusto sed.</p>
57 |         </div>
58 |         <div class="card">
59 |             <h2>Some Blog Post</h2>
60 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis unde consectetur modi
61 |                 impedit. Sapiente dignissimos, molestiae eius odio debitis, iste excepturi exercitationem unde quaerat
62 |                 ipsa
63 |                 asperiores sequi, cupiditate iusto sed.</p>
64 |         </div>
65 |         <div class="card">
66 |             <h2>Some Blog Post</h2>
67 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis unde consectetur modi
68 |                 impedit. Sapiente dignissimos, molestiae eius odio debitis, iste excepturi exercitationem unde quaerat
69 |                 ipsa
70 |                 asperiores sequi, cupiditate iusto sed.</p>
71 |         </div>
72 |         <div class="card">
73 |             <h2>Some Blog Post</h2>
74 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis unde consectetur modi
75 |                 impedit. Sapiente dignissimos, molestiae eius odio debitis, iste excepturi exercitationem unde quaerat
76 |                 ipsa
77 |                 asperiores sequi, cupiditate iusto sed.</p>
78 |         </div>
79 |         <div class="card">
80 |             <h2>Some Blog Post</h2>
81 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis unde consectetur modi
82 |                 impedit. Sapiente dignissimos, molestiae eius odio debitis, iste excepturi exercitationem unde quaerat
83 |                 ipsa
84 |                 asperiores sequi, cupiditate iusto sed.</p>
85 |         </div>
86 | 
87 |     </div>
88 | 
89 | 
90 |     <script src="app.js"></script>
91 | </body>
92 | 
93 | </html>
94 | 


--------------------------------------------------------------------------------
/Exercise-19 - autofit/Starter/app.css:
--------------------------------------------------------------------------------
 1 | /* 🚨🚫🙅  START OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 2 | .card {
 3 |   background-color: #eceff1;
 4 |   border-radius: 10px;
 5 |   padding: 20px;
 6 |   box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
 7 | }
 8 | /* 🚨🚫🙅  END OF THE NO TOUCHING ZONE 🙅🚫🚨 */
 9 | 
10 | #container {
11 |   margin: 0 auto;
12 |   width: 80%;
13 |   display: grid;
14 |   gap: 30px;
15 | 
16 |   /* Implement the following layout 
17 |   - a grid of columns that are at least 250px wide, with as many as possible in a single row
18 | 
19 | 
20 |   /* ⬇️⬇️⬇️ STYLE THE GRID CONTAINER HERE ⬇️⬇️⬇️ */
21 | 
22 |   /* ⬆️⬆️⬆️ STYLE THE GRID CONTAINER HERE ⬆️⬆️⬆️ */
23 | }
24 | 


--------------------------------------------------------------------------------
/Exercise-19 - autofit/Starter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Exercise 19</title>
 9 | 
10 |     <link rel="stylesheet" href="app.css">
11 | </head>
12 | 
13 | <body>
14 |     <!-- 🙅🚫🚨 No need to touch anything in this HTML file! 🙅🚫🚨 -->
15 |     <div id="container">
16 |         <div class="card">
17 |             <h2>Some Blog Post</h2>
18 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis unde consectetur modi
19 |                 impedit. Sapiente dignissimos, molestiae eius odio debitis, iste excepturi exercitationem unde quaerat
20 |                 ipsa
21 |                 asperiores sequi, cupiditate iusto sed.</p>
22 |         </div>
23 |         <div class="card">
24 |             <h2>Some Blog Post</h2>
25 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis unde consectetur modi
26 |                 impedit. Sapiente dignissimos, molestiae eius odio debitis, iste excepturi exercitationem unde quaerat
27 |                 ipsa
28 |                 asperiores sequi, cupiditate iusto sed.</p>
29 |         </div>
30 |         <div class="card">
31 |             <h2>Some Blog Post</h2>
32 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis unde consectetur modi
33 |                 impedit. Sapiente dignissimos, molestiae eius odio debitis, iste excepturi exercitationem unde quaerat
34 |                 ipsa
35 |                 asperiores sequi, cupiditate iusto sed.</p>
36 |         </div>
37 |         <div class="card">
38 |             <h2>Some Blog Post</h2>
39 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis unde consectetur modi
40 |                 impedit. Sapiente dignissimos, molestiae eius odio debitis, iste excepturi exercitationem unde quaerat
41 |                 ipsa
42 |                 asperiores sequi, cupiditate iusto sed.</p>
43 |         </div>
44 |         <div class="card">
45 |             <h2>Some Blog Post</h2>
46 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis unde consectetur modi
47 |                 impedit. Sapiente dignissimos, molestiae eius odio debitis, iste excepturi exercitationem unde quaerat
48 |                 ipsa
49 |                 asperiores sequi, cupiditate iusto sed.</p>
50 |         </div>
51 |         <div class="card">
52 |             <h2>Some Blog Post</h2>
53 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis unde consectetur modi
54 |                 impedit. Sapiente dignissimos, molestiae eius odio debitis, iste excepturi exercitationem unde quaerat
55 |                 ipsa
56 |                 asperiores sequi, cupiditate iusto sed.</p>
57 |         </div>
58 |         <div class="card">
59 |             <h2>Some Blog Post</h2>
60 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis unde consectetur modi
61 |                 impedit. Sapiente dignissimos, molestiae eius odio debitis, iste excepturi exercitationem unde quaerat
62 |                 ipsa
63 |                 asperiores sequi, cupiditate iusto sed.</p>
64 |         </div>
65 |         <div class="card">
66 |             <h2>Some Blog Post</h2>
67 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis unde consectetur modi
68 |                 impedit. Sapiente dignissimos, molestiae eius odio debitis, iste excepturi exercitationem unde quaerat
69 |                 ipsa
70 |                 asperiores sequi, cupiditate iusto sed.</p>
71 |         </div>
72 |         <div class="card">
73 |             <h2>Some Blog Post</h2>
74 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis unde consectetur modi
75 |                 impedit. Sapiente dignissimos, molestiae eius odio debitis, iste excepturi exercitationem unde quaerat
76 |                 ipsa
77 |                 asperiores sequi, cupiditate iusto sed.</p>
78 |         </div>
79 |         <div class="card">
80 |             <h2>Some Blog Post</h2>
81 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis unde consectetur modi
82 |                 impedit. Sapiente dignissimos, molestiae eius odio debitis, iste excepturi exercitationem unde quaerat
83 |                 ipsa
84 |                 asperiores sequi, cupiditate iusto sed.</p>
85 |         </div>
86 | 
87 |     </div>
88 | 
89 | 
90 |     <script src="app.js"></script>
91 | </body>
92 | 
93 | </html>
94 | 


--------------------------------------------------------------------------------