Screenshot from our example “Hello World” tutorial series in the beginning section

Last updated: April 20, 2021

Welcome!

Hi! 👋 My name is Will and I’m excited to be your lead instructor for this course!

The youngest student that I’m aware of that is working through these tutorials is 12 years old. 💪

Many of the students are teenagers, but I’d say most students are later in their career learning new skills.

That being said, I’m constantly revising these articles to ensure technically savvy 12-16 year-olds can successfully learn. If you are in this age range, please feel free to email me at any time (will@wclittle.com, and be sure to cc: a parent/guardian). Even if you are older than this, I’d love to hear from you as well. 😊

I’ve been writing code for a few decades, have built software businesses of my own, and actively invest in early stage startups. You can learn more about me here on LinkedIn and check out things I write/podcast about here on Satchel.

This course is designed to quickly teach students how to build web/mobile applications, similar to playing with Legos.

While it takes many years to learn computer science in depth, of course, it is possible to quickly get up to speed to be a technical entrepreneur and/or a valuable member of a web/mobile development team.

You’ll learn more about what’s going on under the hood as you grow in your coding skills over the years, and I’ll be sure to link to additional resources throughout this course.

I’m planning to build out this course material over 2021 and will eventually put a paywall up to access the more in-depth videos and content. For now, I’d appreciate any/all feedback. If you get stuck, feel free to email me (as I mentioned above) at will@wclittle.com. I’d love to hear from you to help make this series better for the next students. Thanks!

Table of Contents

• Introduction (you are here; read the full introduction below)
• How to setup Windows to begin developing Ruby on Rails Web Applications
• How to setup a Mac to begin developing Ruby on Rails Web Applications
• ”Hello World” Part 1: Git, HTML, and Embedded Ruby
• "Hello World" Part 2: Shell Scripting and Cascading Style Sheets (CSS)
• "Hello World" Part 3: JavaScript and Ruby on Rails
• "Hello World" Part 4: Stimulus.js, StimulusReflex, and CableReady
• "Hello World" Part 5: Introducing Redux and React
• "Hello World" Part 6: Sending form data with Redux and React
• "Hello World" Part 7: Redux, Rails, and ActionCable
• Upgrading Rails
• "Hello World" Part 8: Hotwire with Turbo Frames and Turbo Streams
• How to upgrade Ruby versions for your Ruby on Rails app
• "Hello World" Part 9: Code formatting and linting
• "Hello World" Part 10: Automated testing
• More articles on the way, subscribe here to be notified when they are published!

Motivation and overview

The below text is written mainly for adults and parents/guardians of younger students interested in the details of this course. Feel free to skip this and jump right into getting started with Mac here or Windows here.

Without a doubt, the separation of software engineering from the business objectives and user experience (UX) is one of the main causes of operational problems and startup failure. While there are plenty of amazing “learn to code” options out there, what’s missing from the overall landscape is an integrated business curriculum for engineers building digital products, especially in a team setting.

Therefore, my goal with this three-part curriculum (i.e. web, mobile, and DevOps) is to teach from the ground-up a toolset for (1) rapidly prototyping software applications, (2) establishing an architecture that is ready to scale, and (3) integrating business and entrepreneurship fundamentals so that - as a software engineer - you can be maximally effective to help drive revenue and customer satisfaction for your business.

Audience and prerequisites

The intended audience for this series is anyone aiming to “learn to code” as an entrepreneur. This can be for the purpose of either gaining employment or freelance work as a developer, participating in a startup, and/or collaborating with a team to bring a new digital product (web/mobile application) to life.

Importantly, I’ll be writing to a high-school (or advanced middle-school) audience and above, with an eye toward my son born in 2006 (Charlie), daughter born in 2008 (Bekah), and my youngest son born in 2010 (Joey).

Importantly, this curriculum is not intended to be comprehensive. In fact, it will be quite the opposite by design; there will be many times when we build or write something that will be a “black box” for the student. We will embrace this as suitable, for now, and you can investigate later with more advanced computer science training (which I’d recommend!).

The world of software engineering is vast and there are endless rabbit trails to follow; my job as the lead teacher for this course is to swiftly guide you toward being an effective team member in real-life settings. In other words, I am confident that we can quickly teach you to participate in daily standups, be assigned work tasks, submit meaningful pull requests, and participate in peer review of code (students, we’ll discuss in detail what these terms mean).

As we go along, I will refer to external resources as appropriate, but anyone will be able to participate if they have a basic understanding of algebra and logic, and access to a reasonably modern computer and operating system. While my kids are pretty sharp, they are still “kids” and will keep me honest if I write something that isn’t clear. Please feel free to do the same.

Apprenticeships

Importantly, this series will be the fundamental resource that we use to train apprentices at Prota Ventures (I am one of the partners). Importantly, once at a high enough skill level to gain acceptance, these apprentices are paid positions. The content herein isn’t just theoretical; if you can get up to speed then - assuming we or one of our portfolio companies have positions available - there is a job waiting for you at the end. Even if we don’t have positions available anywhere in our network, the skills learned in this series are broadly applicable for any web/mobile development job that uses part or all of our toolset (below).

An opinionated toolset

If you are a younger student reading this introduction, awesome! I know these are all new topics/concepts, so feel free to follow the links or wait until we bring up those topics in the opening chapters to fully digest them.

Most of our projects at Prota use Ruby on Rails as the web development framework and/or API layer of choice, so Ruby and Ruby on Rails will be the primary language and framework used in this series for server-side programming.

For bringing web browser experiences to life (Part 1), we’ll be diving deep into HTML, CSS, and JavaScript, and “HTML over the wire” (web socket) technologies, mainly the new Hotwire patterns and tooling. We’ll also use TailwindCSS to help speed up CSS development. In addition, we’ll also teach other approaches such as Stimulus Reflex and Redux/React to help round out your understanding of how modern apps are built.

For iOS and android apps (Part 2), we’ll be using Turbo iOS and Turbo Android.

For DevOps and scaling (Part 3), we’ll be diving into caching and performance strategies, leveraging Amazon Web Services (AWS), and hosting services built on AWS such as Heroku.

Now, even though we present in this tutorial series an opinionated toolset, it is still just a toolset that is intended to grow as the student grows in their skills. Similar to constructing a house, many different tools are needed to get the job done. And - importantly - different tools are needed for different types of “houses”. Deciding on such tooling is the job of “Software Architects” that also design the overall approach of how the code will accomplish the business objectives. In this series, you will also learn to think like a senior architect.

Our approach: an open source project for a simple, practical, and fun use case

Rather than a trivial “ToDo” app or clone of a common social media app out there, we’re going to be working on an open source project together that you can use with your own friends and family.

The project will be a “quote board” application that allows users to input quotes, photos, location, date, etc… when someone around them says something funny or quotable. For example, kids often say extremely hilarious things and parents/grandparents would absolutely love (i.e. pay money for) an app that captures those memories. By the end of this 3-part series, you will be able to build, deploy, and monetize not only your own quote board application, but many other types of web/mobile applications as well.

Getting started: setting up your computer for web development

Right out of the gate, we are going to get your computer setup for building the quote board application we are going to build together with Ruby on Rails. Importantly, you should be using a computer that was built within the last four or five years. Relatively modern hardware will allow you to run a unix-based operating system (or subsystem) that will enable you to compile software necessary for bringing your code to life.  

So, if you are on Windows 10, you will need to follow these steps.  

If you are on Mac, you’ll want to follow these steps.

For Ubuntu users or any other unix-based system, you can follow the Windows tutorial above and adapt to work directly in your terminal and web browser. If you are using another distribution besides Ubuntu, you can follow the directions for Windows but use the correct package install commands for your OS.

---

Now, at this point - no matter what computer/OS you have - you should be at a place where you have a code editor (Visual Studio Code), a terminal, and a working Rails app loaded in a Chrome tab. This is a major success and is a good stopping place if you need to take a break.

To follow along as I post new articles in this series, subscribe to my newsletter and select the applicable topics (e.g. software development and this tutorial series). Again, feel free to shoot me an email with any questions at any time to will@wclittle.com. Thanks!

Continue: Git, HTML, and Embedded Ruby