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