diff --git a/README.md b/README.md
index 12dda11..084e2d5 100644
--- a/README.md
+++ b/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.
diff --git a/flex/flex-center/solution/solution.css b/flex/flex-center/solution/solution.css
index a9ab40e..1df86d4 100644
--- a/flex/flex-center/solution/solution.css
+++ b/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;
}
\ No newline at end of file
diff --git a/flex/flex-header-2/solution/solution.css b/flex/flex-header-2/solution/solution.css
index 02ea781..54183b7 100644
--- a/flex/flex-header-2/solution/solution.css
+++ b/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;
-}
-
+}
\ No newline at end of file
diff --git a/flex/flex-header/solution/solution.css b/flex/flex-header/solution/solution.css
index 3d7c662..884e862 100644
--- a/flex/flex-header/solution/solution.css
+++ b/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;
}
\ No newline at end of file
diff --git a/flex/flex-information/solution/solution.css b/flex/flex-information/solution/solution.css
index b44d453..69c3cb1 100644
--- a/flex/flex-information/solution/solution.css
+++ b/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;
}
\ No newline at end of file
diff --git a/flex/flex-information/style.css b/flex/flex-information/style.css
index 6f484d1..e4e1b98 100644
--- a/flex/flex-information/style.css
+++ b/flex/flex-information/style.css
@@ -12,7 +12,6 @@ img {
font-weight: 900;
}
-
/* do not edit this footer */
.footer {
position: fixed;
diff --git a/flex/flex-layout/solution/solution.css b/flex/flex-layout/solution/solution.css
index 71f6b7e..4969e83 100644
--- a/flex/flex-layout/solution/solution.css
+++ b/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;
diff --git a/flex/flex-modal/solution/solution.css b/flex/flex-modal/solution/solution.css
index 83a6021..d60d5ef 100644
--- a/flex/flex-modal/solution/solution.css
+++ b/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;
-}
\ No newline at end of file
+}
diff --git a/margin-and-padding/margin-and-padding-1/solution/solution.css b/margin-and-padding/margin-and-padding-1/solution/solution.css
new file mode 100644
index 0000000..ca28db0
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/margin-and-padding/margin-and-padding-1/solution/solution.html b/margin-and-padding/margin-and-padding-1/solution/solution.html
new file mode 100644
index 0000000..b747164
--- /dev/null
+++ b/margin-and-padding/margin-and-padding-1/solution/solution.html
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+ Margin and Padding exercise
+
+
+
+
+ DIV ONE
+
+
+ DIV TWO
+
+
+ DIV THREE
+
+
\ No newline at end of file
diff --git a/margin-and-padding/margin-and-padding-2/solution/solution.css b/margin-and-padding/margin-and-padding-2/solution/solution.css
new file mode 100644
index 0000000..b29f188
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/margin-and-padding/margin-and-padding-2/solution/solution.html b/margin-and-padding/margin-and-padding-2/solution/solution.html
new file mode 100644
index 0000000..6a79930
--- /dev/null
+++ b/margin-and-padding/margin-and-padding-2/solution/solution.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+ Margin and Padding exercise 2
+
+
+
+
+
I'm a card
+
I have content inside me..lorem ipsum blah blah blah. Here's some stuff you need to read.