CS571 Class note 1
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 | px | Pixels — relative to screen (1px = 1 dot) |
pt | Points — 1pt = 1/72 inch = 0.3527cm | |
in | Inches — 1in = 2.54cm = 96px | |
cm | Centimeters — 1cm ≈ 37.8px | |
mm | Millimeters — 10mm = 1cm | |
pc | Picas — 1pc = 12pt = 4.233mm | |
Relative Units | % | Percentage — relative to parent element |
em | Relative to the font size of the element | |
rem | Relative to the root element's font size | |
vw | 1% of viewport width | |
vh | 1% of viewport height | |
vmin | 1% of the smaller of viewport width or height |