Skip to content

Commit 5691032

Browse files
jathaydeAmandaPerino
jathayde
and
AmandaPerino
authored
Initial layout on tutorial page (#518)
* Initial layout on tutorial page * Small word change * Update tutorial.html * Fixing extra white space on main feature block * Alternate image for store tutorial block * Cleaning up screenshot * Working on responsive style issues for fullwidth card * Updating URL to plural (tutorial => tutorials) * Styling on full width card improved for desktop and mobile --------- Co-authored-by: Amanda Perino <[email protected]>
1 parent 6777a7f commit 5691032

File tree

5 files changed

+562
-96
lines changed

5 files changed

+562
-96
lines changed

‎_pages/docs.html

Lines changed: 51 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@
1111
<div class="heading__body">
1212
<div class="heading__headline common-headline">
1313
<h1>
14-
Everything you need<br> to get building.
14+
Everything you need<br />
15+
to get building.
1516
</h1>
1617
</div>
1718
</div>
@@ -23,7 +24,10 @@ <h1>
2324
<h2 class="thin">Get Started</h2>
2425
<div class="cards__container">
2526
<div class="card">
26-
<a href="https://guides.rubyonrails.org/install_ruby_on_rails.html" title="Install Ruby on Rails">
27+
<a
28+
href="https://guides.rubyonrails.org/install_ruby_on_rails.html"
29+
title="Install Ruby on Rails"
30+
>
2731
<div class="card__body">
2832
<div class="card__label">
2933
<h6>Installation</h6>
@@ -34,14 +38,17 @@ <h3>Download Rails</h3>
3438
</div>
3539

3640
<div class="card__content">
37-
<p>Get Rails installed and set up on your system&mdash;Windows, macOS, or Linux.</p>
41+
<p>
42+
Get Rails installed and set up on your system&mdash;Windows,
43+
macOS, or Linux.
44+
</p>
3845
</div>
3946
</div>
4047
</a>
4148
</div>
4249

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

5461
<div class="card__content">
55-
<p>Build an app and learn the basics of Rails with a hands-on, step-by-step tutorial.</p>
62+
<p>
63+
Build an app and learn the basics of Rails with hands-on,
64+
step-by-step tutorials.
65+
</p>
5666
</div>
5767
</div>
5868
</a>
5969
</div>
6070

6171
<div class="card">
62-
<a href="https://guides.rubyonrails.org/" title="The Ruby on Rails Guides">
72+
<a
73+
href="https://guides.rubyonrails.org/"
74+
title="The Ruby on Rails Guides"
75+
>
6376
<div class="card__body">
6477
<div class="card__label">
6578
<h6>Level Up</h6>
@@ -70,7 +83,10 @@ <h3>Read the guides</h3>
7083
</div>
7184

7285
<div class="card__content">
73-
<p>Explore in-depth guides covering essential Rails features and built-in libraries.</p>
86+
<p>
87+
Explore in-depth guides covering essential Rails features and
88+
built-in libraries.
89+
</p>
7490
</div>
7591
</div>
7692
</a>
@@ -90,7 +106,10 @@ <h3>The API Documentation</h3>
90106
</div>
91107

92108
<div class="card__content">
93-
<p>The full framework reference, from A to Z for every piece of Rails.</p>
109+
<p>
110+
The full framework reference, from A to Z for every piece of
111+
Rails.
112+
</p>
94113
</div>
95114
</div>
96115
</a>
@@ -115,7 +134,10 @@ <h3>Join the conversation</h3>
115134
</div>
116135

117136
<div class="card">
118-
<a href="https://guides.rubyonrails.org/contributing_to_ruby_on_rails.html" title="Contribute to Rails">
137+
<a
138+
href="https://guides.rubyonrails.org/contributing_to_ruby_on_rails.html"
139+
title="Contribute to Rails"
140+
>
119141
<div class="card__body">
120142
<div class="card__label">
121143
<h6>Get Involved</h6>
@@ -126,7 +148,10 @@ <h3>Contribute to Rails</h3>
126148
</div>
127149

128150
<div class="card__content">
129-
<p>Report issues, review code, or submit updates to the open source Rails project.</p>
151+
<p>
152+
Report issues, review code, or submit updates to the open source
153+
Rails project.
154+
</p>
130155
</div>
131156
</div>
132157
</a>
@@ -141,22 +166,22 @@ <h3>Contribute to Rails</h3>
141166
<div class="text__content common-content">
142167
<h2 class="how">How did they do it?</h2>
143168
<p class="how-leadin">
144-
See how some of the most successful online products used
145-
Rails to launch, scale, and thrive in a competitive world.
146-
Read these case studies to learn more:
169+
See how some of the most successful online products used Rails to
170+
launch, scale, and thrive in a competitive world. Read these case
171+
studies to learn more:
147172
</p>
148173

149174
<ul class="case-studies">
150175
<li class="case-study">
151176
<a href="/docs/case-studies/doximity">
152-
<img src="/assets/images/logo-doximity.svg" alt="Doximity">
177+
<img src="/assets/images/logo-doximity.svg" alt="Doximity" />
153178
</a>
154179
</li>
155180
</ul>
156181

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

162187
<ul class="use-rails">
@@ -207,7 +232,10 @@ <h2 class="how">How did they do it?</h2>
207232
</li>
208233
<li class="use-rails__item">
209234
<a href="https://kickstarter.com" aria-label="Kickstarter">
210-
<img src="/assets/images/logo-kickstarter.svg" alt="Kickstarter" />
235+
<img
236+
src="/assets/images/logo-kickstarter.svg"
237+
alt="Kickstarter"
238+
/>
211239
</a>
212240
</li>
213241
<li class="use-rails__item">
@@ -242,27 +270,25 @@ <h2 class="how">How did they do it?</h2>
242270
</li>
243271
<li class="use-rails__item">
244272
<a href="https://www.freeagent.com/" aria-label="FreeAgent">
245-
<img src="/assets/images/logo-freeagent.svg" alt="FreeAgent" />
246-
</a>
273+
<img src="/assets/images/logo-freeagent.svg" alt="FreeAgent" />
274+
</a>
247275
</li>
248276
<li class="use-rails__item">
249277
<a href="https://coinbase.com" aria-label="Coinbase">
250-
<img src="/assets/images/logo-coinbase.svg" alt="Coinbase" />
278+
<img src="/assets/images/logo-coinbase.svg" alt="Coinbase" />
251279
</a>
252280
</li>
253281
<li class="use-rails__item">
254282
<a href="https://www.procore.com" aria-label="Procore">
255-
<img src="/assets/images/logo-procore.svg" alt="Procore" />
256-
</a>
283+
<img src="/assets/images/logo-procore.svg" alt="Procore" />
284+
</a>
257285
</li>
258286
<li class="use-rails__item">
259287
<a href="https://www.appsignal.com/" aria-label="AppSignal">
260-
<img src="/assets/images/logo-appsignal.svg" alt="AppSignal" />
288+
<img src="/assets/images/logo-appsignal.svg" alt="AppSignal" />
261289
</a>
262290
</li>
263291
</ul>
264-
265-
266292
</div>
267293
</div>
268294
</div>

‎_pages/tutorial.html

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
---
2+
title: "Ruby on Rails Tutorials"
3+
description: "Ruby on Rails Tutorials"
4+
permalink: /docs/tutorials
5+
redirect_from:
6+
- /docs/tutorials/
7+
---
8+
9+
<div class="docs heading common-padding--bottom common-padding--top-small">
10+
<div class="container">
11+
<div class="heading__body">
12+
<div class="heading__headline common-headline">
13+
<p class="breadcrumb">
14+
<a href="/docs">« Back to Docs</a>
15+
</p>
16+
<h1>Tutorials for<br />All Levels</h1>
17+
</div>
18+
</div>
19+
</div>
20+
</div>
21+
22+
<div class="docs cards common-padding--bottom-small padfix">
23+
<div class="container">
24+
<h2 class="thin">Beginner</h2>
25+
26+
<p>
27+
Build an e-commerce app and learn the basics of Rails with this in-depth,
28+
hands-on, step-by-step tutorial. If you have no prior knowledge of Rails,
29+
this is a great place to start.
30+
</p>
31+
32+
<div class="cards__container card__fullwidth">
33+
<div class="card">
34+
<a
35+
href="https://guides.rubyonrails.org/install_ruby_on_rails.html"
36+
title="Create a Store with Ruby on Rails"
37+
>
38+
<div class="card__body">
39+
<img
40+
src="/assets/images/tutorial-store.jpg"
41+
alt="A screen showing the store on the left and a code editor on the right."
42+
height="645"
43+
width="363"
44+
/>
45+
<div>
46+
<div class="card__headline">
47+
<h3>Create a Store</h3>
48+
</div>
49+
50+
<div class="card__content">
51+
<p>In this guide, you'll learn:</p>
52+
<ul>
53+
<li>Rails Philosophy</li>
54+
<li>MVC Architecture</li>
55+
<li>Active Record Basics</li>
56+
<li>Routes</li>
57+
<li>Controllers & Actions</li>
58+
<li>And much more</li>
59+
</ul>
60+
</div>
61+
</div>
62+
</div>
63+
</a>
64+
</div>
65+
</div>
66+
</div>
67+
</div>
68+
69+
<div class="docs cards common-padding--bottom-small">
70+
<div class="container">
71+
<h2 class="thin">Advanced</h2>
72+
73+
<p>
74+
Continue learning Rails with focused tutorials adding features to the
75+
e-commerce app you created above.
76+
</p>
77+
78+
<div class="cards__container">
79+
<div class="card">
80+
<a
81+
href="https://guides.rubyonrails.org/install_ruby_on_rails.html"
82+
title="Expand your store with sign up and settings features"
83+
>
84+
<div class="card__body">
85+
<div class="card__headline">
86+
<h3>Sign Up & Settings</h3>
87+
</div>
88+
89+
<div class="card__content">
90+
<p>
91+
Allow your users to sign up and edit their profile, and create
92+
admins for your store.
93+
</p>
94+
</div>
95+
</div>
96+
</a>
97+
</div>
98+
<div class="card card__coming-soon">
99+
<a
100+
href="https://guides.rubyonrails.org/install_ruby_on_rails.html"
101+
title="Install Ruby on Rails"
102+
>
103+
<div class="card__body">
104+
<div class="card__headline">
105+
<h3>User Wishlists</h3>
106+
</div>
107+
108+
<div class="card__content">
109+
<p>
110+
Save products for later, share the list for a birthday or
111+
holiday, and more.
112+
</p>
113+
</div>
114+
<div class="card__label">
115+
<h6>Coming Soon</h6>
116+
</div>
117+
</div>
118+
</a>
119+
</div>
120+
<div class="card card__coming-soon">
121+
<a
122+
href="https://guides.rubyonrails.org/install_ruby_on_rails.html"
123+
title="Install Ruby on Rails"
124+
>
125+
<div class="card__body">
126+
<div class="card__headline">
127+
<h3>Product Reviews</h3>
128+
</div>
129+
130+
<div class="card__content">
131+
<p>Allow people to rate and review the products that you sell.</p>
132+
</div>
133+
<div class="card__label">
134+
<h6>Coming Soon</h6>
135+
</div>
136+
</div>
137+
</a>
138+
</div>
139+
</div>
140+
</div>
141+
</div>
142+
143+
<div class="docs text common-padding--bottom">
144+
<div class="container">
145+
<div class="text__body">
146+
<div class="text__content common-content">
147+
<h2 class="how">More in the Pipeline</h2>
148+
<p class="how-leadin">
149+
This tutorial series will expand to add more features so you can learn
150+
Rails. Have something you’d like us to cover?
151+
<a
152+
href="https://app.todohelpers.com/forms/4758b5b0-d6f9-4f41-8041-992cc9b748fb"
153+
>Let us know.</a
154+
>
155+
</p>
156+
</div>
157+
</div>
158+
</div>
159+
</div>

0 commit comments

Comments
 (0)