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.
In this lesson, we cover an example of how programming works in the real world. Spoiler: it involves hunger and peanut butter.
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.
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.
"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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
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.
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?
The award for the most popular language goes to... (watch this lesson to find out)
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.
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!
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.
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.
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).
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.
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.
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.
Let's code some HTML! Watch on for a quick intro to HTML as we create a simple Party Tips website.
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.
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.
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.
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.
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.
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.
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.
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.
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...
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.
Squarespace has fewer themes/templates than WordPress, but they look great. I purchased a Squarespace account to show you what's inside.
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.
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.
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.
Here's a 15-minute crash course on understanding and using Git. We use GitHub to host our files.
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.
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.
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.