Course Resources
Additional resources
- Web Browsers:
- HTML 5:
git& GitHub tutorials:- Text Encoding and Unicode:
-
- http://www.unicode.org
- put the
<meta charset = 'utf-8'>head tag FIRST!
-
- Encoding vs. Unicode "Code Points":
"Unicode first and foremost defines a table of code points for characters. That's a fancy way of saying "65 stands for A, 66 stands for B and 9,731 stands for ☃" (seriously, it does). How these code points are actually encoded into bits is a different topic." ... "Characters are referred to by their "Unicode code point". Unicode code points are written in hexadecimal (to keep the numbers shorter), preceded by a "U+" (that's just what they do, it has no other meaning than "this is a Unicode code point")."
-
The Great Escapism (Or: What You Need To Know To Work With Text Within Text)
-
Week 1 - TEXT EDITORS, HTML AND CSS
In addition to w3c for CSS & HTML, for HTML, see also: https://whatwg.org
HTTP is per w3c & http://ietf.org
- Mini Bootcamp Lesson 1: HTML & CSS
-
Lecture 1 example on CodePen.io: "divs"
Lecture 1 notes
-
Lecture 1 starts@ ~12min
There's good information in the first twelve minutes, don't skip it. - Words
-
Declaring the type of document: <!DOCTYPE html>
html = Hyper-Text Markup Language
HTML consists of matching <tag_type> openings and </tag_type> closings.
Whatever is inside the open/close tag set belongs to that tag area.
I.e. <open> tag_area <close>
To declare a closing, the tag type is prepended with a forward slash: /
I.e. <tag_type> tag_area </tag_type>
E.g. <html> html_area </html>
HTML involves "nesting" tags inside each other per sections, containers, divisions, etc. E.g.
<!DOCTYPE html><html><head>...</head><body>...</body></html> -
<html lang="en">...</html>
per w3.org: language declaration
"Always use a language attribute on the html element. This is inherited by all other elements, and so will set a default language for the text in the document head element."
- Basic html document layout:
- <!DOCTYPE html> - doc. type declaration,
- <html> </html> - html container
- <head> </head> contains meta-info mostly for the browser,
- <body> </body> is the actual body of the page
- Title and meta info in head
Title tag determines browser tab text.
<html> <head> <title>Browser Tab Text</title> </head> <body> </body> </html> - body contains what you see
-
image tags (and some other tags) don't need to be closed
<img src="url_goes_here">
...& it makes NO difference, but you can use a closing tag:
<img src="url_goes_here"/> - anchor tags for links, p tags for paragraphs, h# for headers, etc...
- Whitespace is pretty much ignored; however, whitepsaces (and tabs) can make things much more "human-readable"
- html comments are ignored by the html parser:
<!-- comments go here -->
<!--
comments
can
also
be
across
multiple
lines
--> - CSS = Cascading Style Sheet
-
CSS link syntax in the html file (tells the html doc where to find the corresponding css file)
<html> <head> <title>Browser Tab Text</title> <link to CSS file> </head> <body> </body> </html>
e.g. <link rel="stylesheet" type="text/css" href="homework.css"> - convention is to put .css in the same directory as the .html, but it can be put in any directory so long as the "link href="" points to its location
- per w3schools.com: CSS link syntax
-
HTML "super power": use the browser element inspector to see how web pages are constructed with html and css!
e.g. to find a hexadecimal color code (e.g. #4CAF50) -
Basic CSS syntax:
tag_type {
declaration: specification;
...
}
-
more CSS syntax:
- classes are prepended with a period, i.e. .class_name{...} e.g.,
.some_class_name{...} in the CSS file, and,
<html_tag class="some_class_name">...</html_tag> in the HTML file. - id's are prepended with a has, i.e. #id_name{...} e.g.,
#some_id_name{...} in the CSS file, and,
<html_tag id="some_id_name">...</html_tag> in the HTML file.
- classes are prepended with a period, i.e. .class_name{...} e.g.,
-
ID vs CLASS:
- ID's are UNIQUE to a single instance
- Each element can have only one ID
- Each page can have only one element with that ID
- CLASSes are used to group element
- You can use the same class on multiple elements.
- You can use multiple classes on the same element.
-
CSS order of precedence: most exact vs top to bottom cascade (vs importance)
- Importance
- Specificity
- Source Order
- Per w3schools: CSS Combinators
- CSS comments are between forward slash and star: /* comments go here */ and they can span multiple lines as well.
- HTML specs, percentage vs. height
- HTML meta tags
- How do I indent or tab text on my web page or in HTML?
- HTML Escape Characters: Complete List
- I cannot recommend strongly enough: DO NOT TAKE NOTES IN HTML!!!!!! XD
-
Lecture 1 starts@ ~12min
- Homework assignment:
- Replicate the images in HTML and CSS code.
- Homework assignment 1 on CodePen
Click here for the image
- Homework assignment 2 on CodePen
Click here for the image
- Homework assignment 3 on CodePen
Click here for the image
- Homework assignment 1 on CodePen
- Mini Bootcamp Lesson 2: Responsive Web Design
- LESSON 2: Responsive Web Design
- Lesson 2 lecture example on CodePen: "Boxes and divs"
- Lecture 2 notes
- Homework assignment:
Click here for a full screen capture
- Mini Bootcamp Lesson 3: Command Line,
git& Github
- LESSON 3: Command Line, Git & Github
- NOTES: command line: pwd/cd/ls etc.
- NOTES: git: fork, clone, status, add, commit, push, etc.
- Homework assignment:
- Working with GitHub
- Completed homework
-
Click here for the modified Tweet
- Mini Bootcamp Lesson 4: JavaScript and the DOM (Domain Object Model)
- Homework assignment:
- Mini Bootcamp Lesson 5: Statements, Variables, and For Loops from JavaScript
- Homework assignment:
- Mini Bootcamp Lesson 6: Functions, Parameters, Arguments
- Homework assignment:
- Mini Bootcamp Lesson 7:
- Homework assignment:
- Mini Bootcamp Lesson 8:
- Homework assignment: