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.


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

    Installation

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

    1. The Open Web slide deck
  3. 3

    Version control & GitHub

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

    1. Version control & GitHub slide deck
  4. 4

    HTML semantics

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

    1. HTML introduction slide deck
    2. Semantics map-out
  5. 5

    CSS styling

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

    1. CSS introduction slide deck
  6. 6

    Everything is a box

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

    Link patterns

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

    1. Link patterns slide deck
  8. 8

    Float & clear

    Learn to create more complex layouts with the float and clear CSS properties.

    1. Float & clear slide deck
  9. 9

    Reading week—no classes

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

  10. 10

    Position & z-index

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

    1. Position & z-index slide deck
  11. 11

    Media queries

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

    1. Media queries slide deck
    2. A web of screen sizes
  12. 12

    Media queries & float

    Use media queries and float together to make responsive layouts.

    1. Paper plans
  13. 13

    Media queries & position

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

    1. Finding patterns
  14. 14

    Confectionery website planning

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

    1. Course feedback
  15. 15

    Confectionery website completion

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

Marking scheme

Exercises — 65%

50 exercises @ 1.3% each.

  • Pass/fail — marked in class or automated.
  • Personal feedback given at specific intervals.

Videos — 10%

9 video playlists @ 1.1% each.

  • Pass/fail — checked in lab/class time.
  • Must reach 80% of playlist duration to receive pass.

Big projects — 25%

1 milestones @ 25.0% each.

  • Letter grade.
  • Proof you learned everything.

Course learning requirements

1
Use modern 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
Demonstrate knowledge of how to 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
Apply an understanding of 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.