diff --git a/009_img/readme.md b/009_img/readme.md new file mode 100644 index 0000000..cb6a2f2 --- /dev/null +++ b/009_img/readme.md @@ -0,0 +1,149 @@ +## Media +### Images, Audio, Video, IFrames +Summary: Media has been a part of the web since its inception, however with HTML5, adding media to your website is easier than ever. + +### Images + +```css +img { + width: set-width; + height: set-height; + float: direction; /*Float will make an image move to the side of text.*/ + border-radius: make-rounded-edges; + +} +``` +```html +alternate text if the picture cannot show. +``` + +Adding images to your webpages are very simple, just add `img`! + +
+

Hello World!

+ + Image Example + +
+ +### Audio +With the introduction of HTML5, there is now a tag to play audio directly; without the need for plugins. + +```html + +``` +``` +Options + - controls + - autoplay + - loop +``` + +This will allow you to have audio in your page directly. If the attribute controls is set, the player is visible otherwise it is not shown. Autoplay will do as the name indicates and play the audio on page load. Finally, loop also does as the label describes; loops the audio infinately. + +### Video + +Also added with the introduction of HTML5, videos are also able to be played directly from the browser. + +```html + +``` +``` +Options + - controls + - autoplay + - poster = "image-as-poster" +``` + +As before, this creates a browser-dependant video player. The video is always visable, but controls will allow the user to interact with the video. The new option here is poster. A poster is the image a video has before it has started playing. + +### Iframe + +```html + +``` +``` +Options + - allowfullscreen + - frameborder = size +``` + +An iframe is another webpage embedded into your page. This is very useful in several situations such as embedded youtube videos or other services. + +### Code Example: Media + +Place this code into a .html file and open it in your browser. + +```html +Media + + + +

Click on the buttons to show the indicated media

+ + +
+

A lovely gradient for your eyes to enjoy. + Source

+ +
+ + +
+

A test sound of the ocean. + Source

+ +
+ + +
+

A common test video. + Source

+ +
+ + +
+

This is an iframe of a youtube video!

+ +
+ +``` + +* sources: + * http://learn.shayhowe.com/html-css/adding-media/ + * http://www.w3schools.com/css/css3_images.asp + * http://www.w3schools.com/tags/tag_audio.asp + * http://www.w3schools.com/html/html5_video.asp + * http://www.w3schools.com/tags/tag_iframe.asp +* Created by Allen J. Mills,[(Github)](https://github.com/FelixVicis) (DATE) + + + diff --git a/016_css-selectors/readme.md b/016_css-selectors/readme.md new file mode 100644 index 0000000..ac1ab17 --- /dev/null +++ b/016_css-selectors/readme.md @@ -0,0 +1,298 @@ +## CSS Basics +### Selectors +Summary: CSS is a language used to enrich standard HTML by adding _style!_ + +Selectors are the backbone of everything you will do with CSS. With this lesson, you will be able to select exactly what you want within an html page and nothing else. + +## Basic Selectors + +1. **All** + ```css + * {} + ``` + The above selector(*) will select for every element on the screen. Use this for global effects. + +1. **Elements** + ```css + element {} + element, anotherElement {} + ``` + + This is the most basic of selectors, the element selector. + + This will select all elements of a specific kind; eg: `div {}` will select all div elements on the screen. + + The second tag is a collection of elements to select. If you wish to select on both div _and_ p elements you would use `div, p {}`. + +1. **Children Elements** + ```css + element childElement {} + element > childElement {} + ``` + We begin to complicate matters slightly. These are the children/parent selectors. For example, if we wish to get all divs directly within body we would select on: `body div {}`. This would give us only those elements and no others any farther within the page. + + To reverse this and select an input who has a parent of form you would select on `form>input {}` + +1. **Sibling Elements** + ```css + element + siblingElement {} + siblingElement ~ element {} + ``` + Sibling elements are those that exist at the same level. For example: + ```html +
First
+

Second

+ ``` + The div and p here are siblings of each other. + + If we wished to give style to the text of the p We would do either: + ```css + div + p {color: red;} /* Select the p after the div */ + ``` + or, + ```css + p ~ div {color: red;} /* Select the p who has a div as previous sibling */ + ``` + +### Code Example: Simple Selectors + +Place this code into a .html file and open it in your browser. + +Key Takeaways + +```html + + + + Lesson Title + + + + Body Text +
+ Parent Div Text +

Child P Text

+
Child Div Text
+
+ + +
    +

    + Things to watch for: +

    +
  1. CSS attached to an element above is also applied to children. This is why a text color set at body applies to everything except when it has been explicitly set.
    2. +
  2. Using the examples above, can you change the text color of this ordered list?
    3. +
  3. Sibling selectors are very interesting when applied to a list of items. Can you change the color of every list item here except the first? How about the last instead?
    4. +
+ + +``` + +------------------------------ + +## Specific Selectors + +1. **ID** + ```css + #elementID {} + ``` + ID's are given to html elements with with the form ``. Using this as an identifying id for _one_ element, you can target a specific element for style. + +1. **Class** + ```css + .className {} + ``` + Classes, on the other hand, are added to an element with `` + These identifiers are designed for _groups_ of elements and are often added in bulk where separate class names are separated by space. + + Depending on your specific style, classes are often used to create optional styles for elements. An example of this could be: + ```css + table {} + table.Dark {} + table.Light {} + ``` + Where the styling on a table of class Dark would be different than the same having class Light or even no class. + +### Code Example: Specific Selectors + +Place this code into a .html file and open it in your browser. + +Specific selectors are excellent when targeting singular objects. + +* Did you notice that the first div had both boxify and px100 class. Add the missing class to both SecondDiv and ThirdDiv to make both square and a white border. +* Can you create a new class px500 using px100 as an example. +* Add this new class px500 to replace px100 on ThirdDiv +* Can you target SecondDiv using it's id to make the border color and font color green.
Hint: use FirstDiv as an example. + +```html + + + + Specific Selectors + + + +
First Div
+
Second Div
+
Third Div
+ + +``` +------------------------------ + +## Special Selectors + +This section will be among the most complicated selectors available to use. With these selectors CSS can have tremendous power over your webpage. + +1. **Attribute** + ```css + *[attribute] {}, + *[attribute=valueExact] {}, + *[[attribute~=valueContaining] {}, + *[attribute^=valuePrefix] {}, + *[attribute$=valuePostfix] {}, + *[attribute*=valueInfix] {}, + ``` + + Attribute selectors will allow you to select on all of the other options not previously discussed for an element. For example: + + Links on a page often have several attributes tied to them such as href, target, and title among others. With these selectors, you could treat all links that have, for example, `target:_blank` with a special format. + +1. **Pseudo** + ```css + :link {}, + :visited {}, + :focus {}, + :hover {}, + + ``` + + Pseudo selectors are similar to javascript events. This allows for very specialised styles to apply to elements. + +### Code Example: Special Selectors + +Place this code into a .html file and open it in your browser. + +* Notice, we're getting rather abstract at this level. +* Of the attributes, did you notice that you do not need to use _real_ attributes. You may make your own. +* Events, and especially selecting on then, can get difficult. Can you answer why the selector including hover ends with `*[show]`? + +```html + + + + Special Selectors + + + +
+
Hover over me!
+
Hello World!
+ +
+ + + + + +``` + +* sources: + * http://www.w3schools.com/cssref/css_selectors.asp +* Created by Allen J. Mills,[(Github)](https://github.com/FelixVicis) (4/27/16) \ No newline at end of file diff --git a/030_box-sizing_border-box/readme.md b/030_box-sizing_border-box/readme.md new file mode 100644 index 0000000..60f1d63 --- /dev/null +++ b/030_box-sizing_border-box/readme.md @@ -0,0 +1,79 @@ +## Box Sizing +### Border-Box + +Summary: `box-sizing: border-box;` makes sizing elements to take the same space much easier than alternatives. + +In this lesson, we will focus on the CSS3 property *box-sizing*. There will be a code demo at the bottom. + +* **Box Sizing** + + ```css + .boxed { + box-sizing: border-box; + height: 100px; + width: 50%; + } + ``` + As you may have learned before now, sizing objects using css is a bit more complicated than just a single size. For a single direction size includes: Margin, Border, Padding, and then content. Taking this into account, using something as woefully simple as height or width is too simple to properly take into account the real dimentions of an object. + + However, there is hope. Using box-sizing will, in essance, make sizing do exactly what you think it should. + + With `box-sizing: border-box;` width and height are now calculated with padding and border taken into account. Such behavior is so desired that it is not uncommon to see, + ```css + * { + box-sizing: border-box; + } + ``` + as standard practice in many style sheets. + +### Code Example: Boxes, more corners than expected! + +Place this code into a .html file and open it in your browser. + +look at this + +```html + + + + Lesson: Border Box + + + +
Box 1: Even if we have the same width/height,
+
Box 2: ..notice that we're different?
+ +

+ +
Box 3: We on the other hand,
+
Box 4: ..are exactly the same--at least on the outside.
+ + +``` + +* sources: + * http://www.w3schools.com/css/css3_box-sizing.asp +* Created by Allen J. Mills,[(Github)](https://github.com/FelixVicis) (4/14/16) \ No newline at end of file diff --git a/043_position-fixed/readme.md b/043_position-fixed/readme.md new file mode 100644 index 0000000..4f1e96e --- /dev/null +++ b/043_position-fixed/readme.md @@ -0,0 +1,85 @@ +## Position Layout +### Fixed +Summary: Using the `position:;` property, you may specify the type of positioning/method used on an element. + +In this lesson, we will focus on the position property of *fixed* specifically. There will be a code demo at the bottom. + +2. **Fixed** + + ```css + .fix-me { + position: fixed; + top: 0; + left: 0; + border: 3px solid black; + } + ``` + A fixed object will keep itself in an absolute position relative to the viewport. In this way, it has no inheritance of child/parent as before when speaking of a view into the webpage as it is now tied directly above all to the viewport. + +### Code Example: Fixed + +Place this code into a .html file and open it in your browser. + +Look for these things while interacting with this demo: +* What happens to fixed objects when you scroll the page? +* When changing the number of directions(top/bottom/left/right) specified how does the object react. +* What other objects(if any) can interact with these fixed objects. What happens when all fixed objects are anchored to the same place? + +```html + + + + Lesson: Static and Fixed + + + + + +
1
+ + +
2
+ + +
3
+ + +
4
+ + +
5
+ +
+

I'm static!

+

For all the other div's, change the left right top bottom parameters.

+

Notice, as you do so, that css does it's best to match where you've asked the div to move to.

+

An object with two sides of a corner (left and top for example) will move relative to that corner.

+

Something with two opposite sides (left and right) will stretch between them

+

Finally, an object with all four directions specified will attempt to stretch to meet all requirements.

+
+ + + +``` + +* sources: + * http://www.w3schools.com/css/css_positioning.asp +* Created by Allen J. Mills,[(Github)](https://github.com/FelixVicis) (4/14/16) \ No newline at end of file diff --git a/044_position-relative/readme.md b/044_position-relative/readme.md new file mode 100644 index 0000000..59d7454 --- /dev/null +++ b/044_position-relative/readme.md @@ -0,0 +1,89 @@ +## Position Layout +### Static and Relative +Summary: Using the `position:;` property, you may specify the type of positioning/method used on an element. + +In this lesson, we will focus on the position properties of *static* and *relative* specifically. There will be a code demo at the bottom. + +1. **Static** + ```css + .static-me { + position: static; + border: 3px solid black; + } + ``` + An object positioned as static will explicitly follow the flow of the webpage, top down. It will not be affected by any top/down/left/right properties. You can use this to specifically isolate an object from the behavior of other objects. + +2. **Relative** + ```css + .relative-me { + position: relative; + left: 10 px; + border: 3px solid black; + } + ``` + Relatively positioned objects will position themselves relative to their neighboring parents. As you can imagine; a div within body will position itself relative of the page, a picture within the div will do the same after the div's positioning ect. ect.. + +### Code Example: Relative & Static + +Place this code into a .html file and open it in your browser. + +Watch closely as to what happens when you change the div specially marked from relative-me to static-me. When static or relative what happens when you tell it to move left or right? + +```html + + + + Lesson: Static and Relative + + + +
+ This object is relative of body to the left. +
+ Change Me +

+ Change me from relative to static, watch the difference. + If you give tell me to move left or right, what happens? +

+
+
+
+ Div, relative right, inside main +
+ + +``` + +* sources: + * http://www.w3schools.com/css/css_positioning.asp +* Created by Allen J. Mills,[(Github)](https://github.com/FelixVicis) (4/14/16) \ No newline at end of file diff --git a/045_position-absolute/readme.md b/045_position-absolute/readme.md new file mode 100644 index 0000000..d1c14ea --- /dev/null +++ b/045_position-absolute/readme.md @@ -0,0 +1,88 @@ +## Position Layout +### Static and Absolute +Summary: Using the `position:;` property, you may specify the type of positioning/method used on an element. + +In this lesson, we will focus on the position properties of *static* and *absolute* specifically. There will be a code demo at the bottom. + +1. **Static** + ```css + .static-me { + position: static; + border: 3px solid black; + } + ``` + An object positioned as static will explicitly follow the flow of the webpage, top down. It will not be affected by any top/down/left/right properties. You can use this to specifically isolate an object from the behavior of other objects. + +2. **Absolute** + ```css + absolute-me { + position: absolute; + bottom: 0; + right: 0; + border: 3px solid black; + } + ``` + An absolutely positioned object acts much like the fixed object. The difference between the two is that the absolute object's viewport is its parent object. + + With this in mind, an absolutely positioned object that is a child of main will look *exactly* as a fixed object except for one point, *it will scroll with the page.* + + A point to note: An absolute object within a static object will position itself to the closest grandparent that is a non-static object. *eg: An absolute child within a static child of a relative object will position itself to the relative object--not its static parent.* + +### Code Example: Absolute & Static + +Place this code into a .html file and open it in your browser. + +Look carefully at both examples, in the second, why does the absolutely positioned div choose it's grandparent to anchor with instead? + +```html + + + + Lesson: Absolute + + + + +
+
This has been anchored inside of another div.
+
+
+ +
+
+

The absolute div below me will choose our grandparent to align to.

+
This has been anchored inside of another div.
+
+
+ + +``` + +* sources: + * http://www.w3schools.com/css/css_positioning.asp +* Created by Allen J. Mills,[(Github)](https://github.com/FelixVicis) (4/14/16) \ No newline at end of file diff --git a/054_flex-box_container/readme.md b/054_flex-box_container/readme.md new file mode 100644 index 0000000..0c77a1a --- /dev/null +++ b/054_flex-box_container/readme.md @@ -0,0 +1,183 @@ +## Flexbox +### Containers, Properties, and Items +Summary: With the addition of `display:flex;` introduced with CSS3 layout behavior has become much easier to accomplish. + +In this lesson we will cover much of the basics involving flexbox and their interior items. There is a code demo at the bottom. For more precise information involving this topic, I recommend reading through the sources. + +1. **Flex Container** + ```css + .flex-container { + display: flex; + } + ``` + We begin with the root of flexbox's functionality, the flex container. Before any other options can be defined, we need to let our container know that it should act as a flexbox; thus, `display:flex;`. + + The container that has this property, and all children, are now flex objects. + +1. **Flex Wrap** + ```css + .wrap { + display: flex; + flex-wrap: wrap | nowrap | wrap-reverse; + } + ``` + Of the most useful flexbox properties is the one it achieved it's name for: flex. + + `flex-wrap: wrap;` informs the container with this property that it should now arrange it's children according to an axis(more details in the next section) and now, in the case of overlap, elements will _wrap_ around the screen. + + `flex-wrap: wrap-reverse;` will do as the label claims and organizes the children in reverse order. + + `flex-wrap: nowrap;` will explicitly disable wrap properties. *This is the default behavior of a container* + +1. **Flex Axis** + ```css + .flex-container { + display: flex; + flex-direction: row | column | row-reversed | column-reversed; + } + ``` + We mentioned the concept of axis to align children of a flex container. There are several different ways of doing this and each have their own specific meaning. + * `flex-direction` + + This specifies the 'main' axis. Specifically, this property defines the direction objects will flex into. + * `justify-content` + + This is the next axis modifier. With this property we defile alignment _along_ the main axis. From here, we can distribute extra space evenly. + * `align-items` + + Another layer down. This property will modify how objects are aligned across the main axis cross axis. + + Example: if you have your objects arranged in row format (left to right) this property defines where along an object's top to bottom it is positioned. + * `align-content` + + This serves the same as `justify-content` for the cross axis. It will determine how extra space on the cross axis is distributed. + +1. **Flex Items** + + There are a number of properties to target children of flex objects as well. These are just a few of them. + + * `order` + + This property will accept an integer to determine what order this element will appear at. + * `flex-grow`/`flex-shrink` + + These defines how much a single element will resize in relation to other siblings. + * `align-self` + + This will override the parent's alignment. + +### Code Example: Flexbox + +Place this code into a .html file and open it in your browser. + +Look for these things when editing the div of "Edit_My_Class": +* When the class is only "container": + + Notice how the elements flow down the page. This is the default behavior of HTML +* Class is "container flex" + + Here we can see that row is the default flex layout. Notice that the objects attempt to squish into a singular row? +* Class is "container flex row" + + Was there a difference? Why? +* .. "container flex col" + + Look at the css for class of col, why do you think it requires a different height? +* .. "container flex row-" and "container flex col-" + + These are reversed row and reversed column. +* add "wrap" to the classes previously used(reversed and not) +* change wrap to "wrap-" + + This is reversed wrap, what kind of changes do you see with row, col, row-, and col-? + +```html + + + + Lesson Title + + + + +
+ +
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
+ + +``` + +* sources: + * https://css-tricks.com/snippets/css/a-guide-to-flexbox/ + * http://www.w3schools.com/css/css3_flexbox.asp +* Created by Allen J. Mills,[(Github)](https://github.com/FelixVicis) (4/14/16) + + diff --git a/057_media-queries/readme.md b/057_media-queries/readme.md new file mode 100644 index 0000000..974037f --- /dev/null +++ b/057_media-queries/readme.md @@ -0,0 +1,121 @@ +## Advanced Layout +### Media Query +Summary: These advanced methods of layout design will give absolute control over how your page is viewed. + +Media Query is to, simply put, query the user's browser. This can allow an extreme amount of control. + +These queries come in the form `@media not|only TYPE and (QUERY) {};` + +### **Types** + ```text + all : All media types. + print : Media types read/used by printers. + screen : Media used by computer screens, tablets, phones, ect. + speech : Used for programs that read a page aloud. + ``` + + As you can see, the number of media types can account for many situations. + +### **Queries** + Queries are the backbone of this functionality. There are numerous parameters that can be queried but the most common you will use are: + ```text + max-width : Maximum size of the viewable width. + min-width : Minimum size of the viewable width. + max-height : Maximum size of the viewable height. + min-height : Minimum size of the viewable height. + orientation : Orientation of the viewport. Landscape or Portrait. + ``` + +### **Mobile or Desktop First?** + + History is fascinating in many forms. Here is one aspect you may not be aware of. + + In the eve of 2004, a website launches. This site's goal: a resolution dependant layout. [This demo is still alive today](http://www.themaninblue.com/experiment/ResolutionLayout/). CSS3 would not be ready for another four years, and yet, the war for platform begins. + + The terms mobile or desktop first are actually very simple; they simply mean what platform your website is designed to be seen on. In development, this can mean quite a lot. Time and money must go into design and at minimum one design must be excellent. In an ideal world, there would be enough time and money to ensure that all aspects of the layout would work perfectly regardless of platform but in business this is not so. + + As to the war between desktop and mobile, that war has ended. It is common practice to think of your mobile users just as, if not more, important as any others. + + That is, however, not to say that there is no discussion on what we now call Responsive Web Design. Here are a couple of pages that still have notes to chime in on where our designs should go. + * [Code My Views: Mobile First Design](https://codemyviews.com/blog/mobilefirst) + * [Codepen: Think Element-First](https://codepen.io/tomhodgins/post/forget-mobile-first-desktop-first-it-s-time-to-think-element-first) + +### Code Example: Media Queries + +Place this code into a .html file and open it in your browser. + +```html + + + + Media Queries + + + + +

Hello World, You should only be able to see me if the screen is big!

+ +

On the other hand, if the screen is small, I should be visible.

+ +

Nothing, however, hides from the printer!

+ +

Resize the screen; make it big, small, try to print it. What do you see?

+ + + +``` + +* sources: + * http://www.w3schools.com/css/css3_mediaqueries_ex.asp + * http://www.w3schools.com/cssref/css3_pr_mediaquery.asp + * https://en.wikipedia.org/wiki/Responsive_web_design +* Created by Allen J. Mills,[(Github)](https://github.com/FelixVicis) (5/3/2016) diff --git a/060_units-of-measurement/readme.md b/060_units-of-measurement/readme.md new file mode 100644 index 0000000..ecbee8b --- /dev/null +++ b/060_units-of-measurement/readme.md @@ -0,0 +1,175 @@ +## Units of Measurement +### +Summary: Size, width, shape, length; these values are all incredibly important to everything we've used thus far. Hopefully with this lesson, any questions with regards to units will be resolved. + +There are two categories to the units used in CSS, relative and absolute. + +1. **Relative** + + Just to list off a few there are: + * em: size relative to font-size + * ch: relative to the width of 0 character. + * rem: .. to the font-size of the root element + * vw: .. to 1% of the width of the viewport. + * vh: .. to 1% of the height of the viewport + * vmin: .. to 1% of the viewports smallest dimension + * vmax: .. to 1% of the viewports largest dimension + * %: percentage of viewport. Quick version of most relevant vh/vw distance. + + Keep in mind, relative will always move with the device/screen of whatever is viewing it. + +1. **Absolute** + + Same as before. + * cm: centimeters + * mm: millimeters + * in: inches as 1 inch = 96px = 2.54 cm + * px: pixels, **_Big Important note at bottom of this section_** + * pt: point, 1/72 * 1 in + * pc: picas, 12pt + + **Note about pixels** + It is extremely misleading to consider pixels as an absolute form of measurement. The pixels width of a screen is dependant on the quality and manufacturer of the device/screen in question and changes wildly. + +### Code Example: Title + +Place this code into a .html file and open it in your browser. + +```html + + + + Lesson Title + + + + +

Centimeters

+
+
+
+
+
+
+
+ +

Millimeters

+
+
+
+
+
+
+
+
+
+ +

Inches

+
+
+
+
+
+
+
+ +

Percents

+
+
+
+
+
+
+
+ +

Pixels

+
+
+
+
+
+
+
+ +

Em

+
+
+
+
+
+
+
+ +

Em Larger font size

+
+
+
+
+
+
+
+ +

Em smaller font size

+
+
+
+
+
+
+
+ +

VW

+
+
+
+
+
+
+
+ +

VMin

+
+
+
+
+
+
+
+ +

VMax

+
+
+
+
+
+
+
+ + + +``` + +* sources: + * http://www.w3schools.com/cssref/css_units.asp +* Created by Allen J. Mills,[(Github)](https://github.com/FelixVicis) (4/14/16) \ No newline at end of file diff --git a/068_font-awesome/readme.md b/068_font-awesome/readme.md new file mode 100644 index 0000000..6f0309c --- /dev/null +++ b/068_font-awesome/readme.md @@ -0,0 +1,97 @@ +# Plugins + +## [Font Awesome](http://fortawesome.github.io/Font-Awesome/) +Summary: We've discussed many ways in which CSS is extremely versitile and can be used to enhance otherwise stale html. This section is to discuss the plugins and import that help further this ablility. + +Description + +##