How should I, as a front end developer, prepare for a new project?

Story

Two years ago, in a land not so far away, there lived a front end developer by the name of Ivy Troubleticket. She was very good at writing code and figuring out the most difficult of problems. One day Ivy was put on a very important project where she would be the lone developer of a 5 template site, but would have a very tight timeline. She received the designs, a style guide, as well as a list of all of the function requirements she would ever need to know. It was up to Ivy to make the website come to life.

She took a deep breath, opened up her text editor, and began to build. Line after line of HTML, PHP, and CSS were continuously pouring from her fingertips at a pace that would scare the most hardened hacker. Over the course of the day she was able to finish not one, but three desktop templates. She got up and poured herself a cup of coffee, took a well deserved break from coding and took a gander at the mobile layouts for the templates she already finished. She gasped at the way the designer laid out the mobile versions and cursed not looking at them sooner. Ivy would have to spend the rest of that evening, and the next morning re-developing the templates she was certain were complete only moment ago.

Synopsis

The moral of this story is preparation. Taking some time to thoroughly plan before ever writing a line of code is terribly important. I have always been so eager to get started that sometimes I lose focus on a projects expectations. I see the designs and I'm off to the races. It's not just code, but structure that you are building. That structure is as not so different than building a house. You have to figure out what you will build it out of, what should be built first and what functionality will be added.

It can be the difference between being on time and budget to losing a client. One hour of preparation can save a day of work down the road. The following are just a few tips to get you ready for a project before you write any code...

• Know the expectations for the project. Read everything that is available as far as requirements, assumptions, third party elements, add-ons, functionality, and anything else that might be needed
• Make sure you review designs thoroughly and write down or submit all questions that you would have for the client like, 'When I click this what happens?'
• Take notes on how you 'think' you will develop the project as you go through the different templates/designs. Sometimes as you get further through the designs you may change the way you decide to handle certain elements so it's important to go through the process in your head or on paper
• If the project has more than one developer, setup an internal kickoff to establish some standards and go over development ideas to save time. Then have daily check-ins to detail progress
• Make sure that you see all break-point designs for a particular template so that you can establish the content hierarchy needed to make that template respond properly
• Insist on a style-guide from the client if they don't have one. This will make sure that you have all the expected colors, font styles, and other elements to make global content the same
• Call out things that are not in the scope of the project. Sometimes functionality and design expectations from the client don't match the expectations established in a signed agreement. It is important to talk about those things early so that they aren't pain points later
• Know the budget and timeline. This will help with how you develop simply because it will make you think about things like, 'should I use a plugin or build it myself?'. If you establish those things early you tend to meet goals and timelines instead of frantically figuring that out at the end
• Set development goals. Create goals to achieve that will follow the timeline so that you know at any point if you are on or off track for the project
• Know your client. If you have worked with the client before, then think about their normal expectations and how they like the small things. If it is the first time with a client, pay attention to some of the little things that they expect, it may save time on future projects
• Establish code and CMS usage. If you are working with a team this is REALLY important. The way the templates will be built in terms of HTML tags, file directories, code compiling, CMS building, etc... will have to be linear for a successful project
• Be confident. After going over most of the above you should feel confident that you are ready for the project and will meet all goals set for yourself and the project as a whole. Over time you will figure out many more things to add to this list that will save you time and heartache

Now you can open the code editor and get building...