Avery A.
Avery is a mechanical engineer turned software working at the Minerva Project- a startup that’s starting a brand new university. She lives and works in San Francisco.
And Now With Style
Design Media 2
Avery Anderson
@averycodes
Software Engineer at The Minerva Project
http://www.averymanderson.com/design-media-2
Today
Semantic Markup
Separation of presentation and content so as to reinforce the meaning in webpages rather than merely define its presentation
Call a doctor, now!
Call a doctor, now!
---
Registration is required.
The event begins at 6:30
<i lang=fr>Voilá</a> there it was
<dfn>HTML</dfn> is a markup language
Common semantic html tags
Headings: <h1> <h2> <h3> <h4> <h5> <h6>
Text: <p> <a> <em> <strong> <blockquote>
Lists: <ul> <ol> <li>
Structural: <header> <footer> <article> <nav>
-----------------------------------------------------------------------------
Non-Semantic: <div> <span>
BoilerPlate
The sections of code that have to be included in many places with little or no alteration.
Fork
When developers take a copy of source code from one software package and start independent development on it.
Fork It!
http://jsfiddle.net/averycodes/RKeWC/2/
Using a Centered content Div
HTML
<div class="container">
YOUR CONTENT HERE...
</div>
CSS
.container {
width: 500px;
margin: 0 auto;
}
Colors
Blue: #61CDF5
Grey: #777
Dk Grey: #555
Lt Grey: #ccc
Initial Structure
<div class="container">
<header>
<h1>Design Media Lab 2</h1>
</header>
<div class="main">
...
</div>
<footer>
Brought to you by the letter D
</footer>
</div>
Blockquote
<blockquote>
Design is <em>easy</em>. All you do is stare at the screen until <em>drops of blood</em> form on your forehead. --Marty Neumeier
</blockquote>
Lists
<h3>HTML</h3>
<ul>
<li>Always close your tags</li>
<li>Declare the correct DocType</li>
<li>Never use inline styles</li>
<li>Validate continuously</li>
</ul>
margin vs padding
Text-shadow
h2{
text-shadow: 0 2px 3px #555;
}
Round Corners
.main{
-moz-border-radius: 15px;
border-radius: 15px;
}
Striped Background
body{
background-color: #ccc;
background-image: webkit-linear-gradient(transparent 50%, rgba(255, 255, 255, .5) 50%);
background-image: linear-gradient(transparent 50%, rgba(255, 255, 255, .5) 50%);
background-size: 50px 50px;
}
design media lab 2
By Avery A.
