href="#i000092010000.jpg"/>Professional designers create mockups with Adobe Photoshop and use layers, which isolate individual site elements. A properly created layered Photoshop file helps developers more easily write the code for those website elements.
In addition to visual design, complex apps also have technical designs and decisions to finalize. For example, if your app stores and retrieves user data, you need a database to perform these tasks. Initial decisions here include the type of database to add, the specific database provider to use, and the best way to integrate the database into the application. Additionally, developers must design the database by choosing the fields to store. The process is similar to the process of creating a spreadsheet to model a company’s income – you first decide the number of columns to use, whether you’ll include fields as a percentage of revenue or a numerical value, and so on. Similarly, other features like user logins or credit card payments all require you to make choices for how to implement these features.
Coding your app
With research and design done, you’re now ready to code your application. In everyday web development, you begin by choosing which pages and features to start coding. As you work through the projects in this book, however, I will guide you on what to code first.
Knowing how much to code and when to stop can be tough. Developers call the first iteration of an app the minimum viable product — meaning you’ve coded just enough to test your app with real users and receive feedback. If no one likes your app or thinks it’s useful, it’s best to find out as soon as possible.
An app is the sum of its features, and for any individual feature, it’s a good idea to write the minimum code necessary and then add to it. For example, your restaurant app may have a toolbar at the top of the page with drop-down menus. Instead of trying to create the whole menu at once, it’s better to just create the main menu and then later create the drop-down menu.
Projects can involve front-end developers, who write code to design the appearance of the app, and back-end developers, who code the logic and create databases. A “full stack developer” is one who can do both front-end and back-end development. On large projects, it’s more common to see specialized front-end and back-end developers, along with project managers who ensure everyone is communicating with each other and adhering to the schedule so that the project finishes on time.
Debugging your code
Debugging is going to be a natural part of creating an application. The computer always follows your instructions exactly, yet no program ever works as you expect it to. Debugging can be frustrating. Three of the more common mistakes to watch out for are
❯❯ Syntax errors: These are errors caused by misspelling words/commands, by omitting characters, or by including extra characters. Some languages, such as HTML and CSS, are forgiving of these errors, and your code will still work even with some syntax errors; whereas other languages, such as JavaScript, are more particular, and your code won’t run when even one such error is present.
❯❯ Logic errors: These are harder to fix. With logic errors, your syntax is correct, but the program behaves differently than you expected, such as when the prices of the items in the shopping cart of an e-commerce site don’t add up to the correct total.
❯❯ Display errors: These are common mainly in web applications. With display errors, your program might run and work properly, but it won’t appear properly. Web apps today run on many devices, browsers, and screen sizes, so extensive testing is the only way to catch these types of errors.
Now you’re ready to actually start coding. You can develop websites either offline, by working with an editor, or online, with a web service such as Codecademy.com.
Working offline
To code offline, you need the following:
❯❯ Editor: This refers to the text editor you use to write all the code this book covers, including HTML, CSS, JavaScript, Ruby, Python, and PHP.
The editor you use will depend on the type of computer you have:
• PC: Use the preinstalled Notepad or install Notepad++, a free editor available for download at http://notepad-plus-plus.org.
• Mac: Use the preinstalled TextEdit or install TextMate 2.0, an open-source editor available for download at http://macromates.com.
❯❯ Browser: Many browsers exist, including Firefox, Safari, Internet Explorer, and Opera.
❯❯ Web host: In order for your website code to be accessible to everyone on the Internet, you need to host your website online. Freemium web hosts include Weebly (www.weebly.com) and Wix (www.wix.com); these sites offer basic hosting but charge for additional features such as additional storage or removal of ads. Google provides free web hosting through Google Sites (http://sites.google.com) and Google Drive (http://drive.google.com).
Working online with Codecademy.com
Codecademy.com is the easiest way to start coding online, and lessons from the site form the basis for this book. The site doesn’t require you to install a code editor or sign up for a web host before you start coding, and it’s free to individual users like you.
The site can be accessed using any up-to-date modern browser, but Google Chrome or Mozilla Firefox are recommended. After you access the site, you can sign up for a free account that will save your course progress and allow you to access more advanced content. As you use the site, you may see offers to upgrade to Codecademy Pro, which includes extra quizzes, projects, and live help. For the purposes of completing this book, purchasing a Codecademy Pro subscription is completely optional.
Touring the learning environment
After signing up or signing into the site, you will see either an interactive card or the coding interface, depending on the content you learn. (See Figure 3-3.)
