You’ve learnt to code and built a great project with Codecademy, but you haven’t got a clue how to actually put it up live on its own website.
Does this apply to you? In this article you’ll get a simple, step-by-step guide for how to do exactly that – get your code project off the Codecademy site and onto your own personal website.
Create your source files: HTML, CSS and JavaScript
Before you can get your project onto the web, you’ll have to save it locally on your computer first. This is the easy part.
Notice how the tabs in the Codecademy editor are labeled index.html, style.css and script.js? The content inside these tabs are simply text files. So to save the files, just copy and paste the code in each tab into its own document in Notepad on your PC. Save each file to your desktop as index.html, style.css and script.js, making sure each tab has its own file with the correct name.
If you’re on a Mac, it’s the same process, but you’ll be using TextEdit and there’s one important extra step. Make sure that before you copy and paste each code file, you’ve gone into the Format menu and clicked Make Plain Text. This will make all the formatting tools disappear. It’s really important that whenever you’re using TextEdit for coding that the formatting tools are never visible, or your computer will interfere with your code and corrupt it.
Notepad and TextEdit aren’t the only programs you can use, though. There are a lot of powerful text editors which can do a lot more, however there are also some programs you’ll want to stay away from. Check out this page for more details.
View your project in your browser
Now that each of your code files are saved to your computer, you can now view your project. Just click on your index.html file and it should open in your browser, fully functioning.
But there’s still one problem. Only you can view it because it’s saved to your computer, not the internet. The next step is making your project visible to the world.
Buy a domain name and web hosting
Every website needs a domain name to be accessed. There are many different companies that you can buy your domain name from. A .com domain name registration for one year costs about $11, others like .net, .org, or .me may be cheaper or more costly.
When you’ve got your domain name, your website will be nothing but ads. This is because you don’t actually have the right to modify the content yet. To do this, you’ll need to buy web hosting. For this, there are again many different companies to choose from.
Web hosting is a bit of a learning curve to set up, but good hosting companies offer free support and walkthroughs. When you have finally set this up, you may need to wait up to 72 hours before your website actually goes live.
Upload your files!
The final step is uploading your HTML, CSS and JavaScript files to your new website. You can do this with a program such as FileZilla. All you need to do is drag and drop your files into the website folder, making sure you’re dropping them into the right one (check with your web host if you’re unsure which folder).
Because all browsers are configured to automatically detect index.html files on a website, your project will now be live. Congratulations!
Have any questions regarding this process? Let us know!
Disclosure of Material Connection: Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. Regardless, I only recommend products or services I use personally and believe will add value to my readers.
