index.html

---
layout: default
description: "Learn how to make your first web app with Ruby on Rails! Sign up for a Rails Girls workshop in your area and follow these guides."
---

<div class="guides-intro columns">
  <div class="column column-60">
    <h1>Rails Girls Guides</h1>
    <p>These guides are built to provide tools and a community for women to understand technology and how to build their ideas. Organize your own events, submit new guides, or just use them to learn Rails. For more, add yourself to the <a href="http://groups.google.com/group/rails-girls-team">team mailing list</a>.</p>
    <p>Want to learn more about <a href="http://railsgirls.com">Rails Girls events?</a></p>
    <p><em>Are you a coach or looking to organize a workshop? Have a look at the <a href="#guides-guides">Guides about Rails Girls</a>.</em></p>

    <div class="workshop-image"></div>
  </div>

  <div class="column column-40">
    <h2>Guides in other languages</h2>
    <ul>
      <li><a href="https://railsgirls.jp/">Guides in Japanese</a></li>
      <li><a href="https://railspremierspas.humancoders.com/">Guides in French</a></li>
      <li><a href="https://rgcn.github.io">Guides in Chinese</a></li>
      <li><a href="https://rgua.github.io">Guides in Russian</a></li>
      <li><a href="https://guides.railsgirls.com/guides-ptbr/">Guides in Brazilian-Portuguese</a></li>
      <li><a href="https://railsgirlslima.github.io/">Guides in Spanish</a></li>
      <li><a href="https://railsgirls.tw/">Guides in Traditional Chinese</a></li>
      <li><a href="https://railsgirlshh.github.io/">Guides in German</a></li>
      <li><a href="http://railsgirls.rug.lviv.ua/">Guides in Ukrainian</a></li>
    </ul>
  </div>
</div>

<h2 id="guides">Welcome to Rails Girls!</h2>
<p>These are the main Rails Girls workshop guides. Start here and follow the guides in order.</p>
<ul class="guides-list">
  <li>
    <a href="/start">
      <span class="guide-icon" data-icon="1"></span>
      <h3>Start of the guide</h3>
    </a>
    <p>Start with the Rails Girls guides here!</p>
  </li>

  <li>
    <a href="/tools">
      <span class="guide-icon" data-icon="2"></span>
      <h3>Get to know the tools</h3>
    </a>
    <p>Learn which tools we'll be using during the workshop and where to find them.</p>
  </li>

  <li>
    <a href="/install">
      <span class="guide-icon" data-icon="3"></span>
      <h3>Guide to Install Rails</h3>
    </a>
    <p>To build apps and other things with Ruby on Rails, we need to setup some software and a developer environment for your computer (macOS, Windows, Linux).</p>
  </li>

  <li>
    <a href="/app">
      <span class="guide-icon" data-icon="4"></span>
      <h3>Build Your First App</h3>
    </a>
    <p>Guide to building your first app with Ruby on Rails.</p>
  </li>

  <li>
    <a href="/html-and-css">
      <span class="guide-icon" data-icon="5"></span>
      <h3>Style your app using HTML and CSS</h3>
    </a>
    <p>Improve the design of your newly built app with HTML and CSS.</p>
  </li>

  <li>
    <a href="/new-page">
      <span class="guide-icon" data-icon="6"></span>
      <h3>Add a new page to your app</h3>
    </a>
    <p>Add more pages to your app with your own content.</p>
  </li>

  <li>
    <a href="/new-homepage">
      <span class="guide-icon" data-icon="7"></span>
      <h3>Add a new homepage to your app</h3>
    </a>
    <p>Customize the homepage of your app.</p>
  </li>

  <li>
    <a href="/uploads">
      <span class="guide-icon" data-icon="8"></span>
      <h3>Add picture uploads</h3>
    </a>
    <p>Make your ideas more visual with picture uploads.</p>
  </li>

  <li>
    <a href="/github">
      <span class="guide-icon" data-icon="9"></span>
      <h3>Push Your App to GitHub</h3>
    </a>
    <p>Push your code to GitHub to give people access to it.</p>
  </li>

  <li>
    <a href="/deployment">
      <span class="guide-icon" data-icon="10"></span>
      <h3>Put Your App Online</h3>
    </a>
    <p>
      Instructions to get your app running on the internet. We have a lot of platforms to choose from:<br>
      <a href="/deployment/fly-io">Fly.io</a> | <a href="digitalocean">DigitalOcean</a> | <a href="heroku">Heroku</a> | <a href="openshift">OpenShift</a> | <a href="engineyard">Engine Yard</a> | <a href="anynines">anynines</a>
    </p>
  </li>

  <li>
    <a href="/design">
      <span class="guide-icon" data-icon="11"></span>
      <h3>Style the idea pages using HTML and CSS</h3>
    </a>
    <p>Let's add some design to make it look like a professional website.</p>
  </li>

  <li>
    <a href="/commenting">
      <span class="guide-icon" data-icon="12"></span>
      <h3>Add comments to your app</h3>
    </a>
    <p>Add comments to your your app by allowing people to leave message.</p>
  </li>

  <li>
    <a href="/thumbnails">
      <span class="guide-icon" data-icon="13"></span>
      <h3>Create picture thumbnails</h3>
    </a>
    <p>Instructions on resizing your images using Carrierwave.</p>
  </li>

  <li>
    <a href="/testing-rspec">
      <span class="guide-icon" data-icon="14"></span>
      <h3>Test your application with RSpec</h3>
    </a>
    <p>Make sure your app works like expected by writing tests that can run automatically.</p>
  </li>
</ul>

<h2 id="other-guides">Learn even more</h2>
<p>Learn more topics with these Rails Girls guides. These are not in any particular order. Choose a guide that sounds interesting and try it out!</p>
<ul class="guides-list">
  <li>
    <a href="/ruby-intro">
      <span class="guide-icon guide-icon-other"></span>
      <h3>Introduction to Ruby</h3>
    </a>
    <p>Learn how the Ruby language looks and works. Read this if you don't know how Ruby works yet.</p>
  </li>

  <li>
    <a href="/devise">
      <span class="guide-icon guide-icon-other"></span>
      <h3>Add Authentication with Devise</h3>
    </a>
    <p>How to quickly add a login and signup with Devise</p>
  </li>

  <li>
    <a href="/gravatar">
      <span class="guide-icon guide-icon-other"></span>
      <h3>Add Profile Pics with Gravatar</h3>
    </a>
    <p>How to give your users profile photos</p>
  </li>

  <li>
    <a href="sinatra-app">
      <span class="guide-icon guide-icon-other"></span>
      <h3>Build a voting app in Sinatra</h3>
    </a>
    <p>Guide to building your first app using the Sinatra framework</p>
  </li>

  <li>
    <a href="diary-app">
      <span class="guide-icon guide-icon-other"></span>
      <h3>Build a diary app in Ruby on Rails</h3>
    </a>
    <p>Guide to building your first app using Ruby on Rails</p>
  </li>

  <li>
    <a href="backend-with-active-admin">
      <span class="guide-icon guide-icon-other"></span>
      <h3>Add a back-end to your app (admin pages)</h3>
    </a>
    <p>Guide to how you can add an admin back-end to manage your app with Active Admin</p>
  </li>

  <li>
    <a href="ruby-game">
      <span class="guide-icon guide-icon-other"></span>
      <h3>Write a little game in Ruby!</h3>
    </a>
    <p>Guide of Instructions for a game development with Ruby.</p>
  </li>

  <li>
    <a href="sinatra">
      <span class="guide-icon guide-icon-other"></span>
      <h3>Web Fundamentals Tutorial</h3>
    </a>
    <p>Get a deeper understanding of what's going on under the hood</p>
  </li>

  <li>
    <a href="test-driven-development">
      <span class="guide-icon guide-icon-other"></span>
      <h3>Test Driven Development</h3>
    </a>
    <p>Practice your Ruby skills while learning TDD</p>
  </li>

  <li>
    <a href="testing-shoulda-matchers">
      <span class="guide-icon guide-icon-other"></span>
      <h3>Simplifying tests with Shoulda Matchers</h3>
    </a>
    <p>Simplify your RSpec tests with Shoulda matchers.</p>
  </li>

  <li>
    <a href="ruby-atm">
      <span class="guide-icon guide-icon-other"></span>
      <h3>Ruby ATM</h3>
    </a>
    <p>Focus on your Ruby skills - level 2!</p>
  </li>

  <li>
    <span class="guide-icon guide-icon-other"></span>
    <h3>Deployment (archive)</h3>
    <p>
      - <a href="continuous-travis">CD with Travis (and anynines)</a><br>
      - <a href="continuous">CD with Codeship (and Heroku)</a><br>
      - <a href="passenger">Prepare your app for deployment with Phusion Passenger</a><br>
    </p>
  </li>

  <li>
    <a href="touristic-autism_intro">
      <span class="guide-icon guide-icon-other"></span>
      <h3>Touristic Autism-friendly Spots App</h3>
    </a>
    <p>Allow authenticated users (using devise) to describe touristic places, comment and rate them from their autism-friendliness. To support autistic adults during their travelling.</p>
  </li>
</ul>

<h2>Let's have more fun with Rails Girls</h2>
<ul class="guides-list">
  <li>
    <a href="how-to-continue-with-programming">
      <span class="guide-icon guide-icon-other"></span>
      <h3>After The Event: How to Continue with Programming</h3>
    </a>
    <p>A guide to keep you going with learning how to program.</p>
  </li>

  <li>
    <a href="remote">
      <span class="guide-icon guide-icon-other"></span>
      <h3>Remote Pairing for the win!</h3>
    </a>
    <p>Even if you can't find help locally, someone can still help you over the Internet.</p>
  </li>
</ul>

<h2 id="guides-guides">Guides about Rails Girls itself</h2>
<ul class="guides-list">
  <li>
    <a href="/guide">
      <span class="guide-icon guide-icon-meta"></span>
      <h3>How to Organize a Rails Girls Event</h3>
    </a>
    <p>This guide has been put together to help you get started organizing your first Rails Girls event.</p>
  </li>

  <li>
    <a href="/coach">
      <span class="guide-icon guide-icon-meta"></span>
      <h3>Become a Rails Girls Coach</h3>
    </a>
    <p>Answers to all your questions about being a Rails Girls coach - in one place.</p>
  </li>

  <li>
    <a href="guide-to-the-guide">
      <span class="guide-icon guide-icon-meta"></span>
      <h3>Guide to the Guide of Rails Girls</h3>
    </a>
    <p>Guide of background information about the Rails application.</p>
  </li>

  <li>
    <a href="/contributing">
      <span class="guide-icon guide-icon-meta"></span>
      <h3>Submit Your Own Guide</h3>
    </a>
    <p>We are accepting guides to extend the application to our GitHub repository.</p>
  </li>
</ul>