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:
- Getting started with HTML5 and CSS3
- Paragraphs, line breaks and headings in HTML
- Basic text formatting
- Lists in HTML
- Linking pages in HTML
- Adding images to your web page
- Adding audio to your web page
- Adding video to your web page
- Using CSS to style your web page
- Using external style sheets (CSS)
- CSS font properties
- Using your own fonts (with the @font-face rule)
- Adding a text-shadow or glow effect
- How to add padding
- How to add borders
- How to add margins
- Divs and spans
- Background images and colours
- Class selector
- ID selector
- Arranging content using float and clear
- Creating a basic CSS layout
- Parent/child elements
- Pseudo classes
- Styling your links
- Linking to content on the same page
- CSS nth-child() selector
- Styling lists
- Horizontal lists
- Rounded corners on a div
- Linear gradients
- Tables
- Tables – Part 2 (rowspan and colspan)
- Creating a simple horizontal navbar (menu)
- Creating a vertical navigation menu
- Parallax scrolling effect UPDATED!
- Drop-down menus
- 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:
- HTML and CSS layout template with horizontal menu links
- 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.