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.

design media lab 2

  • 1,411