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
Software Architecture
hschwentner
6
2.1k
動作確認やテストで漏れがちな観点3選
starfish719
6
1k
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
2.3k
『品質』という言葉が嫌いな理由
korimu
0
160
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
210
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
170
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
130
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
490
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
テストをしないQAエンジニアは何をしているか?
nealle
0
130
“あなた” の開発を支援する AI エージェント Bedrock Engineer / introducing-bedrock-engineer
gawa
11
1.8k
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
400
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
A designer walks into a library…
pauljervisheath
205
24k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Documentation Writing (for coders)
carmenintech
67
4.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
GitHub's CSS Performance
jonrohan
1030
460k
Writing Fast Ruby
sferik
628
61k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
It's Worth the Effort
3n
184
28k
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