Author:
Kim Wilkens
Subject:
Computer Science
Material Type:
Lesson Plan
Level:
Middle School, High School
Tags:
License:
Creative Commons Attribution-NonCommercial-ShareAlike 4.0
Language:
English

Create a Website

Lesson Overview

These days, tools exist so that anybody can build a website, but that doesn't mean anyone will want to visit it. This workshop will get you hands-on experience with the underlying code it takes to develop a website (HTML & CSS) as well as website design considerations. The culmination of this workshop will be the launch of your own website!

Learning Objectives:

  • Insert hyperlinks into a web page
  • Embed multimedia content into a web page
  • Identify & use HTML tags to add content to a web page
  • Identify & use CSS tags to change the style and layout of a web page
  • Identify & use openly-licensed work
  • Iterate on a design after feedback from target audience
  • Identify different parts of a web page using industry-recognized terms
  • Identify & use JavaScript to add interactivity to a web page

Mozilla Web Literacy Map

The Web Literacy Map identifies competencies and skills that the Mozilla community believes are important to pay attention to when getting better at reading, writing and participating on the web. This lesson is primarily focused on the Write strand.

Task 1 : HTML

HTML is the core building block of the web. You can't have content without HTML. In this activity students will get familiar with common HTML tags by adding text, hyperlinks and multimedia content to a web page.

Discussion:

  • Why use an image found with Creative Commons instead of any image from a google search?
  • Did you notice that most HTML tags have a start and end tag?
  • Why do you think that is?
  • What were you not able you able to do with HTML that you would expect to be able to do when you create a web page?

Learn about HTML tags

Remix the Google search page using Mozilla X-Ray Goggles

  • Drag icon up to your bookmark bar and select while on any webpage to remix
  • What can you update? Can you guess what the tags do?
  • Update the image by searching for an image through Creative Commons Search. Why not use any image from a google search?
  • Publish your remixed page (create an account using your student e-mail).
  • Be sure to make a copy of the URL (web address) so you can share it with others.

Experiment with HTML tags

Remix My Favorite Animal

  • Replace all the content (image, text & links) with your own favorite animal.
  • Try adding more content using appropriate tags.
  • Search for an image with pubic use license via Creative Commons Search.
  • Can you figure out how to add a YouTube video? Hint: look for the Embed code.
  • When you are done, select Publish. Congratulations - you have just created a web page!
  • Be sure to make a copy of the URL (web address) as you will be sharing it on your blog.

Learn more by trying out a couple of online tutorials

Task 2 : CSS

Websites have moved from content and layout being tied together to becoming more separate. CSS (cascading style sheets) are the key to this evoluation. They bring beauty and style to your website with fonts, colors, format and layout in a way that can cascade throughout all your web pages. In this activity, students will unlock the stylesheet of the web page they published during the HTML activity, so they can customize the look and feel of your page.

This video does a good job showing the evolution of content vs. layout.

Content vs. Layout

Discussion:

  • Can you identify all the changes that happened on the page when you enabled the <style> tag?
  • What are the benefits of content (HTML) and layout (CSS) being independent on a web site?

Experiment with CSS

  • Log into Thimble then select Find Your Projects under your username.
  • Select your My Favorite Animal Project that you created during HTML lesson.
  • Enable the stylesheet (style.css) by removing the comments around <link rel="stylesheet" href="style.css">.
  • You may need to fix your image to fit in its space. How would you do that?
  • Change colors. Hint: find hex values at Color Picker.
  • Change fonts. Hint: web safe fonts & google fonts.
  • Change background. Hint: image or color. Also check out the CSS Cheatsheet.
  • Check out the <div> and </div> tags and see if you can figure out how the simple 2-column CSS layout works.
  • When you are done, select Save.

Learn more by trying out a couple of online tutorials

Task 3 : JavaScript

JavaScript brings a web page to life. When stuff is moving around or user interaction is available on a web page, then you will probably find JavaScript behind the scenes providing the code for this interactivity. In this activity, students will see how websites use JavaScript by disabling it. Then they will play around in a JavaScript sandbox.

Discussion:

  • What interactivity would you like to add to a web page?
  • What do you think will be the most challenging part of adding it?

 

 

What is JavaScript?

You can see how websites use JavaScript by disabling it. Go to a site that has some interactivity and disable JavaScript on your browser:

  • From Chrome, select Menu -> Settings -> Content Settings (under Privacy). Select “Do not allow any site to run JavaScript”.
  • In Firefox’s address bar, type about.config and press Enter. Click “I’ll be careful, I promise!” In the search bar, search for javascript.enabled.Double-click on that row to change the value to False.
  • From Safari, select Preferences -> Security. Uncheck “Enable JavaScript”.

What features that no longer work on this website when you disable JavaScript?

NOTE: Be sure to enable JavaScript again!

Remix the JavaScript Sandbox.

  • Try updating the JavaScript code in this sandbox of code in the following ways. Notice the setup required for JavaScript code to run:
    • Predict It - change the question & answers
    • Move It (moveit.js) - change color, size & speed
    • Spin It (moveit.js) - change angle, num & rect size
    • Picture It (pictureit.js) - change drawing, image
    • Rotate It (spinit.js) - change step, angle, rect size

Remember that syntax errors are probably the most common errors you will get and sometimes the most frustrating to debug (if you get stuck, you can always smooth the sand over and try again:)

All done?

  • CodeCombat - learn JavaScript while playing a game
  • Code Maven - JavaScript Tutorial by Crunchzilla
  • BitsBox - learn JavaScript while creating an “app”

Task 4 : Design

Once students have explored the building blocks of the web - HTML, CSS & JavaScript, they have some concept of the power and limitations of web design and development. Now, they can take advantage of the myriad of template-based editors. But before jumping into template editing, having a plan is critical. This activity is all about students identifying what their website is about (planning) and how it will be laid out (wireframing). The attached resources can be used for making a plan that students can use for their personal website or for a website they create for a "client".

Now you need to figure out what your website is going to be all about. Check out the Website Design Considerations and Web Design Requirements document to make a plan. Then watch this video about wireframing and create yours.

What is wireframing?

Best Web Design Practices

Task 5 : Develop & Test

It's now time for students to collect their content and create their website. In this activity, the video tutorial uses the template editor Weebly, but any free template editor will work. Finally, the all important testing phase needs to happen before wrapping up. A project rubric is attached.

You are now ready to develop your website and then test it. See below for a video tutorial of Weebly, a template-based editor.

Create a website with Weebly

Once you feel like your website is ready to launch, be sure you have thoroughly tested it. Here's what the professionals do:

Functional testing (by you)

  • no dead links
  • no misspelled words
  • images & text credited

Usability testing (by someone else)

What people to find your site? Consider Search Engine Optimization (SEO)