Skip to content

Put gif of final app to the right of TOC #814

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.

Sign up for GitHub

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

Merged
Sfshaza merged 3 commits into from
Feb 24, 2018
Merged

Put gif of final app to the right of TOC #814

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a25b411
Put gif of final app to the right of TOC
filiph Feb 24, 2018
9b8a902
Remove “Problems?” from TOC
filiph Feb 24, 2018
a8fdb96
Remove unnecessary text from top
filiph Feb 24, 2018
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
10 changes: 10 additions & 0 deletions _sass/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,16 @@ figcaption {
font-size: $small-font-size;
}

.right-figure {
float: right;
margin: 0 0 5px 20px;

@include media-query($on-palm) {
margin: inherit;
float: inherit;
}
}



/**
Expand Down
9 changes: 9 additions & 0 deletions _sass/_customstyles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -815,3 +815,12 @@ table th code {
.alert__banner {
margin-top: 3em;
}

.h2-like {
// This is for headlines that should look like H2 but shouldn't appear
// in the TOC.
font-size: 24px;
font-weight: 300;
line-height: 29px;
margin-bottom: 15px;
}
Binary file added get-started/codelab/images/startup-namer-app.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 12 additions & 20 deletions get-started/codelab/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,12 @@ title: Write Your First Flutter App
permalink: /get-started/codelab/
---

<figure class="right-figure" style="max-width: 250px">
<img src="images/startup-namer-app.gif"
alt="Animated GIF of the app that you will be building."
style="box-shadow: 0 0 3px; margin-bottom: 10px" >
</figure>

This is a guide to creating your first Flutter app. If you
are familiar with object-oriented code and basic programming
concepts such as variables, loops, and conditionals,
Expand All @@ -21,23 +27,9 @@ TODO: (later)
should be consistent: screenshot, code, markdown content.
{% endcomment %}

[PENDING: Insert animated gif here. The next lines create the
automated TOC.]]

* TOC
{:toc}

## What are Flutter and Dart?

_Flutter_ is Google's mobile UI framework for crafting high-quality
native interfaces on iOS and Android in record time. Flutter works with
existing code, is used by organizations around the world, and is free
and open source.

_Dart_ is an application programming language from Google that's
easy to learn, easy to use, and deployable everywhere.
Flutter apps are written in Dart.

## What you'll build

You’ll implement a simple mobile app that generates proposed names for a
Expand Down Expand Up @@ -323,7 +315,7 @@ class MyApp extends StatelessWidget {

</ol>

## Problems?
<p class="h2-like">Problems?</p>

If your app isn't running correctly, look for typos. If needed,
use the code at the following links to get back on track.
Expand Down Expand Up @@ -447,7 +439,7 @@ pairing each time you hot reload or save the app.

<center><img src="images/step3-screenshot.png" alt="screenshot at completion of third step"></center>

## Problems?
<p class="h2-like">Problems?</p>

If your app isn't running correctly, you can use the code
at the following links to get back on track.
Expand Down Expand Up @@ -595,7 +587,7 @@ as far as you want and you will continue to see new word pairings.

<center><img src="images/step4-screenshot.png" alt="screenshot at completion of fourth step"></center>

## Problems?
<p class="h2-like">Problems?</p>

If you've gotten off track, you can use the following
**lib/main.dart** code to get back on track.
Expand Down Expand Up @@ -781,7 +773,7 @@ splash animation.

<center><img src="images/step5-screenshot.png" alt="screenshot at completion of 5th step"></center>

## Problems?
<p class="h2-like">Problems?</p>

If you've gotten off track, you can use the following
**lib/main.dart** code to get back on track.
Expand Down Expand Up @@ -1036,7 +1028,7 @@ Add the highlisted code below:
xxx: replace images
<center><img src="images/step6a-screenshot.png" alt="screenshot at completion of 6th step"><img src="images/step6b-screenshot.png" alt="second route"></center>

## Problems?
<p class="h2-like">Problems?</p>

If you've gotten off track, use the following code for
**lib/main.dart** to get back on track.
Expand Down Expand Up @@ -1193,7 +1185,7 @@ even the app bar.
</li>
</ol>

## Problems?
<p class="h2-like">Problems?</p>

If you've gotten off track, use the code from the following link
to get back on track.
Expand Down