Web Development 101

Karl Li Back-end Developer @killtw http://about.me/killtw

A basic website includes

Basic HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
<link rel="stylesheet" href="/path/to/a/css/ﬁle.css"> </head> <body> blah blah blah <script src="/path/to/a/javascript/ﬁle.js"></script> </body> </html>

<a href="https://www.ﬂyingv.cc/">FlyingV</a>

Common Elements <a>Link</a> <p>Paragraph</p> <div>Division</div> <span></span> <strong>Bold</strong> <em>Italics</em> <h1>Title</h1> <table>Table</table>
<ul>Unordered list</ul> <li>List</li> <script>Javascript</script> <style>.css {}</style> <hr> <br> <img>

More Elements <header></header> <footer></footer> <article></article> <nav></nav> <canvas></canvas> <svg></svg> <audio></audio> <video></video>

Removed Elements <b></b> <center></center> <font></font> <strike></strike>

Font <i></i> <em></em> <strong></strong> <del></del>

Link <a href="https://www.ﬂyingv.cc/" target="_blank">FlyingV</a>

Title h1 h2 h3 h4 h5 h6

Table <table> <thead> <tr> <th>Name</th> <th>Account</th> </tr> </thead> <tbody> <tr>
<td>Karl Li</td> <td>killtw</td> </tr> </tbody> </table>

Images <img src="https://www.ﬂyingv.cc/images/logo2x.png" title="ﬂyingV" alt="Logo">

Form <form action="/register" method="post"> <div> <label for="nickname">Name: </label> <input type="text"
id="nickname" name="nickname" placeholder="Your name here."> </div> <div> <label for="bio">Bio: </label> <textarea name="bio" id="bio" cols="30" rows="10"></textarea> </div> <div> <label for="gender">Gender: </label> <select name="gender" id="gender"> <option value="0">Male</option> <option value="1">Female</option> </select> </div> </form>

Basic selector { property: value; } Example h1 { color:
blue; font-size: 18px; } h2, h3 { font-weight: bold; }

Last come, ﬁrst served h4 { color: red; font-size: 10px;
} h4 { color: gray; } Cut in h4 { color: orange !important; }

Selectors For element table {} For ID #content {} #avatar
img {} For class .lists {} a.title {}

Pseudoclass Selectors a:link { color: black; } a:visited { color:
purple; } a:hover { color: pink; } a:active { color: yellow; }

Box Model

Margin Distance to other elements .list { margin: up right
down left; }

Border table { border: 1px; border-color: pink; border-style: dotted; }

Padding Distance between content and borders div#backers { padding: up
right down left; }

Font » font-family » font-size » font-weight » font-decoration »
font-indent » color

Good tools make you more efﬁcient » Sublime Text »
Emmet » JS Bin / Codepen » Twitter Bootstrap » Google Chrome

Why Sublime Text is awesome? » Fast » Light »
Plugins » Cross Platform » FREE!

Emmet html:5 ul>li*5 table[border=1px]>(thead>tr>(th{Name}+th{Account}))+ (tbody>(tr>(td{User$$}+td{Account$$}))*5) ul>(li>a[href=http://https://www.ﬂyingv.cc/project/ $]{Project_$})*10

JS Bin

Codepen

Bootstrap http://getbootstrap.com/ Built at Twitter

Grid system

Grid options

One more thing...

SITCON http://sitcon.org/2014/ Rails Girls Taipei http://railsgirls.com/taipei Django Grils Taipei http://djangogirls.org/taipei/

Web Development 101

Web Development 101

More Decks by Karl Li

Featured

Transcript