Introduction+to+Web+Design+2014+-+2015

This course covers the basics of creating and hosting web pages through student's Google Drive accounts. Students will learn the essential languages of web design including HTML, CSS, and JavaScript. Students will also be introduced to Bootstrap - the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

Block 2B - E201 Email/Google Drive Account: darryl.mendonez@sbschools.org Learn Web Design eBook Syllabus/Grading Policy Student Email Site Google Drive Quarter 1 Presentation File Quarter 2 Presentation File




 * Daily Activities **


 * ** QUARTER 1 ** || **Powerpoint Presentation File for Quarter 1** (Updated daily) ||
 * **Date** || **Classwork** ||
 * 9-5-14 || * Do Now: Assign seats
 * Finish Info & Interests
 * Explore class wiki and School Email
 * Go over Syllabus and [[file:Teacher Expectations 2013 - 2014.docx.docx|Course Expectations]]
 * Explore Insight and Google Drive
 * Create classroom folder
 * Ice Breaker
 * 20 Questions Character Game
 * Favorites Presentation
 * Closure: What are some new things you learned today about Google Drive?

*Reminder: Pre Assessment will be given next class || >>> function loadrepeateddivs{ >>> >>> $("#navigation-bar").load("loadNavigationBar.html"); >>> >>> } >>> jQuery(document).ready(function { loadrepeateddivs; }); __**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.
 * 9-9-14 || * Do Now: Create a Google Document in your Shared with Mr. Mendonez folder and name it 'Quarter 1 Do Now's' then answer the following question:
 * What new devices do you want Apple to come out with and why?
 * Pre-Assessment Project
 * Research: Apple's Leadership and Apple Events
 * Closure: Which two Apple executives do you think are the most interesting and why? ||
 * 9-11-14 || * Do Now: Discuss with a neighbor what you found interesting about apple's recent announcements
 * <span style="font-family: Arial,Helvetica,sans-serif;">Watch: Apple's iPhone 6 and Apple Watch Event
 * <span style="font-family: Arial,Helvetica,sans-serif;">Closure: What part of the presentation did you find the most interesting? ||
 * 9-15-14 || * <span style="font-family: Arial,Helvetica,sans-serif;">Do Now: In your 'Quarter 1 Do Now' document answer the following questions.
 * <span style="font-family: Arial,Helvetica,sans-serif;">What have you learned about Apple's new products from watching their presentation that you didn't know about before?
 * <span style="font-family: Arial,Helvetica,sans-serif;">In what ways is it better to watch their full presentation of new products rather than reading descriptions, seeing pictures, and watching video clips online?
 * <span style="font-family: Arial,Helvetica,sans-serif;">Continue watching: Apple's iPhone 6 and Apple Watch Event
 * <span style="background-color: transparent; font-family: Arial,Helvetica,sans-serif;">Closure: What part of the presentation did you find the most interesting and why? ||
 * 9-17-14 || * Do Now: Read the following article ' Which Coding Language is Right for You?' and answer the following in your Quarter 1 Do Now document.
 * Which languages interests you and why?
 * Introduction to HTML 5
 * Demonstration: Creating your first website
 * paragraph, bold, italicize, underline, different header sizes, and line break
 * Closing Activity: Try it yourself
 * Homework: Study for quiz on HTML 5 Vocabulary and Advantages ||
 * 9-19-14 || * Do Now: Study for Quiz
 * **HTML 5 Vocabulary and Advantages Quiz**
 * Practice: Create another website that will display a paragraph. Use the following tags: paragraph, bold, italicize, underline, different header sizes, and line break
 * Demonstration: More common formatting tags
 * Closing Activity: Try it yourself ||
 * 9-23-14 || * Do Now: Finish your website from last class that includes: Hyperlink, an image, an unordered list, and an ordered list.
 * Demonstration: email and tables
 * Activity: Try it yourself
 * Closing Activity: Putting it all together use all the common formatting tags you've learned so far to make a new webpage.
 * Homework: Study vocabulary and advantages of HTML 5 and all the common formatting tags for Chapter 1 test. ||
 * 9-29-14 || * Do Now: <span style="font-family: Arial,Helvetica,sans-serif;">Read 'From the Ivy League to the State Schools, Demand for Computer Science is Booming' and answer the following:
 * <span style="font-family: Arial,Helvetica,sans-serif;">Why do you think there is such a boom in students pursuing computer science?
 * <span style="font-family: Arial,Helvetica,sans-serif;">The article explains that there isn't enough instructors to teach the high number of students who want to learn computer science. How do you think colleges should handle this situation?
 * Activity: Putting it all together
 * Recreate this PDF file as a webpage - Apple TV Review
 * Demonstration: Blogger
 * Closing Activity: Create blog posts of Common Formatting Tags
 * Homework: Study vocabulary and advantages of HTML 5 and all the common formatting tags for Chapter 1 test next class. ||
 * 10-1-14 || * Do Now: Study for Test
 * Chapter 1 Test on HTML 5
 * Part 2: Recreate this PDF into a website
 * Review: South Brunswick School District Acceptable Use Policy
 * Demonstration: Blogger
 * Closing Activity: Create blog posts of Common Formatting Tags ||
 * 10-3-14 || * Do Now: Read the South Brunswick School District Acceptable Use Policy and answer the following in your Do Now log
 * Do you think item #12 under 'Terms of Agreement for Students' is an important part of the school district's acceptable use policy? Why or why not?
 * Research: Cyber Stalking
 * Take This Lollipop Activity
 * Demonstration: Blogger
 * Example
 * Introduce: Learn Web Design Website and Drive Notepad
 * Closing Activity: Get familiar with Drive Notepad ||
 * 10-7-14 || * Do Now: Copy and paste the HTML code from your Chapter 1 Test - iPhone 6 Review file into a Drive Notepad document. Name it 'iphone6review.html'
 * Demonstrate: How to host a webpage using Google Drive and URL Shortener
 * Guide to hosting a webpage
 * Activity: Write your own review of an Electronic Device or App
 * Example: Apple TV Review
 * Closure: Share your review ||
 * 10-9-14 || * Do Now: Finish your webpage of a review on an Electronic Device or App
 * Guide to hosting a webpage
 * Example: Apple TV Review
 * Activity: Write a separate blog post on each the following topics
 * Drive Notepad
 * What is it?
 * Why use it?
 * What do you like about it and/or don't like about it?
 * How to install it
 * How to host a webpage using Google Drive ||
 * 10-13-14 || * Do Now: Read How To Get A Job At Google and respond to the following in your Do Now log
 * List the 5 hiring attributes and summarize each of them
 * Do you agree that these are important attributes to look for when looking to hire someone at Google?
 * Demonstrate: How to host your own pictures and how to change the size of pictures by code
 * Try It Yourself Activity:
 * Find a recipe online and make your own website of that recipe adding pictures of the finished product, each ingredient, and each step
 * Example: Flour-less Brownies
 * Follow the same structure for your recipe webpage
 * Closure: Fill out this form to submit your recipe website along with your blog and app and device review website from last class
 * Recipe Google Form ||
 * 10-15-14 || * Do Now: Continue your recipe webpage
 * Make sure it has a picture for the finished product, for each ingredient, and for each step
 * Demonstrate: How to edit pictures using the Google Drive app PicMonkey
 * Try It Yourself Activity:
 * Make edits to the pictures you used in your recipe webpage
 * Closure: Fill out this form to submit your recipe website along with your blog and app and device review website from last class
 * Blog, App or Device, and Recipe Links Form ||
 * 10-17-14 || * Do Now: Write two blog posts on the following topics
 * Hosting your own images and changing the size of an image using code
 * PicMonkey
 * Demonstrate How to take screenshots & HTML video tutorials
 * Activity: Create a new folder inside your 'Websites' folder and name it 'HTML and CSS Tutorials'. Make sure the folder is set to 'Public on the Web'. Follow along each video and create a webpage for each one. Pause the video while you code
 * Closure: When you have finished videos 1 - 8 fill out the following form to submit the links to each webpage you created
 * HTML Video Tutorials Links ||
 * 10-21-14 || * Do Now: Add screenshots to the blog posts you wrote on 10-17-14
 * Activity: Continue HTML video tutorials
 * Discover: Center and Right Align & Special Symbols
 * CSS Chapter 1 & 2: Introduction to CSS, Spacing, and Color
 * Activity: Add CSS to your Recipe Webpage
 * Closure: Write a blog post on CSS and on adding color to your webpage with screenshots ||
 * 10-24-14 || * Do Now: Read over CSS Chapter 1: Introduction to CSS
 * CSS Chapter 1 & 2: Introduction to CSS, Spacing, and Color
 * Activity: Add CSS to your Recipe Webpage
 * Closure: Write a blog post on CSS and on adding color to your webpage with screenshots ||
 * 10-28-14 || * Do Now: Review CSS Chapter 1: Introduction to CSS
 * Review Game: Kahoot!
 * Discuss CSS & Recipe Website
 * Finish Learn HTML and CSS in 30 minutes
 * Activity: Add a background color and border around your ingredients and steps in your Recipe Webpage
 * Closure: Write a blog post on CSS and on adding color to your webpage
 * HW: Study for HTML and CSS Test ||
 * 10-30-14 || * Do Now: Read HTML5 Finalized, Finally
 * Activity: Finish adding CSS to your recipe page
 * Add a colored background
 * Add a different colored background for ingredients and directions
 * Add a border around ingredients and directions
 * Position the main picture, the ingredients, and the directions in a row
 * Example: Flour-less Brownies with CSS
 * HW: **Study for HTML5/CSS Test**. Know the following:
 * Part I
 * HTML5 - Definitions and Advantages
 * CSS - Intro, Types, Use, Benefits
 * Part II
 * HTML5 - Page structure and common formatting tags
 * CSS - Know how to code background color for entire page, background color for div, border for div, and how to move a div ||
 * 11-3-14 || * Do Now: Review
 * HTML5 - Definitions and Advantages
 * CSS - Intro, Types, Use, Benefits
 * Review Game: Kahoot!
 * Closing Activity: Watch CSS Video Tutorials and create CSS/HTML files
 * HW: ** Study for HTML5/CSS Test ** . Know the following:
 * Part I
 * HTML5 - Definitions and Advantages
 * CSS - Intro, Types, Use, Benefits
 * Part II
 * HTML5 - Page structure and common formatting tags
 * CSS - Know how to code background color for entire page, background color for div, border for div, and how to move a div ||
 * 11-5-14 || * Do Now: Study for test
 * **HTML5/CSS Test**
 * Part I - Definitions and Facts
 * Part 2 - Coding with CSS
 * Submit your link to Part II by filling out this form.
 * Activity: Watch CSS Video Tutorials and create CSS/HTML files
 * Closure: When you have finished videos 9 - 19 fill out the following form to submit the links to each webpage you created
 * CSS Video Tutorials Links ||
 * 11-13-14 || * **Finish HTML5/CSS Test**
 * Part 2 - Coding with CSS
 * Submit your link to Part II by filling out this form.
 * Activity: Watch CSS Video Tutorials and create CSS/HTML files
 * Closure: When you have finished videos 9 - 19 fill out the following form to submit the links to each webpage you created
 * CSS Video Tutorials Links ||
 * ~ **Quarter 2** ||~  ||
 * 11-17-14 || * Do Now: Look up your HTML5/CSS Test grade on PowerSchool
 * Discuss: HTML5/CSS Test and Q1 grades
 * Activity: Watch CSS Video Tutorials and create CSS/HTML files
 * Closure: When you have finished videos 9 - 19 fill out the following form to submit the links to each webpage you created
 * CSS Video Tutorials Links ||
 * 11-19-14 || * Do Now: Finish CSS Video Tutorials and create CSS/HTML files
 * When you have finished videos 9 - 19 fill out the following form to submit the links to each webpage you created
 * CSS Video Tutorials Links
 * Project: Create your First Website
 * Based on the CSS Video Tutorials you are going to create your first website. Make the site about yourself while still following the school's AUP. You can use your first name but not your last and do not use any personal pictures of yourself. You can use bitstrips.com to create an avatar of yourself. Your home page should be an introduction to yourself and your website. You can choose the topics of the other pages in your websites. Some examples could be favorite movies, music, tv shows, sports, etc. You should have a home page and at least three sub pages. For a homepage and three sub pages you will earn up to an 80%. For every other sub page you will earn an extra 5%.
 * Closure: What style of CSS is best to use when creating a website with multiple webpages to keep the styles consistent? ||
 * 11-21-14 || * Do Now: Finish CSS Video Tutorials and create CSS/HTML files
 * When you have finished videos 9 - 19 fill out the following form to submit the links to each webpage you created
 * CSS Video Tutorials Links
 * If you do not finish you must finish it for homework
 * Demonstration: External CSS
 * Closing Activity: Create your First Website Project
 * Based on the CSS Video Tutorials you are going to create your first website. Make the site about yourself while still following the school's AUP. You can use your first name but not your last and do not use any personal pictures of yourself. You can use bitstrips.com to create an avatar of yourself. Your home page should be an introduction to yourself and your website. You can choose the topics of the other pages in your websites. Some examples could be favorite movies, music, tv shows, sports, etc. You should have a home page and at least three sub pages. For a homepage and three sub pages you will earn up to an 80%. For every other sub page you will earn an extra 5%.
 * Use this code for external CSS:
 * <link href="css/styles.css" rel="stylesheet">
 * HW: Finish CSS Video Tutorials ||
 * 11-25-14 || * Do Now: Read 'Girls in IT: The Facts Infographic'. Create a 'Do Now Quarter 2 Log' document and answer the following:
 * What statistics did you find interesting and why?
 * Why do you think girls do not participate in Computer Science as much as boys?
 * What can be done to encourage more girls to learn Computer Science?
 * Create your First Website Project
 * Based on the CSS Video Tutorials you are going to create your first website. Make the site about yourself while still following the school's AUP. You can use your first name but not your last and do not use any personal pictures of yourself. You can use bitstrips.com to create an avatar of yourself. Your home page should be an introduction to yourself and your website. You can choose the topics of the other pages in your websites. Some examples could be favorite movies, music, tv shows, sports, etc. You should have a home page and at least three sub pages. For a homepage and three sub pages you will earn up to an 80%. For every other sub page you will earn an extra 5%.
 * Use this code for external CSS:
 * <link href="css/styles.css" rel="stylesheet">
 * Closure: When you finish your project fill out the following form to submit the links to each webpage you created:
 * Create your First Website Project Links ||
 * 12-1-14 || * Do Now: Read 'More than a game: why coding will help kids for life' and answer the following in your Q2 Do Now log
 * Copy and paste the one paragraph you found most interesting and write a paragraph explaining why you found this paragraph interesting and what you learned from this article
 * Create your First Website Project
 * Based on the CSS Video Tutorials you are going to create your first website. Make the site about yourself while still following the school's AUP. You can use your first name but not your last and do not use any personal pictures of yourself. You can use bitstrips.com to create an avatar of yourself. Your home page should be an introduction to yourself and your website. You can choose the topics of the other pages in your websites. Some examples could be favorite movies, music, tv shows, sports, etc. You should have a home page and at least three sub pages. For a homepage and three sub pages you will earn up to an 80%. For every other sub page you will earn an extra 5%.
 * Use this code for external CSS:
 * <link href="css/styles.css" rel="stylesheet">
 * Project must be submitted by 12/4
 * Closure: When you finish your project fill out the following form to submit the links to each webpage you created:
 * Create your First Website Project Links ||
 * 12-3-14 || * Do Now: Finish project
 * Create your First Website Project
 * Based on the CSS Video Tutorials you are going to create your first website. Make the site about yourself while still following the school's AUP. You can use your first name but not your last and do not use any personal pictures of yourself. You can use bitstrips.com to create an avatar of yourself. Your home page should be an introduction to yourself and your website. You can choose the topics of the other pages in your websites. Some examples could be favorite movies, music, tv shows, sports, etc. You should have a home page and at least three sub pages. For a homepage and three sub pages you will earn up to an 80%. For every other sub page you will earn an extra 5%.
 * Use this code for external CSS:
 * <link href="css/styles.css" rel="stylesheet">
 * Project must be submitted by 12/4
 * Closure: When you finish your project fill out the following form to submit the links to each webpage you created:
 * Create your First Website Project Links ||
 * 12-5-14 || * Do Now: Read Introduction to JavaScript
 * If you are behind on your CSS Video tutorials or 'First Website Project' continue working on those. Note that you will lose ten points for each class day they are late.
 * Activity: Watch JavaScript Video Tutorials and create JavaScript/HTML files as you watch ||
 * 12-9-14 || * <span style="background-color: transparent; font-family: Arial,Helvetica,sans-serif;">Do Now: Read ' <span style="font-family: Arial,Helvetica,sans-serif;">An Hour of Code, a link to future <span style="background-color: transparent; font-family: Arial,Helvetica,sans-serif;">' and answer the following
 * <span style="font-family: Arial,Helvetica,sans-serif;">In this day and age, do you think all students should be exposed to computer science? Why?
 * <span style="font-family: Arial,Helvetica,sans-serif;">Discuss: Computer Science and Hour of Code
 * <span style="font-family: Arial,Helvetica,sans-serif;">Watch: President Obama kicks of the Hour of Code 2014
 * <span style="font-family: Arial,Helvetica,sans-serif;">Explore: Code.org
 * <span style="font-family: Arial,Helvetica,sans-serif;">Explore: Khan Academy Hour of Code
 * <span style="font-family: Arial,Helvetica,sans-serif;">Learn: Practice coding for one hour
 * <span style="font-family: Arial,Helvetica,sans-serif;">Closure: Is learning how to code something you feel you can do? ||
 * 12-11-14 || * Do Now: Share your website and take a look at everyone else's
 * Mr. Mendonez's Example
 * Read Don't Repeat Yourself
 * Submit Links to your JavaScript Video Tutorials
 * Introduce JavaScript
 * Discuss: DRY Principle
 * Demonstrate: Apply DRY Principle to your website
 * Closing Activity: Add the DRY Principle to your website ||
 * 12-15-14 || * Do Now: Review application of DRY Prinicple on Mr. Mendonez's Example
 * Review: Apply DRY Principle to your website
 * 1) Copy and paste navigation bar code into a new html file and name it loadNavigationBar.html. Save it in the same folder as your other html files.
 * 2) Create JavaScript file that will command browser with JS functions and save it in a folder titles 'JS'. Name it loadRepeatedDivs.js
 * 3) Example: /* Repeated Divs for 'Design' Site */
 * 1) Get the JQuery Script from Google's Developer Page and paste it on each of your HTML files right above
 * 2) Write the script code to access JS file from step 2 in the html pages of your website.
 * 3) Example: <script src="js/loadrepeateddivs.js">
 * 4) Replace where the navigation bar code is supposed to be with the DIV ID
 * 5) Example:
 * 6) Save and repeat this process for each html page for your website and you can now make changes to your nav bar by changing one file instead of multiple!
 * Closing Activity: Add the DRY Principle to your website ||
 * 12-17-14 || * <span style="background-color: transparent; font-family: Arial,Helvetica,sans-serif;">Do Now: Explore <span style="font-family: Arial,Helvetica,sans-serif;">facebook.com/Code.org <span style="background-color: transparent; font-family: Arial,Helvetica,sans-serif;"> to catch on on the latest Hour of Code news. Discuss with your neighbor some things you learned from Code.org's Facebook posts
 * Discuss progress on DRY Principle
 * Activity: Watch DRY Principle Tutorial and Finish DRY Principle Activity
 * Closure: Write a blog post on the Dry Principle and How to write the Nav Bar code once for your entire site
 * Homework: Finish DRY Principle Activity ||
 * 12-19-14 || * Do Now: Discuss social networks pre-facebook
 * The Social Network ||
 * 12-23-14 || * Finish The Social Network ||
 * 1-6-15 || * Do Now: Finish The Social Network
 * Read & Discuss IMDb Trivia
 * Go to imdb.com
 * Search for The Social Network
 * Scroll down to 'Did You Know?' > 'Trivia'
 * Click on 'Read More'
 * Introduce and Setup Bootstrap
 * GetBootstrap.com
 * Closing Activity: Watch and follow along with Introduction to Grids in Bootstrap 3
 * Homework: Finish Introduction to Grids in Bootstrap 3 ||
 * 1-8-15 || * Do Now: Read '11 Reasons to Use Twitter Bootstrap'
 * Submit: Introduction to Grids in Bootstrap 3 Form
 * Introduce Bootstrap Final Exam Project
 * Watch each Bootstrap Tutorial to create your website
 * Come up with your own content. Your site should be a brand website as if you are the web designer for a company. Examples: Nike, Playstation, Apple, etc.
 * <span style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 13.63636302948px;">[|Watch: Build a Responsive Bootstrap 3 Site]
 * <span style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 13.63636302948px;">[|Watch: Create Responsive Collapsing Navbar] ||
 * 1-12-15 || * <span style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 13.63636302948px;">Do Now: Write a blog post on Reasons to use Bootstrap
 * <span style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 13.63636302948px;">You may refer to the '11 Reasons to Use Twitter Bootstrap' article you read from last class
 * <span style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 13.63636302948px;">Continue Bootstrap Final Exam Project
 * Watch each Bootstrap Tutorial to create your website
 * Come up with your own content. Your site should be a brand website as if you are the web designer for a company. Examples: Nike, Playstation, Apple, etc.
 * <span style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 13.63636302948px;">[|Watch: Sticky Footer That Stays In The Browser Viewport]
 * <span style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 13.63636302948px;">[|Watch: Jumbotrons] ||
 * 1-14-15 || * <span style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 13.63636302948px;">Do Now: Read ' Want to teach yourself programming? It's possible — but not easy'
 * Choose three quotes and explain why you feel they are important. Write your reflection in your Do Now document
 * <span style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 13.63636302948px;">Continue Bootstrap Final Exam Project
 * Watch each Bootstrap Tutorial to create your website
 * Come up with your own content. Your site should be a brand website as if you are the web designer for a company. Examples: Nike, Playstation, Apple, etc.
 * <span style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 13.63636302948px;">[|Watch: Responsive Grid System]
 * <span style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 13.63636302948px;">[|Watch: Popup Boxes]
 * Grading:
 * To earn an 80% - you must have a responsive collapsing navigation bar, a sticky footer bar, and a Contact Me popup box on all pages. Your home page should have a jumbotron and a responsive grid system. You should have two article pages wtih text and at least one picture and an article sidebar.
 * Earn an extra 5% per extra articles page you create. These extra articles pages should also be accessible through the navigation bar. ||
 * 1-16-15 || * <span style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 13.63636302948px;">Continue Bootstrap Final Exam Project
 * Watch each Bootstrap Tutorial to create your website
 * Come up with your own content. Your site should be a brand website as if you are the web designer for a company. Examples: Nike, Playstation, Apple, etc.
 * <span style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 13.63636302948px;">[|Watch: Beginning The Article Page]
 * <span style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 13.63636302948px;">[|Watch: Article Sidebar]
 * Grading:
 * To earn an 80% - you must have a responsive collapsing navigation bar, a sticky footer bar, and a Contact Me popup box on all pages. Your home page should have a jumbotron and a responsive grid system. You should have two article pages wtih text and at least one picture and an article sidebar.
 * Earn an extra 5% per extra articles page you create. These extra articles pages should also be accessible through the navigation bar. ||
 * 1-21-15 || * <span style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 13.63636302948px;">Continue Bootstrap Final Exam Project
 * Watch each Bootstrap Tutorial to create your website
 * Come up with your own content. Your site should be a brand website as if you are the web designer for a company. Examples: Nike, Playstation, Apple, etc.
 * <span style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 13.63636302948px;">[|Watch: Contact Form]
 * <span style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 13.63636302948px;">[|Watch: Footer Bar Quick Fix]
 * Grading:
 * To earn an 80% - you must have a responsive collapsing navigation bar, a sticky footer bar, and a Contact Me popup box on all pages. Your home page should have a jumbotron and a responsive grid system. You should have two article pages wtih text and at least one picture and an article sidebar.
 * Earn an extra 5% per extra articles page you create. These extra articles pages should also be accessible through the navigation bar.
 * Homework: Finish Project ||
 * 1-23-15 || * Do Now: Read 'Anybody Can Learn' and discuss with your neighbor things you agree and disagree with from this article
 * ** Bootstrap Final Exam Project Due Today **
 * Write a blog post explaining what your website is about and post a link to it for others to see
 * Share your blog post by filling out this form: Bootstrap Final Exam Project Blog Posts
 * Take a look at other people's websites by going to their blogs and leave comments, questions, and suggestions.
 * Talk to your classmates if you have any questions or comments about their website
 * Demo: Backwards Engineering - Responsive and Jumbotron Pictures
 * Closing Activity: Try it yourself ||
 * 1-28-15 || * Do Now: 'The Ultimate Guide to Cloning in Photoshop'
 * Demo: Clone Stamp Tool
 * Beach Example
 * Connect Pixlr Editor to your Google Drive
 * Video Tutorial: Clone Stamp Tool - Adobe Photoshop CS6
 * Closing Activity: Try it yourself - Try it with the Beach Example picture then try it with other pictures you brought. Make sure to save the pictures in your shared folder and email the link to your teacher. ||
 * 1-30-15 || * Do Now: Read 'Student of the Week: Maxeen with Google dreams'
 * Final Thoughts
 * What more would you like to learn?
 * Closing Activity: Student Survey ||
 * 2-3-15 || * Go to [|code.org] and watch the introduction video. Students should create an account then do at least two tutorials of their choice under the learn tab. ||

__**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