Get to know the tools
Start by getting familiar with the tools you’ll be using in this workshop. Please install the tools you do not have yet installed and move on to the next guide.
Instructions per Operating System
Before we get started, it is important that you select the instructions specific to your Operating System. This website should detect it automatically, but if you’re unsure, ask your coach.
We have detected you’re using: Error: JavaScript not loaded. It should already be selected as the Operating System in the “Choose your Operating System:” element below here. No need to change it if it’s correct.
This step is important, because the commands you need to run on a Windows computer are different from Mac or Linux. The instructions for Windows will not work on Mac and vice versa. If you’re using a cloud service to build your app (like Replit), you’ll need to run the Linux commands even if you are on a Windows computer.
Text Editor
To create your app you’ll need to write code. This can be done with a Text Editor made for writing code. Listed below are examples of text editors you can use for writing code and editing files. We recommend Visual Studio Code as it’s a very complete package that works out of the box.
Choose an editor, go to the website linked below and install it following the instructions on the website.
- Visual Studio Code (Recommended)
- Sublime Text
Terminal
The Terminal is a tool to run commands on your system for applications that do not have a Graphical User Interface (GUI), like many of the tools we’ll be using today. The Terminal is also known as PowerShell or Command Prompt on Microsoft Windows, we’ll be referring to this as the Terminal throughout these guides.
In the Terminal app you’ll do things like:
- Install the required tools (Ruby, databases, and others);
- Start your Rails app;
- Run database migrations;
- etc.
Open the Terminal like so for your Operating System:
-
Open Spotlight:
- Click the Magnifying glass icon in the menu bar at the uppermost top right of your screen, or;
- Press command + space bar (The command key can be recognized by the ⌘ symbol).
- Type in "Terminal" or "iTerm".
- Press Enter to open the Terminal app.
-
Open the "Start" menu by:
- Clicking on the Windows icon in the bottom left, or;
- press the Window flag key on the keyboard.
- Type in "PowerShell" or "Command Prompt", whichever is available.
- Press Enter to open the Terminal app.
Please consult your Linux distribution's documentation about how to open apps, and open the Terminal app.
If the options above are not available, press the Window flag key + R, type in cmd
and press Enter to open the Command Prompt Terminal app.
Code examples
Throughout this guide you will see bits of text formatted like the block below. The icon next to the text will let you know which tool to use.
The text in the block below is a terminal command. This can be recognized by the Terminal icon on its left side. It needs to be run in the Terminal. Copy it from the page, paste it in the Terminal app and press the Enter key.
The text in the block below is source code. This can be recognized by the Text Editor icon on its left side. It needs to be inserted into one of your project files.
Web browser
You should already have a webbrowser installed. It’s what you use to view this page on your laptop. You should not have to install any of these, one should already be installed, but just so you know what they’re named.
- Edge (this is preinstalled on Microsoft Windows laptops)
- Safari (this is preinstalled on macOS laptops)
- Alternatives you may be using instead:
You should now have a Text Editor installed, you know where to find the Terminal and you have your browser open. On to the next guide to install Rails!
If you’re ever stuck during a guide, please ask your coach for help and also consult this handy cheatsheet for Ruby, Rails, the console, the Text Editor etc.
Guides
- Guide 1: Start of the guide
- Guide 2: Get to know the tools (Current page!)
- Guide 3: Guide to install Rails
- Guide 4: Build Your First App
- Guide 5: Style your app using HTML and CSS
- Guide 6: Add a new page to your app
- Guide 7: Add a new homepage to your app
- Guide 8: Add picture uploads
- Guide 9: Push Your App to GitHub
- Guide 10: Put your app online with one of these services:
- Guide 11: Style the idea pages using HTML and CSS
- Guide 12: Add comments to your app
- Guide 13: Create picture thumbnails
- Guide 14: Test your app with RSpec