Web Design for Educators
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
Wishlisted Wishlist

Please confirm that you want to add Web Design for Educators to your Wishlist.

Add to Wishlist

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
Last updated 12/2014
Current price: $10 Original price: $50 Discount: 80% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 1.5 hours on-demand video
  • 4 mins on-demand audio
  • 2 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Create A Website From Scratch
  • Easily Upload & Share Your Web content With Your Students
  • Build Online Quizzes (10 Times Faster Than Paper Quizzes!)
View Curriculum
  • Computer + Internet Access

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

Who is the target audience?
  • Teachers
  • Professors
  • Educators in general
Compare to Other Web Design Courses
Curriculum For This Course
31 Lectures
Welcome to the Course
3 Lectures 07:23

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.

Preview 03:30

Links to the content

Textwrangler (download here)

Notepad++ (download here)

SeaMonkey (download here)

Cyberduck (download here)

Software Needed
Basic HTML
9 Lectures 32:28

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>


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.

Preview 04:52

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).

Preview 02:59

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

Preview 03:46

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.

Creating Links

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


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.

Adding Images

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.

Moving Files / Changing Links

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.

Web Hosting and FTP

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:

FTP address
User ID

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

Uploading Your Site

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.

Updating a Site
Templates and HTML Editors (Seamonkey)
6 Lectures 15:55
Exercise Files

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.

Using a Template

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.

Modifying the Template

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.

Adding Text with Seamonkey

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.

Adding Images with Seamonkey

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.

Adding a Table
Adding a Quiz to a Website
6 Lectures 24:27

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.

Quiz Overview

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.

How to Write the HTML QUiZ

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.

Linking a Quiz with an Iframe.

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.

Creating a Quiz Using Google Forms

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.

Embedding a Google Quiz

Checking Results on Google Docs
Including Multi-Media
3 Lectures 07:47
Embedding Video

Adding an HTML5 Audio Player

Print Version in PDF
Wrap up and Review
4 Lectures 12:50
Making the index page

Making a Navigation Table

Branding your Page and Meta Info

Connecting with your Audience
About the Instructor
Roger Todd Beuckens
4.0 Average rating
1 Review
1,204 Students
1 Course
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.