TOP 10 SKILLS TO BECOME COMPLETE WEB DEVELOPER IN 2020
1) HTML/CSS
These two terms keep coming up. There’s a good reason, though. You won’t find a single Web Developer job listing that doesn’t call for (or assume) proficiency in these two languages.
But let’s take a step back and look at what HTML and CSS are.
HyperText Markup Language (HTML) is the standard markup language used to create web pages. A markup language is your way of making notes in a digital document that can be distinguished from regular text. It’s the most basic building block you’ll need for developing websites.
CSS (Cascading Style Sheets) is the language used to present the document you create with HTML. Where HTML comes first and creates the foundation for your page, CSS comes along next and is used to create the page’s layout, color, fonts, and…well, the style!
Both of these languages are absolutely essential to being a Web Developer.
2) JAVASCRIPT
Another MAJOR tool in your Web Developer toolbox is going to be JavaScript (JS). Where HTML is a markup language and CSS is a style sheet language, JS is the first language I’ve mentioned that’s a bonafide programming language. What’s the difference? Where HTML and CSS determine the presentation of a page, JS determines the function.
In some instances a very simple website or web page is fine, but for situations where you need interactive features—audio and video, games, scrolling abilities, page animations—JS is the tool you’ll use to implement them (though as CSS evolves, it’s starting to handle a lot of these duties as well).
3. CSS AND JAVASCRIPT FRAMEWORKS
Wait, we already covered CSS and Javascript, right?
We did, but they’re both such a big part of front end development that a lot of other skills you’ll need are going to build off of them.
CSS and JavaScript frameworks are collections of CSS or JS files that do a bunch of the work for you by providing common functionality (think logging into a website or searching a blog). Instead of starting with an EMPTY text document you start with a code file that has lots of awesome JS already in it.
Frameworks have their strengths and weaknesses—don’t we all!—and it’s important to choose the best framework for the type of website you’re building. For example, some JS frameworks are great for building complex user interfaces, while others excel at displaying all of your site’s content.
To make things even MORE fun you can use frameworks together. It’s common to pair Bootstrap with another JavaScript framework like AngularJS. The content is handled by Angular, and the look & feel is handled by Bootstrap (with some CSS sprinkled in, too).
Since you’ll be using CSS and JS all the time in your web development, and since many projects start with similar style elements and code, knowledge of these frameworks is critical to being an efficient developer.
4. CSS PREPROCESSING
Yes, another skill related to CSS!
CSS on its own, while essential, can sometimes be limiting. One of these limitations is that fact that you can’t define variables, functions, or perform arithmetic operations. This is a problem when a project grows in scale and code base, as you’ll soon find yourself wasting a lot of time writing repetitive code to make changes. Like CSS (and JS) frameworks, CSS preprocessing is another means of making your life as a developer easier and more flexible.
Using a CSS preprocessor like Sass, LESS, or Stylus, you’re able to write code in the preprocessor’s language (allowing you to do things that might be a huge pain with plain old CSS). The preprocessor then converts that code to CSS so it will work on your website.
Let’s say you decide to tweak the shade of blue you’re using across a site. With a CSS preprocessor, you’d only have to change the hex value in one place instead of going through ALLLL your CSS and changing the hex values everywhere.
5. VERSION CONTROL/GIT
Almost halfway through the list, and we’re finally to a skill without HTML, CSS, or JS in the name.
Still totally related, though!
After all your hard work marking up with HTML, styling with CSS, and programming with JS, you’ll have gone through a number of revisions in your development.
If something goes wrong along the way the last thing you’ll want to do is start over from the beginning. Version control is the process of tracking and controlling changes to your source code so this won’t happen.
Version control software—like open source stalwart Git—is a tool you’ll use to track those changes so you can go back to a previous version of your work and find out what went wrong without tearing the whole thing down.
As you might imagine, this a skill that you (and your prospective clients and employers) will be very happy to have.
6. RESPONSIVE DESIGN
Remember the other day when you only used one device to look at a website? Yeah, me neither. The days of desktop (or even laptop) PCs being the only way of viewing websites are so far gone that I won’t date myself by talking about them.
These days we use any number of computers, phones, and tablets to look at web pages. Ever notice how these pages adjust themselves to the device you’re using without you doing anything on your end? This is due to responsive design. Understanding responsive design principles and how to implement them on the coding side is key to front end development.
One cool thing to keep in mind regarding responsive design is that it’s an intrinsic part of CSS frameworks like the aforementioned Bootstrap. These skills are all interconnected and so as you learn one you’ll often be making progress in the others at the same time.
7. TESTING/DEBUGGING
From a website for your mom’s dog walking business to an international site for online banking, bugs are a reality of the development process. In order to keep things moving you’ll need to test your code for bugs along the way, so the ability to test and debug makes the list of essential skills for front end developers.
There are a couple of different testing methods for web development. Functional testing looks at a particular piece of functionality on your site (like a form or database) and makes sure it does everything you’ve coded it to do.
Unit testing is another method. It tests the smallest bit of code that’s responsible for one thing on your site and examines it individually for correct operation.
Testing is a big part of the front end development process, but fortunately, it’s another area where there are frameworks to help you. Programs like Mocha and Jasmine are designed to speed up and simplify your testing process.
8. BROWSER DEVELOPER TOOLS
Users will ultimately be interfacing with your websites through a web browser. The way your site is rendered by these browsers is going to be a big part of whether your work is successful or not.
Similarly to the testing and debugging mentioned above, all modern web browsers come equipped with developer tools. These tools allow you to test and fine tune your pages in the browser itself, in ways specific to how the browser is interpreting your code.
Specifics will vary from browser to browser, but browser developer tools generally consist of an inspector and a JavaScript console. The inspector allows you to see what the runtime HTML on your page looks like, what CSS is associated with each element on the page, and also allows you to edit your HTML and CSS and see the changes live as they happen. The JS console allows you to view any errors that occur as the browser tries to execute your JS code.
9. BUILDING AND AUTOMATION TOOLS/WEB PERFORMANCE
You might be seeing a pattern that HTML, CSS, and JavaScript are the three primary tools for front end development. Meanwhile, most of the other skills either help make those tools more efficient or help test your site and fix mistakes. The trend continues here with building and automation tools and web performance.
You can code the coolest website ever but if it performs sluggishly on the user’s end it won’t matter. Web performance speaks to the amount of time it takes for your site to load. If you’re having problems with performance times there are steps you can take to improve them such as optimizing images (scaling and compressing images for peak web performance) and minifying CSS and JavaScript (removing all unnecessary characters from your code without changing functionality).
Carrying out these tasks that lead to better web performance can be another front end time-sink, but that’s where building and automation tools come in. Programs like Grunt and gulp can be used to automate image optimization, CSS and JS minifying, and other web performance chores. In the ongoing quest for efficiency, it’ll be in your interest to get familiar with them.
10. COMMAND LINE
In a lot of ways, the proliferation of Graphic User Interfaces (GUIs) into computing was one of the best things to ever happen. Who wants to type lines of esoteric commands onto a dead screen in order to get around a machine? It’s a lot easier to point and click on a lively, interactive menu.
GUIs can be alluring when it comes to web development and coding as well. And they’re often fine and handy. But an all-purpose GUI is going to have its limitations for some specific applications. There are going to be times when you’ll need to open a terminal on your computer where you can enter typed commands (command line) to get what you need.
It’s the difference between your computer only yielding what’s available on the surface and being able to get what you need by digging in with your bare hands.
Even if the majority of your work is still done through a GUI, you’ll add serious cred to your front end skills if you have a mastery of the command line.
