Do-It-Yourself Website Development
5.0 (2 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.
691 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Do-It-Yourself Website Development to your Wishlist.

Add to Wishlist

Do-It-Yourself Website Development

Build Simple Custom Websites From Scratch with Completely Free Tools
5.0 (2 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.
691 students enrolled
Created by Thomas Bell
Last updated 2/2017
English
Current price: $10 Original price: $20 Discount: 50% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 9.5 hours on-demand video
  • 70 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Develop simple custom websites from scratch, using completely free tools.
  • Upload and take custom sites live on the Web.
  • Write and understand basic HTML and CSS, the languages of content and design on the Web.
  • Make custom tweaks to template-based sites that allow users to write and modify raw HTML and CSS. (e.g. Squarespace,, Wordpress.)
View Curriculum
Requirements
  • No prior experience is necessary, other than basic comfort using your Mac or Windows computer.
  • You do not need to know any HTML or CSS. This course will teach you both from the ground up.
Description

In this course, you'll learn how to build a simple, custom website from scratch. Not a template-based site that will look like everyone else's. You'll build your website from nothing… in raw code, the way you want, then take it live on the Web.

You're going to learn a lot about HTML and CSS, the languages of content and design in web development. You won't be a professional web developer at the end of this course. You will have built a rock solid foundation in HTML and CSS. And, if you decide you want to learn more, you'll be well prepared to tackle more advanced web development courses.

If developing some simple websites for yourself and your friends is all you want, you'll learn all you need from this course. You'll also learn about some resources that will help you further develop your skills on your own.

You won't need to buy any special software. You'll use free tools that I'll guide you through setting up. The only cost will be an affordable web hosting service to take your site live on the Web. I'll help you with that too, when the time comes.

And when you're done, you'll have a custom website that you built yourself, live on the Web, sharing what you have to say with the world.

Let's get started.

Topics Include:

  • Setting up a plain text editor for web development.
  • The structure of HTML.
  • Structuring written content.
  • Adding images.
  • Embedding videos, maps, and other third-party content.
  • Linking to internal and external pages.
  • Creating lists and tables.
  • Styling content with CSS.
  • Designing pages for readability and visual appeal.
  • Customizing fonts and text.
  • Registering your website domain name.
  • Setting up a web hosting service.
  • Uploading your site and taking it live on the Web.
Who is the target audience?
  • This course is intended for students with little or no prior experience with Web development using HTML and CSS. This course is probably not for you if you already understand basic HTML and CSS, and are looking to further advance your skills.
  • For students who want to develop their own custom websites from scratch, rather than fit their design ideas into template-based platforms such as Wordpress, Squarespace, Wix, and Weebly.
  • For students who want a solid introduction to basic HTML and CSS before tackling more advanced Web development courses.
  • For students who have existing sites on template-based platforms, and who want to customize their sites by writing or modifying raw HTML and CSS.
  • For students who want to develop websites but can't justify the cost of commercial Web development software such as Dreamweaver.
  • For students with a DIY aesthetic, who enjoy building things from scratch, even when they don't have to, and modifying what others have already built.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
72 Lectures
09:38:39
+
Introduction
9 Lectures 58:35

An introduction to the course.

Preview 05:16

It's not rocket science. You really can build your own simple, custom website... from scratch. You'll save a lot of money over hiring someone else to do it, and you'll learn some valuable skills.

Preview 02:57

Websites are developed using HTML for content, CSS for style, and JavaScript for advanced interactivity. This course will cover HTML and CSS. They're all you'll need for simple sites.

Preview 03:51

Buckle up! I'll demo how you can build a complete website from scratch in about 35 minutes. In this first part, we'll code all our content using HTML.

Preview 19:34

In part two of "Rush Job," we'll customize the presentation of our content using CSS, then we'll take the site live on the Web.

Rush Job: A Complete Website in 35 Minutes -- Part Two, CSS and Taking It Live
15:39

You'll develop your simple website almost entirely using a plain text editor, and there's probably one already installed on your computer!

Choosing Your Text Editor
02:19

There are a few settings you should change on Mac OS X's TextEdit, so that it won't introduce errors into your code.

Setting Up Your Text Editor: Mac OS X
05:09

There are a few small changes you should make in Windows NotePad, so that you don't introduce errors into your code.

Setting Up Your Text Editor: Windows
01:59

While developing your website, you'll have it saved locally on your computer's hard drive. Here's how to use your web browser to look at your website as you develop it.

Pointing Your Browser at Local Files
01:51

Quick and easy! Just making sure you're paying attention! Yes, I'm talking to you. :)

Basic Concepts
4 questions
+
Content (HTML)
22 Lectures 02:38:24

Web browsers are designed to do their best to display Web content, even when developers make mistakes. You can use this to your advantage to keep your code super simple.

Preview 11:07

The Doctype declaration, which tells browsers that your document is an HTML document. HTML tags identify HTML elements, giving logical structure to your content. Two of the most fundamental HTML elements are HTML and Body.

Doctype, HTML, and Body
07:50

Paragraphs, Divisions, and Spans give some basic logical structure to content.

Paragraphs, Divisions, and Spans
07:57

The Head element contains information about the document, most of it not directly seen by users, but used by the browser to determine how to display the Body content to the user.

Head
07:03

Attributes are additional information coded into the tags of HTML elements. They are not usually directly seen by the user, but are used by the browser to determine more about how it will display the element's content.

Attributes
03:25

Test your understanding of the most basic HTML tags and elements.

HTML Fundamental Elements
5 questions

Your turn to try writing some basic HTML. You'll end up with a template you can reuse for almost any HTML page you create.

Now You Try It! (Create your own template for a minimally compliant webpage.)
03:11

If you want to add extra spacing either within a line of text or between elements, you can do so using only HTML, no CSS styling required. We'll learn about the <br> tag and the nbsp; HTML entity.

Adding Spaces
08:32

If you're creating a simple site on a small budget, you can find an abundance of free images online. We'll learn how to find both public domain and Creative Commons images, and how to prepare them for use on your site.

Images: Finding and Saving
06:18

Now that you have some images ready to go, here's how to add them to your HTML documents.

Images: Adding to HTML
08:50

Test your knowledge of how to find images, prepare them for use, and add them to your webpages.

Images
4 questions

Your turn to find some images, prepare them for your website, and add them to an HTML document.

Now You Try It! (Find images and add them to a simple webpage.)
05:54

Links between documents are what makes the Web so powerful. Here's how you add them to your HTML documents.

Linking: Basic External Links
08:04

Linking to other pages within your own site is a little simpler than linking to other sites.

Linking: Basic Internal Links
18:04

Special links can link to anchors on the same page, or launch the user's default email program with a new email already pre-addressed and ready to go.

Linking: Advanced Links
10:57

Test your understanding of how to add internal, external, and advanced links to your website.

Links
3 questions

Your turn to write some links.

Now You Try It! (Write a block of links to both external and internal pages.)
04:22

iFrames let you embed rich content from third-party web services into your own site. Common uses are for videos from YouTube or Vimeo, or interactive maps from Google Maps.

iframes
05:49

Your turn to try embedding a map into your own HTML document.

Now You Try It! (Embed a Google Map in an iframe.)
02:57

Advanced styling of your website is best done with CSS, which we'll learn about in the next section of the course. But you can create some basic styling using HTML alone, relying on browsers' default design choices for various HTML elements.

Quick and Dirty Styling
06:55

HTML comments are not (usually) seen by the user and are ignored by browsers. They are for you and any other developer who may later look at your code. They are notes you leave about the structure of your HTML document.

<!-- Comments -->
05:44

All Web developers make mistakes. You will too. We can't predict all the ways in which you might make a mistake, but here are some of the most common mistakes that developers make.

Common HTML Errors
08:31

You know all the HTML you need for a simple site. What follows in this section is extra credit. If you're content with a really simple site, with basic default design, you could even skip the following section on CSS.

You Could Stop Right Here
02:06

Though you can create a list using paragraph elements, HTML has dedicated elements for making lists. And these elements will make it easier for you to format and modify your lists.

Extra Credit: Lists
06:39

HTML provides a readymade way to create tables of information on your site.

Extra Credit: Tables
08:09
+
Style (CSS)
30 Lectures 04:55:56

Cascading Style Sheets (CSS) are how you override browsers' default style settings and make your own custom design choices. There are three basic ways to use it.

Preview 02:32

Inline Style is applied as an element attribute within your HTML code.

CSS Three Ways: Inline Style
06:24

Internal Style Sheets are a dedicated block of CSS code embedded within a Style element of your HTML document.

CSS Three Ways: Internal Style Sheets
11:36

External Style Sheets are dedicated CSS documents, saved with a .css extension. You can link as many pages as you like to the same External Style Sheet, making it much easier to keep your style consistent across your site's pages.

CSS Three Ways: External Style Sheets
18:16

The "Cascading" in Cascading Style Sheets refers to how browsers resolve very common scenarios in which the same HTML element has multiple and conflicting style declarations applied to it. These conflicts are not (usually) mistakes. They are in fact part of how CSS was designed to work, and how web developers can elegantly craft a subtle and consistent design for an entire site.

Cascading In Action
12:30

Let's review the three ways you can apply CSS styling, and how styles cascade.

CSS Three Ways, and Cascading in Action
3 questions

Selectors are the part of a CSS statement that tell a browser which elements you want the styling to apply to.

Basic Selectors
11:43

Your turn to try styling using an External Style Sheet.

Now You Try It! (Style using an external stylesheet and basic selectors.)
03:22

Element Classes allow you to selectively apply styling to only those elements that have a particular class attribute, which you set in your HTML documents.

Selecting with Element Classes
11:26

Element IDs allow you to selectively apply styling only those elements that have a particular ID attribute, which you set in your HTML documents.
Selecting with Element IDs
08:54

How well have you learned your CSS selectors?

CSS Selectors
4 questions

Your turn to try styling using Element Classes and Element IDs.

Now You Try It! (Style using element classes and IDs.)
07:28

A Font-Family declaration sets a prioritized list of which fonts you would like the browser to use in displaying selected text.

Font Properties: Font-Family
05:41

A Font-Size declaration tells the browser how large to display the selected text.

Font Properties: Font-Size
10:45

A Font-Weight declaration is used primarily to tell the browser whether or not to display the selected text in bold.

Font Properties: Font-Weight
07:29

A Font-Style declaration is used primarily to tell the browser whether or not to display the selected text in italics.

Font Properties: Font-Style
03:45

A Text-Decoration declaration is used primarily to tell the browser whether or not to display the selected text with an underline. A Color declaration sets the display color of the selected text.

Font Properties: Text-Decoration and Color
08:19

An Alignment declaration sets the selected text to be aligned left, right, centered, or justified.

Alignment
03:59

How well have you learned how to customize all those letters and words on your website?

Font and Text Styling
7 questions

Your turn to try setting various font and text properties.

Now You Try It! (Styling font properties.)
06:27

You can set the color of many different elements, not only of text. And there are several different ways to specify what color you want.

Color
16:41

Height and Width declarations set the dimensions of the rectangular space taken up by a block element, such as a paragraph. You can also use them to set the dimensions of an image, which is not technically a block element but behaves somewhat like one.

Height and Width
19:16

Margins are the spaces outside the edges of a block element. Here's how you set them.

Margins
13:31

Borders are the perimeter lines outlining a block element. Here's how you style them.

Borders
04:14

Padding is the space between a block's border and its contained content. Here's how you set it.

Padding
05:39

Let's make some tweaks to our homepage to make it look a little nicer.

Clean-Up: Homepage
16:56

Let's make some tweaks to our About page to make it look a little nicer.

Clean-Up: About Page
04:10

Let's make some tweaks to our Just In page to make it look a little nicer.
Clean-Up: Just In Page
20:30

Let's make a few more tweaks to polish our site's design.

Clean-Up: Tweaking and Polishing
14:31

How well have you learned how to style the block-level elements of your website?

Styling Block Elements
3 questions

Your turn to try styling block elements to create a pleasing visual design.

Now You Try It! (Styling blocks for visual structure.)
14:12

All Web developers make mistakes when writing CSS code. You will too. I can't predict all the mistakes you might make, but here are some of the most common mistakes that developers make.

Common CSS Errors
05:17

You know all you need to know about CSS to design your simple site. The extra credit that follows will give you some additional tools, but you're welcome to skip it if you feel good about what you already know how to do with CSS.

You Could Stop Right Here
03:28

A Float declaration lets you set block elements to only take up a portion of the window's width, allowing other content to wrap around it in the unused space. Think of how an image in a newspaper article may have text running along its right side, then down below it.

Extra Credit: Float
16:55
+
Taking It Live
8 Lectures 58:16

So far, you've been looking at a site that lives only on the hard drive of your own computer. No one else can see it. Time now to set up your site for the rest of the world to see.

Preview 02:43

There are three main services you need to take your website live. You can set up all three at once with the same provider, or handle each separately. In this lecture, we'll look at how to set up all at once, using the same provider.

Preview 08:11

If you chose not to follow the all-in-one process of the previous lecture, here's how to register your website's domain name, the name by which users will find it on the Web. (e.g. www.example.com)

Domain Name Registration
05:49

Domain Name Service (DNS) is the phonebook of the Web. When a user types www.example.com into their browser address field, DNS looks up that domain name then points the browser to the servers where it can find the site files. Here's how to set up or modify DNS.

Domain Name Service (DNS)
04:21

Web Hosts save your site files on their servers' hard drives, then provide those files to users whenever their browsers request them. Here's how to set up a Web Hosting Service.

Web Hosting Service
07:52

Are you clear now on the triumvirate of services you'll need to take your website live on the Web?

DNR, DNS, or Web Hosting?
4 questions

Most Web Hosting Services have a Web-based interface through which you can upload your site files. This is usually not the most efficient way to upload your site, but, for a simple site without many documents to upload, it can work just fine. Here's how to use one example Web-based interface. Each Web Hosting Service's interface will be slightly different.

Uploading: Web-Based (Web Host Specific)
09:04

An FTP client takes a little longer to set up than a Web Hosting Service's Web-based interface, but, once set up, it's a more efficient way to upload and update your site.

Uploading: FTP (FileZilla)
09:53

For the vast majority of cases, you'll want to use Domain Name Registration, Domain Name Service (DNS), and a Web Hosting Service to take your site live. But there are some (free) alternatives that will work in some very specific situations.

Alternatives to Domains and Web Hosting
10:23
+
Closing Thoughts
3 Lectures 07:28

The benefits to keeping your site simple.

Keeping It Simple
02:42

Some resources for continuing to build your Web developer skills after you're done with this course.

Developing Your Skills
04:06

Good luck! And hey, post links in the discussion boards to the sites you create after taking this course. I look forward to seeing them.

Good Luck!
00:40
About the Instructor
Thomas Bell
4.6 Average rating
7 Reviews
861 Students
2 Courses
Writer, Publishing Consultant, and Web Developer

Thomas Bell is a co-founder and partner of Chronicle, a brand narrative consulting firm. He co-founded and served as founding program director of the AJC Decatur Book Festival, one of the United States' largest literary events. In this position, he met regularly with all Big Five publishers and many university and indie publishing houses, as well as with book critics, agents, publicists, and writers ranging from internationally bestselling authors to local self-publishers. He has advised and negotiated on behalf of start-up indie publishers, first-time authors, and already successful authors working toward even greater success. He regularly attends and networks at BookExpo, the annual conference of the publishing industry. He has taken private tours of print-on-demand facilities and the nation's largest book distribution facility, and has presented to the full national sales force of Ingram Content Group, the nation's largest book sales and distribution company, at their quarterly sales conference. He was formerly a book critic at alternative weekly Creative Loafing, and the production editor of The Duck & Herring Co.'s Pocket Field Guide, an independent literary magazine.

Bell has always been equal parts artist and sci-tech nerd. He started programming computers when he was 13 years old, coding in BASIC on a TRS-80 Color Computer with 4K of RAM and a cassette tape interface for storage. Shortly after, he had his first paying client, an electronics repair shop that learned through the local Radio Shack that this kid could write for them an inventory program. Today, he gives time and attention to his nerd brain by developing websites and mobile apps, for fun, for promotion of his other projects, for friends and families, and for clients.