Video Embedding Tutorial Assignment

Screenshots

If you do not know how to take screenshots with your computer, do a quick search to make sure you know how and can do it successfully.

One of the most common reasons to add a video to a website is to inform people about a topic in an efficient way. In this spirit, you will be creating a tutorial web page on how to embed a video into a website. As Neocities is a free web hosting service, they cannot accommodate the upload of audio and video files, so you will not be able to demonstrate the HTML5 method. However, you can demonstrate how to embed a video from a video hosting service (like YouTube or Vimeo). This is beneficial since video hosting services are the most common method of sharing videos.

For this assignment, your tutorial should include directions on how to embed a service-hosted video into a website. Each step of your directions should be accompanied by a screenshot that demonstrates the step. Crop your screenshots to focus only on where the action is being taken—do not include images of entire desktop screenshots for each step. Finally, whatever video you used for screenshots in the tutorial should be successfully embedded at the end of your assignment's page. Note that some videos do not have the embed feature enabled if the uploader did not want the video used outside of that video service. Do not use a video with any mature content or profanity for your example.

Your tutorial web page should be well-organized with a nice layout, using CSS rules from an external style sheet for the majority of the page's styling.

Your completed assignment should contain all of the following:

a screen with film strips running behind it

Sufficient text directions for the steps to embedding a video are present.
A screenshot is paired with each step to demonstrate the action.
Screenshots are cropped to focus on where the step is taking place.
The directions for embedding a video are accurate.
Most or all of the page's styling is handled by an external style sheet.
The example video used in the tutorial is embedded at the end of the page.

When you're done, save your HTML file, images and CSS file, and upload all of them to your Neocities account. Then submit the assignment link for your HTML file to your teacher. You will be graded using the following rubric:

Directions	1 point	Text directions are present.
Screenshots	1 point	A screenshot accompanies each step.
Cropping	1 point	The screenshots are cropped specifically to the step's action.
Accuracy	1 point	The directions are clear and accurate.
Styling	1 point	Most or all page styling is handled by a CSS file.
Example Video	1 point	The video used for the tutorial is embedded and functioning.