So, you’re probably wondering what qualifies me to talk about learning to code. Well, after leaving 6th form, I got an apprenticeship at a local web agency. I was 18 with no website development skills – I learnt on the job. I’ve worked in many web agencies over my career. Both, as part of a large team of developers and also being the sole developer for an agency.
I have over 10 years of ‘on-the-job’ website development learning under my belt. I’d now like to pass on any tips I can to those who want to learn web development.
How do I learn to build a website?
There are a tonne of programming languages out there. If we were to believe Wiki, over 700! Because there are so many languages out there, it’s close to impossible to learn them all. I would recommend choosing an area to specialise in e.g. front end or back end development. This will filter down the languages that you will need to learn.
What is Front End Website Development?
Website development is largely split into two sides: the front end and the back end. The front-end is the “client-side“. This refers to the browser and the person connecting with that browser.
A front-end developer writes code a browser can decipher. The browser then responds by loading the page to display the design. This rendering will include everything from text and colours to buttons, images & menus.
HTML – Provides the structure
Hyper Text Markup Language is the crucial coding language. It creates and organises content so that a browser can read it. HTML uses tags to define and display content such as paragraphs, headings, and grid layouts.
CSS – Takes care of presentation
Cascading Style Sheets or CSS are what defines the styles shown on websites. It describes to the browser how to show your HTML by applying classes and ID’s to the HTML tags. For example, setting a background colour, fonts or image size.
- interactive maps
- animated graphics
- form validation hints
- and many more.
What is Back End Website Development?
Now, over to the back-end or “server-side”. This is the side of the website you don’t see. A back-end developer writes code that can store data such as account information. It’s also responsible for making sure that everything on the “client-side” works.
Back-end web developers make the server, application and database communicate with each other. To do this they use languages like PHP, Ruby, Python, Java and .Net to build applications. They also use tools like MySQL, Oracle and SQL server. Those tools find, save or change data and then serve it back to the user in front-end code.
For example, whenever you buy something, your browser sends a request server-side. The server then returns that information for the browser to interpret and display.
Let’s take a look at the types of languages that a back-end web developer uses:
Ruby is a general-purpose programming language. It makes it easy to store data after the user has navigated away from the page or closed the browser. It creates, updates, stores and retrieves data in a database. E.g. Facebook stores content written on a post in a central database. You can close your browser and shut down your machine, but the post will still be there when you come back.
Python is also a general-purpose programming language. It’s used to do things from testing microchips to building video-games. It’s fairly easy to learn as it focuses on readability making it much easier to learn than others.
Should I become a Front-End or Back-End developer?
You should now have an idea of the differences between Front-End and Back-End development. The next stage for you would be to understand the daily tasks of what each job role could include. This will help you to understand what you may enjoy and choose which path to take.
Once you have decided, it’s now time to start learning! Let’s take a look at some of the great resources out there on the world wide web.
Learn to code for free
The great thing about learning to code is that you don’t have to spend your life savings doing so. There are so many free resources out there. And, a bunch of support networks with experienced developers to help. When you’re starting out, these resources can be hard to find so let’s take a look at some:
CodeAcademy is a brilliant website with a huge library of tutorials. They focus on lots of different web languages and allow you to code in the website, making it easier to learn.
CodeAcademy have re-invented the way to learn code. You can choose what you want to learn, or if you’re still not sure, they will help point you in the right direction.
You learn by doing, and should be writing code within minutes of starting.
Your code is tested as soon as you submit it, meaning you’ll always know if you’re on the right track.
You can put your learning to the test with real-world projects and tailor made quizzes.
CodeAcademy also has a great community forum in which to get support along the way.
If you already know what languages you want to learn, YouTube is an excellent resource. There are lots of video tutorials for all web languages. Simply type in tutorials for the languages that you want to learn. You can save them in a playlist for later or jump straight in.
There are many resources out there to help you on your journey to learn to code, let’s take a look at a few:
The Mozilla Developers Network or MDN is an open-source learning platform. It includes information for web technologies and the software that powers the Web.
Stack Overflow is the largest and most trusted online community for developers. It is here where you can share knowledge, learn and build your career prospects. If you’re struggling with something, chances are the answer to your question is here already.
You may or may not already know, all developers at some point will use a text editor to create their work.
Here’s a list of text editors out there for free that you can download and use:
1. Sublime Text:
Sublime Text has support for a few dozen languages. It will colour code elements to make it easier for you to read the code you’re writing. Not only this, Sublime Text also warns you of parsing errors in real-time.
Sublime Text is a super fast program that is stable and mature. It also has useful features and many great details.
Atom is “A hackable text editor for the 21st Century”. This means that you can customise it to make it your own but it’s also perfectly usable straight out of the box.
Just like Sublime Text you can use Atom across OS X, Windows, or Linux.
Notepad++ is a very ‘old-school’ looking text editor. But, beneath it’s plain look, it’s a very powerful and customisable code editor. It supports many programming languages and is great for beginners.
Unlike Sublime and Atom, Notepad++ is only natively available for Windows.
Do it yourself
You’ll find as you go that the best way to learn to code is to try it yourself. Decide on a test project and just dive in. You can see how you get on as you go. And, if you get stuck, Google is your friend!
The world wide web has many more resources out there than the ones I have mentioned. You will find your favourites as you go along. Or, you may be lucky enough to know someone in the industry who can give you some advice.
If you’re struggling for test project ideas you can find 7 really basic ones here.
Good luck, I’d love to know how you get on so leave a comment below.