Web design with HTML and CSS

Welcome to the HTML5 and CSS3 tutorial series. If you’re looking to learn how to design and develop your own website then you are in the right place. Learning the HTML5 and CSS3 languages is the starting point for web design. These languages allow you to add and style the content on your web pages. Once you’ve mastered these languages you can move on to other languages like JavaScript, PHP and MySQL to build rich and powerful web applications.

You can start with the very first tutorial or if you already know a little HTML and CSS then you can jump to any tutorial you like. You can find all the HTML and CSS tutorials and also some free web page templates below. When you see a word in a tutorial that is underlined with a dotted line you can click or tap on it for a definition of that word.

HTML & CSS Tutorials:

  1. Getting started with HTML5 and CSS3
  2. Paragraphs, line breaks and headings in HTML
  3. Basic text formatting
  4. Lists in HTML
  5. Linking pages in HTML
  6. Adding images to your web page
  7. Adding audio to your web page
  8. Adding video to your web page
  9. Using CSS to style your web page
  10. Using external style sheets (CSS)
  11. CSS font properties
  12. Using your own fonts (with the @font-face rule)
  13. Adding a text-shadow or glow effect
  14. How to add padding
  15. How to add borders
  16. How to add margins
  17. Divs and spans
  18. Background images and colours
  19. Class selector
  20. ID selector
  21. Arranging content using float and clear
  22. Creating a basic CSS layout
  23. Parent/child elements
  24. Pseudo classes
  25. Styling your links
  26. Linking to content on the same page
  27. CSS nth-child() selector
  28. Styling lists
  29. Horizontal lists
  30. Rounded corners on a div
  31. Linear gradients
  32. Tables
  33. Tables – Part 2 (rowspan and colspan)
  34. Creating a simple horizontal navbar (menu)
  35. Creating a vertical navigation menu
  36. Parallax scrolling effect UPDATED!
  37. Drop-down menus
  38. Automatic image slideshows

Colour picker

Use the colour picker to get hexadecimal codes for hundreds of colours to use in your CSS code.

HTML5 Canvas Tutorials

Click here to check out the HTML5 canvas tutorials.

Templates:

  1. HTML and CSS layout template with horizontal menu links
  2. HTML and CSS layout with vertical menu buttons

Where to next?

If you have completed the HTML5 and CSS3 tutorials and have a craving to learn more, then why not check out the JavaScript and HTML5 canvas tutorials? You can use JavaScript and the HTML5 canvas to build your own programs, create animations and develop games!

You can also then check out the Responsive Web Design tutorials if you are interested in making mobile web apps or if you want to make your pages display nicely across different devices and screen sizes.