DEV Community

Cover image for Learning Web Development? These Skills Will Make You Stand Out
Colin Morgan
Colin Morgan

Posted on • Updated on • Originally published at fullbit.ca

Learning Web Development? These Skills Will Make You Stand Out

Unfortunately, learning to code is only one step on the path of learning Web Development. Depending on your career trajectory, you could be competing with thousands of others who are also trying to break into the industry.

So what should you do to stand out from the pack?

I asked Web Developers across several communities what skills they thought were often neglected by new Web Developers, and I received a lot of great responses. So many in fact, that I decided to curate a list to summarize all of the information in one place. By learning these skills and concepts, you'll have a huge leg up on the competition.

This article is going to be a two part series. One article for the technical skills and one for the soft skills. In this first article we're going to focus on the technical skills.

Note: The list of concepts for each is not exhaustive. I've only include the topics I believe will give you the most bang for your buck. If you think something deserves to be included and isn't, feel free to leave a comment for everyone's benefit.

A Basic Understanding of Networking

Having an end-to-end understanding of what happens when you type google.com into your browser and click enter, is one of the best ways you can stand out from the herd. Obtaining a basic understanding of networking will go a long way towards reaching that goal.

What To Learn?

  • How Domain Name Systems (DNS) work.
  • Registering and using domains.
  • Understanding TCP/IP.
  • Basic network debugging. (ex. why aren't I able to to connect to my new website? Hint: The port isn't open)
  • Understanding what a VPN is.

Check out this free course by google that teaches you the basics of Networking for Web Developers.

Understand How HTTP Works

Although technically part of a basic understanding of networking, HTTP is important enough that it deserves it's own section. HTTP is the bread and butter protocol of the web, so learn it inside and out.

What To Learn?

  • The anatomy of an HTTP transaction.
  • The HTTP request verbs and when the use them.
  • Recognize the main response codes and when to use which ones.
  • What a stateless protocol is and why it matters.
  • Recognize popular headers and how to add your own.
  • Working with HTTP outside the browser. (REST clients, curl, etc)
  • SSL, what it is, how it works, and why you should use it.

There are a lot of available resources out there to learn about HTTP but I'll include a couple in case you're feeling lazy:

https://developer.mozilla.org/en-US/docs/Web/HTTP

https://www.udacity.com/course/http-web-servers--ud303

Learn To Work in Unix Shells

Unless you plan on working exclusively with Microsoft tools, your websites and applications are likely going to be hosted on a Linux server. That means you're going to need to be familiar with working in Unix shells. A lot of new Web Developers avoid working from the command line because it feels unfamiliar. This is completely normal, but now isn't the time to stay in your comfort zone.

What To Learn?

  • Remote access using SSH.
  • Basic shell commands (cd, ls, cp, mv, mkdir, ...).
  • Learn how to use grep.
  • Get familiar with a command line text editor (vim, Emacs, nano, ...).
  • Understand file permissions and how to change them.
  • Learn what environment variables are and how/when to use them.
  • Learn how to use .bashrc
  • Learn how to use a package manager (apt, yum, ...)
  • Learn to find and read logs for your services.
  • Learn to manage services (start, stop, restart, ...)
  • Learn basic bash scripting.

Honestly, I could go on and on for this one. Learning to be effective in a Unix shell can be a career long journey, which is half the fun. The power you gain from working on the command line quickly becomes apparent and will change the way you approach development. Some learning will be specific to your environment but the basics should apply across the board. Check out this tutorial by Digital Ocean to get started.

Learn To Use Git

A strong understanding of Git is one of the most important things to learn as a new developer but it seems to be avoided by most. This is unfortunate because I believe newer developers benefit the most from a strong command of git. Why? Because it will save your butt when you inevitably make a mistake. Keep in mind, there are other version control tools out there like SVN and Mercurial, but for this article we'll focus primarily on Git.

What To Learn?

  • Learn the basic commands (init, add, commit, status, checkout, ...)
  • Learn to configure remote repositories.
  • Learn to use fetch, pull, push.
  • Learn to work with branches. (create, merge, ...)
  • Learn what rebase is and how to use it.
  • Learn how to resolve conflicts.
  • Learn how to use stash.

The more effort you put into learning git, the more confident you'll be working with a team of developers. Atlassian offers a great tutorial or you can check out try.github.io if you prefer a more interactive approach.

Learn To Use Browser Developer Tools

Browser tools are an everyday use just like your text editor, so get to know them. Being able to properly use browser tools will give you a huge leg up on the competition, and will make you an all around better Web Developer.

It will help you with debugging, understanding the effects of your code, recognizing performance issues, and much more. Chrome in particular has a lot of invaluable tools baked into their developer suite which has made my life as a Web Developer exponentially easier.

What To Learn?

  • Learn to use the console to find errors and debug your code.
  • Learn to use the inspection tool to view/change your markup and CSS in the browser.
  • Learn how to debug Javascript (call stack, breakpoints, object inspection, ...)
  • Learn to inspect and debug HTTP transactions.
  • Learn to profile websites to identify performance issues.

Browser tools offer an advantage that you can't ignore, so learn them early and learn them well. If you're using Chrome, checkout Google's Chome Dev Tools Overview.

Learn an Additional Language

Most people will tell you to learn one language and learn it well. However, part of becoming a good Web Developer is learning to use the right tool for the job, and this includes programming languages. It's a good idea to learn more than one language but it's also important to learn different types of languages.

For example, if you're learning a language like Python, you'll have a great tool for Object Oriented Programming. Instead of learning a similar language like Ruby, why not learn a functional language like Clojure? or a language superset like TypeScript? This approach will help you to broaden your understanding of different programming paradigms and give you better insight into selecting the right tool for the job.

I'll list a few languages that will take you off the beaten path but know that there are a lot more available.

What To Learn?

Remember, it's not about learning a language that will get you a job. It's about broadening your horizons as a developer and being able to recognize the right tool for the job.

If I missed any languages you think should be included, feel free to add it in the comments.

Learn to Comment Your Code Properly

Commenting code is a point of contention among developers in the industry. Some developers will tell you to comment sparingly, some will tell you to comment often. At the end of the day it's going to depend on the team you work with and the style guide that they provide for you. With that said, no matter how much commenting you end up doing, it's important to learn how to comment correctly.

What To Learn?

  • Learn to write self-commenting code.
  • Learn your language's commenting syntax.
  • Learn to write comments that are brief and to the point.
  • Get familiar with documentation generators.
  • Learn how to recognize code that needs commenting.
  • Learn your language's commenting standards, if it has one. (ex. PEP 8 for Python)

Good comments can really help grease the wheels when you are working with a team of Developers. If you learn to write clean self-commenting code and back that up with comments that illuminate the dark parts, your teammates will take notice and appreciate your efforts.

That's it for the technical skills. Obviously, there is an infinite list of stuff you could learn to stand out among your peers. However, these topics are the ones that Web Developer's have expressed a desire to see more of when working with new Developers.

In the second part of this article, we'll review a similar list, but for soft skills. Until then, happy learning!

Looking for Tech Jobs? Check out my website ObviousJobs.com for jobs with full salary disclosure.

Top comments (14)

Collapse
 
fishbulb81 profile image
Brian Foley

I agree with the Learn An Additional Language section, but I would add: people should learn the most used language on the other side of the fence. By that I mean there are really no true "full stack" people out there (people tend to specialize in one area or the other), but it's always good to know a bit about the other side. If you're FE developer, learn enough Java, Python, Ruby, etc to be able to make your own changes in tickets (with review from a BE developer of course). If you're a BE developer, learn Javascript, HTML, CSS to the point of being able to make your own changes (again, with review from your FE person, if you have one). You'll learn to create better solutions to projects people outside the tech team will make to you if you have a better idea of the full picture.

Collapse
 
colinmtech profile image
Colin Morgan

Agreed. I even have a great anecdote to illustrate this.

I worked with a team that was split into front and back-end. The team was building an SPA, so the back-end team built out a REST API to compliment the front-end SPA framework. Unfortunately, the API data naming conventions were-designed-like-this.

Those poor front-end developers had to keep switching between dot notation and key notation to access the state props, depending on if it was one word or multiples. A little more insight and understanding into the javascript language would give you the foresight to spare the front-end developers what is essentially a soul crushing way to write javascript.

Perhaps a little melodramatic, but still =D

Collapse
 
coolshaurya profile image
Shaurya

Those on the front-end could use only bracket notation which wouldn't pose any problems for them . Dosen't seem to be much of a problem to me ??

Thread Thread
 
colinmtech profile image
Colin Morgan

Yeah, it's not really a big problem. Just a good illustration.

Collapse
 
danielsarmiento profile image
Daniel

That's a nice compilation of topics and resources!

Collapse
 
dd_petty profile image
Dionne Petty

This is a clear and well-written article and I'm looking forward to the soft skills part!

Collapse
 
fatimatariq25 profile image
Fatima Tariq

I don’t think that the programming languages you suggested are necessary for someone who is learning web development, I would suggest something like: JavaScript, PHP, ASP, Perl, NodeJS, Python and java, these are more important I think, and they’re useful when working on joomla or wordpress websites.
If I would suggest some more things to learn, there will be SQL, and database servers, web servers like apache, nginx and IIS, and things like ajax and jquery.

Collapse
 
fmmricardo profile image
Ricardo Martins

Nice article!
Waiting for the second part💪

Collapse
 
sithembelek profile image
sithembelek

Thanks for the great article. Gives me a good sense of direction in my learning path.

Collapse
 
frpeters profile image
Francisco Peters

Thanks, this was very useful.

Collapse
 
idaslaptya profile image
idaslaptya

Love love love this post!

Collapse
 
thecrimsonking92 profile image
Miles Grimes

One quick note-- TypeScript is a JavaScript superset, not subset.

Collapse
 
colinmtech profile image
Colin Morgan

Fixed. Cheers.

Collapse
 
muaathabusaad profile image
Muaath

That is really an amazing article which describes the problem and gives the solution as well, hope you continue amazing stuff