Lesson Plan Outline

Home Page

  • Introduction to the team (Roles & Contributions)

  • Outline of Lesson

  • Reveal the goal of the project: “to let students develop their coding skills in frontend/UI…help them become more fluent in coding frontend…become experts…"

Customization 1

  • Definitions of properties: Color, Font, Layout, Icons, Interactivity, Accessibility

  • Going over how to add/change colors: changing the color of text, changing the background color, themes

  • Images: data compression, PIL, numpy, base 64, io

Customization 2

Section 1

Introduction (5 minutes)

  • Introduce the topic of advanced UI design and discuss the importance of creating effective interfaces for modern applications.
  • Explain that students will learn about advanced UI design elements and techniques and will apply these principles to design their own interfaces. Body (45-60 minutes)
  • Introduce the key elements of advanced UI design, such as microinteractions, animations, and visual feedback.
  • Show examples of interfaces that use these elements effectively and discuss how they contribute to the overall user experience.
  • Ask students to analyze and evaluate the effectiveness of these elements in the examples shown. Conclusion (5-10 minutes)
  • Review the key concepts covered in the lesson and discuss the importance of effective UI design in modern applications.
  • Encourage students to continue exploring advanced UI design techniques and principles on their own.

Section 2

Introduction (5 minutes):

  • Explain that animation is a technique used to bring static images to life by creating the illusion of motion through a series of images displayed in rapid succession.
  • Explain that animations can be created using code and that today they will learn how to code basic animations. Demonstration (10 minutes):
  • Show students a few examples of animations created using HTML, CSS, and JavaScript.
  • Explain how CSS can be used to define styles and animations for HTML elements, while JavaScript can be used to manipulate the HTML and CSS code to create dynamic effects.
  • Demonstrate how to use CSS keyframes and the animation property to create simple animations, such as moving a shape across the screen.

Building JavaScript Game

Customization Goals

  • Snakeskin Change
  • Apple Change
  • Background Change
  • Animations

Lesson Plan

  • JavaScript basic run-down
  • Snake game customization run-down
  • Snake game customization before and after

Hacks

Hacks for Customization 1 and 2

  • Clone the template repo given and replicate the screen video of the example using elements from the lesson (.9)
  • Add an own element from the lesson to make student's repository unique (.9)
  • EXTRA Make a UI element that was seen on one of the example websites (.2)

Hacks for JavaScript

  • Customizing an element of the game
  • Play the snake game until the score of 10
  • Take note on how to customize (make their own step-by-step guide)
  • EXTRA Play the snake game until 50 and a selfie with your score (NO CHEATING..if we suspect you we will do a live review of your snake playing)