CodeDragon circular icon

CodeDragon might not work properly for you...

CodeDragon is designed to work with Google Chrome and Firefox, and a few features of CodeDragon have been found not to work properly with other web browsers. To make sure you get the best experience when using CodeDragon, please download the latest version of Google Chrome or Firefox and try again. You can install Google Chrome for free here, and Firefox here.

Or, you can continue anyway.

Learn

CodeDragon comes with easy-to-follow tutorials for all ages

Need specific help quickly?

Just click here to chat to a member of our team. We're happy to help with absolutely anything!

Remember: You can also click the live chat button in the bottom-right corner of our website at any time.

You can also contact us about other things.

Tutorials

Click on any tutorial to play it! We recommend starting from the start if you've never done any web development before.

Introduction

Tutorial illustration

Getting started

CodeDragon is amazing. This tutorial helps you get to grips with our Drag-n-Drop editor. If you've never used CodeDragon before, start here!

Written by Pal Kerecsenyi

Tutorial illustration

Hello, world!

Create a simple hello world website using the CodeDragon editor.

Written by Pal Kerecsenyi

Tutorial illustration

Using links

Without links, where would the web be? Use links to take your user to a different page or website.

Written by Pal Kerecsenyi

Tutorial illustration

Adding images

Images make your website look a lot cooler, and adding them is actually really easy.

Written by Pal Kerecsenyi

Tutorial illustration

Tables, lists, and summaries

A few neat tricks for organising data in HTML - they look cool, make your website appear neater, and are really easy to use.

Written by Pal Kerecsenyi

CSS

Tutorial illustration

Styling HTML with CSS

CSS is another coding language - it stands for Cascading Style Sheets and is the language for adding colours, fonts and other styles to your HTML website

Written by Pal Kerecsenyi

Tutorial illustration

Making text prettier

Your default paragraph and heading fonts are quite boring. It's finally time to make them more exciting!

Written by Pal Kerecsenyi

Tutorial illustration

The box model & margins

The box what? The box model is how elements are positioned and laid out, with padding and margins. It's a pretty important concept in CSS.

Written by Pal Kerecsenyi

Tutorial illustration

Padding & borders

Two more important concepts in CSS - these are part of the box model, explained in the previous tutorial.

Written by Pal Kerecsenyi