Code Fellows co-founder and experienced software developer Ivan Storck weighed in with pro tips and favorite tools to help you get the most out of planning, building, and shipping your project. Read his tips below, plus check out more resources for creating a web app at the bottom of this post!
1. Decide What Kind of Project You’re Building
Are you building a website or a web app? A website is a static site that doesn’t store any information from the user. A web app (not to be confused with a mobile app, a program created for and downloaded from an app store by tablets and smartphones) is more interactive, can bring in additional information with the help of an API, and retains input from the user on a server or in a larger-scale database. This could involve your user creating a profile or project that your web app will store for later use.
2. Choose a Language
If you want a basic website or portfolio, you may only need to use HTML (for the structure), CSS (for the style), and maybe a little bit of JavaScript or jQuery (for some site functionality). If you’re building a web app, you’ll need at least HTML and CSS, plus a programming language. For the purpose of this post, we’ll assume that you’re using JavaScript (although you could use Ruby, Python, .NET, PHP, etc.).
Why do you need a programming language? This is what tells the server what to do with the information that the user is providing. It can also use the information provided by APIs. JavaScript is powerful because it’s a full-stack language, meaning both the client (your user’s browser) and the server (what stores the information in a database) can understand it.
Ivan’s Pro Tip
When choosing a language, pick something that you can use to achieve the results you want today, rather than trying to learn a whole new language at once.
3. Choose a Text Editor
There are several great text editors for you to choose from. Our favorites are:
- Atom
Atom is an open source program that is completely customizable with web technologies that you already know: HTML, CSS, and JavaScript. It’s quickly becoming the most popular editor. - Sublime Text
Sublime Text was once a widely-used editor, but isn’t updated as often as it used to be. It’s still a great tool, but won’t be getting a lot of new features or updates anytime soon. - WebStorm
WebStorm is a great integrated development environment (IDE), with powerful code-completion, refactoring, search, and debugging features. - Other Options: Vim or Emacs
If you want an extra challenge, some old-school hacker cred, and the ability to edit code on any server or terminal, try a command-line editor like Vim or Emacs.
Ivan’s Pro Tip
Text editors provide syntax highlighting to help you see any errors in your code, easily see the structure of your project, and get quick access to files. Use the standard features to speed up the development process, like project-wide search-and-replace, code snippets, and plugins. Choose your editor wisely—debates on the best editor will follow you for the rest of your career.
4. Choose a Framework
A framework is the skeleton that you build your web app around. While not required, frameworks come with built-in structure, functions, and objects that speed up the development process. jQuery is a common JavaScript framework. For bigger projects, our favorites are:
- React
Created and used by the minds at Facebook, React is a powerful and delightful framework, although it can be a challenge for beginners to use. For some great starter kits, check out React Slingshot and React Starter. - Ember
Ember is a great, highly-structured framework with built-in architectural decisions already made for the team that uses it. It also has a lot of useful functionality in ember-cli, its command line tool. - Angular
The most popular web app framework used today, Angular gets the job done. It’s in a major transition period between V1 and V2, with a lot of unknown changes ahead. For more assistance and documentation, try out V1. If you want to use the latest and greatest technology, check out Angular 2.
Ivan’s Pro Tip
Web application frameworks give you a pre-defined structure for your app. These structures help guide your architectural decisions. Popular web application frameworks also make it easier for others to maintain your app, because they know were to look for things.
If you get into React, make sure to check out Dan Abramov’s “Getting started with Redux” course for free on Egghead.io.
5. Choose a Version Control System and Source Code Host
A version control system (VCS) lets you save your code in iterations. If you ever need to revert back to previous versions, you have a snapshot of your code a various points throughout the development process. A source code host is an online platform that helps you access and share your source code with others involved in the project.
Git is the most popular version control system in the world. It pairs well with GitHub (what our students use at Code Fellows), an online platform that hosts your source code and keeps an easily-accessible history of your project. You can also use BitBucket or GitLab.
6. Know When You’re Done
As you build your project, you’ll realize that there is always more you can tweak. Code can always be refactored, CSS can always be more organized, HTML can always be adjusted. Perfect is the enemy of done, and there will always be bugs to fix features to iron out. You’ll reach a point where you need to just ship it.
So how do you know when you’ve gotten there?
Ivan’s Pro Tip
Software is different than making cars or buildings. It’s so malleable that your stakeholders will likely ask for changes on an ongoing basis. Meet with your stakeholders to decide which features you need, and create some user stories around them. Then break the features down into a priority list to decide which ones are top priority, and which ones can be added in iterations after the minimum viable product (MVP) is launched.
Are you the only stakeholder in the project? Give yourself a short list of features you want to include in V1, and another longer list for V2, V3, etc.
7. Watch Out for Potential Pitfalls
As you work on your project, you’re going to run into bugs or roadblocks that have you slamming your head against the keyboard. When that happens, take a walk to get away from your screen or talk out your problem (yes, out loud). Taking some time to step back and process without feeling like you have to be typing will help you stop and consider multiple options and rethink the problem you’re facing.
Ivan’s Pro Tip
Watch our for analysis paralysis or trying every language and framework before sticking with one. If you are using open-source projects on GitHub, make sure it has recent commit dates and issues being resolved.
Ready to learn more? Find out how you’ll use these programs and tools in Code 201! See the Course »
Once you’ve selected your tools and planned out your project, it’s time to just do it! Stay tuned for Part 3 on hosting your site and getting it live.
More Resources:
14 Online Learning Resources for an Aspiring Web Developer
How to Build and Launch a Web Product
10 Resources and Tools to Dive Deeper Into Programming
15+ Programming Books to Keep on Your Shelf
Try Git
