A CONFUSING START
Which ones should you learn? Which ones to get started with first? Is there a “correct order” to learn web development? Let this senior web developer walk you through some recommendations, as well as share some good learning websites and tools (that are free) – Read on to find out!
TABLE OF CONTENTS
| Section A
| Section B
| Section C
The way of the web developer is a long one. Let us start with some of the basic foundations in this section.
1. THE BASICS
As a web developer, the first thing you need to know is the background of the Internet – Know the history, concepts, and some of the technologies behind it. These may be boring to read, but they are necessary… It will be pure embarrassing when a web developer does not even know how the Internet works.
- The History of the Internet – Read on Wikipedia
- HTTP, HTTPS, URL, DNS – This is a pretty good introduction on Launchschool.
- Client-side VS Server-side
2. LEARN HTML & CSS FIRST
Armed with the basic knowledge of the Internet, the next step is to actually get started on learning how to code.
- Hypertext Markup Language (HTML) is the backbone of web pages, and it is used to define the page structure. This is your very first step into the cyber world of web development.
- Cascading Style Sheets (CSS) works beside HTML. While HTML deals with the structure of web pages, CSS deals with the cosmetics – I.E. Which font to use, what font size, which colors, etc…
- There are a ton of websites that teaches basic HTML and CSS. One of the most popular websites is w3schools, and here are their tutorial series on HTML and CSS.
- Of course, if you want to on-the-go, on your mobile device – Here is my list of the best apps to learn programming.
3. GET A GOOD EDITOR
Getting started with HTML and CSS is easy – You do not need to download and install any “special tools”. Since they are essentially just text files, you can use the “default” Windows Notepad or Mac TextEdit to create and edit HTML files.
But Notepad is kind of “Stone Age”, and I will recommend getting a good editor instead. Just do a Google Search for Free HTML editors, and you will get a ton of results to choose from. You can also check out my list of recommended editors if you like.
4. LEARN WEBPAGE DESIGN LAYOUT
Some of you guys may be thinking “what has design got to do with programming”, or “I do programming, not design”. Well, this is somewhat of a sad expectation these days. Most “common folk” do not know the difference between a web developer and web designer these days.
So at least learn a few basic website layouts. Rather than outright reject a job, it is better to manage the expectations of clients – Let them know that you are capable of doing some basic designs and layouts, but you are not a designer-by-trade.
5. RESPONSIVE WEB DESIGN (RWD)
As you might already know, the mobile market is huge these days – There are big computer screens, mid-sized tablets, and small smartphone screens. Simply creating “static” webpages that fit into big screens no longer works – We need fluid designs these days that will fit itself onto various screen sizes, and that is called responsive web design.
Finally, one very important basic skill remains to be learned for the basics – Debugging. Somehow, some beginner tutorials totally miss this out, leaving the beginners in total darkness – Why is my code not working? Why is it not doing anything when I click on the button? What has gone wrong? What is happening!?
Why reinvent the wheel when there is already a wheel? Frameworks are exactly wheels that you can fit into your projects. There are a lot of frameworks out there in the market, but a few of the popular ones are:
These will help to speed up and improve the quality of your projects, and I will recommend to at least pick up one of these frameworks.
9. SERVER-SIDE SCRIPTS
So far, you have only touched on the client-side scripts. I.E. Scripts that run on the user’s computer. Server-side scripts are a little more complicated, and there are many choices – PHP, ASP, JSP, Python, Ruby, Perl, etc…
The key here is not to overwhelm yourself by trying to learn everything – It is impossible. I will recommend starting with PHP, as it is one of the easiest to learn. You can start by installing XAMPP on your computer, and here is the PHP tutorial on w3schools.
Moving forward in your journey in web development, you will realize that you need somewhere to store data and transactions. Databases do the job, and again, there are a lot of databases out there to choose from – MySQL, Oracle, MongoDB, PostgreSQL, MSSQL, and a lot more.
But if you have installed the XAMPP server – It already comes packaged with MySQL, and here is the SQL tutorial on w3schools.
11. MORE CONCEPTS & TECHNICAL STUFF
Hope you guys are not starting to regret on learning web development :lol:, because there are still a lot more to it. Here are a couple of common concepts and technical stuff that you have to know:
- Create, Read, Update, Delete (CRUD)
- Model, View, Controller (MVC)
12. PROJECT MANAGEMENT
Yep, some of you guys here may be thinking again “I do programming, I am not a manager”. Well, wrong. Even for the smallest “one man” project, you are already doing some “small scale” management by yourself. No need to learn all the Six Sigma, RAPID development, project risk assessment stuff, but you have to least know the software development life cycle (SDLC).
13. KEEP ON LEARNING!
Hope I have not killed your interest in web development. Yes, it is challenging. But at the same time, it is also fun to explore a lot of different technologies, and think of ways on how to apply them – Speech recognition, Narration, GPS Tracking, Augmented Reality, and more…
That’s it for the recommendations, and here are a few more links that may be useful to you.
FREE DEVELOPMENT TOOLS & RESOURCES
WHERE TO GET HELP
Stuck? Don’t understand how a certain thing works? Here is a list of websites that you can fire questions at.
Thank you for reading, and we have come to the end of this guide. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!