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.
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.
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.
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 Times.com 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.
JavaScipt adds functionality to the elements of the website, basically makes the site more dynamic. First thing is, it is not Java.
HTML+CSS+ Java Script and you are half way done being a FE Developer.
Here are some great online resources to start with:
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.
JS Frameworks provides both architecture and the library, and helps by providing pre-coded elements.
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.
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.
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.