ICS 314 Fall 2024

Module: UI Design (Frameworks)

Bootstrap 5 is a CSS framework for building cross-browser, responsive user interfaces.

Learning Outcomes

Design using a UI framework

Create high quality technical essays

Readings

Guided tour of the UI Design (Frameworks) module

Why, what, how, and when you will learn about UI Design and framework support.

Screencast 6 min

UI Frameworks

Introduction to user interface frameworks.

Screencast 15 min

Bootstrap 5 Docs

Official Bootstrap 5 Documentation

Browser Color Pickers

How to use browser-based plugins to determine page colors.

Screencast 6 min

7 rules for creating gorgeous UI (Part 1)

A non-artsy primer in digital aesthetics.

7 rules for creating gorgeous UI (Part 2)

A guide to visual aesthetics, written by a nerd

Clean up your mess: A guide to visual design for everyone

If you’re like most people, you feel like a baby when it comes to visual design. You sometimes have a vague sense of what you want, but can’t articulate it or make it come about. All you can do is point and cry…

Optional

Bootstrap 5 Hello World

Quick start to using Bootstrap 5 with VSCode

Color Blocked Home Pages

A common design pattern for home pages

Spaces vs non spaces in CSS rules

What’s the difference between ‘.classA.classB’ and ‘.classA .classB’?

Introduction to GitHub Desktop, Part 2 (Branching and Merging)

Branching and merging with GitHub Desktop

Screencast 17min

freeCodeCamp Full Bootstrap 5 for Beginners

3 hour tutorial

Experiential Learning

E34: BrowserHistory with Bootstrap 5

Make life wonderful with Bootstrap 5

Practice WOD Section 4: 05 Oct 11:00 PM Sections 1,2,5: 06 Oct 11:00 PM

E35: Island Snow with Bootstrap 5

Rebuild the Island Snow home page with Bootstrap 5

Practice WOD Section 4: 06 Oct 11:00 PM Sections 1,2,5: 07 Oct 11:00 PM

E36: Your Choice with Bootstrap 5

Rebuild a site of your choosing with Bootstrap 5

Practice WOD Section 4: 07 Oct 11:00 PM Sections 1,2,5: 08 Oct 11:00 PM

E37: Reflect on UI Frameworks

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

Technical Essay Section 4: 09 Oct 11:00 PM Sections 1,2,5: 10 Oct 11:00 PM