move solutions around

README.md

@@ -10,8 +10,10 @@ These exercises should be done when instructed during the course of the curricul
 2. Go to an exercise directory and open the HTML file in your browser. You can either open the file directly, or use something like VSCode's live-server.
 3. View the README, and edit the CSS file to make the output in your browser look like the images provided.
 4. Each README has a "Self Check" list. Use this to make sure you haven't missed any important details in your implementation.
+5. Don't check the solutions until you're done!
 
 ## Some hints
+- The official solutions put all changes at the _end_ of the CSS file, which may duplicate some selectors (i.e. there might be a `body {}` in the given CSS, and another `body {}` in the solution). When you are working on the exercise it is best practice to add your CSS to existing selectors instead of duplicating them at the end of the file. We're sacrificing this best practice in our official solutions to make it extra clear to you what things we changed to solve the exercise.
 - Unless listed in the self-check section, do not worry about getting the exact pixel value for things like margin, padding and font-size. These exercises are intended to test your knowledge of CSS, not your ability to guess that a screenshot is using `font: sans-serif bold 16px`, or that the margin is _exactly_ `42px`.
 - You may need to add some elements to your HTML to get things into the right spot. (for the first few exercises we make it explicit when this needs to happen)
 - You may need to add more selectors to your CSS file. The first few exercises have almost everything already done for you, but as you progress you'll find that you need to add more and more to get the correct result.

flex/flex-center/solution/solution.css

@@ -3,11 +3,6 @@
   border: 4px solid midnightblue;
   width: 400px;
   height: 300px;
-
-  /* look at this! */
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
 
 .box {
@@ -17,4 +12,18 @@
   border: 6px solid maroon;
   width: 80px;
   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;
 }

flex/flex-header-2/solution/solution.css

@@ -12,10 +12,6 @@ body {
   background: white;
   border-bottom: 1px solid #ddd;
   box-shadow: 0 0 8px rgba(0,0,0,.1);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px;
 }
 
 .profile-image {
@@ -49,6 +45,18 @@ a {
 
 ul {
   list-style-type: none;
+}
+
+/* SOLUTION */
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px;
+}
+
+ul {
   display: flex;
   margin: 0;
   padding: 0;
@@ -59,5 +67,4 @@ ul {
   display: flex;
   align-items: center;
   gap: 16px;
-}
+}
-

flex/flex-header/solution/solution.css

@@ -1,10 +1,6 @@
 .header  {
   font-family: monospace;
   background: papayawhip;
-  padding: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
 }
 
 .logo {
@@ -18,11 +14,6 @@
 ul {
   /* this removes the dots on the list items*/
   list-style-type: none;
-
-  display: flex;
-  margin: 0;
-  padding: 0;
-  gap: 8px;
 }
 
 a {
@@ -31,4 +22,20 @@ a {
   padding: 8px;
   /* 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;
 }

flex/flex-information/solution/solution.css

@@ -1,6 +1,5 @@
 body {
   font-family: 'Courier New', Courier, monospace;
-  text-align: center;
 }
 
 img {
@@ -11,21 +10,8 @@ img {
 .title {
   font-size: 36px;
   font-weight: 900;
-  margin-bottom: 32px;
 }
 
-.container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 52px;
-}
-
-.info {
-  max-width: 200px;
-}
-
-
 /* do not edit this footer */
 .footer {
   position: fixed;
@@ -37,4 +23,25 @@ img {
   align-items: center;;
   justify-content: center;
   background: #eee;
+}
+
+/* SOLUTION */
+
+body {
+  text-align: center;
+}
+
+.title {
+  margin-bottom: 32px;
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 52px;
+}
+
+.info {
+  max-width: 200px;
 }

flex/flex-information/style.css

@@ -12,7 +12,6 @@ img {
   font-weight: 900;
 }
 
-
 /* do not edit this footer */
 .footer {
   position: fixed;

flex/flex-layout/solution/solution.css

@@ -5,9 +5,6 @@ body {
   margin: 0;
   overflow: hidden;
   font-family: Roboto, sans-serif;
-
-  display: flex;
-  flex-direction: column;
 }
 
 img {
@@ -19,8 +16,6 @@ button {
   border: none;
   border-radius: 8px;
   background: #eee;
-
-  padding: 8px 16px;
 }
 
 input {
@@ -31,6 +26,17 @@ input {
   margin-bottom: 16px;
 }
 
+/* SOLUTION */
+
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+button {
+  padding: 8px 16px;
+}
+
 .content {
   flex: 1;
   display: flex;

flex/flex-modal/solution/solution.css

@@ -9,7 +9,7 @@ body {
   margin: 0;
   background: #aaa;
   color: #333;
-  /* I'll give you this one for free lol */
+  /* I'll give you this one for free */
   display: flex;
   align-items: center;
   justify-content: center;
@@ -20,9 +20,6 @@ body {
   width: 480px;
   border-radius: 10px;
   box-shadow: 2px 4px 16px rgba(0,0,0,.2);
-  display: flex;
-  gap: 16px;
-  padding: 16px;
 }
 
 .icon {
@@ -36,7 +33,6 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-shrink: 0;
 }
 
 .close-button {
@@ -69,6 +65,19 @@ button.cancel {
   color: royalblue;
 }
 
+/* SOLUTION: */
+
+.modal {
+  display: flex;
+  gap: 16px;
+  padding: 16px;
+}
+
+.icon {
+  /* this keeps the icon from getting smashed by the text */
+  flex-shrink: 0;
+}
+
 .header {
   display: flex;
   align-items: center;
@@ -80,4 +89,4 @@ button.cancel {
 
 .text {
   margin-bottom: 16px;
-}
+}

margin-and-padding/margin-and-padding-1/solution/solution.css

@@ -0,0 +1,28 @@
+body {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.one {
+  background: pink;
+  border: 3px solid blue;
+  /* CHANGE ME */
+  padding: 32px;
+  margin: 12px;
+}
+
+.two {
+  background: lightblue;
+  border: 3px solid purple;
+  /* CHANGE ME */
+  margin-bottom: 48px;
+}
+
+.three {
+  background: peachpuff;
+  border: 3px solid brown;
+  width: 200px;
+  /* CHANGE ME */
+  padding: 32px;
+  margin-left: auto;
+}

margin-and-padding/margin-and-padding-1/solution/solution.html

@@ -0,0 +1,21 @@
+<!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>Margin and Padding exercise</title>
+  <link rel="stylesheet" href="solution.css">
+</head>
+<body>
+  <div class="one">
+    DIV ONE
+  </div>
+  <div class="two">
+    DIV TWO
+  </div>
+  <div class="three">
+    DIV THREE
+  </div 
+</body>
+</html>

margin-and-padding/margin-and-padding-2/solution/solution.css

@@ -0,0 +1,62 @@
+body {
+  background: #eee;
+  font-family: sans-serif;
+}
+
+.card {
+  width: 400px;
+  background: #fff;
+  margin: 16px auto;
+}
+
+.title {
+  background: #e3f4ff;
+}
+
+.content {
+  background: #e3f4ff;
+}
+
+.button {
+  background: #e3f4ff;
+}
+
+button {
+  background: white;
+  border: 1px solid #eee;
+}
+
+/* SOLUTION */
+
+/* disclaimer: duplicating the selectors here isn't best practice.
+In your solution you probably put it right inside the existing selectors,
+which _is_ the best practice.
+
+We separated it out here to make it extra clear what has changed. */
+
+.card {
+  padding: 8px;
+}
+
+.title {
+  margin-top: 0;
+  margin-bottom: 8px;
+  font-size: 16px;
+  padding: 8px;
+}
+
+.content {
+  margin-bottom: 8px;
+  padding: 16px 8px;
+}
+
+.button {
+  text-align: center;
+  padding: 8px;
+}
+
+button {
+  display: block;
+  margin: 0 auto;
+  padding: 8px 24px;
+}

margin-and-padding/margin-and-padding-2/solution/solution.html

@@ -0,0 +1,17 @@
+<!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>Margin and Padding exercise 2</title>
+  <link rel="stylesheet" href="solution.css">
+</head>
+<body>
+  <div class="card">
+    <h1 class="title">I'm a card</h1>
+    <div class="content">I have content inside me..lorem ipsum blah blah blah. Here's some stuff you need to read.</div>
+    <div class="button">and a <button>BIG BUTTON</button></div>
+  </div
+</body>
+</html>