coditech · mehioitani · Aug 23, 2023 · Aug 23, 2023 · Aug 23, 2023 · Aug 23, 2023
diff --git a/week-1/1-parent-child/index.html b/week-1/1-parent-child/index.html
@@ -27,6 +27,7 @@
           <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,14 @@
         <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.
           </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" alt="Gif" /> Ok!
           </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,32 @@
 
   <body>
     <div class="site-wrapper">
-      <div class="site-header">
+      <header role="banner" class="site-header">
         <div class="site-header__title">Messages</div>
-      </div>
-      <div class="messages">
-        <div class="message">
+      </header>
+      <main role="main" div 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 datetime="2018-03-25T19:25" class="message__time">Mar 25, 2018 19:25</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 datetime="2018-03-25T19:35" class="message__time">Mar 25, 2018 19:35</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 datetime="2018-03-25T19:38" class="message__time">Mar 25, 2018 19:38</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="../4-links-scripts/css/missing-styles.css" />
   </head>
 
   <body>
@@ -33,5 +34,6 @@
         </div>
       </div>
     </div>
+    <script src="../4-links-scripts/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/styles.css b/week-1/6-css-properties/styles.css
@@ -1 +1,23 @@
 /* Add your CSS code below */
+
+.link {
+  text-decoration: none;
+  color: red;
+  font-weight: 700;
+}
+
+.message__time {
+  font-size: 0.9rem;
+}
+
+.message--unread {
+  border-left: 3px solid blue;
+}
+
+.message:first-child {
+  opacity: 0.5;
+}
+
+.message {
+  line-height: 2em;
+}
diff --git a/week-1/7-css-box/styles.css b/week-1/7-css-box/styles.css
@@ -1,6 +1,17 @@
 /* Try different box model properties below */
 .pages__page {
-  border: 1px solid #4491db;
   border-radius: 4px;
-  background: #fff;
+  padding: 3px;
+  margin: 3px;
+  border: 1px solid #000;
+}
+
+.country {
+  padding: 10px;
+  margin: 3px;
+}
+
+.pages__showing {
+  padding: 0px;
+  margin-right: 5px;
 }
diff --git a/week-1/8-advanced-selectors/styles.css b/week-1/8-advanced-selectors/styles.css
@@ -1 +1,15 @@
 /* Try different box model properties below */
+.site-header > p {
+  color: white;
+  line-height: 1.8em;
+  margin-bottom: 0;
+}
+
+.site-footer p {
+  text-align: center;
+  font-size: 12px;
+}
+
+.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,13 @@
 /* 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/10-media-queries/readme.md b/week-2/10-media-queries/readme.md
@@ -2,7 +2,7 @@
 
 Media queries help us change how the webpage looks depending on the size of the screen. The list of countries is very long in this example. Use media queries to show the list in multiple columns when the screen is wide enough.
 
-In this exercise, the following CSS will put the countries into two columns:
+In this exercise, the following CSS will put the countries into two columns::
 
 ```css
 .countries {

diff --git a/week-2/11-flexbox/flexbox.css b/week-2/11-flexbox/flexbox.css
@@ -1 +1,11 @@
 /* Add your own CSS code below */
+
+.countries--first {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.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
@@ -7,3 +7,21 @@
 }
 
 /* Add your own CSS code below */
+
+.countries--first {
+  justify-content: end;
+}
+
+.countries--second {
+  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/13-align-items/flexbox.css b/week-2/13-align-items/flexbox.css
@@ -2,3 +2,23 @@
   display: flex;
 }
 /* Add your own CSS code below */
+
+.countries--first {
+  flex-direction: row;
+  align-items: center;
+}
+
+.countries--second {
+  flex-direction: row-reverse;
+  align-items: end;
+}
+
+.countries--third {
+  flex-direction: column;
+  align-items: end;
+}
+
+.countries--fourth {
+  flex-direction: column-reverse;
+  align-items: center;
+}
diff --git a/week-2/14-order/flexbox.css b/week-2/14-order/flexbox.css
@@ -3,3 +3,48 @@
 }
 
 /* Add your own CSS code below */
+
+.countries--first .country--brazil {
+  order: 5;
+}
+
+.countries--first .country--croatia {
+  order: 1;
+}
+
+.countries--first .country--ethiopia {
+  order: 2;
+}
+
+.countries--first .country--laos {
+  order: 3;
+}
+
+.countries--first .country--uganda {
+  order: 4;
+}
+
+.countries--second .country--brazil {
+  order: 4;
+}
+
+.countries--second .country--croatia {
+  order: 1;
+}
+
+.countries--second .country--ethiopia {
+  order: 2;
+}
+
+.countries--second .country--laos {
+  order: 3;
+}
+
+.countries--second .country--uganda {
+  order: 5;
+}
+
+.countries--third {
+  flex-direction: row-reverse;
+  justify-content: start;
+}
diff --git a/week-2/15-align-self/flexbox.css b/week-2/15-align-self/flexbox.css
@@ -3,3 +3,40 @@
 }
 
 /* Add your own CSS code below */
+
+.countries--first .country--ethiopia {
+  align-self: end;
+}
+
+.countries--second {
+  align-items: center;
+}
+
+.countries--second .country--ethiopia {
+  align-self: end;
+}
+
+.countries--third {
+  align-items: start;
+}
+
+.countries--third :nth-child(2) {
+  align-self: end;
+}
+
+.countries--third :nth-child(3) {
+  align-self: end;
+}
+
+.countries--third :nth-child(4) {
+  align-self: end;
+}
+
+.countries--fourth {
+  flex-direction: column;
+  align-items: start;
+}
+
+.countries--fourth .country--uganda {
+  align-self: center;
+}
diff --git a/week-2/16-more-flexbox/flexbox.css b/week-2/16-more-flexbox/flexbox.css
@@ -3,3 +3,48 @@
 }
 
 /* Add your own CSS code below */
+
+.countries--first {
+  justify-content: end;
+  align-items: end;
+}
+
+.countries--second {
+  flex-direction: row-reverse;
+  justify-content: center;
+  align-items: end;
+}
+
+.countries--third {
+  justify-content: center;
+  align-items: start;
+}
+
+.countries--third .country--brazil {
+  align-self: end;
+}
+
+.countries--fourth {
+  flex-direction: column;
+  align-items: end;
+  justify-content: center;
+}
+
+.countries--fourth :nth-child(3),
+.countries--fourth :nth-child(4) {
+  align-self: center;
+}
+
+.countries--fifth {
+  flex-direction: column-reverse;
+  align-items: end;
+  justify-content: space-around;
+}
+
+.countries--fifth .country--laos {
+  order: 1;
+}
+
+.countries--fifth .country--uganda {
+  align-self: center;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,6 +27,7 @@ @@
               <p class="message__content">
                 I can meet on Tuesday and Wednesday after 4.
               </p>
+              <span class="message__time">7:15pm</span>
             </div>
           </div>
         </div>
@@ Expand Down @@