User Interface Development
Middle School – Wizard Level II – Class 1
When students complete User Interface Development, they will be able to:
- Use advanced CSS symmetry and layout techniques
- Interface to popular APIs to increase data sharing and functionality
- 3. Inputs Part 2Answer questions with HTML radio buttons and drop-down list inputs.
- 4. ValidationsAvoid errors by validating user input.
In this session, students learn how to validate user input so that errors can be caught and corrected. Students create a form that collects name and email information. Data is validated for format and length.
- 5. Let’s Learn FlexboxCreate eye-pleasing l design concepts with Flexbox.
- 6. Photo Editor I – Mid-Term ProjectEdit 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.
- 7. Photo Editor II – Mid-Term ProjectEdit 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.
- 8. Media QueriesUse different styling for different types of devices with media queries.
In this session, students learn how to use media queries to handle styling for different screen sizes. Users view websites and apps on computers, phones, tablets and other media. Students will use the meta tag to control the browser view. With the CSS media queries they’ll code a tree that grows as the screen expands.
- 9. jQuery UI with CSS CombinatorsUtilize features of the jQuery UI Library.
In this session, 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
- 10. Local StorageSave data using local storage in the browser.
In this session, students store data for the first time using local storage in their browser. They build a notepad application that can read and write data. Students also use attributes to make content editable within tags creating truly dynamic content.
- 11. Activity Tracker – Final ProjectStart the wireframe of your activity tracker.
In this session, students utilize their HTML/CSS and jQuery skills to build an activity tracker app. They’ll start with the design and framework by adding styles and a dropdown input. Students also build a helpful timer feature to track activity minutes.
- 12. Activity Tracker II – Final ProjectAdd logic and complete your activity tracker.
In this session, students complete their activity tracker app. They’ll store their activities in local storage and can show a progress bar to users. The final product is a fully functional application that helps kids get moving!
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.
#1 Most Comprehensive Program for Your Student’s Success!
The CodeWizardsHQ program comes with everything your child needs to be successful in learning to code.
All of the below are included at no extra cost.
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.
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.