Humber

Course Outline

Course Name: Web Technology 3 (GDES 208)

Academic Period: 2023 - 2024

Faculty:


Faculty Availability:

Associate Dean:
Jenny Hill
jenny.hill@humber.ca

Schedule Type Code:

Land Acknowledgement

Humber College is located within the traditional and treaty lands of the Mississaugas of the Credit. Known as Adoobiigok [A-doe-bee-goke], the “Place of the Alders” in Michi Saagiig [Mi-Chee Saw-Geeg] language, the region is uniquely situated along Humber River Watershed, which historically provided an integral connection for Anishinaabe [Ah-nish-nah-bay], Haudenosaunee [Hoeden-no-shownee], and Wendat [Wine-Dot] peoples between the Ontario Lakeshore and the Lake Simcoe/Georgian Bay regions. Now home to people of numerous nations, Adoobiigok continues to provide a vital source of interconnection for all.

Equity, Diversity and Inclusion Statement

Humber College and the University of Guelph-Humber (Humber) are leaders in providing a learning, working and living environment that recognizes and values equity, diversity and inclusion in all its programs and services. Humber commits to reflect the diversity of the communities the College serves. Students, faculty, support and administrative staff feel a sense of belonging and have opportunities to be their authentic selves.

Faculty or Department Faculty of Media, Creative Arts, and Design
Program(s)
Graphic Design (11571)
Course Name: Web Technology 3 (GDES 208)
Pre-Requisites WEBD 150
Co-Requisites none
Pre-Requisites for

GDES 258 Web Technology 4

Equates none
Restrictions

Students enrolled in the Graphic Design program.

Credit Value 3
Total Course Hours 42
Developed By: Prepared By: Approved by:
Bianca DiPietro, MDes

Jenny Hill

Jenny Hill

Humber Learning Outcomes (HLOs) in this course.

The HLOs are a cross-institutional learning outcomes strategy aimed at equipping Humber graduates with the employability skills, mindsets, and values they need to succeed in the future of work. To explore all the HLOs, please consult the Humber Learning Outcomes framework.

  • A white tree with roots, branches, and leaves appearing in an orange and green circleEquity, Diversity, Inclusion & Belonging
  • A white canoe rowing into a red circleCritical Thinking
  • A white bee walking towards the centre of an orange circleCollaboration
  • A white howling coyote in a green circleCommunication
  • A white bat in flight and sound waves fly in from the left side into the centre of a blue circleDigital Fluency
  • A white sun spinning into an orange circleInnovation
  • A white beaver falling from the top of a purple and yellow circle to the centre of the circleStrategic Problem-Solving

Course Description

Students will build on their knowledge of markup. Responsive code will be explored and applied to create solutions for web content that is displayed on multiple screen sizes without creating multiple websites. e.g. Desktop computers, tablets, and mobile devices. Students will cover flexible units, media queries, responsive images and typography, resolution, and external tools.

Course Rationale

Creating online experiences for the modern web means creating for mobile screens, desktop screens, large displays and sometimes no screens at all. This course looks at the process, techniques, and tools for creating these experiences. You will be building on your existing knowledge of web technologies to include responsive code, flexible units, media queries, responsive images, and responsive typography.

Program Outcomes Emphasized in this Course

Graphic Design (11571)

  1. Employ the design process to create design solutions that meet the project objectives and the needs of the client and/or user.

  2. Design, develop and create a variety of media products using relevant, current and/or emerging technologies.

  3. Keep current with visual media design trends, technologies and industry practices using strategies that enhance work performance and guide professional development.

Course Learning Method(s)

  • Project Based Learning

Course Learning Outcomes (CLO)

Learning Outcome Learning Objectives Summative Assessments Formative Assessments
Explain HTML & CSS and the Importance of Responsive Code
  • Review of HTML and CSS
  • Overview of responsive markup and examine the importance of responsive coding with multiple screen sizes
  • Compare and explore websites and observe how they respond to devices
  • Review CSS layout semantics
  • Single page Responsive website
  • Foundations of HTML/CSS
Build Responsive Web Design with external tools and relative units
  • HTML and CSS tools
  • Flexible units as the basis of responsive coding
  • Construct flexible percentage containers and max-widths
  • Experiment with layouts using percentages rather than static units
  • Practice responsive code in Webflow
  • Single page Responsive website
  • Foundations of HTML/CSS
Build and Understand Media Queries
  • Define media queries and how they work
  • Build media queries based on breakpoints and screen sizes
  • Create @media variations with min & max widths
  • Responsive site using external tools
  • Single page Responsive website
Assemble Responsive Web Assets
  • Describe image resolution for web and different screen sizes; including 72dpi, retina, and other pixel densities
  • Advanced search HTML media: <audio>​, <video>​, <source>​, <track>
  • Importance of small file sizes
  • Pros/Cons of video usage
  • Using icons on the web
  • Creating SVGs and embedding them in your website
  • Proper type scale on the web
  • Explain the baseline typography size/browser default
  • Practice setting typography in 'ems' (relative units) rather than pixels
  • Stage 1: Multipage responsive website
  • Single page Responsive website
Build Grid Systems in Flexbox and CSS Grid
  • What is CSS Grid & Flexbox and their benefits
  • Overview of both systems and how they work
  • Flexbox principles, basics, and terminology
  • CSS Grid principles, properties, declarations, and values
  • Stage 2: Multipage responsive website
  • Stage 1: Multipage responsive website

Assessment Weighting

Assessment Weight
Applied Project
    Foundations of HTML/CSS 10%
Creative Work
    Single page Responsive website 30%
    Responsive site using external tools 20%
    Stage 1: Multipage responsive website 20%
    Stage 2: Multipage responsive website 20%
Total 100%

Modules of Study

Module Course Learning Outcomes Resources Assessments
Review of HTML & CSS
  • Explain HTML & CSS and the Importance of Responsive Code
  • Single page Responsive website
  • Foundations of HTML/CSS
CSS Grid Systems
  • Build Grid Systems in Flexbox and CSS Grid

css-tricks.com/snippets/css/complete-guide-grid/

css-tricks.com/snippets/css/a-guide-to-flexbox/

developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/

  • Stage 2: Multipage responsive website
Media Queries
  • Build and Understand Media Queries

css-tricks.com/css-media-queries/

www.w3schools.com/css/css3_mediaqueries.asp

  • Responsive site using external tools
Webflow and Relative Units
  • Build Responsive Web Design with external tools and relative units
  • Build and Understand Media Queries

WebFlow.com

university.webflow.com/

 

 

  • Single page Responsive website
  • Responsive site using external tools
Responsive Web Assets
  • Assemble Responsive Web Assets

css-tricks.com/snippets/css/fluid-typography/

www.w3schools.com/howto/howto_css_responsive_text.asp

responsivedesign.is/design/responsive-typography/

  • Stage 1: Multipage responsive website

Resource(s):

Course material costs can be found through the Humber Bookstore.

Additional Tools and Equipment

  • Microsoft Visual Studio (free)
  • Laptop to program specifications

Essential Skills

Section Skills Measurement Details
Information Management
  • Gathering and managing information
  • Computer literacy
Teach and measure
  • Students will be working along with the faculty through concepts on their computers and in specific software.
  • In-class exercises and assignments.
Critical Thinking and Problem-Solving
  • Analysing
  • Synthesizing
Teach and measure
  • Students will be synthesizing concepts in class and using them in activities.
  • In-class exercises and assignments.

Prior Learning Assessment & Recognition (PLAR)

Prior Learning Assessment and Recognition (PLAR) is the formal evaluation and credit-granting process whereby candidates may obtain credits for prior learning. Prior learning includes the knowledge competencies and skills acquired, in both formal and informal ways, outside of post-secondary education. Candidates may have their knowledge, skills and competencies evaluated against the learning outcomes as defined in the course outline. Please review the Assessment Methods Glossary for more information on the Learning Portfolio assessment methods identified below.

The method(s) that are used to assess prior learning for this course may include:

  • Learning Portfolio (results reflected as SAT and not added to student’s CGPA)
  • Skills Test

Please contact the Program Coordinator for more details.

Academic Regulations

It is the student's responsibility to be aware of the College Academic Regulations. The Academic Regulations apply to all applicants to Humber and all current students enrolled in any program or course offered by Humber, in any location. Information about academic appeals is found in the Academic Regulations.  

Anti-Discrimination Statement

At Humber College, all forms of discrimination and harassment are prohibited. Students and employees have the right to study, live and work in an environment that is free from discrimination and harassment. If you need assistance on concerns related to discrimination and harassment, please contact the Centre for Human Rights, Equity and Inclusion or the Office of Student Conduct.

Accessible Learning Services

Humber strives to create a welcoming environment for all students where equity, diversity and inclusion are paramount. Accessible Learning Services facilitates equal access for students with disabilities by coordinating academic accommodations and services.  Staff in Accessible Learning Services are available by appointment to assess specific needs, provide referrals and arrange appropriate accommodations. If you require academic accommodations, contact:

Accessible Learning Services

North Campus: (416) 675-6622 X5090

Lakeshore Campus: (416) 675-6622 X3331 

Academic Integrity

Academic integrity is essentially honesty in all academic endeavors. Academic integrity requires that students avoid all forms of academic misconduct or dishonesty, including plagiarism, cheating on tests or exams or any misrepresentation of academic accomplishment.

Disclaimer

While every effort is made by the professor/faculty to cover all material listed in the outline, the order, content, and/or evaluation may change in the event of special circumstances (e.g. time constraints due to inclement weather, sickness, college closure, technology/equipment problems or changes, etc.). In any such case, students will be given appropriate notification in writing, with approval from the Senior Dean (or designate) of the Faculty.

Copyright

Copyright is the exclusive legal right given to a creator to reproduce, publish, sell or distribute his/her work. All members of the Humber community are required to comply with Canadian copyright law which governs the reproduction, use and distribution of copyrighted materials. This means that the copying, use and distribution of copyright- protected materials, regardless of format, is subject to certain limits and restrictions. For example, photocopying or scanning an entire textbook is not allowed, nor is distributing a scanned book.

See the Humber Libraries website for additional information regarding copyright and for details on allowable limits.


Humber College Institute of Technology and Advanced Learning • 2023/2024.