The BrainStation Experience | Intro to Web Development | Week 3, 4, 5

By Trilby Goouch July 31, 2015
Share

Student Spotlight: Kate MacLennan | Intro to Web Development

Week Three

Remember those classes in school where you had to pay just a little more attention because the results didn’t come quite as easily? For some they were mathematics, for others essay writing, and while I don’t recall anyone except myself with botched welding projects Grade 7 shop class, I’m sure there must have been a couple of us.

Walking into week three of Intro To Web Development, it became my Grade 7 shop class. I’d left week two, my burgeoning website in tow, quite confident—a bit cocky, truth be told. It seemed that I’d stared at that Sublime Text screen long enough that it was beginning to make sense. I wasn’t relying quite as heavily on Shane or Andrew, our valiant instructions. (They may recall differently.) I was even starting to talk code like I knew what the hell I was saying. (I usually didn’t, but I thought I at least sounded proficient.)

Well, the cocky must fall, and fall I did. In week three I completely blanked on how to auto-prompt my html sheet with the code that applies to all sheets—title, header, body, that kind of thing; the very first thing we learned in week one. Then I struggled to recall how to set up my style sheet, or the code required to connect that style sheet to my index/HTML template, not to mention what the difference was between a “class” and an “ID” selector, and how “containers” actually work.

In short, all of it. A smidge of Grade 7 shop class panic was setting in when it struck me. This coding stuff wasn’t second nature yet, but I had retained enough knowledge in three classes to at least be able to communicate what was missing. And if I could get that far, Google could help me with a whole lot of the rest. Little did I know that things were only going to get easier…

Week 4

Good coders are lazy. There. I said it. But spend two minutes perusing Bootstrap and you’ll undoubtedly agree.

Officially, Bootstrap is a “sleek, intuitive and powerful mobile first front-end framework for faster and easier web development.” What that actually means is that a couple of software brains over at Twitter (specifically @mdo and @fat) designed and built a platform that make creating a basic website one hell of a lot easier.

Let’s say you want a navigation bar at the top of your website—most websites have one. You could muck around coding containers and padding and margins and colours until the cows come home, or you could just go to getbootstrap.com, click on Components, scroll down the menu until you see “navbar” and bingo.

There, ready for the taking, is all the professionally written code for all the variations on a nav bar you could ever want—drop downs, search bars, static positions, whatever. It even has the code to optimize it so it looks good on laptops, iPads and every other hand-held device under the sun.

Want a big, juicy hero image on the homepage of your site? Bootstrap calls it a “jumbotron” and you can get the insta-code for that, too. How about creating a column grid or a “buy now!” button? Bootstrap Bootstrap Bootstrap.

Don’t get me wrong, you’ll still need some basic intel to navigate this miracle code, which is where this Web Dev course has set me up so well. But once you get that crucial line of Javascript securely coded in your index, it’s more a matter of being able to identify the bits you don’t need and removing them, rather than trying to re-invent the wheel.

Then, to make it your own, you just input customizable tweaks like colour, images and font. And this, it becomes increasingly clear, is a task made a thousand times easier by a little feature on the world wide web known as “Inspect Element.”

Week 5

For reasons still completely unclear to me, I spent the first four classes in Web Development avoiding a little thing called “Inspect Element.” Maybe because it was intimidating at first glance, looking at all those crazy lines of code. As a result, however, I was falling behind in my Web Development Class. In essence, the Elements panel tears back the curtain and exposes the Wizard. With one control-click (for all you Mac users) on any portion of any public website in the entire world you can see every line of code that makes it look and act like it does. (I assume this is true of every public website in the world, though I can’t claim to have tested them all.)

Here’s the magic: by viewing its structured information—its HTML and CSS—not only can you can see what makes it work, but you can copy that code to use for yourself. Bonus: you can also live-edit in CSS, which becomes a pretty compelling way to make tweaks without having to trial-and-error your ass off, toggling back and forth between your Sublime Text and browser.

For all I know, this copying I’m getting addicted to doing is a terrible recommendation that’s taboo in the world of software engineering. But for the purposes of the novice coder who just wants to craft a decent looking site that actually works? It works, for the most part, like a charm.

Besides, as we know, coders are lazy. They don’t want to write and re-write code so they create all these short-cuts for ‘borrowing’ it. Though, that does create a paradox, doesn’t it? For a coder to be lazy, s/he must first be hard-working in order to create all the code that lets him/her be lazy.

Mind blown? If not yet, bet it will be in Week 6.

Learn more about Intro to Web Development.