Session II - 27. Oct. 2021, 14:00-17:00

14:00 , 10min : arrival / warm-up phase

Waiting for people to arrive at the class room and settle in

14:10 , 10min : Recap

How did it go since last session. Did anyone come across any issues?
For those who are still catching up with basic web design: what hurdles did you encounter?

14:20 , 90min : Input (incl. break)

Intro:

For those who already done the basics of web design and got a glimpse on how
Javascript works, this session might be a bit dry (!= DRY), dull or boring.
But I want to establish a first basis here, so that everyone can create simple
web pages and integrate Javascript code into it. The next session will then
go more in depth on (modern) Javascript, after which we are able to create some
games.

We will walk along the lines of the
MDNs Getting Started with the Web Guide
and go through the HTML, CSS and JS basics.

15min for HTML, 15min for CSS, 30min for JS, plus Q&A and breaks. Then
additional 10min on HTML5 and semantic tags. Use course pages to demonstrate.
Concrete timing schedule below in subsections.

Slides: https://tantemalkah.at/2021/artful-coding/slides/session2.html

Pre-recording: https://base.uni-ak.ac.at/cloud/index.php/s/2NSnEjsexGDA2a5

Further resources on

• HTML:
  • https://developer.mozilla.org/en-US/docs/Learn/HTML
  • https://www.w3schools.com/html/default.asp
• CSS
  • https://developer.mozilla.org/en-US/docs/Learn/CSS
  • https://www.w3schools.com/css/default.asp
• JS:
  • https://developer.mozilla.org/en-US/docs/Learn/JavaScript
  • https://learnjavascript.online/ (needs a GitHub account)
  • https://www.w3schools.com/js/default.asp
• If you really want to dig deep (past this course):
  • https://www.freecodecamp.org/learn
    • Especially the Responsive Web Design (300h) and the JavaScript (300h) courses

Subsections:

14:20, 40min : HTML & CSS

15:00, 10min : B R E A K

15:10, 40min : Javascript

15:50 , 10min : B R E A K

16:00 , 15min : Reverse engineering the course web page

16:15 , 30min : Exercises and co-working

Create a page, containing at least:

• 1 heading
• 2 paragraphs
• 1 unordered list
• 1 image
• 1 button

With at least the following functionality:

• When the user clicks on the image, it changes (e.g. switch between two images; could also use more or random images)
• When the user clicks on the button, the user is asked for a user name and the heading is changed accordingly to greet the user

If you are unsure how to tackle this, just follow the MDN guide and create the page just as they do it. You still can change content and styling once everything works.

To submit your exercise, go to our shared base cloud folder into the "Session 2 - HTML, CSS and Javascript" folder. There you find an Exercises folder. Inside of it create a folder with your student ID and name, where you can put your solution (there is a placeholder folder there as an example reference). Put your solution there until the beginning of our next session, to get the full points on this exercise.

Helpful resources:

• MDNs Getting Started with the Web Guide - see the sections on HTML, CSS and JS
• Lorem Picsum
• CSS Playground
• For colors / color schemes:
  • Color Safe
  • Color Designer
  • Paletton

16:45 , 15min : Open questions & discussion

---

This page is part of the course website at https://tantemalkah.at/2021/artful-coding
All contents, where not otherwise noted, are licensed by Andrea Ida Malkah Klaura under a CC-BY-SA 4.0 license.