🚧 Continued documenting coder coder's process

coder_coder.css

@@ -1,4 +1,4 @@
-/* LEFT OFF AT BEGINNING OF PART 2 */
+/* LEFT OFF AT PART 2 1:07 */
 
 /* This document contains boilerplate css tips/tricks
  * garnered from the youtuber, coder_coder's youtube series, "Building a
@@ -56,6 +56,11 @@ body {
   margin: 0;
 }
 
+/* removes default margins */
+h1, h2, h3, p {
+    margin-top: 0;
+}
+
 a {
   /* automatically adds an ease-in-out animation on color property whenever
      * there's a hover event change */
@@ -160,3 +165,30 @@ a:hover {
     margin-inline-end: auto;
   }
 }
+
+/* HERO */
+.hero {}
+
+.hero__wrapper {}
+
+.hero__image {
+    position: absolute;
+    top: 0;
+    /* how to center position:absolute elems */
+    left: 50%;
+    translate: -50%;
+    display: block;
+}
+
+.hero__text {
+    position: relative;
+    /* calculated by the header height - the image height */
+    /* she realizes not to use top, but instead margin-top, because top doesn't
+     * effect the entire flow of the page, while margin-top does */
+    margin-top: 295px;
+    text-align: center;
+}
+
+/* .hero__description {} */
+
+/* .hero__contact {} */