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
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
in-process GraphQL のすすめ #ginzajs
Avatar for izumin5210 izumin5210
4
1.4k
ソフトウェアエンジニアにとっての生成AI - 特性を知って使い倒す / generative ai for software enginner
Avatar for Naoki Kishida kishida
7
2k
typoなんかねぇよ
Avatar for らすぴー raspython3
0
120
Built Our Own Background Agent at LayerX
Avatar for LayerX layerx
PRO
10
5.9k
【QA Test Talk Vol.8】AI-DLC による Whole Team Approach の加速
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
0
220
全PRの83%がAIレビューだけでマージできるようになった開発組織はその後どうなったか
Avatar for a-thug athug
1
1.9k
S3 を使うアプリケーションをローカル完結で動かすことに全力を注いでみた / Running S3 Apps Offline
Avatar for Daisuke Garaike contour_gara
0
560
Oxlintはいいぞ（続）
Avatar for Yuji Yamaguchi yug1224
1
310
2年かけて Deno に DOMMatrix を実装した話 / How I implemented DOMMatrix in Deno over two years
Avatar for petamoriken / 森建 petamoriken
0
220
Gmail/Google DriveをトリガーにAIエージェントを動かそう！ / Run AI agents with Gmail/Google Drive as triggers!
Avatar for Har1101 har1101
2
310
夏だ！祭りだ！祭りとはドメインモデリングでは？
Avatar for ryugen04 ryugen04
0
350
AI時代に設計が 最大の生産性レバーになる 意図駆動開発とデータを消さない設計｜Don't Delete Your Data or Your Intent — Design as the Deepest Lever in the AI Era
Avatar for Tomohisa Takaoka tomohisa
1
1.1k

Featured

See All Featured
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
24k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
55
12k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
32k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
270
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
870
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.9k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
22k
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4.1k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
1
2.4k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
300

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