SAIC | ATSP 3900 | Professional Practices: Web Art

Week 2 : HTML 1

Homework

Introduction Website

Create an Introduction Website using www.CodePen.io You're welcome to experiment with CSS and images as well.

It should contains both a one-paragraph informal introduction to yourself

As well as Personal Response no. 1: 25 questions (see Assignments tab).

Readings

Card image cap
Program or Be Programmed

by Douglas Rushkoff

LINK

CSS Review

Creating a separate CSS file

It is useful to write CSS in a separate .css file because it allows for better organization and management of your code. By separating the CSS from the HTML, it becomes easier to make changes to the styles without having to sift through the HTML code. Additionally, it allows for the reuse of styles across multiple pages, as the same .css file can be linked to each page. This can save time and effort in the long run.

New CSS material

CSS Box Model

https://www.w3schools.com/css/css_boxmodel.asp

cssbox

CSS Units (Rem, em, %)

CSS offers a variety of units to size elements on a webpage. Three common units are em, rem, and %.

Rem Unit

The rem unit is relative to the root element, which is typically the <html> tag. This means that the size of an element will be relative to the font-size of the root element, regardless of where it is on the page. This makes it a good unit to use for responsive design.

/* Set the font-size of the root element to 16 pixels */
html {
  font-size: 16px;
}

/* This is equal to 32 pixels */
.element {
  font-size: 2rem;
}

Em Unit

The em unit is relative to the font-size of the parent element. For example, if the font-size of the parent element is 16 pixels, 1 em is equal to 16 pixels.

.parent {
  font-size: 16px;
}

.child {
  font-size: 1em; /* This is equal to 16px */
}

% Unit

The % unit is relative to the size of the parent element. For example, if the width of the parent element is 100 pixels, 50% width is equal to 50 pixels.

.parent {
  width: 100px;
}

.child {
  width: 50%; /* This is equal to 50px */
}

CSS Borders

CSS borders are used to add a line around an HTML element. The border property sets the style, width, and color of the border.

Here is an example:

/* Set the border style to solid, width to 2 pixels, and color to black */
.example {
  border: 2px solid black;
}

This will add a 2 pixel thick solid black border around the .example element. Other border styles include dotted, dashed, double, groove, ridge, inset, and outset.

Other Materials

CODEPEN.io
Key Concepts: