Dash by General Assembly

This tutorial includes five projects centered on creating content for the web: a personal website, a responsive blog theme, a small business website, a CSS robot, and a mad libs game. By creating these projects, you'll learn the fundamentals of working with HTML, CSS and JavaScript.

For this Hour of Code event we will be completing projects 1 & 3 but feel free to complete all 4 projects to learn some advanced CSS techniques as well as the fundamentals of using JavaScript, a very useful programming language for the Web.

Useful Resources for learning more:

• HTML
  • Shay Howe's Getting to Know HTML guide: https://learn.shayhowe.com/html-css/getting-to-know-html/
  • HTML Dog's list of HTML tutorials: http://www.htmldog.com/guides/html/
• CSS
  • Shay Howe's Getting to Know CSS guide: https://learn.shayhowe.com/html-css/getting-to-know-css/
  • HTML Dog's list of CSS tutorials: http://www.htmldog.com/guides/css/
• Build a website
  • You can use the code that you write in these projects to publish your own website using free online tools such as:
    • Glitch.com and Codepen are two code playgrounds that allow you to create basic webpages and webapps and host them for free. Just copy and paste your code!
    • Neocities and Github Pages allow you to host static websites. Just copy and paste your code into the index.html pages once you've set up an account with one of these services.

Learning JavaScript with CodeCraft

Create a 3D world using CodeCraft and JavaScript with their Hour of Code Build to Learn course. This tutorial teaches the basics of JavaScript and gets you thinking in 3D by building with basic cubes. This tutorial covers strings, data types, variables, for loops and more.

Useful Resources for learning more:

• JavaScript basics
  • Codecademy's Introduction to JavaScript (35 hours)
  • HTML Dog's JavaScript tutorials

Learn how to use Glitch to create a website or webapp

There are many options for coding on the web but we'll be using Glitch, which allows you to create web apps completely online for free! We'll be using our HTML, CSS and JS skills from Monday and Tuesday, so if you weren't able to attend those, be sure to complete the Dash tutorial before coming to this workshop.

Useful Resources for learning more:

• About Glitch
  • The basics and video introduction: https://glitch.com/about/
  • Remix various projects and learn to code with Learn to Code projects.
  • Glitch Support Forums - got a question? Someone else has likely already answered it!

JSFiddle

Much like JSBin, JSFiddle allows you to quickly put together a small project and test out some code (JavaScript). It's free and easy to start up a project or remix someone else's!

Basic JSFiddle Tutorial

A note about encryption

All of the platforms listed on this page utilize HTTPS, an encrypted protocol that allows people to send and receive information from your site securely. If you create a project that doesn't use HTTPS, it is quite easy for their traffic to be snooped - for another person to see your communications. For projects that ask users to enter information, you should consider ensuring that you're using HTTPS. Even if you're not, it's a good practice to help make the entire web encrypted.

Tinkercad is a free and easy way to create 3D models online. We will explore the basics of using Tinkercad and creating objects by following their step-by-step lessons. For people attending Friday, we will be able to then use these 3D creations into a VR world using A-frame.

Useful Resources for learning more:

• Tinkercad
  • Advanced project tutorials
  • Upload your creations to share them on Sketchfab and Thingiverse. You can also find creative commons models to download and remix!
  • Use your 3D model in a VR project using A-frame! See Friday's lesson to learn more about A-frame, remix this project to see how to load .obj models, and/or check out the OBJ Loader component documentation.

On this final day of the Hour of Code, we'll work in a 3D appliction that is a JavaScript (web-based) framework developed by Mozilla. For those who created an object in Tinkercad, they'll be able to import it into A-frame and animate it, making it easy to share with friends.

Useful Resources for learning more:

• A-frame
  • When viewing an A-frame project, hit ctrl+alt+i to open the Inspector, which is a user interface that allows you to manipulate your scene like so:

• A-frame.io is the home of the framework and includes remixable projects and some (not-so-beginner-friendly) info about using it to create virtual reality and 3D.
• There is an A-frame template on Glitch that you can work with and not have to worry about hosting files and setting up your project.