Sheridan Course Outlines

Land Acknowledgement

Sheridan College resides on land that has been, and still is, the traditional territory of several Indigenous nations, including the Anishinaabe, the Haudenosaunee Confederacy, the Wendat, and the Mississaugas of the Credit First Nation. We recognize this territory is covered by the Dish with One Spoon treaty and the Two Row Wampum treaty, which emphasize the importance of joint stewardship, peace, and respectful relationships.

As an institution of higher learning Sheridan embraces the critical role that education must play in facilitating real transformational change. We continue our collective efforts to recognize Canada's colonial history and to take steps to meaningful Truth and Reconciliation.

Section I: Administrative Information

Total hours: 28.0
Credit Value: 2.0
Credit Value Notes: N/A
Effective: Fall 2020
Prerequisites: N/A
Corequisites: N/A
Equivalents: N/A
Pre/Co/Equiv Notes: APPL70078

Program(s): Front-End Web Developer Founda
Program Coordinator(s): N/A
Course Leader or Contact: N/A
Version: 20200914_00
Status: Approved (APPR)

Section I Notes: This course is offered on-campus. Students are expected to bring their own laptop to class. The sessions may include a variety of interactive and engaging activities including discussions, workshops, group activities, role plays, case studies and presentations. Readings, video, and podcasts may be provided online, on Sheridan's Learning and Teaching Environment (SLATE), to support class activities and reinforce material covered during class sessions. Assignment details will be provided in class and on SLATE. Students will need reliable access to the internet.

Section II: Course Details

Detailed Description
Students learn to apply advanced HTML and CSS principles to create fixed, fluid and responsive layouts. They explore advanced CSS features including multi-column text, opacity, multiple backgrounds and font techniques. Through hands-on practice and a guided project, students develop the knowledge and skills required to add video and audio to web sites, encode for all the browser specific codecs and get a form that works for their Contact page (without having to learn back-end PHP). Students also learn how to maintain stylesheet consistency through CSS resets, to remove browser defaults, create multi-column layouts and to apply effects and animations. Students are expected to bring their own laptop to class.

Program Context

Front-End Web Developer Founda	Program Coordinator(s): N/A
This course is considered to be a standalone course. This course may appeal to individuals wanting to learn advanced concepts of web development or individuals who are exploring entry-level web developer jobs as a possible career choice.

Course Critical Performance and Learning Outcomes

	Critical Performance:
	By the end of this course students will have demonstrated the ability to optimize web pages using advanced layout and typography techniques.

Learning Outcomes:

To achieve the critical performance, students will have demonstrated the ability to:

Create properly structured HTML pages based on mockups and standard practices
Explain the purpose of the five position properties of CSS layouts (static, relative, absolute, fixed, and inherit).
Create standards-compliant, table-free CSS layouts
Use floats and positioning to layout pages effectively
Use advanced CSS to enhance page design and achieve consistency
Add forms to a web page
Add Video and Audio to web sites
Use typography techniques to optimize web page layout
Create fixed, fluid and responsive layouts

Evaluation Plan
Students demonstrate their learning in the following ways:

Evaluation Plan: IN-CLASS

	In Class Project 1 - (960 grid, mockups, resets)	4.0%
	In Class Project 2 - (Multi Columns, Asides, Google Fonts)	4.0%
	In Class Project 3 - (Responsive Images, multi-page site Creation, Converting Fonts)	4.0%
	In Class Project 4 - (Forms and form tags,Validation, HTML5 Form inputs)	4.0%
	In Class Project 5 - (Responsive Columns, Media Queries, Boilerplates)	4.0%
	Assignment 1 (3 Column Layout)	10.0%
	Assignment 2 (Multi Column Layout with Nested Columns)	10.0%
	Assignment 3 (2 Page Layout with Forms)	10.0%
	Assignment 4 (Responsive Layout Targeting Desktops and Phones)	10.0%
	Final Project (Corporate Identity Site)	40.0%
	Total	100.0%

Evaluation Notes and Academic Missed Work Procedure:

To encourage behaviours that will help students to be successful in the workplace and to ensure that students receive credit for their individual work, the following rules apply to every course offered within the Faculty of Continuing and Professional Studies.  

Students are responsible for staying abreast of test dates and times, as well as due dates and any special instructions for submitting assignments and projects as supplied to the class by the professor.

Students must write all tests at the specified date and time. Missed tests, in-class/online activities, assignments and presentations are awarded a mark of zero.  If an extension or make-up opportunity is approved by the professor as outlined below, the mark of zero may be revised by subsequent performance.  The penalty for late submission of written assignments is a loss of 10% per day for up to five business days (excluding weekends and statutory holidays), after which, a grade of zero is assigned. Business days include any day that the college is open for business, whether the student has scheduled classes that day or not.  

Students who miss a test or in-class/online activity or assignment or fail to submit an assignment on time due to exceptional circumstances are required to notify their professor in advance of the class whenever possible.  A make-up test may be supplied for students who provide an acceptable explanation of their absence and/or acceptable documentation explaining their absence (e.g., a medical certificate). All make-up tests are to be written at a time and place specified by the professor upon the students return. Alternately, students may be given an opportunity to earn the associated marks by having a subsequent test count for the additional marks. Exceptional circumstances may result in a modification of due dates for assignments.

Unless otherwise specified, assignments and projects must be submitted at the date and time specified by the instructor. 

Students must complete every assignment as an individual effort, unless the professor specifies otherwise.

Since there may be instances of grade appeal or questions regarding the timely completion of assignments and/or extent of individual effort, etc., students are strongly advised to keep, and make available to their professor, if requested, a copy of all assignments and working notes until the course grade has been finalized.  

There will be no resubmission of work unless this has been previously agreed to or suggested by the professor. 

Students must submit all assignments in courses with practical lab and field components in order to pass the course.

Provincial Context
The course meets the following Ministry of Colleges and Universities requirements:

Prior Learning Assessment and Recognition
PLAR Contact (if course is PLAR-eligible) - Office of the Registrar
Students may apply to receive credit by demonstrating achievement of the course learning outcomes through previous relevant work/life experience, service, self-study and training on the job. This course is eligible for challenge through the following method(s):

Challenge Exam
Notes:
Portfolio
Notes:

Section III: Topical Outline

Some details of this outline may change as a result of circumstances such as weather cancellations, College and student activities, and class timetabling.
Instruction Mode: In-Class
Professor: N/A
Resource(s):

	Type	Description
Optional	Other	HTML editor of student's choice. Suggestions are available from course materials or from instructor

Applicable student group(s): Continuing and Professional Studies Students
Course Details:

Module 1: Structuring HTML Web Pages Properly

Determining required box model elements
The 960 grid and its implications for web page structure
The function of rows and columns
Using Standard Practices to prepare your layouts
Translating design to code
Creating the proper file structure
Coding a template

(In Class Project 1: 4%)

Module 2: The five position properties of CSS layouts

The characteristics of static, relative, absolute, fixed, and inherit CSS layouts
HTML Elements of “Normal Document Flow”
Removing elements from “Normal Document Flow”
Restoring “Normal Document Flow”
Responding elements to the browser
Responding elements to your container
Applying floats and clears with position

(Assignment 1: 10%)

Module 3: Creating standards-compliant, table-free CSS layouts

The math behind the 960px grid
Different math for different paddings
Creating grid based layouts
Creating columns
Stacking columns
Nesting columns

(In Class Project 2: 4%)

Module 4: Using floats and positioning to layout pages effectively

Controlling the display of objects
Setting up reusable CSS Classes
Preparing layouts for mobile applications
Determining what objects need to be floated
Putting web page columns in order
Switching the order of page layout elements with CSS

Module 5: Advanced CSS Features

Creating rich media pages
Checking for browser support
The CSS effects: Rounding corners and adding drop shadows, opacity, multiple backgrounds and font formatting and font sizing
Multiple columns and column gaps, line-height, word-spacing, letter-spacing, and word wrap
CSS Transitions – animating content - fade images and backgrounds
CSS Transforms – manipulating content properties

(In Class Project 3: 4%; Assignment 2: 10%)

Module 6: Adding forms to a web page

The HTML specifications for different Front-End form input types
Finding the Back-End PHP for form validation online
Finding free form services online

(Assignment 3: 10%)

Module 7: Adding Video and Audio to your sites

How video and audio function online
Finding stock video and audio
Converting video and audio for web codes
Adding video and audio players on websites
Adding Controls
Adding a poster image for the video first frame
Looping and muting video and audio
Using video as full screen backgrounds

(In Class Project 4: 4%)

Module 8: Using typography techniques to optimize web page layout

The meaning of different CSS type values
Em and percentage values vs. Pixels for desktop and mobile usability
Fonts available natively on computers
Converting fonts to web fonts (ttf, woff, svg, eoff)
Embedding your own fonts
Finding free Google Fonts

(Assignment 4: 10%)

Module 9: Creating fixed, fluid and responsive layouts

Using pixels in your grid columns math (fixed)
Creating initial fluid, and responsive layouts for mobile applications
Changing the grid columns math to percentages (fluid)
Identifying common device breakpoints
Setting device (desktop, tablet, phone) breakpoints with CSS media queries (responsive)
Making images responsive
Making backgrounds responsive
Responding images and elements to sizes between device breakpoints (fluid)

(In Class Project 5: 4%; Final Project: 40%)

Sheridan Policies

It is recommended that students read the following policies in relation to course outlines:

Academic Integrity
Copyright
Intellectual Property
Respectful Behaviour
Accessible Learning

All Sheridan policies can be viewed on the Sheridan policy website.

Appropriate use of generative Artificial Intelligence tools: In alignment with Sheridan's Academic Integrity Policy, students should consult with their professors and/or refer to evaluation instructions regarding the appropriate use, or prohibition, of generative Artificial Intelligence (AI) tools for coursework. Turnitin AI detection software may be used by faculty members to screen assignment submissions or exams for unauthorized use of artificial intelligence.

Course Outline Changes: The information contained in this Course Outline including but not limited to faculty and program information and course description is subject to change without notice. Nothing in this Course Outline should be viewed as a representation, offer and/or warranty. Students are responsible for reading the Important Notice and Disclaimer which applies to Programs and Courses.

[ Printable Version ]