IBT-learning · wambugubilha · May 11, 2024 · May 12, 2024 · May 12, 2024 · May 12, 2024
diff --git a/1-html-css/css-grid-challenge/index.html b/1-html-css/css-grid-challenge/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>CSS Grid Challenge</title>
+        <link rel="stylesheet" href="style.css" />
+    </head>
+    <body>
+        <div id="wrapper">
+            <header id="header">Page Header</header>
+            <aside id="left">Left sidebar</aside>
+            <article id="main">Main contents/body of the page</article>
+            <aside id="right">Right sidebar</aside>
+            <footer id="footer">Page Footer</footer>
+        </div>
+    </body>
+</html>
diff --git a/1-html-css/css-grid-challenge/style.css b/1-html-css/css-grid-challenge/style.css
@@ -0,0 +1,42 @@
+#wrapper {
+    display: grid;
+    font-size: 2em;
+    gap: 1rem;
+    grid-template-columns: 15rem 2fr 1fr;
+    grid-template-rows: 1fr 4fr 1fr;
+    grid-template-areas: 
+    "header header header"
+    "left main right"
+    "footer footer footer";
+}
+
+#header {
+grid-area: header;
+}
+
+#left {
+grid-area: left;
+}
+
+#main {
+grid-area: main;
+}
+
+#right {
+grid-area: right;
+}
+
+#footer {
+grid-area: footer;
+}
+
+/* DO NOT CHANGE ANYTHING BELOW THIS LINE  */
+#wrapper > * {
+    background-color: #ddd;
+    min-height: 15vh;
+    padding: 0.5em;
+}
+
+article {
+    height: 85vh;
+}
diff --git a/1-html-css/flexbox/index.html b/1-html-css/flexbox/index.html
@@ -1,27 +1,95 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
     <head>
         <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Flexbox Lesson</title>
-        <link rel="stylesheet" href="style.css" />
+        <link href="style.css" rel="stylesheet" type="text/css" />
+        <title>Flexbox Challenge</title>
     </head>
+
     <body>
-        <div id="wrapper">
-            <div class="flex-parent">
-                <div class="box" id="one">1</div>
-                <div class="box" id="two">2</div>
-                <div class="box" id="three">3</div>
-                <div class="box" id="four">4</div>
-                <div class="box" id="five">5</div>
-                <div class="box" id="six">6</div>
-                <div class="box" id="seven">7</div>
-                <div class="box" id="eight">8</div>
-            </div>
-            <div class="flex-parent">
-                <div class="box" id="one">1</div>
-                <div class="box" id="two">2</div>
-            </div>
+        <!-- DO NOT CHANGE ANYTHING IN THIS FILE -->
+        <h1>CSS Flexbox</h1>
+
+        <h3>Challenge 1</h3>
+        <p>Horizontally list these bubbles using Flexbox</p>
+        <div class="challenge-1">
+            <div class="blue bubble"></div>
+            <div class="red bubble"></div>
+            <div class="green bubble"></div>
+        </div>
+
+        <h3>Challenge 2</h3>
+        <p>
+            Horizontally align these bubbles to the right and backwards (green,
+            red, blue)
+        </p>
+        <div class="challenge-2">
+            <div class="blue bubble"></div>
+            <div class="red bubble"></div>
+            <div class="green bubble"></div>
+        </div>
+
+        <h3>Challenge 3</h3>
+        <p>
+            Horizontally align these bubbles to the right and NOT backwards
+            (blue, red, green)
+        </p>
+        <div class="challenge-3">
+            <div class="blue bubble"></div>
+            <div class="red bubble"></div>
+            <div class="green bubble"></div>
+        </div>
+
+        <h3>Challenge 4</h3>
+        <p>Horizontally align these bubbles and space them out evenly</p>
+        <div class="challenge-4">
+            <div class="blue bubble"></div>
+            <div class="red bubble"></div>
+            <div class="green bubble"></div>
+        </div>
+
+        <h3>Challenge 5</h3>
+        <p>
+            Horizontally align these bubbles, center them together (not spaced),
+            and add a 20px gap
+        </p>
+        <div class="challenge-5">
+            <div class="blue bubble"></div>
+            <div class="red bubble"></div>
+            <div class="green bubble"></div>
+        </div>
+
+        <h3>Challenge 6</h3>
+        <p>
+            Center the text inside each bubble. (Align the text both vertically
+            and horizontally)
+        </p>
+        <div class="challenge-6">
+            <div class="blue bubble">Blue</div>
+            <div class="red bubble">Red</div>
+            <div class="green bubble">Green</div>
+        </div>
+
+        <h3>Challenge 7</h3>
+        <p>
+            Horizontally align these bubbles, and let the red one stretch out to
+            fill the screen
+        </p>
+        <div class="challenge-7">
+            <div class="blue bubble"></div>
+            <div class="red bubble"></div>
+            <div class="green bubble"></div>
+        </div>
+
+        <h3>Challenge 8</h3>
+        <p>
+            Vertically align these bubbles, center them, and move the red bubble
+            to the end
+        </p>
+        <div class="challenge-8">
+            <div class="blue bubble"></div>
+            <div class="red bubble"></div>
+            <div class="green bubble"></div>
         </div>
     </body>
-</html>
+</html>
diff --git a/1-html-css/flexbox/style.css b/1-html-css/flexbox/style.css
@@ -1,64 +1,85 @@
-#wrapper {
+
+
+.challenge-1 {
     display: flex;
-    flex-wrap: wrap;
+    flex-direction: row;
 }
 
-.flex-parent {
-    /* style properties */
-    background-color: lightblue;
-    height: 40vh;
-    border: 10px solid navy;
+.challenge-2 {
+    display: flex;
+    flex-direction: row-reverse;
 
-    /* flexbox properties */
+}
+
+.challenge-3 {
     display: flex;
     flex-direction: row;
-    flex-wrap: wrap;
-
-    /* justify-content: space-evenly; */
-    align-items: center;
-    /* align-content: space-between; */
+    justify-content: flex-end;
+
+}
 
-    /* row-gap: 1em; */
-    /* column-gap: 1em; */
-    gap: 1em 3em;
+.challenge-4 {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
 }
 
-.box {
-    /* style properties */
-    height: 100px;
-    width: 100px;
-    background-color: orchid;
-    border: 2px solid navy;
-    border-radius: 10%;
-    font-size: 3em;
-    color: white;
+.challenge-5 {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+}
 
-    /* flex properties */
+/* 
+Tip: This is called the "child selector". 
+It selects all .bubble elements that are direct
+children of .challenge-6 elements. 
+*/
+.challenge-6 .bubble {
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
-#one {
-    font-size: 1em;
-    flex-shrink: 3;
-    align-self: flex-end;
+.challenge-7 {
+    display: flex;
+    flex-direction: row;
+}
+
+
+.challenge-7 .red {
+    flex-grow: 1;
+}
+
+.challenge-8 {
+display: flex;
+flex-direction: column;
+align-items: center;
 }
 
-#two {
-    order: 3;
-    flex-grow: 2;
+.challenge-8 .red {
+margin-left: auto;
+
 }
 
-#four {
-    order: 1;
-    flex-grow: 2;
+/* DO NOT CHANGE ANYTHING BELOW HERE */
+
+.bubble {
+    height: 5em;
+    width: 5em;
+    color: white;
+    border-radius: 50%;
+    border: 0.1em solid black;
 }
 
-#six {
-    order: -1;
+.red {
+    background-color: red;
 }
 
-#eight {
-    align-self: flex-start;
+.blue {
+    background-color: blue;
 }
+
+.green {
+    background-color: green;
+}
diff --git a/code/README.md b/code/README.md
@@ -0,0 +1,30 @@
+# Bilha
+
+#### where I live now: Nairobi, Kenya
+#### where i'm from: Nyeri, Kenya
+
+> A link to a song I like: [One Love by Bob Marley](https://youtu.be/vdB-8eLEW8g)
+
+#### my top three hobbies:
+
+ 1.Cooking 
+
+ 2.dancing
+
+ 3.travelling
+
+ #### If every job had the same pay, hours, and education requirements, I would be:
+
+ - a farmer
+ - a content creator
+ - an entrepreneur
+
+#### A photo of someone who you think is cool
+
+![Her Excellency Margaret Kenyatta](/code/image/Her%20Excellency%20Margaret%20Kenyatta.jpeg)
+
+
+
+
+
+
diff --git a/1-html-css/basics/assignment-1.md → code/basics/assignment-1.md b/1-html-css/basics/assignment-1.md → code/basics/assignment-1.md
diff --git a/1-html-css/basics/css-basics.css → code/basics/css-basics.css b/1-html-css/basics/css-basics.css → code/basics/css-basics.css
diff --git a/1-html-css/basics/html-basic-tags.html → code/basics/html-basic-tags.html b/1-html-css/basics/html-basic-tags.html → code/basics/html-basic-tags.html
diff --git a/1-html-css/colors-and-sizes/index.html → code/colors-and-sizes/index.html b/1-html-css/colors-and-sizes/index.html → code/colors-and-sizes/index.html
diff --git a/1-html-css/colors-and-sizes/style.css → code/colors-and-sizes/style.css b/1-html-css/colors-and-sizes/style.css → code/colors-and-sizes/style.css
diff --git a/...css/combining-grid-and-flexbox/index.html → code/combining-grid-and-flexbox/index.html b/...css/combining-grid-and-flexbox/index.html → code/combining-grid-and-flexbox/index.html
diff --git a/...-css/combining-grid-and-flexbox/style.css → code/combining-grid-and-flexbox/style.css b/...-css/combining-grid-and-flexbox/style.css → code/combining-grid-and-flexbox/style.css