Programming for Non-Programmers

Course Progress

Week 1: The Web Development Process

1. Journey To The Center Of The Problem

Programming is about solving problems. But before you can find a solution, you have to first fully understand the problem. In this lesson, we discuss ways in which you can work through your ideas, get to the bottom of the exact problem you are trying to solve, formulate a solution and start working on it. You will get pointers that will help you get your ideas from your head onto a computer as well as how to communicate them to others involved in the problem-solving process like developers and designers.

2. Solve For A Sandwich

In this lesson, we cover an example of how programming works in the real world. Spoiler: it involves hunger and peanut butter.

3. Zen and The Art of Knowing Who to Hire

In the late 1990s, when you wanted a web presence, there was only one person to hire: The Webmaster. Since then, this role has shaped and evolved into front-end, back-end, UX, DevOps, and a whole list of players. In this lesson, you'll get an overview of different Web development roles.

4. Meet The Beatles (Of Web Development)

The four most important roles for the web development life cycle include User experience (UX), Information architecture (IA), Visual Design, and Development. Let's take a 10,000-foot view of each one.

5. MVP: Minimum Viable Product

"If you build it, they will come." That might work in the Field of Dreams, but in the real world, it's usually not a good idea to double down and take months building a complete product before showing it to a user. I share a story of my personal failure doing exactly that and give insight on how an MVP would have saved me 9 months of my life.

6. UX-Men

When building products, you have to keep User Experience (UX) in mind as it's an integral part of Software Development and can greatly influence the success or failure of a product. User experience encompasses all aspects of the end-user's interaction with the company, its services, and its products. When we went through Y Combinator with One Month, Paul Graham yelled at me. From this, I learned some wonderful lessons about User Experience that I want to share with you.

7. A High Wireframe Act: Information Architecture

In this lesson, we tackle the second role in our web development cycle: information architecture. Information architecture is the design and organization of content, pages, and data into a structure that aids users understanding of a system. It is closely tied to User Experience (UX) as it seeks to organize content in a way that will be helpful to users of the software application.

8. A Visual Design Is Worth 1,000 Wireframes

Next on our web development life cycle is visual design. Visual design is the use of color, shapes, imagery, typography, and form to enhance usability and improve the user experience. To achieve this, visual design considers a variety of principles, including unity, Gestalt properties, contrast, space, scale, balance, dominance, similarity, and hierarchy. In this lesson, we see exactly what that looks like.

9. Who Wireframed It Better: Comps vs. Style Guide

In web design, a design comp is a visual mock-up of a proposed web design. Designers use comps to establish what the website will ultimately look like—from the page’s colors, textures, fonts, and sizes to navigation and button design. The design comp is the last part of the designing phase and is the closest draft to the final product. It is presented to the client prior to the actual coding of the website, to ensure that there is a clear consensus of how the site should look. A style guide or style manual is a document of code standards that details the various elements and patterns of a site or application. It is a one-stop place to see all visual styles of the site such as headers, links, buttons, color pallets and any visual language that is used on the site.

10. Front-end vs. Back-End Developers

What's the difference between front-end and back-end web development? Front end development focuses on the visual part of a web application—the part that the user sees and interacts with, sometimes referred to as the client-side. Front end languages include HTML, CSS, and Javascript. Back end development deals with the server-side of an application and handles the “under the hood” operations that make a web application work, which include data processing and management, communication between the database and front end, management of any other infrastructure that the app uses, etc. Examples of back end languages are Java, PHP, Ruby, Python, and C#. In short, front end developers build how a website looks while backend developers build how it works.

11. Shoe Me What You Got: Front-end and Back-end Examples

In this lesson, we further explore back end and front end development by taking a look at Zappos.com and breaking down the elements of the site that make up its "front-end" and the ones considered "back-end". No code experience necessary.

12. Who should I hire to build my web app?

We've looked at the four main roles of web development. However, the four roles aren't a strict structure of a web development team. Some teams have more roles and others have less. The structure of a web development team is determined by various factors including budget, project size, company size, available talent, etc. For a small project, you might find a developer working alone in the design and development of the application. In a startup that has a limited budget, you usually find people wearing different hats and taking on various roles, and in a large organization, there is usually a person or team hired for various specialized roles. In this lesson, we'll look at some additional roles that can exist in a web development team such as Content Strategist, Project Manager, Business Analyst, SEO expert, Growth Hacker and more.

13. Workshop #1: UX Business Assumption Worksheet

Early in the software development process, assumptions and hypotheses are usually made by the team regarding important considerations surrounding the user problem. By identifying these assumptions early in the process, the team can determine ways to test the assumption and get data that helps mitigate the risk of being wrong. With the results gained from exploratory testing, the team continues to brainstorm solutions, design prototypes, learn from validation and usability tests, and refine the product. There are various methods that can help you determine your assumptions. In this lesson, we give you a template inspired by the book Lean UX: Applying Lean Principles to Improve User Experience that will help you and your team work through your individual assumptions. Take some time to answer the questions presented. In the next video, you'll see how I go about answering them.

14. Workshop #1: UX Business Assumption Results

Let's review our business assumptions worksheet together. I'll brainstorm through the questions presented in the last lesson with the goal of answering the two main questions of UX: who are the users and what are their goals? It is only after answering these questions, that we can then start building features that match those goals.

15. UX Case Studies

In this lesson, I present a case study of how a product development team that I worked on goes about conducting UX research. You'll see the hypotheses and assumptions we made and the process we used to validate those assumptions.

16. Workshop #2: Design Workshop: The Art of Darkness

Do you know the following 6 design concepts? You should. Here's your challenge: take some time to define the vocabulary words below. See you in the next lesson.

17. Workshop #2: IA Workshop

Time for another assignment. Take 10 minutes, grab a pen and paper and draw out wireframes for Twitter.

Week 2: Which Programming Language Should You Choose?

1. Me Talk Web One Day

In this lesson we’ll go over software development jargon! Knowing these words and phrases will make for a smoother journey as you work through the course.

2. How to Choose a Programming Language

What should you consider when choosing a programming language? Which programming language should you learn? It can be scary to choose a language, but you got this! In this lesson, we'll show you the top seven programming languages, discuss their differences and explore what each is suitable for.

3. High to Low Level Programming Languages

Software can be written in either high or low level languages. High-level programming languages are written in a form that is close to our human language. Low-level languages are closer to the native language of a computer (binary), making them harder for programmers to understand. Let’s dive in!

4. The Evolution of Programming

Here, we look at the evolution of programming languages. In particular, we'll look at the evolution of our seven chosen languages, which will make you understand why we chose them in the first place. You'll see that some programming languages are derivatives of others and thus share some similarities.

5. Reading Code: Machine Code and jQuery

Take my hand, it's time to jump lightly into reading some code. We'll look at a piece of code and try to decipher what it does. One version of the code is written in jQuery and another in machine code. Any guess which one will be easier to read?

6. The Most Popular Programming Language

The award for the most popular language goes to... (watch this lesson to find out)

7. PHP vs. Ruby vs. Python

Wikipedia chose PHP, Hulu chose Ruby, Google likes Python. Which one is best for you? In this lesson, we'll break down some of the differences between three of the most popular web development programming languages: Ruby, PHP, and Python.

8. What Programming Language is Facebook Built With?

Builtwith.com lets you look under the hood and peak at the technology choices of your favorite websites. Which language do we use here at One Month? You're about to find out!

9. 4 Questions to Ask When Choosing A Programming Language

New languages are coming onto the scene all the time. How will you decide which one to learn/use? I’ve put together a checklist of four questions that you can use to help determine the value of a new technology.

10. When should I choose Java, .NET, or Node.js?

Let's dive deeper into Java, .Net and Node.js to see if they are good options for your project. In this lesson we’ll explore the tasks they are suitable for and look at some criteria you might use to decide which language to use. We also take a look at some websites and see why the language they use is a good fit for their use case.

11. Which Language is Best for Mobile?

When it comes to creating mobile applications, you have various options available to you. You can create native applications coded in the language that a particular platform supports, e.g. Swift or Objective C for iOS, Java or Kotlin for Android and C# for Windows Phone. You can create hybrid cross-platform applications using web technologies (HTML, CSS, JavaScript) with frameworks such as Ionic and Phonegap. It is also possible to create native applications using web technologies with frameworks such as React Native and NativeScript.

12. What is Responsive Design?

Responsive web design (RWD) is an approach to web design that makes web pages render well on a variety of devices and screen sizes. With this approach, you use HTML and CSS to automatically resize, hide, shrink, or enlarge a website to make it look good on all devices (desktops, tablets, and phones).

13. Extra Credit: A Responsive Design Challenge

Time to prime your eye: What are the differences and similarities between these websites at different sizes? Take a closer look at Pack and The Japan Times to find out.

14. What are Coding Frameworks?

You've learned about Ruby, PHP, Python, and JavaScript, but now you're wondering, "What is Ruby on Rails? What is Django? jQuery!?" Those are FRAMEWORKS! In computer programming, frameworks give us some free pre-written code that we can build on top of. There are a variety of types of frameworks, and so in this video, I'll show you some framework examples, how they work, and why they exist.

15. Tech Stack & Server

A technology stack or tech stack for short refers to a set of technologies, software, and tools that are used in the development and deployment of websites, apps, and other digital products. It is a combination of programming languages, libraries, frameworks, servers, patterns, UI/UX solutions, software, and tools used by the development team.

Week 3: HTML & CSS

1. Sublime

You'll need a text editor to write code. We use Sublime Text to code, but if you have a preference for another code editor (like Visual Studio Code, Atom, etc.), feel free to use it instead.

2. Party Tip: HTML

Let's code some HTML! Watch on for a quick intro to HTML as we create a simple Party Tips website.

3. Party Tip: CSS

Let’s add CSS (Cascading Style Sheets) to our webpage to add some styling to it.

4. Party Tip: JavaScript

We use JavaScript on the page to make it more interactive. I also share a quick tip! An easy way to remember what HTML, CSS & JavaScript are used for.

5. Party Tip: Images

In this lesson we’ll add images to the Party Tips website to make it a bit more interesting.

Week 3 - Javascript

1. The 10 Concepts That Are The Same In Every Programming Language

There are a lot of things in programming that are the same across all languages, not just in JavaScript. In this lesson, we’ll go through some of them, namely: Events, Comments, Print, Variables, Data Types, Conditionals, Functions, Arrays, Concatenation and Debugging. In the lesson, you'll get a preview of an application that you are going to build as you learn these concepts.

2. Events

JavaScript in the browser uses an event-driven programming model. An event is a signal that something has happened. Examples of events are the page completing loading, a user clicking on a button, hovering on an element, typing into an input box, submitting a form, etc. JavaScript enables you to respond to events using Event Handlers. You can attach an event handler to the HTML element for which you want to respond to when a specific event occurs.

3. Comments

In computer programming, comments are annotations in the source code of a computer program that are added with the purpose of making the source code easier for humans to understand, and are generally ignored by compilers and interpreters. You should add useful comments to your code to explain what the code does to make it easier for another programmer (or your future self) to go through the code and understand what it's doing and how it works.

4. Print

At some point, you are going to have to write code that displays some output to the user. In JavaScript, you one of the most basic ways to output a response is with the document.write() function. Let’s start there.

5. Variables

In programming, a variable is a storage location paired with an associated symbolic name, used to store information to be referenced and manipulated in a computer program. You can think of variables as containers that hold information. Their sole purpose is to label and store data in memory, which can then be used throughout your program.

6. Concatenation

Concatenation is a way of combining the text of two strings together into a variable. Watch the example in this video—as it's much easier to understand when you see it in action.

7. Datatypes

In JavaScript, there are two different kinds of data: primitives, and objects. There are seven primitive data types: Boolean, Number, String, Null, Undefined, Symbol and bigint (newly introduced). In this lesson, we'll focus on two of these, i.e. Strings and Numbers.

8. Functions

In programming, a function is a named section of a program that performs a specific task. A function groups together one or more program statements that perform some operation(s) and optionally return a value.

9. Conditionals

Often a computer program must make choices on which way to proceed. Conditional statements are features of a programming language which perform different computations or actions depending on whether a specified boolean condition evaluates to true or false.

10. Arrays

An array is a data structure used to store multiple values in a single variable. In some programming languages, arrays can only hold values of the same type, but not in JavaScript. In JavaScript, you can have values of different types in the same array.

11. Debugging

One thing you can be sure of when coding: you will encounter bugs. Let's learn how to deal with them. In this lesson, we look at various tools available to help us in debugging our code. You will learn how to log out messages to your browser's console and how to use the Developer Tools available in your browser to inspect and identify issues in your code.

Week 4: Back-end Development

1. What is a CMS (Content Management Systems)

A CMS (Content Management System) is a software that facilitates creating, editing, organizing, and publishing content. It helps you update your site without having to touch code. Examples of popular CMSs include WordPress, Squarespace, Expression Engine, and Drupal. If you can't find the perfect CMS solution for your project, it's not uncommon to build one from scratch.

2. Stats on the Most Popular CMS

Now that you know how useful CMSs are, how do you chose one to use? To decide, you can use the same criteria we covered earlier for choosing programming languages, i.e. Difficulty Level, Community, Development Time and Available Resources. A good indicator of a good CMS to use is its popularity. Builtwith.com has a "trends" section that shows trending data on popular web technologies. You can use this to get a ranking of popular CMS platforms.

3. CMS Takeaways: Wordpress.com

In the next few videos, we are going to look at four CMS solutions, compare them and see their pros and cons. In this lesson, we start with WordPress.com. WordPress.com is free, easy to use, but not very customizable. We'll take a three-minute tour of an example site. Let's look under the hood...

4. CMS Takeaways: Wordpress.org

With WordPress.org you have access to thousands of themes, it's written in PHP, and free to download. You'll just need some tech skills to get the most out of it. Here's what you need to know.

5. CMS Takeaways: Squarespace

Squarespace has fewer themes/templates than WordPress, but they look great. I purchased a Squarespace account to show you what's inside.

6. CMS Takeaways: Build a custom CMS

You may need a custom CMS if you have a custom problem. For instance, here at One Month, we had a custom problem: we needed a CMS that we could use to upload and show videos, manage multiple classes, accept payment, manage student accounts and track their progress, track analytics, etc. There was no single platform available that had all the features we needed and so we built a custom solution.

7. How to Create a Job Scorecard

A Job Scorecard is a document that describes exactly what you want a person to accomplish in a role. This lesson outlines ways you can go about creating one. Watch on, as your assignment will require that you create and submit one.

8. Get Your Certificate!

If you've finished the course and completed the lessons, you're eligible to receive your certificate of completion!

Go Deeper

1. Glossary

The glossary includes definitions and additional resources for important vocabulary in Programming for Non-Programmers. Glossary terms include Ruby, PHP, Django, Bootstrap, User Experience, Agile, CMS, and many more.

2. Why use Git?

When writing code, you need to store it somewhere. It is usually best to store it in a way that you can record different versions of it that show the changes you made over time. You don't know when you might run into bugs and need to go back to an older, more stable version and start from there. This is where Version Control Systems come in. Version control is a system that records changes to a file or set of files over time so that you can recall specific versions later. There are different version control systems, e.g. CVS, SVN, Git, Mercurial, Bazaar, Monotone, etc. Git is the most popular of these. Git is a free and open-source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. There are different platforms that provide version control repository hosting where you can upload and store your code, e.g. GitHub, Bitbucket, GitLab, etc.

3. Commit with Git

Here's a 15-minute crash course on understanding and using Git. We use GitHub to host our files.

4. Connecting Git to Github

When you connect to a GitHub repository from Git, you'll need to authenticate with GitHub using either HTTPS (Hypertext Transfer Protocol Secure) or SSH (Secure Shell). If you decide to connect over SSH (which is what we'll do), you must generate SSH keys on each computer you use to push or pull from GitHub. Using the SSH protocol, you can connect and authenticate to remote servers and services. With SSH keys, you can connect to GitHub without supplying your username or password at each visit. In this lesson, we set up our SSH key so that we can connect git (locally) to Github (on the Web). This will allow us to push up code changes and share them with the world.

5. Push to GitHub

Now that we have a GitHub account set up, we can push our local code to the GitHub site. You'll learn how to commit changes and push them up to GitHub as well as how to create a README file for the repository in Markdown. It is usually recommended that you include a README file in your repository as it helps in documenting the project.

6. Build a Rails App in 20 Minutes

I have a special treat for you! In this lesson, Alexis Rondeau and I walk you through a 100k foot view of how to build a Ruby on Rails application. We'll go from start to finish IN JUST TWENTY MINUTES. No need for you to code along, I want you to just watch. It might feel like you're jumping in over your head and that's exactly what this is all about. Applications you'll be exposed to in this lesson include Rails, Terminal, Git, and Sublime Text.