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
テスト駆動Kaggle
isax1015
1
480
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
190
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.4k
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
6.5k
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
410
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
1
560
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
21
8.7k
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
190
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
260
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
11
6.5k
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
840
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
120
Featured
See All Featured
KATA
mclloyd
30
14k
Statistics for Hackers
jakevdp
799
220k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
980
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
BBQ
matthewcrist
89
9.7k
Automating Front-end Workflow
addyosmani
1370
200k
Designing Experiences People Love
moore
142
24k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
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