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

Introductory HTML & CSS

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Ryhan Hassan Ryhan Hassan
January 23, 2012
Programming
240
3

Introductory HTML & CSS

Avatar for Ryhan Hassan

Ryhan Hassan

January 23, 2012

More Decks by Ryhan Hassan

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

Other Decks in Programming

See All in Programming
AI駆動開発にグラフDBを重ねてみた
Avatar for Satoshi Kaneyasu satoshi256kbyte
2
770
AI × TiDD / 2026.09.05 Redmine 大阪
Avatar for tokudiro tokudiro
1
120
Press start. Python's next generation.
Avatar for Carol Willing willingc
PRO
3
340
iOS開発×AI駆動開発 〜最近使って便利だったスキルの話〜
Avatar for nogu nogu66
0
140
typoなんかねぇよ
Avatar for らすぴー raspython3
0
690
世界の中心で、AI（App Intents）をさけぶ ー App Intents中心設計の実践ガイド
Avatar for touyou touyou
0
350
アクセシビリティから考える情報設計
Avatar for high-g high_g_engineer
0
350
業務時間外もAIに働いてもらう話
Avatar for taki colorful12
3
10k
【DroidKaigi 2026】「アクセシビリティを利用するとき、 アクセシビリティもまたこちらを利用している」 〜マルウェアによる攻撃と防衛について〜
Avatar for HalunoYo. halunoyo
0
440
AIの中の人になってみる
Avatar for tkym htkym
0
170
【高い買い物LT会】初任給で話題の国産フィジカルAIを買った話
Avatar for 赤神青空 akagami
PRO
0
140
AIを上手に使っていこうとしたら越境せざるを得なくなった話 〜実践1年で見えた境界を越えなければならない理由と進め方〜 / Crossing borders with AI
Avatar for TomoyaKitaura tomoyakitaura
4
1.1k

Featured

See All Featured
HDC tutorial
Avatar for Michiel Stock michielstock
2
860
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
2.2k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.7k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.4k
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
2
14k
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
67
58k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
1
11k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.8k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
3
53k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
500
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.4k

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