TheOdinProject · Sebatiantorres · Apr 6, 2025 · Apr 6, 2025 · Apr 6, 2025 · Apr 8, 2025
diff --git a/foundations/cascade/01-cascade-fix/solution/solution.css b/foundations/cascade/01-cascade-fix/solution/solution.css
@@ -1,103 +1,76 @@
-body{
-  font-family:Arial, Helvetica, sans-serif;
+body {
+  font-family: Arial, Helvetica, sans-serif;
 }
 
-.para,
-.small-para {
-  color: hsl(0, 0%, 0%);
-  font-weight: 800;
-}
 
-.para {
-  font-size: 22px;
-}
-
-.button {
-  background-color: rgb(255, 255, 255);
-  color: rgb(0, 0, 0);
-  font-size: 20px;
-}
+/*
+  SOLUTION 1: WE CHANGE THE SELECTORS TO GROUPING SELECTORS  
 
-div.text {
-  color: rgb(0, 0, 0);
-  font-weight: 100;
-  font-size: 22px;
+*/
+body p.para{
+  color: hsl(0, 0%, 0%);
+  font-weight: 800;
 }
+/*
+  SOLUTION 2: WE CHANGE SPECIFICITY OF THE SELECTORS AND ADD OTHER INSTANCE OF THE CLASS
 
-/* SOLUTION */
-
-/* 
-  For the following rule, we removed it from its original position in the file:
-
-  .small-para {
-    font-size: 14px;
-    font-weight: 800;
-  } 
-
-  Then we placed it after the .para selector, taking advantage of the rule order since both selectors have the same specificity. 
-
-  Another solution would be keeping it in its original place and just chaining selectors, giving this rule a higher specificity:
-
-  p.small-para {
-    font-size: 14px;
-    font-weight: 800;
-  }
 */
-
-.small-para {
+.para.small-para {
   font-size: 14px;
   font-weight: 800;
 }
 
-/* 
-  For the following rule we removed the original .confirm selector:
-
-  .confirm {
-    background: green;
-    color: white;
-    font-weight: bold;
-  } 
-
-  Then we used an ID selector instead, since it has a higher specificity than the .button selector.
-
-  Other solutions would be to simply move the .confirm rule below the .button rule, or to use the .button.confirm selector without moving it:
-
-  .button.confirm {
-    background: green;
-    color: white;
-    font-weight: bold;
-  }
+/*
+  SOLUTION 3: WE CHANGE THE SELECTORS AND ADD MORE SPECIFICITY
+  WITH A PARENT SELECTOR AND THE CHILD SELECTOR AND CLASS
 */
 
-#confirm-button {
+body p.para {
+  font-size: 22px;
+}
+
+  /*
+      SOLUTION 4: WE CHANGE THE SELECTORS AND 
+      ADD THE SELECTOR ID, SELECTOR TAG AND CLASS 
+  */
+#confirm-button.button.confirm {
   background: green;
   color: white;
   font-weight: bold;
+} 
+/*
+  SOLUTION 5: WE CHANGE THE SELECTORS AND
+  JUST ADD THE SELECTOR TAG TO MAKE THIS STYLES TO THE TWO BUTTONS
+
+*/
+button  {
+  background-color: rgb(255, 255, 255);
+  color: rgb(0, 0, 0);
+  font-size: 20px;
 }
 
-/*
-  For the following rule we first removed it from its original position in the file: 
 
-  .child {
-    color: rgb(0, 0, 0);
-    font-weight: 800;
-    font-size: 14px;
-  }
+/*
+  SOLUTION 6: CHANGE THE SELECTORS AND
+  ADD THE SPECIFICITY OF THE SELECTORS
+  WITH A TAG SELECTOR AND CLASS SELECTOR IN THIS CASE A DIV THAT HAVE THE CLASS text
 
-  Then we added another selector to create a descendant combinator. If we only created a descendant combinator, the specificity would be tied with the
-  div.text selector and it would come down to rule order, and if we only moved it, the div.text selector would still have a higher specificity.
 
-  Another solution would be to keep the rule where it was and just replace the div selector with the .text selector:
-
-  .text .child {
-    color: rgb(0, 0, 0);
-    font-weight: 800;
-    font-size: 14px;
-  }
 */
-
-div .child {
+div.text{
   color: rgb(0, 0, 0);
   font-weight: 800;
   font-size: 14px;
 }
+
+/*
+  SOLUTION 7: WE CHANGE THE SELECTORS AND 
+  ADD SELECTOR  PARENT TAG AND CHILD SELECTOR TAG AND SAME CHILD ORDER CLASS
+
+*/
+div div.text.child {
+  color: rgb(0, 0, 0);
+  font-size: 22px;
+  font-weight: 100;
+}
+
diff --git a/foundations/cascade/01-cascade-fix/solution/solution.html b/foundations/cascade/01-cascade-fix/solution/solution.html
@@ -1,16 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
-
   <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Fix the Cascade</title>
-    <link rel="stylesheet" href="solution.css">
+    <link rel="stylesheet" href="style.css">
   </head>
   <body>
     <p class="para">I'm just a paragraph with extra bold text!</p>
-    <p class="para small-para">I'm a smaller paragraph, also with  extra bold text!</p>
+    <p class="para small-para">I'm a smaller paragraph, also with extra bold text!</p>
 
     <button id="confirm-button" class="button confirm">Confirm</button>
     <button id="cancel-button" class="button cancel">Cancel</button>
@@ -20,4 +19,4 @@
       <div class="text child">I'm a smaller child div with extra bold text.</div>
     </div>
   </body>
-</html>
+</html>
diff --git a/foundations/flex/01-flex-center/solution/solution.css b/foundations/flex/01-flex-center/solution/solution.css
@@ -3,6 +3,10 @@
   border: 4px solid midnightblue;
   width: 400px;
   height: 300px;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
 }
 
 .box {
@@ -14,16 +18,4 @@
   height: 80px;
 }
 
-/* SOLUTION */
-
-/* disclaimer: duplicating the `.container` selector here isn't best practice.
-In your solution you probably put it right inside the existing `.container`,
-which _is_ the best practice. 
-
-We separated it out here to make it extra clear what has changed. */
 
-.container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
diff --git a/foundations/flex/01-flex-center/solution/solution.png b/foundations/flex/01-flex-center/solution/solution.png
diff --git a/foundations/flex/02-flex-header/solution/solution.css b/foundations/flex/02-flex-header/solution/solution.css
@@ -1,11 +1,47 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
 .header  {
   font-family: monospace;
   background: papayawhip;
 }
+.header {
+  display: flex;
+  margin: 10px;
+  flex-basis: 100%;
+
+}
+.left-links {
+  display: flex;
+  flex: 1;
+  flex-basis: auto;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 0 10px;
+
+}
 
+.right-links {
+  display: flex;
+  flex: 1 1 auto;
+  justify-content: flex-end;
+  align-self: center;
+  padding: 0 10px;
+}
 .logo {
+  width: 180px;
+  margin: 18px;
+  display: flex;
+
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
   font-size: 48px;
   font-weight: 900;
+
   color: tomato;
   background: white;
   padding: 4px 32px;
@@ -14,6 +50,8 @@
 ul {
   /* this removes the dots on the list items*/
   list-style-type: none;
+  display: flex;
+  gap: 10px;
 }
 
 a {
@@ -23,19 +61,3 @@ a {
   /* this removes the line under the links */
   text-decoration: none;
 }
-
-/* SOLUTION */
-
-.header {
-  padding: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-ul {
-  display: flex;
-  margin: 0;
-  padding: 0;
-  gap: 8px;
-}
diff --git a/foundations/flex/02-flex-header/solution/solution.png b/foundations/flex/02-flex-header/solution/solution.png
diff --git a/foundations/flex/03-flex-header-2/solution/solution.css b/foundations/flex/03-flex-header-2/solution/solution.css
@@ -12,14 +12,34 @@ body {
   background: white;
   border-bottom: 1px solid #ddd;
   box-shadow: 0 0 8px rgba(0,0,0,.1);
+  width: 100%;
+  display: flex;
+
+
+}
+.left {
+  display: flex;
+  align-items: center;
+  justify-items: flex-start;
+  padding: 10px;
+  flex: 1;
+}
+
+.right {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-left: auto;
+  padding: 10px;
 }
 
 .profile-image {
   background: rebeccapurple;
   box-shadow: inset 2px 2px 4px rgba(0,0,0,.5);
   border-radius: 50%;
   width: 48px;
-  height:  48px;
+  height: 48px;
+  margin: 0 10px;
 }
 
 .logo {
@@ -35,6 +55,7 @@ button {
   background: rebeccapurple;
   color: white;
   padding: 8px 24px;
+
 }
 
 a {
@@ -44,26 +65,11 @@ a {
 }
 
 ul {
-  list-style-type: none;
-}
-
-/* SOLUTION */
-
-.header {
   display: flex;
-  justify-content: space-between;
-  padding: 8px;
+  list-style-type: none;
 }
 
-ul {
-  display: flex;
-  margin: 0;
-  padding: 0;
-  gap: 16px;
+li {
+  margin: 0 10px;
 }
 
-.left, .right {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
diff --git a/foundations/flex/03-flex-header-2/solution/solution.png b/foundations/flex/03-flex-header-2/solution/solution.png