As a tech newbie, knowing what to learn and what order to learn it is often an issue. There are tons on programming language in the web development ecosystem, as well as a plethora of tools to be conversant with. It’s easy to get lost in the vortex of indecision and bewilderness.

This is why I have come up with a short but concise web development roadmap for newcomer and aspiring web developers, along with their respective resources.

TABLE OF CONTENTS

• Learn HTML
• Learn CSS (and frameworks)
• Learn JavaScript
• Learn React, Vue or Angular
• Learn the basics of Wordpress
• Learn a server side language/framework
• Learn SQL or NoSQL, or both
• Learn Git and any public repo
• Learn DevTools
• Learn SEO
• Find your first client

LEARN HTML

HTML is the markup language of the web. With it, you can make texts underlined, bold, italicized etc. You can also create navigations, forms and many more web elements. HTML is essentially used to give structure to web pages.
Compared to the other languages listed here, HTML is by far the easiest to learn. And one of the best places to learn it is over at W3Schools

LEARN CSS (and frameworks)

CSS (Cascading Style Sheets) is used to style/design HTML elements. Without CSS, the whole web page would look boring. CSS can also be used to create simple, yet eye-catching transitions and animations.

Learn more about CSS with this intoductory crash course by Brad Traversy on YouTube:

CSS by TraversyMedia

LEARN JAVASCRIPT

Javascript is used to make a web page more dynamic. Things like animations, alerts, timers, moving buttons etc are easily made with JavaScript. With it, you can write scripts and logics that will be executed whenever an event is triggered. JavaScript is a multi-paradigm, high-level language which has evolved to become one of the most popular languages not just in web development but also in many other fields.

The Mozilla Developer Network are reputed for having a thorough and detailed guide on learning JavaScript

MDN’s javascript guide

LEARN REACT OR VUE (OR ANGULAR)

These are front-end JavaScript frameworks/libraries. They make writing JavaScript easier and faster. So you can forget about the elementary rules and create dynamic applications very fast. These are used to create single page applications, i.e applications which have only one page (typically index.html). A router is then used (with javascript) to map to other resources.

Learn them both over at YouTube:

React crash course
VUE crash course

LEARN THE BASICS OF WORDPRESS

Wordpress is a content management system which enables you create web apps incredibly fast, without necessarily knowing how to code. With little training, you can use Wordpress.

Create a blog with wordpress

LEARN PHP, PYTHON OR NODE

These are all server side languages/technologies which are used to create server side applications, i.e applications that does not run on the browser, but the web server. Some of the benefits of creating such applications are better security and SEO optimization.

Node crash course
Python Tutorial

LEARN SQL AND (OR) NOSQL

SQL database system uses tabular relational model to represent data and their relationship. NoSQL provides a mechanism for storage and retrieval of data other than tabular relations model used in relational databases. Some examples of SQL databases include MySQL, Oracle, PostgreSQL, and Microsoft SQL Server. NoSQL database examples include MongoDB, BigTable, Redis, RavenDB Cassandra, HBase, Neo4j and CouchDB. Databases are basically containers for data.

SQL Introductory video

LEARN GIT AND GITHUB

Git is a version control tool used to manage and track any and all changes made to source code. GitHub is simply a public repository where anyone can push in, store and manage their source code.
There’s no better place to learn Git in-depth than this site:

Git in-depth lesson

LEARN DEVTOOLS

Chrome DevTools is one of the most popular tools to debug and assess your app, however there are many other options out there. Brad Travery’s crash course is all you need:
DevTool course

LEARN SEO

SEO stands for Search Engine Optimization, which entails the rules guiding how search engines (like Google) rank your site. This is a very important topic to learn if you’re looking to create professional sites which will need organic traffic. I found a great introductory article for SEO:
SEO in-depth explanation

FIND YOUR FIRST CLIENT (FREELANCING)

At this point, you should be set to land your first developer role. You can do so as a freelancer, with the following platforms:

• Fiverr
• Upwork
• Toptal
• Guru
• Freelance
• PeoplePerHour
• Upstack
• Github Jobs

WHEN YOU GET STUCK, GO TO THESE PLATFORMS

• Google (search you problems)
• Stack Overflow
• YouTube

Keep learning, keep practising, keep building.

You can reach me on Twitter as well.

See you soon!

P/S: My private blog is here