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

Web Development 101

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
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.6k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.2k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
220
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.3k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.5k
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
330
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
10k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
500
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
2
13k

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/