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

    Introduction

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

    1. Web Dev 1 intro slide deck
    2. Why learn to code? slide deck
    1. Computer shortcuts
  2. 2

    Installation

    CLRs: 1

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

    1. The Open Web slide deck
    2. How much code have you used?
    1. Using URLs videos
    1. Create online accounts
    2. Install all the things!
    1. Set up your code editor
  3. 3

    Version control & GitHub

    CLRs: 1

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

    1. Version control & GitHub slide deck
    1. Version control & GitHub videos
    1. Keyboard Commander
    2. Website on GitHub
    3. Using Markbot
    1. Create tagged issue
    2. Using your code editor
  4. 4

    HTML semantics

    CLRs: 1, 2

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

    1. Naming conventions slide deck
    2. HTML introduction slide deck
    3. Semantics map-out
    1. HTML semantics videos
    2. HTML indentation videos
    3. Marking up a webpage videos
    1. HTML document setup
    2. Masthead semantics
    1. HTML validation fixes
    2. Content semantics
  5. 5

    CSS styling

    CLRs: 1, 2, 3

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

    1. CSS introduction slide deck
    1. Using CSS videos
    2. CSS indentation videos
    3. Basic typography videos
    1. Semantics Specifier
    2. Dinosaur designs
    3. Use all the selectors!
    1. CSS validation fixes
    2. Stylish beets
  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.

    1. Boxes & flows slide deck
    2. Sketching a website
    1. Everything is a box videos
    2. Flow & display videos
    1. Developer tools
    2. Cards
    1. Horizontal navigation
    2. Sections
  7. 7

    Link patterns

    CLRs: 1, 2, 3

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

    1. Link patterns slide deck
    2. Index card Q&A
    1. Display Dominator
    2. Navigation patterns
    3. Navigation highlight
    1. Button styles
    2. Link card
  8. 8

    Reading week—no classes

    CLRs: 1, 2, 3

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

    1. Mid-course feedback
    1. Continue assignments
  9. 9

    Flexbox

    CLRs: 1, 2, 3

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

    1. Flexbox slide deck
    2. Family lines
    1. Flexbox videos
    1. Ingenious Indentor
    2. Flexing your muscles
    3. Header icons
    1. Columns of cards
  10. 10

    Position & z-index

    CLRs: 1, 2, 3

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

    1. Position & z-index slide deck
    2. C’mon do the sketchin’
    1. Position & z-index videos
    1. Em Enforcer
    2. Making an image card
    3. Hero banner
    1. Call to action banner
    2. Exploding robot head
  11. 11

    Media queries

    CLRs: 1, 2, 3, 4

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

    1. Media queries slide deck
    2. A web of screen sizes
    1. All devices setup videos
    2. Media queries videos
    1. Responsive navigation
    2. Hide & show responsively
    1. Responsive typography
    2. Responsive icon cards
  12. 12

    Media queries & Flexbox

    CLRs: 1, 2, 3, 4

    Use media queries and Flexbox together to make responsive layouts.

    1. Paper plans
    1. Dev Tool Dynamo
    2. Image grid
    1. Responsive header
    2. Responsive section
  13. 13

    Media queries & position

    CLRs: 1, 2, 3, 4, 5

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

    1. Index card Q&A
    2. Finding patterns
    1. Hex Hacker
    2. Responsive image & caption
    1. Confectionery website sketches
    2. Confectionery website prototype
  14. 14

    Confectionery website planning

    CLRs: 1, 2, 3, 4, 5

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

    1. Course feedback
    1. Character Classifier
    2. Confectionery website check-in
    1. Confectionery website prototype
  15. 15

    Confectionery website completion

    CLRs: 1, 2, 3, 4, 5

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

    1. Browser testing
    1. Request for grade
    2. Confectionery website prototype

Marking scheme

Activities & lessons

15% — 20 @ 0.8% each

  • Complete/incomplete
  • Formative assessment

Exercises

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

1
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

2
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

3
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

4
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

5
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.