How to Get Started in Learning Web Development

INTRODUCTION

A CONFUSING START

Welcome to a guide on how to get started with learning web development. The Internet is huge these days, and I am sure that many people would love to get a slice of the web development cake. But just where do we get started? There are so many web-based technologies these days – HTML, CSS, Javascript, PHP, ASP, Python, databases, etc…

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!

 

 

 

SECTION A

THE FOUNDATIONS

https://code-boxx.com/wp-content/uploads/2019/08/ico-gear.svg

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.

 

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.

Again, the tutorial on CSS tutorial series on w3schools would have covered it somehow… But if you need more tips and stuff – Do check out my responsive CSS tutorial series right here on Code Boxx.

 

6. JAVASCRIPT

Moving on, HTML and CSS only serve as the foundations of a webpage. So what happens when a user clicks on a button? How do we deal with all the processing? That is when Javascript steps in, and the next component that you need to learn – Here is the Javascript tutorial series on w3schools.

 

7. DEBUGGING

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!?

Trust me, just spend 10-15 minutes to go through how to debug for Javascript. Not installations required – Just learn how to use the built-in developer’s tool in your web browser, that will save you hours of pain and stumbling around blind.

 

 

SECTION B

INTERMEDIATE SKILLS

https://code-boxx.com/wp-content/uploads/2019/08/ico-gear.svg

At this stage, you should have covered most of the basics- HTML, CSS, and Javascript. But that is only the front-end client-side, you have not even touched on the server and database. So moving on, we will touch more on the server-side.

 

8. FRAMEWORKS

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.

 

 

10. DATABASES

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:

 

 

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…

These are actually possible with Javascript, and things are still evolving with web technologies. Just don’t stop learning, because innovation never ends.

 

SECTION C

MORE RESOURCES

https://code-boxx.com/wp-content/uploads/2019/08/ico-gear.svg

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.

13 Websites To Get Help With Programming

 

CLOSING

WHAT’S NEXT?

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!

Leave a Comment

Your email address will not be published. Required fields are marked *