Module: UI Basics

Learn to design basic web pages using HTML and CSS.

Learning Outcomes

Acquire capability with the Eclipse IDE

You develop capability with the Eclipse IDE that enables you to develop software efficiently and effectively.

Design using HTML and CSS

You can use HTML and CSS to design basic web pages, and you can use tools (Eclipse, Chrome Developer Tools, LiveReload) to do this development efficiently.

Readings

UI Basics

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

Screencast 17 min

HTML and CSS Resources

Two dozen links providing tutorials and reference material for: HTML, CSS, Google Web Fonts, Chrome Developer Tools and CSS Colors.

Experiential Learning

Practice WOD: BrowserHistory1

Develop a web page using basic HTML.

Practice WOD: BrowserHistory2

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

Practice WOD: BrowserHistory3

Develop a web page using Chrome Developer Tools.

A11: UI Basics Technical Essay

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

Assessments

Group WOD: History of Surfing

Outcomes assessed: Design using HTML and CSS

Rx: < 20 min Av: 20-30 min Sd: 30-45 min DNF: 45+ min or incorrect

Students worked in groups in-class to design a web page on the history of surfing.

Discussion:

  • Only one group did not complete the task.

UI Basics Technical Essay

Outcomes assessed: Create high quality technical writing

This assessment evaluated the ability of students to write a high quality technical essay summarizing their experiences doing the UI Basics practice WODs.

Discussion:

  • It appears that if you don’t repeat WODs until you get AV, you run a high risk of DNF’ing on the in-class WOD.

  • Some of you are publishing rather sloppy, meandering descriptions of your experience. Starting next week, I will deduct points for a posting that does not have minimally acceptable structure and content, including:

    • You describe each practice WOD in its own section.
    • You summarize the goal of each practice WOD.
    • You clearly specify the number of attempts (and the Rx/Av/Sd/DNF value) for each practice WOD.
    • You articulate interesting insight into the experience and insights you gained from the practice WODs.

Individual WOD: BrowserHistory4

Outcomes assessed: Write code efficiently, Design using HTML and CSS

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

BrowserHistory4 is a slight variant of the BrowserHistory3 practice WOD.

Discussion:

  • Only half the class finished this individual WOD successfully. In contrast to last week, in which the DNFers actually did not turn anything in, this week all but two students turned in their code prior to the cut-off time. This means that in seven cases, students submitted solutions that upon review were not correct.

  • In some of these cases, the difference between the submission and the reference screenshot shown in the WOD was so obvious that I wonder if those students simply “gave up” once it got close to the DNF time. In other cases, it could be that the students simply overlooked a problem with their approach before turning it in.