Web I Syllabus

COURSE SYLLABUS:

Instructor:  Lynne MichaudScreen Shot 2015-11-18 at 7.26.51 PM.png


Website:  https://sites.google.com/site/michaudwebi


Textbook: Joel Sklar, Joel. Principles of Web Design, Sixth Edition. Course Technology: Cengage Learning, 2015.  ISBN-13: 978-1-285-85264-5.


Course Description: This hands-on course covers the fundamentals of developing and authoring a web site from initial design to implementation. Course topics include markup and display languages such as Hypertext Markup Language (HTML), as well as presentation languages such as Cascading Style Sheets (CSS). The course focuses on the use of current industry best practices to develop web sites for accessibility and usability. Prerequisite: None


Course Outcomes:  Students will . . .

  • design, develop, and publish an informational website using recommended design practices using HTML and CSS

  • learn about the latest release of HTML, called HTML5, and see how it can adapt to a variety of web design needs.

  • learn about the latest release of CSS, called CSS3, and see how you can control display and formatting characteristics for your web page designs.

  • understand the effects of browser and device type on your design choices.

  • learn to build portable, accessible, responsive web sites that present information with clarity and appeal.

  • gain a critical eye for evaluating web site design.

  • effectively use graphics, typography, and color in their work.

  • build user-focused navigation to help users find content easily.

  • use CSS layout techniques to build responsive page layouts.

  • embed JavaScript code onto a web page.

  • improve problem-solving and coding skills.


Course Schedule/Outline


Week #

Chapter/Topic/Objectives

Assignments

1

Chapter 1:  HTML 5

  • Create web pages with HTML

  • Add style with CSS

  • Describe the history of HTML

  • Work with HTML5

  • Using good coding practices

  1. Read/note/discuss/apply pages 1 - 39

  2. Vocabulary

  3. Web Project #1

  4. Review Questions

  5. Study Guide #1

2

Chapter 2:  Web Site Design Principles

  • Understand the web design environment

  • Design for multiple screen resolutions

  • Craft the look and feel of the site

  • Create a unified site design

  • Design for the user

  • Design for accessibility

  1. Quiz

  2. Read/note/discuss/apply pages 47-92

  3. Vocabulary Review

  4. Web Project #2

  5. Review Questions

  6. Study Guide #2

3


  1. Chapters 1 & 2 Test

  2. Complete Web Project #2

  3. Gallery Walk

4

Chapter 3:  Site Planning

  • Understand the web site development process

  • Create a site specification

  • Identify the content goal

  • Analyze your audience

  • Build a web site development team

  • Create conventions for filenames and URLs

  • Set a directory structure

  • Create a site storyboard

  • Publish your web site

  • Test your web site



  1. Read/note/discuss/apply pages 98-133

  2. Vocabulary Review

  3. Web Project #3

  4. Review Questions

  5. Study Guide #3

5

Chapter 4:  Cascading Style Sheets

  • Recognize the benefits of using CSS

  • Build a basic style sheet

  • Use inheritance to write simpler style rules

  • Examine basic selection techniques

  • Use class and id selectors

  • Use the <div> and <span> elements

  • Use other selectors


  1. Quiz

  2. Read/note/discuss/apply pages 138 - 173

  3. Vocabulary Review

  4. Web Project #4

  5. Review Questions

  6. Study Guide #4

6


  1. Chapters 3 & 4 Test

  2. Finish Web Project #4

  3. Gallery Walk

7

Chapter 5:  Web Typography

  • Understand type design principles

  • Understanding Cascading Style Sheets (CSS) measurement units

  • Use the CSS font properties

  • Use the CSS text properties

  • Build a font and text properties style sheet

  • Customize bulleted and numbered lists

  1. Read/note/discuss/apply pages 180 - 229

  2. Vocabulary Review

  3. Web Project #5

  4. Review Questions

  5. Study Guide #5

8

Chapter 6:  Box Properties

  • Understand the CSS visual formatting model

  • Use the CSS box model

  • Apply the margin properties

  • Apply the padding properties

  • Apply the border properties

  • Use the page layout box properties

  • Create a simple page layout

  1. Quiz

  2. Read/note/discuss/apply pages 237 - 284

  3. Vocabulary Review

  4. Web Project #6

  5. Review Questions

  6. Study Guide #6

9


  1. Chapters 5 & 6 Test

  2. Finish Web Project #6

  3. Gallery Walk

10

Chapter 7:  Page Layouts

  • Understand the normal flow of elements

  • Create content containers using the division element and sectioning elements

  • Create floating layouts

  • Build a flexible page layout

  • Build a fixed page layout

  1. Read/note/discuss/apply pages 291-333

  2. Vocabulary Review

  3. Web Project #7

  4. Review Questions

  5. Study Guide #7

11

Chapter 8:  Graphics and Color

  • Understand graphics file formats

  • Choose a graphics tool

  • Use the image element

  • Control image properties with CSS

  • Create web site color schemes

  • Control color properties with CSS

  • Control background images with CSS

  1. Quiz

  2. Read/note/discuss/apply pages 341 - 391

  3. Vocabulary Review

  4. Web Project #8

  5. Review Questions

  6. Study Guide #8

12


  1. Chapters 7 & 8 Test

  2. Complete Web Project #8

  3. Gallery Walk

13

Chapter 9:  Site Navigation

  • Create usable navigation

  • Design navigation for mobile devices

  • Use graphics for navigation and linking

  • Build text-based navigation

  • Use lists for navigation

  • Build horizontal navigation bars

  • Build vertical navigation bars

  • Use background color and graphics to enhance navigation

  • Create hover rollovers

  1. Read/note/discuss/apply pages 402 - 448

  2. Vocabulary Review

  3. Web Project #9

  4. Review Questions

  5. Study Guide #9

14

Chapter 10:  Data Tables

  • Use table elements

  • Use table headers and footers

  • Style table borders

  • Apply padding, margins, and floats to tables

  • Style table background colors

  • Apply table styles

  1. Quiz

  2. Read/note/discuss/apply pages 457-485

  3. Vocabulary Review

  4. Web Project #10

  5. Review Questions

  6. Study Guide #10

15


  1. Chapters 9 & 10 Test

  2. Complete Web Project #10

  3. Gallery Walk

16

Chapter 11:  Web Forms

  • Understand how forms work

  • Use the <form> element to create forms

  • Create input objects

  • Style forms with Cascading Style Sheets (CSS)

  • Build a form




  1. Read/note/discuss/apply pages 492 - 534

  2. Vocabulary Review

  3. Web Project #11

  4. Review Questions

  5. Study Guide #11

17

Chapter 12:  Responsive Web Design

  • Recognize the need for responsive web design

  • Use media queries to apply conditional styles

  • Build a basic media query

  • Create flexible responsive layouts

  • Create responsive navigation schemes

  • Use responsible images

  • Build a responsive web page design for desktops, tablets, and smartphones

  1. Quiz

  2. Read/note/discuss/apply pages 541 - 598

  3. Vocabulary Review

  4. Web Project #12

  5. Review Questions

  6. Study Guide #12

18


  1. Review for Final Exam

  2. Finish Web Project #12

  3. Gallery Walk

19

Final Exam


School Standards:  Throughout this course, students will enhance their technology skills as outlined in the National Education Standards for students:  http://www.iste.org/standards/iste-standards/standards-for-students. These standards include:  1). creativity and innovation, 2).  communication and collaboration, 3).  research and information fluency, 4). critical thinking, problem solving, and decision making, 5). digital citizenship, and 6). technology operations and concepts.  


Requirements:

     Students will need a writing utensil, three-ring binder (at least 1” thick), five dividers, and a flash disk for this class.  Textbooks  will need to be covered, and all material must be brought to class every day.  Students are expected to see the teacher when absent to make up work on a timely basis.  Time management, account management, and file management are the students’ responsibility, so organization is one key to success in this class.  Participation will be assessed to determine barriers to success but will not become part of a student’s overall grade.  


Classroom Expectations:

Students are required to bring all materials to class every day.  If is student is absent, he/she must come to see me the next day to find out what was missed.  If a student does not do this and there is a test the next class, a student’s reply of “I didn’t know” is not an excuse.  The student will be expected to take the assessment. More information on make-up can be found in that section of this syllabus. Students are not allowed to wear hats, hoods, or use their cell phone in class.  Students are expected to show up to class on time; if a student is late, he/she needs a note from a staff member; otherwise, a detention will be assigned for an unexcused tardy.  Students are not allowed to eat in the computer lab; a covered water bottle is allowed; however, it must be covered and kept away from the keyboard and other equipment.



Assessment:  Students will demonstrate mastery of the learning objectives and performance indicators of this course through varied and multiple formative and summative assessments. The overall grade will be based on the following criteria:  Tests/Projects (40%), Quizzes (20%),  Homework/Assignments (20%).


Tests/Projects:  Students will be periodically tested over course material.  Tests consist of true/false, multiple choice, matching, essay questions, and problems.  Students must “earn the privilege” to re-test, if necessary, by completing remedial assignments to enhance mastery of subject matter.  Students must schedule time to meet with the instructor and have a maximum of one week for all remedial work/retesting.  


Quizzes:  Periodically students will be given announced and unannounced quizzes to ensure that they are keeping up with the material in this class.


Assignments/Homework:  Students will be given a variety of in-class and homework assignments.  The purpose of these assignments is to enhance students’ knowledge and skill in web development.


Participation Assessment:  Students will be periodically assessed on their participation, which involves listening and study skills.  This will show up on the “Standards” side of PowerSchool.  These assessments will be used to determine if these areas are creating barriers to success--obstacles that interfere with a student’s ability to meet the standards of this course. This portion of the assessment assesses student mastery of the content through whole group, small group, and individual discussions and their participation in collaborative activities.  Students will also be expected to come to class prepared with all of the necessary materials for this course (textbook, notebook, pen, USB/”Flash” disk, and homework).  Certain “soft skills” (such as time management, organization, study skills) will be addressed throughout the course to help students become successful in this course and others.  


Study Skills Rubric

Screen Shot 2015-08-25 at 6.55.24 AM.png

Listening Skills Rubric

Screen Shot 2015-08-25 at 6.58.01 AM.png

Make-Up/Late Work Policy:  

York High School's Student Handbook outlines the school-wide policy for make-up work.  It states the following:

“Students are responsible for contacting their teachers upon their return to school.  Block scheduling allows for students missing a single day to make up their work by the next class meeting. Students missing assignments, tests, quizzes during absences are afforded the same number of days absent to make up the missed work. If a student has been suspended and misses an exam, quiz, or major assignment, it must be made up within forty-eight (48) hours of his/her return.  If the suspension is the result of cutting a class or a school day then NO MAKE-UP for that cut will be allowed. If permitted by the teacher, make-up at the end of the quarter should not extend beyond two weeks.   An "F" will automatically be recorded for make-up that extends beyond this two-week period unless "permission to extend" has been granted.  A student who may be absent for an extended period due to health reasons may request tutoring at home.  Please contact the Student Services Office for details.”





Please cut on the dotted line and hand this sheet in to Ms. Michaud

------------------------------------------------------------------------------------------------------------

WEB DEVELOPMENT I SYLLABUS


Student’s Name:_________________________ Book No:__________


I have read and understand this syllabus and the requirements of this course.


_____________________ ____________

Student’s Signature Date



_____________________ _____________

Parent Signature Date


Parent E-Mail:  ___________________  Parent Phone Number: ______________


Preferred Method of Contact:   E-Mail Phone Call


Best Time To Call:  ______________________




IGNORE BELOW THIS LINE
















Whenever you have extra time, please update your e-portfolio and add the pages on the left navigation bar that we haven't done in class yet. Use your problem solving skills and previous handout to do this.
SAMPLE STUDENT E-PORTFOLIO: https://sites.google.com/site/yhsportfolio/

 

Web Site:  https://sites.google.com/site/michaudwebi/

Our Wiki:  http://michaudwebirulz.wikispaces.com/

E-Mail: lmichaud@yorkschools.org


DEAR STUDENTS:  I am still quite ill and apologize for not being there for you.  Please e-mail me with any questions you have regarding your work and submit all work using the same protocol that we have been using (zip the folder and send to me as an attachment (lmichaud@yorkschools.org).  Also, please continue to help each other out.  I would also like Beth Hall and Matt Carroll to give their lessons, even in my absence.  I will ask the sub and you for feedback.   Your assignments for the next three classes are:
 
WEB I WEEKLY AGENDA: January 3 - End-of-Semester
  1. E-mail Ms. Michaud Every Class Day--Please send Ms. Michaud an e-mail each class day re: what you have learned each class, what you accomplished, and what you don't understand.  Each e-mail is worth a quiz grade:  January 6, January 8, January 10, January 12, and January 18. 
  2. Final Exam Part I--Click on the Final Exam link to the right for instructions AND check your   e-mail FMI:  https://sites.google.com/site/michaudwebi/final-exam-web-page
  3. Final Exam Part II--Review Sheet Every Day (Check e-mail/go over answers with instructor)
  4. E-Portfolio--Worth two test grades--use the instruction sheet on the following web page for details:  https://sites.google.com/site/michaudwebi/e-portfolio-assignments

Web Pages #4 and #5--Follow e-mail instructions and those on the corresponding web page navigation bars to the left.  Matt Carroll and Beth Hall will be assigned a group of students to help you with this. 

TEAM HALL:  Brittnee Brennan, David Bresnahan, Cristian Davila, Ricky Festa, Nick Goulette, Drew Handley, and Frankie Hines

TEAM CARROLL:   Shane Hughes, Jacob Johnson, Shenelle Letourneau, Bailey McKenna, Fran Mendoza, and Hope Reed.

    • WEB PAGE #5 INSTRUCTIONS:

     

    • 1.  Right click on the attached zip file
    • 2.  Save Attachment (pay attention to WHERE you are saving it).
    • 3.  Find that zipped folder, right click, select extract all.
    • 4. Open fifth.htm with browser (see what it looks like and determine changes that need to be made to "make it your own."
    • 5.  In a SEPARATE window, open the css file with NotePad and change colors, fonts, etc.
    • 6.  Open fifth.htm with NotePad
    • 7.  Make changes to "make it your own"--name, address, e-mail, e-portfolio, text, etc.
    • 8.  Save ALL FILES (including your previous) in the same folder
    • 9.  ZIP that folder
    • 10.  Submit to me as soon as possible.

     

    Ċ
    Lynne Michaud,
    Jan 11, 2016, 4:55 PM
    Comments