How can I maintain interest in front end?

Question

When I teach front end web development, it always happens that I start the year with a bunch of students who are ready to redesign Facebook on day 1. With expectations like that, it's always a letdown when I start talking about what a tag is, what a markup language is, CSS priorities, code quality, and generally the details of how good design is implemented.

How can I stop students from dropping off and losing interest? This is especially pertinent to me because my class is extracurricular and is something interested kids can take if they want to, but if they get bored they can just stop coming. The kids are in high school.

Specifically, I'd think that my activities could be changed to be more exciting and let the students do more from the get go, I'm just not sure how I could do that.

Answer 1

Assuming that you have reasonably motivate students in the first place, the first rule of motivation is to explain the goal, and where that fits into a larger framework. So, if you're teaching CSS, you might show the kind of final product that you expect them to be able to make by the end of the course on day 1.

You can also explain the limits. Something like, "CSS doesn't let you make the websites interactive on it's own, but it's how we design the pages themselves, and it's a pre-requisite skill if you EVER want to be able to make those more involved, interactive web sites."

A little bit of contextualization goes a long way in keeping people interested, because we naturally lose interest when it feels like something is meandering and purposeless.

Answer 2

As Choirbean noted, this is fundamentally a question of motivation. I don't think it's about making something more "exciting." That is, the secret is not in something extrinsic, which is what makes this such a challenging issue whether it be front-end development or really any topic.

I draw on Daniel Pink's TED Talk whenever I think about getting students to do something. The gist is that there are "three elements of true motivation -- autonomy, mastery, and purpose." The key to start is autonomy; students need that freedom of choice to get personally invested and be motivated by more than a grade.

I can speak to autonomy with front-end development based on a project I did this year. I assign two HTML/CSS assignments. For each, they can make anything they want the subject of their pages: a travel destination, a TV show, a sports team, anything. That was the key. They were so excited about describing something they loved that they were invested enough in the topic to work on the HTML/CSS.

The requirements of the first assignment were the following:

• DOCTYPE
• html tags
• head tags
• body tags
• title element
• header element
• paragraph element
• proper filename
• bonus: comment with HTML definition

As you can see, it was elementary. That way they had mastery of HTML basics (i.e. the DOM) and could then grow to build something more sophisticated and aesthetically pleasing. With the second, they had to include the following:

• table
• link to external website
• button
• two divs (with div IDs)
• list
• heading
• paragraph
• three images
• text not left-aligned
• two fonts
• three colors
• additional HTML feature
• additional CSS feature

Nowhere did I grade the subject matter of their sites. Rather, I focused on the skills they needed to demonstrate competency in and let them prove to me -- in whatever form they liked -- that they were indeed competent in them. That freedom, to me, made the difference in motivating students to want to complete this work.

Answer 3

I teach game programming, and I have a very similar issue. Day 1: They want to make Overwatch, and on Day 2-End of the year, they want to play overwatch.

I usually start the year with an explanation of the parts that go into professional development and then explain that we are only scratching the surface of what is required to develop an AAA game, you might try the same.

Tell them a bit about how the web works, that there are engineers who work on the various parts, and that is their full-time job, and that they work in teams to create the functionality that you see on popular websites. Giving them this perspective can help them understand better how they can plan an important role in the development of websites by learning the material that you are about to teach them.

You might dissect YouTube. Talk about the native applications, the FE web applications (the player, the profile, my channel); the back end, the streaming service, the storage service, etc. Discuss how they need servers in every region of the world!

Answer 4

Another element to add to the solution is to slightly delay the HTML tags. You can start with a WYSIWYG web page tool. In that they create the web page that meets your listed objectives. Then you can switch from the visual results into the raw HTML. Using the generated HTML you can demonstrate simple changes to the code that are then visible in the rendered page. Add in simple CSS next, and they can witness the explosion of possibilities.

If you can do that yourself on a large-screen, or projector, in a short demonstration first, then have them do it themselves, while making it all fit into one class session, that would be good.

An additional tool would be a server for the room that each has a directory on that they can "publish" their page, and you can display it on the projector. Any simple server would work, even IIS on Windows XP could handle the task. That provides them with the chance to have their work on display as well, giving a nice ego boost, and likely increasing their investment in learning more to make it better.

Answer 5

In my client-side dev classes, I start by introducing the HTTP protocol so that the students can understand what really happens when they click one link or type one URL.

Then, I start with the flow:

Structure (HTML5) - Look (CSS) - Behaviour (JS)

They have three assignments which are in fact 3 iterations of the same: the first is the site with only the structure, then they add the look, and finally add some features like a store or something where they have to use JS / localstorage / JSON ...

This has worked for me.

But if your students are eager for more, you can build a REST API, provide them the basic HTML/CSS/JS concepts, and ask the students to develop a front-end for that App.

The number of hours that you have available will influence what you can do.