frontend

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.

Karthik Kamalakannan / 17 July, 2017

17 July, 2017

The Novices' Guide to Front-end Development in 2017

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,

HTML

"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.

For example,

<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.

CSS

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.

JavaScript

"You're building your own maze - in a way and you might just get lost in it"

Marijn Haverbeke, Eloquent JavaScript

JavaScript is used for making your webpage interactive and fun - it provides good usability and reliability to users. In JavaScript, there is of course the basics and there are lots of JavaScript frameworks that you can use like Angular, React, Vue.js, Preact and so much more.

But the most important things here are task runners and package managers. Task runners are automated scripts that you can use like Gulp and Grunt - check these out to learn more. And package managers are available to ensure that all of the frameworks and dependencies in your project stays updated and are in the latest levels. And there is much more like WebPack, Browserify, Mocha and much more - so make sure that you get into JavaScript slowly and be confident with the basics first.

And the key to nailing JavaScript lies in repetition - you have to learn it first and then repeat it many times while working on your project to fully grasp the workings of JavaScript.

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

ES6 - To make writing in JavaScript easier

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

React - To make great, easy-to create user interfaces in JavaScript

And that's it, good luck for developing Front-End and if you have anything to say just get in touch with me @praveenjuge

Last updated: January 23rd, 2024 at 1:50:36 PM GMT+0