Learning website development: Starting right
I recently attended a meetup where quite a lot of people where new to web development and where interested in pursuing it as a career.
I recently attended a meetup where quite a lot of people where new to web development and where interested in pursuing it as a career. Throughout the course of the event I realised that a lot of these people where causing themselves a lot of headaches and as anyone who's been through the process of learning web development will know, the last thing you want to do is be giving yourself more obstacles and headaches than what's necessary.
Throughout this article I'm going to outline some of the things that I wish someone would have told me early on and should hopefully help people new to web development get off to a good start.
Starting your journey: Becoming a web developer
Before we jump into the nitty gritty there are two things I would like to point out:
1. You need to become a life learner
You will soon find that website development is a very fast paced industry which is constantly changing, this can be both exciting and daunting at the same time. There will be times that you will get frustrated and there will be times when you feel overwhelmed by the seemingly never ending "mountain" to climb. You need to know upfront that this continuous learning is part of the job and isn't going to change. But being aware of this will at least prepare you for what is about to come "Fore warned is fore armed".
2. It's about building a strong foundation
When it comes to web development (and most other things) there is no shortcut to success, the foundations you lay at the beginning of your journey will serve you well into your career. When you learn, learn slowly with concentration and fully commit yourself to the process. The worst thing you can do is skim over what you are learning in haste to "get it done" and later find that your haste is your downfall and back to the drawing board you go to start the learning process again properly.
Learning: The technologies of the web
HTML (Hyper Text Markup Language)
HTML provides the structure of a webpage, it's how you say "I would like a heading here and a paragraph and image there".
CSS (Cascading Style Sheets)
CSS is applied to your HTML to change it's appearance for example, you can take your heading and tell the browser that the text found in the heading should be blue, red, pink or any other colour you would like.
Focus on true comprehension
As mentioned previously, a strong foundation is key to success. When learning you should be relentless in un-complicating the complicated. When you read, watch or hear something for the first time and you become confused do your best to keep working through whatever it is that is confusing you, keep digging until the new concept is no longer confusing.
Once you understand the subject be sure to revisit the topic again after a few days to check your understanding. Another tip (not my own) is to find someone to explain the concept to (or explain it out loud on your own) being able to explain something and have the listener understand is a good sign that you have a good grasp on the subject.
Practice, practice, practice
There's only so much you can gain from learning theory you need to get your hands dirty to truly understand and build muscle memory in your brain (if there is such a thing). A typical approach for me goes as follows:
- Research the topic I want to learn
- Attempt to build something, applying what I've learnt
- Get confused/get stuck
- Attempt to understand where I've gone wrong
- Research the topic more, possibly re-reading documentation/tutorials
- Repeat the above steps until I feel I have truly mastered the topic
This approach has worked for me in the past and I hope it proves useful for you too.
Adopting the problem solver mindset
You need to learn these languages to be able to build websites but these languages are merely tools. Your job will be to use these tools to solve problems. The problems you have to solve can vary widely, it's one of the things that makes web development and programming in general fun! The problems you face will usually be associated with one or more people/actors:
The customers' problems
Customers are the people that will either be the owner of the website you are creating (clients) or the people who actually use the websites you create (end users). You will have one or both of these types of customer, even if you are your own client 🙃
Clients have very high level problems such as "I want to make more money" and they generally have a very high level solution "I want to make more money so I need a website" (sometimes they will say this as though there is a pot of gold at the end of any web development project).
End user problems
End users, the people who will use the websites you build will often have more direct problems, such as "The website is slow", "I'm struggling to complete x action" and so on.
Web developer problems
Your problems are the results of breaking down these high level problems. Here is where you will face many sub-problems that are like puzzles for you to solve, like I said, fun! An example, the client wants the menu to "zoom" onto the screen, how do we accomplish this?
The point of mentioning these different types of problems, is to highlight the importance of learning to become a good problem solver, you will often feel like you are as much a detective as you are a developer.
Choosing an editor
To start writing code you need a place where you can write. As a programmer you need some form of text editor that is built for writing code (talking bare minimum, you could just use notepad but this post is about making life easy) there are many options to choose from with varying levels of features and price points. I currently use VS code which is a free and open-source editor that is available for windows, linux and mac.
A note on Microsoft Word
Repeat after me "Microsoft word is NOT for web development". I was horrified when someone said to me "I'm struggling with x here's my code" and the person showed me code in Word.
A note on Tools
We've talked about the main technologies of the web but before bringing this article to a close I wanted to talk a little more about tools. You will quickly find that there is a sea of tools available to you as a web developer, this is a great thing in the respect that there are lots of tools built by some very smart people to help you do your job better and make your life easier. The downside is that the shear amount of tools available and the constant emergence of new tools can be overwhelming and lead to feeling like you are always playing catch up, don't worry you are not alone. I don't want to overwhelm you by mention tons of tools but I will mention two that you are likely to come across very quickly.
Version control tools allow you to save and retrieve your code at a particular point. This is useful because you may want to 'roll' your application back or you may want to work on a new feature without loosing the current working version of your website. GIT is a popular choice for version control. Similarly to NPM, Github is a popular website for storing your git projects. See this article for a better explanation of git and Github.
Frameworks and libraries
A library is a codebase that gives you a set of functions you can call to achieve a task (libraries can be stored as packages on NPM) for example you can use the add function of the lodash library to add some numbers together. A framework is similar in that it provides code that you can use but specifies a way to complete a task, you take it as a whole rather than cherry picking what you want as with libraries.
Going further: Server side programming and databases
Note: If you find yourself getting confused in this section, don't worry, it's something that you can come back to later after conquering the basics. Remember, it's important to go slow and steady the information below is just provided as an overview.
After a you've been developing for a while you may start wondering if there's a way to stop repeating yourself over and over again each time. This is where server side programming languages and databases come into play. A server-side programming language runs on a server (a computer that completes a specific task, it serves) and will connect to a database to retrieve the data which it stores.
When navigating to a static (HTML, CSS and JS) website a typical request to a website will look like this:
- User types a domain e.g www.example.com into a browser (makes a request)
- The web address is converted to an IP address using a Domain Name Server (DNS)
- The request travels across the network until it reaches the server with the IP address that it is looking for.
- The server accepts the request and will return the requested file (in this case a HTML file)
- Once this process is complete you will see the fully loaded web page
When using a server-side programming language things change, when a request is made the server will run some code to perform certain actions before returning the html to the user. These actions could be checking that a user is logged in before sending back the information contained in the page, it could be to connect to a database and return the requested data that is held in the database (for example a blog post). The process explained above is typical of a monolithic web application and differs when it comes to a service based architecture, but this is going way out of scope for this article. For more information on different types of web architectures see this article.
We've covered an awful lot of ground in this article, we've talked about getting set up with an editor, talked about the technologies of the web, discussed a process for learning these technologies and the mindset you need to adopt throughout your journey. We also briefly touched on server-side programming and databases. If you are feeling a little overwhelmed right now, try to focus on taking your journey to learning web development one step at a time. If you're hoping to start a career in web development trust me when I say, if you're committed you will get there!