Web Design/Build a small website

Web Design → Build a small website This page is part of the Web Design project.

A small website design called Red Tie from OpenSource Web Design

So far we should feel confident to Build a basic web page using headings (<h2>...</h2>) and paragraphs (<p>...</p>), images (<img />), lists (<ul>...</ul>) and links (<a>...</a>). We should also be okay with linking our HTML to a stylesheet (<link />) and setting up some basic styles (fonts, sizes, colours, margins and padding). If you're unsure, have a look through the check-list on Build a basic web page and see if you are confident with the skills listed there, or see if you can answer the basic HTML exam questions or CSS exam questions!

Now we're ready to learn more about structuring our HTML so we can control more of the style with our CSS as we create our first small website from scratch! We'll also learn why it's worthwhile creating semantic (i.e. meaningful) markup.

Checklist

The activities here aim to get us creating our first small website while at the same time raising our awareness of the different types of HTML documents that we can create – as well as how we can check (validate) our HTML to make sure it's correct. We'll also learn how to divide our content into meaningful sections that we can style with our CSS. Specifically we'll investigate how to:

• Use semantic (ie. meaningful) markup (something we're already doing, but realising why we're doing it!).
• Use HTML tables for tabular data (not for page-layout!)
• Group HTML content using <div>...</div>'s.
• Use id's and class selectors.
• Use more complex CSS selectors.
• Create user forms for gathering user input.
• Create navigational elements using simple lists
• Learn the strengths and weakness of the different HTML 4.01 and XHTML 1.0 DOCTYPEs

Suggested Activities

The following activities (together with the learning resources below) may help you apply the skills outlined above as you learn them in the context of a small project. If you can improve them, please do!- Web Redesign

• HTML Challenges - Challenges 3 - 5 will get you started with html tables, lists and forms (each challenge includes links to tutorials).
• CSS challenges - Gradually build your CSS skills for page layout as you attempt challenges 3 and 4.
• A small website project - After your demonstration of your step-by-step web design project you might feel ready to take on your first small website project (scenarios available).
• Choose 2 of the HTML or CSS tutorials below that you haven't yet seen and work through.
• Find out why you should learn about current standards for HTML and CSS (see articles below)

Your learning resources

There's lots of excellent tutorials out there for learning HTML, but there's also lots of old or even obsolete tutorials too. Here's a few resources that some of us have found useful: (please feel free to recommend others, but try to limit each list to 5).

Videos worth watching

• Live CSS editing and debugging with Firebug - the first part of this video shows an excellent way to debug your CSS!
• Using the Web Developer Toolbar - A video demo of the Web developer toolbar for Firefox.

Articles worth reading

• 22 steps to create a good website - Written by experience webmaster on good practices for creating good websites.
• Fix your site with the right DOCTYPE - Find out a bit about DOCTYPEs and why you should use them!
• A roadmap to Standards - An excellent introduction to the 'extra-bits' required for designing sites with XHTML/CSS. Includes a pop-quiz for removing presentation stuff from your code!
• CSS Problem Solving - Some very practical tips for solving those CSS issues with your site!

CSS Techniques

• A simple 2 column layout - A great tutorial for creating a fixed-width 2 column layout with CSS (that shows you some of the bugs to avoid!)
• Suckerfish Dropdowns - Step-by-step instructions for creating CSS-based drop-down menus.
• Mountaintop Corners - How to create rounded corners for elements of your pages.
• Robust CSS Drop Shadows - Creating drop-shadows for images or any other element of your page.

CSS/HTML tutorials

• MaxDesign's Select Tutorial - Excellent tutorial for learning how CSS selectors work, giving you more control over your page's style!
• CSS Selectors - Work through this excellent chapter of the CSS Wikibook.
• HTML tables - From WebDesignFromScratch... yet another excellent resource from Ben Hunt showing you how to create HTML tables!
• htmlDog - Includes intro, intermediate and advanced tutorials/reference on HTML tables, div's, spans, forms and DOCTYPE's
• Web development lessons, tutorials, and much more

Online Reference

• CSS Cheat Sheet - everything you'll ever need to remember about CSS all packed onto one page!
• Web Design References - A huge mega-reference (nearly 6,000 links) of information and articles about web design and development. It is dedicated to disseminating news and information about web design and development with emphasis on elements of CSS, accessibility, web standards, user experience, and much more.
• - Web Design Update A a plain text email digest newsletter. It typically goes out once a week. All web designers and developers are invited to join.

Books

• - Books -List includes CSS, Accessibility, Color, Dreamweaver, Information Architecture, Evaluation, JavaScript, Navigation, PHP, Project Management, Typography, Usability, Web Standards, Writing, (X)HTML.

Related Qualifications

• Cert IV Websites Qualification in Australia