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?

What are the best productivity tools for entrepreneurs?

Answer by Kumar Thangudu:

20,000 Web & Mobile Apps.
My cofounder and I have downloaded and used over 20,000 web and mobile apps over the past ~800 days. Here are some of our favorites, from the standpoint of being SAAS entrepreneurs/founders of LinkTexting – Create Text To Download Forms in Seconds.

Keep in mind as a founder, your mental clock cycles are worth a lot of money. You should not waste them on the normal distribution of tasks.

Keep in mind that most of these are just tools and knowing how to use them quickly requires practice, plenty of mistakes, and a willingness to fail.

My Number One Productivity Tool: Email tracking, scheduling, polls, and surveys for Gmail | Mixmax

I use this product religiously and it has saved me a ridiculous amount of time as well added awesome color and personality to my emails with customers and business partners.

My Number One Landing Page Tool: I've made several hundred dollars a month in simple human SAAS services by using Landing Page Software for Better Marketing The crazy thing about this tool is the sheer number of functionalities and the speed with which I can make an industry grade landing page and website. IF YOU ARE AN ENTREPRENEUR, YOU MUST LEARN HOW TO USE THIS TOOL.

 

Non-technical Founders
In this post, I've focused on apps that I find useful both in freeing my mind of non-entrepreneurial tasks and/or speeding up the prototype to launch process and beyond. I also focus on apps that are highly abstracted for non-technical people like me. That being said, I think if you have no-one on your team that is technical in a startup, then you're at a severe disadvantage, similar to attending a gun fight with a knife.

Full Stack Startup- for the Technical Founders/Entrepreneurs.
If I was technical, I'd recommend looking toward building a full stack company: http://a16z.com/2015/01/22/the-f… as described by @chris dixon.

Why We Use/Review such a Dizzying Number of Apps.
We constantly strive for ways to be resourceful and study what new apps come out, their UX/UI, and try to understand if the founder knows anything about user behavior that we couldn't possibly dream up.

Decision Criteria for Most Productive.
Each tool has a hyper-specific function and not much outside of that. In other words, it must be for only one thing. If the use cases abound, then it loses points and becomes less productive.

Here We Go:

First Opinion-First Opinion
I don't waste time going to the doctor for primary care visits. I started using this app to avoid doctors offices and it works pretty well for answering 90% of my questions about primary care visits. Weirdly, I learned about this one from a mother.

Visual Ping- Website change detection, monitoring and alerts
Allows you to monitor competitors' pages for changes. Pretty sweet for knowing if you need to make front-end wording or marketing changes. English isn't my first language so this one is particularly useful if my competitor is more skilled verbally than me.

SpyFuSearch Marketing Research & Reporting Tools
Couples well with the above tool, if you see the competitor funneling traffic into an A/B tested landing page, then you'll know that you should make appropriate copycat changes to your own site.

Ahrefs – Ahrefs Site Explorer & Backlink Checker
If a founder claims his site is huge, just check how many backlinks they have to their site. Success is generally proportional to backlink count for most products.

Profitwell – SaaS Metrics for Stripe. Absolutely Free.
Shows you a beautiful visualization of your metrics if you're an MRR related SAAS venture.

Zapier- The best apps. Better together.
If you're resourceful with zapier, you can build 10-30% of your apps on top of it as a non-technical person. My goodness, if you're non-technical and don't know about zapier, you need to go check it out immediately and test it out. Websites like Karmalytics can be built in minutes with a tool like zapier.  

SpeedLancer-Super fast, high quality design, writing & data entry/research!
Like Freelancer, but the work gets done in 4 hours. Very useful. 

Gmail and Facebook MenuTab- Amazing Mac, iPhone and iPad Apps
Amazingly useful for checking gmail with a hotkey from your mac menu bar app.

KnowEm- KnowEm Username Check for Social Networks, Domains and Trademarks
Find out the digital viability of your ideated names on many social networks instantly. This is useful for pinning down a domain name that works for a business on the marketing end in the long term.

Panabee-Business Name Generator & Domain Name Search
Panabee is useful for brainstorming potential domain names.

StartupLister- Startuplister – Promote your startup on the best websites
Lists your site on 40+ sites for you. Costs 49 bucks but totally worth it as an early stage venture.

BetaList-BetaList
Let's you offer your product up to a TON of potential users very fast. Automates a tweet about you to over 700+ accounts getting you huge exposure and signups.

ProductHunt- Product Hunt
If by this point, you don't understand the extent to which product hunt is useful for both searching for new products to use or as a place to launch a product, then you're missing out. ProductHunt changed my life. It's the reason I know so many apps at this point and have become 10X more efficient at some things. In fact, it's the reason this post is so long. Thank you Ryan Hoover , Andreas, and all the cofounders and teammates.

Untorch-Viral Marketing Tool for Email Sign Ups
Use this as a way to juice your Beta-Sign ups. It's a bit pricey, but totally worth it because it gets you lot of beta users via referral.

GoodUI- GoodUI
Checklist for your landing page. Meet 50% of these standards, and you'll be doing better than 90% of Silicon Valley startups/entrepreneurs.

IXD CheckList –IxD Checklist
Checklist for the innards of your app. Meet 50% of these standards, and you'll be doing better than 90% of Silicon Valley startups/entrepreneurs.
IXD checklist gives you a discrete, explicit, easy to follow checklist for evaluating the quality of your app.

Slack –Slack: Be less busy
The beauty here is that slack has tons of integrations, multi-platform, and allows for proper administration of multiple teams and organizations without having to login and log out. (C'mon hipchat….arghh)

Zirtual- Zirtual · U.S. Based Virtual Assistants for Busy People.
A real time assistant for cheap.

Clean My Mac- CleanMyMac 3 – Everything you can clean on your Mac
A tool for cleaning your mac automagically. Just run it and execute. It makes your Macbook run faster, gets rid of duplicates, and keeps things lean.

1 Password- 1Password
It's a password manager that I swear by. I've used it thousands of times. When people see the speed at which I use it they're simply astonished and ask "how'd you fill out that form so quickly?"

LinkTexting- LinkTexting – Create Text To Download Forms in Seconds
Launched this with a buddy. Extremely useful. ;)Saves 10-12 hours of engineering time to create a text-t0-download form. It's a must have for any mobile app with a desktop landing page.  Disclaimer: Built and launched by my buddy and me.

HelloBar- Hello Bar
HelloBar helps you funnel the traffic of the front page of a website into a space.

OpenSignalMaps-3G and 4G LTE Cell Coverage Map
Provides you with knowledge of which carriers you should be using in your office building and providing your employees with. As well as for your city/hometown on the whole.

TalkWalkers-Page on talkwalkers.com
This is an alternative to google alerts with slightly different functionalities at the core.

PastEasy-Pasteasy – Instantly copy and paste between your iPhone, iPad, Android,
This app is particularly useful if you find yourself constantly pasting things to yourself in imessage like contact details.

DoYouLoveUs- Do you love us
Indispensable tool for anyone with a big support network who wants them to share their monthly blog posts and links.

NameChk- Check Username Availability at Multiple Social Networking Sites
A useful tool for evaluating name viabilities.

List of Eponymous Laws – List of eponymous laws
If you're trying to understand a lot about the way the world works, this is a good starting point. If you're trying to understand an industry, just press Ctrl+f and search the industry on this page, if something comes up, start crawling through that link and exploring. You'll quickly 10X your understanding by starting from the viewpoint of an eponymous law.

Logical Fallacies-Page on yourlogicalfallacy.is
Prevent negotiations from falling into the arena of emotions by reading this before going into a negotiating environment. It will arm you to the teeth with the ability to stomp on objections to your goal. Keep in mind, even if someone uses a logical fallacy, it doesn't mean they're wrong, but if you can point out their logical fallacy, you can steer the negotiation in your direction.
Skitch Evernote- Skitch | Evernote

Flesch Kincaid, Gunning Fog and more …

Live Website Editor- lwe – Live Website Editor – Make persistent changes to any web page, live from the browser! – Google Project Hosting
You can prototype a vision and take a screenshot very quickly on any website. This tool is very useful for prototyping and iterating. Stealing other people's design and focusing on your messaging is a great way to think about users.

Facebook Invite All- Invite All (for Facebook)
Allows you to jumpstart your facebook page by inviting a lot of people.

Stripe
Stripe Integrations

HelloFax- Top-Rated Online Fax Service
Send faxes to anachronistic organizations over the web.

HelloSign- Legally Binding Electronic Signatures
HelloSign basically is awesome and a well designed product for inviting friends to design. I tried Docusign multiple times, but it failed me on mission critical items.

Clerky- Clerky
The fastest way to bury any entrepreneur is to give them a mountain of paperwork. Clerky stops that. I used them for LinkTexting and can't thank them more than enough for saving us hundreds of hours in figuring things out.

Kaffeine- Kaffeine
This keeps your heroku instances from idling and taking forever to load for your early users. The struggle is real. 🙂

KarmaLytics- Karmalytics
Snipe down potential early customers, adopters, or partners.

DakWak=Website #translation and #localization is as easy as never before with @dakwak's technology. Learn more..
DakWak will translate your landing page into 180 languages. Pretty damn slick if you ask me for figuring out which country to go to first. It seeds traffic and you can measure conversions from each country as users arrive and decide about your next hires.

Feedeebuzz-Feedeebuzz, das kostenlose Feedback-Widget für Ihre Site
A simple feedback widget

Invoiceomatic
Page on invoiceomatic.com
Issue invoices quickly and easily for free to your employers or clients.

LinkTally- LinkTally.com
Count the shares of an article on multiple platforms.

What are the best productivity tools for entrepreneurs?

Google’s Introduction of Material Design Lite

Material Design Lite a library of components & templates in vanilla CSS, HTML and JS.

Material Design

Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible. visit http://www.getmdl.io/ to get started.

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?