Falling in Love with HTML & CSS: Why We Love Project-Based Learning

In the spirit of America’s ultimate Hallmark holiday, we released a Valentine’s Day themed coding guide  yesterday — Falling in Love with HTML and CSS — that walks you through through how to build a virtual card. Within 24 hours, I received a frantic email from someone in Switzerland who was almost done with the card but hit a roadblock.

I saw the subject line — “URGENT: Valentine’s gift card link not working!” —  and clicked to save the day. The email said: “Can you help me ??! (Valentine’s is tomorrow!!). I sent my number. He made the long distance call. We fixed the bug (a missing tag). And voila! His homemade gift was ready with time to spare.


image              

The chat made it clear that the man was immediately invested, motivated to finish, and inspired to be creative by adding his personal touch to the card. (It probably helped that romance was on the line as well…) It was quick call but it shows just why we use project-based curricula everywhere.

When Thinkful mentorMichael Herman created this Valentine’s Day guide, he was using the “learn by doing” approach we use in our classes. He takes students into topics, like HTML and CSS, and has them code a project to learn the skills.

Projects make learning (especially online learning) so much more effective for four key reasons: i) relevance ii) motivation iii) feedback and iv) creativity.

1. Relevance: People are about the real world.

In October, I heard a Ashley Gavin, curriculum developer, speak about Computer Science education and everything that’s wrong with it. She pointed out that early assignments in computer science courses are off-putting — a basic Hello, World program — and turn folks away from a topic that has much more relevance than they realize.

Gavin said that at Girls Who Code, where she works, they spend the first few weeks building video games so that the students are engaged and excited by the work they’re doing. They can envision how they’ll use what they’re building because it’s something they already care about.

In our course, I’ve seen the smae thing. When students get to the API Hack, the last project in our front-end class, they’re super invested. Megan, who loves farmer’s markets, is building a tool that lets you determine every farmer’s market within a mile of where you are using Google’s API. She’s done with the front-end course but continuing to work on the project so she and her friends can use it in the future.

2. Motivation: You’re not going to give up.

Students come to us because they’re craving accountability. Some have had early success with self-teaching resources but got frustrated simply following along to a tutorial and not actually building anything they can use.

Real projects with clear goals make learning more fun and more meaningful. It never feels like you’re just writing lines of the code for the sake of writing them. The man building the card for his Valentine was 99% done with his work, but he couldn’t let the small malfunctioning link hold him back. It had to be done by midnight and he was motivated to finish.

3. Feedback. Feedback. Feedback.

We all love getting feedback on what we do. How does this sound? Does it look right? How many likes did that post get? Feedback is crucial for learning too. We’re used to a grade, a certificate, a percentage score that shows us what we know.

If you’re building someone no one is going to see, it’s easy to lose interest (I know that’s happened to me). Building something with the end user or recipient in mind helps you stay invested. There’s a reason the most popular posts in our online community are students sharing their projects and looking for validation of what they’ve built!

4. There’s room for creativity!

Getting creative with your projects is FUN!

We saw this when we introduced a new project in our front-end course to teach Chrome Developer Tools. Learning dev tools isn’t that exciting and we used to teach it through simple videos.

But in a new version of our curriculum (that we just released), we transformed teaching DevTools into an engaging project called: Your First Hack! The idea — allowing students to pick a website, use the tools to make changes, and share the results — was to keep students more engaged. The early feedback (and projects) has been overwhelmingly positive.

Justin hacked into the Financial Times:

image

Michelle hacked into The Onion:

image

Malcolm hacked the Jaguar site:

image

When you’re designing a project, pick something that is relevant, motivating, feedback-driven, and creative, making sure that it also lets you learn the skills you want. It’s clear that when that happens, students are not only happiest, but also most successful and engaged.