One-stop Ruby on Rails: Build Web Applications from Scratch

Master Ruby on Rails, HTML, CSS, APIs, and other web technologies by building Etsy, Yelp, and Craigslist from scratch.
4.6 (116 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
1,315 students enrolled
$19
$145
87% off
Take This Course
  • Lectures 129
  • Length 18.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 1/2015 English

Course Description

Project based learning is the most effective type of learning.

Whether you're learning to code to become a web developer, or just looking to prototype your MVP, we believe working on projects is the most effective way to learn. Instead of being taught theory, you’ll learn by building working applications. You understand the big picture concepts before filling in the details. You learn to build apps the way developers do — one feature at a time.

Most people feel demotivated when they take traditional programming classes, but with our course, you’ll make rapid progress on your projects so you always stay engaged. Along the way, you learn in-demand tech skills through practice and solving problems with available resources, not through brute memorization.

Our course walks you through building four comprehensive web applications you will launch live on the web including:

1) A restaurant review site for people to browse and rate local eateries:

Admin users can add new restaurants while signed in users can leave star ratings with a review. Anyone can search through the listings index for specific restaurants.

2) A two-sided marketplace for buyers and sellers:

Sellers will be able to upload listings with images, manage their inventory through a dashboard, and charge credit cards with the Stripe API. You'll learn how to take a small percentage cut of each transaction and transfer payments to your sellers.

3) A web scraper to collect data:

Access a webpage's HTML and identify proper selectors for parsing through data. Write a script in the Ruby programming language to scrape Wikipedia and Airbnb and export the information into a database.

4) Apartment Rental Site like Craigslist:

Gather data through an API and use that data to build a custom Ruby on Rails web app. You'll write a script in the Ruby programming language to collect and process the data you receive, then save the information to a database, and build a front-end interface for users to interact with it. By the end of the course, you'll have learned to automate the data collection process and have an app that's live on Heroku.

5) Bonus Feature videos:

Learn how to code your site in multiple lanugages, add social media features, and more with a series of bonus features to feature customize your app.

Web development topics covered:

  • Ruby on Rails
  • HTML and CSS
  • jQuery
  • JSON
  • Bootstrap
  • Coffeescript
  • Stripe API
  • Google Maps API
  • Git and Github
  • Heroku

Web scraping topics covered:

  • Data scraping
  • SQlite
  • CSV databases
  • Data analysis
  • Data scraping
  • Data cleaning
  • Parsing data files
  • CSV databases
  • Script automation

By the end of this course, your web applications will be ready for real users and you can start collecting payments through Stripe immediately. You'll have the skills, experience, and portfolio to get a job as a web developer or build out any idea of your own.

[Note: This is the BaseRails bundler pack of four projects included in this one course. You may start with any project as each course is self-contained.]

What are the requirements?

  • Specific software will be introduced in the course along with installation and setup instructions.
  • All software used in this course is open sourced and free.
  • No prior experience needed

What am I going to get from this course?

  • Prototype any MVP for a web app
  • Install and setup Ruby on Rails
  • Create new web applications in Ruby on Rails and launch it live on the web
  • Style websites with front-end tools like CSS, Javascript, and Bootstrap
  • Scrape data from any website and store it in a database
  • Write Ruby scripts to automate tasks
  • Parse, clean, and analyze data
  • Read technical documentation including Ruby gems and web tools
  • Master Github and Heroku
  • Learn to work and code in the command line
  • Add Google Maps integration with API
  • Work within the Rails console to manipulate data
  • Add online payments and bank transfers using the Stripe API
  • Host images with Amazon S3 or Dropbox and embed images on any site
  • Implement multiple types of user accounts and login

What is the target audience?

  • This course is for entreprenurial-minded people who want to learn to build web applications for their ideas.
  • This course is for people who want to learn Ruby on Rails for building web applications.
  • This course is for data enthusiasts who want a general introduction into using Ruby and APIs to scrape data on the web and build a web application around real time data.
  • This course is for hackers who want to learn to prototype MVPs of any idea quickly and effectively.
  • This course is for anyone working in technology who wants to know how products are built.
  • This course is for people who want a project-based approach to learning how to code.
  • This course is for people who want to code an online marketplace, an apartment rental site, or a reviews site.
  • This course in NOT for you if you want to become a software engineer and learn programming syntax and theory from the ground up.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Build a Reviews and Ratings Aggregator like Yelp: Get started
Course Introduction
Preview
02:30
06:08

Install the latest versions of Ruby on Rails, Xcode, iTerm2, Homebrew, Git, and Sublime Text on your Mac computer. Set up a shortcut to launch Sublime Text from your terminal.

03:35

Install the latest versions of Ruby on Rails and Sublime Text on your computer. Launch your terminal with Git Bash and set up a shortcut to launch Sublime Text from your command line.

Section 2: Create our Website
05:27

Learn common terminal commands and create a new app Rails. Launch your Rails server and explore localhost:3000 to see your new app.

06:54

Generate a Pages controller in Rails and create an "About" and "Contact" page for your app. Add content to your pages with HTML

08:08

Add links for the "About" and "Contact" URLs and learn how to create links to external sites. Organize common code into a single location in the Application Layout file to decrease code redundancy.

05:03

Learn the three-step process for generating migration in Rails. Create a Restaurants database with name, address, phone, and website fields.

03:40

Replace the default Rails homepage with the Restaurant Index page that you generated. Use 'rake routes' to find which routes to use for existing URLs.

Section 3: Get Started with Bootstrap
05:08

Install a front-end tool called Bootstrap through the Bootstrap CDN method. Add the table class to the Restaurant Index page and layer additional options on top.

06:16

Learn to work with Bootstrap by reading the documentation on their site. Use Bootstrap to add a navigation bar and add the "About" and "Contact" links.

06:18

It's best practice to simplify code files for readability and debugging. Learn how partials and embedded Ruby work to create a navbar, footer, and Bootstrap partial to store our code.

13:10

Use Bootstrap classes with embedded Ruby code to add better spacing and design to our Restaurant forms. Wrap your pages in a fluid-container for a responsive layout.

Section 4: Launch our Site
05:55

Save your code using a version control system called Git, then create a new Github account to save your code online in a repository. Generate a new SSH key to authenticate your account on your computer.

06:31

Learn how to commit and push your code to Github. Start by creating a new repository on Github for your app. Learn the four commands you need to run each time you save your code to Github.

12:26

Learn how to launch your app live on the web by hosting it for free on Heroku. Set up Heroku for the production and development environments on your computer and launch your app live on the web for the first time.

Section 5: Add Images
09:55

Add images to your Restaurants pages with the Carrierwave gem. Add a new column to your Restaurants database to store images and a file_field helper to upload images in your New Restaurant form. Use strong parameters to tell Rails that your image form field is safe.

09:19

Use the Fog gem to link Carrierwave with Amazon S3, where we'll set up image hosting service to people can see your images live on the web. Store localhost images on your local computer and Heroku images on Amazon S3.

07:34

Use the Figaro gem to pass your confidential Amazon S3 account information to Heroku without having it show up on GitHub for anyone to see.

06:15

Install ImageMagick and MiniMagick to use Carrierwave options to resize your images to a preset thumbnail width and height.

Section 6: Add Front-end Design
09:05

Create a homepage banner with Bootstrap's jumbotron class. Add a custom.css.scss file to write CSS code to format the background-color, border, and font inside the banner. Learn to use Google Chrome extensions to find specific web colors.

05:58

Use CSS to format the background color, links, and logo in the navigation bar. Use the padding property to push out some area around the content.

04:13

Download and save a static image to your Amazon S3 account and use Ruby code to embed it to your homepage.

Section 7: Add Users
09:07

Install and set up a popular gem called Devise to give our app the ability to have multiple user accounts. Verify that it works by signing up with an email and password.

16:13

Convert the HTML links into embedded Ruby with the link_to Rails helper. Learn to use the command 'rake routes' to find which routes to use for creating new URLs. Add the "Sign up", "Sign in", and "Sign out" links to our navigation bar. Learn how to add conditional links so different users see different links depending on whether they are signed in or not.

11:14

Improve the look and feel of the Devise forms for signing in and signing up. Use Bootstrap to add sleek buttons to the forms.

06:36

Add some custom Ruby and jQuery code to customize the Devise alert and error messages when users don't fill in the form properly. Use iQuery to add a close button to the messages.

Section 8: Add Reviews Part 1
08:51

Create a Reviews database by understand how the 'Rails generate scaffold' command works and how Creating, Reading, Updating, and Deleting (CRUD) are the available four actions for any resource. Get a sense for how Models Views Controller works for the Reviews database.

09:44

Generate a migration to add a new column in the Reviews database to track the User ID that each Review belongs to. Tell Rails how the Users and Reviews databases are linked.

05:21

Learn how to use the Rails Console to assign a User for every Review in the database. Modify existing localhost and Heroku data.

06:06

Customize the default scaffold URLs to include only the ones that you need. Delete the View pages, disable routes that point to those URLs, and redirect your links to different pages.

Section 9: Add Reviews Part 2
10:55

Generate a migration to add a new column in the Reviews database to track the Restaurant ID that each Review belongs to. Tell Rails how the Restaurants and Reviews databases are linked. Nest the Restaurant ID in the URL and use Rails Console to figure out specific Restaurant IDs on Heroku.

07:51

Use 'rake routes' to create proper links for each individual restaurant, the 'Edit Review' page, and a "Write a Review" link.

09:11

Display the specific reviews for each Restaurant on its own page. Use Bootstrap's grid layout to format the page into two columns.

Section 10: Add Star Ratings
08:01

Download and set up the jQuery Raty plugin to convert numerical ratings to star ratings.

10:23

Calculate an average star rating for each Restaurant and display it on the Restaurant's Show page along with the total number of reviews written. For each Review written, turn raw text into HTML and display the reviews in reverse chronological order.

Section 11: Set Validations and Permissions
10:45

Distinguish between Admin users and normal users by disabling the ability for normal users to create a new Restaurant page. Add a first and last name field to the 'Sign Up' page and tell Rails that those new fields are safe.

05:29

Display the User's first name and last initial for each Review. Add the date that each Review was written.

17:50

Validate that the data users are submitting is valid by learning about regular expressions and how to convey the character pattern to verify if data is in the appropriate format.

13:26

Set different authorizations for signed in and signed out users, admin and regular users, and different actions users can take depending on whether a review was written by them.

Section 12: Add Bells and Whistles
08:15

Use the Google Maps API to embed a dynamic map of a specific location for each Restaurant. Zoom in and out and customize the default zoom.

13:18

Install the Searchkick gem for localhost and Heroku and load it with the restaurants in the database. Create a new URL for the page showing the search results displayed in a table.

Course Summary
01:58
Section 13: Build a Two-sided Marketplace Like Etsy: Get Started
Course Introduction
Preview
03:02
05:13

Learn common terminal commands and create a new app Rails. Launch your Rails server and explore localhost:3000 to see your new app.

06:26

Generate static pages in Rails by creating an "About" and "Contact" page for your app. Add content to your pages with HTML.

06:40

Add links for the "About" and "Contact" URLs. Organize common code into a single location in the Application Layout file to decrease redundancy.

09:49

Learn the 3-step process for generating migrations. Create a page with the ability to add new product listings with a name, description, and price field. Set the homepage to be the new Listings Index page.

Section 14: Add Front-end Design
06:17

Learn how to use gems to add prepackaged features to your site. You'll install the Bootstrap gem and set it up properly for usage.

08:45

Learn to work with Bootstrap by reading the documentation on their site. Use Bootstrap to add a navigation bar and add the "About" and "Contact" links.

05:09

It's best practice to simplify code files for readability and debugging. Learn how partials and embedded Ruby work to clean up the header and footer files.

12:46

Use Bootstrap classes to add better spacing and design to the New Listing form and Edit Listing form. Add a variety of Bootstrap buttons on each page.

Section 15: Update Listings with Images
04:40

Install the Paperclip and ImageMagick gem by reading and implementing the documentation for both Mac and Windows computers.

13:49

Generate a migration to add images to the listings database. Learn to authorize images so they can be sent in the forms, update the forms to give users the ability to upload an image, and display the image in the Index and Show pages for each listing.

15:36

Use the Bootstrap grid system to split the screen into different-sized columns. Organize your listings as thumbnails in four columns on the Index page. Learn how to display numbers as currency.

16:27

Learn how to use CSS with Bootstrap by creating a custom.css.scss file. Customize your app's background-color, font color, and font-family with CSS. Use a Google Chrome extension to find specific web colors to use. Learn how the nth-child CSS selector can identify specific listings to align.

Section 16: Save Our Progress
05:58

Create a new Github account to save your code online in a repository. Generate a new SSH key to authenticate your account on your computer.

07:45

Learn how to commit and push your code to Github. Start by creating a new repository on Github for your app. Learn the four commands you need to run each time you save your code to Github.

08:22

Learn how to launch your app live on the web by hosting it for free on Heroku. Set up Heroku for the production and development environments on your computer and launch your app live on the web for the first time.

Section 17: Host Images Online
13:22

Use Dropbox to host your images online for others to see and use the Paperclip-dropbox gem to upload our files. Install Dropbox on your computer and store your account information in a dropbox.yml file.

11:53

Protect your sensitive account information in your code by storing your information in a gem called Figaro.

04:46

Configure separate settings in Dropbox for Heroku (production environment) and localhost (development environment) so that images you upload on localhost won't get sent to Github.

Section 18: Add Users
08:11

Install and set up a popular gem called Devise to give our app the ability to have multiple user accounts. Verify that it works by signing up with an email and password.

15:34

Learn to use the command 'rake routes' to find which routes to use for creating new URLs. Add a "Sign up", "Sign in", and "Sign out" button to our navigation bar. Learn how to add conditional links so different users see different links depending on whether they are signed in or not.

19:32

Improve the look and feel of the Devise forms for signing in and signing up. Add some custom Ruby code to customize the Devise alert messages when users don't fill in the form properly.

09:59

Allow users to sign up with their first and last name in addition to their email by generating a new migration to add two new fields to the User database.

14:27

Learn how to use validations in the Models files to verify that the user-submitted data satisfies certain criteria such as filling in form fields, uploading images, and inputting prices greater than $0.

Section 19: Connect Users to Listings
19:12

Link Listings with Users in the Controller file so that the Listing database can track the User that each Listing belongs to. Learn how Models, Views, Controllers work together in Rails to create an app.

14:06

Add authorizations to control the pages and URLs that each user is allowed to see. Allow users to only edit and delete listings created with their own account once they are signed in.

11:42

Create individual Seller pages that show only the listings each seller has uploaded. First add a new URL in the config/routes file, then update the Controller about this new action, and finally, create a View page for users to see when they visit the new seller URL.

Redesign the Seller Page
12:23
09:20

Create a homepage banner with Bootstrap's jumbotron class and add a custom image and text in the banner.

Section 20: Place Orders
10:16

Create a new migration for an Orders database that tracks the address of the buyer. Identify and link the relationship between the Order, Listing, and User databases through unique Listing, Buyer, and Seller IDs.

16:27

Tell Rails how to fill out the information for the columns in the Order database by using the unique IDs of the currently signed in User who is placing the order, the Seller ID, and the Listing ID in the URL.

10:33

Create two separate pages for Users to view their past purchases and past sales. Showcase the information in a formatted table with image, item name, price, and date.

07:44

Create Dropdown menus in the navigation bar with URLs for "Purchase History" and "Manage Listings". Disable a user's ability to edit their Order histories.

Section 21: Accept Payments
07:25

Accept money from users by using the Stripe API to accept online credit card payments. Add your sensitive Stripe keys to the Figaro gem.

11:38

Update the Order form with form fields for users to input their credit card information. Display your form with the Bootstrap grid system.

09:42

Use Coffeescript to check the user's credit card information, let the User know if there were any issues they need to correct, and let the form submit once the credit card data is valid.

13:48

Once Stripe returns a valid token, write the code to charge a user's credit card. Verify that the payment went through in your Stripe dashboard.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Alex Yang, Hacker and Instructor at BaseRails

Alex graduated from Harvard with a degree in Applied Math and spent two years at the Boston Consulting Group in New York.

He was always interested in the tech space and eventually decided to quit his job to become an entrepreneur. He taught himself to code to prototype his business ideas, but the process of wading through coding exercises, one-off videos, and programming books was slow and ineffective.

He created this course to save others the time and hassle he went through when learning to build web apps. Currently, he works on BaseRails and develops curriculum for Codecademy to teach little kids how to program.

Ready to start learning?
Take This Course