Web Design for Educators
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.
Find online courses made by experts from around the world.
Take your courses with you and learn anywhere, anytime.
Learn and practice real-world skills and achieve your goals.
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..
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
Not for you? No problem.
30 day money back guarantee.
Learn on the go.
Desktop, iOS and Android.
Certificate of completion.
Welcome to the CoursePreview
In this lesson we go over some ideas for teachers who want to make a website. Some ideas are as follows:
You can create a site featuring the following:
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.
Links to the content
Textwrangler (download here)
Notepad++ (download here)
SeaMonkey (download here)
Cyberduck (download here)
|Section 1: Basic HTML|
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.
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:
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.
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).
In this video, we learn how to give form to text on an HTML page by using the paragraph and heading tags.
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.
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.
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.
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.
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:
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:
You usually should receive this from your hosting provider once you set up an account.
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)|
You can access the exercise files here.
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.
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.
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.
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.
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|
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.
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.
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.
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.
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
|Section 4: Including Multi-Media|
Adding an HTML5 Audio Player
Print Version in PDF
|Section 5: Wrap up and Review|
Making the index page
Making a Navigation Table
Branding your Page and Meta Info
Connecting with your Audience
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.