Web Design 1

Web design is the production of functional, interactive websites accomplished through the use of the HTML and CSS coding languages. Using video tutorials, step-by-step online lessons, and automation, students explore processes such as semantics and mobile-first architecture, and tools like cloud platforms and version control, in tandem with precise organization principles and current best practices.

Instructor Course code Prerequisites
Self-directed LTW0001 None
Classes Labs Homework
None None ~90 h

Weeks

  1. 1

    Introduction & installation

    An overview of the course this term, questions & answers—installation of the necessary tools.

  2. 2

    Files, folders & code

    CLRs: 1

    How the web works, naming conventions, web browsers, files, folders & code editors.

  3. 3

    Version control & GitHub

    CLRs: 1

    Learn about version control, GitHub, GitHub use, and how to hand in your code work.

  4. 4

    Categorizing content

    CLRs: 2

    Explore the ideas of content categorization, organization & information architecture.

  5. 5

    HTML semantics

    CLRs: 1, 2

    Dive into learning how to apply content organization to websites by writing semantic HTML code.

  6. 6

    Semantics & accessibility

    CLRs: 3

    Explore how accessibility tools work & how the code we write affects people’s understanding of our website.

  7. 7

    HTML content

    CLRs: 1, 2, 3

    Practice using HTML semantics & accessibility tools when creating lots of HTML pages.

  8. 8

    Reading week—no classes

    CLRs: 1, 2, 3

    No classes, labs or new homework this week—get caught up!

  9. 9

    Applying design

    CLRs: 1, 2, 3

    Learn to apply CSS code to websites to enhance their design with basic typography.

  10. 10

    Web typography

    CLRs: 3

    See how to apply good typography to websites along with getting more CSS experience.

  11. 11

    Grid for layout

    CLRs: 2, 3

    Learn to design webpages using grids and introduce yourself to the CSS Grid layout engine.

  12. 12

    Flexbox for components

    CLRs: 2, 3

    Explore the Flexbox distribution system for designing components that are inserted into grids.

  13. 13

    Intrinsic layouts

    CLRs: 3

    Practice applying CSS to HTML semantics to lay out different documents & different screen sizes.

  14. 14

    Accessibility of full designs

    CLRs: 3

    Return to accessibility and see how CSS affects people’s understanding of pages—and how we can help.

  15. 15

    Assessment week—no classes

    CLRs: 1, 2, 3

    Assessment week: no classes—just extra time to finalize any incomplete assignments.

Marking scheme

Activities & lessons

15%13 @ 1.2% each

  • Complete/incomplete
  • Formative assessment

Videos

30%16 @ 1.9% each

  • Complete/incomplete
  • Must reach 80% of playlist duration to receive pass
  • Formative assessment

Exercises

55%22 @ 2.5% each

  • Complete/incomplete
  • Formative assessment

Course learning requirements

1
Apply proper file, folder and code organization for websites following industry best practices

  • Create links between pages, maximizing utility of URLs
  • Organize HTML, CSS, and images into standardized locations and folders
  • Apply proper indentation techniques to code for better legibility
  • Host websites on cloud platforms
  • Use version control software to track code changes

2
Analyze common web design patterns to help plan, prototype and organize website content

  • Plan website flow & content organization through the use of site maps
  • Sketch components & how they adapt to different screen sizes
  • Wireframe pages to describe the content and basic layout
  • Use design techniques to structure layouts for increased usability of a website to meet any user’s need
  • Use various web applications to aid in the planning & development process

3
Execute code and develop designs for websites on small devices that are accessible according to industry guidelines

  • Apply HTML semantics by choosing the correct tags and code
  • Design websites with CSS using current standards
  • Build responsive prototypes for websites for all devices
  • Make adaptive layouts that change and respond to different devices, screen sizes & type sizes
  • Execute coding best practices to enhance accessibility of web pages
  • Test websites on multiple devices for the best compatibility

Vocational learning outcomes

Description Taught Assessed Culminating performance
1 — Conceptualize and develop design solutions using principles of design to create visual communications that meet the needs of the projects.
2 — Employ the design process to create design solutions that meet the project objectives and the needs of the client and/or user.
3 — Plan, create and use photography, illustration and typography in design layouts to meet the requirements of the creative brief.
4 — Design, develop and create a variety of media products using relevant, current and/or emerging technologies.
5 — Communicate ideas, design concepts and opinions clearly and persuasively to others.
6 — Use recognized industry practices throughout the design process and related business tasks.
7 — Plan, implement, and evaluate graphic design projects using project management skills to deliver quality work to clients according to schedule and within budget.
8 — Complete all work in a professional and ethical manner, and in accordance with all applicable legislation and regulations.
9 — Keep current with visual media design trends, technologies and industry practices using strategies that enhance work performance and guide professional development.
10 — Identify and apply discipline-specific practices that contribute to the local and global community through social responsibility, economic commitment and environmental stewardship.

Essential employability skills

Description Taught Assessed Culminating performance
1 — Communicate clearly, concisely and correctly in the written, spoken and visual form that fulfills the purpose and meets the needs of the audience.
2 — Respond to written, spoken or visual messages in a manner that ensures effective communication.
3 — Execute mathematical operations accurately.
4 — Apply a systematic approach to solve problems.
5 — Use a variety of thinking skills to anticipate and solve problems.
6 — Locate, select, organize and document information using appropriate technology and information systems.
7 — Analyze, evaluate and apply relevant information from a variety of sources.
8 — Show respect for diverse opinions, values, belief systems and contributions of others.
9 — Interact with others in groups or teams in ways that contribute to effective working relationships and the achievement of goals.
10 — Manage the use of time and other resources to complete projects.
11 — Take responsibility for one's own actions, decisions and consequences.