Basic Skills Needed to Learn Web Development

Asking a rhetorical question such as:  “What skills do you need to be a good web developer?” is like asking the question:  “What attributes do you need to be a good person?”.  Ten people will give you twenty best answers to the question.

One of my roles at Microsoft was to be a “developer evangelist”; that is, to espouse Microsoft technologies as the best for any given purpose.  By listing the following tools, I freely admit to my personal bias developed over several decades of web development work.  I will also admit that I do not keep current and I’m positive that there are other, perhaps more current and/or better tools that every developer should have in their toolkit.  However, the goal of this web site is not to give you a concrete list of tools or skills you will need; but instead, it’s to provide you with a cookbook of recipes that you can easily follow to get your started.

I strongly encourage you to read and understand the underlying technologies so you know their strengths and weaknesses.

Click here to Toggle Sidebar: Strange Interview Questions

Click here to Toggle Sidebar: A story from the infant days of the web

So here is my incomplete list of technologies every beginning web developer will want to learn.  Note that I will offer a quick start for each of these in future lessons.  So let this be an introduction.

Web Infrastructure

HTTP/S

So now you are going to ask:  “Hey Bruce, did you spell that correctly?  Most “10 skills…web developer” sites say your primary skill is HTML and not HTTP.  Is that a typo?”

Not a typo.  As I mention in the sidebar above, it’s important to understand the background and internals of your application before you can write a great application.

You plan to develop this great web application, but you should start with:  “how is the application and content served?”  The answer for web apps is: HTTP or HTTPS.

What are some reasons to learn the protocol and what things might you focus on?

  • You will want to debug your application but to do so, you must understand the protocol delivering the application.
  • You want to make your application performant but you need to understand web caching (both client and server) and how it impacts your application.
  • You should understand what a GET is; and then a POST and why you care as a developer.
  • You should understand the communication pattern and why the protocol is stateless (and what that means).
  • What are Host Headers and how are they handled?
  • What is a cross-domain call and why do you care?
  • What is content type and how does that apply to a developer?

Click here to Toggle Sidebar

I put the “S” in above since you will have special challenges when trying to debug web applications or services over an encrypted pipe.  You must understand how HTTPS works in order to be able to debug these applications.

Domain Name Service – “DNS”

OK, about now you are probably thinking I’ve totally lost my mind – that it’s time for me to pull out the cane and take a long walk.  DNS?  Really?  Really!

Again, I list these things and organize these lessons based on the pain I’ve experienced and see hundreds of web developer experience.  My goal is to provide the tools and knowledge to help novice web developers ramp up more quickly.

Understanding the basics of DNS is a critical skill for web development because it’s such an integral part of the framework.

Click here to Toggle Sidebar: Magic of DNS

Click here to Toggle Sidebar: Learn Systems

HTML – HyperText Markup Language

Well, it all started with SGML, or Standard Generalized Markup Language back in 1986.  HTML, as was XML, is a document format derived from SGML. As this IBM article observed:  “…HTML is an application of SGML, whereas XML is a subset of SGML”.

The thing a novice developer should focus on are the rules of the markup language.  For example:

  • How to open and close tags; e.g.: <myTag>stuff</myTag>;
  • How tags are nested: <myTag><myInnerTag>stuff</myInnerTag></myTag>
  • Remember that stuff in SGML, HTML, and XML are case-sensitive
  • Understand attributes and how to use them

Although HTML started out as an SGML application, it has evolved away from SGML now with the advent of HTML5.  The basics still apply; but there are non-SGML constructs and rules that are valid in HTML5.

Therefore, the developer should focus his attention on HTML5 and learn all the goodness it has to offer.

As I write this, Adobe announced that they were killing Flash.  There are many reasons for this but I think the primary one is that HTML5 eliminates the needs for Flash (and all the terrible security issues it has had and continues to have).

CSS

I have to admit, I hated trying to learn Cascading Style Sheets or “CSS”.  It didn’t make sense at first and I still have to refer to my cheat sheet from time to time.  However, as the embedded debugging tools in the browsers have improved so that we can: a) identify the objects we want to look or act differently; and b) make changes right in the browser and see how they will look once implemented;  I’ve come to really like CSS and the power it has.

We’ll later look at CSS and some tools to play with and learn; but for now, just accept that it’s the tool that delivers the exact “look and feel” for your web application.

JavaScript

I love javascript (“js”); which is also known as JScript by Microsoft, and ECMAScript  by the lawyers.  It has been around almost as long as the web and it’s truly a programmer’s pocket knife.  I think it’s an excellent language to learn programming constructs for several reasons:

  • A text editor with a web browser can be your primary development tools.  In other words, it doesn’t take much to get started.
  • It’s a very forgiving language and you can make many rookie mistakes and things will still work.
  • It runs just about everywhere.
  • The vendors (Google, Microsoft, etc.) are constantly improving the compilers or interpreters and so you don’t have to worry much about your code or skills becoming obsolete.  For example, here’s a snip about V8 from Google:

V8 is Google’s open source high-performance JavaScript engine, written in C++ and used in Chromium, Node.js and multiple other embedding applications.V8 implements ECMAScript as specified in ECMA-262. and runs on Windows XP or later, Mac OS X 10.5+, and Linux systems that use IA-32, ARM or MIPS processors. V8 can run standalone, or can be embedded into any C++ application. V8 compiles and executes JavaScript source code, handles memory allocation for objects, and garbage collects objects it no longer needs. V8’s stop-the-world, generational, accurate garbage collector is one of the keys to V8’s performance.

I just love the way Google will “opensource” their tools!!! Thank you G.

Back in the day, even old Microsoft would let you compile js into .NET code.  Pretty cool (but not very useful).
In future lessons, we’ll deep dive into JavaScript; but for now, keep it on your list of “must have” web development skills.

Design Skills or Knowledge

OK, I admit it freely, I’m terrible at user-interface (“ui”) work.  However, even as a grunt developer, we must have basic understandings of what makes a great user interface.

Click here to Toggle Sidebar: A Story – Learning the Hard Way

Click here to Toggle Sidebar: A Story – A Benefit to Learning the Hard Way

A terrible mistake that novice web developers often make are to mix and match colors, fonts, etc.  Time spent reading up on basic best practices for good web design is time well spent.  The best web sites are designed by graphic artists who then hand off the art work to the web developers.  Their job is to implement the design using their skills.

A good way to learn good web design is to visit professional sites; that is, those designed by graphic artists and see how they look.  How many colors?  Fonts?  Whitespace? Look at them on mobile and see how interactive they are there.

One thing I discovered early in my development career – people focus on what they can focus on.

Click here to Toggle Sidebar: One last sidebar story

Conclusion

This lesson summarized some of the technologies you will want to study before you start writing code.  In future lessons, we’ll dig into each of these a bit; but first, we need to get our development environment up and running.

Leave a Reply

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