DOS WebClass | Learning Linux Code

career oriented technology skills

DOS WebClass Code Class -- How To Make This Website

Websites are really just a collection of documents organized into folders. You can click here to download a zip file that contains all of the files and folders that you'll need to start building a basic website. You can find out more about organizing your website build at this link.

Double clicking the zip file creates a folder that contains a website template called the HTML5 Boilerplate. The Boilerplate includes the index.html and style.css files, which are the backbone of your website, but also contains a collection of code that will help you create a functional website.

To begin, open the Boilerplate index.html file in a text editor. If you look closely you'll notice that the file contains a great deal of code, but leaves all of the contents of the body element, like the header, footer, empty. Boilerplate's index.html provides the structure and some of the scripts that you're new website should use, but not much else. That's good, because its a fairly simple process to build in the elements that you want to see in your website.

You could move your cursor between the opening and closing "body" tags at this point and start typing, or you could go surfing for the content you'll use to flesh out the Boilerplate index.html file. To create this website, I brushed off my Google searching skills and found the code for a template that I could use to add new elements (like the jQuery slider on the home page).

If, as a begining website developer, you learn only one thing from this class, learn to search effectively. As an English teacher I have to admit that I have a great fondness for books, but in truth, when it comes to learning to work with computers, learning to code, or technology education in general, everything you need to know is online. Just remember, there's a difference between a website with helpful information, and a website filled with junk, so use discretion.

I found this website's template with the search term, "HTML5 free templates." It's important to figure out exactly what you're looking for and use the correct jargon when searching. I used the word "templates" because I had seen it being used frequently on HTML tutorial sites. And, of course, I wanted free advice -- which has its pitfalls, if you know anything about free advice.

Most importantly, I didn't write my search query out in sentence form, or as a question. Think of your search as a request from the Gods of the ether, not as a question. Eliminate verbs just like when you're taking notes in class. Boil your request down into the shortest phrase possible, and don't be affraid to rephrase your request if the first attempt doesn't yield good results.

I wanted to find a template with a jQuery-like slider that was created from CSS3 and HTML5 alone (since I'm currently taking a 30 day NetTutsPlus course on jQuery and since I'm interested in learning more aobut the current versions of HTML and CSS).

I found a template that fit the bill; the Flipthrough template from Free HTML5 Templates. (The Flipthrough theme's zip file is available here).

Organizing your files and folders helps you keep track of your project as it grows, helps you keep your links alive, and helps you find the resources you'll need with fewer headaches. Next, let's look at the code that this website is built on.

Page 2: The Head Element And Calling CSS