# Artful Coding WT2022 Session 2 - 12. Oct. 2022, 17:00-18:30 Slides: https://tantemalkah.at/artful-coding/2022wt/slides/session2.html Disclaimer for the basic refresher sessions: > 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. We will walk along the lines of the [MDNs Getting Started with the Web Guide](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web) and go through the HTML, CSS and JS basics. 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 ## 17:00 , 10min : arrival / warm-up phase Waiting for people to arrive at the class room and settle in. Meanwhile doing a little get to know each other exercise. ## 17:10 , 20min : HTML Input ## 17:30 , 10min : Q&A ## 17:40 , 20min : CSS Input ## 18:00 , 10min : Q&A ## 18:10 , 20min : In-class exercises and co-working Create a page, containing at least: * 1 heading * 2 paragraphs * 1 unordered list * 1 image * 1 button (without functionality - it does not have to do anything when you click on it) 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. Helpful resources: * [MDNs Getting Started with the Web Guide](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web) - see the sections on HTML, CSS and JS * [Lorem Picsum](https://picsum.photos/) * [CSS Playground](https://www.css-playground.com/) * For colors / color schemes: - [Color Safe](http://colorsafe.co/) - [Color Designer](https://colordesigner.io/) - [Paletton](https://paletton.com/) --- This page is part of the course website at https://tantemalkah.at/artful-coding All contents, where not otherwise noted, are licensed by [Andrea Ida Malkah Klaura](https://tantemalkah.at/) under a [CC-BY-SA 4.0 license](http://creativecommons.org/licenses/by-sa/4.0/?ref=chooser-v1).