Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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
120
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
78

Featured

See All Featured
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.9k
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
4.4k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.9k
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
2.6k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
2
270
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.5k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.4k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
8
36k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
380
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
56
3.5k

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/