CS571 @UW-Madison

CS571 is a course for basic UI/UX design and frontend programming by University of Wisconsin Madison. The course is completely open source for all cs students to learn globally.

The official website of this course is CS571, the latest version is for 2025 Spring.

You can find matching class videos and other materials in this website.


Json

Json(Javascript Object Notation) is basically a way to represent data in a hierarchy key-value pairs.

The first tutorial didn’t cover json in depth, I assume they will look in to json in the next few tutorials.


HTML

A good place to learn HTML is MDN Web Doc, this site covers all useful HTML components in detail.

This note will not cover html in basics, but will contain insights and interesting discoveries I found while learning.


Semantics and nesting elements

Sometimes we can place elements within other elements, this is called nesting, just like in programming we have nested loops.

this is me

1
<p>this is <strong>me</strong></p>

Using <strong> label we can emphasize the text in bold font.

However, if you learned html before, you may be confused that <b> label also turns the text into bold font. The main difference is the semantics.

In HTML, although pairs like <strong> and <b> have the same visual effect, they are not treated the same in screen readers or search engines.

  • the search engine may give more weight to <strong> but would treat <b> texts as normal texts.
  • the screen reader may read <strong> text with emphasis to help visually impaired users.

Same applies to label pairs like:

  • <em> vs <i>
  • <mark> vs <span style="background: yellow">
  • <code> vs <span style="font-family: monospace">
  • <blockquote> vs <div style="margin-left: 20px">
  • <abbr> vs just typing the abbreviation

These label pairs have the exact same visual representation but different semantics meaning, and will therefore be treated differently in browsers or assistive technologies.


Void Elements

Some elements don’t have closed tag and are composed of only one tag:

  • <img>
  • <br>
  • <hr>
  • <input>
  • <link>
  • <href>
  • <meta>

Attributes

Typically, an attribute looks like this:

1
<label attr=""></label>

We can add identifiers using attribute, define the labels behaviour, or apply inline css styles:

  • class or id identifiers id="", class=""
  • define behaviour
    1
    2
    3
    <input type="text"> 
    <!-- this defines that the input is text-->
    <!-- you can also set the "type" attribute to "password", "email", etc.-->
  • inline css style=""

CSS

CSS Units

It has always puzzled me how the units of measurement works in CSS, commonly seen units like px, %, vh, may have the same visual effect in a fixed window, but completely different size in another.

While learning CSS in CS571, I took some time to figure out the exact mechanism for such transformation.

Ref geek4geek

In general there are absolute units (that remain the same scale regardless of the window), and relative units. In order to make the page adaptable and scalable for new windows, we usually prefer the latter.

Absolute Units pxPixels — relative to screen (1px = 1 dot)
ptPoints — 1pt = 1/72 inch = 0.3527cm
inInches — 1in = 2.54cm = 96px
cmCentimeters — 1cm ≈ 37.8px
mmMillimeters — 10mm = 1cm
pcPicas — 1pc = 12pt = 4.233mm
Relative Units %Percentage — relative to parent element
emRelative to the font size of the element
remRelative to the root element's font size
vw1% of viewport width
vh1% of viewport height
vmin1% of the smaller of viewport width or height