src/site/docs/tutorials/index.markdown - Issue 26542002: edit pass on T3,4,5, updated images

Unified Diff: src/site/docs/tutorials/index.markdown

Issue 26542002: edit pass on T3,4,5, updated images (Closed) Base URL: https://github.com/dart-lang/dartlang.org.git@master

Patch Set: Created 7 years, 2 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

Download patch

« src/site/docs/tutorials/get-started/index.markdown ('K') | « src/site/docs/tutorials/images/banner.png ('k') | src/site/docs/tutorials/indexeddb/index.markdown » ('j') | src/site/docs/tutorials/remove-elements/index.markdown » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: src/site/docs/tutorials/index.markdown

diff --git a/src/site/docs/tutorials/index.markdown b/src/site/docs/tutorials/index.markdown

index ad07fb2b19c543ca972199d5b144ee9d484c1e0b..39d10dd5b488e38766f42d2a69180da6ef494023 100644

--- a/src/site/docs/tutorials/index.markdown

+++ b/src/site/docs/tutorials/index.markdown

@@ -1,7 +1,7 @@

---

layout: default

title: "Dart Tutorials"

-description: "A Game of Darts—Your guide to building great web apps."

+description: "The Dart Tutorials—Your guide to building great web apps."

has-permalinks: true

rel:

author:

@@ -16,24 +16,24 @@ next-title: "Get Started"

-**A Game of Darts**

-is a collection of tutorials, _targets_,

-that teaches you how to build web applications

+**The Dart Tutorials** teach you how to build web applications

using the Dart language, tools, and APIs.

<ul>

<li> You already know how to program in a structured language like C or Java.</li>

<li> You are familiar with object-oriented programming.</li>

-<li> You might not know how to program the browser through the DOM (Document Object Model).</li>

+<li> You might not know how to program the browser

+ through the DOM (Document Object Model).</li>

</ul>

-<strong>Let's go!</strong> Follow the targets in order from left to right...or choose just the ones you need.

+<strong>Let's go!</strong> Follow the tutorials in order

+from left to right...or choose just the ones you need.

- <li class="active"><a href="#basics" data-toggle="tab">Basics</a></li>

+ <li class="active"><a href="#basics" data-toggle="tab">Get started</a></li>

<li><a href="#dom" data-toggle="tab">Browser</a></li>

<li><a href="#packages" data-toggle="tab">Packages</a></li>

<li><a href="#polymer" data-toggle="tab">Polymer</a></li>

@@ -46,35 +46,22 @@ using the Dart language, tools, and APIs.

- These two targets give a gentle introduction to writing Dart apps.

Download the software and

discover which tools and libraries you get with the bundle.

Run two sample apps.

- Learn how to embed Dart code in an HTML web page,

- to provide it with an interactive user interface and dynamic functionality.

- <div class="span6" style="border-right:1px solid Lavender">

+ <div class="span6">

- <h4><a href="get-started/"><img src="images/target.png" height="20" width="20"> Get Started</a></h4>

+ <h4><a href="get-started/"><img src="images/target.png" height="20" width="20"> Get started</a></h4>

<p>Get Dart. Run two apps.

</p>

</section>

</div>

-

- <div class="span6">

- <section>

- <h4><a href="connect-dart-html/"><img src="images/target.png" height="20" width="20"> Connect Dart & HTML</a></h4>

- <p>Embed Dart in a web page.

- </p>

- <img src="images/miniapp-screenshot.png" width="300">

- </section>

- </div>

</div>

</div>

@@ -85,15 +72,23 @@ using the Dart language, tools, and APIs.

within the browser as a tree structure

called the DOM (Document Object Model).

Dart apps can modify the DOM programmatically,

- thus dynamically changing the web page

- and responding to user input.

- Learn how to add, move, and remove DOM elements

- in these two targets.

+ thus dynamically changing the web page.

+ First, learn how to connect Dart and HTML.

+ Then learn how to add, move, and remove DOM elements.

+

+ <div class="span6">

+ <section>

+ <h4><a href="connect-dart-html/"><img src="images/target.png" height="20" width="20"> Connect Dart & HTML</a></h4>

+ <p>Include a Dart script in an HTML page.

+ </p>

+ <img src="images/miniapp-screenshot.png" width="300">

+ </section>

+ </div>

- <div class="span6" style="border-right:1px solid Lavender">

+ <div class="span6">

<h4><a href="add-elements/"><img src="images/target.png" height="20" width="20"> Add Elements to the DOM</a></h4>

<p>Add elements to the web page, move them...</p>

@@ -101,6 +96,10 @@ using the Dart language, tools, and APIs.

</section>

</div>

+ </div>

+ <div class="row-fluid">

@@ -109,6 +108,8 @@ using the Dart language, tools, and APIs.

</section>

</div>

+ <div class="span6">

+ </div>

</div>

</div>

@@ -122,7 +123,7 @@ using the Dart language, tools, and APIs.

- <div class="span6" style="border-right:1px solid Lavender">

+ <div class="span6">

<h4><a href="shared-pkgs/"><img src="images/target.png" height="20" width="20"> Install Shared Packages</a></h4>

<p>Organize and share code at <a href="http://pub.dartlang.org/">pub.dartlang.org</a>.</p>

@@ -211,7 +212,7 @@ using the Dart language, tools, and APIs.

-->

- <div class="span6" style="border-right:1px solid Lavender">

+ <div class="span6">

<h4><a href="polymer-intro/"><img src="images/target.png" height="20" width="20"> Define a Custom Element</a></h4>

<p>Create a custom HTML element using Polymer.</p>

@@ -228,7 +229,7 @@ using the Dart language, tools, and APIs.

- Various classes in the Dart libraries help you get, send and receive,

+ Various classes in the Dart libraries help you get, send, receive,

and save user data.

You can use input elements within forms to get data from users.

You can use JSON to format data and HttpRequest to send requests and receive responses.

@@ -237,7 +238,7 @@ using the Dart language, tools, and APIs.

- <div class="span6" style="border-right:1px solid Lavender">

+ <div class="span6">

<h4><a href="fetchdata/"><img src="images/target.png" height="20" width="20"> Fetch Data Dynamically</a></h4>

<p>Load data from a static file or from a server.</p>

@@ -246,7 +247,7 @@ using the Dart language, tools, and APIs.

</div>

- <div class="span6" style="border-right:1px solid Lavender">

+ <div class="span6">

<h4><a href="forms/"><img src="images/target.png" height="20" width="20"> Get Input from a Form</a></h4>

<p>Use forms and input elements to get data.</p>

@@ -260,7 +261,7 @@ using the Dart language, tools, and APIs.

<h4><a href="indexeddb/"><img src="images/target.png" height="20" width="20"> Use IndexedDB</a></h4>

- <p>Save data on the client with IndexedDB!</p>

+ <p>Save data on the client with IndexedDB.</p>

</section>

</div>