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
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
370
uniqueパッケージの内部実装を支えるweak pointerの話
Avatar for magavel magavel
0
1k
Claude Agent SDK を使ってみよう
Avatar for Hayami Shuhei hyshu
0
850
Serena MCPのすすめ
Avatar for wadakatu wadakatu
4
1k
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
Avatar for uMa uma31
0
170
作って理解するGOCACHEPROG / Go Conference 2025(Workshop)
Avatar for mazrean mazrean
0
100
タスクの特性や不確実性に応じた最適な作業スタイルの選択（ペアプロ・モブプロ・ソロプロ）と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
Avatar for yuki honyanya
3
180
What Spring Developers Should Know About Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
150
kiroとCodexで最高のSpec駆動開発を！！数時間で web3ネイティブなミニゲームを作ってみたよ！
Avatar for Haruki Kondo mashharuki
0
560
Catch Up: Go Style Guide Update
Avatar for ANDPAD inc andpad
0
230
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
Avatar for GENIEE ,Inc geniee_inc
0
110
品質ワークショップをやってみた
Avatar for Nealle nealle
0
340

Featured

See All Featured
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
29
5.6k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
285
14k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
75
5.1k
Visualization
Avatar for Eitan Lees eitanlees
149
16k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
11k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.2k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
161
23k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
9
870
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
274
41k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
57k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
8
910

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