Build a Music Player - New Project for Middle School

Feb 3, 2017 1:41:22 PM

Making websites is fun, well at least I think so. When I was a teacher, I made sure to include a web development topic with my students ages 12-14, so that students had the opportunity to learn HTML and CSS. 

How to teach students ages 12 - 14 

In recent years, I introduced a new topic that built upon skills students had already learned and also introduced Javascript. The challenge was to build a web-based music player where users could play, stop and pause a song. It proved to be a big success so I thought it would be a good idea to share the project with Codio users.

Get Started
I highly recommend that you complete the HTML & CSS I, HTML & CSS II and Javascript for web development courses that are already available on Codio before attempting this project. If you are a teacher looking for professional development, you can use Codio for free. 

You will find this project in the courses section of Codio in Introduction to Web Development -> Mini Projects. Give it a go and let me know how you/your students get on. You will need to be Logged In or sign up as a teacher for a one-month trial today!

Here's one version of the music player.

example.png

As you can see, there are a number of buttons that will control a song. They will learn about the roles of HTML, CSS and Javascript and how they work together. Students can work at their own pace and there are a number of extension tasks available but it should take around three lessons to complete. And don't worry, I've also included some teacher-only solutions just in case.

Not a member of Codio? Sign up as a Teacher for a one-month trial today!

Thomas Smith

Written by Thomas Smith

Tom is Head of Schools Liaison at Codio having been a computer science teacher for nine years. He enjoys web development and teaching others how to code.