User Interface Development

Middle School – Wizard Level II – Class 1

About User Interface Development

Students in User Interface Development learn how to create stunning, interactive websites utilizing a variety of tools and techniques such as jQuery, Ajax, flexbox, CSS, API interfaces, and cookies in addition to standard HTML. Students produce useful web applications as well as a portfolio-quality final project utilizing interfaces to several popular applications. The complex programming included in this course is made fun and easy through engaging projects students love.

Learning Objectives

When students complete User Interface Development, they will be able to:

  • Understand foundational and advanced JavaScript/jQuery/Ajax skills 
  • Use advanced CSS symmetry and layout techniques
  • Interface to popular APIs to increase data sharing and functionality
User Interface DevelopmentExpand All Lessons
  • 1. JavaScript Refresher
    Review key JavaScript concepts from past classes.

    In this lesson, students review JavaScript functions, basic collision detection and animations to produce a fun pirate treasure hunt game. Students review score keeping and adding sound effects. Key CSS concepts are also reviewed to build a foundation for future skills used in the course.

  • 2. Let’s Learn Flexbox
    Create eye-pleasing l design concepts with Flexbox.

    In this lesson, students learn how to create symmetrically pleasing layouts using flexbox. Students create an interesting mine-sweepter style game using flexbox, CSS and JavaScript. Interactivity is added by creating clickable elements on the page.

  • 3. Let’s Learn Inputs
    Reveal a secret message with the HTML input tag inJavaScript.

    In this lesson, students create a spell-binding web page which prompts the user for input and checks the answer to reveal a secret message. Additional jQuery animations are introduced in this lesson. The HTML input tag, CSS transparency, and JavaScript logic are used to create a truly magical page.

  • 4. Inputs Part 2
    Answer questions with HTML radio buttons and drop-down list inputs.

    In this lesson, students use radio button input and drop-down lists to create a game utilizing images that hide after 60 seconds. Questions about the image are asked and answers are checked for correctness. JavaScript , jQuery, and HTML skills are used to build this complex game.

  • 5. Photo Editor I – Mid-Term Project
    Edit photos using your Flexbox, jQuery, HTML and CSS skills.

    In part one of this mid-term project, students create an interactive photo editor. Students utilize flexbox, jQuery, HTML, and CSS to create a dynamic and useful photo editor.

  • 6. Photo Editor II – Mid-Term Project
    Edit photos using your Flexbox, jQuery, HTML and CSS skills.

    In part two of this mid-term project, students complete an interactive photo editor. Students utilize flexbox, jQuery, HTML, and CSS to create a dynamic and useful photo editor. The result is an impressive portfolio quality project utilizing skills learned so far in this course.

  • 7. Validations
    Avoid errors by validating user input.

    In this lesson, students learn how to validate user input so that errors can be caught and corrected. Students create a form which collects name and email information. Data is validated for format and length.

  • 8. jQuery UI with CSS Combinators
    Utilize features of the jQuery UI Library.

    In this lesson, students utilize the jQuery UI Library to add interactions, widgets and effects. Students are introduced to CSS child, parent, and sibling combinators and create an interactive, sortable task list web application.

  • 9. Cookies
    Utilize the cookie.js library.

    In this lesson, students utilize the “contenteditable” attribute to make a notepad application. Students are introduced to the jQuery Prepend and Append functions to create a notepad web application. Information on the “sticky notes” is stored for later use using cookies.

  • 10. Intro to APIs
    Learn how APIs (Application Programming Interfaces) work.

    In this lesson, students explore APIs (Application Programming Interfaces) in order to receive data from other applications on the Internet. Students use an Ajax request to interface with YouTube’s API and create a video re-mix project.

  • 11. Photo Editor III – Finale Project
    Enhance your photo editor with popular APIs like Pixabay and Imgur.

    In this lesson, students create an interface to Pixabay’s API to enhance the photo editor from the mid-term project. Students create a pixabay search capability so that any image available can be utilized. A new method using a for loop is introduced in the process.

  • 12. Photo Editor IV – Finale Project
    Complete a portfolio-quality photo editor that uses popular APIs.

    This lesson completes a portfolio-quality final project utilizing APIs to both Pixabay and Imgur and creating “Instagram-like” photo filters for royalty-free images found on Pixabay. Students utilize knowledge and skills learned throughout the course to complete this complex and rewarding final project.

VR Capstone Class

Imagine putting a headset over your eyes and getting teleported to a virtual world. What if you built that world yourself? How exciting and entertaining would that be, right? In this course, we use the latest tools from Mozilla and Google to launch a VR game by the end of the course.

Class Schedule

All students start in Intro to Programming at Wizard Level I. If you have previous coding experience, take the Advanced Placement test. Returning students can continue with the class where they left off.

  • Intro to Programming (CLASS FULL)
    on Sundays (12 weeks, 1 class per week)
  • Intro to Programming (CLASS FULL)
    on Mondays (12 weeks, 1 class per week)
  • Intro to Programming
    on Fridays (12 weeks, 1 class per week)
  • Intro to Programming
    on Tuesdays (12 weeks, 1 class per week)
  • Intro to Programming
    on Sundays (12 weeks, 1 class per week)

Summer programs now available! 3-week summer classes are starting June 8, July 6, and August 3.
See details and enroll to save your spot.

Once a course begins, every student at any level enjoys the same benefits:

Twelve 1-hour classes
Code editor software subscription
Live 1-on-1 teacher help, including weekends
Online student community
24/7 Access to our coding platform
Web hosting & unlimited server space
Same day email support
Monitored, direct-messaging

Course Duration & Time Commitment
All courses are 12 weeks long. A Wizard will receive a certification for their achievement at the end of the course.

Expect a weekly time commitment of 2-3 hours. 1 hour of class time, plus 1-2 hours of practice time, with instructors support throughout, including weekends.

100% Guarantee

Our goal is to make all our students successful. If your child is not happy with our program, please notify us within the first four class sessions and you will receive a full refund.

Get Your Wizard Started

Pin It on Pinterest