Web Design 101: Study Group

An introduction to developing basic websites to web standards. This course will be suitable for beginners who wish to learn how to make static websites with (x)HTML and CSS. This course will also be suitable for developers who have previously used WYSIWYG editors such as Dreamweaver and who wish to learn how to a make a website by hand.

You'll learn about how (X)HTML is used for organising content on a web page and how CSS describes how a page will appear.

Participants will learn how to make a website that will be used as the basis for their personal Open Web Portfolio. **** I'd like some feedback about the project work for this course - Any better ideas???*****

What You Should Know

• Confident Computer Skills
  • Why: Websites are made with computers.
  • How: You regularly email, browse the web and aren't afraid to do more advanced technical work such as installing new applications or working with image editing software.
• Attention to Detail
  • Why: A mistyped character or misspelt command can cause problems with a website.
  • How: You like to organise things.
• Patience
  • Why: You're going to feel frustrated during this process. It will pass.
  • How: You think of alternative solutions to problems.
• Research skills
  • Why: We can't cover everything in detail in this course. Between video meetups you'll need to fend for yourself.
  • How: You know how to use a search engine and are able to critically consider information you read on the web.

What You Can Expect To Know

• (X)HTML syntax
  • Why: These are the rules that define how a website is structured
  • How: You'll write code to make webpages, this code needs to follow these rules in order to work.
• (X)HTML elements
  • Why: These are the ways information can be recorded in your webpages.
  • How: You'll write code to make webpages, this code needs to contain these elements.
• Basic Web Design Concepts
  • Why: These concepts are what makes a webpage well designed and readable.
  • How: You'll use them to refine a basic webpage.
• (X)HTML DOCTYPES
  • Why: Doctypes (Document Type Declarations) identifies the version of (X)HTML you have developed your site with and validates your pages against a list of syntax rules.
  • How: You'll discuss Doctypes amongst your peers and identify which is best for your project website.
• (X)HTML validation tools
  • Why: Validators let you check if there's anything wrong with the page you're making.
  • How: You'll use this to check for errors and to confirm that you've made a standards compliant webpage.
• (X)HTML Best Practices
  • Why: There's many ways of making webpages, best practices lets you do exactly that, learn the best ways of practicing web development.
  • How: You'll read articles about best practice or discover it yourself through trial and error.
• CSS: The Cascade
  • Why: CSS can be introduced to a page at many levels - some of those levels have a higher priority than others. This can influence how your page appears.
  • How: You'll be using CSS to make your page look great.
• CSS: Selectors and Properties
  • Why: These are the instructions that tell your web page how to display.
  • How: You'll use these CSS elements to change how HTML elements appear on your page.
• Site Structure
  • Why: A web page is made up of many files including images, HTML files and CSS. You need to know how to structure these files.
  • How: You'll need to make a site structure as part of your major project.
• Forms
  • Why: Forms let people submit information, such as a comment via your website
  • How: You'll make a contact form as part of your major project.

What You Might Learn If You Work Hard

• How to add appropriate Javascripts to your web page.
  • Why: Javascript can add extra functionality to your web page.
  • How: You'll research appropriate Javascript plugins to include in your site and add them to the web page code.
• How to make a really stunning website.
  • Why: It takes time and patience to develop your first website, you just need to focus on making a basic, standards compliant website at this point!
  • How: If you do want to push your skills you may need to drink large amounts of coffee and ignore your family and friends. Don't worry - confidence will come in time.

Things We Won't Cover

• Flash
  • Why: Flash is a proprietary, non-standard software application and not covered by the Open Web Framework

• Javascript Development and Modifications
  • Why: There won't be enough time, but you can always take an advanced course.

Are you basing your course on existing courseware?

The WaSP Interact courseware for FED 100 - Web Design 1

• Why: It's well documented and robust and is designed by The Web Standards Project
• License: Creative Commons Attribution 3.0 United States