Initial Tools & Languages Needed Before Becoming a Web Developer
Self-Taught Route
The path to become a web developer (that includes Front-End developer, Back-End developer & Full-Stack Engineer) can be exciting and highly rewarding!
However, it can be overwhelming and stressful when you just initiated the self-taught route. Suddenly you are bombarded with all sorts of advice from YouTube videos, internet posts, comments, etc. suggesting all the tools and technologies you should learn.
Don’t spend too much time overthinking and looking for the ‘best’ languages because it’s impossible to learn them all, and employers are not expecting you to know everything!
Keep in mind that every developer followed a different path, which eventually led them into their respective tech-related job or freelance position.
The main goal of this post is to reduce any beginner’s level of stress, and let the reader know the initial or basic tools that you need to know before searching for web development jobs. Remember it’s okay to not know everything!
These are the following technologies that you need to know:
Please note that you don’t need to learn these in the order listed below, but it is highly recommended.
1. HTML5
Description: Hyper Text Markup Language (HTML) is not a programming language but it is the standard language used to create the “skeleton” or structure of web pages. HTML5 is simply HTML’s most recent version. You don’t need to study or spend too much time figuring attributes or syntax regarding HTML4 or any previous versions.
Prerequisites: Source-code text editor such as Sublime text or Visual Studio Code (personally my favorite). Download and install Google Chrome as well. These are free and there are a bunch of tutorials on YouTube that will guide you on how to install these.
2. CSS3
Description: Cascading Style Sheets (CSS) is a styling markup language as well. This tool allows the developer to decorate or style any websites (or web apps) and include layouts and animations. It works along HTML and JavaScript. CSS3 is simply CSS’s most recent version. You don’t need to study or spend too much time figuring attributes or syntax regarding previous versions.
Prerequisites: Make sure you have a Source-Code text editor and Google Chrome as previously mentioned.
Tip: You will constantly hear about ‘CSS Frameworks’ such as Bootstrap. These are simply packages or modules that you can import from the internet to include attributes and animations that were already designed by someone else, so that you may avoid re-creating styling features.
3. JavaScript (JS) or Vanilla JavaScript
Description: JavaScript is a scripting or programming language that adds functionality and other complex attributes to a website. JS works along with HTML and CSS. However, this language allows you to dynamically update content. JavaScript’s most recent “scripting standard” is ES6. Don’t let the internet confuse you, ES6 is part of Vanilla JS. Please be aware that older browsers may NOT support certain aspects of ES6, therefore use Google Chrome.
Prerequisites: Basic HTML and CSS; and Google Chrome’s developer tools (Simply click on View and scroll within Developer).
Tip: You will constantly hear about JavaScript’s Front-End libraries or frameworks such as React, Angular or Vue. These are based on JS however I do not recommend attempting to learn these before having a good understanding of JavaScript since these are slightly different in certain aspects.
4. UNIX Commands (Command Line Interface)
Description: Knowing basic Unix commands via command-line (Terminal) is essential for running servers, installing packages or modules, and moving throughout your computer’s filesystem, which is hierarchical. Every file is stored in a directory or folder, and these have a unique pathname. Don’t spend too much time memorizing every command out there, remember that a lot of these things can be find in Google.
Prerequisites: None. Terminal is included on Mac computers; and the Command Prompt is installed on Windows as well. These applications are installed on every computer by default.
Tip: LINUX is not the same as UNIX.
5. Git
Description: Git is a version-control system that allows developers to track their projects’ progress. You need the command-line to track the main changes in any set of files. Don’t spend too much time learning every Git command out there, remember that a lot of these things can be find in Google.
Prerequisites: Basic understanding of Unix commands via command line.
Note: Github is not the same as Git, they are related but Github is the site where you create repositories for coding projects (or any kind of project since you may load any type of file), and host sites for static websites or simple apps. You’ll eventually need to open an account with Github (it’s free) to showcase your projects.
6. Node.js & NPM
Description: Node or Node.js is an environment outside of a web browser that executes JavaScript code and it is used to run back-end services, such as connecting APIs or a SQL / NoSQL Database. NPM stands for Node Package Manager and it’s an online platform that allows developers to download free tools or packages that are written in JS as well.
Prerequisites: Basic understanding of Unix commands via command line.
7. PostgreSQL & MongoDB
Description: SQL stands for Structured Query Language and its exclusive for relational databases. Relational databases are composed of tables that connect or relate to each other via row/column model. MongoDB is a non-relational (or NoSQL) database that stores data in “objects” nested within curly braces. Any type of database serves the purpose of storing data.
Prerequisites: For MongoDB simply understanding JavaScript and Node.js is enough. When it comes to SQL (such as PostgreSQL, MySQL, SQL Server) you don’t really need to have a solid understanding of any programming language; thus, you can practice running different queries throughout the command line (see YouTube tutorials on how to install PostgreSQL in your computer).
8. React JS
Description: Front end JavaScript library with the goal of building UI (User Interface) components.
Prerequisites: Knowledge of HTML, CSS, Vanilla JS (ES6 included), Node.js and NPM.
Tip: This tool has increased in popularity in recent years because it’s easier and more practical than Angular and Vue.
9. Python 3
Description: This is a general-purpose programming language where you can create web apps through some of Python’s libraries (Django and Flask). You don’t need to know Python to be able to use HTML, CSS, JS and React, but Python is typically included as a requirement in most software development job descriptions.
Prerequisite: You need Jupyter Notebook or an IDE (Integrated Development Environment) such as PyCharm to work with Python 3.
Tip: Python is user-friendly and an excellent language for beginners. Spoiler alert! Most development jobs that you apply for will likely include a technical interview. Python’s syntax tends to be shorter and less complicated than most other programming languages.
Conclusion
Specific programming concepts, project ideas or online courses were intentionally not covered in this post, since the intention is to go over the initial tools or minimum requirements prior to becoming a developer. In addition, Google and Stack Overflow are your best friends when it comes to searching for solutions. Remember, patience is key for this process.
