Figuring out how the CSS of a website works using Firebug – Screencast

The basis of using Cascading Style Sheets (CSS) to apply formatting to an HTML document is deceptively easy to understand, but hard to master. You define selectors that designate HTML elements, which contains formatting rules that apply to those elements and their children. If more than one rule applies to an element, they are applied using a priority order, from the more general to the more specific: that’s where the “cascading” part comes in.

It’s almost impossible to predict how a website will look by looking at the code. If you have to modify the CSS of an application you don’t know “just” to change a color or a font size using only your text editor, you’re out of luck. Figuring out the priority of each selector is complicated if you have many stylesheets that applies to a page, and you can easily miss a more general selector. You can’t just look at an element on the page and immediately deduce which CSS rules are affecting it, especially if there are many contradictory rules.

That’s where tools such as Firebug for Firefox or the Developer Tools in Chrome comes in. Among many other great features, they allow you to see which rules are affecting a particular element on the page, and to modify them on the fly.

Of course, it won’t modify your original CSS since it only changes the local copy in your browser, but you can quickly test what’s the impact on your page and then make the modifications. You can also use those tools to explore your favorite websites and see how they used CSS to format elements: it can be a great learning tool if you’re looking to grow your CSS knowledge.

Here is a screencast on how to use Firebug to figure out where the colors are defined on the Twitter website:

Play to learn: Environments made to learn programming

Most people get started programming because it’s a lot of fun to pick something you’re curious about and start experimenting. Tinkering with code, seeing what works and what doesn’t, and fixing problems as you come across them is a great way to play with computers while learning new skills. Even if you have a lot of experience, it’s good to go back to that mindset from time to time and learn by playing around.

This is hard to do in large, mature environments, such as ASP.NET MVC or Ruby on Rails for web applications. If you want to do anything, you have to go through a long and complex setup before running your first program, and many dependencies are involved in everything working just right. Those tools are powerful, but the overhead to get started is painful if you only want to play with some code.

Fortunately, there are many environments designed for playing and learning that can help you get started quickly. You can take advantage of those tools when you have the urge to play with something new without taking on a huge commitment. Here are some of them for my favorite subjects to play with, hardware and the web:

Web environments

If you’re reading this, you already have a great environment to create applications: your web browser. You can get started building a web application with only HTML, CSS and JavaScript, and run the application directly in your browser without any further setup. You can’t save data or send emails unless you add a server-side technology, but it’s a fast and scrappy way to build a web page or even a prototype for a small web application. You can just drop the code in any cheap shared hosting if you want to publish it: it doesn’t get any easier than that.

For more complex frameworks, there are virtual machines available that you can use for a pain-free setup to play around with a language or framework. The hardest thing is that case is to fight the urge to be in full control of your editor and tools. It took me quite a while to introduce myself to Ruby on Rails because I insisted on setting up my Windows PC instead of using the environment already provided with the Ruby on Rails tutorial. I recommend that you wait until you have a first project you need to deploy before worrying about the mechanics of all of this: mastering the environment and the framework at the same time is a lot to learn just to get started.

Hardware environments

The world of hardware is great for tinkering. There is something special about being able to see the results of your efforts in the real world and not on a screen, even if it’s just flashing a LED or making some beeping noises. Playing with hardware will also teach you valuable lessons about the limitation of hardware, which will make you a better programmer.

Since building your own board just to test some hardware is complex and time-consuming, there are many learning kits available. The most popular one is the Arduino (https://www.arduino.cc/), and there are kits based on that platform to build anything from a clock to a robot. For a quick introduction to Arduino, check out Scott Hanselman’s post at The Importance of the LED Moment about the March Is For Makers project.

If you’d rather play with small computers, the Raspberry PI (https://www.raspberrypi.org) can be used to create all kinds of projects. There are many Linux operating system images you can upload directly to a SD card, such as OSMC (https://osmc.tv/download/) for a media center or RetroPie (http://blog.petrockblock.com/retropie/) for a retro gaming console. Just plug everything in your TV and you’re ready to go and tweak!

Go back to the introduction of this series : Play and learn as a software developer