A web developer must learn front end development as well as back end development. so we will divide these two into two different web developer skills checklists.
But make no mistake, becoming an average web developer isn’t hard, becoming an excellent web developer, that’s the hard part, it takes time and constant learning. Because of the continuous growth of the WEB, technology is advancing faster than ever before, and there is something new to learn each day.
Web developer skills list
- GIT (Code Versioning)
- Basic graphic design
- Back end and Databases
- Working with Hosting (Publishing web site)
- Libraries and frameworks
Web developer basics
Regardless of the tool, framework or library you use, undoubtedly, the HTML and CSS are a must (HTML5 and CSS3 are the latest standards that work in the most common browsers out there).
HTML (HyperText Markup Language) is the standard markup language for creating websites, and HTML documents are formed by elements that are represented with tags. To be honest, I don’t know how many HTML tags there are, but for starters, you should take a look at the top 10 HTML tags.
Many HTML tags can have additional information in the form of attributes. Furthermore, mastering HTML is the key to becoming a great Web developer.
HTML basics, you have to know:
- Top 10 HTML tags (link)
- Understanding the basic structure of an HTML document (<!DOCTYPE html>, <html>, <head>, <body>,…)
- Metadata (<head>)
- Basics of SEO
- Correlation between files (connect your CSS file, JS file and images with your HTML file)
- How to use resources, what is URL
- Understanding relations between tags
- Basic debugging (example: recognising a missing closing tag)
As we said before CSS (Cascading Style Sheet) is a must in Web development. We use it to add style to our website, including the layout and design. We also use it to properly display our website on different devices and screen sizes.
On the one hand, we talk about elements in HTML, but on the other hand, we talk about how these elements should be displayed in CSS. The central part of CSS is its properties. It is hard to say how many properties exist because the list is continuously updated.
One of the best parts of CSS is that it saves you a lot of time. Not only by using CSS selectors correctly, but also the CSS selector classes, it can manage the style of multiple pages.
Basic CSS knowledge needed:
- Knowing how to use and when to use CSS properties (borders, text formatting, font colour)
- CSS selectors
- CSS classes selectors
- Using multiple selectors
- Inserting CSS in an HTML (external and internal)
Finally, when you master the basics of JS, you can start to call yourself a Web developer. When you start learning a language like JS you start thinking like a programmer. This means that this is where you encounter algorithmic thinking, which is the bases for solving all the problems you will face as a programmer.
Basic JS knowledge needed:
- Basic data types (numbers, strings, object)
- Data structures (Array, JSON)
- Conditional statements
- Interaction with a user
- Manipulating DOM (Document Object Model)
- Object-oriented programming
When learning the basics, this is not that important. But once you cover the basics, the tool that you use is essential. Below is a list of the most popular IDE (Integrated development environment) tools (source: Stack Overflow survey).
To be honest, I haven’t tested all of them, but only a couple. As you can see at the top of the list you can find Visual Studio Code, and justifiably so. In the last couple of years, it is the tool that has made the most progress and is the most frequently updated. The number of extensions is growing and so is its community.
I advise you to select one that you are most comfortable with, but you have to take into consideration that one day you will work in a team of web developers and that it will be important you all use a similar tool.
Debugging is a process where you find bugs, errors or any kind of abnormalities in your code, then you fix it or change it. On average a software developer spends not less than 33 % percent of his time debugging.
This is a very complicated and time-consuming process, but unfortunately, it is a necessary evil. With time debugging becomes fun, because it’s like solving puzzles and small correction can make everything work.
Basic debugging knowledge needed:
- A good understanding of how to use the console.log () method
- Setting breakpoints
- Browser debugging tools (my favourite: Chrome’s Developer Tools (DevTools))
GIT (Code Versioning)
Code versioning or version control enables you to track and control, but also revise any changes to your programming code. Imagine that you make a few smaller changes to your code and then the whole web site stops working. It is more than obvious that the changes you made had errors, the quickest solution is to track back to the last time or version of your code that worked.
This is where tools like GIT come in to play. To some extent, but still amazingly helpful, code versioning tools enable you to make mistakes without consequence.
It is also a great tool when you’re cooperating with other web developers on the same code and small mistakes can be quickly found and corrected.
At this point, you will be programming like a pro, and because you will be striving for perfection, you will be making changes to your code frequently. You have to track all the changes you make so that when a bug occurs, you have the possibility to look at the code before you made any changes.
For this, we use a version control system like Git. Git will help you track all your changes, and it’s a must when you work in a team.
Basic code versioning knowledge needed:
- Committing code
- Sharing your code with others
- Restoring code to the previous version
- What is a branch, what is a tag
- How to merge code
- Knowing what is code review
- What is a pull request
Basic graphic design
I don’t know where you are coming from, but knowing graphic design is a huge plus. Furthermore, if you are not familiar with graphic design, you should get acquainted with some of the tools graphic designers use.
This is important because somewhere along the way to becoming a web developer you will be handed a design that you will have to bring to life on the web. To make it easier for you, find below a list of graphics tools. If you learn the basics of at least three tools, listed below, it should be enough.
Basic graphic design tools:
- Paint, Paint.NET (Windows); Preview (Mac) minimal tools for resizing, cropping
- Canva for small edits online
Back end and Databases
Once you have mastered the part of the web site that the user sees, you have to move on and take care of what is happening behind the scenes. We call this part the back end, and back end is used for all the magic that we don’t see; this is where we store all the data.
Data is stored, manipulated and retrieved from databases. These days we frequently use cloud systems like Azure or AWS to store these databases.
What you have to learn is how to manage data in a database by using languages, such as SQL (Structured Query Language) or NoSQL (used by MongoDB, Firebase and others).
Basic back-end knowledge needed:
- AWS or Azure
Working with Hosting (Publishing web site)
Web hosting enables you to store your resources (HTML files, CSS file, JS files, images, database) on a server that has great internet connectivity and is accessible via the World Wide Web.
There are more than hundreds of website hosting providers out there, so when you select one, the last thing you need to do is name your website. When you choose a name and want that name to be the address of your website, you have to register that address at a domain provider (just a heads up google.com is already taken :D).
Basic Web hosting knowledge needed:
- What is a URL, domain name, subdomain
- What is IP
- Basic FTP knowledge or other tools for pushing code to a server
- How to refresh your web page with a new version
- How to do it without interruptions
- DB migration and upgrades
- Basics of optimization
- Making resources smaller
- Basics of server health analytics
Libraries and frameworks
With frameworks, it is basically the same. Why build something from scratch if, by all means, you can use something and adapt it to your project? Frameworks simplify your work but give you a more standardized approach to coding.
Libraries and frameworks are NOT shortcuts to becoming a web developer. They exist to help us work faster and easier, but in the end, you still have to know how these libraries and frameworks function to use them correctly.
Popular libraries and frameworks:
- Library (you should know at least one)
- Google charts
- Framework (you should know at least one)