HSU Hour of Code

View this on a mobile device to experience it in virtual reality or click and drag and use the arrow keys on your computer. (fullscreen)

Hover the pink circle over and click the links to register today!

HSU Hour of Code 2018.pdf

December 3rd-7th 5-6pm

3rd floor of the Library

To celebrate Computer Science Education Week, the HSU Library's Digital Medial Lab hosts coding events in early December. The Hour of Code is the largest learning event in history- with tens of millions of students learning computer programming across the world. Stop by the third floor of the Library 5-6pm Dec 3rd-7th to learn coding basics and how to create 3D environments.

If you can't make it to the events, click on the links below to get started on your own with these free tutorials and activities.

Monday 12/3 5-6pm - Learn HTML & CSS to build a custom webpage!

Location: Library 308

Learn HTML & CSS to build a custom webpage!

Dash by General Assembly - 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.

Resources:

The tutorial we will be following: Dash by General Assembly
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/

Tuesday 12/4 5-6pm - Create CSS animations!

Location: Library 308

Create CSS Animations!

Learn how to create animations using keyframes in CSS with the HTML Academy's CSS Animations tutorial. This tutorial picks up from Monday's session, so if you are unfamiliar with HTML and CSS, please take a look at the Dash tutorial beforehand.

Resources:

The tutorial we will be following: HTML Academy's CSS Animations tutorial
CSS basics
- 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/
CSS Animations
- MDN Web Docs: Using CSS Animations
- Animista - try out various CSS animations to see how they behave

Wednesday 12/5 5-6pm - Use a code playground to create your own app!

Location: Library 308

Use a code playground to create your own app!

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. While not as necessary to understand today's session, you may also want to check out the HTML Academy's CSS Animations tutorial.

Resources:

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!

Thursday 12/6 5-6pm - Build a VR Game with Unity!

Location: Library 308

Build a VR Game with Unity!

Unity is a game engine that is free to download for personal use and is installed on various campus computers. It is a tool used by professionals to create video games and VR experiences. This session will demonstrate how to create a very basic game that can be rendered in VR on the Oculus Rift. Participants will have the chance to create their own games and preview the game in full VR using the Oculus Rift.

Resources:

The tutorial we will be following: Build Your First VR app (Oculus)
Unity User Manual (2018.2) (Unity)
Unity Tutorials (Unity)

Friday 12/7 5-6pm - Build VR on the Web!

Location: Library Scholars Lab (301H)

Build web-based Virtual Reality with A-frame!

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.

Resources:

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.

This site is openly licensed CC BY Tim Miller - Please re-use, re-mix, adapt, adopt and anything else.