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!

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 audio
  4. Adding links - how to add links to other webpages and other websites, and how to use an image as a link
  5. Basic HTML table example
  6. Advanced HTML table example - including cells that span multiple rows or columns
  7. Table template using thead, tfoot and tbody
  8. Bulleted and numbered lists example
  9. Form elements example
  10. Iframes example
  11. Heading styles example
  12. Dividing the page up - example of using HTML5 tags and DIVs to divide up the page
  13. 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. First example: Basic headline style
  2. Adding CSS to your site - a simple demo of three ways to add CSS instructions to your web page
  3. Changing colors, including using transparent colored backgrounds
  4. Creating gradient colored backgrounds
  5. Changing fonts
  6. Border styles demonstration
  7. Heading formatted with dotted line above and below
  8. Styling bulleted and numbered lists
  9. Polishing touches: rounded corners, text shadows, box shadows
  10. CSS navbar demo
  11. CSS transition and animation demo
  12. z-index demo
  13. Creating content boxes
  14. Floating content boxes

CSS: Using CSS for layout

Your design needs to work on a range of devices and viewport sizes. Here, you’ll discover CSS features for laying out pages. They include flexbox and grid, which help you to create responsive websites. I’ll show you how media queries work and how you can create a responsive navbar.

  1. Creating column layouts
  2. Flexbox layouts
  3. Using media queries
  4. Creating a responsive navbar
  5. Creating your first grid
  6. Managing larger grids
  7. Positioning grid boxes
  8. Using auto-fit in the grid

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. Responding to user actions
  4. Changing styles
  5. Detecting other events: glow button
  6. Showing and hiding content
  7. Customizing by date/time
  8. Checking password length
  9. Checking text in forms
  10. Checkboxes and numbers
  11. Showing random tips in Javascript

Credits

© Sean McManus. All rights reserved.

Visit www.sean.co.uk for free chapters from Sean's coding books (including Mission Python, Scratch Programming in Easy Steps and Coder Academy) and more!

Discover my latest books

Web Design in Easy Steps

Web Design IES

Web Design in Easy Steps, now in its 7th Edition, shows you how to make effective websites that work on any device.

100 Top Tips: Microsoft Excel

100 Top Tips: Microsoft Excel

Power up your Microsoft Excel skills with this powerful pocket-sized book of tips that will save you time and help you learn more from your spreadsheets.

Scratch Programming in Easy Steps

Scratch Programming IES

This book, now fully updated for Scratch 3, will take you from the basics of the Scratch language into the depths of its more advanced features. A great way to start programming.

Mission Python book

Mission Python

Code a space adventure game in this Python programming book published by No Starch Press.

Cool Scratch Projects in Easy Steps book

Cool Scratch Projects in Easy Steps

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

Earworm

Earworm

In this entertaining techno-thriller for adults, Sean McManus takes a slice through the music industry: from the boardroom to the stage; from the studio to the record fair.

Walking astronaut from Mission Python book Top | Search | Help | Privacy | Access Keys | Contact me
Home | Newsletter | Blog | Copywriting Services | Books | Free book chapters | Articles | Music | Photos | Games | Shop | About