Introduction+to+Web+Design+-+Summer+Institute

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.

Room: E201 Email/Google Drive Account: darryl.mendonez@sbschools.org Learn Web Design eBook Syllabus/Grading Policy Student Email Site Google Drive Daily Agenda Presentation


 * Daily Activities **

>> >> >> >> >> >> Hello World! >> >> >> >> >> body { >> >> background-color: orange; >> >> } >>> >>> position:fixed; >>> >>> bottom:0; >>>
 * ** Summer Institute ** ||  ||
 * **Date** || **Classwork** ||
 * 6-26-15 || * Do Now: Assign seats
 * Introduce Class Wiki
 * Course Expectations
 * Introductions
 * Explore School Email
 * Explore Google Drive
 * Create Class Folders
 * Read and discuss South Brunswick School District Acceptable Use Policy
 * Explore ' Learn Web Design ' eBook
 * Getting Started
 * Introduction to HTML5
 * Demo: Creating and hosting your own webpage and introduction to HTML
 * <!DOCTYPE html>
 * <!DOCTYPE html>
 * HTML Video Tutorials
 * 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: Try it yourself
 * HW: Make a website using the tags you learned in class today. Write the name of a famous person as the header using the h1 tag and a quote by that person using the paragraph, bold, italicize, and underline tag. ||
 * 6-29-15 || * Do Now: Read the following article
 * Thoughts on Flash by Steve Jobs
 * Class Discussion on article
 * Demonstration: More HTML Tags
 * Introduce and work on HTML Video Tutorials
 * HW: Make a website about your favorite music album. This website should include the following:
 * An h1 header should have the name of the artist
 * A picture of the album
 * An h2 header of the name of the album
 * An ordered list of each song on the album
 * A table listing of the year and the name of all their albums (First column should be year, second column should be the name of the album)
 * Hyperlinks to their official page & social media pages - Twitter, Instagram, Facebook, etc... (If they don't have one then link it to a fan-made one) ||
 * 6-30-15 || * Do Now: Read 'Which Coding Language is Right for You?'
 * Discuss article
 * Fill out Contact Form
 * More on HTML tags
 * Continue CSS Video Tutorials
 * 7-1-15 || * Do Now: Read 'Student of the Week: “Computer Science projects are opportunities, not assignments.”'
 * Introduction to CSS
 * External CSS Example:
 * /* CSS code for test and subpage */
 * /* CSS code for test and subpage */
 * Check HW
 * Demonstrate: External Stylesheets, Standard Folders
 * Introduce Full 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%. ||
 * 7-2-15 || * Do Now: Watch President Obama asks America to learn computer science & President Obama kicks off the Hour of Code 2014
 * Introduce and Install PicMonkey
 * Continue Full 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%.
 * Make sure to use external CSS, that your folders are organized, and your files are put in the appropriate folders - img, css, js, & fonts
 * HW: Finish 2 subpages ||
 * 7-6-15 || * Do Now: Read 'The College Majors With The Highest Starting Salaries'
 * Demo:
 * How to put footer bar in the bottom
 * padding-top: 20px;
 * padding-top: 20px;
 * How to use an img as a hyperlink
 * Introduce TinyURL
 * Continue Full 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%.
 * __ Make sure to use external CSS, that your folders are organized, and your files are put in the appropriate folders - img, css, js, & fonts __
 * HW: Finish last subpage ||
 * 7-7-15 || * Do Now: Watch and discuss Made with Code video
 * Introduce Disqus
 * Share Full Website Project
 * Fill out this form to submit your link to your project
 * View your classmates' projects and leave a comment
 * Introduce DRY Principle
 * Demonstrate: How to apply DRY Principle to Navigation Bar
 * Activity: Apply DRY Principle to your Full Website Project
 * 7-8-15 || * Do Now: Watch and discuss Made with Code Mentor Video - Danielle Feinberg
 * Introduce DRY Principle
 * Demonstrate: How to apply DRY Principle to Navigation Bar
 * Activity: Apply DRY Principle to your Full Website Project
 * HW: Finish applying DRY Principle to your Full Website Project ||
 * 7-9-15 || * Do Now: Read ' 11 Reasons to Use Twitter Bootstrap'
 * Continue Bootstrap Tutorials and Project
 * Off-Topic Article: The Strange & Curious Tale of the Last True Hermit ||
 * 7-10-15 || * Do Now: Read 'Who Needs to Know How to Code'
 * Discuss DRY Principle with Bootstrap Project
 * Demo: How to add a background image to your Jumbotron
 * Continue Bootstrap Tutorials and Project
 * Come up with your own content. You are going to build a botstrap website. Use the Bootstrap tutorials to help you make your website.
 * 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 filled with text, at least one picture, and an article sidebar.
 * Earn an extra 10% per extra articles page you create. These extra articles pages should also be accessible through the navigation bar. Your extra article pages should also be filled with text and at least one picture.
 * Make sure to use external CSS and DRY Principle ||
 * 7-13-15 || * Do Now: Read 'An Introduction to Icon Fonts with Font Awesome'
 * Introduce Bootstrap Glyphicons & Font Awesome
 * Activity: Add Disqus comments to Bootstrap Project and Font Awesome Icons
 * Fill out this form to submit Bootstrap Project
 * View your classmate's projects and leave comments
 * Explore classmates projects and leave comments ||
 * 7-14-15 || * Do Now: jQuery Tutorial for Beginners
 * Activity: Add jQuery Animations to Bootstrap Homepage
 * Demo: Add Active Class to DRY Navbar
 * Try it yourself ||
 * 7-15-15 || * Do Now: Read 'Computer Science is Not a Foreign Language'
 * Demo: Responsive YouTube Videos
 * Activity: Try it yourself - Add responsive youtube videos to your Bootstrap site.
 * Bootstrap: Extra Features - Watch and follow along with tutorials
 * Photo Carousel Activity: Add a photo carousel to your Bootstrap site with at least 7 photos. ||
 * 7-16-15 || * Do Now:
 * Add Disqus comments to your Bootstrap page with the Photo Carousel
 * Submit your Photo Carousel Page by filling out this form
 * View your classmate's Photo Carousels and leave comments
 * Lightbox Tutorial
 * Activity: Add a Lightbox to your Bootstrap Site ||
 * 7-17-15 || * Do Now:
 * Add Disqus comments to your Bootstrap page with the Lightbox
 * Submit your Lightbox Page by filling out this form
 * View your classmate's Lightboxes and leave comments
 * Demo: Bootstrap Dropdown on Hover Plugin
 * Activity: Add Hover Dropdown to your Bootstrap Site
 * Final Thoughts
 * End of Course Survey
 * HW:
 * Continue making websites!
 * Enjoy the rest of the summer!!! =) ||
 * HW:
 * Continue making websites!
 * Enjoy the rest of the summer!!! =) ||

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