Build something great...

But how???

Web Development

in practice

By Bastiaan van der Plaat

if ("I" like @this) then {
  say("Give a 🍕 party!")
} else {
  say("English is a great language!");
}
then get(a coffee) and sleep(for a while)

HTML

CSS

Deploy

HTML

The markup language for the web to make cool new stuff

<h1>My English Speech!</h1>
<p>This is a <a href="https://html.com/">HTML</a> page!</p>

An element

The blocks in HTML

<p>Text</p>

Attributes

Extra options for your elements

<a href="https://google.com/">Google</a>

An example

"Live coding à la creme" ~ bplaat

Basic HTML tags

CSS

The language to style your cool new HTML pages

<style>
  a {
    color: blue;
  }
  a:hover {
    color: red;
  }
</style>

This is plain CSS

First you have a selector...

a {
  ...
}

h1, p {
  ...
}

a:hover {
  ...
}

<p class="red-color text-center">This is red text!</p>

.red-color { color: red; }
.text-center { text-align: center; }

then you have declarations!

body {
  background-color: lightblue;
}

p:first-child {
  color: red;
  /* This is a single-line comment */
  text-align: center;
}

/* This is
a multi-line
comment */

Basic Declarations

Deploy

Share your cool new site with everyone you care about

$ npm install -g @angular/cli
$ ng new my-app
$ cd my-app
$ ng serve --open

Login at itslearning

Click on 'Uw bestanden'

Publish your site with itslearning

Click on 'Uw webbestanden'

Upload your .html file

Click on 'Link naar startpagina'

Publish your site with itslearning

Enjoy your new site!

ThunderBase

Other sites

w3schools.com

developer.mozilla.org

css-tricks.com

developers.google.com/web

bastiaan.plaatsoft.nl

Made by Bastiaan van der Plaat

if ("you" have @enjoy) then {
  say("Have a nice day!")
} else {
  say("Eat some 🌯 and sleep.")
}
then wait(for a while)

slides.com/bastiaanvdplaat/webdev