Website Coding: Beginner's Guide I

Welcome to Website Coding: Beginner's Guide.

Our goal with the Website Coding: Beginner's Guide series is to provide people interested in becoming website developers with an extremely basic understanding of the concepts and code (HTML5 & CSS3) involved in website coding.

Please, Provide a Warm Welcome for the Information Era

The Internet has revolutionized the ways in which people are able to share information with audiences across the globe. One of the most important mediums to rise out of the creation of the Internet is informational websites.

Effective websites are typically built with a specific purpose in mind. For example, a photographer may create a website as a way of showcasing his or her best work to potential employers. Another example may be an owner of a business trying to maximize sales by selling goods in a physical storefront and an online storefront (two storefronts beats one).

For the Website Coding: Beginner's Guide series, we'll keep it simple and build a website for a fictitious squirrel named Slappy that sells nuts for a living.

Learning the Essentials for Website Development

Before coding, it's important to develop an understanding of the core concepts surrounding website development. Understanding the core concepts will help you simplify the website coding process. To begin, rid yourself of any feelings or expectations relating to website coding – try your best to approach this series with a clear and open mind.

Your computer contains a ton of computer files. Examples of different files are word document, video, music and picture files. A website is nothing more than a collection of website files. That said, let's assume that for every website page, there is a respective website file. For instance, the Econo Moving and Storage website allows us to explore eight different pages (eg, Home, Moving Tips, Moving Checklist, Storage, Packing Services, Testimonials, About Us and Contact). In this case, we'll assume that this website is made up of a collection of eight website files.

The only difference between a website file and, let's say, a word document is the file extension. For example, when you save a new word document using Microsoft Word, you will note that the file is saved in the following format: {document name}.docx. In the case of a picture file, the file may be saved in the following format: {picture name}.jpg. Website files are saved in the following format: {page name}.html.

Make sense? Great! Proceed to the next section to create the first page for your new website.

Creating Your First Website Page

In this section, I'm going to walk you through the creation of the first page for your new website. In completing the steps below, you'll be able to access your website page using your favourite web browser (eg, Internet Explorer, Google Chrome or FireFox).

As mentioned in the previous section, you can assume that for every website page there is a respective website file ending with the .html extension. That being said, our first step will entail creating our first .html website file.

Firstly, open Notepad (Windows) or TextEdit (MAC). Next, type some example text that you'd like to display when someone opens your website page (eg, Hello World! I'm Slappy the squirrel and I sell nuts!). After, click File > Save As. Using Notepad, change the Save as type dropdown option to All Files and name your file home.html. The file name doesn't have to be named home.html; it can be called anything that includes alphanumerical characters and ends with *.html. When ready, save the file to a location that is familiar to you (eg, Desktop).

Saving HTML files using Notepad


That's all there is to creating a basic website page. To view the page in your browser, simply open your favourite browser (I prefer Google Chrome). Once the web browser window is open, drag and drop your newly created *.html file in to the web browser window and it should display the text you entered earlier.

Hang on to your html file (ie, web page)! In part two, we'll be diving in to content formatting which will allow you to increase the font size and change the color of your textual content.