Web Design for Educators

Learn to Design a Website From Scratch! Perfect for Those with ZERO technology Experience
4.0 (1 rating) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
1,204 students enrolled
$50
Take This Course
  • Lectures 31
  • Contents Video: 1.5 hours
    Other: 5 mins
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 11/2014 English

Course Description

Do you feel like you are behind the curve when it comes to technology?

Get totally overwhelmed at the thought of learning how to create a website, and upgrade your tech skills for the classroom?

----------------------------------------------------------------------------------

Tech is taking over the classroom, and educators need something geared towards them!

Who this is for:

This course is built on the inspiration of my 20 years of teaching experience, and having taught thousands of educators about tech. It is geared towards 1) Teachers, 2) Professors, 3) TAs. If you are any form of educator, this is the perfect course to build your tech skills quickly and easily.

Use the skills you will learn in this course to..

  • Build or edit a website fast
  • Create content and publish your work online
  • Build online quizzes that you can grade in 1/10 the time of a paper quiz
  • The down and dirty of hosting, HMTL, links and more (don't worry - we keep it simple!)

This is the ONLY website course specifically geared towards educators. Skip all the necessary, complicated aspects of web design, and learn EXACTLY what you need to know upgrade your skills for the classroom.

Enroll now and let's get started!

- Todd, Educator of 20 years, Ed-Tech Expert

What are the requirements?

  • Computer + Internet Access

What am I going to get from this course?

  • Create A Website From Scratch
  • Easily Upload & Share Your Web content With Your Students
  • Build Online Quizzes (10 Times Faster Than Paper Quizzes!)

What is the target audience?

  • Teachers
  • Professors
  • Educators in general

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Welcome to the Course
Preview
03:06
03:30

In this lesson we go over some ideas for teachers who want to make a website. Some ideas are as follows:

  • Content site for a flipped classroom
  • Content site for self-access study
  • Online textbook
  • Educational site a global audience

You can create a site featuring the following:

  • History lessons
  • Science lessons
  • Language lessons
  • Short stories
  • Class projects

and many, many more.

In our project site, we make a site to learn English using text, Youtube videos, and a quiz, which can serve as an easy model to replicate. A basic site usually only needs a visual element, level appropriate text, and an interactive quiz to be highly effective.

Article

Links to the content

Textwrangler (download here)

Notepad++ (download here)

SeaMonkey (download here)

Cyberduck (download here)

Section 1: Basic HTML
04:52

In this lessons, we begin by looking at a basic HTML page. HTML just means Hyper Text Markup Language and it is the language web browsers use to read web pages. When you create a web page, you write it in HTML so it can display on the web or on a browser on your computer.

Software needed!
You will need either one of the following text editors to create your first HTML page.

For the Mac: text wrangler (you can download it here)
For the PC: notepad++ (you can download it here)

For this lesson, just follow along and then at the end, try to write the same HTML tags as shown on the video. Below is the basic syntax we will use:

<!doctype html>

<html>
<head>
<title></title>
</head>
<body>
</body>
<html>

You can copy the code above and paste it in a text editor to create your first HTML page. Just watch the video and if you get stuck you can use the code above.

02:59

When you first start a website, it might take time to develop content and materials. However, it is a good idea to create a welcome page explaining what to expect on the website. Therefore, before we start writing code, students of this course should try write a short intro page to their site. A good intro page might provide the following information.

What is the site? What can viewers do there?

What is the purpose of the site?

Who is the creator?

What content will the site have in the future?

How can people reach you? (You will learn how to add contact forms in future lessons).

03:46

In this video, we learn how to give form to text on an HTML page by using the paragraph and heading tags.

05:45

In this lesson, we learn how to add links to other webpages outside of our website. In this tutorial, we show how to add links to a contact form, an opt-in list, and a video on youtube.

In future tutorials we will learn how to add links to pages within our site.

03:34

In this lesson, we learn how to add images to our web page. We will add some small images to the page to make the page stand out when visitors first view it. Pages with no images appear bland and are not very engaging to the viewer so it is important to add images or graphics to our pages.

You can add the following three image formats

.jpg
.png
.gif

Also, when you add images, be sure to resize the images to their desired dimensions before linking them to a page. Also, try to use images with a lower resolution and file size. Images should be no larger than 100 KB is file size.

02:47

In this lesson, we begin to organize our content. We create a folder for the site and an folder within that for the the images and we update the links so the images still appear on our page.

02:38

In this lesson, we learn how to get hosting for our website and software we can use to transfer our files from our computer to our web server online.

For web hosting we look at Blue Host, which is a commercial hosting service, and Greatnow.com which offers free hosting with the option to pay for add free hosting as well.

We also use Cyber Duck with is a free FTP software. FTP means File Transfer Protocol and refers to transferring your files from your computer to a server online.

To make the most out of this lesson, students should do the following:

Acquire hosting space online.
Download Cyber Duck or another FPT software.

04:03

In this lesson, we learn how to upload our first basic site from our computer, to a hosting online so that our site goes live!

To do this on your own, you need the following:

Hosting
FTP address
User ID
Password

You usually should receive this from your hosting provider once you set up an account.

02:04

Now that we have a site online, we need to know how to make changes to it, so in this tutorial we go over how to change a site on your computer and then overwrite a file online in order to update or ammend content on the site.

Section 2: Templates and HTML Editors (Seamonkey)
Article

You can access the exercise files here.

02:07

In this lesson, we begin using a template to create our content. Rather than take a lot of time learning how to structure a basic page, we are going to use a template to speed up the content creation process so your site can begin to shape shape quickly.

You can download the template from this dropbox folder.

Also you will need to download the software browser Seamoney, which you can get here. Seamonkey is a browser and HTML editor that allows you to edit pages in a editor that lets you see how the page looks as you make changes. This process is called (WYSIWYG which stands for What you see is what you get).

Using a WYSIWYG is easier than coding in a text editor like Text Wrangler or Notepad++, although at times it is less convenient for working within the code. As a result, we will use both from here in the lessons series depending on which editor is best for the situation at hand.

01:54

Now that we have a template to use, we need to modify it slightly for future lessons. Here, we learn how to make small changes to the template such as changing the name of the site on the page.

03:27

In this lesson, we learn how to add text to a page. We take written copy from an text document and add it to the web page.

04:24

In this lesson, we go over adding images to the web pages using Seamonkey. We cover using the editor to insert images on the page and add some meta information about the image.

03:48

In this lesson, we learn how to use Seamonkey to easily add a table to a web page in order to put information in a grid format so it is easy to understand and access.

Section 3: Adding a Quiz to a Website
02:40

In this section we go over how to add a quiz to a web page without using any special coding. We will look at how to make a quiz using basic HTML with the template provides, and we will also look at how to use Google Forms to make a quiz for a site.

07:13

In this lesson, we learn how to make a basic self-grading quiz. The creator can adjust the number or questions and answers. Also, the creator can provide the answers that views can access by clicking on a link on the page.

02:45

In this lecture we show how to use link a quiz using the iframe tag so it appears on the page within a determined area.

05:10

In this lesson we learn how to create a quiz using Google Forms. Using Google Forms is a good way to keep track on student activity and also allow students to compare their answers with the rest of the quiz takers.

04:52

In this lesson we learn how to embed a quiz using Google Forms to a web page. Google Forms allows teachers to keep track of student responses and for students to compare their results with others.

Checking Results on Google Docs
01:47
Section 4: Including Multi-Media
Embedding Video
02:50
Adding an HTML5 Audio Player
03:53
Print Version in PDF
01:04
Section 5: Wrap up and Review
Making the index page
01:11
Making a Navigation Table
05:52
Branding your Page and Meta Info
03:18
Connecting with your Audience
02:29

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Roger Todd Beuckens, Ed Tech Specialist

I am a teacher with over 20 years experience in classroom teaching and I have also created several e-learning websites. My career in ED-TEC began twelve years ago when I started making websites for my students. At the time, there were few websites that were both free and affective, so I taught myself how to create e-learning sites and began creating digital content that was easy for both students and teachers to use and access.

Ready to start learning?
Take This Course