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
エンタメとAIのための3Dパラレルワールド構築(GPU UNITE 2025 特別講演)
pfn
PRO
0
610
データ戦略部門 紹介資料
sansan33
PRO
1
3.8k
Kubernetes self-healing of your workload
hwchiu
0
310
GoでもGUIアプリを作りたい!
kworkdev
PRO
0
160
速習AGENTS.md:5分で精度を上げる "3ブロック" テンプレ
ismk
6
1.9k
もう外には出ない。より快適なフルリモート環境を目指して
mottyzzz
6
1.6k
混合雲環境整合異質工作流程工具運行關鍵業務 Job 的經驗分享
yaosiang
0
120
HonoとJSXを使って管理画面をサクッと型安全に作ろう
diggymo
0
150
Wasmの気になる最新情報
askua
0
170
Codexとも仲良く。CodeRabbit CLIの紹介
moongift
PRO
1
260
Databricks AI/BI Genie の「値ディクショナリー」をAmazonの奥地(S3)まで見に行く
kameitomohiro
1
350
AI-Readyを目指した非構造化データのメダリオンアーキテクチャ
r_miura
1
250
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Into the Great Unknown - MozCon
thekraken
40
2.1k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
880
Done Done
chrislema
185
16k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Unsuck your backbone
ammeep
671
58k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Statistics for Hackers
jakevdp
799
220k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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