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

Introductory HTML & CSS

Avatar for Ryhan Hassan Ryhan Hassan
January 23, 2012
Programming
3
230

Introductory HTML & CSS

Avatar for Ryhan Hassan

Ryhan Hassan

January 23, 2012
Tweet

More Decks by Ryhan Hassan

See All by Ryhan Hassan
(TH Crash Course) Intro to JavaScript
Avatar for Ryhan Hassan ryhan
1
100
(TH Crash Course) Advanced HTML & CSS
Avatar for Ryhan Hassan ryhan
5
250
(Skill Swap Weekend) HTML5 & CSS3
Avatar for Ryhan Hassan ryhan
7
270

Other Decks in Programming

See All in Programming
なぜ今、Terraformの本を書いたのか？ - 著者陣に聞く！『Terraformではじめる実践IaC』登壇資料
Avatar for Ryoma Fujiwara fufuhu
4
590
Gemini CLIの"強み"を知る！ Gemini CLIとClaude Codeを比較してみた！
Avatar for Kota Hisafuru kotahisafuru
3
1k
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか？
Avatar for Shinichi Takayanagi stakaya
5
900
Portapad紹介プレゼンテーション
Avatar for KAKERU gotoumakakeru
1
130
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
Avatar for adachi.ryo rvirus0817
1
1.6k
WebAssemblyインタプリタを書く ～Component Modelを添えて～
Avatar for ruccho ruccho
1
790
JetBrainsのAI機能の紹介 #jjug
Avatar for yusuke yusuke
0
200
React 使いじゃなくても知っておきたい教養としての React
Avatar for Yuka O’oka oukayuka
18
5.6k
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
Avatar for BPStudy bpstudy
0
290
画像コンペでのベースラインモデルの育て方
Avatar for tattaka tattaka
3
1.6k
リッチエディターを安全に開発・運用するために
Avatar for una unachang113
1
380
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
Avatar for yoshi takumiyoshikawa
2
280

Featured

See All Featured
Side Projects
Avatar for Sacha Greif sachag
455
43k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
25
1.8k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
2
550
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
332
24k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
73
5k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
51k
Building an army of robots
Avatar for Kyle Neath kneath
306
45k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
161
15k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
328
39k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
69
4.8k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
329
21k

Transcript

  1. HTML & CSS TartanHacks 2012

  2. @ryhanhassan

  3. None

  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

  77. None