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
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
306
120k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.7k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
430
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3.2k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.7k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
430
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
290
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.8k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
76
5.3k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
420
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
530
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
500

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/