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: merging with master 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

« no previous file with comments | « src/site/docs/tutorials/images/banner.png ('k') | src/site/docs/tutorials/indexeddb/examples/count_down/out/web/count_down.css » ('j') | no next file with comments »
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..47048c88d8e5b73db44813a00d0ff69141b698f2 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,30 +72,44 @@ 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>

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

</section>

</div>

+ </div>

+ <div class="row-fluid">

<h4><a href="remove-elements/"><img src="images/target.png" height="20" width="20"> Remove DOM Elements</a></h4>

- <p>... and delete them.</p>

+ <p>Delete elements from the web page.</p>

</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>