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

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
Vue × Nuxt × Oxc どこまで使える？実運用の現在地
Avatar for ANDPAD inc andpad
0
220
タクシーアプリ『GO』の バックエンド開発のおける AI利活用と若者のすべて
Avatar for Kazuhiko Yamashita pyama86
3
2k
AI 時代のソフトウェア設計の学び方
Avatar for 増田 亨 masuda220
PRO
29
12k
LLM本来の能力を解き放つサンドボックス技術とAI民主化への適用
Avatar for Yuku Kotani yukukotani
3
3.6k
[2026年度第1回ORセミナー] 計画最適化ベンチャーと競技プログラミング人材
Avatar for terry-u16 terryu16
0
260
キャリア迷子上等 ─ "ない道"は自分で作ればいい
Avatar for 16bit_idol 16bitidol
3
2k
Language Server 使ってる？ 〜VSCode と Zed の場合〜 / Are you using a Language Server? ~For VS Code and Zed~
Avatar for NAGATA Hiroaki handlename
0
780
LLM Plugin for Node-REDの利用方法と開発について
Avatar for 404background 404background
0
170
技術記事、AIに書かせるか、自分で書くか？ 〜それでも私が自分の手で書く理由〜 / #QiitaConference
Avatar for Junichi Ito jnchito
2
1.4k
Claspは野良GASの夢をみるか
Avatar for てらうちたかし takter00
0
180
AI時代のUIはどこへ行く？その2！
Avatar for Yusuke Wada yusukebe
21
7.1k
気づいたらRubyで100作品 ー クリエイティブコーディングが生活の一部になるまで / 100 Ruby Sketches Later: How Creative Coding Became Part of My Life
Avatar for chobishiba chobishiba
3
570

Featured

See All Featured
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
280
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.2k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
118
120k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.3k
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
1
540
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
630
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
10k
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
270
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
22k
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
490
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k

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