commit
0ca1c9fe59
@ -0,0 +1,134 @@
|
|||||||
|
# HTML - Tags, Content, Attributes, & Semantic HTML
|
||||||
|
|
||||||
|
## Lesson Objectives
|
||||||
|
|
||||||
|
1. Describe what HTML is
|
||||||
|
1. Describe what a tag is
|
||||||
|
1. Describe what the content of a tag is
|
||||||
|
1. List some common tags
|
||||||
|
1. Describe what the attributes of a tag do
|
||||||
|
1. List some common tags that have attributes
|
||||||
|
1. Describe what Semantic HTML means
|
||||||
|
|
||||||
|
## Describe what HTML is
|
||||||
|
|
||||||
|
HTML stands for Hyper Text Markup Language. It's a way to give structural meaning to text. It allows computers and programmers to easily determine what the purpose of a chunk of text does.
|
||||||
|
|
||||||
|
## Describe what a tag is
|
||||||
|
|
||||||
|
HTML creates this meaning by surrounding text with tags. Tags look like this: `<example-tag></example-tag>`. Note that there is an opening and a closing part of the tag. We call these "opening" and "closing" tags.
|
||||||
|
|
||||||
|
## Describe what the content of a tag is
|
||||||
|
|
||||||
|
Between the opening and closing tags, we insert the text or "content" of the tag. The final result would look like this: `<example-tag>Content Goes in here</example-tag>`. Tags can also be placed within other tags:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<outer-tag>
|
||||||
|
<inner-tag></inner-tag>
|
||||||
|
</outer-tag>
|
||||||
|
```
|
||||||
|
|
||||||
|
Note that when placing a tag inside another tag, you should indent the new tag to show it is a child of its parent tag.
|
||||||
|
|
||||||
|
## List some common tags
|
||||||
|
|
||||||
|
In general, we don't create our own tags. Instead there are a set of predefined tags with functionality already associated with them.
|
||||||
|
|
||||||
|
### Initializing a page
|
||||||
|
|
||||||
|
Every site should start with:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head></head>
|
||||||
|
<body></body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
1. The DOCTYPE tag is special and doesn't get closed. It also is the only tag that can have non-alpha-numeric (letters/numbers) values in it.
|
||||||
|
1. html: shows where the html begins
|
||||||
|
1. head: contains content specifically for the browser, not the user, to see.
|
||||||
|
1. body: contains all the content that the user will see when viewing the html in a web browser like Chrome, Firefox, etc.
|
||||||
|
|
||||||
|
### basic tags
|
||||||
|
|
||||||
|
1. h1, h2, h3, h4, h5, h6
|
||||||
|
- These are headers. Imagine you're giving a lecture and you want to have an outline. These will help a computer/programmer figure out what are the title, sub sections, sub-sub sections, etc. of your outline.
|
||||||
|
- The lower the number, the more important the header is. h1 tags are generally the title of the page. h2 denote a section, and so on.
|
||||||
|
1. p
|
||||||
|
- These are paragraphs
|
||||||
|
|
||||||
|
### specific structure
|
||||||
|
|
||||||
|
Of course a website is more than just headers and paragraphs, though. It has many sections to it that a normal outline doesn't. Here are some of the more common tags we use to give structure to the page
|
||||||
|
|
||||||
|
1. header
|
||||||
|
- could contain elements like a log and a nav bar. Perhaps the title of the page too?
|
||||||
|
1. footer
|
||||||
|
- could contain disclaimers, copyrights, and less important links (privacy, terms and conditions, legal, etc).
|
||||||
|
1. main
|
||||||
|
- the bulk of your site goes in here
|
||||||
|
1. section
|
||||||
|
- within some of the tags listed above, there can be different sections. Use this tag to block each section off
|
||||||
|
1. nav
|
||||||
|
- this will hold navigation links
|
||||||
|
1. article
|
||||||
|
- if you're writing a blog, or have a page with many self contained sections, this might work well
|
||||||
|
1. aside
|
||||||
|
- this is for tangential material. Sidebars, inserts, etc.
|
||||||
|
|
||||||
|
### generic structure
|
||||||
|
|
||||||
|
Sometimes we need a tag that doesn't fit into any of the previously defined categories. If this is the case, we can use one of two generic tags
|
||||||
|
|
||||||
|
1. div
|
||||||
|
- used to block out chunks of content
|
||||||
|
1. span
|
||||||
|
- use to block out small bits of content (e.g. words, sentences, etc)
|
||||||
|
|
||||||
|
### elements
|
||||||
|
|
||||||
|
Some elements are not structural, but actually make the content display differently
|
||||||
|
|
||||||
|
1. ul/ol/li
|
||||||
|
- creates a list, either unordered (ul) or ordered (ol)
|
||||||
|
- inside each `ul` or `ol` is a set of `li` list item elements.
|
||||||
|
1. em
|
||||||
|
- this will emphasize a chunk of text, usually making it italics
|
||||||
|
1. strong
|
||||||
|
- this will emphasize a chunk of text, usually making it bold.
|
||||||
|
|
||||||
|
### decorative elements
|
||||||
|
|
||||||
|
Some elements do not contain content and instead are purely for decoration. Elements that do not contain content are written like so `<no-content-tag/>`. Note there is no closing tag and the slash comes before the final `>`
|
||||||
|
|
||||||
|
1. hr
|
||||||
|
- horizontal rule, `<hr/>` creates a divider
|
||||||
|
1. br
|
||||||
|
- break, `<br/>`, starts a new line in a chunk of text.
|
||||||
|
|
||||||
|
## Describe what the attributes of a tag do
|
||||||
|
|
||||||
|
We can add more meaning to a tag by adding "attributes" to it. The looks like `<some-tag my-attribute="attribute-value"><some-tag>` or `<self-closing-tag attribute="value"/>`. Again, in general, we don't create our own attributes, but instead choose from predefined ones which have specific functionality depending on what tag they're attached to.
|
||||||
|
|
||||||
|
## List some common tags that have attributes
|
||||||
|
|
||||||
|
1. a
|
||||||
|
- Anchor tag. Creates a clickable link to another page. Uses the `href` attribute to do so
|
||||||
|
- example: `<a href="http://www.google.com">This link will go to Google</a>`
|
||||||
|
- note that the actual URL (location) of the page is hidden, and that only the content is shown.
|
||||||
|
1. img
|
||||||
|
- self closing, but contains a `src` attribute with is the URL to an image
|
||||||
|
- examle: `<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>`
|
||||||
|
1. video
|
||||||
|
- like `img` but goes to a video
|
||||||
|
- example: `<video src="http://www.w3schools.com/html/mov_bbb.mp4"/>`
|
||||||
|
- also has attributes like `autoplay`, `controls`, `loop`
|
||||||
|
1. audio
|
||||||
|
- like `img` and `video`
|
||||||
|
- example: `<audio controls="true" src="http://www.w3schools.com/tags/horse.mp3"/>`
|
||||||
|
|
||||||
|
## Describe what Semantic HTML means
|
||||||
|
|
||||||
|
The most important thing to remember is that these tags and attributes are supposed to give structure and meaning your content, not appearance. Sometimes you might want the title of the page to be smaller than the titles of the sub sections. You should still use the tag that conveys the proper meaning, even if it doesn't look right.
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
# Lab
|
||||||
|
|
||||||
|
## Create HTML for this content
|
||||||
|
1. 
|
||||||
|
1. You do not have to style this yet. Just come up with the tags and structure for the page.
|
||||||
|
1. URL for image: http://blog.taxact.com/wp-content/uploads/Complete-Guide-to-Employee-Stock-Options-and-Tax-Reporting-Forms.jpg
|
||||||
|
1. Links do not have to go anywhere.
|
||||||
|
1. With each tag you create, `git add` the file, make a commit, and push it to origin
|
||||||
|
|
||||||
|
## Stretch:
|
||||||
|
|
||||||
|
1. Create an about.html which has similar content to this one. Have the "About" link send you to about.html. Have "Home" send you to the page you created in the "Create This Mockup" section.
|
||||||
|
1. Use what you know about CSS from fundamentals to style this.
|
||||||
|
After Width: | Height: | Size: 31 MiB |
@ -0,0 +1,160 @@
|
|||||||
|
# CSS - An Introduction
|
||||||
|
|
||||||
|
## Lesson Objectives
|
||||||
|
|
||||||
|
1. Define CSS and describe its use
|
||||||
|
1. Diagram the structure of CSS
|
||||||
|
1. Demonstrate how to apply rules to a specific tag
|
||||||
|
1. List some common element properties that can be styled
|
||||||
|
1. Describe ids and classes. Explain when should we use which.
|
||||||
|
1. Describe "The Cascade"
|
||||||
|
1. Describe how to combine various selectors
|
||||||
|
1. Describe Specificity
|
||||||
|
|
||||||
|
## Define CSS and describe its use
|
||||||
|
|
||||||
|
HTML gives our site function, but it doesn't do much in terms of how the site looks. This is where CSS comes in
|
||||||
|
|
||||||
|
1. Cascading - We'll Define shortly
|
||||||
|
1. Style - making things pretty!
|
||||||
|
1. Sheets - it's just a sheet of text, not a program we write
|
||||||
|
|
||||||
|
## Diagram the structure of CSS
|
||||||
|
|
||||||
|
A CSS file is composed of many rules. Each rule governs the appearance of certain elements. A generalized form looks like:
|
||||||
|
|
||||||
|
```CSS
|
||||||
|
selector {
|
||||||
|
property:value;
|
||||||
|
property:value;
|
||||||
|
property:value;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Everything inside the curly braces is called the "declaration block"
|
||||||
|
|
||||||
|
## Demonstrate how to apply rules to a specific tag
|
||||||
|
|
||||||
|
If you wanted to style all the `<p>` tags of a page, you could style it by writing:
|
||||||
|
|
||||||
|
```CSS
|
||||||
|
p {
|
||||||
|
property:value;
|
||||||
|
property:value;
|
||||||
|
property:value;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## List some common element properties that can be styled
|
||||||
|
|
||||||
|
Here are some properties that you can set for an element
|
||||||
|
|
||||||
|
1. color
|
||||||
|
- names
|
||||||
|
- blue, red, yellow, white, grey, black, green, orange, purple
|
||||||
|
- http://www.crockford.com/wrrrld/color.html
|
||||||
|
- value
|
||||||
|
- hexidecimal number (0-F), six places
|
||||||
|
- #0088FF
|
||||||
|
- https://color.adobe.com
|
||||||
|
1. background
|
||||||
|
- color
|
||||||
|
- url()
|
||||||
|
1. font-size
|
||||||
|
- measured in px (for now)
|
||||||
|
1. font-family
|
||||||
|
- System fonts
|
||||||
|
- Single word fonts
|
||||||
|
- Arial, Courier, Times, etc
|
||||||
|
- Multi word fonts must be placed in quotes
|
||||||
|
- "Times New Roman", "Arial Black", "Lucinda Console"
|
||||||
|
- Use http://www.cssfontstack.com/ to see what fonts are available on what operating systems
|
||||||
|
- Generic fonts
|
||||||
|
- serif, sans-serif, cursive, fantasy, monospace.
|
||||||
|
- can have several font families as a value
|
||||||
|
- starts with first and goes down the line until it finds one it has
|
||||||
|
1. font-weight
|
||||||
|
- normal, bold
|
||||||
|
1. text-align
|
||||||
|
- left, right, center
|
||||||
|
|
||||||
|
## Describe ids and classes. Explain when should we use which.
|
||||||
|
|
||||||
|
Sometimes just targeting an element is not enough. We can target other attributes of elements in our selectors.
|
||||||
|
|
||||||
|
1. ids
|
||||||
|
- `<div id="left-column"></div>`
|
||||||
|
- `#left-column {}`
|
||||||
|
- each id on a page must be unique
|
||||||
|
- great for locations on a page that occur only once
|
||||||
|
- e.g. left column, contact form, etc
|
||||||
|
1. classes
|
||||||
|
- `<div class="large-module"></div>`
|
||||||
|
- `.large-module {}`
|
||||||
|
- each class on a page do not have to be unique
|
||||||
|
- great for repeatable ideas
|
||||||
|
- module
|
||||||
|
- e.g. ad unit, comment block, etc
|
||||||
|
- function
|
||||||
|
- e.g. active, important,etc
|
||||||
|
|
||||||
|
## Describe "The Cascade"
|
||||||
|
|
||||||
|
Some properties of elements are passed down to their children. In general:
|
||||||
|
|
||||||
|
1. Properties dealing with text are inherited by their children
|
||||||
|
1. Properties dealing with spacing are not inherited by their children
|
||||||
|
1. https://www.w3.org/TR/CSS2/propidx.html
|
||||||
|
|
||||||
|
## Describe how to combine various selectors
|
||||||
|
|
||||||
|
Selectors can be more complex than just an element, id, or class.
|
||||||
|
|
||||||
|
1. You can have a set of rules affect multiple sections by listing them
|
||||||
|
- `p, #left-column {}`
|
||||||
|
- will style all `<p>` tags and whichever tag has and id of "left-column"
|
||||||
|
1. You can combine attributes (i.e. tag, class, id) to narrow down how many elements are effected
|
||||||
|
- `a.important {}`
|
||||||
|
- styles all anchor tags that also have an "important" class
|
||||||
|
- `<a class="important"></a>`
|
||||||
|
- `#left-column.visible {}`
|
||||||
|
- styles whichever tag that has the id of "left-column", but only when it also has a class of "visble"
|
||||||
|
- styled: `<div id="left-column" class="visible"></div>`
|
||||||
|
- not-styled: `<div id="left-column"></div>`
|
||||||
|
- `.profile.minimized {}`
|
||||||
|
- styles all tags that have two classes (separated by a space): "profile" and "minimized"
|
||||||
|
- `<div class="profile minimized"></div>`
|
||||||
|
- `div#left-column {}`
|
||||||
|
- you could combine tags and ids, but there's only ever going to be one tag with an id of "left-column"
|
||||||
|
- it's not like you would have a group of tags with the same id, from which you want to select only those that are `div` tags
|
||||||
|
- might as well just write `#left-column {}` and leave out the div
|
||||||
|
1. You can filter out tags based on their ancestors
|
||||||
|
- `main p {}`
|
||||||
|
- will style all `<p>` tags that are descendants of `<main>` tags
|
||||||
|
```html
|
||||||
|
<main>
|
||||||
|
<p></p>
|
||||||
|
</main>
|
||||||
|
```
|
||||||
|
```html
|
||||||
|
<main>
|
||||||
|
<section>
|
||||||
|
<p></p>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Describe Specificity
|
||||||
|
|
||||||
|
When an element is being styled by two rules at the same time, the browser calculates which rule is more specific and applies that rule. To do this it looks at the selector. If both rules have the same specificity, the last rule is applied.
|
||||||
|
|
||||||
|
1. Count the number of ids in each rule's selector.
|
||||||
|
- Apply whichever rule has more ids in its selector
|
||||||
|
- In theory there should only be one or zero ids in each selector
|
||||||
|
- `#left-column #comments`
|
||||||
|
- do not need to filter by ancestor
|
||||||
|
- can just write `#comments`
|
||||||
|
1. If the number of ids in each rule's selector is the same, count the number of classes
|
||||||
|
- Apply whichever rule has more classes in its selector
|
||||||
|
1. If the number of ids and classes in each rule's selector is the same, count the number of tags
|
||||||
|
- Apply whichever rule has more tags in its selector
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
# Lab
|
||||||
|
|
||||||
|
## Create This Mockup
|
||||||
|
1. 
|
||||||
|
1. Using what you learned about CSS, style the HTML lab so it looks like the mockup.
|
||||||
|
|
||||||
|
## Stretch:
|
||||||
|
|
||||||
|
1. Create/style the About page mentioned in the Stretch section of the HTML lab.
|
||||||
|
After Width: | Height: | Size: 31 MiB |
@ -0,0 +1,138 @@
|
|||||||
|
# CSS - The Box Model and Element Spacing
|
||||||
|
|
||||||
|
## Lesson Objectives
|
||||||
|
1. Define elements of standard layout and why they don't work on the web
|
||||||
|
1. Diagram the box model
|
||||||
|
1. List and define the different ways to display an element
|
||||||
|
1. List the different ways an element can be positioned
|
||||||
|
1. Differentiate between units of measure in layout
|
||||||
|
1. Describe some common techniques used in layout
|
||||||
|
|
||||||
|
## Define elements of standard layout and why they don't work on the web
|
||||||
|
|
||||||
|
### The standard elements of layout
|
||||||
|
|
||||||
|
In traditional layout programs like photoshop, we typically give an element two properties:
|
||||||
|
|
||||||
|
1. Dimensions (height and width)
|
||||||
|
1. Position (top and bottom)
|
||||||
|
|
||||||
|
### Why can't we simply use dimension and position in layout?
|
||||||
|
|
||||||
|
The issue with traditional layout properties is that elements on a page are dynamic, meaning they can change.
|
||||||
|
|
||||||
|
1. Content of an element might change
|
||||||
|
1. Elements may be added to, removed from, or manipulated within the DOM
|
||||||
|
|
||||||
|
If we used traditional layout properties, when elements were added/changed they could collide with each other.
|
||||||
|
|
||||||
|
## Diagram the box model
|
||||||
|
|
||||||
|
We can instead define different properties of elements so that they won't collide with each other.
|
||||||
|
|
||||||
|
### standard properties
|
||||||
|
|
||||||
|
1. border
|
||||||
|
- border around the content
|
||||||
|
1. padding
|
||||||
|
- space between the content and the border
|
||||||
|
- usually used to create space between an element and its children
|
||||||
|
1. margin
|
||||||
|
- space surrounding the border
|
||||||
|
- usually used to create space between sibling elements
|
||||||
|
- if two elements with top and bottom margins are placed on top of each other, the space between the two elements will be that of the larger margin
|
||||||
|
1. height/width
|
||||||
|
- can explicitly define the height and width of the content area of an element
|
||||||
|
- if the width of an element is too small to fit content all on one line, the content will wrap to create multiple lines, increasing the element's height
|
||||||
|
|
||||||
|
### additional properties
|
||||||
|
|
||||||
|
1. box-sizing
|
||||||
|
- content-box
|
||||||
|
- width/height refers to the width/height of just the content
|
||||||
|
- border-box
|
||||||
|
- width/height refers to the width/height of the content + the padding + the border
|
||||||
|
1. overflow
|
||||||
|
- if height is set, and content is too large for element, it will flow outside of the element
|
||||||
|
- visible
|
||||||
|
- default. The content is displayed outside of the element
|
||||||
|
- hidden
|
||||||
|
- the content is cropped outside of the element
|
||||||
|
- scroll
|
||||||
|
- scroll bars appear on the element allowing you to scroll within the element
|
||||||
|
- auto
|
||||||
|
- like scroll, but only if there is too much content. If the content fits within the element, scroll bars are hidden
|
||||||
|
|
||||||
|
## List and define the different ways to display an element
|
||||||
|
|
||||||
|
An element can be placed on the page in many ways using the `display` property
|
||||||
|
|
||||||
|
1. block
|
||||||
|
- the element takes up an entire line. No other elements can be placed before/after it on that line.
|
||||||
|
- width defaults to 100%
|
||||||
|
1. inline
|
||||||
|
- the element is placed on the same line as its other inline siblings
|
||||||
|
- width defaults to with width of the content
|
||||||
|
- width and height properties are ignored
|
||||||
|
- only horizontal margin and padding are respected (not top/bottom margin/padding)
|
||||||
|
- text must flow normally on the next line in a paragraph
|
||||||
|
1. inline-block
|
||||||
|
- very similar to inline, but height, width, and top/bottom padding/margin work
|
||||||
|
- height and top/bottom padding/margin can create space between current line and previous/next lines
|
||||||
|
1. none
|
||||||
|
- remove the element from DOM completely
|
||||||
|
|
||||||
|
## List the different ways an element can be positioned
|
||||||
|
|
||||||
|
Sometimes we do want elements to overlay each other. In this case we can use the `position` property in conjunction with top/left properties to define layout the traditional way.
|
||||||
|
|
||||||
|
1. static
|
||||||
|
- default
|
||||||
|
- top/left/bottom/right do not affect the element
|
||||||
|
1. relative
|
||||||
|
- element is positioned relative to its parent
|
||||||
|
1. absolute
|
||||||
|
- element is positioned relative to the whichever ancestor is positioned relative
|
||||||
|
- Example: A number or text on top of an image
|
||||||
|
- if no ancestor is positioned relative, it is positioned relative to the browser window
|
||||||
|
1. fixed
|
||||||
|
- like absolute, but does not move when user scrolls down/up the page
|
||||||
|
1. z-index
|
||||||
|
- a simple integer used to determine which element is layered on top of another
|
||||||
|
- elements with a higher z-index are stacked on top of elements with a lower z-index
|
||||||
|
|
||||||
|
## Differentiate between units of measure in layout
|
||||||
|
|
||||||
|
1. px
|
||||||
|
- pixels. most basic unit
|
||||||
|
1. em
|
||||||
|
- a proportion of the element's font size
|
||||||
|
- e.g. if the element's font-size is 16px, 0.5em is 8px
|
||||||
|
1. rem
|
||||||
|
- a proportion of the browser's font size
|
||||||
|
- each browser has a default font-size, usually set on the body or html tag
|
||||||
|
1. %
|
||||||
|
- can be a percent of different attributes, depending on the property it is assigned to
|
||||||
|
- height: % of parent's height
|
||||||
|
- width: % of parent's width
|
||||||
|
- padding: % of parents's width
|
||||||
|
- even for top/bottom padding
|
||||||
|
- border: doesn't even work
|
||||||
|
- margin: like padding
|
||||||
|
|
||||||
|
## Describe some common techniques used in layout
|
||||||
|
|
||||||
|
1. fluid layout
|
||||||
|
- use % widths so that content scales with the width of the browser
|
||||||
|
- great for making sites look good on all screens
|
||||||
|
- use % widths on images
|
||||||
|
1. using spacing in ems
|
||||||
|
- if a user increases the font size in their browser, using pixels for spacing can be problematic
|
||||||
|
- Use ems instead so that elements scale properly
|
||||||
|
1. using ems and rems
|
||||||
|
- can define a font-size for a "module" on the page using rems
|
||||||
|
- look at the body copy font size for that module to determine what this size will be
|
||||||
|
- spacing for everything within that module is done using ems
|
||||||
|
- this way a module's spacing is independent of their parent's font-size
|
||||||
|
1. use rems/ems for vertical spacing. use % for horizontal spacing
|
||||||
|
- a good rule of thumb
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
# Lab
|
||||||
|
|
||||||
|
## Create This Mockup
|
||||||
|
1. 
|
||||||
|
1. You do not have to use the exact photography in this mockup. Feel free to find your own
|
||||||
|
1. Do not worry about matching the fonts
|
||||||
|
1. For the "GET IN TOUCH" section, do not worry about creating form elements for name, email, subject, message, send. Just use standard elements that we've learned about (maybe divs?) and style them appropriately.
|
||||||
|
1. You won't get it all done. See how far you can get.
|
||||||
|
|
||||||
|
## Stretch:
|
||||||
|
|
||||||
|
1. Research form elements and add them in to match the mockup
|
||||||
|
1. Research fonts and find something that matches closely to the mockup
|
||||||
|
1. Finish the entire mockup!
|
||||||
|
After Width: | Height: | Size: 84 KiB |
@ -0,0 +1,51 @@
|
|||||||
|
# CSS - Advanced Inline Layout
|
||||||
|
|
||||||
|
## Lesson Objectives
|
||||||
|
|
||||||
|
1. Explain the float property
|
||||||
|
1. Describe how to use calc
|
||||||
|
|
||||||
|
## Explain the float property
|
||||||
|
|
||||||
|
Imagine we had an image, and we wanted to have text wrap around it, like in a newspaper. The float property was originally created to handle exactly this.
|
||||||
|
|
||||||
|
### Original use
|
||||||
|
|
||||||
|
The `float` property has two values
|
||||||
|
|
||||||
|
1. left
|
||||||
|
1. right
|
||||||
|
|
||||||
|
If you want to force text to begin on the line below the floated element (i.e. stop floating), you can use the `clear:left`, `clear:right`, `clear:both`
|
||||||
|
|
||||||
|
### Alternative use for layout
|
||||||
|
|
||||||
|
You can use `float` to line up `block` elements, one next to another.
|
||||||
|
|
||||||
|
#### Issues with this technique
|
||||||
|
|
||||||
|
1. All elements in the line must have widths that do not add up to more than their container, or they will wrap.
|
||||||
|
1. If you have a container with nothing but floated elements for content, the height of the container will be 0, even though the floated elements take up space
|
||||||
|
- This is problematic if the container has a background color/image
|
||||||
|
- To fix this, you have many options:
|
||||||
|
- put an empty div with `clear:both` after all the floated elements
|
||||||
|
- add `overflow:auto` to the container
|
||||||
|
- many others...
|
||||||
|
|
||||||
|
#### Compare this technique with inline-block
|
||||||
|
|
||||||
|
Inline-block elements are often preferable to a line of floated block elements, but inline-block elements have a problem too:
|
||||||
|
|
||||||
|
If you have inline-block elements next to each other, there is often space between each element. This is caused by the browser rendering the line breaks between each tag as a single space.
|
||||||
|
|
||||||
|
To fix this:
|
||||||
|
- reformat code so that there is no space between each tag
|
||||||
|
- Set the `font-size` of the container to be 0 and then reset it for each element
|
||||||
|
- https://css-tricks.com/fighting-the-space-between-inline-block-elements/
|
||||||
|
|
||||||
|
## Describe how to use calc
|
||||||
|
|
||||||
|
The `calc` property is used when you want to combine two units of measure together. This is especially useful when the units of measure are different.
|
||||||
|
|
||||||
|
Example:
|
||||||
|
If you have a fixed width element (e.g. a logo) in line with an element that has a % width
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
# Lab
|
||||||
|
|
||||||
|
## Create This Mockup With Only display:block; Elements
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
1. **DO NOT USE** `display:inline-block;` **OR** `display:inline;` **AT ALL. USE ONLY** `display:block;` **AND FLOATS.** Every element on the page must be have `display:block` assigned to it.
|
||||||
|
1. Use `overflow:auto;` and `clear:left;`/`clear:right;`/`clear:both;` to clear any unnecessary floating problems.
|
||||||
|
1. You do not have to use the exact photography in this mockup. Feel free to find your own
|
||||||
|
1. Do not worry about matching the fonts
|
||||||
|
1. For the "GET IN TOUCH" section, do not worry about creating form elements for name, email, subject, message, send. Just use standard elements that we've learned about (maybe divs?) and style them appropriately.
|
||||||
|
1. You won't get it all done. See how far you can get.
|
||||||
|
|
||||||
|
## Stretch:
|
||||||
|
|
||||||
|
1. Research form elements and add them in to match the mockup
|
||||||
|
1. Research fonts and find something that matches closely to the mockup
|
||||||
|
1. Finish the entire mockup!
|
||||||
|
After Width: | Height: | Size: 84 KiB |
@ -0,0 +1,88 @@
|
|||||||
|
# CSS - Advanced Selectors
|
||||||
|
|
||||||
|
## Lesson Objectives
|
||||||
|
1. Explain why we need advanced selectors
|
||||||
|
1. List advanced selectors
|
||||||
|
|
||||||
|
## Explain why we need advanced selectors
|
||||||
|
|
||||||
|
Advanced selectors help eliminate extra classes. They provide no new functionality, but they make your code cleaner
|
||||||
|
|
||||||
|
## List advanced selectors
|
||||||
|
|
||||||
|
### Family Selectors
|
||||||
|
|
||||||
|
1. *
|
||||||
|
- selects everything
|
||||||
|
- useful for when you want to style everything. Can add an optional ancestor for more specificity
|
||||||
|
```html
|
||||||
|
<div>
|
||||||
|
<a class="style-me">content</a>
|
||||||
|
<a class="style-me">content</a>
|
||||||
|
<span class="style-me">content</span>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
1. >
|
||||||
|
- selects an immediate child
|
||||||
|
- if you want to add styling to just a child, but the parent has descendants that are similar to child
|
||||||
|
```html
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<ul>
|
||||||
|
<li></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
```
|
||||||
|
1. ~
|
||||||
|
- sibling selector
|
||||||
|
- only selects subsequent siblings, not preceding siblings
|
||||||
|
```html
|
||||||
|
<h1>Title</h1>
|
||||||
|
<p>paragraph</p>
|
||||||
|
<ul>
|
||||||
|
<li><p>list paragraph</p></li>
|
||||||
|
</ul>
|
||||||
|
<p>paragraph</p>
|
||||||
|
```
|
||||||
|
1. +
|
||||||
|
- immediate sibling selector
|
||||||
|
- only selects first sibling
|
||||||
|
```html
|
||||||
|
<h1>Title</h1>
|
||||||
|
<p>paragraph</p>
|
||||||
|
<ul>
|
||||||
|
<li><p>list paragraph</p></li>
|
||||||
|
</ul>
|
||||||
|
<p>paragraph</p>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Attribute Selectors
|
||||||
|
|
||||||
|
You can test for any attribute, not just id/class
|
||||||
|
|
||||||
|
Here's our example: `<a href='http://www.google.com'>link</a>`
|
||||||
|
|
||||||
|
1. [attr]
|
||||||
|
- test to see if an attribute exists
|
||||||
|
- `a[href]`
|
||||||
|
1. [attr='foo']
|
||||||
|
- test an exact match
|
||||||
|
- `a[href="http://www.google.com"]`
|
||||||
|
1. [attr^='foo']
|
||||||
|
- test the start of the attribute
|
||||||
|
- `a[href^="http"]`
|
||||||
|
1. [attr$='foo']
|
||||||
|
- test the end of the attribute
|
||||||
|
- `a[href$="com"]`
|
||||||
|
1. [attr*='foo']
|
||||||
|
- test a substring
|
||||||
|
- `a[href*="w.goo"]`
|
||||||
|
1. [attr~='foo']
|
||||||
|
- test an exact word separated by space
|
||||||
|
- `<a data-values="value1 value2">link</a>`
|
||||||
|
- `a[data-values~="value2"]`
|
||||||
|
1. [attr|='foo']
|
||||||
|
- test the start of a hyphenated word
|
||||||
|
- `<html lang="en-US">`
|
||||||
|
- `html[lang|="en"]`
|
||||||
@ -0,0 +1,79 @@
|
|||||||
|
# CSS - Responsive Design
|
||||||
|
|
||||||
|
## Lesson Objectives
|
||||||
|
|
||||||
|
1. Explain responsiveness and why we need it
|
||||||
|
1. Describe fluid layout
|
||||||
|
1. Describe the "mobile first" development process
|
||||||
|
1. Explain min/max-height/width
|
||||||
|
1. Define media queries and why we need them
|
||||||
|
|
||||||
|
## Explain responsiveness
|
||||||
|
|
||||||
|
### The Backstory
|
||||||
|
|
||||||
|
The Phone/Tablet/Phablet wars. Apple, Google, Samsung and a bunch of other companies all released a bunch of devices, all with various dimensions.
|
||||||
|
|
||||||
|
Initially, we would test to determine which device was viewing the site, and then serve up different content based on that. This was called adaptive.
|
||||||
|
|
||||||
|
### Now
|
||||||
|
|
||||||
|
Soon there were too many devices to examine and too much different code to write, so we decided to serve the same content to all devices, but modify it slightly so that it still looks good. This is called responsive.
|
||||||
|
|
||||||
|
In responsive, the *content* responds to device attributes
|
||||||
|
|
||||||
|
- width
|
||||||
|
- height
|
||||||
|
- orientation
|
||||||
|
- media
|
||||||
|
|
||||||
|
### Methods to achieve this
|
||||||
|
|
||||||
|
- fluid layout
|
||||||
|
- mobile first
|
||||||
|
- min/max-height-width
|
||||||
|
- media queries
|
||||||
|
|
||||||
|
## Describe Fluid Layout
|
||||||
|
|
||||||
|
Layout using percentages so that content shrinks and expands with window dimensions
|
||||||
|
|
||||||
|
## Describe the "mobile first" development process
|
||||||
|
|
||||||
|
1. Term is mostly used for designers
|
||||||
|
- use https://generalassemb.ly/
|
||||||
|
1. Also applies to developers
|
||||||
|
- start by developing mobile and move upward
|
||||||
|
- don't go desktop to mobile
|
||||||
|
|
||||||
|
## Explain min/max-height/width
|
||||||
|
|
||||||
|
1. max-width/height
|
||||||
|
1. min-width/height
|
||||||
|
- **EXAMPLE** nav when squished
|
||||||
|
- keep item text on one line
|
||||||
|
- combine min-width with percentage
|
||||||
|
|
||||||
|
## Define media queries and why we need them
|
||||||
|
|
||||||
|
1. media query possibilites
|
||||||
|
- http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
|
||||||
|
- media types
|
||||||
|
- screen
|
||||||
|
- print
|
||||||
|
- tv
|
||||||
|
- media features
|
||||||
|
- min-width
|
||||||
|
- max-width
|
||||||
|
- min-height
|
||||||
|
- max-height
|
||||||
|
- orientation
|
||||||
|
- resolution
|
||||||
|
1. mobile first with media queries
|
||||||
|
- mobile devices typically slower
|
||||||
|
- will read mobile css and discard larger device css
|
||||||
|
- larger devices will read mobile data and overwrite
|
||||||
|
- this is okay since they're faster
|
||||||
|
- could also have media queries for small devices too
|
||||||
|
- fine, but can get complex with lots of media queries
|
||||||
|
- can scan and assume existing queries are only for large devices
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
# Lab
|
||||||
|
|
||||||
|
## Create These Mockups
|
||||||
|
1. 
|
||||||
|
After Width: | Height: | Size: 12 KiB |
@ -0,0 +1,183 @@
|
|||||||
|
# CSS - Typography, Icons
|
||||||
|
|
||||||
|
## Lesson Objectives
|
||||||
|
|
||||||
|
1. Explain how to load fonts into your website
|
||||||
|
1. Explain what a sprite sheet is and why we use it
|
||||||
|
1. Explain what an icon font is and what its advantages are
|
||||||
|
1. Explain what SVG stands for, what it is, and what its advantages are
|
||||||
|
|
||||||
|
## Explain how to load fonts into your website
|
||||||
|
|
||||||
|
1. Up until recently, fonts on the web were limited to what was installed on a computer
|
||||||
|
1. You could only depend on users having "System" fonts that were installed on every machine by default
|
||||||
|
1. Now you can load fonts into your website so each user doesn't have to install them manually
|
||||||
|
|
||||||
|
### Use a font-file
|
||||||
|
|
||||||
|
1. You or a designer can download or create actual font files and then reference them in your css files.
|
||||||
|
1. Good sites:
|
||||||
|
- https://www.fontsquirrel.com/
|
||||||
|
- http://www.myfonts.com/
|
||||||
|
- https://typekit.com/
|
||||||
|
|
||||||
|
```
|
||||||
|
@font-face {
|
||||||
|
font-family: 'MyWebFont'; /* specify how you want the font to be referenced in the font-family property */
|
||||||
|
src: url('fonts/Architects_Daughter/ArchitectsDaughter.ttf'); /* location of the font file */
|
||||||
|
}
|
||||||
|
html {
|
||||||
|
font-family: 'MyWebFont'; /* call the web font */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Use a link to a CSS file
|
||||||
|
|
||||||
|
1. Some font sites will give you the css file already, so you don't have to download the font files themselves
|
||||||
|
- https://www.google.com/fonts
|
||||||
|
|
||||||
|
## Explain what a sprite sheet is and why we use it
|
||||||
|
|
||||||
|
### What and why
|
||||||
|
|
||||||
|
Most developers use sprite sheets instead of individual images for each of their icons.
|
||||||
|
|
||||||
|
1. Making many HTTP requests for many small files is slower than downloading and processing one large file.
|
||||||
|
1. Your browser will cache (save locally) the image
|
||||||
|
- If you visit a different page with different icons from the same sprite sheet, the image is already available and loads from memory, not the server.
|
||||||
|
|
||||||
|
### How
|
||||||
|
|
||||||
|
1. Create a tag with `background-image:url()`, `background-position-x`, `background-position-y`, `width`, `height`;
|
||||||
|
1. use an `img` tag inside another tag with a specific `width`, `height`, `position:relative`, and `overflow: hidden;`. Move the `img` around with `top`, `left`, and `position:absolute`
|
||||||
|
|
||||||
|
## Explain what an icon font is and what its advantages are
|
||||||
|
|
||||||
|
1. Sprite sheets have fixed size icons. You can make the icons bigger, but they can end up looking pixelated
|
||||||
|
1. If you want the same icon in a different color (perhaps each page has a different color theme) you have to add a new image to the sprite sheet.
|
||||||
|
1. Icon fonts are just fonts, but instead of looking like letters, each "character" looks like an icon.
|
||||||
|
|
||||||
|
### http://fontello.com/
|
||||||
|
|
||||||
|
1. Using the font's characters
|
||||||
|
1. Fontello goes one extra step by assigning icon shapes to unprintable characters in case you want to use that font for normal characters.
|
||||||
|
1. Behind the scenes, traditional characters are stored as numbers.
|
||||||
|
1. There are lots of other unusual characters that most developers never use (bells, weird whitespace characters, foreign characters).
|
||||||
|
1. http://unicode-table.com/en/
|
||||||
|
1. Go to the "Customize Codes" tab
|
||||||
|
1. You'll see above the icon is a box
|
||||||
|
- this represents an unprintable character
|
||||||
|
1. Below the icon is the character's Unicode value (a four digit hexadecimal number)
|
||||||
|
1. You can represent this character in two ways
|
||||||
|
1. inside your HTML: `` (E800 is the 4 digit hex value)
|
||||||
|
1. inside your CSS: `selector:after/before { content: '\E800' };`
|
||||||
|
- you can insert content using CSS
|
||||||
|
1. You could also change the character to be normal character
|
||||||
|
1. You can use their css and give your html classes
|
||||||
|
|
||||||
|
## Demonstrate how to make icons using SVG
|
||||||
|
|
||||||
|
1. Icon fonts can only be one color
|
||||||
|
1. SVG can be styled just like CSS
|
||||||
|
|
||||||
|
### Many ways to add SVG to your page
|
||||||
|
|
||||||
|
1. One external image
|
||||||
|
- Can't restyle
|
||||||
|
- Hover, etc doesn't work
|
||||||
|
```css
|
||||||
|
img {
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
```html
|
||||||
|
<img src="img.svg" />
|
||||||
|
```
|
||||||
|
```html
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<style>
|
||||||
|
#checkmark {
|
||||||
|
fill: red;
|
||||||
|
}
|
||||||
|
#checkmark:hover {
|
||||||
|
fill: blue;
|
||||||
|
}
|
||||||
|
circle {
|
||||||
|
stroke: #006600;
|
||||||
|
fill : #00cc00;
|
||||||
|
}
|
||||||
|
circle:hover {
|
||||||
|
stroke: darkblue;
|
||||||
|
fill : lightblue;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<path id="checkmark" d="M27 4l-15 15-7-7-5 5 12 12 20-20z"></path>
|
||||||
|
<circle cx="40" cy="40" r="24" />
|
||||||
|
</svg>
|
||||||
|
```
|
||||||
|
|
||||||
|
1. Write SVG directly into HTML
|
||||||
|
|
||||||
|
```html
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path id="checkmark" d="M27 4l-15 15-7-7-5 5 12 12 20-20z"></path>
|
||||||
|
<circle cx="40" cy="40" r="24" />
|
||||||
|
</svg>
|
||||||
|
```
|
||||||
|
```css
|
||||||
|
svg {
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
#checkmark {
|
||||||
|
fill: red;
|
||||||
|
}
|
||||||
|
#checkmark:hover {
|
||||||
|
fill: blue;
|
||||||
|
}
|
||||||
|
circle {
|
||||||
|
stroke: #006600;
|
||||||
|
fill : #00cc00;
|
||||||
|
}
|
||||||
|
circle:hover {
|
||||||
|
stroke: darkblue;
|
||||||
|
fill : lightblue;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
1. External CSS/External image
|
||||||
|
- Each differently styled element must be included and given id
|
||||||
|
|
||||||
|
```html
|
||||||
|
<svg>
|
||||||
|
<use id="checkmark" xlink:href="img.svg#checkmark"></use>
|
||||||
|
<use id="circle" xlink:href="img.svg#thecircle"></use>
|
||||||
|
</svg>
|
||||||
|
```
|
||||||
|
```html
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path id="checkmark" d="M27 4l-15 15-7-7-5 5 12 12 20-20z"></path>
|
||||||
|
<circle id="thecircle" cx="40" cy="40" r="24" />
|
||||||
|
</svg>
|
||||||
|
```
|
||||||
|
```css
|
||||||
|
svg {
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
#checkmark {
|
||||||
|
fill: red;
|
||||||
|
}
|
||||||
|
#checkmark:hover {
|
||||||
|
fill: blue;
|
||||||
|
}
|
||||||
|
#circle {
|
||||||
|
stroke: #006600;
|
||||||
|
fill : #00cc00;
|
||||||
|
}
|
||||||
|
#circle:hover {
|
||||||
|
stroke: darkblue;
|
||||||
|
fill : lightblue;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -0,0 +1,109 @@
|
|||||||
|
# HTML - forms
|
||||||
|
|
||||||
|
## Lesson Objectives
|
||||||
|
|
||||||
|
1. Explain what a form is
|
||||||
|
1. Use a form tag to set up an interactive space
|
||||||
|
1. Use an input element to give the user a place to enter data
|
||||||
|
1. Use a textarea element to give the user a place to enter large text blocks
|
||||||
|
1. Use a select element, in conjunction with option elements to create a dropdown
|
||||||
|
1. Use a label to create a clickable space which will also affect a specified input
|
||||||
|
|
||||||
|
## Explain what a form is
|
||||||
|
|
||||||
|
A form is a set of fields with which users interact. Data is often gathered from these fields.
|
||||||
|
|
||||||
|
## Use a form tag to set up an interactive space
|
||||||
|
|
||||||
|
Container tag for a form. Has the following attributes, which we don't need to use right now
|
||||||
|
|
||||||
|
1. action
|
||||||
|
1. method
|
||||||
|
|
||||||
|
## Use an input element to give the user a place to enter data
|
||||||
|
|
||||||
|
Input tags are the most basic and most common way to enter small chunks of data. They have the following attributes:
|
||||||
|
|
||||||
|
- name
|
||||||
|
- used by the server to create a property with the given name
|
||||||
|
- value
|
||||||
|
- set an initial value for the input
|
||||||
|
- type
|
||||||
|
- button
|
||||||
|
- Defines a clickable button (mostly used with a JavaScript to activate a script)
|
||||||
|
- checkbox
|
||||||
|
- Defines a checkbox
|
||||||
|
- color
|
||||||
|
- Defines a color picker
|
||||||
|
- date
|
||||||
|
- Defines a date control (year, month and day (no time))
|
||||||
|
- datetime-local
|
||||||
|
- Defines a date and time control (year, month, day, hour, minute, second, and fraction of a second (no time zone)
|
||||||
|
- email
|
||||||
|
- Defines a field for an e-mail address
|
||||||
|
- file
|
||||||
|
- Defines a file-select field and a "Browse..." button (for file uploads)
|
||||||
|
- hidden
|
||||||
|
- Defines a hidden input field
|
||||||
|
- used on the back end
|
||||||
|
- image
|
||||||
|
- Defines an image as the submit button
|
||||||
|
- month
|
||||||
|
- Defines a month and year control (no time zone)
|
||||||
|
- number
|
||||||
|
- Defines a field for entering a number
|
||||||
|
- password
|
||||||
|
- Defines a password field (characters are masked)
|
||||||
|
- radio
|
||||||
|
- Defines a radio button
|
||||||
|
- A set of radio buttons must all have the same name attribute
|
||||||
|
- range
|
||||||
|
- Defines a control for entering a number whose exact value is not important (like a slider control)
|
||||||
|
- reset
|
||||||
|
- Defines a reset button (resets all form values to default values)
|
||||||
|
- search
|
||||||
|
- Defines a text field for entering a search string
|
||||||
|
- submit
|
||||||
|
- Defines a submit button
|
||||||
|
- tel
|
||||||
|
- Defines a field for entering a telephone number
|
||||||
|
- text
|
||||||
|
- Default. Defines a single-line text field (default width is 20 characters)
|
||||||
|
- time
|
||||||
|
- Defines a control for entering a time (no time zone)
|
||||||
|
- url
|
||||||
|
- Defines a field for entering a URL
|
||||||
|
- week
|
||||||
|
- Defines a week and year control (no time zone)
|
||||||
|
- checked
|
||||||
|
- set a check box to be checked initially
|
||||||
|
- for a collection of radio buttons, set which one is selected initially
|
||||||
|
- disabled
|
||||||
|
- prevent a user from interacting with an input
|
||||||
|
- maxlength
|
||||||
|
- set the maximum length of an inputs value
|
||||||
|
- placeholder
|
||||||
|
- some placeholder text
|
||||||
|
- used to prompt the user or explain the input's purpose
|
||||||
|
|
||||||
|
## Use a textarea element to give the user a place to enter large text blocks
|
||||||
|
|
||||||
|
Contains large chunks of text
|
||||||
|
|
||||||
|
## Use a select element, in conjunction with option elements to create a dropdown
|
||||||
|
|
||||||
|
- `select` element
|
||||||
|
- tag containing many `option` elements
|
||||||
|
- set the `name` attribute here
|
||||||
|
- `option` element
|
||||||
|
- `selected` attribute sets which option is initially selected from the dropdown
|
||||||
|
- `value` attribute will be the value of the `select` dropdown as a whole.
|
||||||
|
- Can have content which is different from `value` attribute
|
||||||
|
- allows you to be more verbose for the user
|
||||||
|
|
||||||
|
## Use a label to create a clickable space which will also affect a specified input
|
||||||
|
|
||||||
|
- Creates an interactive element for users to click on
|
||||||
|
- This will affect a checkbox/radio button with an `id` that matches the label's `for` attribute value
|
||||||
|
- Can do some neat things with CSS, labels, and form elements (e.g. CSS only carousels)
|
||||||
|
- https://css-tricks.com/the-checkbox-hack/
|
||||||
@ -0,0 +1,90 @@
|
|||||||
|
# CSS - Advanced Selectors
|
||||||
|
|
||||||
|
## Lesson Objectives
|
||||||
|
|
||||||
|
1. Explain what a pseudo selector is
|
||||||
|
1. Style link and form elements depending on their "state"
|
||||||
|
1. Style the first and last elements of a container
|
||||||
|
1. Style an element depending on what child number it is of its parent
|
||||||
|
1. Style an element if it is the only child of its parent
|
||||||
|
1. Negate a selector
|
||||||
|
|
||||||
|
## Explain what a pseudo selector is
|
||||||
|
|
||||||
|
There are in general two kinds of pseudo selectors
|
||||||
|
|
||||||
|
1. Ones that select elements with specific "states"
|
||||||
|
1. Ones that select certain elements of a set based on where they are in the tree
|
||||||
|
|
||||||
|
## Style link and form elements depending on their "state"
|
||||||
|
|
||||||
|
1. :hover
|
||||||
|
- selects elements that have a mouse "hovering" on top of them
|
||||||
|
1. :active
|
||||||
|
- selects elements that have been clicked on
|
||||||
|
1. :focus
|
||||||
|
- you can use Tab to jump between links and form fields
|
||||||
|
- when you do this, the currently selected link is "focused" on
|
||||||
|
1. :visited
|
||||||
|
- selects links that have been visited
|
||||||
|
1. :checked
|
||||||
|
- selects radio button and check boxes in forms that have been selected
|
||||||
|
- usually not used to style the input directly, but style sibling elements (https://css-tricks.com/the-checkbox-hack/)
|
||||||
|
|
||||||
|
## Style the first and last elements of a container
|
||||||
|
|
||||||
|
1. :first-child
|
||||||
|
- selects only elements that are the first child of their parent
|
||||||
|
1. :first-of-type
|
||||||
|
- selects only elements that are the first of their tag type of their parent
|
||||||
|
```html
|
||||||
|
<section>
|
||||||
|
<div>hi</div>
|
||||||
|
<p>paragraph</p>
|
||||||
|
</section>
|
||||||
|
```
|
||||||
|
```css
|
||||||
|
section :first-of-type {
|
||||||
|
background:yellow; /* both div and p tags will have a yellow background */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
1. :last-child
|
||||||
|
- selects only elements that are the last child of their parent
|
||||||
|
1. :last-of-type
|
||||||
|
- selects only elements that are the last of their tag type of their parent
|
||||||
|
|
||||||
|
## Style an element depending on what child number it is of its parent
|
||||||
|
|
||||||
|
### selectors
|
||||||
|
|
||||||
|
1. :nth-child()
|
||||||
|
- selects only elements that are the nth child of their parent, where n is specified inside the parentheses
|
||||||
|
1. :nth-of-type()
|
||||||
|
- selects only elements that are the nth of their tag type of their parent, where n is specified inside the parentheses
|
||||||
|
1. :nth-last-child()
|
||||||
|
- selects only elements that are the nth to last child of their parent, where n is specified inside the parentheses
|
||||||
|
1. :nth-last-of-type()
|
||||||
|
- selects only elements that are the nth to last of their tag type of their parent, where n is specified inside the parentheses
|
||||||
|
|
||||||
|
### what can N be?
|
||||||
|
|
||||||
|
1. a number (1st element is 1, not 0)
|
||||||
|
1. `even` or `odd`
|
||||||
|
1. a formula in the form of `an + b`
|
||||||
|
- you specify `a` and `b` as integers
|
||||||
|
- if an element's index equals the value of that equation for some integer n, the rule applies that element
|
||||||
|
- examples
|
||||||
|
- 3n - indexes selected: 3, 6, 9
|
||||||
|
- 3n+1 - indexes selected: 1, 4, 7, 10
|
||||||
|
|
||||||
|
## Style an element if it is the only child of its parent
|
||||||
|
|
||||||
|
1. :only-child
|
||||||
|
- selects elements that are the sole child of their parent
|
||||||
|
1. :only-of-type
|
||||||
|
- selects elements that are the sole child of their tag type of their parent
|
||||||
|
|
||||||
|
## Negate a selector
|
||||||
|
|
||||||
|
1. :not()
|
||||||
|
- selects everything except whatever elements are selected by the selector inside the parentheses
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
# Fonts, Sprites, and Icon Fonts
|
||||||
|
|
||||||
|
## Fonts
|
||||||
|
Write some text in Google's "Rock Salt" font.
|
||||||
|
|
||||||
|
## Sprites
|
||||||
|
Use this sprite to create three icons: a smiley face, a frowny face, and a winking face.
|
||||||
|
|
||||||
|
|
||||||
|
## Icon Fonts
|
||||||
|
Do the same thing that you did for sprites, but use an icon font from http://www.fontello.com/
|
||||||
|
|
||||||
|
## Styling Forms
|
||||||
|
Create the following elements. Style their padding, border, and margin. Change their font-family, color, and background color:
|
||||||
|
|
||||||
|
1. text
|
||||||
|
2. checkbox
|
||||||
|
3. file
|
||||||
|
4. password
|
||||||
|
5. radio
|
||||||
|
6. search
|
||||||
|
7. submit
|
||||||
|
8. button
|
||||||
|
|
||||||
|
## Play selectors game
|
||||||
|
[http://flukeout.github.io/](http://flukeout.github.io/)
|
||||||
@ -0,0 +1,53 @@
|
|||||||
|
# CSS - Transform
|
||||||
|
|
||||||
|
## Lesson Objectives
|
||||||
|
|
||||||
|
1. Use the CSS3 transform property to visually manipulate DOM elements in a 2D space
|
||||||
|
1. Use the CSS3 transform property to visually manipulate DOM elements in a 3D space
|
||||||
|
1. Explain why using transform for animation is better than using position
|
||||||
|
|
||||||
|
## Use the CSS3 transform property to visually manipulate DOM elements in a 2D space
|
||||||
|
|
||||||
|
1. transform:rotate(10deg);
|
||||||
|
1. transform:scale(1.1);
|
||||||
|
1. transform:translateX(10px);
|
||||||
|
1. transform:skewX(45deg);
|
||||||
|
|
||||||
|
You can perform multiple transforms in one statement
|
||||||
|
|
||||||
|
1. transform: scale(2) skewY(0.3) rotate(4deg);
|
||||||
|
|
||||||
|
## Use the CSS3 transform property to visually manipulate DOM elements in a 3D space
|
||||||
|
|
||||||
|
The Z axis extends out of the screen
|
||||||
|
|
||||||
|
1. rotateX();
|
||||||
|
1. rotateY();
|
||||||
|
1. rotateZ();
|
||||||
|
1. translateX();
|
||||||
|
1. translateY();
|
||||||
|
1. translateZ();
|
||||||
|
1. scaleX();
|
||||||
|
1. scaleY();
|
||||||
|
1. scaleZ();
|
||||||
|
|
||||||
|
If you know the math, you can write your own transformation matrix
|
||||||
|
- This is how transformations work behind the scenes
|
||||||
|
|
||||||
|
1. matrix(n,n,n,n,n,n)
|
||||||
|
1. matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
|
||||||
|
1. http://periodic.famo.us/
|
||||||
|
|
||||||
|
## Explain why using transform for animation is better than using position
|
||||||
|
|
||||||
|
- http://codepen.io/paulirish/pen/nkwKs
|
||||||
|
- top/left
|
||||||
|
- http://codepen.io/paulirish/pen/LsxyF
|
||||||
|
- translate
|
||||||
|
|
||||||
|
Transforms are better for animation for two reasons
|
||||||
|
|
||||||
|
1. When elements are changed in the DOM, the browser checks to see if other elements are being pushed around. When using transforms, the browser doesn't do this.
|
||||||
|
1. If you're doing a 3D transform, the computer's GPU is engaged, which is really fast
|
||||||
|
|
||||||
|
Example: `transition: transform 1s ease-in-out;`
|
||||||
@ -0,0 +1,83 @@
|
|||||||
|
# CSS - Motion
|
||||||
|
|
||||||
|
## Lesson Objectives
|
||||||
|
|
||||||
|
1. Explain the roles in traditional animation and how they apply to computer animation
|
||||||
|
1. Create basic transitions between a start and end state in CSS
|
||||||
|
1. Write complex animations with multiple states
|
||||||
|
|
||||||
|
|
||||||
|
## Explain the roles in traditional animation and how they apply to computer animation
|
||||||
|
|
||||||
|
1. In traditional (hand-drawn) animation, there were two kinds of animators
|
||||||
|
- Keyframe artist
|
||||||
|
- Draws the main frames for the animation
|
||||||
|
- Inbetweener (tweener)
|
||||||
|
- Fills in the frames between each keyframe so it looks fluid
|
||||||
|
1. In computer animation, we act as the keyframe artist, and the computer is the tweener.
|
||||||
|
|
||||||
|
## Create basic transitions between a start and end state in CSS
|
||||||
|
|
||||||
|
Define a start state and an end state
|
||||||
|
|
||||||
|
```css
|
||||||
|
a {
|
||||||
|
background:yellow; /* start state */
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
background:green; /* end state */
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Three main properties:
|
||||||
|
|
||||||
|
- `transition-property: background, left, top, height;`
|
||||||
|
- `transition-duration: 0.5s;`
|
||||||
|
- `transition-timing-function: ease;`
|
||||||
|
- ease
|
||||||
|
- linear
|
||||||
|
- ease-in
|
||||||
|
- ease-out
|
||||||
|
- ease-in-out
|
||||||
|
- cubic-bezier(n,n,n,n)
|
||||||
|
- `transition-delay: 1s;`
|
||||||
|
|
||||||
|
Shorthand
|
||||||
|
- `transition: <property> <duration> <timing-function> <delay>`
|
||||||
|
|
||||||
|
## Write complex animations with multiple states
|
||||||
|
|
||||||
|
Transitions are great for going from one state to another, but sometimes you need more than a start and end state. To do this, there are two steps
|
||||||
|
|
||||||
|
1. Create a named animation with a set of keyframes.
|
||||||
|
```css
|
||||||
|
@keyframes example {
|
||||||
|
0% {background-color:red; left:0px; top:0px;}
|
||||||
|
25% {background-color:yellow; left:200px; top:0px;}
|
||||||
|
50% {background-color:blue; left:200px; top:200px;}
|
||||||
|
75% {background-color:green; left:0px; top:200px;}
|
||||||
|
100% {background-color:red; left:0px; top:0px;}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
1. Assign the animation to a rule and give it a duration
|
||||||
|
```css
|
||||||
|
div {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
background-color: red;
|
||||||
|
position: relative;
|
||||||
|
animation-name: example;
|
||||||
|
animation-duration: 4s;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
1. Additional properties
|
||||||
|
- animation-timing-function
|
||||||
|
- animation-iteration-count (can be set to infinite)
|
||||||
|
- animation-direction
|
||||||
|
- reverse
|
||||||
|
- alternate
|
||||||
|
- animation-delay
|
||||||
|
- animation-play-state
|
||||||
|
- paused
|
||||||
|
- running
|
||||||
@ -0,0 +1,71 @@
|
|||||||
|
# CSS - Design
|
||||||
|
|
||||||
|
## Lesson Objectives
|
||||||
|
|
||||||
|
1. Support all browsers at a minimal level
|
||||||
|
1. Use specific applications to measure spacing in designs
|
||||||
|
1. Create self-contained modules
|
||||||
|
1. Interpret mockups
|
||||||
|
1. Work well with designers
|
||||||
|
|
||||||
|
## Support all browsers at a minimal level
|
||||||
|
|
||||||
|
### Not all browser support is the same and support for some technology may vary:
|
||||||
|
|
||||||
|
1. It takes too much time to make sure the site is exactly the same in all browsers
|
||||||
|
1. Build a site so that if it's going to break, it's at least functional, if it isn't pretty
|
||||||
|
- Graceful Degradation
|
||||||
|
|
||||||
|
### How to cope:
|
||||||
|
|
||||||
|
1. Use http://caniuse.com/ to see what's supported
|
||||||
|
1. Cutting edge CSS properties often have browser prefixes in front of them
|
||||||
|
- -webkit- (Chrome, Safari, newer versions of Opera.)
|
||||||
|
- -moz- (Firefox)
|
||||||
|
- -o- (Old versions of Opera)
|
||||||
|
- -ms- (Internet Explorer)
|
||||||
|
1. Follow a progressive enhancement building plan
|
||||||
|
- start with building for the lowest level of technology and add functionality that enhances the experience as better tech is added
|
||||||
|
- build a site first so that it works without CSS or JS
|
||||||
|
- add on basic CSS
|
||||||
|
- add on advanced CSS
|
||||||
|
- add on JS
|
||||||
|
|
||||||
|
## Use specific applications to measure spacing in designs
|
||||||
|
|
||||||
|
1. Create account for Adobe Creative Cloud
|
||||||
|
1. Download Photoshop if you are okay with paying for it
|
||||||
|
1. If not, use http://apps.pixlr.com/editor/
|
||||||
|
|
||||||
|
## Create self-contained modules
|
||||||
|
|
||||||
|
1. Designers always have balance in the back of their mind when they design
|
||||||
|
1. Try to break up white space so that all elements have equal white space on opposite sides
|
||||||
|
1. In theory, you should be able to move elements around in any order, and the site will look good
|
||||||
|
|
||||||
|
## Interpret mockups
|
||||||
|
|
||||||
|
1. The repetitive reuse of design elements throughout the site create a sense of cohesion
|
||||||
|
1. Should have only a couple of font-families
|
||||||
|
1. Should have only a couple different font-sizes
|
||||||
|
1. Should have only a couple different colors
|
||||||
|
1. Elements like buttons should look the same throughout
|
||||||
|
1. Typically there is one font-size for body copy throughout the site
|
||||||
|
- set the html tag's font-size to that
|
||||||
|
- this way, most modules will have a font-size of 1rem
|
||||||
|
|
||||||
|
## Work well with designers
|
||||||
|
|
||||||
|
1. designers are insanely overworked
|
||||||
|
- mistakes happen
|
||||||
|
- keep basic design principles running in your head
|
||||||
|
- use your best judgement or ask the designer if something looks weird
|
||||||
|
- estimates are okay
|
||||||
|
- hopefully they'll come back and review
|
||||||
|
- they or the boss/client often change their mind
|
||||||
|
- if you set things up well, it will be easy to make changes
|
||||||
|
1. go beyond what they're thinking, which is usually just a pretty image
|
||||||
|
- think about what happens when elements are added, removed, or the content is altered
|
||||||
|
- what happens when a user plays with their screen
|
||||||
|
- what happens when a CSS property is not supported by the browser
|
||||||
|
1. part of your job is increasingly becoming more about filling in the gaps the designers leave out
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
# Motion
|
||||||
|
|
||||||
|
##Transitions
|
||||||
|
Make a navigation that looks like [Huge's Nav](http://www.hugeinc.com/)
|
||||||
|
|
||||||
|
##Animations
|
||||||
|
Create make a div fly out at the screen like [this](https://www.youtube.com/watch?v=GaiZIulY4EU)
|
||||||
@ -0,0 +1,103 @@
|
|||||||
|
# CSS - Flex boxes and Viewport CSS
|
||||||
|
|
||||||
|
## Lesson Objectives
|
||||||
|
|
||||||
|
1. Describe viewport units
|
||||||
|
1. Describe flex boxes and why they're great
|
||||||
|
1. Diagram the flex box module
|
||||||
|
1. List the properties of the flex container
|
||||||
|
1. List the properties of the flex items
|
||||||
|
|
||||||
|
## Describe viewport units
|
||||||
|
|
||||||
|
### Definition
|
||||||
|
|
||||||
|
This is a unit of measure, like px, %, em, etc
|
||||||
|
- 1vw = 1% of window width
|
||||||
|
- 1vh = 1% of window height
|
||||||
|
- 1vmin = 1% of whichever dimension (width or height) is smaller
|
||||||
|
- 1vmax = 1% of whichever dimension (width or height) is lager
|
||||||
|
|
||||||
|
### Practical Applications
|
||||||
|
|
||||||
|
1. resize your window width
|
||||||
|
- you'll notice the text doesn't resize, responsively
|
||||||
|
- the issue is that text might be too big for small height screens
|
||||||
|
- can have font-size change with width of screen (or any other dimension)
|
||||||
|
1. imagine you have a scrolling page filled with cards
|
||||||
|
- cards should fill the screen
|
||||||
|
1. div that must maintain same W x H ratio for any screen width
|
||||||
|
- a chess board
|
||||||
|
|
||||||
|
## Describe flex boxes and why they're great
|
||||||
|
|
||||||
|
Up until now, CSS has been more difficult than it should be for certain tasks (vertical alignment, three column layout). Flex boxes let you do these basic things easily. It also makes fluid layout much easier.
|
||||||
|
|
||||||
|
## Diagram the flex box module
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
[source](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
|
||||||
|
|
||||||
|
## Properties of the flex container
|
||||||
|
1. display: (flex | inline-flex);
|
||||||
|
- flex: block level element
|
||||||
|
- inline-flex: inline element
|
||||||
|
1. flex-direction: (row | row-reverse | column | column-reverse);
|
||||||
|
- row: normal layout (left to right)
|
||||||
|
- row-reverse: reverse direction (right to left)
|
||||||
|
- column: vertically (up to down)
|
||||||
|
- column-reverse: reverse vertical (down to up)
|
||||||
|
1. justify-content: (flex-start | flex-end | center | space-between | space-around);
|
||||||
|
- Horizontally aligns the flex items when the items do not use all available space on the main-axis
|
||||||
|
- values
|
||||||
|
- flex-start: start of main axis
|
||||||
|
- flex-end: end of main axis
|
||||||
|
- center: center of main axis
|
||||||
|
- space-between: evenly space, with extra space distributed **between** elements
|
||||||
|
- space-around: evenly space, with extra space distributed **around** elements
|
||||||
|
1. align-items: (flex-start | flex-end | center | baseline | stretch);
|
||||||
|
- Like justify-content, but for cross axis
|
||||||
|
- values
|
||||||
|
- flex-start: start of cross axis
|
||||||
|
- flex-end: end of cross axis
|
||||||
|
- center: center of cross axis
|
||||||
|
- baseline: align items, such that their baselines match
|
||||||
|
- stretch: stretch items to fill cross axis
|
||||||
|
1. flex-wrap: nowrap | wrap | wrap-reverse;
|
||||||
|
- By default, flex items will all try to fit onto one line along main axis. You can change that and allow the items to wrap as needed with this property.
|
||||||
|
- values
|
||||||
|
- nowrap: don't wrap
|
||||||
|
- wrap: make elements wrap if there is not enough space
|
||||||
|
- wrap-reverse: wrap, but rows are reversed
|
||||||
|
1. align-content: (flex-start | flex-end | center | space-between | space-around | stretch);
|
||||||
|
- When there are multiple rows of content, space rows in the same way as justify-content
|
||||||
|
- values
|
||||||
|
- flex-start: start of main axis
|
||||||
|
- flex-end: end of main axis
|
||||||
|
- flex-center: center of main axis
|
||||||
|
- space-between: evenly space, with extra space distributed **between** elements
|
||||||
|
- space-around: evenly space, with extra space distributed **around** elements
|
||||||
|
|
||||||
|
## List the properties of the flex items
|
||||||
|
1. order: <integer>;
|
||||||
|
- can specify order of elements
|
||||||
|
- higher numbers come last
|
||||||
|
1. flex-grow: <number>;
|
||||||
|
- This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.
|
||||||
|
- If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least).
|
||||||
|
1. flex-basis: <length> | auto;
|
||||||
|
- can specify the width of an element before it is resized use flex-grow/shrink
|
||||||
|
- if all elements have flex-basis set to 0 and flex-grow set to the same value, all elements will be the same width
|
||||||
|
1. flex-shrink: <number>;
|
||||||
|
- defines the ability of an item to shrink
|
||||||
|
- 0 means it won't shrink
|
||||||
|
- is a proportion of how much it will shrink in relation to other elements
|
||||||
|
1. align-self: (auto | flex-start | flex-end | center | baseline | stretch);
|
||||||
|
- This allows the alignment specified by align-items to be overridden for individual flex items.
|
||||||
|
- values
|
||||||
|
- flex-start: start of cross axis
|
||||||
|
- flex-end: end of cross axis
|
||||||
|
- center: center of cross axis
|
||||||
|
- baseline: align items, such that their baselines match
|
||||||
|
- stretch: stretch items to fill cross axis
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
# Flex Boxes
|
||||||
|
|
||||||
|
Try to beat this game: http://flexboxfroggy.com/
|
||||||
Loading…
Reference in new issue