topic: How to get set up to author web code on your own device

In this step you’ll be learning about how to write HTML files on your own computer or cellphone. As nice as the W3Schools Try It Yourself editor is, it’s not a professional web development tool and you’ll need something more powerful if you want to make a proper website.

Basically what we are going to do here is: Make use of a text editor to write HTML files that can be opened in a web browser.

If you are not super sure what a file is then please read this before you continue. If you are still not sure, then please ask on the Discord channel.

The first thing you need to do here is choose a text editor to work with. There are a few different options, please choose the one that works best for you.

Option 1: Just use a text editor on your computer

If you are using a computer and want to get set up in the easiest possible way then you can just use the built-in text editor.

  • If you are running Windows you can just use Notepad. Here is a video demonstration.
  • If you are running a Mac then you can use TextEdit.

You can see more detailed instructions here

Option 2: Use your smartphone

  • If you have an Android then you can make use of the ACode code editor. ACode can be a little confusing. Here is a little demonstration video that might help you.

  • For an iOS device like an iPhone or iPad, you can use the Koder code editor. To learn how to use it, watch this video

Option 3: If you have a computer and want to be fancy about it

Install vscode. It’s a fancy text editor that is specially designed for coding. You don’t need it at this stage in your journey but it’s cool. And we like to encourage cool things. Here is a video demonstration

If you can’t install it or if it’s weird and confusing then don’t worry :) You can just use a text editor.

If none of the above work

If none of these options work for you then you might need to do some research. All you need is a text editor and a way to open files in a browser. Google is your friend :)

If you have a different code editor

It’s all good! Use whatever works for you :)

Just make sure you are editing plain text files. If you are using a word processor (e.g. Microsoft Word) then that’s not going to work.

If you aren’t sure then just go with one of the recommended options above.

Your first HTML file

Before you move on to the next step in this challenge, it is important to make sure you can use your code editor effectively.

Now, a lot of people find this step pretty scary at first - you’re going to be writing actual code and making it work on your phone or computer!

Try to do the following:

  1. Make a directory/folder. You can name it something like website
  2. create a text file called index.html, you’ll need to save it inside your website directory
  3. Put the following text inside your index.html file.

Feel free to copy-paste. Make sure you save your changes:

<!DOCTYPE html>
<html>
  <body>
    <h1>My First Website</h1>
  </body>
</html>

IMPORTANT Computers are pretty stupid. You have to be very precise when it comes to writing code otherwise they get all confused. So make sure you start off by typing in EXACTLY the right text. If you leave out a > or a </ or anything like that then your web browser might not understand what you want.

  1. Open your index.html file in a web browser. Do this by navigating to the file in your file browser and then opening the file.

You should see a very simple-looking web page.

  1. Try changing some of the text in the index.html file. Once you have saved your work then open the page in your browser again. You should see your changes.

Next up

There will be a project a bit later on - you’ll need to create an HTML page and submit it so we can mark your work. So you must be comfortable with your code editor before moving on to the next step.

RAW CONTENT URL