1

First Things First: What Kind of Developer Do You Want to Be?

Before we get started, let’s discuss a few definitions. “Web development” actually encompasses a fairly broad-spectrum field. When we say, “web development,” we often mean one of three things:

Web Design

Front-end web design encompasses the look and feel of a website, including its user interactions. HTML, CSS, and JavaScript are heavily used. This is often called “client side” web development, as all of the actual processing is done on the client device.

Web Programming

Back-end web design encompasses the functionality of the website, such as database manipulation and access. PHP, ASP, and MySQL are heavily used. This is often called “server side” web development, as the code is compiled on the server before it reaches the client device.

Full Stack Web Development

Full stack web development includes both web design and web programming. In full stack development, a web developer takes a project from the very beginning to the end, programming the back-end as well as designing the front-end.

Many developers fall in different areas of the spectrum. Some are only designers and some are only programmers. Some do both, but they are strongest in a specific area. There is no “right answer” to being a web developer, but understanding the different components will help you along your career path. And even if you’re a designer or programmer primarily, you’re still going to need to know the basics of each.

2

Learning the Basics: HTML, CSS, & Javascript

Getting started with web development invariably begins with HTML, CSS, and JavaScript. These are the building blocks of the web; they are what tells a computer, tablet, or smartphone how to display text and images on the screen. And the fantastic thing about HTML, CSS, and JavaScript is that getting something simple and functional that works is really quite easy. Most of your study is going to be in developing things that look good and function well. Many web developers learn HTML, CSS, and JavaScript through self-study. Resources include: Codecademy, Coursera, and hackr.io.

HTML & CSS

HTML & CSS are both mark up languages. They control the way that text and images are formatted — and they are an excellent foundation for web design. Both HTML & CSS are extremely forgiving and easy to learn. If their code is “broken,” they simply won’t display properly; but the website will still work. Many web designers operate exclusively in HTML & CSS, as they aren’t interacting with databases or doing complex processing.

Javacript

JavaScript is one of the easiest to learn and most versatile programming languages available. But unlike PHP or ASP, JavaScript is a client-side server language; the code is compiled on the client device. Learning JavaScript is important for web developers as it teaches the basic theory of programming. Though different languages may have different syntax, functions, and methodologies, they will all operate very similar to JavaScript from a conceptual standpoint.

LESS / Sass

LESS and Sass are both extensions of CSS which are used as frameworks to design websites faster and more effectively. Once you have a strong foundational knowledge of CSS, you may want to extend that knowledge into LESS or Sass. LESS is JavaScript-based while Sass is Ruby-based, making LESS the more likely option of choice for those who have just begun to learn the basics of CSS and JavaScript. Though LESS, Sass, and other CSS extensions are not strictly necessary, learning them will dramatically shorten development time.

3

Learn Bootstrap and the Fundamentals of User Experience Design

As a web developer, your primary goal is to give the user an intuitive interface. But what is an intuitive interface? An intuitive interface is one that the user can predict. A user should be able to view a web application and instinctively know what each function will do. Moreover, these functions should be internally consistent and predictable; a user should never be surprised by what an interface does. User experience (UX) and user interface (UI) design are both complex disciplines that cover user behavior and user psychology. But as a web developer, you primarily need to focus on giving the user what they expect and what they want.

The Golden Rules of User Experience Design

It must be responsive. Web development now encompasses PCs, laptop, tablets, smartphones – even the “smart refrigerator” in the office break room. Because of this, each design needs to be responsive. A responsive design alters itself on-the-fly to the size and capabilities of the user’s device. This is generally handled through client-side configuration. Across all platforms, the design must still remain consistent and predictable. Tools such as Bootstrap for CSS make it easier to create responsive websites without having to “reinvent the wheel.”

It must be consistent. A website must be structured in a clear, concise, and easily categorized way. Simply building a framework for a website that includes the categorization of its features and its content can be an easy way to develop a site that is well-organized and consequently easy to navigate. Look for the “a-ha!” moment; a user coming to your website blind to look for specific information should be able to immediately identify which section it is in.

It must be familiar. Rather than attempting to create a UI out of whole cloth, the best web developers will follow generally accepted principles. Using, for instance, a “gear wheel” to represent setting is something that users expect and understand. By using this as an interface shorthand rather than attempting to establish a unique design, a web developer can easily ensure that their design is as intuitive as possible.

It must be simple. A major principle of all design is that simpler is better. Modern development has tilted strongly to extremely crisp, clean designs that present only what the user needs at any given time. It is better to have two or three extremely solid functions than dozens upon dozens of experimental functions. Learn to pare down to only what you need.

4

Learn Advanced JavaScript

JavaScript is one of the first languages that many people learn – and consequently many are surprised to find out how robust the language truly is. In fact, there are very few things, if any, that cannot be done in a JavaScript code base (though it may not necessarily be the best tool available). Once you have a solid handle on CSS and JavaScript, it’s time to dig down into advanced JavaScript. This will give you another box of tools that you can use to create more advanced, adaptable websites.

Angular JS

Released in 2010 and maintained primarily by Google, Angular JS is a web application framework that makes it faster and easier to build web applications from the ground up. AngularJS pairs extremely well with web design and is best used for single page applications.

Node JS

Node JS, licensed by MIT, is an open source runtime environment for JavaScript. Node JS makes the process of developing in JavaScript faster, simpler, and easier, as it allows for the on-the-fly compiling and of code outside of a browser.

React JS

Developed by Instagram, Facebook, and other well-known community projects, React JS is a JavaScript library that has been specifically designed to create user libraries. React is an ideal solution for those who want to be able to develop these libraries quickly without having to program everything from scratch.

These tools are extremely useful for web developers who already have a handle on the basics — but they can be a little overwhelming for beginners. For that reason, they should be explored once a developer already feels confident in their JavaScript skills.

5

Additional Web Developer Tools to Master

It’s often said that a craftsman is only as good as his tools. While a skilled, experienced developer can create a website from scratch, it would take an exceptionally long time for them to do so. In the field of web development, tools are often just as important as knowledge and skill. With the right tools, web developers can create highly complex websites very quickly. But this also requires being familiar with these tools and knowing which tool is right for the job.

Design Patterns

Design patterns create proven structures through which certain programming elements are solved. By properly using design patterns, applications can be easily built and designed by even relatively inexperienced developers. More experienced developers often have larger libraries of design patterns that they can call upon as different tools in their arsenal. Very few problems in programming need to be solved from scratch.

Chrome Developer Tools

Chrome Developer Tools are a built-in feature of Chrome that makes it trivial to edit client-side scripting on-the-fly. Developers can alter the HTML, CSS, and JavaScript of pages as they view them, to test out changes or simply to see how something was implemented by another developer. Chrome includes tools for debugging, profiling, and authoring, which can also help in tracking down errors.

Git

Both small and large projects can benefit from the version control offered by Git. Git serves as a code base repository, so web developers can quickly revert back to prior versions of their projects and can control different versions that they produce. In larger projects, Git makes it easier for multiple developers to work on a single project without interfering with each other’s work. In smaller projects, Git makes it easier to track down where errors may have been introduced or to rollback to prior versions.

Grunt & Gulp

Both task runners, Grunt and Gulp are used to improve upon and optimize JavaScript code. Grunt and Gulp automate tasks such as minification (making files smaller), testing, and compilation, thereby streamlining and optimizing the development process. At the same time, some developers believe that task runners such as Grunt and Gulp can lead to bloat. These task runners are generally used by those who are somewhat experienced in JavaScript.

6

Learn SQL and PHP

So far, we’ve mostly been talking about client-side web development. But at a certain point, developers are going to have to turn their eyes towards server-side programming. Modern server-side programming is most frequently done with SQL and PHP, but that isn’t always the case. Other languages often used for server-side configuration include ASP and Java. That being said, a strong foundation of both MySQL and PHP are usually necessary requirements for those in the field.

SQL

SQL (structured query language) is a language used to interact with relational databases. The most popular SQL language is MySQL, the largest open source database solution. But other systems may use Microsoft SQL or PostgreSQL. All of these languages are very similar and involve both accessing and manipulating data. Database tables — similar to a spreadsheet table — are created to store data, which is then updated in a series of queries. SQL is incredibly important in an era of data-heavy development.

NoSQL

But you should also be aware that NoSQL is also becoming extremely popular as big data grows. MongoDB, CouchDB, and BigTable are all NoSQL databases; non-relational data sets. Though web developers will only be working with NoSQL databases for extremely intensive applications, it’s still a good idea for a web developer to be aware of the technology.

PHP

PHP is an extremely forgiving language that has a very shallow learning curve. Learning to program in PHP is fairly trivial, but learning to produce solid and secure code in PHP can be a challenge. PHP programmers must be highly disciplined because the language itself has very few controls within it. PHP is often used in conjunction with MySQL to interact with and update data. Many extremely popular websites are built upon PHP and MySQL, such as WordPress.

7

Your Career Path: Do You Need a CS Degree?

It may be surprising, but at this point you are essentially a web developer — you have the knowledge and the skills to develop for the web. But it’s at this point that you need to consider your career path. How do you want to develop? This will control your next steps.

If you want to work for a web development company, you may want to consider getting a degree in Computer Science. In working with a web development company, having a degree will make you more competitive – especially in field in which many people have successfully learned through self-study. On the other hand, if you want to complete freelance work on your own and develop your own client base, you’ll find that whether or not you have a degree at all will seldom come up in your list of qualifications.

And, of course, there’s your own learning style. Many people are able to learn web development simply by doing it — by completing projects and by challenging themselves. Others truly require a more structured format, such as one provided through a degree program. Happily, this works out quite well; those who do require a more structured environment may not find themselves drawn to the self-motivated discipline of a freelance position. Those who do find it easy to learn on their own also find it easy to self-motivate.

8

Hone Your Skills and Knowledge by Creating Websites

Whether you’re looking for a position at a big development firm or trying your hand at freelance work, you’re going to need a portfolio. Portfolios show clients and employers that you have what it takes to take a project from start to finish — and it’s really the only reliable way to both build and show off your skills. A portfolio can take some time to develop, but picking up small jobs for family and friends, or approaching local businesses, can be an excellent way to get started.

Start Simple

Create websites using HTML, CSS, and JavaScript — but start from scratch and grow your knowledge. While you’re learning, you should avoid shortcuts such as Bootstrap templates; though they’re a critical part to modern design, they may become a crutch. A modern, responsive, and professional website can be built with HTML and CSS alone by a talented developer. Your goal should be to learn as much as you can about each language and tool before moving on to the next.

Challenge Yourself

As you grow as a developer, you can begin to add more advanced technologies, such as PHP and MySQL back-ends. If you’re working on your own, you can begin by taking on more advanced projects. If there are certain elements that you don’t understand, you can challenge yourself by intentionally designing websites that are comprised of those elements. Revisit and review coursework provided by sites such as Coursera to learn more advanced techniques and to keep current on modern strategies.

9

Build a Stand-Out Personal Portfolio Website

Once you’ve developed a handful of extremely solid, well-developed websites, it’s time to build a stand-out portfolio. You might be surprised to discover that many web designers don’t have extremely fancy personal websites; in fact, many of them simply have a WordPress site that shows their work. A portfolio isn’t about being flashy; it’s about showcasing your personal projects in a way that sands out. Your skills and experience should be front and center.

Developing a Personal Portfolio

More than anything, clients and employers want to see finished, highly polished projects. If you have additional accomplishments — such as plug-ins or style sheet frameworks you’ve developed – these should also be included, but the primary focus should be on your finished work, with a priority on our most current and complex projects. If you’re just starting out, it’s more than acceptable to make “mock-up” designs for fictional companies; just make sure they’re solid.

Build Your Personal Brand

A web developer is at least part designer, and that means that you also need to be able to develop a personal brand. If you’re working on your own, you’ll also be doing a significant amount of marketing — with yourself as the product. In addition to adding your portfolio, you should also include information about yourself, your design and development philosophies, and what drives you.

10

Start Your Career

It’s time. You now have all the knowledge and experience you need – you just need to actually get started. Starting any career can seem overwhelming, but by breaking it down into small, manageable steps, you can get to your destination faster than you ever believed.

Be Passionate About What You Do

Passion is something that is easy to pick up on. Clients and employers will be able to tell whether or not you truly enjoy your work — and someone who truly enjoys their work is nearly always the right choice for a project. Moreover, now is the time to determine whether you can truly see yourself as a web developer. If you don’t enjoy what you do, why do it? Enjoyment is what makes it easier to self-motivate; what makes it possible to wake up every day ready and prepared to work.

Keep Learning and Growing

Web development is a field that changes from year to year — sometimes even month to month. Not only do design standards change, but new tools are released, and clients begin to seek different things. A web developer has to be committed to learning, growing, and improving over the entirety of their career. They will need to be able to regularly shift gears depending on the current needs of their clients and to invest time in learning new languages and technologies.

Share Your Knowledge

One of the best things about web development is the sense of community that surrounds it. And that sense of community isn’t just important for morale — it’s also an important source for networking. When possible, a web developer should share their knowledge on code repositories, their professional blog, and question and answer sites. Through this, you’ll be able to connect with other web developers, learn from them, and even potentially get leads on new and exciting projects.

Learn Freelance and Business Essentials

Once you become a freelance web developer, you essentially become the owner of a small business… and the only product is you. Passion, experience, knowledge, and skill are all only part of the mix. You also need to have extremely strong business skills. You need to be able to appropriately price your work, collect on payments, and calculate the amount that you need to work to make a living. All of this together are the essentials of running a business.

11

Market Yourself and Reach Out to Prospective Clients

Web development is growing field, but it’s also a competitive one. Where do you begin when trying to find clients? Marketing happens in a few different ways: through online advertising, in-person advertising, and networking.

Online Advertising

Paid online advertising becomes expensive quickly, but there are other forms of advertising such as social media sharing, blogging, and online classifieds. Online classifieds, in particular, can be an excellent source of clients while an individual builds their client base.

In-Person Advertising

Business cards and flyers are a great way to reach out to local businesses who may already be considering the development of their own websites and web applications. You can often ask local businesses to feature your business cards and flyers to their own clientele.

Networking

Word-of-mouth can be extremely potent; let family and friends know that you are currently looking for projects, and you can easily find small projects coming to you. Just make sure to appropriately value your time.

12

Manage Your Projects and Your Income Streams

How much money are you making per hour? Are you collecting all your billable hours? Are you on track with your projects – or are you falling behind? All of these fall under the category of “business management,” and though they may not be directly related to web development, they will make the difference between a profitable venture and an unsuccessful one.

Project Management

If you aren’t organizing your projects, you may find it difficult to meet deadlines — and that can make it harder to retain clients and to grow your client base through word-of-mouth. Free tools such as Asana and Trello provide simple, easy project management solutions that can keep you up to date on your current tasks.

Money Management

As a freelancer, you won’t just be tracking your income; you’ll also be setting aside money to pay taxes, paying advertising costs, and generally paying the expenses of running a business (such as software subscriptions). A basic money management service, such as QuickBooks, can help you track your income and expenses.

There you have it. That’s everything you need to know about becoming a web developer. Web developers are highly motivated individuals who are able to be both creative and analytical; individuals who can adapt to new environments and who excel at problem-solving. Becoming a web developer takes a lot of work, and the learning never ends — but it’s also extremely rewarding, especially to those who enjoy seeing the end result of their hard work. And all it takes is a computer and an internet connection to get started.

Get to Know Our Experts

  • Photo by Greg Rakozy
  • Photo by Ben Kolde