CodeYourFuture · SammyOdu4 · Mar 28, 2020 · Mar 28, 2020 · Mar 31, 2020 · Mar 31, 2020
diff --git a/html-css-project b/html-css-project
diff --git a/week-1/1-parent-child/index.html b/week-1/1-parent-child/index.html
@@ -20,13 +20,14 @@
           <p class="message__content">
             Who is available to meet this week to work on our group project?
           </p>
-          <span class="message__time">6:48pm</span>
+          <span class="message__time">6:45pm</span>
         </div>
         <div class="message">
           <div class="message__author">Habiba</div>
           <p class="message__content">
             I can meet on Tuesday and Wednesday after 4.
           </p>
+          <span class="message_time">7:15pm</span>>
         </div>
       </div>
     </div>

diff --git a/week-1/2-html-attributes/index.html b/week-1/2-html-attributes/index.html
@@ -23,14 +23,15 @@
         <div class="message">
           <div class="message__author">Luke</div>
           <p class="message__content">
-            Let's meet at the iCafe in Merchant City. https://goo.gl/maps/aza4h9nUBhn
+            Let's meet at the <a href="https://goo.gl/maps/aza4h9nUBhn">iCafe</a> in Merchant City.
+            https://goo.gl/maps/aza4h9nUBhn
           </p>
           <span class="message__time">7:35pm</span>
         </div>
         <div class="message">
           <div class="message__author">Won</div>
           <p class="message__content">
-            Ok! https://media.giphy.com/media/l41K4KlVE8dgozf8I/giphy.gif
+            <img src="https://media.giphy.com/media/l41K4KlVE8dgozf8I/giphy.gif" />
           </p>
           <span class="message__time">7:38pm</span>
         </div>

diff --git a/week-1/3-semantic-html/index.html b/week-1/3-semantic-html/index.html
@@ -12,30 +12,30 @@
 
   <body>
     <div class="site-wrapper">
-      <div class="site-header">
+      <header class="site-header">
         <div class="site-header__title">Messages</div>
-      </div>
-      <div class="messages">
-        <div class="message">
+      </header>
+      <main role="main" class="messages">
+        <article class="message">
           <div class="message__author">Won</div>
           <p class="message__content">Where should we meet later?</p>
-          <span class="message__time">Mar 25, 2018 7:25pm</span>
-        </div>
-        <div class="message">
+          <time class="message__time" datetime="2018-03-25 19:25:00.000">Mar 25, 2018 7:25pm</time>
+        </article>
+        <article class="message">
           <div class="message__author">Luke</div>
           <p class="message__content">
             Let's meet at the iCafe in Merchant City. https://goo.gl/maps/aza4h9nUBhn
           </p>
-          <span class="message__time">Mar 25, 2018 7:35pm</span>
-        </div>
-        <div class="message">
+          <time class="message__time" datetime="2018-03-25 19:35:00.000">Mar 25, 2018 7:35pm</time>
+        </article>
+        <article class="message">
           <div class="message__author">Won</div>
           <p class="message__content">
             Ok! https://media.giphy.com/media/l41K4KlVE8dgozf8I/giphy.gif
           </p>
-          <span class="message__time">Mar 25, 2018 7:38pm</span>
-        </div>
-      </div>
+          <time class="message__time" datetime="2018-03-25 19:38:00.000">Mar 25, 2018 7:38pm</time>
+        </article>
+      </main>
       <div id="result" class="result"></div>
     </div>
     <script defer src="/js/3-result.js"></script>

diff --git a/week-1/4-links-scripts/index.html b/week-1/4-links-scripts/index.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <title>4. Adding Links and Scripts - HTML, CSS and Git Exercises</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="css/missing-styles.css" />
   </head>
 
   <body>
@@ -33,5 +34,6 @@
         </div>
       </div>
     </div>
+    <script src="js/convertUrls.js"></script>
   </body>
 </html>
diff --git a/week-1/5-css-selectors/message-backgrounds.css b/week-1/5-css-selectors/message-backgrounds.css
@@ -1 +1,12 @@
 /* Add your CSS code below */
+#first-message {
+  background-color: red;
+}
+
+article {
+  background-color: cadetblue;
+}
+
+.message--latest {
+  background-color: yellow;
+}
diff --git a/week-1/6-css-properties/index.html b/week-1/6-css-properties/index.html
@@ -19,7 +19,7 @@
         <div class="message message--old">
           <div class="message__author">Won</div>
           <p class="message__content">
-            Where should we meet tomorrrow?
+            Where should we meet tomorrow?
           </p>
           <time class="message__time">Yesterday, 7:25pm</time>
         </div>

diff --git a/week-1/6-css-properties/styles.css b/week-1/6-css-properties/styles.css
@@ -1 +1,20 @@
 /* Add your CSS code below */
+a {
+  color: red;
+  font-weight: bold;
+  text-decoration: none;
+}
+
+.message__time {
+  font-size: 0.9rem;
+}
+
+.message--unread {
+  border-left: 5px solid blue;
+}
+.message--old {
+  opacity: 40%;
+}
+.message {
+  line-height: 1.9em;
+}
diff --git a/week-1/7-css-box/styles.css b/week-1/7-css-box/styles.css
@@ -1,6 +1,14 @@
 /* Try different box model properties below */
+.country {
+  padding: 15px;
+}
+
 .pages__page {
   border: 1px solid #4491db;
   border-radius: 4px;
   background: #fff;
 }
+
+* {
+  border: 1px solid rgb(255, 208, 0);
+}
diff --git a/week-1/8-advanced-selectors/styles.css b/week-1/8-advanced-selectors/styles.css
@@ -1 +1,16 @@
 /* Try different box model properties below */
+.site-wrapper {
+  margin-bottom: 20px;
+}
+.site-header {
+  color: yellow;
+}
+
+.site-footer {
+  font-size: 12px;
+  text-align: center;
+}
+
+.message:last-child {
+  box-shadow: 4px 4px 0 #dba944;
+}
diff --git a/week-2/10-media-queries/columns.css b/week-2/10-media-queries/columns.css
@@ -1 +1,12 @@
 /* Add your own CSS code below */
+@media screen and (min-width: 768px) {
+  .countries {
+    columns: 2;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .countries {
+    columns: 3;
+  }
+}
diff --git a/week-2/11-flexbox/flexbox.css b/week-2/11-flexbox/flexbox.css
@@ -1 +1,13 @@
 /* Add your own CSS code below */
+.container--first {
+  display: flex;
+  flex-direction: row-reverse;
+}
+.countries--second {
+  display: flex;
+  flex-direction: column;
+}
+.countries--third {
+  display: flex;
+  flex-direction: column-reverse;
+}
diff --git a/week-2/12-justify-content/flexbox.css b/week-2/12-justify-content/flexbox.css
@@ -1,9 +1,28 @@
 .countries {
   display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
 .countries--second .country {
   padding: 0.5em;
 }
 
 /* Add your own CSS code below */
+
+.countries--first {
+  flex-direction: row;
+  justify-content: end;
+}
+.countries--second {
+  flex-direction: row;
+  justify-content: space-around;
+}
+.countries--third {
+  flex-direction: column;
+  justify-content: end;
+}
+.countries--fourth {
+  flex-direction: column-reverse;
+  justify-content: space-around;
+}
diff --git a/week-2/12-justify-content/readme.md b/week-2/12-justify-content/readme.md
@@ -3,7 +3,7 @@
 With flexbox, the `justify-content` property can be used to control how extra space is used. In this exercise, you'll apply a different `justify-content` property to each list. Follow the steps below to complete this exercise.
 
 1. Look at the First list of countries. Then look at the solution displayed to the side. Find the differences between the two lists.
-2. Use `justify-content` and `flex-direction` to make the list of countries on the left look like the ones on the right.
+2. Use `justify-content` and `flex-direction` to make the list of countries on the left look like the ones on the right.r
 
 _Hint: You can review how `justify-content` works in [this guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox)._
 

diff --git a/week-2/13-align-items/flexbox.css b/week-2/13-align-items/flexbox.css
@@ -2,3 +2,19 @@
   display: flex;
 }
 /* Add your own CSS code below */
+.countries--first {
+  align-items: center;
+  flex-direction: row;
+}
+.countries--second {
+  align-items: flex-end;
+  flex-direction: row-reverse;
+}
+.countries--third {
+  align-items: flex-end;
+  flex-direction: column;
+}
+.countries--fourth {
+  align-items: stretch;
+  flex-direction: column-reverse;
+}
diff --git a/week-2/14-order/flexbox.css b/week-2/14-order/flexbox.css
@@ -3,3 +3,27 @@
 }
 
 /* Add your own CSS code below */
+.countries--first :nth-child(1) {
+  order: 1;
+}
+.countries--second :nth-child(1) {
+  order: 1;
+}
+.countries--second :nth-child(5) {
+  order: 2;
+}
+.countries--third :nth-child(1) {
+  order: 4;
+}
+.countries--third :nth-child(2) {
+  order: 3;
+}
+.countries--third :nth-child(3) {
+  order: 2;
+}
+.countries--third :nth-child(4) {
+  order: 1;
+}
+.countries--third :nth-child(5) {
+  order: 0;
+}
diff --git a/week-2/15-align-self/flexbox.css b/week-2/15-align-self/flexbox.css
@@ -3,3 +3,23 @@
 }
 
 /* Add your own CSS code below */
+.country--brazil {
+  align-self: stretch;
+  align-items: flex-start;
+}
+.country--croatia {
+  align-self: flex-start;
+  align-items: flex-end;
+}
+.country--ethiopia {
+  align-self: flex-end;
+  align-items: center;
+}
+.country--laos {
+  align-self: center;
+  align-items: stretch;
+}
+.country--uganda {
+  align-self: baseline;
+  align-items: start;
+}
diff --git a/week-2/16-more-flexbox/flexbox.css b/week-2/16-more-flexbox/flexbox.css
@@ -3,3 +3,46 @@
 }
 
 /* Add your own CSS code below */
+.countries--first {
+  align-items: flex-end;
+  justify-content: flex-end;
+}
+
+.countries--second {
+  align-items: flex-end;
+  flex-direction: row-reverse;
+  justify-content: center;
+}
+
+.countries--third {
+  align-items: flex-start;
+  justify-content: center;
+}
+.countries--third :first-child {
+  align-self: flex-end;
+}
+
+.countries--fourth {
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+}
+.countries--fourth .country--ethiopia {
+  align-self: center;
+}
+.countries--fourth .country--laos {
+  align-self: center;
+}
+
+.countries--fifth {
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: flex-end;
+}
+.countries--fifth .country--laos {
+  order: 5;
+}
+.countries--fifth .country--uganda {
+  order: 4;
+  align-self: center;
+}
diff --git a/week-2/17-nav-menu/styles.css b/week-2/17-nav-menu/styles.css
@@ -1 +1,30 @@
 /* Write your media queries and flexbox CSS below */
+
+@media screen and (min-width: 480px) {
+  .site-header__nav {
+    display: flex;
+    align-items: row;
+  }
+}
+
+@media screen and (min-width: 480px) {
+  .side-header {
+    display: flex;
+    align-items: row;
+    justify-content: flex-start;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .site-header {
+    display: flex;
+    align-items: row;
+    justify-content: center;
+  }
+  .site-header :last-child {
+    justify-self: right;
+  }
+  .site-header :first-child {
+    justify-self: left;
+  }
+}
diff --git a/week-2/18-git-merge/styles.css b/week-2/18-git-merge/styles.css
@@ -1,6 +1,6 @@
 /* Add your own CSS code below */
 .link {
-  color: #4491db;
+  color: orangered;
   font-weight: 700;
   text-decoration: none;
 }