Web+Animation

This course focuses on HTML5, CSS, jQuery, and MaterializeCSS. HTML5, the new web standard that has been adopted by Apple, Google and many others, lets web developers create advanced graphics, typography, animations and transitions without relying on third party browser plug-ins. MaterializeCSS is modern responsive front-end framework based on Google's Material Design and allows for transitions and animations leading to a beautiful user experience.

= Block 2A - E201 =

__ Student Email Site __


** Daily Activities **

) to make text go on to a new line __**New Jersey Core Curriculum Content Standards**__ (covered daily) 6.3 (Social Studies; Active Citizenship in the 21st needed to be active, informed citizens who value diversity and promote cultural understanding by working collaboratively to address the challenges that are inherent in living in an interconnected world. • 8.1 (Technology, Educational Technology): All students will use digital tools to access, manage, evaluate, and synthesize information in order to solve problems individually and collaboratively and to create and communicate knowledge. • 9.1 (21st-Century Life and Careers, 21st-Century Life & Career Skills): All students will demonstrate the creative, critical thinking, collaboration, and problem-solving skills needed to function successfully as both global citizens and workers in diverse ethnic and organizational cultures. • 9.2 (21st-Century life and Careers, Personal Financial Literacy) All students will develop skills and strategies that promote personal and financial responsibility related to financial planning, savings, investment, and charitable giving in the global economy. • 9.3 (21st-Century Life and Careers, Career Awareness, Exploration & Preparation): All students will apply knowledge about and engage in the process of career awareness, exploration, and preparation in order to navigate the globally competitive work environment of the information age.
 * **Date** || **Classwork** ||
 * Final Exam Day || * Introduce API's with OMDB
 * Discuss WWDC
 * Final Thoughts
 * Class Survey ||
 * 6-13-16 || * Teacher will give each student advice on how to improve your portfolios ||
 * 6-9-16 || * Finish your portfolio
 * Share your portfolio with the class and leave feedback on your classmates' portfolios ||
 * 6-7-16 || * Continue working on your portfolio
 * Submit your portfolio on Google Classroom
 * If you finish early, go to Codecademy.com and continue working on the jQuery course ||
 * 6-1-16 || * Do Now: Explore the following icon libraries and see if you can get icons from each to appear on your portfolio
 * Devicons
 * Font Awesome
 * Stand-Up Discussions:
 * What have you done so far?
 * What are you struggling with?
 * What will you accomplish by the end of the block?
 * Continue Portfolio Project
 * You are going to build your professional portfolio. It should have the following sections
 * About Me
 * Projects
 * Skills
 * Social Links
 * You can add more sections if you like
 * Your 'About Me' should be a description about you
 * Your 'Projects' Section should be descriptions about your projects and a link or button that launches those projects in another tab
 * Your 'Skills' should show what skills you have
 * Your 'Social Links' should be links to your social media accounts
 * Remember to abide by the school AUP. No pictures of yourself, don't use your full name, and links on your portfolio shouldn't also give out personal info on you. For example, if you have a twitter account that has your full name or picture of you then do not include it on your portfolio.
 * Use html, css, and materialize to build your site. Make sure to push your code and make it a live site using github.
 * Closure: What did you accomplish so far ||
 * 5-26-16 || * Do Now: Start to think about what you want your portfolio project to look like
 * Introduce Portfolio Project
 * You are going to build your professional portfolio. It should have the following sections
 * About Me
 * Projects
 * Skills
 * Social Links
 * You can add more sections if you like
 * Your 'About Me' should be a description about you
 * Your 'Projects' Section should be descriptions about your projects and a link or button that launches those projects in another tab
 * Your 'Skills' should show what skills you have
 * Your 'Social Links' should be links to your social media accounts
 * Remember to abide by the school AUP. No pictures of yourself, don't use your full name, and links on your portfolio shouldn't also give out personal info on you. For example, if you have a twitter account that has your full name or picture of you then do not include it on your portfolio.
 * Use html, css, and materialize to build your site. Make sure to push your code and make it a live site using github.
 * Activity: Work on Portfolio Project
 * Closure: What did you accomplish so far ||
 * 5-24-16 || * Work on the 'jQuery' course on Codecademy.com ||
 * 5-20-16 || * Do Now: Finish designing your notes app
 * Introduce: Portfolio Project
 * Activity: Begin Portfolio Project
 * HW: Continue working on Portfolio Project ||
 * 5-18-16 || * Do Now:
 * Add classes to make your tasks black or gray with a strike-through depending on whether the task is done or not done.
 * Add the remaining tasks counter also
 * Demo: Finish up remaining tasks counter
 * Activity: Finish your remaining tasks counter than design your to-do list app so that it looks appealing to your users
 * HW: Finish designing your to-do list app ||
 * 5-16-16 || * Do Now: Get checkboxes to appear next to each item on your to-do list
 * Demo: Continue working on To-Do List
 * Activity: Try it on your own
 * HW: Finish working on your To-Do List up to the part that was demoed in class ||
 * 5-12-16 || * Do Now: Finish getting your list to appear on web page using $scope, ng-controller, and ng-repeat on AngularJS
 * Demo: Continue working on To-Do List
 * Activity: Try it on your own
 * HW: Finish working on your To-Do List up to the part that was demoed in class ||
 * 5-10-16 || * Do Now: Share your Mad Libs Short Story project with your classmates. Play your classmates' projects and leave each of them feedback by replying to their post in Google Classroom
 * Demo: Angular To-Do List with $scope and ng-repeat
 * Activity: Try it on your own
 * HW: Finish creating your To-Do list program ||
 * 5-6-16 || * Continue working on Mad Libs Short Story project
 * Get the program to work
 * Then design it with MaterializeCSS
 * If you finish early, continue working on the 'jQuery' course on Codecademy.com ||
 * 5-4-16 || * Do Now: Read 'What is Angular?'
 * Introduce: Angular.js
 * Compare jQuery and Angular.js
 * Demo data-binding in a short story
 * Activity: Create a Mad Libs game website
 * HW: Finish your Mad Libs game website ||
 * 5-2-16 || * Do Now: Demo your trivia game to the class
 * Watch and Discuss: Codecademy videos
 * Introduce and Demo Codecademy
 * Activity: Create an account and try the jQuery class on Codecademy
 * Closing Activity: Continue the jQuery class Codecademy online course ||
 * 4-28-16 || * Do Now: Share your trivia game on Google Classroom and try your classmates' games. Leave them feedback by commenting on their post in Google Classroom
 * Troubleshoot/Fine-tune code
 * Reset input fields
 * Replay button
 * Update your trivia game
 * Reset input fields
 * Replay button
 * Improve the overall look and feel
 * HW: Finish fine-tuning your site. ||
 * 4-26-16 || * Do Now: Continue working on your trivia game project. Your teacher will come around to check your progress
 * jQuery Demo: Add questions to your trivia game with materializecss, css animations, and jquery
 * Activity: Add questions to your trivia game
 * Project is due at the end of class ||
 * 4-18-16 || * Do Now: Continue working on your trivia game project. Your teacher will come around to check your progress
 * jQuery Demo: Add questions to your trivia game with materializecss, css animations, and jquery
 * Activity: Add questions to your trivia game
 * HW: Continue working on your trivia game ||
 * 4-14-16 || * Do Now: Continue working on your trivia game project. Your teacher will come around to check your progress
 * jQuery Demo: Add questions to your trivia game with materializecss, css animations, and jquery
 * Activity: Add questions to your trivia game
 * HW: Continue working on your trivia game ||
 * 4-12-16 || * Do Now: Finish Full Name Site from last class
 * Review: How to capture input from forms
 * Go over Full Name Site
 * jQuery Demo: Make a trivia game with materializecss, css animations, and jquery
 * Activity: Try it yourself
 * HW: Continue working on your trivia game ||
 * 4-8-16 || * Do Now:
 * Full Name Site - Make a simple site that has a form with three input fields asking for the user's first name, middle name, and last name.
 * When the user clicks a submit button their full name should appear somewhere on the web page.
 * Push to a new repo, make it a live site, and submit the website and repo link
 * Activity: Register and log into codecademy.com and work on the 'jQuery' course ||
 * 4-6-14 || * Do Now: Finish up mouseenter animations
 * Demo: Animate on button click
 * Activity: Try it yourself
 * jQuery Demo: Make a trivia game with materializecss, css animations, and jquery
 * Activity: Try it yourself
 * HW: Add design to your trivia game ||
 * 4-4-16 || * Do Now: Make a materialize site with three rows and three pictures in each row. Make a new repo, push your files up to github, and make it a live site.
 * Introduce jQuery
 * Demo: Add animations with jquery event listeners
 * Activity: Try it yourself
 * HW: Finish adding animations with jquery event listeners to your picture site. ||
 * 3-31-16 || * Do Now: Share your movie project with animations
 * Extra Help with animations
 * Discuss and Demo: Making your site mobile-friendly
 * Viewport
 * Sidenav
 * Activity: Try it yourself - make your movie project mobile-friendly
 * HW: Finish making your movie project mobile-friendly ||
 * 3-29-16 || * Do Now:
 * Explore Animate.css by Dan Eden
 * Add this library to your movie project
 * Demo: Using Animate.css in your web projects
 * Activity: Try it yourself - Add animations to your movie site
 * HW: Finish adding animations to your movie site ||
 * 3-11-16 || * Do Now: GitHub Practice
 * Log into GitHub.com and create a new repository.named github-practice.
 * Create a simple website that displays one of your favorite quotes.
 * Push your website into your github-practice repository.
 * More GitHub Practice
 * Continue Project: Movie Fan Page
 * Pick one of your favorite movies and make a fan page out of it. Use all the features of MaterializeCSS we have covered including:
 * Wave Effects
 * Parallax
 * Scrollspy
 * Text, Image, and/or Reveal Cards
 * Icons
 * Buttons
 * Also include another feature from MaterializeCSS in your page that we haven't covered yet
 * Due: Next class
 * Closure: What do you feel you need a better understanding of in this class? ||
 * 3-9-16 || * Do Now: Read the documentation on MaterializeCSS.com and try to see if you can get icons and buttons on one of your Materialize sites.
 * Demo:
 * Icons
 * Buttons
 * Project: Movie Fan Page
 * Pick one of your favorite movies and make a fan page out of it. Use all the features of MaterializeCSS we have covered including:
 * Wave Effects
 * Parallax
 * Scrollspy
 * Text, Image, and/or Reveal Cards
 * Icons
 * Buttons
 * Also include another feature from MaterializeCSS in your page that we haven't covered yet
 * Due: 3/15
 * Closure: What are you struggling with in class so far? ||
 * 3-7-16 || * Do Now: Create a website of a poem or lyrics to a song and use parallaxed images to match the lines of the poem or song
 * Example: Fire and Ice
 * Review:
 * Wave buttons
 * Parallax
 * Scrollspy
 * Demo: Text and Image Cards
 * Closing Activity: Try it on your own ||
 * 3-3-16 || * Do Now: Code your pyramid of pictures website so that each picture takes up the full size of the screen horizontally on a mobile device
 * Review: Setting up a MaterializeCSS website
 * Demo:
 * Wave buttons
 * Parallax
 * Scrollspy
 * Activity: Try it on your own
 * HW: Make a parallax website based on a poem or lyrics to a song ||
 * 3-1-16 || * Do Now: Look through MaterializeCSS.com
 * Introduce MaterializeCSS
 * Demo:
 * How to set up your html file for MaterializeCSS
 * How to create a navigation bar with MaterializeCSS
 * Activity: Try it on your own
 * HW: Make a Materialize site with at least three parallax images and three text sections. ||
 * 2-26-18 || * Do Now:
 * Join the web-animation-2016 organization on GitHub
 * Click on each of your classmates' profiles and 'follow' them
 * Go to hangouts.google.com and start a chat with someone you want to partner up with
 * Discuss github organization
 * Transfer web-animation repo into organization
 * External Stylesheet Exercise
 * Review:
 * How to host webpages with github
 * Review easier way to push files to github
 * Activity: Host your First Full Website project on github
 * Introduce: MaterializeCSS
 * Closure: Try setting up a MaterializeCSS website ||
 * 2-24-16 || * Do Now: What are external stylesheets for and how do you use them?
 * Demo:
 * Review external stylesheets
 * How to host webpages with github
 * Review easier way to push files to github
 * Activity: Host your First Full Website project on github
 * Introduce: MaterializeCSS
 * Closure: Try setting up a MaterializeCSS website ||
 * 2-22-16 || * Do Now: Open up your project through sublime and on the browser
 * Demo: Easier way to push files to GitHub
 * Discuss/share projects
 * Demo: External CSS stylesheets
 * Activity: Use External CSS stylesheets
 * Closure: Submit your github repo link in Google Classroom Project post. ||
 * 2-18-16 || * Do Now:
 * Create a website that has a list of people. (Example: Superheroes, NBA Basketball team, Harry Potter characters, etc...) Use div, h1, ul, li, and img tags. Style the page using internal css. Include a colored background, colored text, and margins for the text and images.
 * Push to GitHub and paste link to submit your work.
 * If you can't push to GitHub press the 'Add' button and select your html file to submit your work.
 * Introduce Hangout Session
 * Demo:
 * Example Sites
 * Linking Sites
 * Continue First Full Website Project
 * Closure: How do you link two web pages that you created together?
 * HW: Project due next class ||
 * 2-16-16 || * Do Now:
 * Push your CSS video tutorial files up to github
 * Ask a classmate if you need help
 * Submit your html-css-video-tutorials github link
 * Introduce CSS
 * Introduce Full Website Project
 * Create Hangout Session
 * Class Activity:
 * Finish CSS tutorials
 * Begin First Full Website Project
 * Closure: What did you learn about CSS today?
 * HW: Finish your home page and one sub page of your project ||
 * 2-10-16 || * Do Now:
 * Fill out Second Week Questionnaire
 * Follow MrMendonez on GitHub
 * Bookmark web-animation-2016 repository
 * Introduce CSS
 * CSS Video Tutorials 14 - 19
 * Closure: What did you learn about CSS?
 * HW: Finish CSS Video Tutorials. ||
 * 2-8-16 || * Do Now:
 * Download your homework from Google Drive or email
 * Create a GitHub account. You can use any email address you want.
 * Demo:
 * Git and GitHub
 * How to push files to GitHub
 * Activity: Push your HTML Video Tutorial Files to GitHub
 * Closure: What did you learn about GitHub today?
 * HW: CSS Video Tutorials 9 - 12 ||
 * 2-4-16 || * Do Now: Make a new webpage with the following:
 * Basic HTML foundation
 * h1 tag of the title of your favorite song
 * h2 tag of the name of the musical artist
 * p tag of at least 4 lines from that song
 * use the break tag (
 * Demo: More basic html tags
 * Introduce: Learning Web Design
 * HTML Video Tutorials 1 - 4
 * HW: HTML Video Tutorials 5 - 8 ||
 * 2-2-16 || * Do Now: Assign seats
 * Tell me a bit about yourself
 * Explore class wiki, Google Classroom, and School Email
 * Go over Syllabus and Course Expectations
 * Explore Insight and Google Drive
 * Student & Parent Info
 * Introduce Sublime Text 3
 * Demo: Create your first web page
 * Closure: What are some new things you learned today about Google Classroom? ||

__**Formative Assessments**__ • Do Now / Closures • Application Exercises and Class work produced individually and in groups • Internet Research Activities • Observation / verbal check-for-understanding • Presentations • Chapter Quizzes • Case studies • Homework

This class follows the South Brunswick School District Acceptable Use of Technology Agreement