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

    Introduction & installation

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

    1. Web Dev 1 intro slide deck
    2. Why learn to code? slide deck
    1. Introduction to Learn the Web videos
    1. Create online accounts
    2. Install all the things!
    3. Set up your code editor
  2. 2

    Files, folders & code

    CLRs: 1

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

    1. The Open Web slide deck
    2. Naming conventions slide deck
    1. Computer shortcuts videos
    2. Using URLs videos
    1. Keyboard Commander
    2. Using your code editor
    3. Making files & folders
  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. Website on GitHub
    2. Using Markbot
    3. Create tagged issue
  4. 4

    Categorizing content

    CLRs: 2

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

    1. HTML introduction slide deck
    2. Semantics map-out
    1. HTML semantics videos
    1. Verbalizing code
    2. Content to code
    3. Layout to code
  5. 5

    HTML semantics

    CLRs: 1, 2

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

    1. Family lines
    1. HTML indentation videos
    2. Marking up a webpage videos
    1. HTML document setup
    2. Content semantics
    3. Masthead semantics
  6. 6

    Semantics & accessibility

    CLRs: 3

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

    1. Accessibility slide deck
    2. Text me slowly
    1. Content accessibility videos
    1. HTML validation fixes
    2. Accessible content for all
  7. 7

    HTML content

    CLRs: 1, 2, 3

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

    1. Sitemaps & content prioritization slide deck
    2. Sitemap: working backwards
    1. Information architecture videos
    1. Plan a website
    2. Code a website
  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

    Applying design

    CLRs: 1, 2, 3

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

    1. CSS introduction slide deck
    1. Using CSS videos
    2. CSS indentation videos
    1. Dinosaur designs
    2. Use all the selectors!
    3. CSS validation fixes
  10. 10

    Web typography

    CLRs: 3

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

    1. Web design is 95% typography slide deck
    1. Basic typography videos
    2. Everything is a box videos
    1. Speak the look
    2. Stylish beets
    3. Dealing with whitespace
  11. 11

    Grid for layout

    CLRs: 2, 3

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

    1. Grids for layout slide deck
    2. Sketching a website
    1. CSS grids videos
    1. Developer tools
    2. No sketch, no grid
    3. Type those grids
  12. 12

    Flexbox for components

    CLRs: 2, 3

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

    1. Flexbox slide deck
    1. Flexbox videos
    1. Dev Tool Dynamo
    2. Distributed navigation
    3. Distributed cards
  13. 13

    Intrinsic layouts

    CLRs: 3

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

    1. Specificity Spy
    2. Pretty products
    3. Stunning start-page
  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.

    1. Design + accessibility slide deck
    1. Accessibility for design videos
    1. Accessibility Atomizer
    2. Arrrgene’s treasure tours
  15. 15

    Assessment week—no classes

    CLRs: 1, 2, 3

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

    1. College course feedback

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.