User Interface Development

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.

In this session, 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 session. The HTML input tag, CSS transparency, and JavaScript logic are used to create a truly magical page.

In this session, 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.

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.

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

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.

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. 

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.

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

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.

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.

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!