1. Home
  2. Modules
  3. UI Design (Basics)

Module: UI Design (Basics)

Learn to design basic web pages using HTML and CSS.

Learning Outcomes

Design and implement web pages using HTML and CSS

Create high quality technical essays

Readings

Guided tour of the UI Design (Basics) module

Why, what, how, and when you will learn about user interface design basics.

Screencast 5 min

UI Design Basics

Introduction to user interface design using HTML and CSS and supporting tools.

Screencast 11 min

HTML5 tutorial

Introduction to HTML5. Read the Beginner tutorial (except forms) and Intermediate tutorial (span/div and Meta).

CSS tutorial

Introduction to Cascading Style Sheets

Getting started with Google Web Fonts

How to use the Google Web Fonts API to add fonts to your web pages.

Ten Google WebFont Combinations

A hand-picked set of 10 title/text font combinations.

Chrome Developer Tools

Documentation for the developer tools associated with the Chrome browser.

Explore and master Chrome Developer Tools

Course on Chrome Developer Tools offered by Google and Code School.

Optional

Live Reload documentation

How to install and use the Live Reload browser refresh tool.

Optional

Experiential Learning

E36: BrowserHistory1

Develop a web page using basic HTML.

Practice WOD 10 Oct 09:00 PM

E37: BrowserHistory2

Develop a web page using basic CSS and Google Web Fonts.

Practice WOD 11 Oct 09:00 PM

E38: BrowserHistory3

Develop a funky multi-column web page with a navbar.

Practice WOD 12 Oct 09:00 PM

E39: Reflect on UI Design Basics

Write a technical essay summarizing your experience doing the UI Design Basics practice WODs.

Technical Essay 15 Oct 09:00 PM

Assessments

A16: Assess your ability to use simple HTML and CSS

15 Oct 09:00 AM

Outcomes assessed: Design and implement web pages using HTML and CSS

Rx: < 15 min Av: 15-20 min Sd: 20-35 min DNF: 35+ min or incorrect

This in-class WOD assessed your ability to write simple CSS and HTML.

Discussion:

  • Yes! At last, no DNFs!
  • For next time, make sure to delete the .idea and *.iml files from your GitHub repo. I will start DNFing if I find those files in future.

A17: Assess your ability to write about your HTML and CSS experiences

15 Oct 09:00 PM

Outcomes assessed: Create high quality technical essays

This assessment evaluated your technical essay regarding the UI Design Basics module for clarity, insight, and conformance to the technical essay guidelines.

Discussion:

  • All essays were satisfactory, although some are now on the edge of being unsatisfactory, because the authors are simply “reviewing the homework assignment” rather than “writing for the world”. It is important to review what you learned, but that review should be framed within more general insights about the topic under study. Ask yourself this: A year from now, if someone comes across your essay, what insights will they obtain?