Two weeks ago I started HackerYou’s Web Development bootcamp and everything you’ve ever heard about HackerYou is true. I didn’t think it could possibly live up to the hype, but I’ve met what has turned out to be a truly amazing group of super passionate, dedicated, and fun devs that have formed this amazing community. People describe it as “cult-like” and I have to say they’re right. In a good way though, I promise.

Bootcamp alumnus I’ve just met: “Hey! How’s bootcamp going?”
Me: “It’s great! Learning so much, salad club is cool, JavaScript is going to be scary.”
Them: “Feel free to message me anytime :)” <– THIS, every single person I’ve met has made this offer without fail!

The last two weeks have FLOWN BY and we’ve covered a massive amount of content, reviewing everything HTML and CSS. Even though this was technically a review, there have been a few AHA moments along the way that I thought I’d jot down. Here are my top three “oh that’s a very straight forward but very cool thing that I shall put in my pocket for the future” things:

1. Margin collapse: this is a complicated phenomenon that occurs when two vertical margins touch and the larger margin, being more dominant, swallows up the smaller margin, causing it to “collapse” or disappear. The part that was an AHA moment for me was in realizing why I couldn’t use margin-top to vertically center an h1 in my header. By putting a 1px border or 1px of padding on my header, I could prevent that margin collapse from taking place and all my layout dreams came true.
   1. b. Margin collapse does not apply to horizontal margins that touch, cool cool cool.
2. Pseudo-elements: you can’t put pseudo-elements on inputs! I wanted to put a nice little ::after element on a form input to give it a fancy underline. No no no. A quick Google search of “why is this thing not working?” taught me that pseudo-elements (::before and ::after) cannot be applied to inputs because they’re not containers, they don’t have closing tags. The same goes for img tags as well. Knowledge is power!
3. Emmet shorthand “$@X”: I love a good Emmet shortcut. If I could do everything with a keyboard shortcut, I totally would. I was familiar with the $ symbol which allows you to make multiple elements with an attribute containing consecutive numbers. The “@X” allows you to start the consecutive numbering at a number other than 1. Wow, much neat! I’ve included an example below to demonstrate:

section*5.section$
     <section class="section1"></section>
     <section class="section2"></section>
     <section class="section3"></section>
     <section class="section4"></section>
     <section class="section5"></section>

section*5.section$@6
     <section class="section6"></section>
     <section class="section7"></section>
     <section class="section8"></section>
     <section class="section9"></section>
     <section class="section10"></section>

Some of you might be thinking, wow basic I learned nothing from reading this, but hopefully some of you, like me, will have a bit of a light bulb moment or maybe even have your own lists. I hope someday I look back at this blog post and appreciate how far I’ve come. Next week we start learning really new things that are sure to be just as exciting.