A weeks critical learning in CSS

Small tidbits and reminders

The last few months have been eventful to say the least. I stopped working at Feast (a food delivery startup) in October. From there I went to Thailand for two months driving a scooter, snorkelling and admiring rice patties (also first time doing all those things). At the beginning of January, I was staying at home eating ramen and pizza everyday. Daily routines varied from updating my portfolio and learning CSS through online tutorials and a book by Jon Duckett.

Progress was frustratingly slow, so I decided to enrol in a full-time front end web development course at Hacker You. Week one has been fun, curious, exciting and tiring. It was jam packed with Knowledge, laughs and great people. As we approach week two for my own sake of review, here is a brief summary of my learnings in bootcamp week one.

#1. Box Model

All content is considered to be in a box. It is surrounded by padding (it protects its insides), the border, and margin. Padding and border are naturally undefined if or set to browser default if unspecified. If you have some random white space, chances are there is browser default padding or border set on your content.

#2. Parent & Child

Always remember that the apple doesn’t fall far from the tree. When the children are acting funny, check their parents. Likewise, the parent define the children. Am I making sense?

#3. Block Elements

<div> <p> <h1> <ul>

For the longest time I didn’t understand the difference between a div and the relation to block elements until I tried laying out elements next to each other with floats. But even then, I was mostly just testing things out until it worked and not fully understanding what I was doing, or how I achieved the result. This was a key moment for me when I learned that block elements take up a whole line, or rather full width of a web page. When placing block elements next to each other, they will naturally move to the next line.