Introductory HTML & CSS

Transcript

1. HTML & CSS TartanHacks 2012
2. @ryhanhassan
4. HTML CSS JS
5. HTML CSS JS Structure Presentation Behavior
6. JS Javascript/jQuery Tomorrow  at  6pm
7. HTML Syntax
8. <foo> STUFF </foo> Tag
9. <foo> STUFF </foo> Tag Closing  Tag
10. <p> <a> <strong> <em> paragraph link bold italicized
11. <p> <em> </em></p> This is italicized
12. <p> <em> </em></p> This is italicized Outer  Tag Inner  Tag
13. Let’s Build a Page
14. <html> Start with the tag. Let’s create index.html
15. <html> </html> <!DOCTYPE html> Use HTML5 Doctype
16. <html> </html> <!DOCTYPE html> <body> </body> <p> Hello world! </p> Add content
17. <html> </html> <!DOCTYPE html> <body> </body> <p> Hello world! </p> <title> My Site Name </title> <head> </head>
18. <html> </html> <!DOCTYPE html> <body> </body> <p> Hello world! </p> <title> My Site Name </title> <head> </head> <style> body{ background-color: red; } </style>
19. <html> </html> <!DOCTYPE html> <body> </body> <p> Hello world! </p> <title> My Site Name </title> <head> </head> <style> body{ background-color: red; } </style> Btw, this is CSS
20. CSS Syntax
21. p { color: green; font-size: 16px; }
22. p { color: green; font-size: 16px; } selector
23. p { color: green; font-size: 16px; } selector property
24. p { color: green; font-size: 16px; } selector property value
25. p { color: green font-size: 1 Fun with Selectors
26. p.myClass{ font-color: blue; } <p class=“myClass”>hai</p> Select a group of paragraphs by class
27. p#myID{ font-color: blue; } <p id=“myID”> bleh </p> Select a particular paragraph by ID
28. p strong { font-color: blue; } Select only bold text in paragraphs
29. p + a { font-color: blue; } Select only links after paragraphs
30. p:nth-child(odd) { font-color: blue; } Select every other paragraph
31. The Box Model
32. The Box Model Everything in HTML/CSS is actually a box.
33. Everything in HTML/CSS is actually a box. <p> Height Width
34. <p> margins borders
35. <p> margins herp derp blerg derp moar fishsticks derp Glenn Beck voodoo borders padding
36. <p> p{ border: 1px solid black; padding:10px; margin:10px; }
37. Boxes can act like blocks <p> <p> <p>
38. Boxes can also be inline <p> <p> <p>
39. <p> <p> <p> Default values display: block; display: inline-block;
40. Use appropriate tags! <article> <p> <p> <aside> <nav> <header> <footer>
41. CSS JS Presentation Behavior CSS Animations
42. CSS Awesome effects, without JavaScript!
43. a:hover{ animation: pulse 5s; } @keyframes pulse { 0% {background-color: red;} 50% {background-color: black;} 100% {background-color: red;} } Pulse between Red and Black
44. a:hover{ animation: pulse 5s; } @keyframes pulse { 0% {background-color: red;} 50% {background-color: black;} 100% {background-color: red;} } Pulse between Red and Black
45. a:hover{ animation: pulse 5s; } @keyframes pulse { 0% {background-color: red;} 50% {background-color: black;} 100% {background-color: red;} } Pulse between Red and Black
46. <a> <a> <a> a:hover{ animation: pulse 5s; } @keyframes pulse { 0% {background-color: red;} 50% {background-color: black;} 100% {background-color: red;} } Pulse between Red and Black
47. <a> <a> <a> a:hover{ animation: pulse 5s; } @keyframes pulse { 0% {background-color: red;} 50% {background-color: black;} 100% {background-color: red;} } Pulse between Red and Black
48. <a> <a> <a> a:hover{ animation: pulse 5s; } @keyframes pulse { 0% {background-color: red;} 50% {background-color: black;} 100% {background-color: red;} } Pulse between Red and Black
49. a:hover{ animation: pulse 5s; } @keyframes pulse { 0% {background-color: red;} 50% {background-color: black;} 100% {background-color: red;} } Pulse between Red and Black
50. ANIMATE ALL THE PROPERTIES
51. Things to Google
52. Things to Google * CSS Transforms * CSS Transitions * HTML5 Canvas
53. Check out some awesome 3D effects http://www.ryancollins.me/?p=404
54. Check out some awesome 3D effects http://www.ryancollins.me/?p=404
55. Media Queries Let your page adapt
56. Lots of devices
57. Lots of devices
58. Responsive Design Automagically reflow content to fit any screen.
59. <html> </html> <!DOCTYPE html> <body> </body> <p> Hello world! </p> <title> My Site Name </title> <head> </head> <style> body{ width: 800px; } </style>
60. <html> </html> <!DOCTYPE html> <body> </body> <p> Hello world! </p> <title> My Site Name </title> <head> </head> </style> <style> body{ width: 800px; }
61. </style> @media (max-width:500px;){ Targets mobiles <style> body{ width: 800px; } body{ width:320px; } }
62. a{ /* touch friendly link */ padding: 10px; background-color:#EEE; } @media (max-width:500px;){ body{ width:320px; } }
63. Mobile Web Snazzy mobile views
64. Viewport Mobile browsers render pages in virtual “windows” wider than their actual screen.
65. Viewport * Set page width * Disable zooming * Set zoom level
66. Viewport * Set page width * Disable zooming * Set zoom level <meta name=“viewport” content = “ width = device-width, user-scalable = no, initial-sale = 1.0” />
67. Hacking Tips How to build fast.
68. You only have 24 HOURS
69. HTML CSS JS You only have 24 HOURS
70. Frameworks The boring stuff is already coded.
71. * Spend less time coding * Spend more time prototyping * Avoid browser and device issues
72. Mobile jQuery Mobile Sencha iWebKit
73. Mobile jQuery Mobile Sencha iWebKit Responsive Bootstrap Skeleton Foundation
74. Build a mobile app All you need is HTML, CSS, & JS
75. Go Experiment! Check out Bootstrap (twitter.github.com/bootstrap) and Skeleton (getSkeleton.com)
76. I don’t bite. @ryhanhassan