intro-to-coding

Intro to Coding workshop 🌻

A 2-hour session, introducing HTML (and maybe a bit of CSS). As taught by @yvonne-liu and @charlielafosse at UP in April 2019.

Structure:

Intro to web pages + HTML

• Slides here

Teach HTML basics

• Signup to Codepen
• Slow codealong on how to make HTML elements (opening and closing tags)

freeCodeCamp

• Introduction to Basic HTML and HTML5
• Work through first 3 or 4 exercises together
• Try and get at least as far as 'Link to External Pages with Anchor Elements'

Inspect/Dev tools fun

• Delete Google doodle
• Add own HTML elements!

Slides on HTML + CSS + JS

• Back to the slides
• Final slide is intro to HTML challenge

HTML challenge: Make own tribute page

• Back on codepen
• Show students the user stories for their page (slides above)
• Show this dashing example
• Could add fun extras at the end if time? Add a tiny bit of CSS and JS (i.e make p elements blue, unleash an alert())