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.
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.
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.
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.
You'll develop your simple website almost entirely using a plain text editor, and there's probably one already installed on your computer!
There are a few settings you should change on Mac OS X's TextEdit, so that it won't introduce errors into your code.
There are a few small changes you should make in Windows NotePad, so that you don't introduce errors into your code.
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.
Quick and easy! Just making sure you're paying attention! Yes, I'm talking to you. :)
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.
Test your understanding of the most basic HTML tags and elements.
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.
Test your knowledge of how to find images, prepare them for use, and add them to your webpages.
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.
Test your understanding of how to add internal, external, and advanced links to your website.
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.
Let's review the three ways you can apply CSS styling, and how styles cascade.
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.
How well have you learned your CSS selectors?
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.
How well have you learned how to customize all those letters and words on your website?
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.
How well have you learned how to style the block-level elements of your website?
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.
Are you clear now on the triumvirate of services you'll need to take your website live on the Web?
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.
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.