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
98
(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
sappoRo.R #12 初心者セッション
kosugitti
0
230
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
730
動作確認やテストで漏れがちな観点3選
starfish719
6
1k
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
120
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
260
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.7k
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
180
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
550
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
5
3.8k
Linux && Docker 研修/Linux && Docker training
forrep
23
4.5k
Featured
See All Featured
A designer walks into a library…
pauljervisheath
205
24k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
GitHub's CSS Performance
jonrohan
1030
460k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Building Adaptive Systems
keathley
40
2.4k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Become a Pro
speakerdeck
PRO
26
5.1k
Code Reviewing Like a Champion
maltzj
521
39k
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