How to Be a Good Front End Developer From Scratch
How to Be a Good Front End Developer From Scratch

Imagine you visit a website that opens up quickly, with eye catching design, quick navigation, amazing scrolling, well formatted layout and perfectly organized content. How does that feel; Amazing Right!  That’s the craft of a Front End Developer.

Pleasing User Experience is what makes any app or website stand out of the crowd. But behind the scenes of those amazing user experiences, lies tons of coding, designing and formatting by the developer.

Over the years, user experience, search experience and social experience of consumers has evolved, and so a front end developer needs to evolve too to meet the requirements, and beat the competition. Developer needs to develop websites that can provide high user engagement, friendly navigation, responsive layouts and accessible content formats.

Gone are those days when HTML use to be the sole markup language to design the front end, now a FE Developer needs to master multiple HTML, CSS, JavaScript, JQuery.

Also Read- Liaison Technologies Scholarship To Pursue Career in Data Management

How to Be a Good Front End Developer From Scratch

In this article we are going to present a roadmap to be a full stack FE Developer from scratch. It all starts with learning the basics, and that is HTML. You will need various tools and resources, to learn and implement your knowledge practically.

  1. Learn HTML

The markup language will be required to build the skeleton, the main structure of the website, which decides the flow of elements across the page. Learn the basic HTML tags and their applications, will help you maintain the flow. Initially you can take reference from W3C website or watch out some video tutorials on YouTube.

Initially you need to practice making some HTML pages and test yourself for how well can you play with the HTML elements, tags and attributes.

There are hundreds of HTML attributes and tags you need to remember to speed up the workflow, but thankfully some Cheat Sheets like HTML Cheat Sheet, and CSS CheatSheet are available that makes the job easier. Once you become comfortable in making HTML structures of the User Interface, it’s time to decorate it with CSS.

  1. Learn CSS- The Makeup Artist

CSS(Cascading Style Sheets) adds makeup to the blocks build by HTML, the style script. To define the size, color, background, positioning, spaces, and many more attributes of the elements, you must master CSS.

To automate CSS and increase the detailing, a more elegant syntax for CSS can be used, called SASS( Syntactically Awesome Styling Sheet) which acts as  preprocessor.

But beginners can start with CSS, it would be more than enough.

Note:- Learning these two will take time, your ideal time would be 5 hours a day for 30 to 35 days. Try building WebPages of different kinds, initially you can try to copy the look of some already established websites.

Like try to code the design of Amazon’s footer, or Flipkart’s header menu, or try to make a copy of the sidebar of etc.

More you try, better will be your implementation. See being a FE Developer is less about theory and more about implementation, so implement your learnings.

The idea is to get used to with the basics. Once done you can move to the next stage, i.e. adding life to the structure.

  1. Master JavaScript

JavaScipt adds functionality to the elements of the website, basically makes the site more dynamic. First thing is, it is not Java.

JavaScript is huge thing and you cannot get it covered in just a couple of days. A lot of practice, patience and consistency will help you master it. Again you can take help of W3C School Website and some YouTube videos to get through the concepts. Invest at least 50-60 days in implementing your learning’s, make 10 websites and get reviewed by someone. This JavaScript Cheatsheet will save your time and effort.

HTML+CSS+ Java Script and you are half way done being a FE Developer.

Here are some great online resources to start with:

  1. W3Schools
  2. FreeCodeCamp
  3. YouTube Channels:

4. Use Javascript Libraries

To enable some specific functionality to your web app, you can link to the javascript libraries. The link will fetch the code from the library itself saving your time and effort. Developers have built various libraries for JavaScript, to make the workflow easier and faster.

These 3 months will give you enough knowledge to choose your own JavaScript libraries, some common names in this space are JQuery, UnderScore and Lodash, Glimmer, React and D3.js.

So far JQuery is the best JS library to start with for beginners, here is the JQuery Cheatsheet for the quick references. JQuery is best for Document Object Model(DOM) manipulation, it simplifies your goal.

5. JavaScript Framework

JS Frameworks provides both architecture and the library, and helps by providing pre-coded elements.

For instance, if you need to build a slider or floating bar, than you need not code it from scratch, as it has already been coded with HTML, CSS and JavaScript. Since the element has already been coded, you just need to import it from the Framework.

If you want to make the frontend more interactive, reduce reload time, and don’t want to rewrite the component again and again, than definitely Framework is good to go option.

Twitter has its own JS Framework called Bootstrap, easy to use and understand. Angular JS is yet another best pick for its content. A combine use of both the framework brings life to the code.

These days, Responsive Designed Websites are in trend, and Bootstrap Frameworks makes it possible.

Before starting it, you can watch any code walkthrough video on YouTube about bootstrap. Here is a Bootstrap Cheatsheet, where you will get almost all pre-built bootstrap classes like Alerts, Forms, Navbar, Badges, Display, Flexbox, Navigation, Popover, Breadcrumbs, Grid and many more.

At an advanced level SPA or Single Page Application is in trends now, Facebook’s React Js is equally good and faster than Angular Js. For beginners, Bootstrap will give you a better understanding.

6. Learn Graphic Skills

To be a full stack FE Developer, its imperative to compliment the coding skills with graphic designing skills, because that is where the creativity in web design comes from. And, for great graphic design, Photoshop Skills would be required.

One of the best things about Photoshop is, various keys commands are here to help you, but the downside is you can’t remember them all unless you are a professional photoshopper. However, this Photoshop Cheatsheet will make your life easier. For using some icons or flat icons, you can import it from Font Awesome, here it it’s CheatSheet

Now moving forward in the roadmap, where the road becomes advanced. There are some toolkit that will you in the coding and testing process like:

7. Learning in IDE Mode

Simple text editors are fine, but can be tiring at times. Whereas IDE can be an effective alternative, as it debugs and compile the program at real time. The best IDE is Visual Studio Code offers built-in debuggers, easy navigation, syntax highlighters,  supports more than 30 languages and tons of other features. Alternatively you can use WebStorm or Atom IDE.

Visual Studio Code Cheatsheet

8. Code Testing

You might need a jaavascript testing framework, that can handle both functional testing, unit testing and the complete testing, and the best ones are Mocha, and Jestjs by Facebook. Jestjs works best when you are using React.js framework. Here is the Jestjs Cheatsheet ot help you save time.

9. Version Control – GIT

Every FE Developer should be using GIT, the best version control open source software that keeps the track of your edits and changes. The change log gives you all lines of code you have changed, edited or removed. Beginners can collaborate on projects and learn from the team professionals. You can clone the project, see who has watched your project, and test the frameworks. People can directly give reviews, report a bug or any other issue.

Final Words

You will need some automation tools like Grunt to minify JS, CSS, optimize image loading and other performances.

Make use own Browser Inspector, to sneak peak into the codes of a website and observe their frameworks. The best learning come from observation, so examine the webpage components with the Inspector tool.

Once you are handy with the codes, libraries, frameworks and these tools, you can review some frameworks that already exist in the industry. Review these core frameworks like WordPress, Jumla, Magento and Drupal. See and observe how they function, it will give you a clear idea on some core functionalities.


Please enter your comment!
Please enter your name here