Do-It-Yourself Website Development

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.

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.

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

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.

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.

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.

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.

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.

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

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

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

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

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.

Your turn to write some links.

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.

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

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.

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.

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.

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.

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.

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

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.

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

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

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.

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.

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

Your turn to try styling using an External Style Sheet.

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.

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

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

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

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

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

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.

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

Your turn to try setting various font and text properties.

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.

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.

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

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

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

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

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

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

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

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

The benefits to keeping your site simple.

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

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.