Most of the modern browsers support HTML5. That's why a fresher should start with HTML5 basic tags. Study and practice all the HTML5 elements. For development work, you may not have sufficient time to Google any tag or attribute. Use sticky notes or printed materials to memorize the critical tags and attributes.
Once you acquire a good knowledge of HTML5, start learning CSS3. Note that, CSS is harder than HTML. Most of the smooth animations and effects are now made using CSS. Explore Codepen and Tympanus. There are many HTML/CSS tips, tricks and examples. After learning CSS, let’s walk to the real world. Yes, now you need to try to convert PSD files to HTML templates. It must be responsive, remember!
4. Front-end Frameworks
5. Templating Engine
Templating engine is new a trend and the future of web development. The rapid growth of web applications has created a field for templating engines. In the near future, a big number of websites and web applications will run on a backend language and a front-end JSON-based template. The backend system will only provide the data via JSON or XML and the front-end will have a template engine to put the data inside the HTML structure. AngularJS and React are the future big web technologies. So study them.
Sublime text, WebStrom, and Atom are three of the most popular text editors. These editors have a range of shortcuts for faster development. Learn and practice them. I personally use Sublime Text 3. It has some awesome packages. The tool is very lightweight.
ii) Version Control
Use this element for version control purposes. Github and Bitbucket both have private repository service. Github private repository is paid and Bitbucket offers this service free for 5 users.
iii) Browser & Extension
In my opinion, Google Chrome browser is a nice choice for front-end web development. It has a ton of useful extensions like Firebug, ColorPick, JSONView, Page Ruler, Web Developer etc.
iv) Task Runner
Task runner is a must have element for any front-end developer. Most of my known developers use Grunt. It helps you do the minification, compilation, unit testing, linting etc.
Web development technology trend is always changing, so stay in touch with the trend. Also follow us to get the latest updates and tips.