vid 39 done

Author: dboyliao

README.md

@@ -72,6 +72,20 @@ Use starter code to start each section, and **final code to compare it with your
     - the margin will be the size of the larger margin
     - this is a feature of CSS
     - it does not happen with padding or border
+- There are two kind of elements in the box model: block and inline
+  - block elements: elements that always start on a new line and take up the full width available
+    - ex: div, h1, p, form, etc
+    - by default, block elements have a width of 100%
+  - inline elements: elements that do not start on a new line and only take up as much width as necessary
+    - ex: span, a, img, etc
+    - width and height properties have no effect on inline elements
+    - padding, margin, and border properties can be applied to inline elements (only horizontally)
+    - `display: block;` can make an inline element be rendered as a block element
+  - `display: inline-block;`: looks like inline from outside, behave like block element on the inside
+    - it won't create line breaks
+    - it takes up only as much width as necessary for the content
+    - all box model properties can be applied to inline-block elements
+    - an `<img>` element is by default an inline-block element
 
 # Useful Links
 - https://jonas.io/resources/

starter/03-CSS-Fundamentals/index.html

@@ -25,6 +25,7 @@ <h1>📘 The Code Magazine</h1>
           <a href="#">Challenges</a>
           <a href="#">Flexbox</a>
           <a href="#">CSS Grid</a>
+          <a href="./challange/">Challange</a>
         </nav>
       </header>
 
@@ -155,5 +156,8 @@ <h4>Related posts</h4>
         <p>Copyright &copy; 2027 by The Code Magazine.</p>
       </footer>
     </div>
+    <div class="like-button-container">
+      <button class="like-button">❤️ Like</button>
+    </div>
   </body>
 </html>

starter/03-CSS-Fundamentals/style.css

@@ -10,6 +10,16 @@ body {
   color: #444444;
 }
 
+nav a:link {
+  margin-right: 30px;
+  margin-top: 10px;
+  display: inline-block;
+}
+
+nav a:link:last-child {
+  margin-right: 0;
+}
+
 .container {
   width: 700px;
   border-top: 10px solid #1098ad;
@@ -157,3 +167,18 @@ a:active {
   font-style: italic;
 }
 /* LVHA */
+
+.like-button-container {
+  position: relative;
+  /* height: 100px; */
+  background-color: red;
+}
+.like-button {
+  font-size: 22px;
+  padding: 20px;
+  cursor: pointer;
+
+  position: absolute;
+  bottom: 50px;
+  right: 50px;
+}