Home > Uncategorized > Menjadi Web Developer

Menjadi Web Developer

I’m not gonna lie to you, to become a good web developer isn’t easy.

Knowing a little bit of HTML, Javascript and CSS isn’t enough. I’m writing this for those of you who want to learn how to become a web developer that can hold his own with the best in the world.

While it might take some time it is possible to teach yourself everything you need to know. If you put in the effort and focus on the right things you will get there.

So lets get into it.

Part 1, building a foundation.

In the first part of this series of posts we will look at the foundations of the web and focus on the core technologies and concepts anybody who wants to become a web developer should know.

Even if you are an experienced developer it’s worth spending a little bit of time going back to basics and making sure you have a rock solid foundation.

If you know and understand all these concepts you should be able to build any static website. Later on we will look at web frameworks, server side programming, data visualisation and more. For now we are focusing on the basics.

HTTP – The transport layer

Every single thing you do on the web is built on top of HTTP, serving web pages, REST API’s, webservices. All of these technologies use HTTP as their transport protocol.

When learning HTTP make sure you understand:

  • How the request response model works.
  • Headers and what they are used for.
  • The stateless nature of the web.
  • Cookies and their purpose.
  • The main HTTP verbs and the difference between them.
  • HTTPS and certificates.
  • Caching and all the places it could occur

Have a look at this HTTP tutorial to brush up on your HTTP knowledge.

HTML – The content layer

HTML is a markup language that is used to describe the content you produce on the web. HTML is combined with CSS by your browser to display information. HTML should be used to describe the content of your document and it’s structure. Not what it looks like. This way of thinking about HTML is called semantic HTML.

Courses and tutorials:

CSS – The presentation layer

Cascading style sheets are used to dress up your content. It’s a language that is used to describe to the browser how you want your HTML rendered.

Does writing CSS feel like this to you?

Because CSS seems fairly simple it’s easy to pick up the basics by just fiddling around. Learning it this way often means you write CSS much like Peter Griffin in the image above. You try random stuff until it works or you just give up. If you have had this experience you are not alone. Luckily there are a few basic concepts that will allow you to actually understand what’s going on.

Concepts like:


If you are an absolute beginner at CSS it’s worth checking out the teamtreehouse courses on CSS, I recommend the following order:

  1. CSS Foundations
  2. CSS Layout Techniques
  3. CSS Best Practices


Javascript – The programming layer

Mastering Javascript and learning how to be a good programmer will be your hardest task by far. If you are already a desktop or backend programmer and want to become a web developer you have a distinct advantage.

Because learning how to program well is such a vast topic we are only going to focus on learning the basics of the Javascript language right now. I also have a few other posts on becoming a good programmer you might want to have a look at.

Once again if you are an absolute beginner have a look at the treehouse course Javascript Foundations

Once you have a grasp of the basics learn these techniques:


Douglas Crockford has an excellent book on Javascript called JavaScript: The Good Parts. He also did a great series of video lectures for Yahoo that are worth watching.

Volume 1: The Early Years

Chapter 2: And Then There Was JavaScript

Act III: Function the Ultimate

Episode IV: The Metamorphosis of Ajax

Part 5: The End of All Things

Scene 6: Loopage

Level 7: ECMAScript 5: The New Parts

Section 8: Programming Style & Your Brain

Then get to grips with the following Javascript Libraries:

Version Control – Looking after your code

Version control systems help you keep track of multiple versions of your code and allows you to undo changes as well as create different versions of your code base. There are many VCS systems but because of github GIT is by far the most popular one.

To get to grips with the basics:

Tooling: Giving you a head start

One of the places with the largest room for improvement in the web development space is the use of tools to speed up the development process.  Front end development is a little late to the party when it comes to opinionated tooling frameworks.  In recent years yeomanand it’s associated projects have made great strides in kickstarting new projects, prescribing best practices and providing tools to help you stay productive.

Yeoman is a robust and opinionated client-side stack, comprising tools and frameworks that can help developers quickly build beautiful web applications. They provide everything you need to get started without any of the normal headaches associated with a manual setup.

Have a look at the videos below for more in-depth information on why you should get to know yeoman.

Build tool: Automate everything!

Why should you bother with a build tool?

In a word: Automation.

Build tools (or task runners) allow you to automate repetitive tasks like minification, compilation, unit testing, linting, etc.  Additionally it allows you to specify task dependencies and the build tool will ensure that tasks are run in the correct order.

My two favorite build tools are Grunt and Gulp:

  • Grunt:The Grunt ecosystem is huge and it’s growing every day. Grunt is very popular so there are hundreds of plugins to choose from. If you are new to web development and web tooling I would start with Grunt, there are more packages available and it uses configuration instead of code to set up your builds so it’s a bit easier to get started.
  • Gulp:Gulp is slightly newer than Grunt and as such doesn’t have quite the number of packages or the community that Grunt has. There are some major advantages when it comes to the speed of your build though. Besides the speed benefits Gulp also uses code instead of configuration. This makes it a bit easier to build highly custom tasks.  Have a look at Gulp if you have very large builds and need faster build times.  This is a project to watch.

Packaging systems: Lego for the web.

Packaging systems take existing libraries and tools like jQueryBootstrapMoment etc and converts them into re-usable packages that are versioned and centrally stored.  This allows you to declaratively specify the components you use and their versions.  The package author can also specify dependencies and your packaging system will automatically install all the required packages for you.

Packaging systems to check out:


Media queries and responsive design.

The number of devices that people use to browse the web has exploded.  We as web developers have had adapt by learning to design for multiple form factors. Responsive Web design is an approach that suggests that design and development should respond to the user’s behaviour and environment based on screen size, platform and orientation.

Teamtreehouse has a great project that takes a non responsive site and modifies it to be responsive.

Some other links you might want to check out:

CSS processors: Fixing CSS

CSS preprocessors take code written in a preprocessed language and processes it to produce valid CSS. Preprocessors try to work around some limitations in CSS by adding things like variables, mixins, functions etc.

For an introduction to what CSS pre-processors are and why you should use them:

The most popular CSS preprocessors are:

If you go with Sass you should also check out Compass (Compass Basics Course).

Front end libraries

Front end libraries provide a set of default CSS classes and Javascript modules to help you build modern responsive web UI’s. They typically contain grid systems, menu’s, input controls etc.  Front end libraries help by giving you a head start with the common controls and you get to benefit from a widely tested and cross browser codebase.

Some frameworks to check out:

To get a feel for developing sites in both Bootstrap and Foundation try this course onframework basics.  For a more in depth look at bootstrap have a look at the “Building websites with Bootstrap 3” course.


HTML template processors allow you to bind data in a JSON document with HTML templates to produce the markup for your site.  They allow you to reduce duplication in your code and make it much simpler to make changes to the site over time.  There are many many to choose from, try a few and see which one you prefer.

UI framework: Building rich web apps

UI Frameworks help you take the complexity and user experience of your web apps to the next level.  For an in depth look at UI frameworks and how they differ have a look at thisexcellent post (it’s a bit old but still valid).  UI Frameworks typically provide 2 way data binding, some kind of templating system, client side routing etc.

These frameworks can be quite complex and have a bit of a learning curve at times.  If you want to build rich, 1 page apps they are more than worth the effort to learn.



Once you have mastered all the concepts and technologies above you should be able to build and maintain some pretty complex sites.

Happy coding.


sumber :



Categories: Uncategorized
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: