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
230
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
250
(Skill Swap Weekend) HTML5 & CSS3
ryhan
7
270
Other Decks in Programming
See All in Programming
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
370
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
1k
Claude Agent SDK を使ってみよう
hyshu
0
850
Serena MCPのすすめ
wadakatu
4
1k
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
170
作って理解するGOCACHEPROG / Go Conference 2025(Workshop)
mazrean
0
100
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
180
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
150
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
560
Catch Up: Go Style Guide Update
andpad
0
230
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
110
品質ワークショップをやってみた
nealle
0
340
Featured
See All Featured
Become a Pro
speakerdeck
PRO
29
5.6k
Designing for Performance
lara
610
69k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Documentation Writing (for coders)
carmenintech
75
5.1k
Visualization
eitanlees
149
16k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
A Tale of Four Properties
chriscoyier
161
23k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
870
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Why Our Code Smells
bkeepers
PRO
340
57k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
8
910
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