This article is the second in a 5-day series about teaching beginners how to program. Read the introduction.
On Day 2, we're going to look at HTML and CSS in the browser.
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:
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.
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.
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.
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.
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.
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.
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.
jQuery for Beginners
A quick introductory reference to jQuery, with plenty of basic example code illustrating how to accomplish various tasks. This tutorial falls short of introducing AJAX in any depth, but covers everything else very well.
Try jQuery (Codeschool)
A tutorial created by Codeschool to introduce beginners to jQuery. More advanced and interactive than the above tutorial, but also much longer.
jQuery and AJAX (Codecademy)
An interactive tutorial that focuses on just the AJAX features of jQuery, in depth.
How to: Read Flickr API JSON via jQuery
A simple tutorial that explains how you might use jQuery to interact with Flickr.
A beginner's guide to HTML & CSS
An excellent course and reference for learning HTML and CSS without Bootstrap. This website will provide all the fundamentals for more advanced topics. Plenty of practical example code to refer to.
Learn CSS Layout
Tutorial on layout in CSS. This tutorial assumes some knowledge of HTML and CSS already.
A quick overview of responsive design for learners who are interested in CSS and want to move beyond Bootstrap.