Introduction+to+Web+Design

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.

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




 * Daily Activities **


 * ** QUARTER 1 ** || **Presentation File for Quarter 1** (Updated daily) ||
 * **Date** || **Classwork** ||
 * 1-29-16 || *Final A-Day of the 2nd Marking Period*
 * No 2nd Marking Period work will be accepted after 1-28-15**


 * Do Now:
 * Download your portfolio project from Google Drive to your desktop.
 * Log into github.com, click on the + icon on the top right and click 'New Repository'. Name your new repo username.github.io with your username being your current github username.
 * Demo:
 * How to host webpages with github
 * How to clone your repo
 * Final Thoughts
 * Closure: End of Course Survey
 * HW:
 * Continue making websites
 * Continue working admirably ||
 * 1-27-16 || * Do Now: Create or log into your github account
 * Demo:
 * Terminal
 * Git
 * Github
 * Heroku
 * View Using Git to Push to Github Lecture
 * Activity: Try it on your own!
 * HW: Try terminal, git, github, and heroku on your home computer. ||
 * 1-22-16 || Final Project Due Today
 * Do Now: Share your Final Project with the class. Take a look at your classmates projects and give them feedback.
 * Introduce: Extra Credit
 * Discuss: Google Drive no longer hosting web pages
 * Introduce Git, Github, and Terminal
 * Activity:
 * Create a github account
 * Try pushing to github
 * Closure: Push all your projects to github
 * HW: Push all your projects to github ||
 * 1-20-16 || * Read ' Making Computer Science More Inviting: A Look at What Works ' and answer the reflection question in Google Classroom
 * Continue Final Project: Be a web designer for a restaurant
 * Pacing: Your project should be finished by next class on 1/22
 * You are going to create a full bootstrap website that is responsive as if you are a web designer for a restaurant.
 * Your site should have at least 4 pages:
 * a welcome page (as the home page)
 * a menu page
 * a photo page with a carousel
 * a location page with directions and a screenshot of a map.
 * Your nav bar should have a link to all the web pages and a contact pop-up modal
 * The contact modal should have a form for a user to fill out with the fields: email address, subject, and message. There should also be a 'Submit' button and a 'Close' button that should be the default color.
 * Your footer bar should have the address, phone number, and email address to the restaurant and the hours of operation. It should also have social media buttons - facebook, twitter, instagram, etc. - using icons from Font Awesome. Make sure the social media links open in a new tab.
 * Your nav bar and footer bar should be exactly the same on all your web pages and all links should work on each page.
 * Your welcome page should have a jumbotron and grid system leading to the other pages. It should have a welcome message also.
 * You should also consider adding pictures throughout the website and other things to make the site look nice. Be creative!
 * You can use this website as a model: Metuchen Inn
 * Due: Next class (1/22)
 * Closure: What have you done with your project so far? What is your goal for next class?
 * Homework: Finish your final project ||
 * 1-15-16 || * Do Now: Read 'Why learning to code should be on your list of New Year's resolutions' and answer reflection questions in Google Classroom
 * Discussion: What kind of restaurant did you choose for your final project?
 * Continue Final Project: Be a web designer for a restaurant
 * Pacing: You should finish at least two pages by 1-20-15
 * You are going to create a full bootstrap website that is responsive as if you are a web designer for a restaurant.
 * Your site should have at least 4 pages:
 * 1) a welcome page (as the home page)
 * 2) a menu page
 * 3) a photo page with a carousel
 * 4) a location page with directions and a screenshot of a map.
 * Your nav bar should have a link to all the web pages and a contact pop-up modal
 * The contact modal should have a form for a user to fill out with the fields: email address, subject, and message. There should also be a 'Submit' button and a 'Close' button that should be the default color.
 * Your footer bar should have the address, phone number, and email address to the restaurant and the hours of operation. It should also have social media buttons - facebook, twitter, instagram, etc. - using icons from Font Awesome. Make sure the social media links open in a new tab.
 * Your nav bar and footer bar should be exactly the same on all your web pages and all links should work on each page.
 * Your welcome page should have a jumbotron and grid system leading to the other pages. It should have a welcome message also.
 * You should also consider adding pictures throughout the website and other things to make the site look nice. Be creative!
 * You can use this website as a model: Metuchen Inn
 * Due: 1/22
 * Closure: What have you done with your project so far? What is your goal for next class?
 * Homework: Finish at least two pages for your final project ||
 * 1-13-16 || * Do Now: Share your Portfolio Carousel with the class. Take a look at your classmates' portfolios and give them feedback.
 * Demo: Bootswatch
 * Activity: Give your portfolio a Bootswatch theme
 * Final Project: Be a web designer for a restaurant
 * You are going to create a full bootstrap website that is responsive as if you are a web designer for a restaurant.
 * Your site should have at least 4 pages:
 * 1) a welcome page (as the home page)
 * 2) a menu page
 * 3) a photo page with a carousel
 * 4) a location page with directions and a screenshot of a map.
 * Your nav bar should have a link to all the web pages and a contact pop-up modal
 * The contact modal should have a form for a user to fill out with the fields: email address, subject, and message. There should also be a 'Submit' button and a 'Close' button that should be the default color.
 * Your footer bar should have the address, phone number, and email address to the restaurant and the hours of operation. It should also have social media buttons - facebook, twitter, instagram, etc. - using icons from Font Awesome. Make sure the social media links open in a new tab.
 * Your nav bar and footer bar should be exactly the same on all your web pages and all links should work on each page.
 * Your welcome page should have a jumbotron and grid system leading to the other pages. It should have a welcome message also.
 * You should also consider adding pictures throughout the website and other things to make the site look nice. Be creative!
 * You can use this website as a model: Metuchen Inn
 * Due: 1/22 ||
 * 1-11-16 || * Do Now: Share your Carousel site with your class. Take a look at your classmates' portfolios and give them feedback.
 * Demo: Font Awesome
 * Activity: Improve your portfolio with Bootswatch & Font Awesome
 * Closure: How does documentation help you learn new libraries? ||
 * 1-7-16 || * Do Now: Go to the official bootstrap website and find the documentation on how to create a carousel
 * Activity: Create a bootstrap carousel on your own. Find pictures online to put into your carousel. You should have at least ten pictures and each picture should have a caption
 * Demo: Bootswatch & Font Awesome
 * Closing Activity: Improve your portfolio with Bootswatch & Font Awesome ||
 * 1-5-16 || * Do Now: Share your portfolio project with your class. Take a look at your classmates' portfolios and give them feedback.
 * Using Bootstrap Documentation
 * Activity: Practice using Google Documentation
 * Closure: What more did you learn about bootstrap by going through their documentation? ||
 * 12-23-15 || * Do Now: Share your portfolio project with your class.
 * Continue Portfolio Site Project - As you are creating your Bootstrap Site fill in the context of a portfolio.
 * Watch Bootstrap Tutorials - follow along the tutorials to help you code your Portfolio Site.
 * Closing Activity: What did you learn about Bootstrap today? Post the link to your Portfolio homepage on classroom even if you are not done
 * HW: Finish the the rest of the videos for homework if you didn't finish them in class. Fill your site with your portfolio content. Portfolio Site Project is due January 5th. ||
 * 12-21-15 || * Do Now: Play and discuss Rock, Paper, Scissors game
 * Continue Portfolio Site Project - As you are creating your Bootstrap Site fill in the context of a portfolio.
 * Watch Bootstrap Tutorials - follow along the tutorials to help you code your Portfolio Site.
 * Closing Activity: What did you learn about Bootstrap today? Post the link to your Portfolio homepage on classroom even if you are not done
 * HW: Finish the first 8 videos tonight for homework if you didn't finish them in class. ||
 * 12-17-15 || * Do Now:
 * Read 'What is Bootstrap 3?'
 * How would you describe bootstrap in your own words?
 * Portfolio Site Project - As you are creating your Bootstrap Site fill in the context of a portfolio. In keeping with the school AUP, you can use your first name but not your last, don't post personal pictures or put anywhere that gives the location of where you go to school or where you live.
 * Watch Bootstrap Tutorials - follow along the tutorials to help you code your Portfolio Site. The first 6 help you create your homepage. Videos 7 & 8 help you create your article pages. Video 9 shows you how to create a modal and 10 fixes your footer bar so it doesn't block the bottom of your content.
 * Closing Activity:
 * What did you learn about Bootstrap today?
 * Post the link to your Portfolio homepage on classroom even if you are not done
 * HW: Finish the first 4 videos tonight for homework if you didn't finish them in class. ||
 * 12-15-15 || * Do Now: Feel free to share your trivia game. Play the other trivia games that are posted. Talk to your classmates and give them feedback about their trivia game site
 * Introduce and Setup Bootstrap
 * GetBootstrap.com
 * Project: Watch the Bootstrap Tutorial on the Grid System and follow along as you create your new site
 * Closing Activity: Post the link to your bootstrap-grid.html file on Google Classroom
 * HW: Finish the the Bootstrap Tutorial on the Grid System ||
 * 12-11-15 || * Do Now: What is missing from our trivia game?
 * Submit your Trivia Game project
 * Introduce and Demo: Counter and If Statements
 * Activity: Put in a counter and an if statement into your trivia game
 * Closing Activity: Add a way to lose on your Trivia Game project.
 * HW: Add a way to lose on our trivia game. ||
 * 12-9-15 || * Do Now: What questions do you have about what to do for the trivia game?
 * Introduce and Demo: Counter and If Statements
 * Activity: Put in a counter and an if statement into your trivia game
 * Closing Activity: Continue working on your Trivia Game project.
 * HW: Finish your Trivia Game project. It is due next class. ||
 * 12-7-15 || * Do Now: Study the code from the Trivia Game demo. Do you understand the JavaScript file? What parts would you like explained over again?
 * Watch and Discuss Hour of Code Videos
 * Discuss: JavaScript/jQuery code for trivia game
 * Activity: Continue making your own trivia game
 * Closure: What did you learn about jQuery? ||
 * 12-3-15 || * Do Now: Create your basic files for your trivia question project. Pick a theme for your trivia questions. Examples: Simpsons Trivia, Science Trivia, Movie Trivia, etc. Make an html page with the first trivia question with four buttons as answers. Also include the correct and incorrect messages. Use this demo site as a guide.
 * Demonstration: Learn more jQuery to help you create your trivia game
 * Closing Activity: Continue making your own trivia game! ||
 * 12-1-15 || * Do Now: Finish DRY Principle - Finish applying the DRY Principle to your Full Website project. If you are already finished find a classmate who hasn't and help them debug.
 * Introduce Bootstrap CDN and jQuery Selectors
 * Demo: Make a Trivia Game
 * Closing Activity: Make your own trivia game! ||
 * 11-25-15 || * Do Now: Answer reflection questions on The Social Network and reply to other classmates
 * Review worksheet
 * Discuss movie
 * Read and discuss trivia
 * Extra help with DRY principle ||
 * 11-23-15 || * Do Now: Go over worksheet
 * What happened so far?
 * Continue Social Network
 * Closure: Discuss movie ||
 * 11-19-15 || * Do Now: Research and describe the characters of the social network
 * The Social Netowork
 * Go over worksheet
 * Watch movie
 * Closure: What kind of person is Mark Zuckerberg? ||
 * 11-17-15 || * Do Now: Create a website that asks the user what their name is and then greets them back using their name in the greeting. Use this example to help you.
 * Watch: Dry Principle Video
 * Activity: Apply Dry Principle to your navigation bar in your First Website project
 * Closing Activity: Apply Dry Principle to your footer bar in your First Website project ||
 * 11-13-15 || * Do Now: Read 'What is JavaScript?' and answer the reflection question
 * JavaScript Basics
 * Review the Dry Principle
 * Demo: Applying Dry Principle to your Navigation Bar
 * Closing Activity: Try it yourself ||
 * 11-10-15 || * Do Now: Study for test
 * HTML, CSS, and JS Test
 * Demo: Applying Dry Principle to your Navigation Bar
 * Closing Activity: Try it yourself ||
 * 11-4-15 || * Do Now: Continue to look at your classmates' projects and leave comments. Make sure to view each of your classmates' work.
 * Introduce JavaScript and Dry Principle
 * Demo: Applying Dry Principle to your Navigation Bar
 * Activity: Try it yourself
 * Closure: Review for HTML, CSS, and JS Test
 * HW: Study for HTML, CSS, and JS Test ||
 * 11-2-15 || * Do Now: Read ' The College Majors With The Highest Starting Salaries ' and answer the reflection questions on Google Classroom
 * Introduce and Demo: Disqus
 * Share 'Create your First Website' Project
 * Introduce JavaScript
 * Closure: What did you learn about your classmates from looking at their websites? ||
 * 10-29-15 || * Do Now: Read 'Zen and the art of coding' and answer the reflection question
 * Discuss: HTML Source Code is like a Family Tree
 * Demo:
 * Using comments to hide code
 * Consolidate your CSS code
 * 'Create your First Website' Project - Due next class 11/2
 * HW: Finish project - Due next class 11/2 ||
 * 10-27-15 || * Do Now: Read ' Read these tea leaves to see if the signs point toward a career in computer science ' and answer the reflection questions on Google Classroom
 * Demo: How to stick your footer bar at the bottom
 * 'Create your First Website' Project - Due 11/2
 * Closure: How do you link your sub-pages to your navigation bar?
 * HW: Finish home page and one sub-page ||
 * 10-23-15 || * Do Now: Read 'The Real Reason U.S. Students Lag Behind in Computer Science' and answer the reflection question on Google Classroom
 * Review: External CSS
 * Introduce PicMonkey
 * 'Create your First Website' Project. Due Nov. 2nd
 * Closure: What is the main advantage of using external CSS? ||
 * 10-21-15 || * Do Now:
 * Log into your computer
 * Watch and discuss the future today: Back to the Future 2
 * Finish CSS Video 19 Tutorial
 * Demo: Linking article pages to home page
 * Introduce 'Create your First Website' Project
 * Closing Activity: Begin project ||
 * 10-19-15 || * Do Now: Read How To Get A Job At Google and respond to the reflection questions on Classroom
 * 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
 * Activity: Try It Yourself
 * Continue CSS Video Tutorials
 * Closure: What more did you learn about CSS?
 * HW: Finish up to video 18 of the CSS Video Tutorials ||
 * 10-15-15 || * Do Now:
 * Have your External CSS homework out to be checked by the teacher
 * Crack the following code. (Hint: Research ASCII) (Code will be posted through Google Classroom.)
 * CSS Video Tutorials
 * Closure: What more did you learn about CSS? ||
 * 10-13-15 || * Do Now: Create 3 HTML files with a simple quote. Put paragraph tags around the quote for each.
 * Example Site
 * Demo:
 * More on CSS
 * Colors
 * Closing Activity: Add CSS to your 3 quote pages
 * HW: Finish External CSS activity ||
 * 10-9-15 || * Do Now: Study HTML & CSS Review Guide
 * Lecture: Finish going over CSS
 * HTML & CSS Test
 * Demo: More on CSS
 * Closing Activity: Try it yourself ||
 * 10-7-15 || * Do Now: Read the final part of 'Thoughts on Flash' and answer the following.
 * 1) What is the sixth reason why Apple does not allow Flash on iOS?
 * 2) What is Apple's motivation according to Steve Jobs?
 * 3) Summarize the conclusion of 'Thoughts on Flash'
 * Demo: Types of CSS
 * Activity: Try it yourself
 * Closing Activity: Review for HTML & CSS Test
 * HW: Study for HTML & CSS Test ||
 * 10-5-15 || * Do Now: Read the third, fourth, and fifth points in the letter 'Thoughts on Flash' by Steve Jobs and answer discussion questions
 * Finish HTML Video Tutorials
 * Set Drive Notepad as default
 * Introduce CSS
 * Demo: Types of CSS
 * Closing Activity: Try it yourself ||
 * 10-1-15 || * Do Now:
 * Have TV Theme Song website up to be checked by your teacher
 * Read up to the second point in the letter 'Thoughts on Flash' by Steve Jobs and answer discussion questions
 * Activity: HTML Video Tutorials
 * Closure: What are some new things you learned about HTML through the videos? ||
 * 9-29-15 || * Do Now: Read 'Who Needs to Know How to Code' and answer the discussion question in Google Classroom
 * Practice: Use Drive Notepad to create a webpage. Find lyrics to your favorite theme song from a tv show to put on your website. Use the tags we have covered in class so far including the HTML5 Structure, header tags, bold, italicize, underline, hyperlink, and at least one image
 * Demo: More on Basic HTML Tags and Attributes
 * Closure: Try it yourself ||
 * 9-25-15 || * Do Now:
 * Have the code and website for your Poem page up to be checked by your teacher
 * Read 'Which Coding Language is Right for You?'
 * Based on what you read, what language would you like to learn and why? (Minimum one paragraph)
 * Read and discuss South Brunswick School District Acceptable Use Policy
 * Introduce Drive Notepad and Hosting Webpages
 * Demo: Even more on Basic HTML Tags
 * Closure: Try it yourself ||
 * 9-22-15 || * Study for Quiz
 * Quiz on Vocabulary and Advantages of HTML5
 * Finish Presentations
 * Demo: More on Basic HTML Tags
 * Activity: Try it Yourself
 * HW: Create a website with a poem. Use header tags, bold, italicize, underline, hyperlink, and at least one image. ||
 * 9-18-15 || * Do Now: Go over your About Me Presentation slideshow and prepare for your presentation
 * Presentations
 * Explore Learn Web Design
 * Closing Activity: What did you enjoy learning about your classmates?
 * HW: Study for Vocabulary and Advantages of HTML5 Quiz ||
 * 9-16-15 || * Do Now:
 * What was your favorite part about the Apple Event and why?
 * What was your least favorite part and why?
 * Pre-Assessment
 * Explore Class Wiki and Learn Web Design Site
 * Closing Activity: About Me Presentation
 * Homework: Finish About Me Presentation and be prepared to present it next class ||
 * 9-10-15 || * Watch: September 2015 Apple Event ||
 * 9-8-15 || * Do Now: Answer the following question in your Quarter 1 Do Now Log:
 * What new devices do you want Apple to come out with and why?
 * Pre-Assessment
 * Ice Breaker – 20 Questions Character Game
 * Research: Apple's Leadership and Apple Events
 * Closure: Which two Apple executives do you think are the most interesting and why? ||
 * 9-3-15 || * Do Now: Assign seats
 * Student & Parent Info
 * Tell me a bit about yourself
 * Explore class wiki, Google Classroom, and School Email
 * Go over Syllabus and [[file:Teacher Expectations 2013 - 2014.docx.docx|Course Expectations]]
 * <span style="background-color: transparent; font-family: Arial,Helvetica,sans-serif;">Explore Insight and Google Drive
 * <span style="font-family: Arial,Helvetica,sans-serif;">Closure: What are some new things you learned today about Google Classroom?

<span style="background-color: transparent; font-family: Arial,Helvetica,sans-serif;">*Reminder: Pre Assessment will be given next class || __ **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.

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