webdesign

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. The box model and padding
  13. The box model and borders
  14. The box model and margins
  15. Divs and spans
  16. Background images and colours
  17. Class selector
  18. ID selector
  19. Float and clear properties
  20. Creating a basic CSS layout
  21. Child selectors
  22. Pseudo classes
  23. Linking to sections on the same page
  24. Styling your links
  25. CSS nth-child() selector
  26. Styling lists
  27. Horizontal lists
  28. Rounded corners on a div
  29. Linear gradients
  30. Tables
  31. Tables – Part 2 (rowspan and colspan)
  32. Aligning images to left, right and center
  33. Adding navigation menu buttons to your web page
  34. Parallax scrolling effect
  35. Drop-down menus
  36. 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.