Day 5: LESS, Boilerplate, and responsive design techniques

This whole week we've been working entirely on HTML and CSS without the use of any preprocessors. This morning's lecture was an overview of preprocessors for HTML, CSS, and Javascript. Although it is very elegant to write using those preprocessors, if you do not know how the code that the browser reads ultimately looks like, it can be very difficult to debug your code. This is one of the reasons why Coding Dojo has us write strictly in HTML and CSS. Once we understand how to write them using the correct syntax, learning the preprocessors is very easy.

The second part of our lecture discussed a way to scale your application by using caching. It's just simply a way to store data that is commonly retrieved so that the database or web server doesn't have to constantly search for the same data (e.g. "Top ten items purchased this week"). It can just be stored on some memory known as cache. It was just a high level overview and I'm sure we'll go more in depth next week when we learn databases.

The next assignment on my checklist was to learn LESS. Less is a preprocessor for CSS. We'll also be learning Sass but since Less can be run on the client-side (and we've only been working on client-side so far), we first learn Less. I've already had a bunch of Sass knowledge from Michael Hartl's Ruby on Rails tutorial and Less really isn't that much different. Our task was to refactor our CSS from a previous assignment.

My CSS is on the left and LESS is on the right. Although we indent in CSS for readability. The LESS syntax is so much cleaner. Not to mention the ability to use variable for complex things like HEX codes that can be prevalent throughout a stylesheet. Learning this stuff was a breeze but I definitely needed some sort of refresher with mixins and other more advanced tools.

About 3 students in our cohort including me finished the LESS assignment (which was the last optional assignment for the week), so Michael had us expand our learning by expanding on responsive design as this was really the future of website designs.

The tools that we were learning were HTML5 boilerplate, 1% CSS Grid system, and Picture Fill (which resizes your photos based upon the viewport size).

Our assignment was to create a fake blog using Lorem Ipsums. I found a hilarious Lorem Ipsum generator with lines from the show "The IT Crowd", so I decided to use that theme.

Using boilerplate and Grid systems were much harder that I expected. I really felt like these assignments were an "appreciation for bootstrap and other front-end frameworks". I feel like developers often take for granted these awesome frameworks that make it really easy for you. The second part of this assignment is to work with different front-end frameworks like bootstrap, foundation, and skeleton which I'll probably tackle this weekend. We're starting JQuery on Monday so I want to make sure that I get this assignment checked off before we continue.


To be honest, today really did feel like a Friday. After tackling HTML and CSS code relentlessly for the past 4 days and some difficulties getting sleep, I started to slow down. I'm going to take some time away from coding this weekend to recharge so I can be fully ready to take on more coding next week.

Although I am a little tired, I am nonetheless very happy and excited about my future. There is nowhere else I'd rather be right now!