webdev-intro

View Github Repository Open presentation in a new window

pp2-ex

See all presentation from pp2-ex

webdev-intro

1 0

webdev-intro

Intro to Web dev

On Github pp2-ex / webdev-intro

Intro to web development

@greenify

seb@wilzba.ch

Tools

HTML

= HyperText Markup Language

  • <h1></h1>
  • tags: id, class (➙ e.g. <img id=foo>)
  • paired elements div, span, h1, code, ...
  • unpaired elements like img, br, hr, ...
  • head <!DOCTYPE html>
  • comments <!-- -->
  • DOM
  • W3C

Hello world

CSS

= Cascading Style Sheets

  • selectors
    • native HTML tags
    • classes ➙ .
    • ids ➙ #
  • Pseudo-classes :hover,:last-child, ...
  • combine selectors
    • #foo h1
    • #foo .bar
    • #foo:nth-child(even)
  • W3C

Hello CSS

CSS is powerful

SVG

= Scalable Vector Groups

  • a special DOM element svg
  • <svg></svg>
  • W3C

SVG in action

Github

Codecademy