Bootcamp Week 1: Bootstrap and Design Theory

Image of Robbie Gay
Robbie Gay


We just wrapped up Bootcamp Week 1 — it was really exciting to dive into our first week of full-time coding, but it also came with some personal highs and lows. A high was that the first week of Bootcamp was a lot of fun! We learned about design theory, started working with the Bootstrap framework, and learned some more about objects in JavaScript!

Some lows: my girlfriend’s 16-year-old cat went missing on Monday. Smokey is awesome, and I really hope he comes home soon! And then on Friday, my cat came down with some sort of severe bacterial infection, and ended up dying at the vet’s office several hours later. Overall, it was a pretty rough week for cats :(

A final high of the week: A perk of going to school downtown means that I was able to meet up with my Grandfather for lunch! His office is across the street from the new Athenian Grill, so I walked over there on my lunch break and had a really good time hanging out with him!

Design

Jacqueline, a graphic designer here at Awesome Inc, came by on Wednesday to talk to us about some basic design principles. Her talk was about C.R.A.P.:

  1. Contrast: can be contrast of color, type weight, texture, shape
  2. Repetition: repeated colors, patterns, or elements
  3. Alignment: how do the elements on the page align with one another?
  4. Proximity: grouping, whitespace; how close are elements to each other?

We talked about C.R.A.P. principles, and then looked at some examples of bad design. After our design workshop wrapped up, I turned back to my blog and realized just how much additional design work my blog could use! I really enjoyed learning more about design, and am looking forward to our future design theory sessions.

This week we started working with the Bootstrap framework. A framework is a software abstraction that adds certain functionality to common code. The main difference between a framework and a library is "inversion of control" — in a framework, the global flow of control is employed by the framework, rather than the user. What using Bootstrap meant for me, was that I could take something that previously took me 40-50 lines of CSS, and enter only a word or two of Bootstrap and achieve the same effect… often with even better results. Switching from vanilla CSS to Bootstrap was a bit like being given superpowers — it was amazing what sort of features I could add to my blog with just a few Bootstrap classes!

JavaScript Objects

I definitely struggled with understanding JavaScript objects at first. I tried reading the “objects” chapter in “Eloquent JavaScript” on Monday. By “tried to read”, I mean that I made it about halfway through before becoming so lost that I only skimmed the rest, knowing that nothing else was going to stick. Later in the week, I began working through the MDN JavaScript Objects module. Getting to read a second explanation of JS objects really helped me begin to understand what objects are (hint: they are everything, and everything is them) and why they are useful.

We rounded out the week by completing an assignment that involved applying what we had learned about JS objects.

Bouncing Balls Game

Instructions: Control the red circle with WASD keys. Try to eat all 25 bouncing balls. You win the game when all the balls are gone. Note: If controls don't seem work, try click once in the window of the game.

The Bouncing Balls project was a guided exercise as part of MDN’s JS objects module. It was nice to still have a bit of hand holding throughout this project, as it allowed us to build a fairly “complex” (complex to me) program, and to see how objects made a program like this possible.

Coming Attractions

Over the next two weeks, we are going to be diving a bit more deeply into JavaScript, while also doing a lot of project-based work. We are going to be building a Tic Tac Toe game, a Calculator, a Sliding Puzzle, and finally, a Weather App!