Web Development 101

Transcript

1. Web Development 101
2. Karl Li Back-end Developer @killtw http://about.me/killtw
3. A basic website includes
4. HTML
5. Basic HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="/path/to/a/css/file.css"> </head> <body> blah blah blah <script src="/path/to/a/javascript/file.js"></script> </body> </html>
6. <a href="https://www.flyingv.cc/">FlyingV</a>
7. 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>
8. More Elements <header></header> <footer></footer> <article></article> <nav></nav> <canvas></canvas> <svg></svg> <audio></audio> <video></video>
9. Removed Elements <b></b> <center></center> <font></font> <strike></strike>
10. Font <i>
    </i> <em>
    </em> <strong>
    </strong> <del></del>
11. Link <a href="https://www.flyingv.cc/" target="_blank">FlyingV</a>
12. Title h1 h2 h3 h4 h5 h6
13. Table <table> <thead> <tr> <th>Name</th> <th>Account</th> </tr> </thead> <tbody> <tr> <td>Karl Li</td> <td>killtw</td> </tr> </tbody> </table>
14. Images <img src="https://www.flyingv.cc/images/logo2x.png" title="flyingV" alt="Logo">
15. 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>
16. CSS
17. Basic selector { property: value; } Example h1 { color: blue; font-size: 18px; } h2, h3 { font-weight: bold; }
18. Last come, first served h4 { color: red; font-size: 10px; } h4 { color: gray; } Cut in h4 { color: orange !important; }
19. Selectors For element table {} For ID #content {} #avatar img {} For class .lists {} a.title {}
20. Pseudoclass Selectors a:link { color: black; } a:visited { color: purple; } a:hover { color: pink; } a:active { color: yellow; }
21. Box Model
22. Margin Distance to other elements .list { margin: up right down left; }
23. Border table { border: 1px; border-color: pink; border-style: dotted; }
24. Padding Distance between content and borders div#backers { padding: up right down left; }
25. Font » font-family » font-size » font-weight » font-decoration » font-indent » color
26. Good tools make you more efficient » Sublime Text » Emmet » JS Bin / Codepen » Twitter Bootstrap » Google Chrome
27. Why Sublime Text is awesome? » Fast » Light » Plugins » Cross Platform » FREE!
28. 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.flyingv.cc/project/ $]{Project_$})*10
29. JS Bin
30. Codepen
31. Bootstrap http://getbootstrap.com/ Built at Twitter
32. Grid system
33. Grid options
34. One more thing...
35. SITCON http://sitcon.org/2014/ Rails Girls Taipei http://railsgirls.com/taipei Django Grils Taipei http://djangogirls.org/taipei/