Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Introductory HTML & CSS
Search
Ryhan Hassan
January 23, 2012
Programming
3
220
Introductory HTML & CSS
Ryhan Hassan
January 23, 2012
Tweet
Share
More Decks by Ryhan Hassan
See All by Ryhan Hassan
(TH Crash Course) Intro to JavaScript
ryhan
1
100
(TH Crash Course) Advanced HTML & CSS
ryhan
5
240
(Skill Swap Weekend) HTML5 & CSS3
ryhan
7
270
Other Decks in Programming
See All in Programming
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
230
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.4k
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
160
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
110
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
160
Is Xcode slowly dying out in 2025?
uetyo
1
190
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
800
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
390
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
320
童醫院敏捷轉型的實踐經驗
cclai999
0
190
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
190
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
240
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Rails Girls Zürich Keynote
gr2m
94
14k
Building Applications with DynamoDB
mza
95
6.5k
We Have a Design System, Now What?
morganepeng
53
7.7k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
A Tale of Four Properties
chriscoyier
160
23k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Speed Design
sergeychernyshev
32
1k
Typedesign – Prime Four
hannesfritz
42
2.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Transcript
HTML & CSS TartanHacks 2012
@ryhanhassan
None
HTML CSS JS
HTML CSS JS Structure Presentation Behavior
JS Javascript/jQuery Tomorrow at 6pm
HTML Syntax
<foo> STUFF </foo> Tag
<foo> STUFF </foo> Tag Closing Tag
<p> <a> <strong> <em> paragraph link bold italicized
<p> <em> </em></p> This is italicized
<p> <em> </em></p> This is italicized Outer Tag Inner Tag
Let’s Build a Page
<html> Start with the tag. Let’s create index.html
<html> </html> <!DOCTYPE html> Use HTML5 Doctype
<html> </html> <!DOCTYPE html> <body> </body> <p> Hello world! </p>
Add content
<html> </html> <!DOCTYPE html> <body> </body> <p> Hello world! </p>
<title> My Site Name </title> <head> </head>
<html> </html> <!DOCTYPE html> <body> </body> <p> Hello world! </p>
<title> My Site Name </title> <head> </head> <style> body{ background-color: red; } </style>
<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
CSS Syntax
p { color: green; font-size: 16px; }
p { color: green; font-size: 16px; } selector
p { color: green; font-size: 16px; } selector property
p { color: green; font-size: 16px; } selector property value
p { color: green font-size: 1 Fun with Selectors
p.myClass{ font-color: blue; } <p class=“myClass”>hai</p> Select a group of
paragraphs by class
p#myID{ font-color: blue; } <p id=“myID”> bleh </p> Select a
particular paragraph by ID
p strong { font-color: blue; } Select only bold text
in paragraphs
p + a { font-color: blue; } Select only links
after paragraphs
p:nth-child(odd) { font-color: blue; } Select every other paragraph
The Box Model
The Box Model Everything in HTML/CSS is actually a box.
Everything in HTML/CSS is actually a box. <p> Height Width
<p> margins borders
<p> margins herp derp blerg derp moar fishsticks derp Glenn
Beck voodoo borders padding
<p> p{ border: 1px solid black; padding:10px; margin:10px; }
Boxes can act like blocks <p> <p> <p>
Boxes can also be inline <p> <p> <p>
<p> <p> <p> Default values display: block; display: inline-block;
Use appropriate tags! <article> <p> <p> <aside> <nav> <header> <footer>
CSS JS Presentation Behavior CSS Animations
CSS Awesome effects, without JavaScript!
a:hover{ animation: pulse 5s; } @keyframes pulse { 0% {background-color:
red;} 50% {background-color: black;} 100% {background-color: red;} } Pulse between Red and Black
a:hover{ animation: pulse 5s; } @keyframes pulse { 0% {background-color:
red;} 50% {background-color: black;} 100% {background-color: red;} } Pulse between Red and Black
a:hover{ animation: pulse 5s; } @keyframes pulse { 0% {background-color:
red;} 50% {background-color: black;} 100% {background-color: red;} } Pulse between Red and Black
<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
<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
<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
a:hover{ animation: pulse 5s; } @keyframes pulse { 0% {background-color:
red;} 50% {background-color: black;} 100% {background-color: red;} } Pulse between Red and Black
ANIMATE ALL THE PROPERTIES
Things to Google
Things to Google * CSS Transforms * CSS Transitions *
HTML5 Canvas
Check out some awesome 3D effects http://www.ryancollins.me/?p=404
Check out some awesome 3D effects http://www.ryancollins.me/?p=404
Media Queries Let your page adapt
Lots of devices
Lots of devices
Responsive Design Automagically reflow content to fit any screen.
<html> </html> <!DOCTYPE html> <body> </body> <p> Hello world! </p>
<title> My Site Name </title> <head> </head> <style> body{ width: 800px; } </style>
<html> </html> <!DOCTYPE html> <body> </body> <p> Hello world! </p>
<title> My Site Name </title> <head> </head> </style> <style> body{ width: 800px; }
</style> @media (max-width:500px;){ Targets mobiles <style> body{ width: 800px; }
body{ width:320px; } }
a{ /* touch friendly link */ padding: 10px; background-color:#EEE; }
@media (max-width:500px;){ body{ width:320px; } }
Mobile Web Snazzy mobile views
Viewport Mobile browsers render pages in virtual “windows” wider than
their actual screen.
Viewport * Set page width * Disable zooming * Set
zoom level
Viewport * Set page width * Disable zooming * Set
zoom level <meta name=“viewport” content = “ width = device-width, user-scalable = no, initial-sale = 1.0” />
Hacking Tips How to build fast.
You only have 24 HOURS
HTML CSS JS You only have 24 HOURS
Frameworks The boring stuff is already coded.
* Spend less time coding * Spend more time prototyping
* Avoid browser and device issues
Mobile jQuery Mobile Sencha iWebKit
Mobile jQuery Mobile Sencha iWebKit Responsive Bootstrap Skeleton Foundation
Build a mobile app All you need is HTML, CSS,
& JS
Go Experiment! Check out Bootstrap (twitter.github.com/bootstrap) and Skeleton (getSkeleton.com)
I don’t bite. @ryhanhassan
None