3. WELCOME!
Girl Develop It is here to provide affordable and
accessible programs to learn software through
mentorship and hands-on instruction.
Some "rules"
We are here for you!
Every question is important
Help each other
Have fun
4. WELCOME!
Tell us about yourself.
Who are you?
What do you hope to get out of the class?
What is your favorite dinosaur?
5. REVIEW: TERMS
Web design
The process of planning, structuring and creating a
website
Web development
The process of programming dynamic web
applications
Front end
The outwardly visible elements of a website or
application
Back end
The inner workings and functionality of a website or
application.
7. REVIEW: ANATOMY OF A WEBSITE
Your Content
+ HTML: Structure
+ CSS: Presentation
= Your Website
A website is a way to present your content to the world,
using HTML and CSS to present that content & make it
look good.
8. REVIEW: ANATOMY OF A WEBSITE
Concrete example
A paragraph is your content
Putting your content into an HTML tag to make it look like a
paragraph is Structure
Make the font of your paragraph blue and 18px is presentation
A paragraph is your content
<p>A paragraph is your content</p>
9. REVIEW: ANATOMY OF AN HTML ELEMENT
Element
An individual component of HTML
Paragraph, Table, List
Tag
Markers that signal the beginning and end of an
element
Opening tag and Closing Tag
<tagname>Stuff in the middle</tagname>
<p>This is a sample paragraph.</p>
10. REVIEW: ANATOMY OF AN HTML ELEMENT
Container Element
An element that can contain other elements or
content
A paragraph (<p>) contains text
Stand Alone Element
An element that cannot contain anything else
<br/>
<img/>
11. REVIEW: ANATOMY OF AN HTML ELEMENT
Attribute
Each element can have a variety of attributes
Language, style, identity, source
Value
Value is the value assigned to a given attribute.
<p lang="fr">C'est la vie</p>
<img src="my.picture.jpg"/>
12. CSS: REVIEW
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.
13. REVIEW: THE CSS RULE
A block of CSS is a rule block.
The rule starts with a selector.
It has sets of properties and values.
A property-value pair is a declaration.
selector {
property: value;
}
14. REVIEW: CSS SYNTAX
Declarations: Property and value of style you plan use
on HTML element.
Declarations end with a semicolon
Declarations can be grouped and are surrounded by
curly brackets.
selector {
property: value;
property: value;
property: value;
}
15. REVIEW: SELECTOR: ELEMENT
Selects all paragraph elements.
Selects all image elements.
p {
property: value;
}
img {
property: value;
}
16. REVIEW: SELECTOR: ID
Selects all elements with an id of "footer".
The associated HTML.
#footer {
property: value;
}
<p id="footer">Copyright 2011</p>
17. SELECTOR: CLASS
Selects all elements with a class of "warning".
The associated HTML.
.warning {
color: red;
}
<p class="warning">Run away!</p>
18. REVIEW: SELECTOR: POSITION
Selects all em elements that are within a paragraph
The associated HTML.
p em {
color: yellow;
}
<p>This is <em>important.</em></p>
20. RESET CSS
Even though HTML is the structure and CSS is the
design, some HTML elements have default styles
Examples include:
Bulleted lists like this one have standard bullets
Paragraphs have default padding
Links are blue and underlined
22. STANDARD WIDTHS AND SIZES
Some sizes that are good to know about
A standard font size is usually 12px
Screens vary greatly in width! Standardize your
design a couple ways
Set the body width to a specific width
Set the content area width to 100%, with max-
width of around 1200px/1400px and a min-width of
around 960px.
23. WRAPPERS
Wrappers are a good way to center content if the
screen width is wider than your content.
.wrapper{
width: 100%;
max-width:1400px;
margin: 0 auto;
}
24. LET'S DEVELOP IT
Getting our feet wet
Download practice files
Look through the page
Add a link to the reset.css file in the head of the
document
Notice the changes to the layout
25. LINKING ON PAGES
<a href = "#section">Go to Section!</a>
<a name= "section"></a>
Example on Wikipedia
26. PSEUDO SELECTORS
In addition to applying css to elements, classes and ids,
you can apply css on certain events. Most notably,
hover
I will only turn blue on hover
.turn-blue:hover{
background-color: lightblue;
color: grey
}
<div class = "turn-blue">I will only turn blue on hover</div>
27. @FONTFACE
The world of HTML has progressed beyond Times New
Roman and Arial
Yay!
How do we use new and cool fonts?
28. @FONTFACE
Use font from outside sources (like Google Web Fonts)
In our example, we use Audiowide, Quicksand and Lato
http://www.google.com/webfonts
<link href="http://fonts.googleapis.com/css?family=Audiowide|Quicksand:300,400,700|Lato:100,300,400,700,900,100
italic,300italic,400italic,700italic,900italic" rel="stylesheet" type="text/css">
What does that do?
29. @FONTFACE
Download fonts locally
In our example, we downloaded 'Entypo'
To use it, add the following to css:
@font-face {
font-family: 'EntypoRegular';
src: url('font/Entypo-webfont.eot');
src: url('font/Entypo-webfont.eot?#iefix') format('embedded-opentype'),
url('font/Entypo-webfont.woff') format('woff'),
url('font/Entypo-webfont.ttf') format('truetype'),
url('font/Entypo-webfont.svg#EntypoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
31. LET'S DEVELOP IT
Use your new-found knowledge!
Update the links in the header and footer to jump to
the corresponding section
Update the links in the site to change color on hover.
Try to update the background color too!
Update the font of the site. The completed example
uses:
Lato for the body
Audiowide for h1
Quicksand for h2
EntypoRegular for the bullets and jump up/down
links
32. HTML 5: WHAT IS IT?
Formally, HTML5 is the for the
next version of HTML.
Informally, people use "HTML5" to refer to a whole set
of new web standards and abilities:
HTML5
CSS3
JavaScript
W3C’s specification
33. HTML5 SPECIFICATIONS
2004 - started work
2008 - first public working draft
2011 - last call
2012 - working draft
2014 - planned for stable recommendation
48. Too much to cover in our time together
But here are some highlights:
49.
50. MARKS SOME OLD THINGS
OBSOLETE
EXAMPLES
Deprecated items (e.g. frame, frameset, noframes)
Presentational elements and attributes replaced by
CSS (e.g. font, big, center)
reference
51. REDEFINES A FEW THINGS
Gives some old elements semantic meaning and
separates them from presentation (e.g. b, i, strong, em)
52. ADDS A BUNCH OF NEW
FEATURES
semantics offline & storage device access connectivity
multimedia 3D & graphics performance presentation
54. OLD DOCTYPES
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
55. SEMANTIC HTML
“The use of HTML markup to reinforce
the semantics, or meaning, of the
information in webpages rather than
merely to define its presentation
(look).”
-Wikipedia
61. <HEADER>
Container for a group of introductory or navigational
aids
Document can have multiple header elements
E.g. One for the page, one for each section
62. <FOOTER>
Contains information about its containing element
E.g. who wrote it, copyright, links to related content,
etc.
Document can have multiple footer elements
E.g. One for the page, one for each section
68. A LOT OF DIVS
also known as div-itis
<body>
<div id="header">
<h1>Hi, I'm a header!</h1>
<div id="nav">
<ul>
<li><a href="foo">foo</a></li>
<li><a href="bar">bar</a></li>
</ul>
</div>
</div>
<div id="main">
<div class="article">foo</div>
<div class="article">bar</div>
</div>
<div id="footer">Hi, I'm a footer!</div>
</body>
73. HTML5SHIV
HTML5 IE enabling script
HTML5Shiv
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->
“polyfill (n): a JavaScript shim that
replicates the standard API for older
browsers”
74. LET'S DEVELOP IT
Modify the site to use semantic HTML
Change one small thing at a time
Remember to modify the CSS to match the HTML
You have 10-15 minutes to get started
You won't be able to change everything - if we have
time, you can continue at the end of the workshop
