Creating a Website Made Easy

Learn how to choose a domain, find a web host, plus design and code your website in HTML5 and CSS3.
0.0 (0 ratings)
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.
8 students enrolled
$19
$20
5% off
Take This Course
  • Lectures 34
  • Length 5 hours
  • Skill Level Beginner Level
  • 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 6/2015 English

Course Description

This short course makes it easy to build your own website with step-by-step lessons and hands-on projects that have you apply what you learn. With each lesson, you create a piece of your very own website. When done, you have a complete website using the latest technologies.

Master the Basics of HTML5 and CSS3 for Creating Your Own Website

  • Learn how to set-up a website.
  • Learn how to choose a domain name and hosting company.
  • Create your first web page in under 60 seconds.
  • Learn how to organize your project with folders.
  • Build your own website template file.
  • Master the details of colors, backgrounds and pictures.
  • Create tables and lists in HTML.
  • Understand the details of links, and relative and absolute addressing.
  • Learn CSS one step at a time.
  • Master CSS classes and IDs.
  • Control how your CSS elements interact with mastery of combinators.
  • Create dazzling web pages with CSS3 special effects.

Step-by-step learning of web technology basics that get you ready to build your own website.

This course takes you from a broad overview of setting up a website and then drills down into the details of headings, paragraphs, tables, lists, colors and links, for a solid understanding of HTML.

Then, you graduate to CSS3 and HTML5. You learn how to control the layout of your page with positioning and floating elements. You learn to handle color, transparency, borders, backgrounds and images. You even learn some of the special effects that can make your website uniquely your own -- things like, rounded corners, drop shadows, and see-through backgrounds.

This course can be finished in under a week with as little as an hour a day. Each step is seemingly easy, building on the skills in earlier lessons. Most lessons include an Action Item where you take the facts you've learned and put them to use creating your own website. The course includes 4 handouts detailed with facts and resources to help you complete your website project.

Building a website can be fun and rewarding. This course shows you how to build it and to get it hosted so the rest of the world can enjoy your work.

What are the requirements?

  • You should already be familiar with the basics of operating a computer, using a mouse, copying files and renaming them.

What am I going to get from this course?

  • Build a beautiful, fully-functional static website with HTML5 and CSS3 from scratch.
  • Achieve a solid knowledge of basic HTML5 and CSS3 in less than 5 hours of lessons.
  • Learn by doing. Each key lesson includes a project with step-by-step instructions to give you hands-on experience producing results with what you've learned.

What is the target audience?

  • This web development course is for newbies.
  • It's also for those who know a little, but want a solid foundation in HTML5 and CSS3.
  • And it's for those who may be a little rusty on the basics and want a quick refresher.
  • This is also for those who enjoy a new perspective on something they've already learned.
  • This is not for busy experts who already know HTML5 and CSS3.

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

Section 1: Overview
03:37

This lesson gives you an overview of the course and the topics to be covered.

2 pages

This handout gives you many of the resources which could make building your own website far easier. Includes links to free software.

06:21

Preparing for the lessons ahead, first by showing how easy it is to create a web page. If you have never created one before, here you create your first in mere seconds.

07:02

You learn about top level domains like, .com, .net and others. You also learn about choosing a domain name and registering it so you have a meaningful address on the internet.

Includes a project to research potential domain names and to register one, if you are ready.

04:50

Getting your website files hosted on the internet is an important, one-time action. Here are some of the things to look out for when choosing a company to host your website.

Includes a project to investigate specific features of web hosting companies before deciding on which one is right for you.

01:07

We review the course overview, briefly repeating the concepts we learned in these first few lessons. This will help create a solid foundation for the remainder of the course.

Section 2: HTML Basics
03:05

This lesson gives an overview and introduction to HTML and the topics to be covered in this section.

2 pages

This PDF handout gives you the essential elements of a web page, key design considerations, website arrangement, and reviews domain name selection and web hosting details. With this, you are armed with the knowledge of how to put together a website.

16:38

This lesson shows you,

  • The specific elements of a web page,
  • Discusses why they are needed, and
  • Shows the arrangement of files and folders on a live web server.

It also discusses the need for a web page template file to speed the development of a website and to ensure that all future pages to be created remain consistent across your site.

The project in this lesson walks you through the steps for setting up some basic folders to be used throughout this section of the course and starting the creation of your HTML template file.

5 pages

This PDF handout gives you a handy reference of key HTML tags for setting up your website, including,

  • Core tags for setting up your page, head section and body section.
  • Headings and paragraphs.
  • Tables.
  • Span, div and comments.
  • Fonts.
  • Colors.
  • Pictures and backgrounds.
  • Bullets and numbered lists.
  • Forms (select options, textarea and various input types).
  • Links, including details of relative and absolute addressing.

05:19

This lesson tells you how to use,

  • Paragraph tags.
  • The 6 levels of heading tags.
  • The <br> line-break tag.
  • And the non-breaking space.
The accompanying project gives you hands-on experience creating headings, paragraphs, line breaks and keeping words together with the non-breaking space.
06:30

This lesson covers the details of building a table to display your data. It also covers,

  • The <table> tag and the attributes for controlling its appearance and behavior.
  • The <th> tag and its default formatting for column headings in your table.
  • The <tr> tag for rows of data.
  • And the <td> tags for each cell in a row.
The project in this lesson walks you through the creation of a simple table.
08:04

This lesson introduces,

  • <span> tags.
  • <div> tags.
  • And comments.
Each of these can be used to organize the elements on your web page. Comments can also document your code so it is easier to manage.The lesson also covers tags that add emphasis and style to your text, including,
  • Italic (<i>, <em>, <dfn>, <cite>).
  • Bold (<b>, <strong>).
  • Highlight (<mark>).
The project accompanying this lesson gives you hands-on experience with many of these elements and gives you a taste of inline CSS.
08:23

This lesson makes you a budding expert on typefaces by drilling deep into the topic for better understanding. Here we cover,

  • Specific examples of font families.
  • The descriptive terms related to letter forms (descenders, ascenders, x-height).
  • Analysis of specific font families for readability.
  • Examples of serif, sans-serif and novelty typefaces.
  • And attributes of the <font> tag that allow you to control size, color and typeface.
This lesson also covers some of the special HTML symbols that can make your web pages look more professional--symbols like,
  • Em dash and en dash.
  • Financial symbols, like cent sign, euro symbol.
  • Legal symbols, like copyright, trademark and registered trademark symbols.
  • International letter forms with diacritics.
The project with this lesson gives you experience working with font families and using specialized HTML symbols.

12:08

This lesson goes in-depth into colors and how the computer's palette differs from a painter's. In this lesson, you learn to use Hexadecimal numbers to represent colors by controlling the three color channels,

  1. Red,
  2. Green, and
  3. Blue.
You learn to decipher a color by reading its Hexadecimal representation. By the end of this lesson, you should be able to create any color on demand, by adjusting the three values for red, green and blue.


The project in this lesson gives you more hands-on experience using various colors in Hexadecimal form. When done, the code for colors will no longer look so foreign.


14:12

In this lesson, you learn all about the <img> tag and its key attributes for controlling its properties. This lesson shows you, step-by-step, acquiring pictures for your website that you can legally use. It details how to give proper attribution or credit to the copyright owner of the picture. You learn all about controlling,

  • Source (src).
  • Alternative description for those who don't have a graphics monitor (alt).
  • Dimensions of your picture (height and width).

This lesson also teaches you about backgrounds and how to use pictures or color to make your web pages look more dazzling. You also learn about changing the background of a table and the individual elements within a table.

The project in this lesson gives you experience acquiring a picture and using that picture on your very own web page. You also change the background color to something more pleasing.

08:51

This lesson teaches you everything you need to know about ordered (ol) and unordered (ul) lists.

When done with this lesson, you will be able to establish an ordered list with its very own starting point and numbering type. You can chose from,

  • Arabic numerals.
  • Capital letters.
  • Lowercase letters.
  • Uppercase Roman numerals.
  • Lowercase Roman numerals.
You will also be able to create unordered lists using one of three bullet types:
  • Discs.
  • Circles.
  • Squares.
And finally, you learn about nested lists and how HTML will automatically create a hierarchy of symbols for your list within a list, like a list of countries, states and cities.


The project in this lesson gives you experience working with both kinds of lists.



13:20

This lesson teaches you how to create professional looking forms with all the elements found on established websites, including,

  • Select tag for drop-down lists.
  • Option groups to organize your lists for easier readability.
  • Option items to present each list item.
  • Text areas for your visitors to type in messages.
  • Input items of various types.
When done with this lesson, you will be able to create input elements for,
  • Text boxes (to be used for things like First Name, Last Name and Email).
  • Check boxes.
  • Radio buttons.
  • Submit button.
  • Reset button.

The lesson comes with a sample sendmail.php script file for handling your form data. It also briefly discusses the security concerns involved and possible solutions your web hosting company may have.

In the project portion of this lesson, you create a full email form for your website's Contact page.

16:18

This lesson shows you how to build hyperlinks for your website and how to use the three key attributes of the <a> tag,

  • href--the address of the destination or target page or file.
  • target--the method your browser is to use in displaying the page and how to control this.
  • download--for instructing the browser to download a file to the visitor's computer instead of display it in the browser.
This lesson also teaches you how to establish an ID attribute in your web page and to use that as a target for a hyperlink. This allows the visitor to jump to a different location within the same page.


This lesson shows you how to use pictures instead of text for your hyperlinks. This allows you to use pictures as buttons.

And finally, you learn about the two different types of addressing,

  1. Relative addressing, and
  2. Absolute addressing.
With this knowledge you become a master of hyperlinks, navigating folders within your own website to target a specific file and targeting locations within pages on someone else's website.


The project accompanying this lesson walks you through the creation of a site map link list which includes a jump to an ID tag for recipes in one of your own web pages.



02:26

This lesson gives a quick review of all the topics covered in this section and helps to prepare you for the upcoming quiz. More than that, it reinforces the knowledge you've gained so that building your own website becomes easy.

Checking Your HTML
10 questions
Section 3: Making CSS Easy
04:32

This lesson gives a broad, bird's eye view of CSS and covers briefly the topics taught in this section of the course.

This is a rough road map to give you an idea of the journey ahead.

PDF Handout - CSS Basics: How to Control the Look of Your Web Pages
10 pages
07:48

This lesson starts with the doctype browser instruction essential for gaining the maximum benefit from HTML5 and CSS3. It tells what to type and where to put it. Then, we jump into CSS, learning about the three types,

  1. External,
  2. Internal, and
  3. Inline.
You learn the basic structure of each style statement, including,
  • Selector,
  • One or more declarations of
  • Property:Value pairs.
You are taught simple examples and how to combine style declarations for elements that share the same specifications.


The project with this lesson has you create your first CSS file.

14:10

In this lesson, we dive into the details of your web page's head section. Here, we will find,

  • Title tag.
  • Link to the website's icon.
  • Inserting Meta tags that help the search engines find your page.
  • Link to your external style sheet.
  • And style tag for internal CSS.
The project in this lesson sets you up for all the CSS lessons to come. In it, you start your main.css file. You also create your CSS template file for building your new website. In your template, you establish a link to your main.css so all your new web pages will know what style to follow.
20:00

In this lesson, we dive into the details of specific CSS selectors, converting your old HTML tags into elements with style. We start with the body, p and various heading selectors. We also touch on the subject of CSS classes and how they extend the power of CSS. This lesson presents a real-world example of how multiple styles cascade into one.

We then look into background images and colors, and the properties which control them:

  • background-color,
  • background-image,
  • background-repeat,
  • background-attachment, and
  • background-position.
We also look at how CSS3 has expanded out ability to include multiple images in the background. This can be useful for muted images that cover the entire background and more decorative images that can find a position on your web page.


Finally, we look at a number of text properties and how to master the look of the words we use on our web pages. Properties include,

  • color,
  • text-align,
  • text-decoration,
  • text-transform,
  • text-indent,
  • letter-spacing,
  • line-height,
  • word-spacing, and
  • CSS3 text-justify.
In the project section of this lesson, we put many of these elements to work on your own website template file.
16:52

In this lesson, we show how fonts are handled in CSS. With CSS3, you also gain the ability to use your own, properly-licensed fonts on your own website, using the @font-face rule.

Once you've mastered fonts, we dig deeper into tables and how CSS makes tables a lot prettier.

Finally, we look at links and how to control the look of them depending on their current state:

  • Unvisited,
  • Visited,
  • Hover (when the mouse is over the link),
  • Active (the moment the visitor clicks on it).
Each one of these can have its own unique style.


In the project for this lesson, we put what we've learned to work, creating a table with alternating rows of color, and cells that light up when the mouse hovers over them.


08:46

This lesson takes color to the next level with CSS and adds three new ways to establish colors through CSS3. You will learn about HSL (hue, saturation, lightness) and the Alpha channel for controlling the transparency of an element.

In the project for this lesson, you use a picture as background art and overlay it with a semi-transparent area for your text.

15:03

Classes and IDs are two of the most powerful aspects of CSS and you learn all about them in this lesson. You will learn how to modify existing HTML tags with one or more classes. You will also learn how to extend element selectors, like the p element, with sub-classes especially made for them.

Finally, you earn your license to use CSS power tools by learning the details of CSS3 Combinators. These are methods of extending the power of CSS by controlling how different selectors work together, based on their relationships. You will learn about,

  • Descendent selector,
  • Child selector,
  • Adjacent sibling selector, and
  • General sibling selector.
The lesson includes diagrams that make these ideas crystal clear. Then it shows you examples of how they work.


The project with this lesson has you walk through creating your own adjacent sibling combinator to control the indent of paragraphs immediately following headings. You will also create a slick, modern looking menu.


15:06

In this lesson, we cover,

  • The CSS Box Model, so that you have a solid understanding for how CSS works.
  • How to control the width and height of content.
  • The positioning of elements on your web page.
  • And the flow of elements within your page.
You will be able to control the padding, margins and visibility of your web page elements. You will also be able to control the way they are displayed, either as inline or block elements.


You will learn the four ways to position elements:

  1. Static (default).
  2. Relative,
  3. Absolute, and
  4. Fixed.
You learn how absolute and fixed element can overlap other elements, and how to resolve conflicts with the z-order property.


You will also learn about the float property so that text wraps around pictures and other elements in an elegant and professional manner.

Finally, in the project portion of this lesson, you put all these concepts to work, redesigning your template file into discrete areas with a heading + menu area that remains fixed while the page scrolls underneath it.


06:59

In this lesson, we return to the topic of borders and learn how CSS gives us masterful and detailed control over every aspect of them. You will learn to control,

  • Thickness,
  • Style,
  • Color, and
  • Individual sides.
You will also learn about outlines and how they are similar to borders, but do not add any bulk to a given element.


This lesson's project gives you more hands-on experience, this time making borders.


08:14

In this lesson, you learn how to apply two interesting properties to pictures:

  1. Opacity, and
  2. Grayscale.
You also learn how to use pictures for your bullets, so you can customize the look of your website down to even this tiny detail.


In the lesson's project, you make a picture semi-transparent and add the code that makes it pop to full strength when you mouse over it.


12:13

This lesson is not essential to your creation of a beautiful website, but it sure is fun.

Here you learn about,

  • Changing the color of selected text.
  • Rounded corners.
  • Drop shadows for text and boxes.
  • Box resizing, and
  • Simple animation.
This lesson is packed with multiple examples and the project section gives you the ability to put it all to work in step-by-step examples.
02:59

This lesson reviews all of the CSS material we've covered and prepares you for your final quiz.

Checking Your CSS
8 questions
04:05

Bonus Lesson:

In this bonus lesson, we look at what you can do now that you know the basics of HTML and CSS. This gives you an idea of where to go next and how you can create dynamic web pages with languages like PHP and JavaScript--pages that respond intelligently to your input.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Rod Martin, Jr., Udemy expert instructor

Perpetual student and perpetual teacher.

Professor Martin has had several successful careers—Hollywood artist with screen credit, software engineer with a degree summa cum laude, published author and first-place award-winning essayist, and college professor in information technology, mathematics and ethics.

Artist

As an artist, he worked with Star Wars, special effects manager, George Mather and with two-time Academy Award winning designer, Saul Bass. He has had one-person shows of his space art at the Bonaventure in downtown Los Angeles, at the world renowned Griffith Observatory, and other venues.

I.T. Specialist & Software Engineer

As an information technology specialist, he has worked for Control Data Corporation, Bank of America, Ceridian Payroll, Global Database Marketing, and IPRO Tech. He has also created 3D astronomy software, "Stars in the NeighborHood," which remains available online. He has programmed in over 20 languages.

Writer

As a writer, he has written both science fiction and non-fiction. In 1983, he co-authored as Carl Martin, with John Dalmas, Touch the Stars: Emergence. In 1994, he won first-place awards for both an essay ("Outsiderness in the Scientific Community," Krupnick Award) and a short story ("Toady," Dutton Books Award). In 2012, he published The Art of Forgiveness. In 2014, as Carl Martin, he published two other books of science fiction, Touch the Stars: Diaspora, and Entropy's Children. In 2014, he published The Bible's Hidden Wisdom, and The Spark of Creativity, and in 2015, Watered Down Christianity.

Teacher

As a college professor, Mr. Martin has taught college algebra, database development, web development (HTML, CSS, and PHP), computer fundamentals, assembly language, professional ethics, and quality in software development.

Mr. Martin maintains nearly twenty websites, including websites for Rod Martin, Jr., Tharsis Highlands and Ancient Suns, starting in 2001.

Spiritual Searcher of Truth

Throughout his life, Mr. Martin has hungered to know more about the universe in which we all live, including the spiritual side of it all. He has studied comparative religion, including Christian Fundamentalism, Scientology, Buddhism (Tibetan and Thai), Judaism, Kabbalah (Bnei Baruch) and Christ's teachings. He has written several books on spirituality and the Bible.

Ready to start learning?
Take This Course