Build 1 - Online Web Design Course
This online course was offered by LVS Online and was taught by an instructor named Deborah Hoffman, whose quirky sense of humour made the course a lot of fun as well as an educational experience.
There are three levels to this web design series, Build 1, Build 2 and Build 3. The following information relates to what I have learned in Build 1.
Build 1 is broken down into six individual lessons with each lesson having a practical assignment at the end to reinforce what you have learned. When completing each of the assignments we are asked to incorporate the tecniques learned in that lesson plus, include those techniques learned in each of the previous lessons.
Lesson 1
Lesson 1 commences with basic instructions and explanations of how the course is structured and how a website should be coded using XHTML tags.
| Part No | Topic |
|---|---|
| Part I | Introduction |
| Part II | Getting Started |
| Part III | Building a Web Page |
| Part IV | Adding Content & Viewing in a Browser |
| Part IV | Validating |
Every webpage that we build must have specific elements included such as; the DOCTYPE, Namespace, Content Type and Encoding Declarations and HTML, Head, Title and Body Tags. The way this is written is demonstrated in the following image
Click on the image above to view a larger version
Once we have the declarations and main tags inserted we are ready to start adding content to our pages. To be able to place our content in the page, we learn about page structure and how to use headings, paragraph "text level" break and horizontal rule tags.
Assignment 1
For this assignment I have built a page that provides some information on the LVS Online around the world.
Lesson 2
These lessons explain the correct use of Formatting Tags and adding content to your pages before moving on to Basic CSS and how it works. Part III teaches us how to use comments in our coding that can be used as little notes to remind us of what a certain section is about. We also touch on coding that is required for special characters.
Click on the thumbnail image above to view the full image
Part IV completes Lesson 2 and teaches us how to incorporate links and anchors into our web pages. We concentrate mostly on the absolute, relative, internal and mailto links.
| Part No | Topic |
|---|---|
| Part I | More XHTML |
| Part II | Basic CSS |
| Part III | Comments & Special Characters |
| Part IV | Links, Links, Links |
Assignment 2
The assignment for this lesson was to build a webpage that provides some information about "My Favourite Online Shopping Sites."
Lesson 3
Lesson 3 moves onto the CSS font properties and demonstrates the importance of inheritance when using CSS. Font names, font styles, variances and weights along with font sizes are all discussed in Part I. Part II discusses text alignment, decoration, and the transform properties.
Part III discusses Pseudo Classes. An example of Pseudo Classes are the a:link, a:visited, a:hover and a:active selectors
| Part No | Topic |
|---|---|
| Part I | CSS Font Properties |
| Part II | CSS Text Properties |
| Part III | Pseudo-Classes |
Assignment 3
A webpage about the district where I live titled "The Macarthur District" was constructed to reinforce the knowlege gained through this and prevous lessons.
Lesson 4
Lesson 4 adds some of the interesting aspects of web design by teaching us how to add thumbnail images to our page and link them to a larger image. We also learned that images can be used for backgrounds. The lesson discusses uploading images, image size, naming images and thumbnails and resizing images
| Part No | Topic |
|---|---|
| Part I | Images |
| Part II | Classes |
| Part III | Divs & Spans |
Part II moves on to classes. Here we learn how to write classes for CSS and the order in which selectors should be listed in the style sheet. The following few paragraphs explain how we can use CSS to our advantage when styling <p> tags to achieve different effects.
Styling <p> tags using CSS
You can use CSS classes with any HTML element! However, what happens if we had already defined a value for the default <p> tag, would this cause any problems for classes of the paragraph tag?
Well, when this happens the CSS class for any <p> tag will override the default <p> CSS. If the CSS class uses a CSS attribute already defined by the default CSS, then the formatting defined by the class will be the value that is used.
It may be easier to imagine that the CSS for a generic HTML element is the starting point and the only way to change that look is to overwrite the attributes using CSS classes. Please see the example below for a visual of this tricky topic.
Examples:
CSS Code 1: p{ color: #352400; font-size: .8em; }
p. This is a normal paragraph that uses the p CSS code 1 above!.
CSS Code 2: p.test1{ color: blue; }
This is a paragraph that uses the p.test1 CSS code 2 above!
CSS Code 3: p.test2{ font-variant: small-caps; font-size: 1.5em; }
This is a paragraph that uses the p.test2 CSS code 3 above!
Now that we understand how a class can alter the appearance of a block-level tag, we will learn to use Div Tags for styling several block-level tags all at once.
Assignment 4
To demonstrate my understanding of the lessons thus far, I have built a web page called "My Sail Training Holiday".
Lesson 5
There are only two parts to this lesson. The first part of the lesson teaches us about adding margins and paddings with the second part introducing us to tables. Tables are no longer used in web design for layout however; they can be used for tabular data. Our pages are now starting to take shape.
| Part No | Topic |
|---|---|
| Part I | Margins & Padding |
| Part II | Tables |
Assignment 5
Assignment five has been a bit of a challenge. To demonstrate my knowledge and skills I have built a web page about my great great grandfather. The title of this page is called "The Richard Hannaford Story".
Lesson 6
Lesson 6 is the last of the lessons for the Build I course and includes two assignments that must be completed.
| Part No | Topic |
|---|---|
| Part I | Meta Tags |
| Part II | Directories & Paths |
| Part III | Index Page |
| Part IV | Links, Links, Links |
In Part I of this lesson we learn about some of the Meta Tags that are used in the head section of the document. The Meta Tags discussed are: Description, Keywords, Refresh, Image Toolbar, Robots, Author, Generator and Copyright.
Directories, sub-directories and file paths are discussed in Part II where we are shown how to add directories and folders to our website and work with the directory structure.
Now that we are almost through the Build I course it is time to bring all our pages together to make a whole website. In Part III we are asked to create an index page (also known as a home page or "Splashpage) and link all the rest of our pages to it.
Handy Links
Throughout the course Deborah has given us some links to websites that can assist us with our web design course. The links and a brief description are listed below:
Validators
The W3C, along with developing the standards we use for coding practices, has a service which will check our pages for properly formed code, tell us if we've made a mistake, what the mistake is, where it's located and cites the rule that we broke.
Web Page Optimisers
Web site optimization (WSO) is the process of reducing web site size and complexity to maximize website performance.
Addons, Extensions and Toolbars
The following links will direct you to the most common Web Developer extensions that can add a menu and a toolbar to the browsers which will give you instant access to various web developer tools.
IE Web Developer Toolbar
Firefox Web Developer Toolbar
Opera Web Developer Toolbar
Accessibility
The website links below will assist web designers to consider viewers who may have accessibility issues.
