When I was learning web development a while back, I was often scared by the complexity of the huge web development world. Now, 6 years later, I am a full stack developer who can't wait to learn the next thing. This guide will hopefully help those who are equally frightened as I once was when looking at everything that you can learn.
Check out my video, or read the article below.
This guide will show you what I consider is the easiest path to master web development. It focusses on JavaScript and the MERN stack (4 bits of tech that allow you to make complete, or full-stack, web apps).
The paths of web development
You can go two (actually three) ways in web development. Front-end, and Back-end. The front-end of a website is everything the user sees and interacts with, for example a page in a browser, or the UI of an app on your phone. The back-end is everything that happens to give the front-end what it needs. Things like servers that serve the front-end with files and data, or databases that store data. Web sites need at least a front end, but many require additional features you can only accomplish with a back-end. So front-end AND back-end developers are highly sought by companies.
Btw: when you know both the front-end and the back-end, you are called a full-stack developer. Which sounds awesome, and can be considered the holy grail of web development 😎. HOWEVER, you should focus on either front- or back first before you should learn both.
The basics, start here
1. HTML 📄
HTML is the most important and most fundamental language of the web. It stores the content and the structures of a web page. All the text, images, links, lists, tables, input forms, buttons, embedded video players, etc. HTML basically represents a web page.
2. CSS 🎨
CSS is used to style the elements you create with HTML, and to create the layout of your document. You can change the colour, backgrounds, fonts, add margin, borders, spacing, grids, align elements vertically and horizontally, and waaaayyy more.
3. JavaScript 💾
JavaScript (not to be confused with Java, I know it's weird). Is the programming language of web pages. You can use JavaScript to dynamically change the content of the webpage when something happens. Eg: the user presses a button, you generate a pop up window with the login form.
4. Coding tools 🔨
Once you learn the holy trinity of the web (HTML, CSS and JS), you can already make complete websites. Because you will use these languages a lot, it's a good idea to learn some tools that will help you write with them more quickly and more easily.
Emmet
Emmet is a HTML toolbox. Shortcuts to quickly add complex html structures.
Prettier
A code formatter. Makes your code more pretty (and easier to read) by aligning, creating whitespace and indenting your code.
ESLint
A linter is a code analysis tool. ESLint will warn you when you are writing bad JS code. Prevents errors later.
5. The Terminal, Git and GitHub ☁
The next tool you need is Git. I can't live without it. Have you ever created some code one day and it just works, when the next day you break everything and don't know how to fix it again? Git will keep track of the old versions of your code for you. Also learn about GitHub. A place in the cloud where you can share your code with others (or with your dev team) using Git. Git is a CLI (Command Line Interface), so you also better learn how to use the terminal.
6. Hosting 🌍
When you have finished your website, you want to share it with the world. So you need to host your files on a server. This is difficult to do alone, luckily there are services that do it for you. I recommend Netlify for simple drag and drop website hosting. When you need a domain name (the google.com like things), go to Namecheap.com.
Back-ends
With these basic skills listed above you can make some basic front-end websites. However you will quickly discover that you need a server and/or database for some more advanced things like user accounts, or to download data from another server (eg: weather data for a weather app). In this guide I focus on the MERN stack: a collection of JavaScript based tech that is very easy to create front- and back-ends with. The M, E and N in MERN are some back-end tech tech I will describe below.
1. Advanced JavaScript 🤯
Because this guide uses JavaScript for all tech, it does not hurt to take a look at some of the advanced features of JS. Without describing in great detail, here are some of the things you should understand the basic concepts of before continuing:
- Scope
- the This keyword
- Arrow functions
- Callbacks
- Array methods (like find, filter, map, sort, etc)
- Inheritance (prototypes and classes)
- Asynchronous JS (handling and creating promises)
2. Node & NPM 🖥
Node (the N in MERN) is how we will run JS on a server. Node is a JavaScript runtime. It allows you to run JS without a browser. NPM is Node Package Manager. You will use this to manage all the code libraries you will be about to install into your node apps.
3. ExpressJS 🚦
ExpressJS (the E in MERN) is a Node framework to set up an API (Application Programming Interface). An API is how your frontend code will request stuff from your server. Express will detect these requests and you can then run your code to handle those requests.
4. MongoDB & Mongoose ☁
MongoDB (the M in MERN) is a database system that stores documents (unlike SQL databases that store tables with data). As an example: if you need to store user accounts in the database, MongoDB will store a document for each account, describing the account (eg: name, email, password, etc). Mongoose is an NPM package that you can use on a Node server with JavaScript to interact with the MongoDB database.
Front-ends
After you have learned the basic skills, you can choose to learn back-end development, or further your skills on the front-end.
1. Advanced HTML, CSS & JS 📄🎨
When you're going to become a master of the front-end, you need to have great fundamentals. All further tools and frameworks for the frontend are created with the fundamental languages HTML, CSS and JavaScript. So before you move up to more advanced stuff, make sure you understand the following:
HTML
- Semantics
- Accesibility
- SEO (Search Engine Optimization)
CSS
- Display (inline, block)
- Position
- Flexbox
- Grid
- Responsive layout
- Pseudo Classes / Pseudo Elements
- Effects (gradients, shadows, transform, etc)
- Animation
JavaScript
- DOM manipulation
- Scope
- the This keyword
- Arrow functions
- Callbacks
- Array methods (like find, filter, map, sort, etc)
- Inheritance (prototypes and classes)
- Asynchronous JS (handling and creating promises)
2. Node & NPM 🖥
Node is not only used for creating back-end servers. A lot of tools that we can use on the front-end run on Node. NPM is also the most used tool for getting and managing your libraries, frameworks and other tools.
3. Module bundler (Parcel) 📦
When you start to accumulate some other libraries / frameworks, it quickly becomes an issue to connect them to your own code. You will create countless script tags in HTML. You mess up the execution order. You loose sight of where your packages are installed. The solution is a module bundler. It takes all the JS you need in your app, and bundles it into a single JS file so you need just one script tag in your HTML pages. Although Webpack is the most used module bundler, I recommend starting with Parcel as it does not require any configuration, which makes Webpack a hell sometimes.
4. Front-end framework (React) ⚛
When you make some larger and more complex apps, you will discover that the basic languages HTML, CSS and JS do not scale very well for those larger apps. Front-end frameworks like React (React is actually an UI library, not a framework. But it accomplishes the same thing) are a tool to simplify the creation of more complex apps. A framework like React is definitely a must know tool for the advanced front-end developer. (Other options are Angular or Vue, but React is by far the more popular and the simplest).
Top comments (0)