Web Dev 2

The web is accessible to all human beings on the planet. Using grid systems, type systems, and reusable code, students construct modular and flexible web architectures to support the many different screen dimensions, platforms, and needs of people connected to the web.

Instructor Course code Prerequisites
Self-directed LTW0011 Web Dev 1
Classes Labs Homework
None None ~90 h
  1. 1

    Introduction & review

    CLRs: 1, 2

    An overview of the course this term, assignments, projects and weekly tasks & a few review exercises to flex your code muscles.

    1. Web Dev 2 intro slide deck
    2. Semantics schemantics
    1. Validation Verifier
    2. HTML writer
    1. Responsive image section
  2. 2

    Grid systems

    CLRs: 1, 2, 3, 4

    Learn how modular grid systems can simplify layouts making coding more efficient.

    1. Grid systems slide deck
    1. Flexbox grids videos
    1. Definition Devastator
    2. Making responsive grids
    3. Using Gridifier
    1. Grid layout
  3. 3

    Grid systems redux

    CLRs: 1, 2, 3, 4

    Get more experience using modular grid systems in different website layouts.

    1. Finding grids
    1. Fraction Fragmenter
    2. Hot grid-dle
    1. Grid-ception
  4. 4

    Modular type

    CLRs: 1, 2, 3, 4

    Explore modular & responsive type systems to simplify and codify typesetting on the web.

    1. Modular type slide deck
    1. Modular typography videos
    1. Media Query Manager
    2. Using a type system
    3. Section
    1. Banner
  5. 5

    More modular type

    CLRs: 1, 2, 3, 4

    Dig deeper into modular type systems for better understanding.

    1. Why the (type) face?
    1. Type Trasher
    2. Trendy fruit
    1. Content page
  6. 6

    Grids + modular type

    CLRs: 1, 2, 3, 4

    Combining grid systems with modular type to create a website without much hassle.

    1. Sketching websites
    1. Grid Genius
    2. Modular nav
    1. Lists ’n’ grids
  7. 7

    Modular CSS

    CLRs: 1, 2, 3, 4

    Reduce CSS clutter and repetition by using modular CSS ideas and pre-built components.

    1. Modular CSS slide deck
    2. Index card Q&A
    1. Modules videos
    1. Commit Connoisseur
    2. Button systems
    3. Embed containers
    1. Icons
    2. List groups
  8. 8

    Work week

    CLRs: 1, 2, 3, 4

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

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

    Everything modular!

    CLRs: 1, 2, 3, 4

    Combine modular grids, type and CSS components together to get a website running quickly.

    1. Finding patterns
    1. Just your type: text & sketches
    1. Just your type: code
    2. Just your type: design & rationale
  10. 10

    Forms

    CLRs: 1, 2, 5

    Discover how to code interactive fillable forms.

    1. Forms slide deck
    2. Finding & grouping fields
    1. Forms videos
    1. Contact form
    2. Registration form
    1. Volunteer form
  11. 11

    Tables

    CLRs: 1, 2, 6

    Code complexly formatted data charts using the HTML table element.

    1. Tables slide deck
    1. Tables videos
    1. Form Finalizer
    2. Data table
    3. Events calendar
    1. More than just datum
  12. 12

    Accessibility

    CLRs: 1, 2, 4, 7

    The web is for all humans—explore the small changes needed to make that a reality.

    1. Accessibility slide deck
    2. Text me slowly
    1. Accessibility videos
    1. Basic accessibility
    2. Accessibility fixer-upper
    1. Arrrgene’s treasure tours
  13. 13

    SaaS website planning

    CLRs: 1, 2, 3, 4, 5, 6, 7, 8

    Start your SaaS website by sketching, writing some text & starting to code.

    1. Index card Q&A
    1. Table Tabulator
    2. Module Mogul
    3. SaaS website sketches
    1. SaaS website
  14. 14

    SaaS website work period

    CLRs: 1, 2, 3, 4, 5, 6, 7, 8

    Peer test everybody’s SaaS website on variety of platforms and devices.

    1. Course feedback
    1. Accessibility Atomizer
    2. SaaS website check-in
    1. SaaS website
  15. 15

    SaaS website completion

    CLRs: 1, 2, 3, 4, 5, 6, 7, 8

    Finish the SaaS website by the end of the term.

    1. Accessibility testing
    2. Browser testing
    1. Request for grade
    2. SaaS website

Marking scheme

Activities & lessons

15% — 18 @ 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 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
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

3
Systemize websites

  • Create and use a responsive, adaptive grid systems for websites
  • Apply techniques to reduce duplication in typography code
  • Separate CSS into distinct chunks and files for maximum organization and reuse

4
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
  • Group and collect CSS into separate organized files

5
Create functional user-friendly forms

  • Using modern & accessible techniques to design and build forms
  • Make forms functional with online cloud platforms

6
Layout data in charts

  • Use HTML tables with CSS to effectively design data
  • Make the data tables work on multiple devices using responsive techniques

7
Make websites accessible to all human beings

  • Apply understanding of different impairments affecting human beings
  • Execute coding best practices to enhance accessibility of web pages
  • Test websites with accessibility tools and fix problems

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