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?
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 :
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 AtomThe 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.
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
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?
And the winner is
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.
#. 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.
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.
#. 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.
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.
To check if node got installed correctly, open your terminal window and type the following:
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:
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 "**/*"
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.
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."
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 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.
Install GIT on your machine selecting an appropriate version, follow the usual installation steps to get it running.
Now it's time to get your project some special space of its own.
Get the clone URL from the repository you just created.
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:
git add .
git commit -m "your commit message"
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.
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.
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.
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
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.
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 !"