+
+
diff --git a/htmlcss-1day/css-boxmodel/exercise_screenshot.png b/htmlcss-1day/css-boxmodel/exercise_screenshot.png
new file mode 100755
index 00000000..e2bb20d8
Binary files /dev/null and b/htmlcss-1day/css-boxmodel/exercise_screenshot.png differ
diff --git a/htmlcss-1day/css-boxmodel/exercise_solution.html b/htmlcss-1day/css-boxmodel/exercise_solution.html
new file mode 100755
index 00000000..b1fa88c6
--- /dev/null
+++ b/htmlcss-1day/css-boxmodel/exercise_solution.html
@@ -0,0 +1,57 @@
+
+
+
+
+ Fox
+
+
+
+
+
Fox
+
+
+
+
+
+ Fox is a common name for many species of carnivorous mammals belonging to the Canidae family. Foxes are small to medium-sized canids (slightly smaller than the median-sized domestic dog), characterized by possessing a long narrow snout, and a bushy tail (or brush).
+
+
+
+Members of about 37 species are referred to as foxes, of which only 12 species actually belong to the Vulpes genus of 'true foxes'. By far the most common and widespread species of fox is the red fox (Vulpes vulpes), although various species are found on almost every continent. The presence of fox-like carnivores all over the globe has led to their appearance in both popular culture and folklore in many cultures around the world (see also Foxes in culture). The gray fox is one of only two canine species known to climb trees; the other is the raccoon dog.
+
The goal is to create a webpage that looks like the one below. Follow these steps:
+
+
+
Copy this webpage (the solution from the CSS properties exercise).
+
Add a div for all of the content. Add styles to that div so it is centered on the page and has appropriate border and padding.
+
Add a div for the header (the logo). Add styles to that div so the image is centered.
+
Add a div for the footer links. Add styles to that div so that the links are centered and it has appropriate border, padding, and margin.
+
Add a div for the locations list. Add styles to that div so that it floats to the right and has appropriate border, padding, and color.
+
Bonus: Add a div with 00s and 11s. Add styles to that div so that it is positioned absolutely just above the bottom of the page and is below the main div.
+
+
+
diff --git a/htmlcss-1day/css-floats/exercise_screenshot.png b/htmlcss-1day/css-floats/exercise_screenshot.png
new file mode 100644
index 00000000..85ff8c04
Binary files /dev/null and b/htmlcss-1day/css-floats/exercise_screenshot.png differ
diff --git a/htmlcss-1day/css-floats/exercise_solution.html b/htmlcss-1day/css-floats/exercise_solution.html
new file mode 100755
index 00000000..908a8a4f
--- /dev/null
+++ b/htmlcss-1day/css-floats/exercise_solution.html
@@ -0,0 +1,177 @@
+
+
+
+
+ GirlDevelopIt
+
+
+
+
+
+
+
+
+
+
About
+
+
It can be intimidating for women to learn and ask questions when they are in an extreme minority. While open and welcoming, today's budding developer community is up to 91% male. If we can empower more females with the confidence in their technological capabilities we can begin to change this landscape.
+
Press → key to advance. Zoom in/out: Ctrl or Command + +/-.
+
+
+
+
+
+
+
+
+
+
+
CSS: Floats
+
+
+
+
+
+
Float
+
+
The float property is used to float boxes on the sides of other boxes, allowing other content to flow around it. First used to wrap text around images.
+
+<div style="border:1px solid black">
+ <img style="float:right" src="fox.jpg">
+ Pamela Fox has worked in ....
+</div>
+
+
+
+Pamela Fox has worked in the Developer Programs group at Google for the last 2 years. She dedicates most of her time to supporting the Google Maps API, but spends her free time mashing up other APIs and developer tools. Before that, she graduated from the University of Southern California (USC), where she majored in Computer Science, minored in Linguistics and 3d animation, and helped grow the video games department.
+
+
+
+
+
+
+
+
+
+
Float
+
+
The float property can also be used to float non-IMG elements, but make sure to specify a width for the floated element.
+
+
+<div>
+ <div style="float:left; width:50px; background-color:yellow; ">
+ H<br>O<br>M<br>E
+ </div>
+ Hi, this is my personal website, where you'll find out everything about my inner desires, hopes, dreams, and incredibly exciting daily life.
+</div>
+<div>Contact me for more info.</div>
+
+
+
+
+ H O M E
+
+ Hi, this is my personal website, where you'll find out everything about my inner desires, hopes, dreams, and incredibly exciting daily life.
+
+
Contact me for more info.
+
+
+
+
+
+
+
+
+
+
Clear
+
+
The clear property can be used to specify that an element should not wrap around floated elements above it.
+
+
+
+<div style="float:left; width:50px; background-color:yellow; ">
+ H<br>O<br>M<br>E
+</div>
+<div>
+ Hi, this is my personal website, where you'll find out everything about my inner desires, hopes, dreams, and incredibly exciting daily life.
+</div>
+<div style="clear:both">Contact me for more info.</div>
+
+
+
+ H O M E
+
+
+ Hi, this is my personal website, where you'll find out everything about my inner desires, hopes, dreams, and incredibly exciting daily life.
+
+
Contact me for more info.
+
+
+
+
+
+
+
+
+
+
+
Page Layouts
+
+
With all these CSS properties combined, you can create nice looking non-linear page layouts.
+Fox is a common name for many species of carnivorous mammals belonging to the Canidae family. Foxes are small to medium-sized canids (slightly smaller than the median-sized domestic dog), characterized by possessing a long narrow snout, and a bushy tail (or brush).
+
+
+
+Members of about 37 species are referred to as foxes, of which only 12 species actually belong to the Vulpes genus of 'true foxes'. By far the most common and widespread species of fox is the red fox (Vulpes vulpes), although various species are found on almost every continent. The presence of fox-like carnivores all over the globe has led to their appearance in both popular culture and folklore in many cultures around the world (see also Foxes in culture). The gray fox is one of only two canine species known to climb trees; the other is the raccoon dog.
+
+
+
diff --git a/htmlcss-1day/css-grouping/exercise_screenshot.png b/htmlcss-1day/css-grouping/exercise_screenshot.png
new file mode 100755
index 00000000..0edd5176
Binary files /dev/null and b/htmlcss-1day/css-grouping/exercise_screenshot.png differ
diff --git a/htmlcss-1day/css-grouping/exercise_solution.html b/htmlcss-1day/css-grouping/exercise_solution.html
new file mode 100755
index 00000000..046616d5
--- /dev/null
+++ b/htmlcss-1day/css-grouping/exercise_solution.html
@@ -0,0 +1,41 @@
+
+
+
+
+ Fox
+
+
+
+
Fox
+
+
+
+
+
+ Fox is a common name for many species of carnivorous mammals belonging to the Canidae family. Foxes are small to medium-sized canids (slightly smaller than the median-sized domestic dog), characterized by possessing a long narrow snout, and a bushy tail (or brush).
+
+
+
+Members of about 37 species are referred to as foxes, of which only 12 species actually belong to the Vulpes genus of 'true foxes'. By far the most common and widespread species of fox is the red fox (Vulpes vulpes), although various species are found on almost every continent. The presence of fox-like carnivores all over the globe has led to their appearance in both popular culture and folklore in many cultures around the world (see also Foxes in culture). The gray fox is one of only two canine species known to climb trees; the other is the raccoon dog.
+
Inline styles will have precedence over all other styles. Inline CSS should be avoided as it increases maintenance cost and blurs line between presentation and content.
The goal is to use the CSS position property to create a webpage that looks like the one below.
+
+
Here's what it looks like with a window width of 800x530:
+
+
+
+
+
Here's what it looks like when the window is 400x475 - notice how elements resize:
+
+
+
+
+
Here are recommended steps for making this happen:
+
+
Create a blank web page with just html, head, body, and a style
+ tag.
+
Change the background of the page to be a sky blue and have a background image of clouds.
+
Create a div for the grass - position it at the bottom and give it an appropriate height.
+
Create a div for the "Farm Party!" banner - position it near the top center area, and style the text
+ so that it's red. For a bonus, use a fun custom font (like from Google Web Fonts) and give it the appearance of a black stroke.
+
For each of the images shown, search for an appropriate image on Google Image search - it doesn't have to be the exact same. Try searches like "sheep animated gif"
+ and if you need to, restrict the results to just "clip art". When you find the image, create a img for it on the page.
+
Position each of the img elements appropriately. The sheep should be around the bottom left, the cow should be on the horizon, the dude
+ should be dancing in the middle, the tree should be on the front right, and the sun should be around the upper right.
+
As a bonus, position a picture of your face on top of the dude, and watch yourself have a farm party!
+
The "absolute" value will take the element out of the normal flow and position it in relation to the window (or the closest non-static element).
+
+<div style="position: absolute; top: 10px; right: 10px;
+ background-color: yellow">
+ Up here
+</div>
+
+
+<div style="position: absolute; bottom: 10px; left:60px;
+ background-color: green">
+ Down here
+</div>
+
+
Up here
+
+ Down here
+
+
+
+
+
+
+
+
+
+
z-Index
+
+
The z-index property specifies the stack order of positioned elements, in the case that they are overlapping. The element with highest z-index goes on top.
Starting with the solution from the selectors exercise,
+ add property value pairs to the CSS rules so that the page looks like the screenshot below.
+
+
+
diff --git a/htmlcss-1day/css-properties/exercise_screenshot.png b/htmlcss-1day/css-properties/exercise_screenshot.png
new file mode 100644
index 00000000..d6fe7701
Binary files /dev/null and b/htmlcss-1day/css-properties/exercise_screenshot.png differ
diff --git a/htmlcss-1day/css-properties/exercise_solution.html b/htmlcss-1day/css-properties/exercise_solution.html
new file mode 100755
index 00000000..dca5e23c
--- /dev/null
+++ b/htmlcss-1day/css-properties/exercise_solution.html
@@ -0,0 +1,127 @@
+
+
+
+
+ GirlDevelopIt
+
+
+
+
+
+
About
+
+
It can be intimidating for women to learn and ask questions when they are in an extreme minority. While open and welcoming, today's budding developer community is up to 91% male. If we can empower more females with the confidence in their technological capabilities we can begin to change this landscape.
+
+This property is inherited, which means it'll also be applied to all descendant elements but can be overridden by more specific rules. This rule makes all the body text red unless specified otherwise:
+
+
+body {
+ color: red;
+}
+
+
+ Explain hexadecimal math here, how FF is 0-15, with a 16 place and 1 place, so its 15*16 + 15*1
+
+
+
+
+
+
+
+
+
+
+
Properties: background-color
+
+
The "background-color" property changes the background color. Besides the BODY element, all elements default to a transparent background.
+
The "font-family" property specifies the font family (or "font face") of the text. You can specify either a specific font name or a generic family name (serif, sans-serif, monospace, cursive).
+
+
+font-family: "Times New Roman";
+font-family: sans-serif;
+
+
+A comma separated list of font families can be specified if you want the browser to prefer one but use the others as backup options.
+
The "font-size" property specifies the size of a font. It can be specified as a fixed size in various units, a percentage, or as a predefined keyword.
+
The "px" unit lets you size font in terms of pixels, which is the unit also used to size images and other elements. It is easier to understand than em, but doesn't work as well when printing or resizing.
+
+
+h2 {
+ font-size: 17px;
+}
+
+
+
Normal Headline
+
Resized Headline
+
+
+
+
+
+
+
+
+
Property: font-size (keywords)
+
+
There are various keywords that can be used if you're not as worried about the precise sizing: xx-small, x-small, small, medium, large, x-large, xx-large.
+
+
+p.footnote {
+ font-size: small;
+}
+
+
There are also two relative keywords, that act similar to em's in setting size relative: smaller, larger.
+
+p.intro {
+ font-size: larger;
+}
+
+
+
+
+
+
+
+
+
Property: font-size (em)
+
+
The "em" unit lets you set the size of the text relative to the text around it. This makes the page resize nicely in proportion if the user changes their default font-size. The default size is "1em".
The "font-style" property specifies the font style of the text, either "normal" by default or "italic".
+
+
+
+font-style: italic;
+
+
+
+Italicized text.
+
+
+
+
+
+
+
+
+
+
+
Property: font-weight
+
+
The "font-weight" property specifies the thickness of the font. The default is "normal" and the typical override is "bold". You can also specify "bolder", "lighter", or a number from 100 to 900.
+
+
+font-weight: bold;
+
+
+
+Bold text!
+
+
+
+
+
+
+
+
+
+
"Shorthand" properties
+
+
A "shorthand" property in CSS lets you specify multiple properties in one property, for conciseness purposes. Instead of specifying each "font-" property separately, you can bundle them up in one "font" property.
+
The "font" property expects values ordered as font-style, font-variant, font-weight, font-size, and font-family, and any of the first three can be left off.
+
+
+
+
+
+
+
+
+
+
Other text properties
+
+
+line-height: 10px;
+
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam convallis ligula ut suscipit. Phasellus hendrerit, enim scelerisque...
+
Starting with the solution from the HTML 2 exercise,
+ add CSS rules to the webpage so that it looks like the screenshot below.
+
+
First figure out what selector you can use to select a part of the page,
+ adding class or id attributes to the HTML if necessary.
+
+
Then create the CSS rule with that selector and the color property (e.g. color: red).
+ Useful color names are
+ red, blue, green, yellow,
+ purple, orange, darkred, and lightblue.
+
+
Note that there are often multiple ways to achieve the same result in CSS. Try to use a mix of the different types of selectors- id, class, position in document, etc.
+
+
+
\ No newline at end of file
diff --git a/htmlcss-1day/css-selectors/exercise_screenshot.png b/htmlcss-1day/css-selectors/exercise_screenshot.png
new file mode 100644
index 00000000..4caf8733
Binary files /dev/null and b/htmlcss-1day/css-selectors/exercise_screenshot.png differ
diff --git a/htmlcss-1day/css-selectors/exercise_solution.html b/htmlcss-1day/css-selectors/exercise_solution.html
new file mode 100755
index 00000000..5bfadf1b
--- /dev/null
+++ b/htmlcss-1day/css-selectors/exercise_solution.html
@@ -0,0 +1,119 @@
+
+
+
+
+ GirlDevelopIt
+
+
+
+
+
+
About
+
+
It can be intimidating for women to learn and ask questions when they are in an extreme minority. While open and welcoming, today's budding developer community is up to 91% male. If we can empower more females with the confidence in their technological capabilities we can begin to change this landscape.
+
+Warning: If you place a space after the ".", it'll look for descendants of li with class of "special."
+
+
+
+
+
+
+
+
+
+
Types of selectors: ALL!
+
+
+#header div.content form p em.required {
+ color: white;
+}
+
+
+Selects any em element with a class attribute that contains the word "required" that is a descendant of a p element that is a descendant of a form element that is a descendant of a div element with a class attribute that contains the word "content" that is a descendant of any element with an id attribute that equals "header".
+
+
+
+
+
+
+
+
+
+
+
Types of selectors: pseudo classes
+
+
A set of "pseudo classes" can style anchor elements depending on their state.
+
+a:link { /* unvisited link */
+ color: red;
+}
+a:visited { /* visited link */
+ color: blue;
+}
+a:hover { /* moused over link */
+ color: green;
+}
+a:active { /* current link */
+ color: purple;
+}
+a:focus { /* focused link */
+ color: purple;
+}
+
+
+
+
+
+
+
+
+
+
Grouping selectors
+
+
You can group selectors to apply the same style to all of the selectors by separating them with commas:
Notice: space between "selector" and "{", 2 spaces before property-value pair, space after "property:", semi-colon after "values", line between rules.
+
+
+
+
+
+
+
+
+
+
+
Naming Conventions
+
+
Some rules to follow when making IDs and class names:
+
+
Describe the content, not the presentation ("warning", not "redbox").
+
Use all lowercase, and hyphens when needed for readability ("header-info", not "headerInfo").
+
Use hyphens to show that a class or ID is part of something else. (e.g. "footer", "footer-copyright", and "footer-logo").
+
+
+
+
+
+
+
+
Comments
+
+
Comments will be ignored by the browser and are useful for documenting your styles to other humans or commenting out rules.
+
+
diff --git a/htmlcss-1day/html-basics/exercise_screenshot.png b/htmlcss-1day/html-basics/exercise_screenshot.png
new file mode 100644
index 00000000..de841c56
Binary files /dev/null and b/htmlcss-1day/html-basics/exercise_screenshot.png differ
diff --git a/htmlcss-1day/html-basics/exercise_solution.html b/htmlcss-1day/html-basics/exercise_solution.html
new file mode 100755
index 00000000..2fb2d31b
--- /dev/null
+++ b/htmlcss-1day/html-basics/exercise_solution.html
@@ -0,0 +1,38 @@
+
+
+
+
+ GirlDevelopIt
+
+
+
+
+
About
+
+
+ It can be intimidating for women to learn and ask questions when they are in an extreme minority. While open and welcoming, today's budding developer community is up to 91% male. If we can empower more females with the confidence in their technological capabilities we can begin to change this landscape.
+
+<p>Jump to <a href="#chapter1">the first chapter!</a> </p>
+
+<h1 id="chapter1">Chapter 1</h1>
+
+<p>Most exciting story in the world. To be continued...</p>
+
+<p>Read more on
+<a href="http://en.wikipedia.org/wiki/Fox#Diet">Wikipedia</a>
+</p>
+
Since HTML files are just text files, many programs can be used to create them. Some programs provide special assistance for handling HTML, like syntax-highlighting or autocompletion.
+
When you're on your own and trying to code HTML, do a search for the tag you're using ("img tag" or "li tag") and you will usually find good references at the top.
+
+
W3Schools is a simple to read reference with interactive examples & will often be the top result. The HTML spec is the official reference, but can be harder to read.
+
+
+
+
+
+
diff --git a/htmlcss-1day/html-embeds/beatingheart.swf b/htmlcss-1day/html-embeds/beatingheart.swf
new file mode 100644
index 00000000..78992e07
Binary files /dev/null and b/htmlcss-1day/html-embeds/beatingheart.swf differ
diff --git a/htmlcss-1day/html-embeds/exercise_descrip.html b/htmlcss-1day/html-embeds/exercise_descrip.html
new file mode 100644
index 00000000..d714fe43
--- /dev/null
+++ b/htmlcss-1day/html-embeds/exercise_descrip.html
@@ -0,0 +1,47 @@
+
+
+
+
+ HTML 1: Embed
+
+
+
+
+
+
+
+
+
+
HTML 1: Embed
+
+
In this exercise, you'll create a webpage of many embedded elements. For some of these, you may have to google to figure out how to get embed codes - some sites make it easier/more obvious than others.
+
+
Create a new blank page with just a header (“All About Dogs”).
+
+
Add an embedded Google Map that shows dog parks in San Francisco.
+
Add Facebook comments to your page.
+
Add a Twitter button to the page.
+
Add an embedded Flickr slideshow of photos tagged with “dog”.
+
Create a Google custom search engine that searches across multiple dog sites and embed the search box on the page.
+
For each of the embeds, add comments around them to show where they start and end, and add an h2 to split the page up into sections.
+
+
The iframe element makes it easy for websites to become embeddable on other websites, and for users to share content that they've created on a site.
+
+
Most websites don't naturally look good when embedded at small sizes, so websites create special versions that are designed for embeddability, and the provide users with those URLs.
+
+
+
+
+
+
+
+
+
+
Iframe embeds: Docs
+
+
In its "Publish" dialog, Google Docs provides this HTML for embedding a presentation on your site:
+
+
diff --git a/htmlcss-1day/html-forms/exercise_screenshot.png b/htmlcss-1day/html-forms/exercise_screenshot.png
new file mode 100644
index 00000000..0fc203c7
Binary files /dev/null and b/htmlcss-1day/html-forms/exercise_screenshot.png differ
diff --git a/htmlcss-1day/html-forms/exercise_solution.html b/htmlcss-1day/html-forms/exercise_solution.html
new file mode 100755
index 00000000..5bedca34
--- /dev/null
+++ b/htmlcss-1day/html-forms/exercise_solution.html
@@ -0,0 +1,85 @@
+
+
+
+
+ GirlDevelopIt
+
+
+
+
+
About
+
+
It can be intimidating for women to learn and ask questions when they are in an extreme minority. While open and welcoming, today's budding developer community is up to 91% male. If we can empower more females with the confidence in their technological capabilities we can begin to change this landscape.
+
It can be intimidating for women to learn and ask questions when they are in an extreme minority. While open and welcoming, today's budding developer community is up to 91% male. If we can empower more females with the confidence in their technological capabilities we can begin to change this landscape.
+
Most tables start with a header row with the names of the columns. The thead element starts the header area, the tr element creates a row, and th elements create cells in the row.
Tables can consist of any number of data rows after the header. The tbody element begins the body (data) area, the same tr element creates a row, and td elements create data cells in each row.
+
+ 
+ 
+
+
+ 
+Pamela Fox has worked in the Developer Programs group at Google for the last 2 years. She dedicates most of her time to supporting the Google Maps API, but spends her free time mashing up other APIs and developer tools. Before that, she graduated from the University of Southern California (USC), where she majored in Computer Science, minored in Linguistics and 3d animation, and helped grow the video games department.
+
+
+ 
+ 
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+ 
+
+
+
\ No newline at end of file
diff --git a/htmlcss-1day/css-positioning/slides.html b/htmlcss-1day/css-positioning/slides.html
new file mode 100755
index 00000000..8abb86c8
--- /dev/null
+++ b/htmlcss-1day/css-positioning/slides.html
@@ -0,0 +1,857 @@
+
+
+
+
+
+
+ 
+ It is:
+ 
+ It should be:
+ 
+
+ 
+
+
+
+ 
+
+ 
+ 
+ 
+
+
+
+ 
+
+ 
+ 
+ 
+
+ 
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+ 
+ 
+ 
+ 