Web Analytics

Web Development Learning Pathway

Web Development Learning Pathway

[shareaholic app=”share_buttons” id=”16881543″]
We cover online web development education a good bit on Online Course Report, but have previously just pointed readers to other learning platforms. This is good if you already have an idea of what you would like to study and (most likely) are willing to pay for it. But what about readers who don’t know the exact topic of the courses they should be taking? Web development has ballooned to mean many, many things in recent years, and while learning platforms will tell you the subjects that they¬†teach are the hottest subjects in web development at the moment, we’re here to tell you it all depends on what you want to do. To this end we’ve laid out a number of web development pathways below and have chosen courses and tutorials with an independent eye and with the aim of providing some guidance to self-teaching future web developers.

Path 1. Front End Web Development: Overview

While slightly more specific than web development in general, front end web development still encompases many related technologies and disciplines. From developers solely focused on user experience (UX) or the interface (UI), to those who just make HTMl templates, to those who do it all (full stack developers), even if you know you want to do front end development as opposed to back end, you’re going to have to mine down a little deeper to find exactly what skills you want to start working on. One thing it is safe to say is that all types of front end development are–at the very least–centered around the “presentation” level of web technologies. That is, the markup (HTML), styling (CSS), and interactivity (JS) of web-based technologies. Before we jump into resources through which you can learn the basics, let’s take a strategic look at some of the types of front end development you can work with, as well as what languages are currently in demand/popular.

  • This article by Rob Larsen on htmlcssjavascript.com is a few years old, and thus leaves out some combinations that have developed in the last few years, but is still a good read describing the different types of “front end developers.”
  • While popular programming languages come and go, looking at the most popular languages gives you a glimpse of what industries are looking for. All ten of the top languages in this article on the 10 most popular languages for 2015 have web-based applications.

Front End Web Development: Basics

If the last section didn’t really help you to hone in on what languages or types of web development you might be interested in, never fear. We still have quite a ways to go before skillsets for different types of web development start to branch off from one another. As you may know, and we mentioned previously, the core components of the presentation layer that front end developers are at the very least knowledgeable about include HTML, CSS, and Javascript.

HTML isn’t a programming language, per se, but rather a series of elements (tags) that provide the contents of a page with semantic meaning. Wrapping content into the body, header, footer, or a div inside of a page allows browsers to know what sort of thing your page’s content really is, and also allows you to layer styles and interactivity on top.

CSS (cascading style sheets) are what provides visual attributes to your html elements (think font-size, background color, length, width, and so on). CSS is pretty repetitive, and even just some basic knowledge and experimentation can help you to do quite a bit in regards to making your page visual.

Javascript and it’s many add on libraries are what helps to make site’s interactive. Javascript can listen for events, like clicks, scrolling, screen resizing, and so on. It can then respond by altering attributes, making calculations, and adding or removing elements from pages. Javascript can seem somewhat foreign if you only know HTML and CSS, but is an important step to complete if you would like to be a web developer.

Let’s look at some resources that can teach the basics of web development.

  • Tealeaf Academy offers paid courses in web design centering on CSS, Javascript, and Ruby on Rails. The preliminary material to their course is freely available, however, and is a clear and helpful e-book for those new to HTML and CSS. Check out Tealeaf Academy’s Intro to HTML and CSS.
  • Code Academy provides bite-sized lessons in a text editor where you can see your code and the results as you edit. While Code Academy doesn’t tackle setting up a coding environment on your machine, it’s great for a first time run through of html and css.
  • W3 Schools offers tutorials on HTML, CSS, Javascript, SQL, PHP, jQuery, Bootstrap, Angular, and XML. They also have an awesome reference section for if you’re trying to figure out what a tag or method does.
  • HTML5 helps to easily add modern functionality to web pages. Check out Robert Mening’s HTML5 Cheat Sheet Graphic as well as his “HTML5 Beginner’s Guide.”
  • Most of what we consider CSS today is CSS3 (features such as shadows, borders with images, and opacity). So you may already know a decent bit of CSS3 from the above tutorials. If not, or you want to learn more, check out Hongkiat’s comprehensive “Beginner’s Guide to CSS3.”

While you can do a decent amount regarding the visual makeup of a site and whether it is responsive with html and css, most knowledge of Javascript enables the use of many browser and server-side libraries, as well as increases your ability to layer interactivity on your site.

  • Marijn Haverbeke’s classic Eloquent Javascript is available for free in e-book format, and provides a great deal of knowledge on both the basics and the finer points of Javascript. It’s a great resource for both beginners and seasoned developers.
  • If you’re looking for courses that step you through basic Javascript, both Codecademy and Code School offer lessons and feedback on code as you progress.

Front End Web Development: UI and UX

User interface (UI) and user experience (UX) are integral to many front end development roles today. From optimizing for different screen sizes (responsive design) to making sure your site has an intuitive “flow” for users, larger projects may even have several developers working within each discipline. In short, UX developers (or designers) are concerned with the overall feel of the site and user interactions. They may test different layouts to discern which layouts are more conducive to certain user behaviors. They’re often responsible for interaction models, task flows, and detailing UI specifications for those who will develop the site (or app, or any product really). UI developers are the developers who actually design each of the pages that are detailed in specifications. They’re concerned with how the page actually fits together, and some UI developers also provide the final (graphic) design elements of pages as well. Below are some resources stepping you through the basics of UI and UX, as well as a few online courses to consider if you are interested in developing your skills in the discipline farther.

  • FastCoDesign has a good feature detailing the differences between UI and UX from a designers perspective here.
  • Though there is a subscription fee of $19/month, Tuts+ offers one of the most highly reviewed UX Design courses online titled “Fundamentals of UX Design”. The course is around 2 hours in length and works through fundamental UI concepts, usability testing, and getting feedback from users.
  • Along with their courses, Udemy offers a wide range of advice and tutorials through their blog. Check out their tutorial on UI design here.
  • For more in-depth courses specifically on UX and UI, check out offerings from General Assembly and Bloc

Path 2.Back End Web Development

HTML (1)
Back end development is a bit like the brains of a website or application. Where front end development interacts with user input in the browser in real time, back end code interacts with a server to query databases and return values in a format that can be rendered on the front end. Think passwords, e-commerce, account details, and so on. The most popular server side coding languages include PHP, Ruby, Java, Python, and .NET. Let’s take a look at some resources that can get you started on enhancing your back end knowledge.

  • If you would like a little more context on how front end and back end development compare, check out this post comparing the two on Udacity’s blog.
  • For complete beginners, Codecademy offers free courses on Python, Ruby, and PHP.
  • Udemy’s free course Java Tutorial for Complete Beginners is one of the highest rated courses on the platform, and offers both 75 lectures and an active forum community.
  • For .NET tutorials, Lynda.com offers 345 topic-centered tutorials that are coupled into 6 courses. Check them out here.
  • There are also several Javascript frameworks that work on the back end, the most popular of which is NodeJS. For complete beginners, check out Codeschool’s course. If you have your bearings a bit, and NodeJS already installed, check out NodeSchool, which offers a number of node workshops you can install on your machine.

Back End Web Development: Databases

Databases are crucial for all of the great web-based products we take for granted. While back end applications on the server regularly query databases to store or provide information for users on the front end, developers still need to know how to manipulate databases in their own right. This is where database languages like SQL, SQL/XML, and XQuery come into play. If this doesn’t quite make sense, imagine a giant spreadsheet, so large it would take you hours to scroll through. If you needed to find, alter, or delete values from a set of particular cells, you would probably write a function to do so. That’s what database languages help with, by allowing the creation of custom queries and requests for giant datasets. If you think databases are something that interest you in your development as a web developer, check out our resources below.

  • If you’ve made it this far in the pathway, SQL shouldn’t take you too long to gain some mastery off. SQLZoo.net offers interactive SQL tutorials that allow you to play around with queries in the browser, take assessments, and search through their reference pages. Check out their offerings here.
    • Tuts+ also offers a step-by-step article on SQL for beginners. If you want to be walked through the steps of setting up a database, populating it, and querying, check out the article here.
  • For a more comprehensive look at both XML and SQL databases, check out Stanford’s free self-paced series of mini-courses on databases here.
  • We didn’t mention it above, but MongoDB is another popular database solution with a large community of learners. Check out MongoDB University for a series of in-person, private, or free self-paced courses here.

The Next Steps

Once you’ve gained some mastery of a core set of web development skills, the best way to progress is simply to dive in. Try some projects away from the sheltered tutorial environment, learn to debug and the general development processes used in professional development. A large part of web development is simply jumping into projects that you may not automatically know how to complete, cobbling together solutions from the work of others, language documentations, and wrestling with buggy code. For this section, we’ve outlined resources that relate to the developer community at large, general development practices, and ways to advance your skills even farther.

  • There are many ways into a web development career, or to supplement your own career with web development skills. Check out this article by Rocket Theme on “How to Build your Reputation as a Web Developer”.
  • Though there are different thoughts on the matter, Web Development often follows a discernable process, so that progress may be measured and problems may be fixed in a systematic way. Here’s a general outline of the site development process, from definition, to testing, to maintenance.
  • Github is an industry standard where you can share and keep track of code as it develops. To fully utilize the tool, you’ve got to learn a few tricks first. Check out the Try Github course sponsored by Github and created by Code School if you want an introduction to the platform.
  • Developers love to learn. And one of the best ways to solidify your own knowledge is to answer questions and teach others. Stack Overflow is the largest developer-specific forum online. If you have a question, chances are someone knows the answer and can help you in a timely manner. If you know an answer, respond for reputation points.
  • For those who want a more intensive educational experience in web development, bootcamps might be the option. Bootcamps can be expensive, and very intensive, but many have great hiring upon graduation rates, and students often make awesome projects in collaboration with classmates and mentors.
  • If you’re looking to land your first gig, there are a number of collections of good (and probable) interview questions that you should brush up on. Check out these collaborations on Front End Developer Interview Questions, and Back end.