You know that a website is made with HTML, CSS and JavaScript. Maybe you even know how to write in all three of those languages and put them together into a site, but something’s missing. Developers are supposed to be lazy, right? If all you’re using is plain old HTML, CSS and JavaScript to build more than the very simplest of projects, you’re doing too much work. Tools help us use solutions that already exist for common problems every developer faces. They let us strip out a lot of “coding overhead” and get down to the nitty gritty of actually writing our apps.
Five great tools for building websites:
5. Bootstrap
At least in the beginning, when prototyping a project, it’s useful to have a front-end framework to help get things built quickly. Bootstrap is one of the most popular frameworks and comes packed with tons of features. Its grid system encourages a mobile-first responsive approach, which, when used correctly, means your layout will shift depending on the screen width on which it is viewed. Bootstrap provides pre-written CSS and JavaScript to help you accomplish common tasks very quickly.
4. Sass
CSS is a powerful tool used to control the layout of a website, but it does have limitations. CSS preprocessors extend the language of CSS. Using a preprocessor involves using a slightly different syntax, often a simplified version of CSS that makes writing stylesheets significantly faster. The code written in the preprocessor syntax then gets compiled into CSS, which is what the browser reads in order to display our beautiful designs! Sass is one of the most popular options out there.
3. Gulp
Time and time again, you’ll hear that a good developer is also a lazy developer. We strive to make our processes as efficient as possible. That often means finding ways to automate parts of those processes. Task runners are tools made to help developers do just that. A “task” can be anything from compiling Sass into CSS to compressing images to launching a server. My task runner of choice is Gulp. It works by passing a file (or files) through a series of functions. Each of these functions does one specific thing, and it’s up to the developer to combine them in a way that makes sense and allows for a more efficient workflow.
2. Chrome Developer Tools
The DevTools make editing applications on the fly a breeze! Often used to work through problems with the layout of a site, the DevTools allow the developer to see changes to the code immediately reflected in the browser window. Other web browsers have very similar tools, but Chrome comes with a great set of tools right out of the box.
1. Atom
Perhaps the simplest of these tools is also the most important. Your text editor will be your constant companion on the road to becoming an awesome developer. You don’t need anything fancy to get started because, at its heart, the code you write is really just plain text. Keep in mind that it is not rich text. A word processor like Microsoft Word will add formatting that you don’t need. Atom is a very simple tool that can be customized and extended into whatever you want it to be. If there’s some functionality you need that doesn’t come with it out of the box, it’ll probably be very easy to find a package that will add that functionality.
Do you have tools for building websites that I know should know? Tell me in the comments!