• Try “portfolio”, “ink”, “branding” or a code like “PRS 101”.

DMW 102Digital Media and Web Development

Introduction to Web Design

How websites work and how to design them: HTML structure, CSS, responsive layout with flexbox and grid, web typography, navigation and images, ending with a published page.

Planned

About this course

This course gives artists and designers enough understanding of the web to design for it confidently and build simple pages by hand. You will learn how browsers, servers and domains fit together, write semantic HTML, style it with CSS, and lay pages out responsively with flexbox and grid. Design lessons cover web typography, navigation and information architecture, and images for the web. You will finish by turning a wireframe into a hand-coded page and publishing it on a free static host. Only a text editor and browser are needed.

Who it’s for: Artists and designers with no coding experience who want to understand and build for the web. Comfort with files and folders is enough.

You will be able to

  • Explain how browsers, servers, domains and hosting fit together.
  • Write semantic HTML for a content page.
  • Style a page with CSS and build responsive layouts using flexbox and grid.
  • Apply web typography, navigation and image practices to a page design.
  • Publish a hand-coded, responsive single page on a static host.

Studio project

A published, hand-coded responsive page built from your own wireframe with semantic HTML and CSS.

To complete this course

  • Complete every required lesson.
  • Have the assignment “A hand-coded, responsive page” accepted by an instructor.
  • Records of completion are issued only for courses whose content has passed instructor review.

Part of

Syllabus

Working titles: they may change as the course is written.

  1. Module 1: How the web works

    The moving parts behind every website.

    1. 1.1Browsers, servers, domains and hostingReading · 30 min
    2. 1.2HTML structure and semanticsExercise · 50 min
    3. 1.3CSS basicsExercise · 50 min

  2. Module 2: Layout

    Arranging content on screens of every size.

    1. 2.1The box modelReading · 30 min
    2. 2.2Flexbox and gridExercise · 60 min
    3. 2.3Responsive designReading · 40 min

  3. Module 3: Designing pages

    Design decisions specific to the web.

    1. 3.1Web typographyReading · 30 min
    2. 3.2Navigation and information architectureReading · 30 min
    3. 3.3Images for the webReading · 30 min

  4. Module 4: Building and publishing a page

    From wireframe to a live page.

    1. 4.1Studio: wireframe to codeStudio · 90 min
    2. 4.2Publishing on a static hostExercise · 40 min

Author: Ricketts University curriculum team (draft for founder review) · Not yet reviewed

Related courses

  1. DMW 101

    Digital File Organization

    Stop losing files: folder structures, naming conventions, versioning, backups you have actually tested, metadata, archiving and clean client handoffs.Digital Media and Web Development    Foundation9 lessons · ~8 hPlanned
  2. DMW 103

    Photography for Artists

    Photograph your artwork accurately with a phone or camera: exposure, white balance, lighting flat and glazed work, 3D pieces, process and installation shots, editing and export.Digital Media and Web Development    Foundation11 lessons · ~14 hPlanned
  3. DMW 201

    Creating an Artist Website

    Plan, build and launch a portfolio website that helps the right people find, understand and contact you, using a site builder or a simple hand-built site.Digital Media and Web Development    Intermediate12 lessons · ~20 hIn development
Back to the full catalogue