Angular - Build Your First App Tutorial: Suggestion

tutorials
1

I am brand new to Ionic and currently working through the Angular - Build Your First App tutorial. Overall, the tutorial is very helpful and I very much appreciate the work that went into this.

Coming from eyes brand new to the topic, I wanted to provide some feedback that will hopefully polish up what is already great.

On the first page in the section titled Photo Gallery!!!, I am given the following code block:

<ion-content>
<ion-fab vertical="bottom" horizontal="center" slot="fixed">

    <ion-fab-button>
      <ion-icon name="camera"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>

Keep in mind, I am brand new. <ion-content> is a brand new concept. So I am instructed to put FAB to the bottom of the page and I see this code. First thought I have is “do they want me to copy and paste this block of code exactly as they have it here and paste it at the very bottom of tab2.page.html? Or do they want me to just put the <ion-fab-button> block as the last child in the already existing <ion-content>?” .

After some experimenting and looking at the complete code on Github, I find out that you meant the latter.

My suggestion: It would be clearer if your code examples matched what the code should look like at this step of the tutorial if the reader has followed everything correctly.

For example:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title> Photo Gallery </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Photo Gallery</ion-title>
    </ion-toolbar>
  </ion-header>

  <app-explore-container name="Tab 2 page"></app-explore-container>

  <ion-fab vertical="bottom" horizontal="center" slot="fixed">
    <ion-fab-button>
      <ion-icon name="camera"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>

or

...

<ion-content [fullscreen]="true">

  ...

  <ion-fab vertical="bottom" horizontal="center" slot="fixed">

    <ion-fab-button>

      <ion-icon name="camera"></ion-icon>

    </ion-fab-button>

  </ion-fab>

</ion-content>

Thanks for the tutorial and thanks for the opportunity to contribute in my very small way. : )

3 Likes
2

Thanks for the feedback! I think having this additional context would be good for the “Your First App” tutorial. I created an issue on the Ionic Docs repo and passed this along to the rest of the team: "Your First App" tutorial should show complete code context · Issue #2082 · ionic-team/ionic-docs · GitHub

1 Like
3

Hi Thomas! Thanks so much for the honest feedback. We will move ahead with adding the full code context soon. To be honest, it’s something I’ve (the OG author) has struggled with. There are tradeoffs, such as making the tutorial much longer, but it definitely seems like the right way to go. Thanks!

1 Like
4

Thank you. I absolutely agree. It is such a fine line to walk on. Give too little, reader loses confidence. Give too much, reader overwhelmed with sensory overload. And each reader has different levels of tolerance. Perhaps the use of an ellipsis is a nice middle of the road approach?

I appreciate very much your kind consideration of my suggestion. It made me feel good. : )

2 Likes
5

@netkow is there any progress on updating the first app example. Thank you.