Skip to content

Initial layout on tutorial page #518

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 51 additions & 25 deletions _pages/docs.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@
<div class="heading__body">
<div class="heading__headline common-headline">
<h1>
Everything you need<br> to get building.
Everything you need<br />
to get building.
</h1>
</div>
</div>
Expand All @@ -23,7 +24,10 @@ <h1>
<h2 class="thin">Get Started</h2>
<div class="cards__container">
<div class="card">
<a href="https://guides.rubyonrails.org/install_ruby_on_rails.html" title="Install Ruby on Rails">
<a
href="https://guides.rubyonrails.org/install_ruby_on_rails.html"
title="Install Ruby on Rails"
>
<div class="card__body">
<div class="card__label">
<h6>Installation</h6>
Expand All @@ -34,14 +38,17 @@ <h3>Download Rails</h3>
</div>

<div class="card__content">
<p>Get Rails installed and set up on your system&mdash;Windows, macOS, or Linux.</p>
<p>
Get Rails installed and set up on your system&mdash;Windows,
macOS, or Linux.
</p>
</div>
</div>
</a>
</div>

<div class="card">
<a href="https://guides.rubyonrails.org/getting_started.html" title="The Rails Tutorial">
<a href="/docs/tutorials" title="Ruby on Rails Tutorials">
<div class="card__body">
<div class="card__label">
<h6>Education</h6>
Expand All @@ -52,14 +59,20 @@ <h3>Follow a tutorial</h3>
</div>

<div class="card__content">
<p>Build an app and learn the basics of Rails with a hands-on, step-by-step tutorial.</p>
<p>
Build an app and learn the basics of Rails with hands-on,
step-by-step tutorials.
</p>
</div>
</div>
</a>
</div>

<div class="card">
<a href="https://guides.rubyonrails.org/" title="The Ruby on Rails Guides">
<a
href="https://guides.rubyonrails.org/"
title="The Ruby on Rails Guides"
>
<div class="card__body">
<div class="card__label">
<h6>Level Up</h6>
Expand All @@ -70,7 +83,10 @@ <h3>Read the guides</h3>
</div>

<div class="card__content">
<p>Explore in-depth guides covering essential Rails features and built-in libraries.</p>
<p>
Explore in-depth guides covering essential Rails features and
built-in libraries.
</p>
</div>
</div>
</a>
Expand All @@ -90,7 +106,10 @@ <h3>The API Documentation</h3>
</div>

<div class="card__content">
<p>The full framework reference, from A to Z for every piece of Rails.</p>
<p>
The full framework reference, from A to Z for every piece of
Rails.
</p>
</div>
</div>
</a>
Expand All @@ -115,7 +134,10 @@ <h3>Join the conversation</h3>
</div>

<div class="card">
<a href="https://guides.rubyonrails.org/contributing_to_ruby_on_rails.html" title="Contribute to Rails">
<a
href="https://guides.rubyonrails.org/contributing_to_ruby_on_rails.html"
title="Contribute to Rails"
>
<div class="card__body">
<div class="card__label">
<h6>Get Involved</h6>
Expand All @@ -126,7 +148,10 @@ <h3>Contribute to Rails</h3>
</div>

<div class="card__content">
<p>Report issues, review code, or submit updates to the open source Rails project.</p>
<p>
Report issues, review code, or submit updates to the open source
Rails project.
</p>
</div>
</div>
</a>
Expand All @@ -141,22 +166,22 @@ <h3>Contribute to Rails</h3>
<div class="text__content common-content">
<h2 class="how">How did they do it?</h2>
<p class="how-leadin">
See how some of the most successful online products used
Rails to launch, scale, and thrive in a competitive world.
Read these case studies to learn more:
See how some of the most successful online products used Rails to
launch, scale, and thrive in a competitive world. Read these case
studies to learn more:
</p>

<ul class="case-studies">
<li class="case-study">
<a href="/docs/case-studies/doximity">
<img src="/assets/images/logo-doximity.svg" alt="Doximity">
<img src="/assets/images/logo-doximity.svg" alt="Doximity" />
</a>
</li>
</ul>

<p class="how-leadin">
More stories coming soon, but for now here's some of our friends
who have used Rails to take their products from zero to enterprise:
More stories coming soon, but for now here's some of our friends who
have used Rails to take their products from zero to enterprise:
</p>

<ul class="use-rails">
Expand Down Expand Up @@ -207,7 +232,10 @@ <h2 class="how">How did they do it?</h2>
</li>
<li class="use-rails__item">
<a href="https://kickstarter.com" aria-label="Kickstarter">
<img src="/assets/images/logo-kickstarter.svg" alt="Kickstarter" />
<img
src="/assets/images/logo-kickstarter.svg"
alt="Kickstarter"
/>
</a>
</li>
<li class="use-rails__item">
Expand Down Expand Up @@ -242,27 +270,25 @@ <h2 class="how">How did they do it?</h2>
</li>
<li class="use-rails__item">
<a href="https://www.freeagent.com/" aria-label="FreeAgent">
<img src="/assets/images/logo-freeagent.svg" alt="FreeAgent" />
</a>
<img src="/assets/images/logo-freeagent.svg" alt="FreeAgent" />
</a>
</li>
<li class="use-rails__item">
<a href="https://coinbase.com" aria-label="Coinbase">
<img src="/assets/images/logo-coinbase.svg" alt="Coinbase" />
<img src="/assets/images/logo-coinbase.svg" alt="Coinbase" />
</a>
</li>
<li class="use-rails__item">
<a href="https://www.procore.com" aria-label="Procore">
<img src="/assets/images/logo-procore.svg" alt="Procore" />
</a>
<img src="/assets/images/logo-procore.svg" alt="Procore" />
</a>
</li>
<li class="use-rails__item">
<a href="https://www.appsignal.com/" aria-label="AppSignal">
<img src="/assets/images/logo-appsignal.svg" alt="AppSignal" />
<img src="/assets/images/logo-appsignal.svg" alt="AppSignal" />
</a>
</li>
</ul>


</div>
</div>
</div>
Expand Down
159 changes: 159 additions & 0 deletions _pages/tutorial.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,159 @@
---
title: "Ruby on Rails Tutorials"
description: "Ruby on Rails Tutorials"
permalink: /docs/tutorials
redirect_from:
- /docs/tutorials/
---

<div class="docs heading common-padding--bottom common-padding--top-small">
<div class="container">
<div class="heading__body">
<div class="heading__headline common-headline">
<p class="breadcrumb">
<a href="/docs">« Back to Docs</a>
</p>
<h1>Tutorials for<br />All Levels</h1>
</div>
</div>
</div>
</div>

<div class="docs cards common-padding--bottom-small padfix">
<div class="container">
<h2 class="thin">Beginner</h2>

<p>
Build an e-commerce app and learn the basics of Rails with this in-depth,
hands-on, step-by-step tutorial. If you have no prior knowledge of Rails,
this is a great place to start.
</p>

<div class="cards__container card__fullwidth">
<div class="card">
<a
href="https://guides.rubyonrails.org/install_ruby_on_rails.html"
title="Create a Store with Ruby on Rails"
>
<div class="card__body">
<img
src="/assets/images/tutorial-store.jpg"
alt="A screen showing the store on the left and a code editor on the right."
height="645"
width="363"
/>
<div>
<div class="card__headline">
<h3>Create a Store</h3>
</div>

<div class="card__content">
<p>In this guide, you'll learn:</p>
<ul>
<li>Rails Philosophy</li>
<li>MVC Architecture</li>
<li>Active Record Basics</li>
<li>Routes</li>
<li>Controllers & Actions</li>
<li>And much more</li>
</ul>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>

<div class="docs cards common-padding--bottom-small">
<div class="container">
<h2 class="thin">Advanced</h2>

<p>
Continue learning Rails with focused tutorials adding features to the
e-commerce app you created above.
</p>

<div class="cards__container">
<div class="card">
<a
href="https://guides.rubyonrails.org/install_ruby_on_rails.html"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
href="https://guides.rubyonrails.org/install_ruby_on_rails.html"
href="https://guides.rubyonrails.org/sign_up_and_settings.html"

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just heard from @fxn that there is a redirect in place where we can use the Guides URL even if the guide only exists on edge.

title="Expand your store with sign up and settings features"
>
<div class="card__body">
<div class="card__headline">
<h3>Sign Up & Settings</h3>
</div>

<div class="card__content">
<p>
Allow your users to sign up and edit their profile, and create
admins for your store.
</p>
</div>
</div>
</a>
</div>
<div class="card card__coming-soon">
<a
href="https://guides.rubyonrails.org/install_ruby_on_rails.html"
title="Install Ruby on Rails"
>
<div class="card__body">
<div class="card__headline">
<h3>User Wishlists</h3>
</div>

<div class="card__content">
<p>
Save products for later, share the list for a birthday or
holiday, and more.
</p>
</div>
<div class="card__label">
<h6>Coming Soon</h6>
</div>
</div>
</a>
</div>
<div class="card card__coming-soon">
<a
href="https://guides.rubyonrails.org/install_ruby_on_rails.html"
title="Install Ruby on Rails"
>
<div class="card__body">
<div class="card__headline">
<h3>Product Reviews</h3>
</div>

<div class="card__content">
<p>Allow people to rate and review the products that you sell.</p>
</div>
<div class="card__label">
<h6>Coming Soon</h6>
</div>
</div>
</a>
</div>
</div>
</div>
</div>

<div class="docs text common-padding--bottom">
<div class="container">
<div class="text__body">
<div class="text__content common-content">
<h2 class="how">More in the Pipeline</h2>
<p class="how-leadin">
This tutorial series will expand to add more features so you can learn
Rails. Have something you’d like us to cover?
<a
href="https://app.todohelpers.com/forms/4758b5b0-d6f9-4f41-8041-992cc9b748fb"
>Let us know.</a
>
</p>
</div>
</div>
</div>
</div>
Loading