Web Development 3: Creating (and Hosting) HTML Pages from Scratch

Screen Shot 2015-09-08 at 10.51.26 PM

Skill Level: Level 3

Badges Earned: Web Development Level 3

Description: Creating cracker jack HTML pages is one thing. Creating and hosting your own website is another thing. For this next project, we’ll create a website, and host it in the cloud. We’ll use Shiftedit for this on a Chromebook.

Before you create anything, fill out a Challenge Proposal.  If you’re creating a website- what purpose will it serve? Who will the audience be?

 

Part I: Log into Shiftedit with your Google username:

https://shiftedit.net/login#

Screen Shot 2015-09-08 at 11.21.44 PM

 

 

 

 

 

 

 

Part II: Create a new “Site.” 

Screen Shot 2015-09-08 at 11.20.06 PM

Part III: Choose Google Drive as a place to save your files. Server Type. 

Screen Shot 2015-09-08 at 11.20.15 PM

The next part will take a while as it brings in all of your Google Drive folders.

Part IV: Create a new Page using HTML. Use the little plus (+) button. 

Screen Shot 2015-09-08 at 11.34.39 PM

Now- this is the challenge. Create your HTML page, and incorporate many of the elements you’ve used before:

  • Images
  • Color
  • Text
  • More that one page
  • Video?

Some tips along the way: Take pictures of your final project, and get an instructor to visually check out your project, if you can. Create a “demo video” of all of your projects. Why? They can be used as evidence of completion. One demo video can be enough evidence to receive numerous badges. Only needs to be about 30 seconds to 1 minute.

Earn Your Badges:  When you’re done, earn your badge!

3e61fe17fedf9c8397f2e7bac3724f23_15

Web Development Level 2: Codecademy Course

codecademy-html
Screencap of Codecademy

 

Skill Level: Level 2

Badges Earned: Web Development Level 2

Description: In your lifetime, at some point, you’re going to need to understand how to create a website, and you’ll need to know some HTML. This Codecademy course will get you to where you need to be.

Before you create anything, fill out a Challenge Proposal.  What problem will knowing HTML solve?

Part I: Make sure you are logged in with your Google Username, then click here:

https://www.codecademy.com/learn the start HTML and CSS.

The course will take you a few periods to complete.

Part II: Create a basic HTML Website Using Webmaker

For this next part, you are going to create an original HTML site using the new Thimble. What is that? Check it our here:

What will you create? Go to https://thimble.mozilla.org/  (sign up) and click on the Remix this Project for the Back to School project. Before you go any further, fill out a Challenge Proposal.  What kind of problem will your HTML web page solve? Make sure to:

  1. Follow all the instructions on the Thimble tutorial (inside the code).
  2. Change colors, text, and all elements, to make this truly unique and your own.
  3. Share it!
  4. Have fun!

Some tips along the way: Take pictures of your final project, and get an instructor to visually check out your project, if you can. Create a “demo video” of all of your projects. Why? They can be used as evidence of completion. One demo video can be enough evidence to receive numerous badges. Only needs to be about 30 seconds to 1 minute.

Earn Your Badges:  When you’re done, earn your badge!

2d4a22c61a225deaec3399a5199a3371_15

Web Development Level 1: Codecademy and Site Design

Image via Wikimedia Commons
Image via Wikimedia Commons

Skill Level: Web Development (Level 1)

Badges Earned: Web Development (Level 1)

Description: To earn your Level 1 Web Development badge, you will need to complete both of the experiences below. One is an online exercise at Codecademy.com, the other is a basic website at Weebly.com, Google Sites, or

Part 1: 

For this first part, you must complete one of these three exercises. Remember to SIGN UP for Codecademy.com using your Google Email. Click here, and simply click the red button (bottom right). Choose one of these:

About Me

Sun, Earth, and Code

Animate Your Name

Part 2: 

For this second part, you will need to create a basic website that serves a purpose, or solves a problem. Remember all websites serve a need and have an audience. You could create an online journal for yourself, create a photo blog, or a site that sells a product. You’ll want to do your best to cite any images or text that you use (that’s not your own).

Resources that will help:

Getting Started With Google Sites. 

Getting Started With Weebly. 

Getting Started with Wix. 

File Your Plan:

Always Fill out a Challenge Proposal: Design Thinking Challenge Template. 

Some tips along the way: Always document your process. Take pictures and video, if you can. Why? We suggest creating a “demo video” of all of your projects. Why? They can be used as evidence of completion. One demo video can be enough evidence to receive numerous badges.

Earn Your Badges:  When you’re done. you’ll earn the badges below!

738930e7785d17d2bb2ed229b2a46eda_15