Advice For Aspiring Web Developers
Coincidentally, twice in the last week I’ve been asked to speak to a young person about web development, programming, and what approach they might take to follow up their interest in the subject.
As a self-taught programmer of almost 25 years, I faced this same problem a long, long time ago. At the time, I had nobody to advise me. What this meant was that I spent a lot of time learning not just the wrong things, but things in the wrong way.
The following is a simple summary of what I would tell a young person who is interested in becoming a web developer or programmer, to hopefully help then avoid some of the pitfalls that I encountered, and to help them make solid and enjoyable progress in whatever direction of learning they take to.
Begin learning with HTML and CSS
In the beginning, was the World Wide Web. The ONLY tool that could be used to create a web page was HTML. It is the foundation of every single web page on every single website. There is no avoiding it, and nor should you, as it is a powerful tool when used correctly.
HTML (HyperText Markup Language) is not a programming language as such. It is a markup language, used to describe the state of something - in this case the content of a web page.
One of the first things you should understand about HTML is that it is not used to describe how a web page should look. It is used to describe what the contents of the page actually mean. Anyone who tells you otherwise is talking nonsense.
So how do you make a web page actually look nice and nifty? Enter CSS (Cascading Style Sheets). You use CSS in conjunction with an HTML document, to describe how the page should look.
Splitting the meaning of web content (HTML), from the styling of web content (CSS), is called Separation of Concerns, and this is a concept that is used widely in all types of computer programming, and is always considered a good practice.
So, to get started with web development, please do not be distracted by shiny things that many people will be banging on about, and do spend some time becoming proficient with HTML and CSS.
You need strong foundations to become a good developer, and for a web developer, these foundations are HTML and CSS.
Suggestion - pick one of your hobbies, and build a simple two or three page website about the hobby using nothing but HTML, CSS and a few images. You’ll be surprised at the fun you’ll have, and what you can achieve.
JavaScript is a good next step
Once you have HTML and CSS under your belt, you’ll likely want to try an actual programming language. This is conceptually quite different from HTML and CSS, and you may find that you enjoy programming more, or less, than building static pages. It requires a bit of a different mental model, but is arguably even more satisfying.
JavaScript (JS) was originally designed to be a companion to HTML and CSS, and was used to sprinkle on small amounts of interactive behaviour to otherwise static websites. Nowadays, it’s used for a lot more than just that, but these simple enhancements are a good place to begin your journey.
You can use JavaScript to add animations, launch popup windows and much more. Really the limit is only your imagination.
More modern releases of JavaScript have transformed it from its early roots into a decent, modern language. Huge numbers of developers around the world use it as their main programming language and earn a living working JavaScript jobs.
Avoid JavaScript frameworks at first
Pretty much as soon as you enter the world of JavaScript, you’ll come across references to some of the JavaScript frameworks. Currently the most popular are React, Angular and Vue, but there are countless others.
My advice is to steer clear of these at first, and actually cut your teeth on learning vanilla JavaScript without any framework. The frameworks can enable you to hit the ground running, and provide many convenient features, but as ever, if you don’t have a solid understanding of the foundations you’re likely to get yourself into a mess.
So at first, swerve the frameworks and stick to vanilla JavaScript. In fact, the latest releases of JS provide features that mean you don’t even really need a framework - in fact for most sites it would be complete overkill. JavaScript should be used to enhance things.
This neatly brings me on to my next point, which is that you should not rely on JavaScript to provide the core functionality of your website.
Progressive Enhancement & Accessibility
When you think of browsing the web, you probably think of looking at a web browser, which is showing you a web page. This may be true for the majority of users, but it’s not the whole story.
Many millions of people have various forms of disability, and cannot view web pages as easily as other people. To support these people, other forms of consuming web content are available, and sometimes this is NOT in the form of a web browser like Google Chrome or Safari.
Visually impaired users can use a screen-reader - this is software that interprets the content of an HTML page, and then reads the text out loud so the user can listen to it. Alternatively, there are braille readers which convert the web page content into braille, which blind people can “read” by feeling the braille with their fingertips.
Other users have difficulty with colour blindness, so you have to consider your web page text colours versus background colours, to ensure there is enough contrast for people to distinguish the font easily.
In general, these alternative methods of consuming web content do not support JavaScript at all. This is why you should always strive to make your website function in a basic but usable way with JavaScript disabled, and only use JS to add additional, non-essential functionality.
This concept is called Progressive Enhancement and essentially means the most important content should be available to the least sophisticated user agent (the web browser, screen reader, braille reader etc), and that you then add additional, less important functionality using techniques that might not be supported by everybody’s devices.
You should also realise that in some environments, like corporate office networks, users might not be allowed to have JavaScript enabled for security reasons, so again it’s important to consider how your website performs without any JavaScript.
The solution to this is to rely on the core technologies of the web - HTML and CSS - as much as possible, and to not get sucked in to providing the core content using fancy pants JavaScript.
Using an IDE
When you start your coding journey, you might well use whatever text editor your computer provides. On Windows this is Notepad, and on Mac it is TextEdit. Both of these are fine for when you are getting started, but there are better options.
Enter the Integrated Development Environment (IDE). This is a specialist software package designed especially for programming.
The basic premise of the IDE is that it actually “understands” the programming language you are writing, and can highlight things you have written such as syntax errors, incorrect function names, and bad parameters. It can also provide auto-completion to save you typing out a lot of boilerplate code.
An IDE also helps you make changes to your code. For example, if you rename a variable in one place, it can automatically rename it for you across your whole application. This gets more and more useful as your application grows in size.
Now many people might say using an IDE is cheating and using one when you are starting out learning web development is not a good idea. I say the opposite is true.
Using an IDE stops you from making stupid, frustrating mistakes that take you hours to fix with no real learning benefit, and this massively increases your sense of satisfaction and general enjoyment of the programming process.
Secondly, an IDE makes suggestions to you based on what you’ve already written. It basically acts like a teacher looking over your shoulder and nudging you in the right direction. I consider it a learning tool as well as a productivity tool, and often helps you discover new features of your programming language, and encourages you to follow best practices.
As a quick aside, always try to have an awareness of what “best practices” might be whatever programming language you are using. There are millions of hours that have been spent by people going before you who worked out what works and what doesn’t. Use their blood sweat and tears to save your own!
Do copy’n’paste, but not blindly
There is a common theme in software development, with junior developers being accused of just being “copy and paste” developers. This is down to the popularity of sites such as Stack Overflow where you can find solutions to many common programming problems, and of course ask your own questions about the problems you are currently tackling.
Personally, I don’t see a problem with copy and pasting solutions from Stack Overflow or similar sites, with one important caveat. Simply make sure you understand what you are copying!
Just take the time to understand the code. In fact, this is something you should automatically and instinctively do whenever you look at code written by somebody else (which will be very frequently). This is one way of learning new techniques and should not be undervalued.
If you end up with your own application full of snippets of other people’s code that you don’t personally understand, you are asking for trouble.
Respect copyright and don’t steal images
When getting started with programming it might be tempting to just copy and paste code, download images you like and whatever else you fancy.
Whilst in many situations this is fine, you must realise that often times people actually legally own a piece of content, and you DO NOT HAVE THE RIGHT TO RE-USE OR COPY IT. I put this in capital letters as it’s extremely important. You can get sued for thousands of dollars/pounds/euros/whatever if you steal content you do not own.
Always look at the licence for something you want to re-use. In the open source world, there are various types of licence that apply to free-to-use software too. I won’t go into more detail here as it’s a whole other article but just be aware of what you are doing.
Just because something is available does not mean it is free to use.
Distinction between backend and frontend, or server and client
With web development there is an important divide when you are thinking about how to build a website or application. This is the frontend/backend divide, alternatively called the client/server divide.
I’ll just briefly describe what this is so you can be aware of how things work.
When you click a link and request a web page, the following process happens:
Your web browser (the client), which is on your computer/device, looks at the link address you’ve asked for, and sends a request to the server that hosts that website.
The server, which is likely hosted in a data-centre somewhere a long way away, receives the request, and does whatever it does to construct the response. The response is normally just the HTML content of the page your browser has asked for.
The server then sends this response back to the your web browser (the client) over the network.
Your browser receives the content, and converts it into the web page and displays it.
You can see that within this process, there are two physical locations (the client, and the server) and each of these does some work:
- the server builds the web page HTML and sends it
- the client receives the HTML content and converts it into a visual web page
Now the actual “work” can be done by a variety of technologies, and as a web developer you get to choose where the work in done.
We’ve already talked about JavaScript adding additional functionality to your web page. In this case the work is being done inside the client (your web browser) which is on your local device.
But how does the HTML content get constructed on the web server? This can be something as simple as having HTML files pre-prepared and stored on the server, and the server simply loads them up and sends them over the network. This is called a Static Site. This is the simplest possible technique, but is still suitable for many websites.
Using the static site technique works really well for very small websites, but when you need a larger site, other techniques are needed. One of these is to construct the HTML on demand using a programming language on the server. This is called a Dynamic Site.
These programming languages on the server are called backend languages.
Moving to the backend
Backend languages allow you to create larger websites and to do clever stuff like talk to databases, query other servers for data and much more.
There are many many different languages that can be used on the backend, but the ones I’ll discuss here today are:
PHP
Arguably the original backend language for web development is PHP. It’s been around for a long long time now, and is ideally suited to building websites.
Modern PHP is a huge improvement on earlier versions, which were pretty sketchy, and it is a great option to start your backend web programming journey. It has an easy learning curve for beginners, and automatically avoids a lot of the pitfalls of other languages that you really don’t want to be bothering with at first.
PHP also has a huge footprint on the web - it powers WordPress and many many other website platforms, and whatever statistics you look at will show that the majority of all websites are powered by PHP.
Python
Python is similar to PHP in that it is an interpreted language and does not require any complicated steps to get started with.
It also has an easy learning curve for beginners, and a powerful feature set right out of the box. Many school and college course introduce students to programming with Python.
Python is not as popular for web development as PHP - it has strengths which make it popular in other fields as well, such as machine learning and scientific analysis. It is rather more of a general purpose language than PHP. However it is still something I would definitely recommend if you are interested in web development.
NodeJS
NodeJS is basically JavaScript but that can be run on the server instead of in the client web browser. It came about because many people were proficient in JS from their time writing code for the client, and wanted to use the same langauge on the server as well.
Indeed, this ability to use the same language on the server as well as the client makes a lot of sense - you need a smaller skill set to be able to work on both areas, teams don’t need to have both frontend and backend developers.
If you have already spent some time learning JS in the client, it is a logical step to work with NodeJS on the backend as well. All of your skills are directly transferable and you can hit the ground running.
However, it comes with a couple of downsides.
- You aren’t learning a new language. Having multiple languages under your belt makes you a better developer and widens your understanding of the basic fundamental concepts of software development.
- The Javascript ecosystem is a mess. There are hundreds of thousands of packages you can use, but choosing between them is difficult, many are badly designed and poorly maintained. It’s a case of too many cooks spoil the broth. Wading through all this when you are a beginner is time consuming and frustrating. Don’t get me wrong you can totally deal with this, I’m just saying it might be better to avoid this until you have more experience.
Use a version control system
When you write code, you generally end up writing a lot of it. And I mean A LOT. One of the applications I manage has over 100,000 lines of code that I’ve written myself, as well as another 3.2 million lines of code from vendor packages that other people have written.
You also change code a lot. And sometimes, probably often, you make mistakes. Trying to keep track of all these changes is an impossible task. That’s why we need help. The solution to this problem is version control systems (VCS).
The most popular version control system is called Git. There are many others, some older, some newer. You may also have heard of GitHub or GitLab. These are web applications that provide Git services to you.
Essentially, a version control system stores all of your code, but also all of the changes to your code. Whenever you make a set of changes to your code, you “commit” those changes, with a descriptive messages, and the changes along with the description are stored in the “version history”.
The version control system then provides you with what you might think of as a time machine, allowing you to go back to any point in time to look at the state of the code as it was then. But you also see the description that you submitted along with your changes, so you don’t just see the “what” but you also understand the “why” that caused the change.
This is incredibly powerful, and basically stops you making huge mistakes that you cannot undo.
Version control systems also help with merging changes from multiple developers, so are essential in a team environment. However, even as a solo developer I would not start any project without having it in a version control repository.
Ask for help
It does not matter how experienced you are - never think you have nobody to ask for help. Regardless of what language you are using, or what your specific problem is, there are always people willing to help you.
Each language will have its own community of programmers, and the vast vast majority are willing to help out others. It’s one of the things I enjoy most about being a software developer - you can learn when asking for help, but you also learn by providing help to others. It’s a win-win situation.
Conclusion
Getting into web development is a beautiful journey. Start with the basics of HTML and CSS and you’ll soon be addicted! Follow this up with some JavaScript or a backend language and you’ll quickly unlock the potential to build any website or application you can possibly dream up.
There are so many potential directions for you to go in, and never a glass ceiling that stops you from progressing. It is such a wide arena that you should always follow your nose and investigate whatever subject takes your fancy.
If you are enjoying your journey, it won’t feel like a chore and you’ll maximise your experience. I’ve been doing this for decades and my drive for more is still undiminished!
Useful Links
Languages
IDE’s
Version Control
Software
- WordPress - PHP website builder
- Express.js - NodeJS framework
