In this single lesson, students will use HTML, CSS, and Javascript to create and style a single page web application that will play sound effects or musical files with the click of a button.
In this course, students will learn how to create a web based application using fundamental HTML, CSS, and Javascript and using events to trigger sound effects. HTML and CSS are the foundation of the web. So, they're also the foundation for taking tech skills to the next level. Having a handle on the fundamentals will make learning another programming language like Javascript much easier. Designing custom functions which handle different events, like mouse clicks, are essential for interactive web design. This lesson introduces those concepts in a fun and customizable way.
This class will show and explain how to create a basic HTML layout, style it with CSS, and then use Javascript to trigger events that activate sound effects or musical files. I will also give out a challenge after every class so students can experiment and grow their knowledge. By the end of the course, students will have the knowledge of how to create a basic web based application using HTML, CSS, and Javascript to play sound effects with a button click.
We play Kahoot to warm up to HTML, CSS, and JavaScript topics so students will need access to that site. Students should be able to type on a keyboard and have some coding knowledge. This lesson will require a computer with internet access and the ability to navigate to CodeSandbox.io for a shared coding environment.
Learning Goals
-Basic HTML Layout with markdown sections for titles, body paragraph, and interactive buttons.
-Basic CSS Styling applying background colors, text colors, element location, and interactive animations.
-Basic Javascript creating variables, adding event listeners, crafting functions, and displaying data from the DOM.
Other Details
External Resources
In addition to the Outschool classroom, this class uses:
I have more than a decade of teaching experience including the last five years teaching online. I've also trained and worked as a full stack web developer over the last several years and am happy to bring together my two expertise to help your student. =)
Reviews
Are you planning to use state funding, such as an Education Savings Account (ESA), Micro-grant or scholarship to help pay for your learner’s education?