The Novices’ Guide to Front-end Development in 2017
For anyone just starting out with Front-end Development this is your eye candy - we tell you all the tools you’ll need to be a forerunner in Front-end.
Subscribe to our awesome Newsletter.
Front-end development is one of the most swiftly changing field compared to all the other IT fields - and that’s solely because every Front-end developer constantly tries to make the whole process of Front-end development easier for developers and provides a much better experience for the users.
But due to this constant change, it can also be equally hard to have a firm grip of what’s happening in the mysterious world of Front-end development. I say ‘constant change’ but a few things remain the same while the other things change a lot. Here, I’ll just list a few things that I think will be useful if you’re going to be a web developer in 2017.
The following are the things that I think will prove to be helpful for you, even if some people don’t agree with most of the things that’s listed here. Most of these things happen to be a must learn if you want to be a web developer now. Speaking of must learn,
“After the world apocalypse, there were no survivors except for two - cockroaches and HTML” - Me
HTML is the first thing that you’ll need to know for development in web. Everything you now see on the web is run by HTML - this makes it one of the most useful languages to learn. And as an added bonus, it’s easy! You could learn 90% of HTML in just an hour! 😄
So, learning HTML is easy - however, writing good HTML is not so easy nowadays because HTML5 has some good semantics that you should follow. To get a more clear understanding of how semantic HTML works I recommend HTML5: Up and Running by Mark Pilgrim which provides a clear understanding of how HTML5 came into place and how to code it semantically.
<body> <header> <hgroup> <h1>Header</h1> <h2>Subheader</h2> </hgroup> </header> <nav> <ul> <li><a href="#">Menu Option 1</a></li> <li><a href="#">Menu Option 2</a></li> </ul> </nav> <section> <article> <header> <h1>Article #1</h1> </header> <section> This is the first article. </section> </article> <article> <header> <h1>Article #2</h1> </header> <section> This is the second article. </section> </article> </section> <aside> <section> <h1>Links</h1> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> </ul> </section> </aside> <footer>Footer</footer> </body>
This code gives a semantic layout like this,
+-----------------------------------+ | header | +-----------------------------------+ | nav | +---------------------+-------------+ | | | | section | aside | | | | | | | | +-----------------+ | | | | article | | | | +-----------------+ | | | | article | | | | +-----------------+ | | +---------------------+-------------+ | footer | +-----------------------------------+
which is better for SEO and just for good code practice in general, so even if you don’t know HTML just keep learning about the best practices involved because there’s always more to learn.
HTML by itself looks bland and so CSS was invented - in here, you can change the look and feel of your web page. A ‘web designer’ will typically spend more time here than in any other place.
CSS is pretty easy for small projects, but if you want to improve your workflow for larger projects you should try SASS. SASS is a pre-processor for CSS which has some features that are not available in normal CSS like reusability. Learning CSS is pretty important even if you aren’t going to be a web ‘designer’ because even if you’re a developer it’s still important to know how CSS works and how to manipulate them.
On the other side there are CSS frameworks that you can try like Foundation, Bootstrap, Materialize and many more. While these can be useful when starting out, I wouldn’t recommend using frameworks any more. At this juncture, the only type of framework that I’d recommend is SASS based like Primitive.
We have to dig deeper
While the above are more than enough to be a novice developer, I’d also like to suggest that you go through the following
Sketch - To design all your screens before you get into coding them
Gulp - To automate your build process (and pretty much everything else)
Browserify - To develop on all devices and for the sweet auto reload on file change
And that’s it, good luck for developing Front-End and if you have anything to say just get in touch with me @praveenjuge