Hello there! My name is Cyrille, and I’ve been working as a CareerFoundry Web Development mentor for well over a year now, helping aspiring web developers discover the beauty of learning to code as they become immersed in that strange and exciting world of web development.

As well as working as a mentor for CareerFoundry, I also teach students in-person in bootcamp environments all over Europe. And why do I like to teach so much? Well, my desire to teach came about pretty naturally: after about 10 years of working in different startup, semi-corporate and freelance environments all over the world, I felt a strong desire to pass on what I had learned in the field to the next generation of coders. At that stage in my career it was important to me to give something back to the community that had helped me so much over the years. Mentoring made perfect sense.

What’s My Personal Web Development Process?

The answer to that question is not a short one. Over the course of my professional life I have used an array of web development processes depending on the client, situation and demands of the workplace. In this post I aim to detail these different processes so you can see which one (or which combination) makes the most sense for you at your stage of learning. As you’ll see, there are numerous web development phases which your process needs to take into account.

Mark Lassoff, Founder of Learn to Program said this about the web development process:

“For many beginners one of the most daunting elements to learn is work flow.”

 

How Did I Learn To Code?

I got interested in programming at a very young age. From the day that I discovered that making a page was as easy as writing simple “instructions” in a file and opening it in a browser, it took very little time for me to then develop a profound interest in dynamic web languages like PHP3 and start translating real-world behavior/issues into algorithms and programs. I was in high school and fascinated by the potential of this tool, the Internet, databases and interaction with all human beings on the planet through this amazing medium.

After graduating, I decided to join a 5-year program in a computer engineering school in Lyon, France. On the summer break between the second and third years, life led me to a Parisian internship, in a small team of developers working with Ruby on Rails. They built numerous applications all coded in Rails, which at the time was considered black magic reserved for the bravest sorcerers of the art. On my right sat my first mentor, who was not only a fountain of knowledge, but inspirational to boot. I was hooked from the first day.

To be given the opportunity to master a tool with such unlimited potential, build applications which served all sorts of different functions, ranging from basic websites to complete online exchange platforms and social networks got me excited. The organisation of the work, the flexibility, and the laid-back aspect of the whole sector seduced me and by the time I was done with the internship, I said no to completing the three remaining years of my school and joined the workforce. I had everything I needed: I was ready to work on my own.

Learning The Value Of A Web Development Process

A couple of years later, as I was starting my freelancing career, one of my friends referred me to a friend of his who was looking for a web developer. I took the job, got a quick brief from him and started coding right away. Wanting to impress him, and being pretty nervous about my first proper client, I did as much work as I could in a short period of time without much communication on my part. Three weeks later, and all proud to show him my work a full week ahead of my deadline, I sent him the URL of the completed work.

I didn’t get the response I was hoping for. He laughed at the fact that I had built the example on which he based the pages and not the pages themselves. Here I learned my first lesson about web development process; to discuss in depth the client’s needs before writing one line of code. However, it shouldn’t take losing a client for you to realize that a solid web development process, or website creation process, is not just useful to becoming a successful web developer but essential.

Aidan Huang of OnExtraPixel gave us this insight into his own web development process:

“Understand your customers first. Then educate them. Tell them what they need before they realize it themselves.”

What Will I Be Covering In This Post?

In this post I’ll be covering the importance of having a web development process, plus the website development stages you’ll go through, followed by the building blocks you’ll need to implement your own process. I’ll finish up with some essential resources for junior web developers and let you know what next steps you’ll need to take to become confident in your process and put it in action. Let’s get started!

What Is A Web Development Process?

A web development process, similar to a web design project process, is a protocol, most of the time detailed in a document on which the client and developer both agree, which specifies different phases a project will go through in order to attain full completion. It outlines the different steps that will be taken, the website development stages, going from the simple discussion between both parties to the application being online, functional and operational. Each developer has his own way of working and even then his approach may vary from project to project depending on the client’s needs, length of the project, the web development platforms used and the number of developers involved.

Importance Of A Web Development Process

When working on a project as a developer you will generally find yourself, whether freelance or in-house working with a variety of other team members, including UX designers, graphic designers and many others. Due to this team collaboration it is crucial to have a process. Your team will benefit directly from good organisation and scheduling and will be able to interact at the right times, work synchronously and not have to wait on any one member of the team.

Identifying and highlighting various phases of website development in your plan ensures the whole team are aware of the web development process and can work together fluidly and transparently, with good communication and clear touch points. The team is then in-sync and bound to make the client’s expectations for the project met.

Moreover, each project has its ups and downs, its twists and curves. Many times the client will decide that he wants the navigation bar at the top all of a sudden, only to change his mind two days later and demand to have it back the way it was. This is what makes having a web development process so important when interacting with a client.

Andy, ALISON’s Head of Technology gave us his biggest tip for beginners when putting together their web development process:

“The most important part of any project is knowing the desired outcome. If the client is not sure what they want you MUST find that out before starting any development, and written requirements documentation is the best way to do this. It is not just ticking a box in the process, it is the key to overall success.”

Value For The Client

From the point of view of the client, if you have a clearly defined process, not only does it keep her expectations aligned with yours, and provides a definite order of events for how the implementation will pan out, it also sets a “rhythm” to the whole effort which helps keep everybody on track.

Similar to a web design project process, a clear web development project process means the client has a definite understanding of all the website development steps that will be taken during the project’s duration. She will know what to expect at certain times during the project and therefore will be able to say at a glance “We’re late” or “We’re on time”. Having this information transparent to the whole team, as well as the client, means everybody is kept on the same page. It gives the client something to rely on and to follow which reassures her that the project is in hand. Without a transparent process from the developer, the client could find herself flying blind within the whole project, and could easily find herself overtaken by the idea that the project is behind time and unlikely to succeed, an impression that no web developer wants to give to their clients.

Web developer David Walsh told us:

“Always stay on top of deadlines — as soon as a deadline is missed, the project will seem to be in disarray. Bi-weekly communication is good: tell people what you’ve done, what you need from them, and what they need from you.”

Why It’s Important

When launching a new career, the first couple of weeks and even months are crucial for implementing good habits, best practices and realistic routines. This is why I stress the importance of developing these habits from the beginning. It’s much harder to unlearn our bad habits than to start afresh with good ones.

My advice to beginners is to learn to implement their own website development process as soon as the brief from the client is finalized, as including structure in the way you work from the beginning has a number of advantages both in terms of your reputation as a web developer and in your execution of the job in hand; it’s a trademark of professionalism, attracts clients, relieves stress and anxiety for any given problem and enables a more sustainable work environment.

Planning

There are so many different approaches when it comes to planning your project that it can be hard to know which is the most effective for your purpose: waterfall development, incremental development, iterative development, spiral development, agile development…

Here are two widely used methods.

The Waterfall Model

The “traditional” way of doing things is using the waterfall model. This one is the one outlined below, where the project is divided into seven very specific phases. Each phase serves its own specific purpose the whole process should be executed in linear fashion.

Expression Of The Client’s Needs

This is the phase where the client and you sit down and figure out exactly what the end goal of the web application is and what general purpose it must serve.

Defining Specifications

In this phase, the client defines (sometimes with the web developer) the behaviour of the application. This can go from the very broad strokes, down to very specific actions within the application. The discussion is dependent on how big the project is, and how flexible both parties are. With a new client, I always tend to be as specific as possible, in order to avoid any issues further down the line.

Implementation

This is the heart of any project. At this time, the developer gets down to brass-tax and implements the different specifications that both parties agreed on beforehand.

Staging Environment

At this point, the developer sets up an environment where the application can be installed in order for the client to access the final work.

Back And Forth

The client gives his comments on the work, the developer makes those changes and sends it back, etc… This back and forth leads to a point where both parties agree that the product is final. This phase can be a bit touchy as it can be a power struggle if specifications were not defined precisely enough in the beginning (which is why it’s so important to be as transparent as possible from the start of the project!).

Production

Once both agree on the final product, the developer (or sometimes the client’s technical team) installs the application in an environment ready for public use.

Maintenance

Many applications require additional maintenance, either adding new features, or fixing bugs.

Agile Methods

Another way of planning a project is using agile methods. Techniques like “Scrum” or “Extreme Programming” have become increasingly popular in recent years. These methods consist in setting up everything for the client to view as soon as possible, then build the product in smaller (1 to 3 week) iterations of ship-ready sub-products and therefore release something on which the client can reflect on and thus re-orient the project onto the path that best suits the situation.

This type of development process is a great way to navigate unplanned changes, which is especially useful when working with clients who have a tendency to often change their minds. Clients tend to be more satisfied with this method, as well as developers who no longer need to throw weeks of work away when the client is unhappy.

Whichever method you choose to use, a complete UI and design is required in order to kickstart the development process. A client has a better idea of the final result when she can see it graphically. Your job as the developer is to ensure a process that brings this image to life. Having a complete UI and solid UX rules will avoid a lot of issues down the road once the product is being built.

If you’d like to find out more about UX or UI design, check out our courses here:

CareerFoundry’s UI Design Course

CareerFoundry’s UX Design Course

**Landon Schropp at landonschropp.com told us: **

_ “The key to building a great relationship with a client is to listen. Your job as a contractor is to solve your client’s problems. If you take the time to understand their needs and deliver exactly what they’re looking for, your client will be exceptionally happy.” _

Best Practices For Your Web Development Process

There are a few best practices that are good to be aware of with your web development process:

  • Always document your web development process.

  • Using non-technical language in the web development process provides transparency with your clients. This process/document is the last “barrier” before entering the web development domain, make it as easy to understand as possible!

  • Commenting within your code is also something to look out for, you may not be the only one to use/work with this code, even if you are the only developer on it now. Make sure to comment within your code as much as you can, unless things are totally self-explanatory (e.g. tests/specs).

  • Each client has a different way of working, and bending the rules on your part a little will make all the difference with all your clients. Best to change things a little on your side rather than stay rigid to one process that wouldn’t fit the particular project/client.

  • Try to make templates of often used documents like invoices, hand-offs to clients, propositions/estimates and quotes. There are many online applications built for this purpose, including accounting and everything needed for the freelancer (I personally use Harvest).

Jacob Gube at Six Revisions told us how he finishes up a project:

_ “Follow-up - usually after 30 days, I see how the client’s doing to make sure everything’s OK. On large-scale projects, I will usually be on retainer for a 30-day period after the hand-off in order to fix anything that we might not have caught prior to the project hand-off.” _

While web developer Brett Hargreaves told us why he has a strict process in place for all his development projects:

_ “I found early on that not having a process would mean I’d keep getting muddled in my projects which in turn made them harder to maintain and extend.” _

Next Steps

In this blog post we’ve demonstrated and evaluated the numerous stages of a web development process, the value it brings to not just the clients, but all the different team players working on a given project including you in your role as web developer. We’ve discussed the reasons why it is so important to set a web development process in place early on for everyone involved and how to demonstrate your process to the client from day one. Whether you are using the “waterfall” model or more “agile” methods, we have seen that there are certain phases all projects need to go through irrespective of how you choose to organise them, and these are crucial to the success of any web development project.

Here are a few links to some great resources so that you can pursue your research and start putting your first web development process into place:

[What is your web development process? Do you agree with our approach? Let’s start the conversation in the comments below!]

If you’d like to find out more about web development, then please do check out the CareerFoundry Web Development Course.