Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.
-Some "rules"
Tell us about yourself.
+ 
+ 
+ 
+ All the files for your site should be stored within the same folder.
+ +
+ 
+ 
+ 
+ + A web browser is software designed to access the internet. +
+This includes:
-Note: File names should not include spaces or special characters. File names ARE case sensitive.
-
- 
+
+ By the end of the class, you will have built a simple site using HTML and CSS on a topic of your choice. Here is one about rock climbing.
All the files for your site should be stored within the same folder.
+ +This includes:
+Note: File names should not include spaces or special characters. File names ARE case sensitive.
+
+ Let's create this now!
+The first thing on an HTML page is the doctype
+Tells the browser which version of the markup language the page is using
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
+ 4.01 Transitional//EN" "http://
+ www.w3.org/TR/html4/loose.dtd">
+ <!DOCTYPE html>
+ * The doctype is case-insensitive.
DOCtype, doctype, DocType and DoCtYpe are all valid.
After <doctype>, the page content must be contained between <html> tags.
+<!DOCTYPE html>
+<html>
+
+</html>
+ Head: + + The head contains the title of the page & meta information about the page. Meta information is not visible to the user, but has many purposes, like providing information to search engines. + +
+Body: + + The body contains the actual content of the page. Everything that is contained in the body is visible to the user. + +
+
+ <!DOCTYPE html>
+<html>
+
+</html>
+ <!DOCTYPE html>
+<html>
+ <head>
+ </head>
+</html>
+ <!DOCTYPE html>
+<html>
+ <head>
+ <title>Lots of Cats</title>
+ </head>
+</html>
+ <!DOCTYPE html>
+<html>
+ <head>
+ <title>Lots of Cats</title>
+ </head>
+ <body>
+ </body>
+</html>
+ <!DOCTYPE html>
+<html>
+ <head>
+ <title>Lots of Cats</title>
+ </head>
+ <body>
+ Welcome to my website all about cats!
+ </body>
+</html>
+ Your Content
@@ -203,12 +393,13 @@
Concrete example:
<p>A paragraph is your content</p>
+ - Putting your content into an HTML tag to make it look like a paragraph is structure
+
<p>My name is Shannon. I'm thirty-three and I love to program!</p>
- - Making the font of your paragraph green and 24px is presentation
- A paragraph is your content
+ - Making the font of your paragraph green and 24px is presentation
+
+ My name is Shannon. I'm thirty-three and I love to program!
<tagname>Stuff in the middle</tagname><tagname>content</tagname><p> This is a sample paragraph.</p><p>There's no place like home...</p><!DOCTYPE html>
+ <html>
+ <head>
+ <title>Lots of Cats</title>
+ </head>
+ <body>
+ <p>Welcome to my website all about cats!</p>
+ </body>
+ </html>
+ <div id="copyright">©Girl Develop It logo 2016</div>
<img src="my_picture.jpg" />
<a href="http://girldevelopit.com">Girl Develop It</a>
@@ -290,93 +495,11 @@ Anatomy of an HTML element
The first thing on an HTML page is the doctype, which tells the browser which version of the markup language the page is using.
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
-4.01 Transitional//EN" "http://
-www.w3.org/TR/html4/loose.dtd">
-<!DOCTYPE html>
-* The doctype is case-insensitive.
DOCtype, doctype, DocType and DoCtYpe are all valid.
After <doctype>, the page content must be contained between <html> tags.
-<!DOCTYPE html>
-<html>
-
-</html>
-Head: The head contains the title of the page & meta information about the page. Meta information is not visible to the user, but has many purposes, like providing information to search engines.
-Body: The body contains the actual content of the page. Everything that is contained in the body is visible to the user.
-
- <!DOCTYPE html>
-<html>
- <head>
- <title>Title of the page </title>
- </head>
- <body>
- The page content here.
- </body>
-</html>
-Let's get our web page set up with a doctype, head, title and body.
-Later we'll add some content.
-All elements "nest" inside one another
-Nesting is what happens when you put other containing tags inside other containing tags. For example, you would put the <p> inside of the <body> tags. The <p> is now nested inside the <body>
-
- Whichever element OPENS first CLOSES last
-Elements are 'nested' inside the <body> tag.
-<body>
- <p>A paragraph inside the body tag</p>
-</body>
-Paragraphs 'nested' inside list items.
-<ul>
- <li>
- <p>A paragraph inside a list item</p>
- </li>
-</ul>
-
Let's add some content to our site!
+Let's add 3 different headings with 1 or 2 short paragraphs of text below each heading
+All elements "nest" inside one another
+Nesting is what happens when you put other containing tags inside other containing tags. For example, you would put the <p> inside of the <body> tags. The <p> is now nested inside the <body>
+
+ Whichever element OPENS first CLOSES last
+Elements are 'nested' inside the <body> tag.
+<body>
+ <p>A paragraph inside the body tag</p>
+</body>Paragraphs 'nested' inside list items.
+<ul>
+ <li>
+ <p>A paragraph inside a list item</p>
+ </li>
+</ul><p>
-Here is a paragraph with <em>emphasized</em> text and <strong>important</strong> text.
+
+
+<p>
+ Here is a paragraph with <em>emphasized</em> text and <strong>important</strong> text.
</p>
-
+
Here is a paragraph with Emphasized text and Important text.
* Notice: em and strong are meant to indicate meaning through style. If you want to have italicized for appearance and not to communicate meaning, you should use CSS.
@@ -460,11 +617,10 @@ Formatted text
-
+
Let's Develop it!
- Let's add some content to our site!
- Add one of each level of heading with 1-2 short paragraphs of text below each heading.
- Use <strong> and <em> within a few paragraphs.
+ Let's add 2 more headings with 1 to 2 short paragraphs of text below each heading
+ Let's add <strong> and <em> within a few paragraphs
@@ -497,19 +653,19 @@ Link Attributes
- Relative vs. Absolute paths for links & images
+ Absolute vs. Relative paths for links & images
- - Relative
+ - Absolute
+
+ - Absolute paths refer to a specific location of a file, including the domain.
"http://www.girldevelopit.com/chapters/detroit"
+ - Typically used when pointing to a link that is not within your own domain.
+
+
+ - Relative
Relative paths change depending upon the page the link is on.
- - Links within the same directory need no path information.
"filename.jpg"
- - Subdirectories are listed without preceding slashes.
"img/filename.jpg"
-
-
- - Absolute
-
- - Absolute paths refer to a specific location of a file, including the domain.
"http://www.girldevelopit.com/chapters/detroit"
- - Typically used when pointing to a link that is not within your own domain.
+ - Links within the same directory need no path information.
"filename.jpg"
+ - Subdirectories are listed without preceding slashes.
"img/filename.jpg"
@@ -518,8 +674,12 @@ Relative vs. Absolute paths for links & images
Let's Develop It
- Let's add links to our site!
- Add links that open in the same window, a new window and link to an e-mail address.
+ Let's add 3 links to your website!
+
+ - One that open in the same window
+ - One that opens a new window
+ - One that links to an e-mail address
+
@@ -563,12 +723,19 @@ Element: Line Break
-
+
- Let's Develop It!
- Let's add some images and line breaks to our page.
- We can even turn our images into links.
-
+ Let's Develop It
+ Let's add 2 images!
+
+ - One with absolute path (remember the src attribute!)
+ - One with relative path (you'll have to download one!)
+
+
+ Let's add 3 line breaks to our website
+
+ BONUS: Use an image within an <a> tag
+
@@ -576,13 +743,13 @@ Element: Unordered and ordered lists
<ul>
-<li>List Item</li>
-<li>AnotherList Item</li>
+ <li>List Item</li>
+ <li>AnotherList Item</li>
</ul>
<ol>
-<li>List Item</li>
-<li>AnotherList Item</li>
+ <li>List Item</li>
+ <li>AnotherList Item</li>
</ol>
@@ -645,26 +812,34 @@ Tables
<table>
-<tr>
-<th>Head</th>
-<th>Head</th>
-</tr>
-<tr>
-<td>Data</td>
-<td>Data</td>
-</tr>
+ <tr>
+ <th>Name</th>
+ <th>Age</th>
+ </tr>
+ <tr>
+ <td>Samantha</td>
+ <td>28</td>
+ </tr>
+ <tr>
+ <td>Juan</td>
+ <td>32</td>
+ </tr>
</table>
- Head
- Head
+ Name
+ Age
+
+
+ Samantha
+ 28
- Data
- Data
+ Juan
+ 32
diff --git a/class2.html b/class2.html
index 7976e82e..e2cd8d1f 100644
--- a/class2.html
+++ b/class2.html
@@ -75,7 +75,7 @@ Quiz Part 2
Quiz Part 3
- What is it called when you have a 'tag' + 'content' + 'closing tag'?
+ What is it called when you have a 'opening tag' + 'content' + 'closing tag'?
Answer: An HTML Element
@@ -98,20 +98,22 @@ Anatomy of a website
CSS: What is it?
- CSS = Cascading Style Sheets
- CSS is a "style sheet language" that lets you style the elements on your page.
- CSS is works in conjunction with HTML, but is not HTML itself.
+ CSS = Cascading Style Sheets
+ CSS is a "style sheet language" that lets you style the elements on your page.
+ CSS is works in conjunction with HTML, but is not HTML itself.
CSS: What can it do?
All colored text, position, and size
- 
+
+
+
CSS: What does it look like?
- 
+ 
@@ -119,20 +121,15 @@ CSS: What does it look like?
The CSS Rule
-
- The CSS Rule
-selector {
- property: value;
-}
-
-
- - A block of CSS code is a rule.
- - The rule starts with a selector.
- - It has sets of properties and values.
- - A property-value pair is a declaration.
-
-
+
+ Example CSS
+ 
+
+
+ Common Errors
+ 
+
Connecting CSS to HTML
@@ -141,11 +138,12 @@ Connecting CSS to HTML
"Embedded"
"External"
+
Connecting CSS to HTML: Inline
-<p style="color:red">Some text.</p>
+<p style="color:red;">Some text.</p>
Uses the HTML attribute style.
Difficult to use in large projects
@@ -155,7 +153,7 @@ Connecting CSS to HTML: Inline
Connecting CSS to HTML: Embedded
-<head>
+<head>
<style type="text/css">
p {
color: blue;
@@ -184,11 +182,25 @@ Connecting CSS to HTML: Linked
+
+
+ Selector: Element
+p {
+ color: pink;
+}
+
+ Selects all paragraph elements.
+img {
+ width: 500px;
+}
+
+ Selects all image elements.
+
Let's develop it
- - In the same foolder you used last week, create a new file called style.css
+ - In the same folder you used last time, if you already have not done so, create a new file called style.css
- Add a link to the file in the head of your HTML file
- Add the CSS rule below to the CSS file:
@@ -198,32 +210,8 @@ Let's develop it
-
-
- CSS Syntax
- Declarations: Property and value of style you plan to use on HTML element.
- Declarations end with a semicolon
- Declaration groups are surrounded by curly brackets.
-selector {
- property: value;
- property: value;
- property: value;
-}
-
-
-
- Selector: Element
-p {
- property: value;
-}
-
- Selects all paragraph elements.
-img {
- property: value;
-}
-
- Selects all image elements.
+ Before we dive in, let's talk color!
@@ -231,31 +219,31 @@ Selector: Element
CSS Color Values
Your browser can accept colors in many different ways:
- - Color name (ex. red)
- - Hexadecimal value (ex. #FF0000)
- - RGB value (ex. rgb(255, 0, 0))
- - HSL value (ex. hsl(0, 100%, 100%))
+ - Color name (ex. red)
+ -
+ The 17 standard colors are:
+ aqua,
+ black,
+ blue,
+ fuchsia,
+ gray,
+ grey,
+ green,
+ lime,
+ maroon,
+ navy,
+ olive,
+ purple,
+ red,
+ silver,
+ teal,
+ white,
+ and yellow.
+
+ - Hexadecimal value (ex. #FF0000)
+ - RGB value (ex. rgb(255, 0, 0))
+ - HSL value (ex. hsl(0, 100%, 100%))
-
- The 17 standard colors are:
- aqua,
- black,
- blue,
- fuchsia,
- gray,
- grey,
- green,
- lime,
- maroon,
- navy,
- olive,
- purple,
- red,
- silver,
- teal,
- white,
- and yellow.
-
Property: Color
@@ -272,7 +260,7 @@ Property: Color
Property: Background-color
The background-color property changes the color of the background.
-p {
+body {
background-color: black;
background-color: #000000;
background-color: rgb(0,0,0);
@@ -280,14 +268,26 @@ Property: Background-color
-
+
- Let's develop it
+ How do you know what to call the property?
+
+ W3 Consortium came up with them!
+
+ https://www.w3schools.com/cssref/
+
+
+
+
+ Let's Develop It!
- - Add some rules to your css file
- - Change the font color and background color of different types of elements
- - Try selecting links, paragraphs, and lists
+ - Change the background color of your body
+ - Alter the color of your paragraphs
+ - Alter the width of your images
+ - *Alter the tranparency of your images
+
+ HINT: Google is your friend
@@ -297,7 +297,7 @@ Property Values
p{
color: white;
background-color: red;
- font-family: Arial, sans-serif;
+ font-family: "Arial", sans-serif;
}
@@ -354,10 +354,21 @@ Property: Fonts (shorthand)
Let's develop it
- Change the fonts of your page
- - Try changing the font sizes and styles for different elements
+ - Try changing the various font associated properties for different elements
+ p {
+ font-style: italic;
+ font-weight: bold;
+ font-size: 10px;
+ font-family: sans-serif;
+}
+
+
+ 
+ BREAK!
+
Selector: Position
@@ -387,7 +398,9 @@ Selector: Position
Means "find a strong tag inside a link inside a list item in an unordered list"
<ul>
- <li><a href="programs.html">Our <strong>program</strong></a></li>
+ <li>
+ <a href="programs.html">Our <strong>program</strong></a>
+ </li>
</ul>
@@ -397,6 +410,13 @@ Let's develop it
In your CSS file, try a position selector
Remember, you need to look for an element inside another element
+HTML
+<p>This is <em>important.</em></p>
+ CSS
+p em {
+ color: yellow;
+}
+
@@ -409,44 +429,78 @@ Reusing code
IDs vs. Classes
- ID -- Should only apply to one element on a webpage, i.e., a webpage only has one footer.
+
ID -- Should only apply to one element on a webpage, i.e., a webpage only has one footer.
The "#" is how you tell CSS "this is an id."
- Class -- Lots of elements can have the same class, i.e., There can be many warnings on one webpage.
+
Class -- Lots of elements can have the same class, i.e., There can be many warnings on one webpage.
The "." is how you tell CSS "this is a class name."
Selector: ID
+
+ The HTML
+<p id="footer">Copyright 2011</p>
+The CSS
#footer {
- property: value;
-}
-
- Selects all elements with an id of "footer".
+ color: blue;
+}
+This selects the element with an id of "footer"
+
+
+ Name it whatever you want!
+ No spaces and no starting with numbers, though!
+
+
+ The HTML
+<p id="blahblah">Copyright 2011</p>
+
+The CSS
-<p id="footer">Copyright 2011</p>
+#blahblah {
+ color: pink;
+}
- The associated HTML.
+Selects the element with an id of "blahblah"
Selector: Class
+ The HTML
+ <p class="warning">Run away!</p>
+
+The CSS
+
.warning {
color: red;
}
- Selects all elements with a class of "warning".
+ Selects all elements with a class of "warning".
-<p class="warning">Run away!</p>
+
+
+ Name it whatever you want!
+ No spaces and no starting with numbers, though!
+
+ The HTML
+ <p class="silly_sally">So Silly!</p>
+
+The CSS
+
+.silly_sally {
+ color: red;
+}
- The associated HTML.
+Selects all elements with a class of "silly_sally".
+
Let's develop it
- - Add an ID and class to a your HTML
- - Add CSS rules to target these elements
+ - Add an ID to one HTML element
+ - Add a class to 3 HTML elements
+ - Add CSS rules to target the ID and the class
@@ -454,27 +508,55 @@ Let's develop it
Cascading
Styles "cascade" down until changed
-p{
+ <p>Bobby</p>
+<p class="red">Samantha</p>
+<p class="red" id="special">Julio</p>
+p{
color:blue;
- font-family: 'Helvetica';
}
-.red {
+
+What color is Julio?
+.red {
color: red;
}
-#special {
- font-family: Arial;
+
+Now, what color is Julio?
+
+#special {
+ color: pink;
}
-<p>Paragraph</p>
-<p class ="red">Paragraph</p>
-<p class = "red" id ="special">Paragraph</p>
+Now, what color is Julio?
+
+
+
+ Cascading
+ Styles "cascade" down until changed
+ <p>Bobby</p>
+<p class="red">Samantha</p>
+<p class="red" id="special">Julio</p>
+p{
+ color:blue;
+ font-family: "Helvetica";
+}
+What font-family is Julio?
+.red {
+ color: red;
+}
+
+What font-family is Julio?
+#special {
+ font-family: "Arial";
+}
+
+What font-family is Julio?
Cascading priority
Your browser assigns different priorities to CSS depending on the type of selector.
- - Important! - Most Important
+ - !important - Most Important
- In line CSS
- ID
- Class
@@ -484,17 +566,39 @@ Cascading priority
Cascading priority
Your browser also assigns priority based on the specificity of the selection. More specific selectors have higher priority.
-.main .sale .clearance p{ //Most specific
+.main .bottom .footer p{/*Most specific*/
color: red;
}
-.header .title p{
+
+.bottom .footer p{
color: green;
}
-.footer p{ //Least specific
+
+.footer p{/*Least specific*/
+ color: blue;
+}
+
+What color will the paragraph be?
+
+
+ Cascading priority
+ Your browser also assigns priority based on the specificity of the selection. More specific selectors have higher priority.
+.main .bottom .footer p{
+ color: red;
+}
+
+.bottom .footer p{
+ color: green!important;
+}
+
+.footer p{
color: blue;
}
+What color will the paragraph be, now?
+
+
Cascading priority
The tie-breaker is position. Rules lower in the file overwrite rules higher in the file
@@ -504,10 +608,11 @@ Cascading priority
a{
background-color: teal;
}
-a{ //This rule wins
+a{
background-color: black;
}
+What will be background-color be?
@@ -528,6 +633,8 @@ CSS Properties
Questions?
+
+
diff --git a/class3.html b/class3.html
index 3e8d9e8d..fce9d470 100644
--- a/class3.html
+++ b/class3.html
@@ -56,48 +56,84 @@ Class 3
Quiz Part 1
- Within your <html></html> tags, which are the two nested tags required for a website?
-
-<html>
- <head>
- </head>
- <body>
- </body>
-</html>
-
-
-
+ What is the CSS cascade priority from highest to lowest (5 in total)
+
+ - !important - Most Important
+ - Inline CSS
+ - ID
+ - Class
+ - Element (tag name) - Least Important
+
Quiz Part 2
- What does a complete paragraph element look like?
-
-<p>This is a paragraph</p>
-
-
+ You want to use the CSS property "letter-spacing"
+
+ How do you find out what it is and how to use it?
+
+ Google it!
+
+ What do you type into your search?
Quiz Part 3
- What does a complete link (anchor) element look like? Hint: needs an 'href'.
+ What does the CSS property "letter-spacing" do and how do you use it?
+
+Defines the spacing between the characters
+
-<a href="http://google.com/">This goes to google</a>
+p {
+ letter-spacing: 4px;
+ font-weight: bold;
+ color: red;
+}
+
+
+ Some text without spacing!
+
+
+ Some text with 4px spacing!
+
+
+
+
+ Quiz Part 4
+ What does DRY stand for?
+
+ Don't Repeat Yourself!
+
+
+
+ LAYOUT!
+ Finally...
+
+ Stacking Blocks
+ 
+
+
+
+ Typing Intuition
+ 
+ When you type words on a document, what happens when you get to the right side?
+
- Inline vs Block
-
- So far, we have mostly seen "block" elements. They appear on the next line, like paragraphs.
- There are also "inline" elements. They appear on the same line that they are written on.
+ Block vs Inline
+
+ So far, we have mostly seen BLOCK elements. They appear on the next line, like paragraphs.
+
+ INLINE elements. They appear on the same line that they are written on.
-
- 
+
+ 
@@ -105,380 +141,576 @@ Inline vs Block
Block & Inline Elements
- - CSS divides HTML into two types: inline and block.
- - After block elements, browsers render a new line.
- - Inline elements: img, a, br, em, strong
- - Block elements: p, h1, ul, li, almost everything else
+ - CSS divides HTML into two types by default: block or inline
+ - Block elements: p, h1, ul, li, almost everything else
+ - Inline elements: img, a, br, em, strong
-
+
- Element: Div
-
- - Block level element. Each new div is rendered on a new line.
- - A division, or section of content within an HTML page.
- - Used to group elements to format them with CSS.
- - Apply IDs and Classes to divs to control their styles with CSS.
-
+ Multiple paragraphs example
+ <p style="background-color:cyan">First</p>
+<p style="background-color:pink">Second</p>
+<p style="background-color:yellow">Third</p>
+<p style="background-color:gray">Fourth</p>
+ 
+
- Div Examples
-<div>
- <p>Content<p>
- <p>Content<p>
-</div>
-
-<div id="header">
- <h1>Main Heading<h1>
-</div>
-
-<div class="sub-content">
- <p>Some more content<p>
-</div>
+ Multiple paragraphs example
+ <p style="background-color:cyan">First</p><p style="background-color:pink">Second</p><p style="background-color:yellow">Third</p><p style="background-color:gray">Fourth</p>
+
+ Notice the arrangments of elements in the HTML does NOT affect how elements are arranged on the website
+
+
+
+ Multiple images example
+
+ <img src="https://picsum.photos/100/100?image=3">
+<img src="https://picsum.photos/100/100?image=1">
+<img src="https://picsum.photos/100/100?image=0">
+<img src="https://picsum.photos/100/100?image=2">
+<img src="https://picsum.photos/100/100?image=4">
+<img src="https://picsum.photos/100/100?image=5">
+ 
- Grouping elements with div
-
- - The div tag is used everywhere to group elements together into sections.
- - You can wrap groups of elements in a div to style them differently.
-
+ Mixing block & inline
+ 
- Grouping elements with div, cont.
-.align-right{
- text-align:right;
- color: purple;
- font-weight: bold;
+ Changing the default
+ The CSS propery "display" determines how the elements will be arranged
+
+img {
+ display: block;
}
-<div class="align-right">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
- <p>Sed do eiusmod tempor incididunt ut labore et dolore.</p>
-</div>
-<p>Magna aliqua. Ut enim ad minim veniam.</p>
-<p>Quis nostrud exercitation ullamco.</p>
-
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit
- Sed do eiusmod tempor incididunt ut labore et dolore.
-
-
- Magna aliqua. Ut enim ad minim veniam.
- Quis nostrud exercitation ullamco.
-
+
+
+ 
+
- HTML5
- HTML5 offers new elements for better document structure and semantics
- Some of the most commonly used new tags include:
-<header></header>
-<nav></nav>
-<article></article>
-<section></section>
-<main></main>
-<footer></footer>
-
+ Let's develop it!
+
+ - Add 3 images to your HTML file with a unique class (they can be the same image)
+ - Observe how those images are arranged on the website
+ - Then, in your CSS file, give that class
display: block;
+
+
- A full list can be found here.
+
+ Whew!
+ Now let's talk about one of the most used HTML elements...
+
+
+
+ Element: Div
+
+ - Block level element
+ - A division of content within an HTML page
+ - Used to group elements to format them with CSS
+ - Apply IDs and Classes to divs to control their styles with CSS
+
- Let's Develop It
- Let's create a site using divs to separate content into different sections on our page.
- Create a header, content area, sidebar, and a footer.
-
-
-
- Sample Code
- A page divided into divs might look like this:
-<!doctype html>
-<html>
- <head>
- <title>Sample Page</title>
- </head>
- <body>
- <div id="header">
- <h1>My Page Title</h1>
- </div>
- <div id="content">
- <p>The main content</p>
- </div>
- <div id="sidebar">
- <p>Some stuff in a sidebar</p>
- </div>
- <div id="footer">
- <p>Copyright me</p>
- </div>
- </body>
-</html>
+ Meh🤔
+ <h1>Charline's Website!</h1>
+<h2>About Me</h2>
+<p>My name is Charline, and I'm awesome!</p>
+<h2>Blog 1</h2>
+<a href="blog1.html">Check out my first blog!</a>
+<h4>Contact</h4>
+<p>I can be reached at (123) 456-7890</p>
-
- Sample Code: HTML5
- A page divided using HTML 5 elements might look like this:
-<!doctype html>
-<html>
- <head>
- <title>Sample Page</title>
- </head>
- <body>
- <header>
- <h1>My Page Title</h1>
- </header>
- <main>
- <p>The main content</p>
- </main>
- <aside>
- <p>Some stuff in a sidebar</p>
- </aside>
- <footer>
- <p>Copyright me</p>
- </footer>
- </body>
-</html>
+ Better organized! 🎉
+ <div>
+ <h1>Charline's Website!</h1>
+
+ <div>
+ <h2>About Me</h2>
+ <p>My name is Charline, and I'm awesome!</p>
+ </div>
+
+ <div>
+ <h2>Blog 1</h2>
+ <a href="blog1.html">Check out my first blog!</a>
+ </div>
+
+ <div>
+ <h4>Contact</h4>
+ <p>I can be reached at (123) 456-7890</p>
+ </div>
+</div>
-
- Element: Span
+ Grouping elements with div
- - Inline element. Each new span is rendered next to each other & only wraps when it reaches the edge of the containing element.
- - Can be used to apply styles to text inline so as not to break the flow of content.
+ - The div tag is used everywhere to group elements together into sections.
+ - You can wrap groups of elements in a div to style them
-
- Span
- Span is used to apply a specific style inline
-.highlight{
- color:teal;
-}
-
-<p>Paragraph with <span class="highlight">teal</span> text.</p>
+
+ Grouping elements with <div>
+
+ <div>
+ <h1>Charline's Website!</h1>
+
+ <div>
+ <h2>About Me</h2>
+ <p>My name is Charline, and I'm awesome!</p>
+ </div>
+
+ <div>
+ <h2>Blog 1</h2>
+ <a href="blog1.html">Check out my first blog!</a>
+ </div>
+
+ <div>
+ <h4>Contact</h4>
+ <p>I can be reached at (123) 456-7890</p>
+ </div>
+</div>
- Paragraph with teal text.
-
-
-
- Let's Develop It
- Let's add some spans to our content to help highlight some text.
+
+
+ 
+
+
+ Using a class to style multiple <div> elements 😎
+ <div>
+ <h1 id="myTitle">Charline's Website!</h1>
+
+ <div class="mySection">
+ <h2>About Me</h2>
+ <p>My name is Charline, and I'm awesome!</p>
+ </div>
+
+ <div class="mySection">
+ <h2>Blog 1</h2>
+ <a href="blog1.html">Check out my first blog!</a>
+ </div>
-
+ <div class="mySection">
+ <h4>Contact</h4>
+ <p>I can be reached at (123) 456-7890</p>
+ </div>
+</div>
+
+
- Pseudo-classess
+ Styling with <div>
- Changing the format of a link when you hover over it is accomplished by using pseudo-classes.
- CSS pseudo-classes are used to add special effects to some selectors.
+ 
-
- Syntax:
-selector:pseudo-class{
- property:value;
+ body{
+ text-align:center;
+ background-color: gray;
}
-
- Example:
-a:link{
- text-decoration: none;
+
+#myTitle{
+ font-weight: bold;
+ color: #C86FC9;
+ text-shadow: 1px 2px #D7C0D0;
+}
+
+.mySection{
+ border: 2px solid #8E518D;
+ border-radius: 15px;
+ margin-bottom: 4px;
+}
+
+.mySection p{
+ color: #F79AD3;
}
+
+.mySection h2, .mySection h4{
+ color:#F7C7DB;
+}
-
-
- Pseudo-classes
-a:link {color:#FF0000;} /* unvisited link */
-a:visited {color:#00FF00;} /* visited link */
-a:hover, a:focus {color:#FF00FF;} /* mouse over or select with keyboard*/
-a:active {color:#0000FF;} /* selected link */
+ Let's develop it!
+
+ - In your HTML, add 3 or more <div>s to contain related content
+ - Give these "section" divs the same class and style them
+
+
+ <div>
+ <h1 id="myTitle">Charline's Website!</h1>
+
+ <div class="mySection">
+ <h2>About Me</h2>
+ <p>My name is Charline, and I'm awesome!</p>
+ </div>
+
+ <div class="mySection">
+ <h2>Blog 1</h2>
+ <a href="blog1.html">Check out my first blog!</a>
+ </div>
+
+ <div class="mySection">
+ <h4>Contact</h4>
+ <p>I can be reached at (123) 456-7890</p>
+ </div>
+</div>
+
+
+
+ body{
+ text-align:center;
+ background-color: gray;
+}
+#myTitle{
+ font-weight: bold;
+ color: #C86FC9;
+ text-shadow: 1px 2px #D7C0D0;
+}
+.mySection{
+ border: 2px solid #8E518D;
+ border-radius: 15px;
+ margin-bottom: 4px;
+}
+.mySection p{
+ color: #F79AD3;
+}
+.mySection h2, .mySection h4{
+ color:#F7C7DB;
+}
- a:hover MUST come after a:link and a:visited in the CSS definition to be effective!
- a:active MUST come after a:hover in the CSS definition to be effective!
-
+
- Let's Develop It
- Add pseudo classes to your links
+ An aside...
+ Code Readability
-
- The Box Model
- 
- Photo credit: dchallender cc
+
"Spaghetti" code
+ Quick! You have 5 seconds to spot the error!
+ <h1>Janice's Website</h1>
+<h4>My Interests</h4><p>I love:</p><ul><li>writing</li><li>cooking</li><li>driving</li><li>smooth jazz</li>
+
+
+ 
+
- Box Model
- 
+ Indents = Readability!
+ Whitespace = Readability!
+ Same code - you have 5 seconds to spot the error!
+ <h1>Janice's Website</h1>
+
+<h4>My Interests</h4>
+
+<p>I love:</p>
+<ul>
+ <li>writing</li>
+ <li>cooking</li>
+ <li>driving</li>
+ <li>smooth jazz</li>
+
-
- Padding
- Space between the border and the content
- 
+ Why bother making readable code?
+
+ - Keeps code organized and clean
+ - Keeping track of nested elements
+ - Spot errors quickly!
+ - Allows others to read your code quickly and easily 🙏🏽
+
-
+
- Padding
- Notice that the padding adds to the total width of the box.
-
+ How do I "unspaghetti" my code?
+ Sublime's "Reindent"
+ Select all text (Ctrl + A), then Edit > Line > Reindent
+ HTLM & CSS
- Padding
- 15 pixels on all sides
-padding: 15px;
- 10 pixels on top only
-padding-top: 10px;
- 10 on top, 5 on right, 3 on bottom, 5 on left
-padding: 10px 5px 3px 5px;
+ Semantic HTML5
+ HTML5 offers new elements for better document structure and semantics
+ Some of the most commonly used new tags include:
+<header> = Starting content (top)
+<nav> = Navigation elements
+<article>= Information Content
+<section>= Divides site components
+<main> = Main content
+<aside> = Supplemental info
+<footer> = End content (bottom)
+
+
+ A full list can be found here.
- Padding
- Four values
-
padding: top right bottom left;
- Two values
-padding: top/bottom right/left;
- One value
-padding: all;
-
+
+ Let's Develop It
+
+ - Add semantic HTML tags where appropriate
+ - If you don't have header, nav, or footer content - consider adding them!
+ - Keep your CSS in mind!
+
+
+<header> = Starting content (top)
+<nav> = Navigation elements
+<article>= Information Content
+<section>= Divides site components
+<main> = Main content
+<aside> = Supplemental info
+<footer> = End content (bottom)
+
+
+
+ Let's aim for cleaner code!
+
+
+
+
- Padding
-padding: 10px 20px 30px 40px;
- 
+ Sample Code
+
+ <div id="header">
+ <h1>My Page Title</h1>
+</div>
+<div id="content">
+ <p>The main content</p>
+</div>
+<div id="sidebar">
+ <p>Some stuff in a sidebar</p>
+</div>
+<div id="footer">
+ <p>Copyright me</p>
+</div>
+
+
+
+ <header>
+ <h1>My Page Title</h1>
+</header>
+<main>
+ <p>The main content</p>
+</main>
+<aside>
+ <p>Some stuff in a sidebar</p>
+</aside>
+<footer>
+ <p>Copyright me</p>
+</footer>
+
+
+
-
+
+
- Border
- The edge around the box.
- 
+ The Box Model
+
+ Photo credit: dchallender cc
- Border
- Borders are specified as "thickness, style, color."
- A solid red border
-border: 1px solid #ff0000;
- A thick dotted black top border
-border-top: 4px dotted #000000;
- Two different border styles
-border-top: 1px solid #ff0000;
-border-bottom: 4px dotted #000000;
-
+
+ Everything is a box...
+ 
+
+
+
+ Everything is a box...
+ 
+
+
+ Everything is a box...
+ 
+
+
+ Everything is a box...
+ 
+
+
+ Everything is a box...
+ 
+
+
+ Everything is a box...
+ 
+
+
+ Everything is a box...
+ 
+
+
+ Everything is a box...
+ 
+
+
+
+ Box Model
+ 
+
- Border - Other Properties
-border-width: 10px;
-border-style: dashed;
-border-color: #666666;
+ Border
+ The edge around the box.
+ 
+
+
+
+ Border
+ Borders are specified as "thickness (width), style, and color"
+ border-width: 3px
+border-style: dotted;
+border-color: red;
- You can specify each property separately, or all three together.
-
+ "border" property consolidates all 3 aspects into 1
+ border: 3px solid red;
+
+
+
+
+ Padding
+ Space between the border and the content
+
+
+
+
+ Padding
+
+ No padding
+ padding: 0;
+
+
+ 10 pixels on all sides
+ padding: 10px;
+
+
+ 20 pixels on all sides
+ padding: 20px;
+
+ Notice that the padding adds to the total width of the box.
+
Margin
The transparent area around the box that separates it from other elements.
- 
+
-
Margin
- 15 pixels on all sides
-margin: 15px;
- 10 on top, 5 on right, 3 on bottom, 5 on left
-margin: 10px 5px 3px 5px;
- 10 pixels on top
-margin-top: 10px;
+ Threshold other elements cannot pass
+ 
- Auto Margin
- If a margin is set to auto on a box that has width, it will take up as much space as possible.
- CENTERED
-margin: auto;
-width: 300px;
-
- FLUSH-RIGHT
-margin-left: auto;
-margin-right: 5px;
-width: 300px;
-
+ Margin
+ No Margin
+
+ Left Element
+
+ Main Element
+
+ Right Element
+
+ 10px Margin
+
+ Left Element
+
+ Main Element
+
+ Right Element
+
+ 30px Margin
+
+ Left Element
+
+ Main Element
+
+ Right Element
+
- Wrappers
- Wrappers are a good way to center content if the screen width is wider than your content.
-div.wrapper{
- width: 100%;
- max-width: 1400px;
- margin: 0 auto;
-}
-
+ Top, bottom, left, right
+ Padding, Border, and Margin can all be further specified into a top, bottom, left, and right
+
-
- Let's Develop it!
- Let's add some padding, borders, and margins to our divs.
- Let's center our entire document in the browser.
+ Top, bottom, left, right
+ padding-left: 40px;
+padding-top: 5px;
+ border-right: 5px dotted red;
+border-left: 3px dashed green;
-
-
- Property: Width
- Sets the width of an element.
- Does not include padding or borders. Remember to add these to the width.
-div#sidebar{
- width: 31%;
- padding: 1%;
- border: none; //Total width is 33%
-}
-
+ Defaults
+ By default, some elements (like headers and paragraphs) come with margins and or padding already.
-
-
+
- Property: Height
- Sets the height of an element.
- Does not include padding or borders. Remember to add these to the height.
-p.alert{
- height: 50px;
- padding: 5px;
- border: 2px solid red; //Total height is 64px
-}
-
+ Let's Develop it!
+
+ - Add padding to paragraphs and headers to better space out content
+ - Add borders to all images
+ - Add borders, padding, and margins to divs to space out and distinguish those groupings
+
+
+ "margin:auto;" = MAGIC
+ If an block element has a set width & a margin set to "auto", it will be centered
+
+ JUST WIDTH 😥
+
+ width: 40%;
+
+ CENTERED 😎
+
+ width: 40%;
+margin: auto;
+
+
Let's develop it!
- Add a width & height to our divs.
- Use IDs to target each div with CSS
+
+ - Surround your entire website's content (everything in the <body>) with a <div>
+ - Give this <div> an ID
+
- Use CSS to target the ID and give the div 80% width and "margin:auto;"
+
Questions?
+
diff --git a/class4.html b/class4.html
index 92585167..40fb885f 100644
--- a/class4.html
+++ b/class4.html
@@ -53,248 +53,635 @@ Intro to HTML/CSS
Class 4
+
+ Agenda
+
+ - Review key concepts
+ - CSS Property - Position
+ - Wireframing
+ - Let's Develop It!
+ - Exit Survey
+
+
+
+
+
+ Review Quiz
+
+
+
+ Question 1
+ What are the 4 parts of the box model?
+
+ - Content
+ - Padding
+ - Border
+ - Margin
+
+
+
+
+ Question 2
+ You want your link to open in a new tab. What do you do?
+ Set "target" attribute to "_blank"
+ <a href="#" target="_blank">link</a>
+
+
+
+ Question 3
+ Spot the 3 CSS errors
+ img [
+ display: block;
+]
+
+.card p{font-size: 3em color: red}
+
+h1,2,3,4{
+ padding: 0;
+ margin: 0;
+}
+
+
+
+ Question 3
+ Spot the 3 CSS errors
+
+ Error
+ img [
+ display: block;
+]
+
+.card p{font-size: 3em color: red}
+
+h1,2,3,4{
+ padding: 0;
+ margin: 0;
+}
+
+
+
+ Correct
+ img {
+ display: block;
+}
+
+.card p{
+ font-size: 3em;
+ color: red;
+}
+
+h1,h2,h3,h4{
+ padding: 0;
+ margin: 0;
+}
+
+
+
+
+
+
+ Key Concept Review
+
+ - IDs vs. Classes
+ - <div> vs. semantic HTML elements
+
+
+
+
+ IDs
+ What is an ID?
+
+ - An ID is a unique identifier you can give to ONE HTML element
+ - Element IDs are unique and cannot be shared
+ - Useful for directly selecting a key element
+
+
+
+
+ HTML
+ <div>
+ <div id="myTitle">
+ <h1>Bob's Website</h1>
+ <p>Welcome to my website!</p>
+ </div>
+ ...
+</div>
+
+
+ CSS
+ #myTitle{
+ font-weight: bold;
+ font-size: 40px;
+}
+
+
+
+
+ Classes
+ What is a Class?
+
+ - An Class is an identifier you can give to MULTIPLE HTML element
+ - Element Classes are NOT unique and can be shared
+ - Superior way for styling multiple elements (DRY)
+ - Use a Class when muliple elements are similar in purpose or function
+
+
+
+
+ Classes
+ HTML
+ <nav>
+ <a id="special_link" href="#">Bob's Website</a>
+ <a class="nav_link" href="#">Mary's Website</a>
+ <a class="nav_link" href="#">John's Website</a>
+ <a class="nav_link" href="#">Amy's Website</a>
+</nav>
+
+
+ CSS
+ #special_link{
+ color: red;
+ font-weight: bold;
+}
+.nav_link{
+ font-family: monospace;
+ color: purple;
+}
+
+
+ <div> vs. semantic HTML elements
+
+
+ <div>
+
+ - General purpose "wrapper" for related content
+ - The tag name "div" conveys no information about the purpose of the elements within
+
+
+
+ Semantic HTML elements
+
+ - Intentional "wrapper" for related content
+ - Tag name conveys purpose elements within
+
+<header> = Starting content (top)
+<nav> = Navigation elements
+<article>= Information Content
+<section>= Divides site components
+<main> = Main content
+<aside> = Supplemental info
+<footer> = End content (bottom)
+
+
+
+
+
+ When in doubt...just use a div!
+
+
+
+ CSS property - position
+
+
Static Positioning
- - HTML elements are positioned static by default.
- - Static elements are positioned in the normal flow of the page
- - Static elements ignore top, bottom, right or left property specifications.
+ - HTML elements are positioned static by default.
+ - Follows the normal flow of the page
Static Positioning
- In normal flow, inline boxes flow from left to right, wrapping to next line when needed.
-<img src="img/cookie1.png"/>
+ In normal flow, inline elements flow from left to right, wrapping to next line when needed.
+<img src="img/cookie1.png"/>
<img src="img/cookie2.png"/>
<img src="img/cookie3.png"/>
...
<img src="img/cookie2.png"/>
<img src="img/cookie3.png"/>
- 
- 
- 
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Static Positioning
- In normal flow, block boxes flow from top to bottom, making a new line after every box.
-<p>Greetings</p>
+ In normal flow, block elements flow from top to bottom, making a new line after every box.
+<p>Greetings</p>
<p>Hello</p>
<p>Hi there!</p>
- Greetings
- Hello
- Hi there!
-
+
+ Greetings
+ Hello
+ Hi there!
+
+
- Relative Positioning
+ Relative Positioning (inline)
- - Takes the element out of the normal flow, allowing it to be moved to the top, left, right or bottom.
- - Does not affect the elements surrounding it.
- - Makes an element a "positioning context" in which to position other elements relative to it.
- - Relative positioning and absolute positioning are used together.
+ - Takes the element out of the normal flow
+ - Does not affect the elements surrounding it - Other elements act as if it's still there
+ - Can be shifted top, left, right or bottom
+ - *If element contains other elements, it now serves as a "positioning context" for them
Relative Positioning
- The "relative" value will still put the element in the normal flow, but then offset it according to top/left/right/bottom properties.
-.relative{
+ Normal Flow
+
+
+
+
+
+
+
+#sock{
position: relative;
left: 80px;
top: 20px;
- height: 100px;
- background-color: yellow;
}
-
-
- Hello, hi!
-
-
+
+
+
+
+
+
+
+ The "relative" position will offset the element from its normal flow according to top/left/right/bottom properties.
+
+
+ Relative Positioning (block)
+
+ First Text
+ Second Text
+ Third Text
+
+#second{
+ position: relative;
+ bottom: 500px;
+ right: 400px;
+}
+
+
+ First Text
+ Second Text
+ Third Text
+
+
+ Let's develop it!
+ Pick ONE image on your website to offset
+ Give it a relative position and offset it so that it appears in the upper left corner of the website
+#picked-image{
+ position: relative;
+ bottom: 500px; /*your values will be different*/
+ right: 400px; /*your values will be different*/
+}
+
Absolute Positioning
- - Positions element outside of the normal flow.
- - An absolutely positioned element is offset from its container block, positioned relative.
- - Its container block is the first element that has a position other than static.
- - If no such element is found, the container block is <html>.
- - Other elements act as if it's not there.
- - Determined by its offset values in the properties top, bottom, right and left.
+ - Takes the element out of the normal flow
+ - Does not affect the elements surrounding it - Other elements act as if it's NOT there
+ - Gets position around the WINDOW
+ - Can be shifted using the top, left, right or bottom properties
-
+
Absolute Positioning
- 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).
-.top{
- position: absolute;
- top: -40px;
- right: 10px;
- background-color: yellow
-}
-.bottom{
+ The "absolute" position will put the element in relation to the WINDOW
+
+
+
+
+
+
+
+#sock{
position: absolute;
- bottom: -40px;
- left:60px;
- background-color: green
}
+
+
+
+
+
+
+
+
+
+ Absolute Positioning
+ The "absolute" position will put the element in relation to the WINDOW
-
- Up here
-
-
- Down here
-
+
+
+
+
+
+#sock{
+ position: absolute;
+ top: 0;
+ left: 100px;
+}
+
+
+
+
+
+
+
+
+
+ Let's develop it!
+ Pick ANOTHER image on your website to offset
+ Give it an absolute position and offset it so that it appears in the upper right corner of the website
+ #picked-image{
+ position: absolute;
+ top: ?;
+ right: ?;
+ }
+ HINT: Think about what bottom: 0; does...what about left: 0; ?
+
+
Example: Absolute Positioning
- Here's an example of an image with a caption absolutely positioned over top of it.
- The containing div has a position of relative, and the caption has a position of absolute.
+ Here's an example of an image with a caption absolutely positioned over top of it.
+ The containing div has a position of relative, and the caption has a position of absolute.
-
-
-
- Z-index
- Sometimes elements overlap. You can change the order of overlapping with z-index. The element with highest z-index goes on top.
-.bottom{
- position: absolute;
- bottom: 10px;
- left:60px;
- background-color: yellow;
-}
-.top{
- position: absolute;
- bottom: 15px;
- left:60px;
- background-color: green;
- z-index: 2;
-}
-
- Bottom
- Top
+ This occurs because the container element is out of the normal flow (position: relative;) and now serves as a "positioning context" for internal elements (the text)
Let's Develop it!
- Let's add some positioning.
+ Let's create an image with some text overlay!
Let's create a div that contains an image and a caption, and position the caption absolutely overtop the image.
+ Remember to give the container div an position: relative;
Float
- - "Floating" an element takes it in the normal flow, as far to the left or right of it's containing element as possible.
- - Any other elements, such as paragraphs or lists, will wrap around the floated element.
- - Always specify a width when floating an element, otherwise the element is likely to take up the whole page and not appear floated.
- - You can specify a) whether an element is floated or not, and b) which side it floats on.
+ - "Floating" an element takes it OUT of the normal flow, but keeps it inside of its containing element
+ - A floated element is pushed as far to one side of it's containing element as possible.
+ - Only 2 options!
float: left; or float: right;
+ - Other elements will WRAP around the floated element
+ - HINT: Specify a width! otherwise the element might take up the whole width and not appear floated
Float: Example
- Below a <blockquote> is floated to the left, allowing text to wrap around it on the right
+ This blockquote is floated to the left, allowing text to wrap around it on the right
- Float
-.float{
+ Using Float
+ <div>
+ <p class="float-left">Check out my blog!</p>
+ <p>Cats are amazing creatures and we could really learn a lot from them</p>
+</div>
+
+
+ Check out my blog!
+ Cats are amazing creatures and we could really learn a lot from them
+
+.float-left{
float:left;
- width:200px;
- background:yellow;
}
-
- Hi, I'm a yellow box with black text.
- I like to hang out on the left side.
-
- Not floating element
- Not floating element
- Not floating element with wrapping Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+ Check out my blog!
+ Cats are amazing creatures and we could really learn a lot from them
+
- Placing elements side by side
- If you want two block level elements to be side by side, you need to float both elements. One left, and one right.
-
-
- width: 300px;
- float: left;
-
-
- width: 400px;
- float: right;
-
-
+ Using Float
+ <div>
+ <p class="float-left">Check out my blog! Here's a bit more text to show you something!</p>
+ <p>Cats are amazing creatures and we could really learn a lot from them</p>
+</div>
+
+
+ Check out my blog! Here's a bit more text to show you something!
+ Cats are amazing creatures and we could really learn a lot from them
+
+.float-left{
+ float:left;
+}
+
+
+ Check out my blog! Here's a bit more text to show you something!
+ Cats are amazing creatures and we could really learn a lot from them
+
-
- Clear
-
- - Clearing tells the element on which side (right, left, both) other elements cannot appear.
- - If you had an image floated left, and you did not want the paragraph to appear next to it, you would add clear: left; to the paragraph.
- - Clearing both sides makes sure floats don’t flow past the clear element.
-
-clear: right;
-clear: left;
-clear: both;
+ Using Float
+.float-left{
+ float:left;
+ width: 30%;
+}
+
+ Check out my blog! Here's a bit more text to show you something!
+ Cats are amazing creatures and we could really learn a lot from them
+
- Clear
-.float{
- float:left;
- width:50px;
- background:yellow;
-}
-.clear-left{
- clear:left
-}
+ Using Float w/images
+
+ 
+ Cats are amazing creatures and we could really learn a lot from them
+
+
+
+
+ Float has a problem!
+ Recall, floating an element changes the normal flow, so...
+<div>
+ <div>
+ <p class="float-left">Check out my blog! Here's a bit more text to show you something!</p>
+ <p>Cats are amazing creatures and we could really learn a lot from them</p>
+ </div>
+
+ <p>Let's talk about dogs now!</p>
+</div>
-
- hi
- hi
- hi
-
- Not floating element
- Not floating element
- Non-floating element with a class of .clear-left
+
+
+
+ Check out my blog! Here's a bit more text to show you something!
+ Cats are amazing creatures and we could really learn a lot from them
+
+
+ Let's talk about dogs now!
+
-
+
+
+ CSS Property - clear
+
+ - Clearing tells that element on which side (right, left, both) other elements cannot appear
+ - Clearing both sides makes sure floats don’t flow past that element
+ - Very common dev trick called "clearfix" => use an empty div that clears both sides after a floating section to return normal flow
+
+ .clearfix{
+ clear: both;
+}
+
+
+
+ Float w/clearfix
+<div>
+ <div>
+ <p class="float-left">Check out my blog! Here's a bit more text to show you something!</p>
+ <p>Cats are amazing creatures and we could really learn a lot from them</p>
+ </div>
+
+ <div class="clearfix"></div>
+
+ <p>Let's talk about dogs now!</p>
+</div>
+
+
+
+
+ Check out my blog! Here's a bit more text to show you something!
+ Cats are amazing creatures and we could really learn a lot from them
+
+
+
+
+ Let's talk about dogs now!
+
+
+
+
Let's Develop It
- Let's float our side bar and content areas.
+ Create a div and put an image and some text in it
+ Float the image to have the text wrap around it
+ Be sure to clearfix afterward!
Questions?
+
+
+ Break!
+
+
+
+ Wireframe your site!
+
+
+ What's a wireframe?
+ A visual guide that represents the layout of a website
+ 
+
+
+
+ Why bother?
+
+ - Web design starts with planning!
+ - Measure twice, cut once
+ - Box model*
+
+
+
+
+
+ Let's develop it
+ Creating your wireframe
+
+
+ - Pick a topic you like for your website
+ - Using pencil and paper, draw out the wireframe for your website
+ - Keep it simple!
+ - When done, call instructor/TA over to brainstorm implementation
+ - 10 min activity!
+
+
+
+ 
+
+
+
+
+
+ Let's Develop It!
+ Creating your website
+
+ - Using your wireframe code your website!
+ - You can start a new project folder or continue using the one you have
+ - Keep your code clean and organized
+
+
+
+ HTML
+ <div id="sidebar">
+ <ul>
+ <li>First item</li>
+ <li>Second item</li>
+ <li>Third item</li>
+ </ul>
+</div>
+
+
+ CSS
+ body{
+ margin: 0;
+}
+
+p, a {
+ color: red;
+ font-size: 16px;
+}
+
+
+ Activity ends 5 min before end of class!
+
+
+
+ Exit Survey
+
+
+ Fin
+
diff --git a/css/custom.css b/css/custom.css
index 1617e215..cb74426b 100644
--- a/css/custom.css
+++ b/css/custom.css
@@ -60,3 +60,107 @@ div.left-align{
position: static;
width: auto;
}
+
+.flex-row{
+ display: flex;
+}
+
+.flex-column-even{
+ height: 100%;
+ display: flex!important;
+ flex-direction: column;
+ justify-content: space-evenly;
+}
+
+.flex-column-even pre{
+ width:100%!important;
+}
+
+.container{
+ margin: 10px!important;
+}
+
+.keyword{
+ color:#4d4d4c!important;
+}
+
+.reveal pre code{
+ max-height: none;
+}
+
+.reveal pre {
+ overflow: auto;
+}
+
+.reveal section img{
+ max-width: 450px;
+}
+
+.smaller{
+ font-size: .75em!important;
+}
+
+.pm-0{
+ padding:0!important;
+ margin:0!important;
+}
+
+.margin-example-container{
+ display:flex;
+ justify-content: center;
+ margin-bottom: 20px!important;
+}
+
+.margin-example{
+ display:inline!important;
+ width:max-content!important;
+}
+
+
+.main-example,
+.block-example{
+ padding: 10px!important;
+ text-align: center;
+ width: 200px;
+}
+
+.main-example{
+ background-color: pink;
+ color: darkblue;
+}
+
+.block-example{
+ background-color: black;
+ color: lightblue;
+}
+
+.margin2-example-container{
+ margin-bottom: 20px!important;
+}
+
+code.plaintext .attribute,
+code.plaintext .number,
+code.plaintext .tag,
+code.plaintext .value,
+code.plaintext .class
+{
+ color: #4d4d4c!important;
+}
+
+.special-img{
+ animation: pulse 1s infinite;
+}
+
+@keyframes pulse{
+ 0%{
+ transform: scale(1);
+ }
+
+ 50%{
+ transform: scale(1.05);
+ }
+
+ 100%{
+ transform: scale(1);
+ }
+}
\ No newline at end of file
diff --git a/img/berner.jpg b/img/berner.jpg
new file mode 100644
index 00000000..8fc7ef33
Binary files /dev/null and b/img/berner.jpg differ
diff --git a/img/block_img.PNG b/img/block_img.PNG
new file mode 100644
index 00000000..2a3272fd
Binary files /dev/null and b/img/block_img.PNG differ
diff --git a/img/borders.gif b/img/borders.gif
new file mode 100644
index 00000000..20c8488b
Binary files /dev/null and b/img/borders.gif differ
diff --git a/img/box-model-border.png b/img/box-model-border.png
deleted file mode 100644
index 9f0f9a0b..00000000
Binary files a/img/box-model-border.png and /dev/null differ
diff --git a/img/box-model-margin.png b/img/box-model-margin.png
deleted file mode 100644
index 5cf5a238..00000000
Binary files a/img/box-model-margin.png and /dev/null differ
diff --git a/img/box-model-padding.png b/img/box-model-padding.png
deleted file mode 100644
index f02585b3..00000000
Binary files a/img/box-model-padding.png and /dev/null differ
diff --git a/img/box-model-padding2.png b/img/box-model-padding2.png
deleted file mode 100644
index fd5b3b80..00000000
Binary files a/img/box-model-padding2.png and /dev/null differ
diff --git a/img/box-model.gif b/img/box-model.gif
new file mode 100644
index 00000000..ca021047
Binary files /dev/null and b/img/box-model.gif differ
diff --git a/img/box_ex1.png b/img/box_ex1.png
new file mode 100644
index 00000000..959c8540
Binary files /dev/null and b/img/box_ex1.png differ
diff --git a/img/box_ex1_1.png b/img/box_ex1_1.png
new file mode 100644
index 00000000..a442be9d
Binary files /dev/null and b/img/box_ex1_1.png differ
diff --git a/img/box_ex1_2.png b/img/box_ex1_2.png
new file mode 100644
index 00000000..2f59c7fb
Binary files /dev/null and b/img/box_ex1_2.png differ
diff --git a/img/box_ex1_3.png b/img/box_ex1_3.png
new file mode 100644
index 00000000..285621ae
Binary files /dev/null and b/img/box_ex1_3.png differ
diff --git a/img/box_ex1_4.png b/img/box_ex1_4.png
new file mode 100644
index 00000000..9a1c77b9
Binary files /dev/null and b/img/box_ex1_4.png differ
diff --git a/img/box_ex1_5.png b/img/box_ex1_5.png
new file mode 100644
index 00000000..d89d03e1
Binary files /dev/null and b/img/box_ex1_5.png differ
diff --git a/img/box_ex1_6.png b/img/box_ex1_6.png
new file mode 100644
index 00000000..7bd281c1
Binary files /dev/null and b/img/box_ex1_6.png differ
diff --git a/img/box_ex1_7.png b/img/box_ex1_7.png
new file mode 100644
index 00000000..4b222fe9
Binary files /dev/null and b/img/box_ex1_7.png differ
diff --git a/img/c_site.PNG b/img/c_site.PNG
new file mode 100644
index 00000000..dcfc3d7d
Binary files /dev/null and b/img/c_site.PNG differ
diff --git a/img/c_site2.PNG b/img/c_site2.PNG
new file mode 100644
index 00000000..609068b5
Binary files /dev/null and b/img/c_site2.PNG differ
diff --git a/img/cat.jpg b/img/cat.jpg
new file mode 100644
index 00000000..449d1a44
Binary files /dev/null and b/img/cat.jpg differ
diff --git a/img/chrome.jpg b/img/chrome.jpg
new file mode 100644
index 00000000..a1a219ee
Binary files /dev/null and b/img/chrome.jpg differ
diff --git a/img/css-example.jpg b/img/css-example.jpg
new file mode 100644
index 00000000..90dfcab9
Binary files /dev/null and b/img/css-example.jpg differ
diff --git a/img/css_ex.PNG b/img/css_ex.PNG
new file mode 100644
index 00000000..531090ee
Binary files /dev/null and b/img/css_ex.PNG differ
diff --git a/img/css_ex_marked.PNG b/img/css_ex_marked.PNG
new file mode 100644
index 00000000..805a53dd
Binary files /dev/null and b/img/css_ex_marked.PNG differ
diff --git a/img/down.png b/img/down.png
new file mode 100644
index 00000000..a7bfa8f9
Binary files /dev/null and b/img/down.png differ
diff --git a/img/example-blockinline.png b/img/example-blockinline.png
deleted file mode 100644
index e8f8e181..00000000
Binary files a/img/example-blockinline.png and /dev/null differ
diff --git a/img/example-float-column.png b/img/example-float-column.png
deleted file mode 100644
index a41396fd..00000000
Binary files a/img/example-float-column.png and /dev/null differ
diff --git a/img/firefix_logo.png b/img/firefix_logo.png
new file mode 100644
index 00000000..9ebb1069
Binary files /dev/null and b/img/firefix_logo.png differ
diff --git a/img/first_site.jpg b/img/first_site.jpg
new file mode 100644
index 00000000..3d5b3b00
Binary files /dev/null and b/img/first_site.jpg differ
diff --git a/img/giphy.webp b/img/giphy.webp
new file mode 100644
index 00000000..5997cc82
Binary files /dev/null and b/img/giphy.webp differ
diff --git a/img/lack_indents.jpg b/img/lack_indents.jpg
new file mode 100644
index 00000000..65b3346f
Binary files /dev/null and b/img/lack_indents.jpg differ
diff --git a/img/m_images.PNG b/img/m_images.PNG
new file mode 100644
index 00000000..0aa01730
Binary files /dev/null and b/img/m_images.PNG differ
diff --git a/img/m_mix.png b/img/m_mix.png
new file mode 100644
index 00000000..0ee7bcf9
Binary files /dev/null and b/img/m_mix.png differ
diff --git a/img/m_p.PNG b/img/m_p.PNG
new file mode 100644
index 00000000..ff9aae9e
Binary files /dev/null and b/img/m_p.PNG differ
diff --git a/img/no_pass.jpg b/img/no_pass.jpg
new file mode 100644
index 00000000..80f73dd1
Binary files /dev/null and b/img/no_pass.jpg differ
diff --git a/img/padding.png b/img/padding.png
deleted file mode 100644
index ab1381f1..00000000
Binary files a/img/padding.png and /dev/null differ
diff --git a/img/safari_logo.png b/img/safari_logo.png
new file mode 100644
index 00000000..2d04bfd6
Binary files /dev/null and b/img/safari_logo.png differ
diff --git a/img/stack_of_blocks.jpg b/img/stack_of_blocks.jpg
new file mode 100644
index 00000000..7bcec654
Binary files /dev/null and b/img/stack_of_blocks.jpg differ
diff --git a/img/wireframe_example.jpg b/img/wireframe_example.jpg
new file mode 100644
index 00000000..96ff1e67
Binary files /dev/null and b/img/wireframe_example.jpg differ
diff --git a/img/wireframes.png b/img/wireframes.png
new file mode 100644
index 00000000..10adc5ae
Binary files /dev/null and b/img/wireframes.png differ