@jonippolito • UMaine.edu/newmedia
How to enjoy this webinar
🖥 Load this webinar script
Link in the chat panel
🖊 Get a CodePen account
⌨️ Type in the Zoom "chat" panel
(not the Q&A panel)
🗣 To enable your audio or video speak
Click Raise Hand ✋ to be promoted to panelist)
New Media faculty
New Media alumni
Popular New Media concentrations
User Experience (UX) design
Flipped classrooms
Digital badges
Ways to make a responsive website
Feature
Web builder (WordPress)
CSS framework (Bootstrap)
Plain CSS (grid, @media)
The three horsemen of the modern web
HTML
HTML
The First Web Page
Tim Berners-Lee, 1991
HTML
- "Tags" can be nested as "parents" and "children"
<window>
∟ <document>
∟ <head>
∟ <script>
∟ <body>
∟ <div>
∟ <form>
∟ <img>
Tags are always the same, just used in different combinations
You can type text between the tags
You can set the source file for an image tag
HTML
🎗 Close tags twice
1. Close every tag with an "end angle" >
<div>
2. Close start tags with an "end tag" that has a slash /
<div>Welcome to my page!</div>
CSS
World Wide Web (W3) Consortium, 1996
CSS
Controls the style of HTML tags
/* A "tag" style applies to every block of text. */
div {
font-family: verdana ;
}
/* a "class" style applies to all "cat" divs. */
.cat {
width: 100px ;
}
/* An "id" style applies to a unique "cat" div. */
#grumpy {
color: red ;
}
Don't forget the semicolon
/
