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.

Introduction: 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

Introduction: Getting started

Ad Ethical + impactful advertising with tiny prices.  Advertise on CodeDragon 
Ad Ethical + impactful advertising with tiny prices.  Advertise on CodeDragon 

Welcome to CodeDragon!

You're about to embark on a scary mission. You'll be learning how to make your own website with real life code! In this part of our tutorial, we'll teach you all about our Drag-N-Drop editor, and even give you a quick opportunity to play around with it. We'll need this editor a lot later on.

The web

Before we go on to the editor, let's explore how the World Wide Web and the Internet work.

Visiting a website is technically called 'making a request'. Your browser asks the server to send the code needed to display the page. This code contains text, colours, structure and more. It's known as HTML, and it's also the language you'll be learning. If you want to make your own website from scratch, there's no way you can do it without first mastering HTML.

The server responds with HTML because it contains all the information needed to display a page. Everything you see on the web is written in HTML. This very text you're reading is, you guessed it, written in HTML!

Here's an example of how real HTML code looks:

Wow! This probably seems very complicated, but that's what this tutorial is here for. HTML is very logical and if you follow this tutorial closely, you should be able to tell what the snippet above does with a single glance.

Code Blocks!

The cool part of CodeDragon is that you don't need to fiddle with all that text that you just saw above. Seriously! With CodeDragon, you can simply snap bits of code together by drag-n-dropping them. Here's what that code snippet looks like in the Ffau editor:

The code in our editor

Still pretty complicated, but trust me - it's a lot easier to learn.

Try out the editor

It's time to test drive our code editor. You don't have to make anything, just play around with the blocks. In fact, this editor doesn't really generate any code - it just lets you snap blocks together to see what it feels like. The dark box on the left is your Toolbox. Drag blocks out of it onto the white surface to the right and drop them. Try putting the blocks inside each other, starting from the top and moving downwards.

End of tutorial