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
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
690
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
210k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
440
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
410
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
290
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
450
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
7.1k
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
1
170
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
32k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
570

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/