10:5 Publishing a website

A web site is a collection of files that exist on a computer connected to the internet. It has an address, or URL. This address / URL (e.g. amcc.io) simply points to the computer.

We call this computer a server.

index.html is a specially named file on your web server. This file gets automatically opened when you go to the web page. Each folder can have one index.html file.

So you don't need to go to amcc.io/index.html - you just need to type amcc.io

The folder that contains your files on a server is called the root folder. For instance if you go to amcc.io you will arrive at the root folder and automatically open the index.html file (but you never have to type index.html).

The root folder is at / and by navigating to / you will go back to the root, or first folder in the website.

To get to a folder within the root you can go to /foldername, if this folder has an index.html file it will open automatically.

You can have as many pages as you want in your root folder. But its normally convenient to make sub folders for new pages (these sub folders can also contain image folders, css files, whatever you want).

For a simple micro-site or demo page, you would probably want a folder for all the images and you may only have a single index.html file.

If you have 2 or three pages these might be index.html for the home page then something like about.html and contact.html.

For larger sites (or if you never want to type .html) put each new page in a folder like so about/index.html contact/index.html.

You will have noticed that this site uses both CodeSandbox and Codepen to allow you to play with code. They are both very useful free services (which also have paid options).

Codepen allows you to test out snippets of code without coding the whole web page. This makes it particularly good for HTML / CSS / JavaScript where you do not want to code the entire site, but just test out a technique. However Codepen does also allow you to code an entire webpage with added files - but it quickly gets to the point where you need to pay when you add file.

CodeSandbox is a full coding editor that works a lot like downloadable coding tools like Visual Studio Code. It lets you code and test full websites with multiple pages and more complex technologies.

The most popular coding software is Visual Studio Code. This is free software and has thousands of plugins to extend it.

Eventually coding with software like this on your computer will help you manage websites and understand them better, you can also then code offline.

There are a few plugins that are very useful to install if you're using Visual Studio Code. I would recommend Live Server that will run your website as if it is on a server. Every time you save the site it will automatically update in a browser window. Also Prettier is a universal tool that coders use to make auto format the code, it will get all the indentations sorted out for you and standardise formatting - I set it up to do this when I save the file automatically.

If you want to leverage AI as a student for free look at GitHub Copilot. There is very good educational access which gives you very powerful AI directly in Visual Studio Code, allowing you to work with agents to develop a website.

If you want to leverage AI as a student for free look at GitHub Copilot. There is very good educational access which gives you very powerful AI directly in Visual Studio Code, allowing you to work with agents to develop a website.

You will need to create a GitHub account and sign up for educational access:
https://github.com/education

I use Copilot within Visual Studio Code rather than as a standalone app. It allows me to code without AI, but also leverage it when I need to. This area is developing so fast that you will want to check out the most recent instructions on how to do this, but currently the page is here:
https://github.com/features/copilot/ai-code-editor

There are many other tools that can help - but it is important to not fully hand over to AI if you want to understand the code more deeply. It is very easy to get AI to code entire websites for you. It is also very easy to get quickly to a stage where you do not understand any of what you've created, further down the line this can cause real issues.

AI is however a great way of helping you learn, as you use it ask it to tell you why something works. Try to use it to add very small sections of code at a time, rather than whole pages. Test each section, ask why this way is the best, its often worth asking if there is a simpler, or shorter way too.