Sometimes you have to do things yourself, from the ground up, to really
understand something. However, when it comes to coding, it’s hard to go to
Codeacademy and hope to pick the right courses. You need some guidance.
Learning part time over 3 weeks, our first customer success manager learned
ground up skills in building a website with html, css and javascript. Below
we’ll show you exactly which free online courses to take and the simple set up
that let’s you build your own site in your own time.
Key advice
It’s a jigsaw puzzle with lots of pieces and they come together later.
You won’t understand it all at first so you’ve got nothing to lose by
diving in at each stage.
Build something you want to build and everyone likes 'vision boards' of what
they want to achieve in life so build that.
Use the dumbest and simplest text editor you can find. That way you’ll know,
building a website is all simple typing and can be done with any text tool.
What did our customer success manager achieve?
Minh is the Customer Success Manager at Upscope. Upscope is no-download
interactive screen sharing for onboarding non-tech
users that Minh uses to educate users
on products.
It requires a little knowledge of javascript and APIs.
In the first week, she built most of Just keep
running including a vision
board.
She had no prior knowledge of html or any sort of coding.
She did this first on her local computer with minimal guidance and then I
helped her buy a domain and upload it using an FTP tool.
Later she used Javascript to make a call to the Studio Ghibli API and turned
the JSON response into a page listing movies.
Key Summary of how she learned those skills
-
We explained a simple way to think about the internet.
-
Then we set up her website on her computer and edited that using a dumbass
simple text editor. -
Then she went through Codeacademy courses in HTML, CSS, Javascript.
-
These were then applied to that website over time.
This is the original list she had to go through which we added to an Airtable.
A simple way to think about the internet.
All those websites on the internet are all just folders with files in them.
Your website is a folder with files in it.
Airbnb is a folder with files in it.
These files all sit on different computers (servers) around the world.
When you enter Airbnb.com in the browser, it goes to the Airbnb.com folder on
a computer and looks for a file named home.html, which is the home page.
In fact, most home pages are normally named home or default or index because
servers automatically look for that file in the folder as the first page to
open.
When you go from the home page to the about us page, you’re going from the
file home.html to aboutus.html which is just another file in the folder.
If the internet is all just folders and files then, if you want to create
your own website, you create a folder and you add some files to it.
You can do this in minutes using Word or even the simplest plain text editor
on your computer.
Create your own website on your computer
Let's do this.
You’ll create a folder and files on your desktop, which will be your website.
Step 1
On your desktop, create a folder called ‘VisionBoard’.
Yup, you’ll make your own vision board similar to our CSMs vision
board which she’s a little
embarrassed by now as she can do better apparently ?
Step 2
Now open up any text editor and paste the following into a new page:
"><head></head><body>My Vision Board</body></html>
Step 3
Save that file as ‘home.html’ to the folder you named ‘VisionBoard’ on your
desktop.
Double click that file you just created and it’ll open in a browser because
it’s an html page.
This is your website! This is all there is to it.
Ok, after you’ve created a folder with files, how do you get it on the
internet?
You buy a domain name and then you move that folder to the computer which is
connected to that domain.
There’s a lot of jargon involved but that’s all you’re doing, moving folders
to a computer and pointing that domain to that folder.
So anyone entering that domain name into their Google Chrome browser is sent
to that folder and to that home.html file.
Learn html, css and javascript in Codeacademy, then update your site
No matter what else you learn below, remember that you can already now create
your own website.
Everything else is details.
It’s styling and interaction.
It all still fits into the above folder.
Any time you learn something from Codeacademy, you can apply that to the
folder and file you created above for fun.
Which Codeacademy courses should I learn?
You've now got a basic website to play with, sitting on your desktop.
Learn some of the following and start applying it to that site.
Do only these 3 at first
Why only these 3?
These are the basics and you don’t need anything more than the basics to
understand an enormous % of how the internet works.
In addition, most websites are now moving to use javascript all the way
through their site, it’s becoming a superpower skill.
Learning javascript will show you how most other languages work. Use it to
mimic how data is stored and transferred and to make requests to APIs.
Finally, restrictions help you be more creative and learn it inside out,
otherwise you go crazy with options.
What problems can you expect and how do you deal with them?
You’ll have problems with javascript.
There will be things you don’t understand and you don’t need anyone to talk to
because all the answers are on the internet.
When you don’t understand, there’s 2 things you can do.
-
Read the underlying ‘why’ of how javascript works.
-
Go to stackoverflow and see the direct answer.
If you Googled for ‘javascript list’ because you did not know how to create a
list then both w3schools and Stackoverflow are likely to be listed.
W3schools will give you a good overview of what a list is, how it fits into
the bigger picture.
Stackoverflow will give you an answer.
Stackoverflow is a site containing questions and answers related to coding.
It’s Google for coding. In fact, you don’t need to go directly there, you
can enter your question into google and it will give you Stackoverflow links.
Any time you have a problem, use a combination of these two to learn the what
and why of the question you’re asking.
This is how every developer learns.
You can also watch Youtube videos as they show you coding and results in
action. They’re an under appreciated form of free teaching some very smart
people have spent hours building for you.
Using a fun API in javascript to make a movie list
Once you’ve covered the basics of javascript and you want to learn about APIs,
run through Tania’s How to Connect to an API with
JavaScript.
It has both an overview and a great looking example of how to connect to an
API, return data and display it.
In this case it connects to the Studio Ghibli API to return a number of movies
and display them.
Keep building your vision board
I recommend building a vision board because it’s exciting to do, you’re
spending the time really thinking about your own future using images and text.
It’s also something you can show others and they’d be encouraged to do the
same.
If you’re interested in where to go next after this, I’ll write a follow up
post about back-end coding and how to start with that too.
What text editor makes you look like a super cool coder?
After you’ve understood that html files can be built using any text editor,
I’d recommend using Atom to edit html, css and javascript
files as it’s easy on the eye and it colours the code to help you decipher it
faster.
