vid 34 done

Author: dboyliao

README.md

@@ -60,10 +60,23 @@ Use starter code to start each section, and **final code to compare it with your
 
 **A:** No, for the simple reason that I want this repository to contain the _exact_ same code that is shown in the videos. However, please feel free to add an issue if you found one.
 
+# Notes
+
+## Box Model
+- content: the content of the html element, text, images, etc
+- padding: transparent area around the content, inside the border
+- border: goes around the padding and the content
+- margin: transparent area around the border, outside the border
+  - we normally use margin to **create space between elements**
+  - collapsing margin: when two margins touch each other, they collapse into one margin
+    - the margin will be the size of the larger margin
+    - this is a feature of CSS
+    - it does not happen with padding or border
 
 # Useful Links
 - https://jonas.io/resources/
 - W3C page for pseudo classes: https://www.w3schools.com/css/css_pseudo_classes.asp
     - the n-th child pseudo class: it selects the elements that are the n-th child of their parent and that match a certain type of selector
       - ex: 'artical p:first-child' does not select the first p element in the article element, but the p element that is the first child of a article element
     - it's perfect to apply to the child elements that are of the same type
+- https://www.youtube.com/watch?v=uFXweZepi1o&list=PLqivELodHt3iF_Spzdz_6LsOSPOyfDx-R

starter/03-CSS-Fundamentals/challange/style.css

@@ -46,6 +46,7 @@ body {
 .add-cart {
   background-color: black;
   border: none;
+  margin-bottom: 1px;
   color: white;
   font-size: 20px;
   cursor: pointer;

starter/03-CSS-Fundamentals/index.html

@@ -28,7 +28,7 @@ <h1>📘 The Code Magazine</h1>
     </header>
 
     <article>
-      <header>
+      <header class="post-header">
         <h2>The Basic Language of the Web: HTML</h2>
 
         <img

starter/03-CSS-Fundamentals/style.css

@@ -1,6 +1,8 @@
 * {
   /* universal selector; no inheritance involved */
   /* border-bottom: 10px solid red; */
+  margin: 0;
+  padding: 0s;
 }
 
 body {
@@ -9,6 +11,35 @@ body {
   border-top: 10px solid #1098ad;
 }
 
+nav {
+  font-size: 18px;
+}
+
+article {
+  margin-bottom: 60px;
+}
+
+.main-header {
+  background-color: #f7f7f7;
+  padding: 20px 40px;
+  margin-bottom: 60px;
+}
+
+.post-header {
+  margin-bottom: 40px;
+}
+
+aside {
+  background-color: #f7f7f7;
+  /* shorthand property */
+  /* border: 5px solid #1098ad; */
+  border-top: 5px solid #1098ad;
+  border-bottom: 5px solid #1098ad;
+  /* padding-top: 50px;
+  padding-bottom: 50px; */
+  padding: 50px 0;
+}
+
 h1,
 h2,
 h3 {
@@ -23,10 +54,13 @@ h1 {
 
 h2 {
   font-size: 40px;
+  margin-bottom: 30px;
 }
 
 h3 {
   font-size: 30px;
+  margin-bottom: 20px;
+  margin-top: 30px;
 }
 
 h4 {
@@ -38,10 +72,22 @@ h4 {
 p {
   font-size: 22px;
   line-height: 1.5;
+  margin-bottom: 15px;
+}
+
+ol,
+ul {
+  margin-left: 50px;
+  margin-bottom: 20px;
 }
 
 li {
   font-size: 20px;
+  margin-bottom: 10px;
+}
+
+li:last-child {
+  margin-bottom: 0;
 }
 
 /* footer p {
@@ -70,18 +116,6 @@ li {
   list-style: none;
 }
 
-.main-header {
-  background-color: #f7f7f7;
-}
-
-aside {
-  background-color: #f7f7f7;
-  /* shorthand property */
-  /* border: 5px solid #1098ad; */
-  border-top: 5px solid #1098ad;
-  border-bottom: 5px solid #1098ad;
-}
-
 /* li:first-child {
   font-weight: bold;
 }
@@ -111,7 +145,3 @@ a:active {
   font-style: italic;
 }
 /* LVHA */
-
-nav {
-  font-size: 18px;
-}