Student Experience | Intro to Web Development, Week 4 | Marianne Bulger, the DMZ

By Marianne Bulgar October 13, 2015

insight on our intro to web development course.

A recent Buzzfeed article about hilarious Canadian street names got me thinking about the origins of code. All ‘code word’ jokes aside, HyperText Markup Language (html) is a rather peculiar ‘language’. On face value, it is best described as a creative combination of English, Wingdings and possibly ancient hieroglyphs. However, unlike languages of dialogue, code is not intended for conversation, it is intended for building. Thus, it is not a language at all and more easily correlated with a toolbox.

With that in mind, here are three lessons from a newbie on building a strong foundation for web development:

Web development is a giant toolbox. Use everything how it’s meant to be used.

In the same manner that you build an Ikea shelf, you build websites. Learning code is synonymous to learning what is inside a toolbox. While foreign and bizarre looking at first, each instrument has a definitive purpose and, when used altogether, can build some pretty awesome stuff.

Tip: Don’t use floats to build your layout. It’s lazy and will disrupt the overall order of your page. This is code for: stop using the butt of the wrench as a hammer, it makes things messy and uneven and you look foolish in the long run.

Great looking code is the clean room you never had.

Even the messiest of people derive satisfaction out of a clean room. Only difference between your own room and your code is that chances are you won’t be the only person reading or adjusting the code you write/the room you clean. Thus, cleanliness is next to godliness – clean and concise code allows others to sort through and find what they are looking for with relative ease.

Tip: Keep structure clear and naming relevant.

Web development is the only place where you can choose your relatives.

After dodging the usual suspects at your Thanksgiving feast (drunk Aunt Mindy, that crazy kid with the nerf gun, the dog that steals food from your bare hands), you might be second guessing who you’re related to.

Good news is that in web development, you can choose your relatives. HTML is one big family tree. When referring to ‘relative’, it means ‘place of origin/parent’. In your design, you can decide which elements on your page will be related to one another based on how you want things to move “relative” to one another. OK, the family thing was a stretch but I had to go there.

Tip: Don’t get carried away with analogies.

5 other things to take away:

  1. The more images you use, the slower your page will likely be. Where possible, find the hex colour of something and code it in.
  2. From left to right, top to bottom, the components of your page are blocks in a larger puzzle.
  3. Asides are, well, set aside. They are the columns of information that you most often find along the side of a page. What’s the point of defining these specifically? SEO! When you tag your sections appropriately, Google will automatically prioritize what to read and how to define the content of your page.
  4. Floats are hacky tools that were originally created to help text wrap around photos on a webpage. Today, they are a less-productive way to move something where you want it.
  5. Inline blocks are a cleaner, more structured and advanced method to building webpage layouts.