Kick Start Your First Front-End Development Project

Himanshu Saraswat | Monday,October 30,2017

get to know the perfect development environment for first web development project

Want to start your journey as a front-end developer/UI engineer? Struggling to set-up the perfect development environment? Wondering where to store the code and what could be the most economical or rather zero-cost way to launch your first project? If all these questions bewilder you then here is how you should have a rock solid start. Let's begin with answering a simple question first.

What should be the key asks for our first Front-End project?

  • Text Editor - To pen down our design implementations
  • An angel browser which supports debugging
  • A file synchronization and interaction tool to speed up our development
  • Code repository
  • A platform to host and showcase your work

1. Which text editor should I use?
Some key features which I feel should help us in the quest for our perfect text editor are :

  • Code suggestions & autocompletion
  • Repository connectivity
  • Should look pleasing to my teary coding eyes

We are all familiar with the much respected Notepad++, that will do the necessary job, but we need something a bit more advanced and way more interesting.

Here comes AtomAtom the hackable editor, offering numerous advance features for web developmentThe hackable editor.

Atom provides myriad of plugins to choose from, which will cater to all our needs of code formatting, syntax correction and code language detection.
The interface is pretty neat and soothing, but what I like the best is, its connectivity to GitHub. Committing and pushing the code to your personal repository is a piece of cake.

atom-code editor snapshot

Don't worry, we shall be covering the magics of GitHub right below soon.

Getting your perfect text editor is a very personal choice, but as we move forward in our development journey we need to get things done in the least possible time and in the best possible manner. Moreover, for all my tech-boffins out there, Atom editor is hackable to the core.

And yes, it's free.

Very useful & comprehensive documentation available @Atom Docs

ATOM

Now that we have our playground to code, where should we be viewing what we develop?

2. Which browser should I use to render & debug my HTML/Front-End code?

From a developer-friendly point of view what should be our assessing factors?

  • Debugging support
  • Should be able to point out our code coverage
  • Should audit and assess our webpage against standard practices
  • Should be able to assist us in improving our page load time

And the winner is here comes the winner drum roll


google chrome offers the best in class dev tools to debug and improve

Google Chrome- Not only hits every point in our list but also gives us seamless connectivity with google's services, for instance- Google Analytics-which is really what we'll be needing ahead in our journey to assess our work on the web.

All the chrome DevTools really ease our life and helps us in creating our masterpiece.
Below are some of its features which will sharpen your development skills from the very beginning.

#. Inspecting the DOM and styles

A feature that you will be using almost everytime to perfect your DOM layouts.

inspecting page element in chrome

#. Helps Debug our Javascript code

This feature helps you debug your javascript at runtime & get to the root cause of what's breaking your webpage in moments.

Debug javascript code in chrome

#. Helps to remove unused JS/CSS code

This is a feature which I am a real fan of and comes in very handy. You don't want to develop & showcase projects with huge chunks of unused code. Get to know the unused CSS & JS pieces in your code & get rid of them with ease.

Remove unused CSS & Js using chrome
CHROME

More comprehensive documentation @What's New In DevTools

#. Audit your page for improvements

Audit tab helps you gauge your page against standard best practices and helps you present an efficient code to a great extent.

Audit your webpage for improvements and best practices with chrome

#. Improve page load time

Get to know a complete picture of all the files that are slowing your project down. It gives you more than just clues to fix them right forever.

Improve page load time using network panel in chrome

Again, choosing an apt browser for your development needs is very subjective and a personal preference, but from my experience, Chrome is a one-stop shop for all your development needs.
Want to know more on Chrome DevTools, read the documentation @Chrome DevTools Overview

While coding it's very cumbersome to go and refresh your browser repeatedly to see your HTML/CSS changes, although I don't like someone keeping a watch over me while am coding, I really want someone to watch over my files for any changes and synchronize them by itself, but how?

The answer is Browsersync.

3. What is Browsersync?

It's a file synchronization & interaction tool, which is a real helping hand in reducing your development time considerably.

Live reloading & URL pushing, are the prime features which we'll be using & it all comes free.
It hardly takes 5 minutes to get browsersync up & running.

Built on Node.JS_ENTRY to support Windows, MacOS and Linux platforms, as a prerequisite for using browsersync you need to have node.js installed on your system. Get the appropriate Node.JS version for your operating platform & follow the usual installation process.

Node.js
Improve page load time using network panel in chrome

To check if node got installed correctly, open your terminal window and type the following:

node -v

Always try to close the terminal after installation. Enter the command on re-opening the terminal, which shall always correctly reflect the version that got installed.

To install browsersync, what we actually need is the node package manager(NPM), which should have got installed along with our previous node.js installation. To check if NPM got installed correctly enter the following command in your terminal:

npm -v

You should be able to see the current version installed.

With all this accomplished, enter the below command, to install browsersync globally.

npm install -g browser-sync

By now you must have figured out what am going to say next, "to check if browsersync got installed correctly". Yes, now you exactly know what to do.
Browsersync official documentation @Get started in 5 minutes.

#. How does browsersync help me?

With all prerequisites now in place, let's start our development environment. To run browsersync, go to the directory where you have stacked up your project code, open the terminal window & enter the following command:

browser-sync start --server --directory --files "**/*"
Improve page load time using network panel in chrome

The above command shall start a server on port 3000, watching all the files in the current directory. Tadaaaaaaaaa!, this is exactly what we wanted right.

Directory listing in browsersync which loads all the files

From this moment onwards, whenever you hit Ctrl+S in your editor, browsersync will automatically sync your changes and auto re-load the URL for you with .

Now, that we have a cute yet powerful editor, an angel renderer a.k.a browser & a time saver synchronizer, you can definitely code better & faster.

"Find the good. It's all around you. Find it, showcase it and you'll start believing in it."
-Jesse Owens

Did I hear showcase? Yes, you need to bring all your efforts & thoughts out to the world, to know that you have arrived, for all that little leverage in your résumé, for all that inquisitive hobbyist in you, you need to get your work a platform.

4. Where should I showcase my project?

GitHub repositoryGitHub logo

GitHub is an amazing repository, where you can not only store your code, but you can also collaborate with other developers, get your project code reviewed by your mentors and even showcase your work, but before that let's get to know how to get your code to GitHub.

When I created my first web project and wanted to share, the only thing that came to my mind was Google Drive, but people were not able to see my code in working state and many issues used to crawl in every day. That is when I felt the need to switch to GitHub.

#. How do you store code on GitHub ?

Sign up on GitHub and create your first repository.create a new repository on GitHub

Install GIT on your machine selecting an appropriate version, follow the usual installation steps to get it running.

install GIT on local machine/workstation
GIT

Now it's time to get your project some special space of its own.
Get the clone URL from the repository you just created.

clone a repository on GitHub

Create a folder on your workstation "first amazing web-project", open the terminal window and enter the following command:

git clone "clone URL for your repository grabbed in previous step"

You will notice a .git sub-folder being created to your "first amazing web-project" with a message on command line stating "You seem to have cloned an empty repository". No worries, it's just because we didn't choose to add a sample "readme.md" file.
Let's carry on and add some code.
Copy & paste your project code to the cloned repository folder & "do not delete the .git folder which just got created".

Follow below steps to get your code to the remote repository:

  • Open the terminal window in your cloned repository directory, yes, the one which has the ".git" folder and enter the following command:
  • git add .
  • This command will add all the folder in your project directory to your local repository & will get them ready for your very first commit.
  • Run the below command to check the status of your files and folders:
  • git status
  • All your files should appear in green, indicating that they are good to be added to your Git repository
  • To make your first commit enter the following
  • git commit -m "your commit message"
  • With your code now in your local repository, let's push it to the remote GitHub repository. Just enter the below command.
  • git push
  • You might be asked for authorization credentials at this step. Enter the credentials for your GitHub account & that's it. Your code is live for millions to collaborate, review & share.

Though performing GitHub operations using terminal method is a lengthy process, but it's very important that you are familiar with these basic operations.
Git cheatsheet and comprehensive help documentation @Sometimes you just need a little help.

Didn't we want to be steady & fast?
Remember our goal is to "get things done in the least possible time and in the best possible manner".

Here is when our cute powerful editor Atom comes to our rescue.

create a repository on GitHub

Atom has a very sleek integration with GitHub, which knocks out all the hassle of writing commands in terminal. You can view all the files you made changes to, compare your file versions, decide which files to stage for commit in an easy to use interface.

Compare and stage your file changes using Atom editor with Git Hub

But wait, how do I import my project in Atom? Don't worry, it's pretty self-explanatory from the interface, I know you will figure out.
Get to know more on Atom editor features @Atom Flight Manual

The operations of taking a pull from GitHub, committing & pushing your code to a remote repository is really easy and quick now.

commit, push & pull operations using Atom editor for GitHub

Know more on GitHub operations using Atom @Introducing GitHub for Atom

With your beautiful piece of code developed on an efficient professional environment, now it's finally time to give your work a great yet economical platform. No, we are not going to buy a hosting account. We are gonna use GitHub again, introducing.....

5. GitHub Pages

How to publish project using github pages wit no cost


It's a very convenient way of showcasing your projects to the world. Just follow and you'll have a web space of your own in no time.

  • Go to the settings option in your repository and select from source dropdown the branch you want to publish for your first GitHub page. Remember if you tend to have multiple branches for your project, the code in the master repository will get published in a default fashion.

  • How to publish project using GitHub pages-go to settings How to publish project using github pages-select from source dropdown
  • Once you have made the selection, you will have a domain assigned to your project as in the below snapshot, which you can share across, to display the great amount of diligence you had put in your project.

  • How to publish project using GitHub pages-get published url

GitHub is a powerful community with some very sophisticated features, as you progress in your development journey you will find a need for more. Comprehensive documentation to harness the full potential of GitHub pages @Websites for you and your projects.

With all these tools and platform at your disposal, bring up your ideas to the world.
Wish you a great start.

"Don't just dream success, train for it !"