Email timca@uw.edu
Zoom https://washington.zoom.us/my/timca
In Person: introduce yourself to your neighbor!
Questions to answer:
(Online: post a greeting in the chat and then respond to someone else's greeting. Embrace the chaos!)
Lectures will be used to review and demo the material.
Course Textbook: https://info340.github.io/
Video Demos: linked from Canvas
The course schedule has an ordered list of resources and tasks. The best way to approach this:
And ask lots of questions throughout!
https://sprinter-rehost.web.app (Su22)
https://pokedex340-8ec91.web.app/ (Sp22)
https://huskyswaps-e2042.web.app/items (Wi22)
https://project-skincare-proposal.web.app (Wi22)
https://subscriptr.web.app/ (Wi22)
https://project-minionsville.web.app/ (Au22)
https://moody-340.web.app/ (Au22)
Project Proposal
Draft 1 (Static Mockup)
Draft 2 (React)
Final Version
We will also provide accommodations for illnesses/etc.
5 credit course = 15 hour per week commitment (link)
Autumn 2022
Winter 2023
Class & Lab Work (5 hr/week)
At Home Work (10 hr/week)
5 credit course = 15 hour per week commitment (link)
While the task maybe to implement a program, the work you need to do for this class is to learn the material. AI can help you with the task, it cannot help you with the work. recognition != recall
For full details, see the syllabus on Canvas
protocol
domain
resource
"Hi Wikipedia, I'd like you to send me the Informatics page!"
two
t
(how to handle info)
(who has info)
(what info you want)
Web Server
Response
Request
+
=
We will be working with branches in this class. The "starter" lecture code is on its own branch, and we'll do work on the "completed" branch
git branch
List available branches
git branch [my_branch]
Create a new branch called "my_branch"
git checkout [my_branch]
Switch to branch "my_branch"
git merge [other_branch]
Merges changes from other_branch into the current branch.
"this is a heading, this is a paragraph, this is a definition, this is a hyperlink..."
<tag>
Content
</tag>
<tag>content</TAG>
open/start tag
close/end tag (leading slash)
content
}
ignores whitespace and tag case (use lowercase)
<h1>
: a 1st-level heading
<h2>
: a 2nd-level heading (and so on, down to <h6>)
<p>
: a paragraph of text
<a>
: an “anchor”, or a hyperlink
<img>
: an image
<button>
: a button
<em>
: emphasized content (not necessarily
italic). The same as _text_ in Markdown.
<ul>
: an unordered list (and <ol> is an ordered list)
<li>
: a list item (an item in a list)
<table>
: a data table
<form>
: a form for the user to fill out
<div>
: a division (section) of content. Also acts as an empty
block element (followed by a line break)
<span>
: a span (section) of content. Also acts as an empty
inline element (not followed by a line break)
And more at http://www.w3schools.com/tags/ref_byfunc.asp
<tag attributeA="value" attributeB="value">
content
</tag>
Attributes are a space-separated list of names (think: variables) and values.
Values are (almost) always Strings.
NO SPACES!
<html lang="en">
...
</html>
<!-- an image -->
<img src="baby_picture.jpg" alt="a cute baby">
<!-- a is an "anchor" (hyperlink) -->
<a href="https://ischool.uw.edu">iSchool homepage</a>
"hypertext reference"
alternate text for screen readers
source
images have no (text) content so no closing tag
language of document is English
<h1>Hello <em>(with emphasis)</em> world!</h1>
open h1
close h1
open em
close em
<p>I <strong>never<strong> make mistakes</p>
important text
did not close tag!
<!-- An unordered list (ul) with 3 items.
The second item's content contains an
ordered list (ol) containing 2 items. -->
<ul>
<li>Pigeons</li>
<li>
Swallows:
<ol>
<li>African</li>
<li>European</li>
</ol>
</li>
<li>Budgies</li>
</ul>
cmd + /
to
comment a line
comments
Open up the command palette with
F1
or
cmd-shift-p
for quick access to commands.
<html lang="en">
<body>
<h1>Some content...</h1>
...
</body>
</html>
declare language
<!DOCTYPE html>
<html lang="en">
<body>
<h1>Some content...</h1>
...
</body>
</html>
for search engines, etc.
document format
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page Title</title>
</head>
<body>
<h1>Some content...</h1>
...
</body>
</html>
document "head" (metadata, not shown)
title in tab
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Page Title</title>
</head>
<body>
<h1>Some content...</h1>
...
</body>
</html>
for non-English chars
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="your name">
<title>My Page Title</title>
</head>
<body>
<h1>Some content...</h1>
...
</body>
</html>
document body (shown) content
HTML document (web page)
A command line package manager ("app store") that comes with Node.js. used to manage external libraries and applications.
npm install -g PACKAGE_NAME
to
globally
(whole computer) install command line programs.
npx
PACKAGE_NAME
to download and run without installing
npm install PACKAGE_NAME
to
locally (per project) install a new code package and record it in the
package.json file.
npm install
to
locally install all of the package.json listed dependencies for a project.
Exercises contain test suites that you can use to check your work. Run these tests using the Jest test framework:
Make sure to install jest globally (or use npx)
npm install -g jest
Run a particular test suite (e.g., for problem-name.spec.js):
jest problem-name
# or
npx jest problem-name
Install the dependencies listed in package.json
# must be in project dir
npm install
Problem Set repositories are set up to automatically run the Jest grader when pushed to GitHub.
(see also: https://websitesfromhell.net/)
"use this color and font for the first paragraph in the article; this picture for the page's background..."
/* A rule with many properties */
h1 {
font-family: 'Helvetica';
color: white;
background-color: #333; /*dark gray*/
}
"font"
selector: apply to all <h1> elements
style.css
h1 {
font-family: 'Helvetica';
color: white;
background-color: #333; /*dark gray*/
}
<head>
<link rel="stylesheet" href="my-style.css">
</head>
<head>
relation between this page and reference
no content,
no closing tag
font-family
: the "font" (list alternates separated by commas)
font-size
: the size of the text
font-weight
: boldness
color
: text color
background-color
: element's background
padding
: the space around an element
<!-- HTML -->
<p>This text has <i>emphasis!</i></p>
/* CSS */
em {
font-style: normal;
text-decoration: underline;
}
why is this italicized?
change what emphatic text looks like
HTML describes the meaning, not what it looks like!
<!-- HTML -->
<p>This text has <em>emphasis!</em></p>
says nothing about appearance!
Have a rule apply to only a particular elements by specifying those elements' class attribute and then using that class as the selector in the CSS
/* CSS */
.highlighted {
background-color: yellow;
}
<!-- HTML -->
<p class="highlighted">This text is highlighted!</p>
dot specifies class name, not tag name
<!-- HTML -->
<p class="rebel">Leia Organa</p>
<p class="imperial">Darth Vader</p>
/* CSS */
.rebel {
color: red;
}
.imperial {
color: gray;
}
<div>
and
<span>
<div class="cow">
<p>Moo moo moo.</p>
<p>Moooooooooooooooooooo.</p>
</div>
<div class="sheep">
<p>Baa baa <span class="dark">black</span> sheep,
have you any wool?</p>
</div>
block element (line break)
inline element (no line break)
Multiple rules can apply to the same element (in a "cascade").
p { /* applies to all paragraphs */
font-family: 'Helvetica'
}
.alert { /* applies to all elements with class="alert" */
font-size: larger;
}
.success { /* applies to all elements with class="success" */
color: #28a745; /* a pleasant green */
}
<p class="alert success">
This paragraph will be in Helvetica font, a larger
font-size, and green color, because all 3 of the above
rules apply to it.
</p>
two classes (space separated)
Finish the "Start Here" steps on Canvas
Finish the task list for Week 1!
Read Git chapters for next week
Next: Git and GitHub