Crea preliminary workshop programme

Polž

Source

CREA - programme

The goal of this workshop is to teach students how to create web pages and give them an understanding of the challenges they may encounter. At the end of the workshop, the students should be able to estimate the ammount of work required to implement their ideas.

Theme

Building a menagerie.

Lessons

HTML history

How web pages used to be written / created

Explanation

How and why HTML was created. How tables can be used to create a site layout.

Tasks

  • Create a web page containing some text and at least two pictures
  • Create a web page with a banner and sidebar

Developer tools

How to use a web browser to inspect a web page

Explanation

How to enable the web development tools in Chromium and Firefox

Tasks

  • Hide the div containing a monkey
  • Change the size of the font in the main paragraph
  • Add visible borders to the image of a Giraffe
  • Hide the overlayed pop-up on an actual web page
  • Which is the file which is slowest to load on a page

The box model

How the elements on a web page are placed

Explanation

How to create a layout using DIV tags

Tasks

  • Create a web page with a banner and sidebar
  • Line the animals up in a line
  • Have the monkey resize when you resize the window
  • Put the hat on the horse

CSS

CSS Selectors

Explanation

Why / how CSS selectors can be used

Tasks

  • Change the size of text in all paragraphs
  • Change the colour of the background for all four-legged animals

Javascript

Programming in Javascript

Explanation

Why Javascript was added to HTML.

Tasks

  • change the background color when the monkey is clicked

JQuery

How JQuery can make your life easier

Explanation

Using JQuery to access elements through their selectors

Tasks

  • make the Giraffe fade in and fade out
  • make the monkey bounce across the screen

Web architecture

What happens when you open a page in a web browser

Explanation

TCP/IP

How an Ethernet frame is constructed, why IP addresses were introduced, how to get data across the Internet reliably.

DNS

What a hosts file is, how to add an entry to the file, what the DNS does.

HTTP

GET, POST, HEAD, PUT, DELETE

CGI, PHP

How dynamic pages are created.

Tasks

  • set up a static web page
  • create a page using CGI which writes out a string depending on the GET parameters

Server-side programming

Deploying a PHP application

Explanation

What is a CMS, which are the most popular CMS solutions / frameworks. What is a relational database, what is an ORM. What is Node.js, why is it popular.

Tasks

  • set up Concrete / Drupal / Wordpress
  • create your own template for your CMS