#Usability Testing Introduction

Why not use code to help your students introduce themselves? It's an easy way for you to introduce your students to a little bit of computer science and build their coding literacy.

Students work through the prompts in the index.html code to construct their own web page that exlains who they are and where they are going. I ask that my students actually present their page to the rest of the class. But before we do so--and even while the presentations are going on--I give students time to work together to debug their projects.

This template also allows the user to mix and match div. blocks should students wish to further customize their work. It's a great introduction to coding that will allow them to use our other tools found: HERE

Get started!

1. Go to the Usability-Studies-Introduction repository: HERE

2. Click "Code" then "Download ZIP" to your local computer.

3. Find this folder in your downloads. Move this folder to a secure place. You will return to this folder to manage your scripts and other assets like images, pdfs, etcetera.

4. Download and/or open a text editor like Visual Studio Code.

5. Use the text editor to open the style.css and index.html documents from your project folder.

6. Start working with code by reading through the index.html where you'll find instructions on how to build your own web text!

7. Once you have modified and added your files to your project file, you will want to publish to the web. GitHub provides a good solution for "free." Create a GitHub account, then create a new repository for this webtext. Click "uploading an existing file," (push) your files into this repository. You'll need ALL of your assets to make your webtext function properly. Upload assets, then hit "Commit changes."

8. Now go to your repository "settings." Scroll down to "GitHub Pages" and change the setting from "none" to "main." Hit "Save"

9. This will provide you with a published GitHub URL.

10. Test the URL in a browser. Magic, no? Actually, it's computer science.

Check out our other cool coding tools HERE

Watch our instructional video (Note that this video uses a different template. Please use this template.)

Text Editor Optimization

Setting up Visual Studio Code for Windows and CodePad for Chromebooks (Our recommended code editors)

Visual Studio Code (Mac)

1. Download "Visual Studio Code"
2. Add HTML Preview - from the dropdown menu, select View>Extension.
3. In the search bar type "Live Preview."
4. In the right-had corner, select the "show preview" button to see a.
5. Adjust text wrapping - from the dropdown menu, select View>Word Wrap (this will force lines of code to conform to your viewer tab.)

Visual Studio Code (Windows)

1. Download "Visual Studio Code"
2. Add HTML Preview - from the dropdown menu, select View>Extension.
3. In the search bar type "Live Preview."
4. In the right-had corner, select the "show preview" button to see a live version of your code.
5. Adjust text wrapping - from the dropdown menu, select View>Word Wrap (this will force lines of code to conform to your viewer tab.)

Code Pad (Chromebook)

1. Download "Code Pad Text Editor" from Chrome Web Store.
2. From the dropdown menu, select Editor>IDE Preferences
3. Toggle "Word wrap limit" to the middle value (this will force lines of code to conform to your viewer tab.)