Web Design/Build a basic web page
We're going to start slowly and introduce the two main tools that you need to build a basic web page:
- HyperText Markup Language (HTML), which we use for all the information or content of our web page, and
- Cascading StyleSheets (CSS), which we use to style the content of our web page.
Web Design → Build a basic web page
We'll be learning the basics of these two tools through some fun, hands-on, practical activities.
To get an idea of what is possible with HTML and CSS, take a few minutes to browse some of the designs at the css Zen Garden.
|Activity: What's so special about the CSS Zen Garden?|
|As you browse the different pages on the CSS Zen Garden, can you identify what is similar and what is different about each page? Try explaining to someone why this is important.|
Once you've glimpsed some of the power of great HTML and CSS design, let's get back to the basics and start learning! To get started straight away, jump right in to the first learning activity: What is HTML anyway? Or, if you want to know what's covered by the activities in Build a basic web page, checkout the following checklist.
After working through the activities in this section, you should be familiar with the following:
- Creating your first HTML page
- Using basic HTML tags and attributes (
- Creating Page Titles, Paragraphs and Headings (
- Creating Links, Images and lists (
- Changing fonts and colors with CSS
- Setting borders, margins and padding
- Defining CSS selectors, properties and values
- Validating our HTML documents using the W3C online validator and the DOCTYPE of your choice (such as the HTML 4.01 Strict DOCTYPE).
- using <marquee></marquee>
Ready for a test? Give the beginner HTML exam questions and CSS exam questions a try to check your familiarity with the new concepts!
The following activities may help you apply the skills outlined above as you learn them in the context of a small project. To participate in collaborative "learn by doing" projects, get your account on the Wikiversity Sandbox Server. If you can think of new learning projects or ways to improve the existing ones, please edit!
- What is HTML anyway? – Discovering that you've been marking-up stuff your whole life! Includes hands-on activities.
- Try out the first challenge in HTML Challenges and learn how to structure your HTML code.
- Work your way through the HTMLDog's HTML Beginners Guide.
- Now try out the remaining challenges at HTML Challenges.
- For most people, A step-by-step web design project is a great place to start to see how basic HTML and CSS skills can be put to work.
- CSS challenges – Once you're feeling vaguely familiar with HTML and CSS, you might be ready to try Challenges 1 and 2.
- HTML Quiz - an online multiple choice HTML quiz
- Make a web page containing all of the tags you know embeded in that and use it for yor future reference and add more tags whenever you learn more and more tags.
- The Structure of HTML – An introduction to elements.
- Lists and Tables – An introduction to lists and tables in HTML.
- Pen and Paper HTML activites – Get away from the screen and try to solve these HTML activities!
- HTML Programming – create and validate a simple web page. Remember to validate every document you create for the other activities.
Your learning resourcesEdit
The following resources may help you get started, but they are only suggestions. You may have other resources that you have found to be incredibly useful for learning the basics... and if so, why not update this page! Use these resources together with the suggested activities (or your own activities) to apply what you're learning as you go.
There are a lot of excellent tutorials out there for learning the basics of HTML and CSS, but many are out of date and obsolete. Here are a few tutorials that some of us have found useful: (please feel free to recommend others, but try to limit this list to 5).
- HTMLDog's HTML Beginners Guide and CSS Beginners Guide provide excellent step-by-step learning pathways!
- Tizag also has a good series of HTML tutorials (along with many others although the last time this site was updated was 2008)
- WestCiv's Hands-on CSS tutorial - An excellent hands-on project-based CSS tutorial (this tutorial builds on your HTML foundation)! This tutorial extends past the basics of CSS but includes an excellent intro too!
- Mezzoblue's HTML markup guide - From the guy who created the css Zen Garden, this guide covers HTML basics including Headings, paragraphs, a number of inline text tags and lists.
- CSS From the ground up - Another excellent step-by-step tutorial for learning the basics of HTML/CSS coding.
- W3Schools tutorials - Some great step-by-step tutorials, but lots of ads.
- Wikibooks CSS Guide - A detailed wikibook on CSS
- b:Authoring Webpages - Another Wikibook tutorial
- PHP Tutorial - HTML, CSS tutorials.
Several other tutorials can be found online.
As you move through a tutorial, you may want to apply some of what you're learning to one of the suggested activities.
- 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.
Like the tutorials, there's lots of great books and even more obsolete ones. One book that introduces the basic tools of the Web (HTML and CSS) using current standards but without overwhelming the reader with detail is Elizabeth Castro's Creating a Web Page with HTML. The book steps you through a small web project from beginning to end, including everything from creating the basic HTML, CSS and images, through to publishing your site on the web.
You might want to check out other Useful Books for learning the basics too!
An HTML EditorEdit
To edit HTML you need a basic text editor. Although you can use something as simple as Notepad, a dedicated HTML editor can provide lots of useful features (such as colour syntax highlighting) and automatic error checking that will become more important as your HTML pages grow. At the other end of the spectrum, word processors (such as Microsoft Word) often provide "Save as HTML" functions but they add extra formatting that may make your HTML display unpredictably, and as a result are not recommended.
Ideally you'll find it easiest to use a text editor that provides a bit of extra functionality for editing HTML text. The best editor for Windows users (that can edit almost all languages and can open all file types) is VSCode. It's small and downloads fast, and it's pretty effective. Using the same link, Mac users can download VSCode for Mac. For Linux users, well, Linux comes with Vim, another code editor. For other HTML editors, see Useful Applications.
You can find out how what you've learned in this module relates to qualifications in your country on the Learning Basic HTML and CSS:Quals page.