Starting your journey with the FNB App Academy is exciting — but let’s be honest, it can also be a little confusing at first.
You’re told to use Visual Studio Code (VS Code), but when you watch the self-help video shared with you… it’s showing something completely different: Brackets. They were a bit lazy and gave us a 7 year old video from some other course. But the course is free, so let’s be appreciative of the opportunity and make it work.
In this guide, we’ll walk you step-by-step through how to set up your coding workspace the right way — using VS Code.
🚨 Why Is This Important?
Your coding environment matters.
If you’re not set up properly:
- Files may not save where they should.
- You could get lost trying to follow lessons.
- You’ll waste time troubleshooting simple things instead of writing code.
That’s why getting your workspace ready upfront is key to success — and we’ll help you make it easy.
✅ Step 1: Create Your Project Folders
Before writing a single line of code, let’s get organized.
Here’s what to do:
- Open your Documents folder (or wherever you want to store your work).
- Create a new folder called something like
WebsitesorFNB App Academy. - Inside that folder, create another one for your first website — for example,
MyFirstWebsite.
This is where all your project files will live neatly.
✅ Step 2: Install Visual Studio Code (VS Code)
If you haven’t installed VS Code yet, here’s how:
- Visit https://code.visualstudio.com
- Download the version for your computer (Windows, Mac, or Linux).
- Install and launch the app.
VS Code is lightweight, fast, and very beginner-friendly once you get going.
It’s also the industry standard, so learning it now is a smart move.
✅ Step 3: Open Your Project Folder in VS Code
Once VS Code is open:
- Click on File > Open Folder
- Navigate to the
MyFirstWebsitefolder you created earlier. - Select it.
You should now see the folder on the left-hand sidebar — this is your workspace.
✅ Step 4: Create Your First Web Page
Time to get coding!
- Right-click in the left sidebar.
- Choose New File.
- Name it
index.html(this is the default home page name for websites). - Click Enter — and your new file will open up, ready for code.
✅ Step 5: Add Your First HTML Code
- Copy and paste this to get started:
<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
</head>
<body>
<h1>Hello, FNB App Academy!</h1>
<p>This is my first web page using VS Code.</p>
</body>
</html>
- Save the file (Ctrl + S or Cmd + S).
✅ Step 6: View Your Website
Here’s the magic moment:
- Open your
MyFirstWebsitefolder in File Explorer / Finder. - Double-click
index.html. - Your web browser will open — and there’s your website!
🚀 Bonus Tip: Use Live Server (Optional, but amazing)
You can make this even easier by installing the Live Server extension in VS Code.
This allows your page to auto-refresh every time you make a change.
To install:
- Click the Extensions icon in VS Code.
- Search for Live Server.
- Click Install.
- Now, right-click your
index.htmland select Open with Live Server.
🎁 Summary
While FNB’s self-help video still shows the older Brackets editor, setting up in VS Code is the best way forward.
Not only will you be using the recommended software for App Academy, but you’ll also be learning how the pros do it in the real world.
Remember:
- Organise your folders
- Use VS Code (download link above)
- Create an
index.htmlfile - Copy in your template
- Open in browser or Live Server
And that’s it — you’re ready to code confidently!
❤️ Final Thought
Starting something new always has little hurdles — but with the right guidance, those hurdles become stepping stones.
Onlinestudent.co.za is here to help you bridge the gaps, make sense of the confusing stuff, and get you coding (and succeeding) faster.
This is just the start of your developer journey — and with VS Code set up properly, you’re already on the right track.
Leave a Reply