It's Sean!

UK freelance journalist, author
and writer Sean McManus

Printed from www.sean.co.uk. © Sean McManus.

NEW: Sign up for my newsletter!

Home > Books > Web Design in Easy Steps > Demonstration files

Download the examples from Web Design in Easy Steps

Book cover: Web Design in Easy Steps  Sean McManus teaches you what you need to know about creating websites that are both effective and easy to use.

Here, you can find the code examples used in the book. You can open them in your browser and view the source code of them. Alternatively, you can right click on one of the links to save the linked file to your computer.

You're welcome to use the code here in your own websites, but please do not post the example images or text content online. If you do use any of these code examples in your site, please consider leaving a credit for the book in your web page source. Thank you!

To visit the example sites used in screenshots in the book, and find further webmaster tools and tutorials, see the page of links from the book.

Web Design in Easy Steps is available to order from all good book shops.

HTML: The Language of the Web

The HTML chapter teaches you to mark up the structure of information in your web pages using HTML. Here are the examples used in the book:

  1. Structuring your HTML pages - first basic example, with doctype, head, title, body, h1 and p tags.
  2. Adding an image
  3. Adding links - how to add links to other webpages and other websites, and how to use an image as a link
  4. Basic HTML table example
  5. Advanced HTML table example - including cells that span multiple rows or columns
  6. Form elements example
  7. Bulleted and numbered lists example
  8. Heading styles example
  9. Example of plain, unstyled HTML page

CSS: Giving Your Pages Some Style

After you've marked up your content structure using HTML, you can use CSS to change its appearance. The book Web Design in Easy Steps introduces the key concepts of cascading style sheets (CSS) and concludes with some examples of more sophisticated effects and layouts. Below are the examples from the book. So that all the demo code can be in a single easy-to-use file, the style declarations are at the top of the HTML file. As the book explains, it's usually better to use a separate style sheet for them.

  1. Basic headline style
  2. Border styles demonstration
  3. Heading formatted with dotted line above and below
  4. HTML <div> page structure demo from CSS chapter
  5. Creating a simple layout: Step 2 - Basic page structure with brightly coloured DIV styles to aid identification
  6. Creating a simple layout: Step 8 - final layout version showing page layout in bright colours
  7. Creating a simple layout: Blue/Brown version
  8. Creating a simple layout: White version
  9. Styling bulleted and numbered lists
  10. CSS navbar demo
  11. z-index demo
  12. CSS3 techniques

Javascript for Interactive Pages

While HTML is used to describe the structure of your content, and CSS lets you describe its appearance, Javascript gives you the power to make the computer perform actions. It is a simple programming language that you can use to make your web page interactive. Here are the demonstration files from the book Web Design in Easy Steps.

  1. Adding Javascript to the head of your HTML file
  2. Adding Javascript in an external .js file
  3. Click paragraph to trigger a function
  4. Show, hide and toggle display routines
  5. Form validation examples
  6. Time and date demonstrations
  7. Opening new windows in Javascript
  8. Showing random tips in Javascript
  9. Photo slideshow
  10. Two quick jQuery examples

Audio, Video and Flash

The book includes a walkthrough showing you how to create a simple Flash animation using Adobe Flash. Above, you can see it in action. I made some modifications to the file that there wasn't room to explain in the book: I used the deco tool to add a few tree branches and a patch of flowers, converted them to symbols and then reused them extensively. That enabled me to bring the file size down dramatically.

Books by Sean McManus

Scratch Programming in Easy Steps

Scratch Programming in Easy Steps

Raspberry Pi For Dummies

Raspberry Pi For Dummies

Learn to program with the Scratch programming language, widely used in schools and colleges.

Set up your Pi, master Linux, learn Scratch and Python, and create your own electronics projects.

Coder Academy

Coder Academy

Cool Scratch Projects in Easy Steps

Cool Scratch Projects in Easy Steps

Learn to make games and other programs in Scratch 2.0, and make a web page in HTML, with this highly interactive book for 7-10 year olds.

Discover how to make 3D games, create mazes, build a drum machine, make a game with cartoon animals and more!

More books

Recommended articles

Stylised coloured photo of a synth

Discover my music and home recording articles

Interested in starting home recording? Follow me as I start recording, using instruments such as the Novation MiniNova and Korg Kaossilator, and share my synth and sample-based music online.

Scratch cat and rainbow circle

10-block demos for Scratch programming

Lots of people of all ages are learning to program with Scratch. Discover some useful tricks and techniques in my 10-block Scratch demos, including special effects you can drop into your games.

Paper Raspberry Pi case

Download free book chapters and more!

Download a free case for your Raspberry Pi, and free chapters from my books about the Raspberry Pi, Scratch, web design and more!

©Sean McManus. www.sean.co.uk.