How do you go about making an idea into a finished website? What are the steps you take?

Answer by Quincy Larson:

Here are 10 steps toward planning and implementing a finished website:

1) Create a Trello board

Trello is a fun, free way to break your planning and development process into small tasks that can be tracked.

2) Write your user stories

Here are some example user stories. These will guide how you think about your app's features and functionality. Note that they all follow a similar structure: as a <person> I can <do something>.

  • as a logged-in user I can see the list of my to-do's.
  • as a logged-in user I can add a new to-do.
  • as a logged-in user I can delete a to-do (only my to-do's – not other users').
  • as a logged-in user I can complete a to-do (only my to-do's – not other users').
  • as an anonymous user, I can register for a new account, recover my password, or log in to the app with an existing account.

3) Create your use case model

This will help you visualize your user stories so you can better understand how to implement them.

4) Create an activity diagram

Your activity diagram will show the different paths your users can take through our app.

5) Create your mockups

Your mockups will show what your app should look like. It's much faster to iterate on a mockup than it is to do so on working code.

6) Choose the right technologies for our project

If you don't know which stack to use, a popular one right now is the MEAN stack:

  1. MongoDB for your database
  2. Node.js and Express.js for implementing your API
  3. AngularJS, along with HTML and CSS (and Bootstrap) for your client-side application
  4. Mongoose to connect your application to MongoDB

You can have a MEAN stack development environment up and running in the cloud in less than an hour, for free.

7) Design your database schema

In this case, you'll have two collections: your "Users" collection will house your user data, and your "ToDo" collection will house your tasks that need to be done. One user can have zero, one, or many tasks in her to-do list, so you'll have a one-to-many (1:m) relationship between our two collections.

8) Define your use cases

  1. What happens to the to-dos related to a user that deletes her account? When the user deletes her account the to-dos related to that user should also be deleted.
  2. No to-do can be added without being attached to a confirmed user.
  3. A to-do can only be deleted by its owner.
  4. No user can be added with an empty username or password.
  5. No to-do can be added with an empty task.

9) Design and test your API

We use a free product called Apiary to document our API.

10) Start writing code

This is the fun part, and it will take up most of your project's time. If you need help with this, join us and learn to code.

Note that these 10 steps were adapted from a blog post by Bianca Mihai (@bubuslubu). I served as editor for her blog post and got her permission to post this here.

How do you go about making an idea into a finished website? What are the steps you take?

Advertisements

What other sites are there to learn coding interactively like Codecademy?

Answer by Quincy Larson:

More and more coding programs are going all-interactive.

Codecademy has really set the standard for interactive learning in a coding editor. Here are some other sites that use this approach:

We've rolled out our own interactive lessons (to replace most of the Codecademy and Code School lessons we recommended).

They are all free, self-paced and browser-based: Learn to code

What other sites are there to learn coding interactively like Codecademy?