Wikiversity

Web Design/Build a small website

< 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!

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

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

edit

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

edit

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

edit

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

edit

Articles worth reading

edit

CSS Techniques

edit

CSS/HTML tutorials

edit

Online Reference

edit
  • 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

edit
  • - Books -List includes CSS, Accessibility, Color, Dreamweaver, Information Architecture, Evaluation, JavaScript, Navigation, PHP, Project Management, Typography, Usability, Web Standards, Writing, (X)HTML.
edit
Retrieved from "https://en.wikiversity.org/w/index.php?title=Web_Design/Build_a_small_website&oldid=2619295"