Web Dev 1

Web development 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 LTW0010 None
Classes Labs Homework
None None ~90 h


  1. 1


    An overview of the course this term, questions & answers, and getting used to your computer.

  2. 2


    CLRs: 1

    How the web works, naming conventions, web browsers, and setting up our computers.

  3. 3

    Version control & GitHub

    CLRs: 1

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

  4. 4

    HTML semantics

    CLRs: 1, 2

    Look at how to write HTML and how to choose the proper HTML tags.

  5. 5

    CSS styling

    CLRs: 1, 2, 3

    Dive into CSS to learn how to change the colours and type on a website.

  6. 6

    Everything is a box

    CLRs: 1, 2, 3

    Explore how browsers display websites, looking at how everything is a box, and controlling the browser’s layout flow.

  7. 7

    Link patterns

    CLRs: 1, 2, 3

    Create different patterns for links in websites including navigation highlighting, buttons and link cards.

  8. 8

    Reading week—no classes

    CLRs: 1, 2, 3

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

  9. 9


    CLRs: 1, 2, 3

    Learn to create more complex layouts with the Flexbox CSS properties.

  10. 10

    Position & z-index

    CLRs: 1, 2, 3

    Look into layering elements in a website with the position and z-index properties.

  11. 11

    Media queries

    CLRs: 1, 2, 3, 4

    Explore how media queries help us make responsive websites by allowing layout adjustments.

  12. 12

    Media queries & Flexbox

    CLRs: 1, 2, 3, 4

    Use media queries and Flexbox together to make responsive layouts.

  13. 13

    Media queries & position

    CLRs: 1, 2, 3, 4, 5

    Use media queries and position together to make responsive banners & layouts.

  14. 14

    Confectionery website planning

    CLRs: 1, 2, 3, 4, 5

    Start planning your confectionery website by sketching, writing text & starting to write code.

  15. 15

    Confectionery website completion

    CLRs: 1, 2, 3, 4, 5

    Finish the responsive confectionery website prototype by the end of the term.

Marking scheme

Activities & lessons

15%20 @ 0.8% each

  • Complete/incomplete
  • Formative assessment


70%27 @ 2.6% each

  • Complete/incomplete
  • Formative assessment

Big projects

15%1 @ 15.0% each

  • Proof you learned everything
  • Summative assessment

Course learning requirements

Use industry-standard tools to make websites

  • Host websites on cloud platforms
  • Use version control software to track code changes
  • Use online collaboration tools for getting assistance
  • Get feedback from automated tools and apply the suggested changes

Code and design websites

  • Apply HTML semantics by choosing the correct tags and code
  • Design websites with CSS using current standards
  • Design effective typography using CSS features
  • Layout pages using a variety of CSS techniques

Use proper file, folder, and code organization

  • 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

Prepare websites for multiple devices and use cases

  • Make adaptive layouts that change and respond to different devices, screen sizes & type sizes
  • 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

Plan, prototype and develop websites

  • Sketch components & how they adapt to different screen sizes
  • Wireframe pages to describe the content and basic layout
  • Build responsive prototypes for websites for all devices
  • 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.