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
HTML/CSS with Infusion
Search
WebMuses
June 11, 2015
Technology
0
77
HTML/CSS with Infusion
WebMuses
June 11, 2015
Tweet
Share
More Decks by WebMuses
See All by WebMuses
Agata Mazur on WebMuses
webmuses
2
290
Monika Konieczny - Girl Among Geeks
webmuses
0
89
Anna Migas - Why some cafeterias are more likely to be visited than the others? About User Experience.
webmuses
0
180
Ewa Maciaś - GWT developing web applications with java(script)
webmuses
1
160
Basia Strojnowska: On comfort zone... and beyond
webmuses
0
81
Other Decks in Technology
See All in Technology
スタートアップにおけるこれからの「データ整備」
shomaekawa
2
480
Claude Codeを駆使した初めてのiOSアプリ開発 ~ゼロから3週間でグローバルハッカソンで入賞するまで~
oikon48
9
3.6k
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
930
プロダクトのコードから見るGoによるデザインパターンの実践 #go_night_talk
bengo4com
1
2.5k
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.8k
やる気のない自分との向き合い方/How to Deal with Your Unmotivated Self
sanogemaru
0
510
『OCI で学ぶクラウドネイティブ 実践 × 理論ガイド』 書籍概要
oracle4engineer
PRO
3
220
プレーリーカードを活用しよう❗❗デジタル名刺交換からはじまるイベント会場交流のススメ
tsukaman
0
160
AI Agent Dojo #2 watsonx Orchestrateフローの作成
oniak3ibm
PRO
0
120
Simplifying Cloud Native app testing across environments with Dapr and Microcks
salaboy
0
160
アイテムレビュー機能導入からの学びと改善
zozotech
PRO
0
160
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
2
640
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
20
1.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Typedesign – Prime Four
hannesfritz
42
2.8k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Documentation Writing (for coders)
carmenintech
75
5.1k
The Invisible Side of Design
smashingmag
302
51k
Context Engineering - Making Every Token Count
addyosmani
6
250
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
4 Signs Your Business is Dying
shpigford
185
22k
Transcript
HTML & CSS „THE BEGINNING” Monika Zamojska Bartosz Tupta
None
HTML CSS
None
DOCTYPE • it is an instruction to the web browser
about what version of HTML the page is written in • HTML5 <!DOCTYPE html> • HTML 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
None
[…] <div id=”header”></div> <div id=”nav”></div> <div id=”section”> <div id=”article”></div> </div>
<div id=”sidecolumn”></div> <div id=”footer”></div> […]
None
[…] <header></header> <nav></nav> <section> <header></header> <article></article> <footer></footer> </section> <aside></aside> <footer></footer>
[…]
None
None
None
#xyz { color: red }
None
SELECTORS • .className {} • tagName {} • #idName {}
• .className.classNameModificator{} • tagName[attr=value] {} • .className:pseudoClass {} • * {} • element > element • … others
PROPERTIES ~ 200
None
SEMANTIC HTML WHY SO IMPORTANT?
None
None
– developer „I feel so guilty adding a div. Div-itis
is terrible, I hear.”
SEMANTIC REALISM ACCESSIBILITY READABLE
UNITS %, em, px, pt, pc, ex, cm, mm, in,
rem, vh, vw, vmin, vmax
PX .
EM • Relative to the font-size of the element (2em
means 2 times the size of the current font) (but only font-size) • Useful in Responsive Web Design
EM (EXAMPLE) body { font-size:14px; } h1 { font-size:2em; }
p { font-size:1.2em; } h1 header 28px and this is a paragraph which is 16px http://pxtoem.com/
%
THE FIRST TIME YOU APPLY A CSS TO A WEB
PAGE
LESS / SASS CSS preprocessors
MONIKA! IT’S YOUR TURN!
CSS DIN(N)ER
HELPERS! Monika Robert Tomasz
OPEN IT. • http://bit.ly/1oEpqyD • or just http://flukeout.github.io/
TIME FOR WORKSHOPS! • you have 90 minutes • you’ve
got our “helpers” • download assets from: http://thewayforward.pl/pinksponge.zip
GO!
None