Front-end development tips for beginners

I’ve been coding my entire life and my true passion is front-end development. I love experimenting with new tools and frameworks.

The first thing users see when they open a website or an app is the interface. There are a million ways and tools to build a good interface. But there are some ways that help you save time and enjoy the process. Today I’m going to explain how to achieve both.

Pre-requisites:

Basic HTML/CSS knowledge

Command line

First thing, get familiar with a command line. You will be using it a lot. It saves you time (git commands, setting up a new project, deploying project) and you can automate your workflow with it. I’m using a Mac Terminal with oh-my-zsh framework and git aliases.

Code editor

Install a good code editor. I know some developers prefer using a basic text editor, emacs or vim and I understand them. I tried a lot of code editors in the past but my all-time favourites are Sublime Text 3 and VSCode. Try VSCode because it’s open-source and highly customisable. I switched to it this year and I love it.

CSS Frameworks

To avoid reinventing a wheel get familiar with a CSS framework. I use Bootstrap 4 most of the time, but you can choose another one if you want.

Browser Sync

When you start coding front-end you would like to see the changes in the browser as they happen. To do that you can sync your code editor with the browser using gulp or the latest Javascript frameworks (my favourite is Vue.js).

Sass Mixins

Writing CSS styles in plain CSS is fine but you can save a lot of time if you use CSS pre-compressors. I use Sass (SCSS). You can use saas mixins to save time and see the changes immediately on your screen.

To be continued…