Skip to content

Feb 11: Assessment Day

Class Canceled

Due to Assessment Day, we will have our next class on Thursday.

Video Tutorial

This video provides an excellent introduction to (or review of) this week's topic.

Code Example

Here is the final version of the code at the end of the video. Try running/editing this code in VS Code using the Live Server.

video/index.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!DOCTYPE html>
<html>
    <head>
        <title>CSS Introduction</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <h1 class="blue">Introduction to CSS</h1>
        <p>This is just a quick introduction to CSS.</p>
        <div class="box"></div>
    </body>
</html>
video/styles.css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.blue {
    color: rgba(255, 255, 0, .5);
    color: #00000000;
    color: hsla(0, 100%, 50%, 0);
}

h1 {
    color: green;
}

body {
    color: red;
    font-size: 40px;
}

.box {
    height: 100px;
    width: 2rem;
    padding: 20px;
    margin: 50px;
    border: 10px solid black;
    background-color: red;
}