Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML/CSS with Infusion

WebMuses
June 11, 2015
Technology
0
65

HTML/CSS with Infusion

WebMuses

June 11, 2015
Tweet

More Decks by WebMuses

See All by WebMuses
Agata Mazur on WebMuses
webmuses
2
250
Monika Konieczny - Girl Among Geeks
webmuses
0
85
Anna Migas - Why some cafeterias are more likely to be visited than the others? About User Experience.
webmuses
0
170
Ewa Maciaś - GWT developing web applications with java(script)
webmuses
1
150
Basia Strojnowska: On comfort zone... and beyond
webmuses
0
76

Other Decks in Technology

See All in Technology
シン・Kafka / shin-kafka
oracle4engineer
PRO
7
2.7k
AWS を使う上で知っておきたいオンプレミス知識/aws-on-premise-essentials
emiki
1
4.2k
Aurora MySQL v3(MySQL8.0互換)の オンラインDDLの罠挙動を全バージョンで検証した
yutakikai
1
150
Postman v10リリース後を振り返る
nagix
0
130
キャラクター制御のためのプロンプト術 for LINE Bot
uezo
0
520
「手動オペレーションに定評がある」と言われた私が心がけていること / phpcon_odawara2024
blue_goheimochi
2
320
KubeCon EU 2024 Recap “Kubernetes Policy Time Machine: Where to Next?”
ryysud
0
100
強みを伸ばすキャリアデザイン
yug1224
0
200
Databricks:『生成AI World Cup』のご案内
databricksjapan
2
150
Janus
bkuhlmann
1
490
o11y入門_外形監視を利用したWebアプリケーションへの最適なモニタリング_TechBrew
k5k
3
100
スタートアップの技術顧問を3年間続けて発生した事と気付き
biwakonbu
0
160

Featured

See All Featured
Designing for Performance
lara
601
67k
Atom: Resistance is Futile
akmur
258
25k
Ruby is Unlike a Banana
tanoku
96
10k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
Building Applications with DynamoDB
mza
88
5.6k
Designing the Hi-DPI Web
ddemaree
276
33k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
2k
Building Better People: How to give real-time feedback that sticks.
wjessup
354
18k
Side Projects
sachag
451
41k

Transcript

  1. HTML & CSS
 „THE BEGINNING” Monika Zamojska Bartosz Tupta

  2. None

  3. HTML CSS

  4. None

  5. 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">
  6. None

  7. […]
 <div id=”header”></div>
 <div id=”nav”></div>
 <div id=”section”>
 <div id=”article”></div>
 </div>


    <div id=”sidecolumn”></div>
 <div id=”footer”></div>
 […]
  8. None

  9. […]
 <header></header>
 <nav></nav>
 <section>
 <header></header>
 <article></article>
 <footer></footer>
 </section>
 <aside></aside>
 <footer></footer>


    […]
  10. None
  11. None
  12. None

  13. #xyz { color: red }

  14. None

  15. SELECTORS • .className {} • tagName {} • #idName {}

    • .className.classNameModificator{} • tagName[attr=value] {} • .className:pseudoClass {} • * {} • element > element • … others

  16. PROPERTIES ~ 200

  17. None

  18. SEMANTIC HTML WHY SO IMPORTANT?

  19. None
  20. None

  21. – developer „I feel so guilty adding a div. Div-itis

    is terrible, I hear.”

  22. SEMANTIC REALISM ACCESSIBILITY READABLE

  23. UNITS %, em, px, pt, pc, ex, cm, mm, in,

    rem, vh, vw, vmin, vmax

  24. PX .

  25. 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

  26. 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/

  27. %

  28. THE FIRST TIME YOU APPLY A CSS TO A WEB

    PAGE

  29. LESS / SASS CSS preprocessors

  30. MONIKA! IT’S YOUR TURN!

  31. CSS DIN(N)ER

  32. HELPERS! Monika Robert Tomasz

  33. OPEN IT. • http://bit.ly/1oEpqyD • or just http://flukeout.github.io/

  34. TIME FOR WORKSHOPS! • you have 90 minutes • you’ve

    got our “helpers” • download assets from:
 http://thewayforward.pl/pinksponge.zip

  35. GO!

  36. None