Tribune DataViz

Matters of interest, from the data reporters and developers across Tribune Publishing

Archive for the ‘First Steps’ Category

Getting started has never been easier

leave a comment »

Having crossed the print-to-digital divide, I get a lot of questions from others who are trying to make the journey. While the conversations are often unique, they all share a familiar opening query:

Where the hell do I begin?

If you are just getting into web development, there are two absolute truths that set the tone for everything else that will follow:

1) The work you produce needs to live online.

Too many beginners get stuck in Codecademy-like, browser-based exercises that simply can’t live beyond the container they begin in. While those exercises are useful, they teach you nothing about actually getting your work online. To stay the course and grow, you need to get something online as soon as possible.

2) We tend to overcomplicate how we get our work online.

As journalists, we’re producing stories and charts — we’re not curing cancer. These are really just web pages, so let’s find the simplest way to get the job done.

For those paying attention, that basically means that your work needs to be online somewhere and that doing so doesn’t have to be hard. In fact, there is no reason why you can’t get something online today.

Getting your bare-bones web page online

To participate, you’ll need Dropbox on your machine (free), a text editor (I suggest Sublime Text, also free) and this HTML file that I’ve already gotten started for you.

Once your Dropbox account is set up, place the HTML file provided into your Dropbox/Public folder.

Now that the file is in the Public folder, you should be able to right-click on the file and a ‘Copy Public Link’ option will appear. With that link copied, I want you to open a new browser window and paste that link into the browser address. You should now see the trib_index.html file that was provided.

Finally, using your text editor, open the trib_index.html file from within Dropbox.

Following these steps will create a live editing environment where you can see the edits you are making on the trib_index.html file appear instantly online via the public link you created from inside of Dropbox.

Immediately, you’ll probably notice that your page is styled. That’s because the trib_index.html page we provided has a CDN link to Bootstrap. This link gives you access to anything in the Bootstrap CSS and JS framework, which means that this is excellent time to acquaint yourself with the Bootstrap documentation.

So start playing around already!

Change headlines, figure out what a Jumbotron class is, send yourself the link and open it on your phone and see how the page responds to a different device. You have a real, live page on the internet that you can now use as a sandbox to experiment and stretch your skills.

Stop the presses

This whole process is probably setting off alarms for seasoned web developers. You’re likely saying to yourself that this isn’t web development.

But isn’t web development simply getting your project online and seeing how to it functions in the wild? When viewed that way, this sounds like the basics of Browser Testing 101 — which is web development.

The only thing this isn’t is complicated.

Most beginners need a way to ease into web development. There are more complicated routes but how many people give up before they ever get to the point where they see their work online?

Once people understand how to get their projects online, they begin to build the resiliency needed to overcome the headaches that will arise as their ambitions lead them into more complicated concepts.

So let’s focus on getting more beginners ‘online’ and letting natural curiosity define the next steps of the collective journey.

Written by Chris Courtney

June 11, 2014 at 5:34 pm

Posted in CSS, First Steps, HTML