How to become a web developer that stands out from the crowd

how-to-become-a-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.

css

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:

Conclusion

This was is the first step in your journey to become a web developer. It’s a very important one though, spend a little extra time here and make sure you really understand the basics. It will be well worth it in the long run.

In part 2 of this series we take a look at some new tools and techniques that will allow you to tackle more complex sites.

If you are getting stuck with anything please leave a comment below and I’ll try and help.

Happy coding.

How to become a web developer

If you liked the article above you might find the Web Apps 101 eBook from our free content library useful.

Learn how you can become a web developer that stands out from the crowd.

Click the “Free Registration” button below, choose your username and password, and sign up for our free membership library. You will get instant access to ebooks about every facet of building damn good web apps.

Free registration

Comments

  1. Christian Kyony says

    Hi Stephens,

    Thanks for putting together this series of posts. As you said, it is not easy and there is such much to learn and master.

    Christian

  2. Adrian Logan says

    In addition to all the topics you covered as a foundation you do need to understand the differences between the various browsers i.e. http://caniuse.com/ Otherwise you in for a nasty surprise :) I also think you need to know the basics of performance i.e. http://webdevchecklist.com/ , http://developers.google.com/speed/pagespeed/insights/ , etc . As for JavaScript once you happy getting through the basics http://bonsaiden.github.io/JavaScript-Garden/ will show you some of the unique language design features. Nearly every JS issue I fix is covered in the garden post,

    • Stephen Young says

      Hi Adrian! I knew I could count on you to find stuff I forgot ;-) Thanks for those links, I’ll add them to the post.

  3. Judah says

    You might want to add stackoverflow.com for questions. I use Firebug and related tools to check the layout and debug code. Also, w3schools is not recommended by some developers. IIRC not all the information is correct and they refuse to update it but I could be wrong. The W3C is the place to check if you want all the official details.

Leave a Reply

Your email address will not be published. Required fields are marked *