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

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

Introduction to merging and branching in GitHub

A process model where development is done in branches; when finished, merged into master.

Screencast 13 min

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

E29: FreeCodeCamp HTML5 and CSS

Learn about HTML and CSS using FreeCodeCamp

5 hours 24 Sep 11:30 PM

E30: BrowserHistory1

Develop a web page using basic HTML.

Practice WOD 25 Sep 11:30 PM

E31: BrowserHistory2

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

Practice WOD 26 Sep 11:30 PM

E32: BrowserHistory3

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

Practice WOD 27 Sep 11:30 PM

Assessments

A10: Assess your ability to use simple HTML and CSS

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 assesses your ability to write simple CSS and HTML.

Discussion:

  • This one was a bit harder: not so many Rx times, but the number of DNFs continues to drop. Very happy about that!