Web Development Learning Path
Tags: webdev, beginners, codenewbie, tutorial
Published: 2020-04-28 20:12:31

There has never been a better time to learn to code or make a career change. The demand for web developers is at an all-time high, and it's only increasing. This article details the needed skills and the corresponding tutorials to learn them effectively.

## Start with basics
### HTML & CSS
[HTML](https://www.w3schools.com/html/) stands for Hypertext Markup Language. It's one of the main ingredients of any website and one of the so-called frontend languages. [CSS](https://www.w3schools.com/css/default.asp) stands for Cascading Style Sheets, without CSS, HTML web page would look boring. HTML and CSS are typically learned together. HTML is the skeleton of the page that gives it structure, and CSS is the language that gives it style.

### JavaScript
[Javascript](https://www.w3schools.com/js/default.asp) is the essential building block for adding dynamic features to your website, which makes them alive by adding interactiveness. The basics of the Javascript language are easy to learn. However, as the ECMAScript specification evolves, more and more advanced features are added to the language.

## Advanced CSS & JS
### CSS Responsive Design
[Responsive design](https://www.w3schools.com/css/css_rwd_intro.asp) means that the elements of the website adjust according to the screen size. This means that your website will look good whether the visitor is on a laptop or mobile device.

There are a bunch of CSS frameworks that can help you achieve a responsive design. Most known are [Bootstrap](https://getbootstrap.com/), [Foundation](https://get.foundation/), [Tailwind](https://tailwindcss.com/), [Bulma](https://bulma.io/).

### JavaScript Frameworks
JS Frameworks are collections of JavaScript code libraries that provide developers with pre-written JS code to use for routine programming features and tasks. Frameworks make developing common functionality easier and faster. 

The most popular frameworks [Vue](https://vuejs.org/), [React](https://reactjs.org/), [Angular](https://angularjs.org/), [Svelte](https://svelte.dev/).

## Backend
### Backend Language
The backend or "server-side" is the portion of the website you don't see. It is responsible for storing, organizing data, and ensuring everything on the client-side works. The backend communicates with the front-end, sending and receiving information to be displayed as a web page.

Some common backend languages are [PHP](https://www.w3schools.com/php/default.asp), [Ruby](https://www.ruby-lang.org/en/), [Python](https://www.w3schools.com/python/default.asp), [.Net](https://dotnet.microsoft.com/) and [Java](https://www.w3schools.com/java/default.asp).

### Database
The database is an organized collection of data, generally stored and accessed electronically from a computer system.

The most frequently used way to store data is through a SQL database. SQL stands for Structured Query Language, and in essence, that means your data gets stored in a structured manner but is still accessible in its raw form. Think of these tables as data types, consider Users and Purchases as two separate tables, and the relationship between them being how many Users purchased a certain item. The most popular SQL database is [MySQL](https://www.mysql.com/).

A bit newer to the scene, but rapidly gaining popularity are NoSQL databases. NoSQL databases appear very similar to JSON file structures. One big tree or list of data, without any real relationship between two data points or entities. Take for example a request for User data, with a SQL database it will need to request and receive each relationship of the User entity before being able to respond with the data, whereas with a NoSQL database it can simply grab the data points in the list and respond with them. What NoSQL gains in speed, it makes the tradeoff in building data relationship. The most popular NoSQL database is [MongoDB](https://www.mongodb.com/).

## Tools
### Version Control
A version control system allows users to keep track of the changes in development projects, and enable them to collaborate on those projects. Using it, the developers can work together on code and separate their tasks through branches. There can be several branches in a version control system, according to the number of collaborators. The branches maintain individuality as the code changes remain in a specified branch(s). Developers can combine the code changes when required. Further, they can view the history of changes, go back to the previous version(s), and use/manage code in the desired fashion.

Best version control systems are [GitHub](https://github.com/), [GitLab](https://gitlab.com/) and [BitBucket](https://bitbucket.org/).

### Module bundler 
A module bundler is a tool that takes pieces of JavaScript and their dependencies and bundles them into a single file, usually for use in the browser. It reduces the number of HTTP requests that are required to load a page.

Some of the modern module bundlers are [Webpack](https://webpack.js.org/), [Parcel](https://parceljs.org/) and [Gulp](https://gulpjs.com/).

**Download FREE learning resources on [my website](https://www.alenv.com/web-development-learning-path/).**