Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Development 101

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Karl Li Karl Li
September 12, 2014
110
0

Web Development 101

Avatar for Karl Li

Karl Li

September 12, 2014

More Decks by Karl Li

See All by Karl Li
Rebuild flyingV with Laravel
Avatar for Karl Li killtw
0
1.6k
Web Development 102
Avatar for Karl Li killtw
0
75

Featured

See All Featured
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
3.7M
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
800
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7.1k
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
2
13k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
240
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
25k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
960
Claude Code のすすめ
Avatar for schroneko schroneko
67
230k
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
150
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
150

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/