Day 2: Front-end development and interface design

March 4, 2014

This article is the second in a 5-day series about teaching beginners how to program. Read the introduction.

Yesterday, we established that focusing on web technologies and Javascript was the best approach when teaching a novice about programming. Today, we'll go over the first unit of study that learners should tackle... and it barely has anything to do with Javascript at all.

On Day 2, we're going to look at HTML and CSS in the browser.

A note about pedagogy:

You can skip this section if you're not an educator.

There's a mantra that I'm going to keep invoking again and again throughout this series. I've applied it throughout my time as an educator, and it's always served me well. It's important to remember, easy to forget, and flies in the face of logic:

It's more important for a learner to achieve results, than it is to grasp the underlying concepts behind those results.

This is as counter-intuitive a claim as it gets, but it's true. We've all heard the saying "You need to learn how to walk before you can run." But in actual fact, starting out with basics and moving on to more complicated things isn't always the best way to sequence instruction.

The most effective way to ensure that a learner achieves an outcome is to connect the material to his or her personal experiences and interests. As learners, we are interested in ends, not means. This is the fundamental premise behind constructivism, which is at the core of my educational philosophy.

The general constructivist claim behind my mantra is this: as learners, we are engaged when we're able to apply the material in our own ways. As we continue to explore and engage with the subject matter by doing, the fundamental concepts behind our actions become clear to us. As we gain experience, the basics fall into place.

How does this apply here?

As educators, we must always look for ways to get students to see meaningful results as soon as possible, whenever possible. This has traditionally been difficult in programming, because courses are structured to make you slog through basic command-line exercises before moving on to anything fun. (Prove me wrong, Dal C.S.)

The reason we're putting front-end development (HTML and CSS) at the start of our course of studies is because it quickly allows students to build something they want to build, and see it come together visually right before their eyes. In order to help them achieve this goal as soon as possible, we're going to skip over the "basics," like teaching what tags and selectors are, or why we abstract the document structure from the presentation layer. We're going to skip over the stuff that bored us to tears as students 10 years ago. We're going to start by doing.

Embrace magic.

HTML and CSS have become quite elaborate and complex over the past decade. If we started with the basics of tags and selectors, it would take our students weeks to learn enough to make something that actually looked good. This is a colossal waste of time, and we can do better.

I recommend that students begin building websites and interfaces immediately using a front-end framework. And, due to its widespread deployment all over the internet, I recommend that we focus on Bootstrap.

Bootstrap is a front-end framework (originally developed by Twitter) that makes it easier to put together a website or application layout with less code. The Bootstrap site has plenty of example code, most of it quite simple, that explains how you can add different components (like buttons, sidebars, fancy icons, etc.) into your project. It even has starter projects that you can download and begin building upon. What's more, it's easy to theme, so each student can inject a bit of personality into their project without getting caught up in the minutiae of CSS.

To beginners, Bootstrap is basically magic. They don't have to write a single line of CSS, or define a single media query on their own, and yet they can use it to create complicated, interactive interfaces that are even responsive. More advanced students can even rope in the Javascript components (which don't even require a knowledge of Javascript, yet) to make their document do all kinds of neat things. What's more, as learners gain experience, they'll invariably want to do something that Bootstrap can't help them with. At this point, they'll already have a working knowledge of HTML and CSS to build on. Embrace magic until you don't need it anymore.

But… this isn't programming!

No, it's not programming yet. But that's okay. We're setting out to excite learners about possibilities. This is really hard to do when you start by writing pure programming code. But, if a novice can put together the interface for an app idea they had in less than two weeks, they're going to be hooked. They're going to want to know how to make that interface actually do things.

And that's when we'll introduce Javascript as the means to the end.

Unit overview

This unit should be at the beginning of your course of study. No Javascript knowledge is required, but you might want to do a quick overview so you know what to expect once you're ready to hook up your interfaces.

I would recommend you begin by reading the Getting Started and CSS sections on the Bootstrap site. These two sections alone will give you everything you need to know to make a simple, static website. A beginner's assignment would be to take a report, or an essay, or any document with tables, lists, callouts and images, and reproduce it in HTML with Bootstrap.

Next, check out the Components section, which gives you more advanced interface elements like navigation bars, badges, button groups, input forms, etc. To try and apply these components, an intermediate assignment could be to choose a website with a complex layout (or even a desktop application like iTunes), and reproduce it in Bootstrap. More advanced students could attempt to make their layouts responsive, so they shrink nicely to smartphone or tablet screen sizes.

Finally, head over to the Javascript section to get some advanced components, like collapsible sections, modals, drop-down menus popovers, slideshow carousels, and so on. These components can make your projects a little more dynamic, as they use Javascript under the hood to animate interactions and react to clicks. An advanced assignment, after learning how to integrate these components, would be to build an application interface from scratch. This could be a simple fitness tracker, a music player, a unit converter, a calculator, a chat client, an Instagram photo viewer, etc. Different application states can be displayed by linking to other HTML files, so you can even show how different sections of your application link together.

At this point, learners should see some of the possibilities that are open to them, and will undoubtedly have found something of interest. Some might find that they really enjoy design (maybe from theming Bootstrap), and want to explore CSS in more depth on their own time. Some might want to build a simple personal website. Others might really want to see their application interfaces come to life, and be chomping at the bit to learn jQuery (a browser-based Javascript framework that simplifies making webpages interactive). There's all kinds of opportunities for collaboration and differentiated instruction here, depending on how much time you want to spend on front-end development.

Enter Javascript. Well, jQuery anyway.

Once we're ready to move on from static HTML + Bootstrap, it's time to introduce some basic Javascript programming into the mix, to show what front-end development is really about.

There will be plenty of time to learn pure Javascript programming down the line. Remember, we want to embrace magic so we can see results quickly. For this reason, I recommend that learners start with the jQuery library. jQuery is a browser-based Javascript toolkit that simplifies working with HTML, takes care of compatibility quirks between web browsers, and facilitates pulling data from other websites (like Facebook, Twitter, Instagram, Tumblr, etc.).

jQuery is another rabbit-hole, with its own way of doing things, and it's easy for someone to blur the lines between jQuery and Javascript. For this reason, I wouldn't suggest dwelling on jQuery for too long. However, there are some specific features of jQuery that help unlock a whole world of possibilities for programmers, and I highly recommend you spend some time learning them. These two features are AJAX calls and DOM manipulation.

AJAX calls enable you to communicate with other web servers in real time. This allows you to do things like fetch a list of photos from Instagram, or retrieve the most recent posts from a Tumblr blog, or search for videos on YouTube, and then do something with the results on your website. More importantly (for us), it lets us communicate with a database over the web, so that we can store our own information, and retrieve it later.

DOM manipulation means being able to modify parts of a website using Javascript. You can hide a section and show another, replace text and add new elements, either one-by-one or in bulk. It's a very powerful capability, and there's lots you can do with it.

Together, these two jQuery features enable us to fetch some data from a database and display it on a website or in an application. This is the core of web development. Once we learn how to work with databases, we'll be able to build simple applications that fetch information, and even allow us to modify and save this information.

As a capstone assignment for this unit, consider setting up an Instagram account or Tumblr blog (or get your students to use their own - I guarantee they all have at least one). Provide students with some guidance (for example, API keys and URL endpoints), and challenge them to build a simple application that fetches and displays photos. If you're a student yourself, you'll need to sign up for, and familiarize yourself with, these websites' APIs. Here's Instagram, and here's Tumblr. Most social media sites (YouTube, Facebook, etc.) have APIs you can use to work with their data.

At the end of this unit, learners should have a working knowledge of HTML, so they can build layouts and interfaces for websites and web apps. They'll also know enough jQuery to work with social media APIs and interact with the DOM. This will give them a solid foundation in front-end development, and provide them with the skills they'll need for the next unit.

Tomorrow, we'll cover databases servers and REST APIs. This will enable students to set up a database, store data, and use it in their own front-end applications. This is where web-development gets rewarding, empowering and exciting.

Up next:

Ari Najarian Follow @stickbyatlas