(gatsbyjs#6943): update part one content, change links in intro, side…

…bar, add images (gatsbyjs#6969)
porfirioribeiro · Aug 20, 2018 · 4819349 · 4819349
1 parent f7d390c
commit 4819349
Show file tree

Hide file tree

Showing 12 changed files with 206 additions and 306 deletions.
diff --git a/docs/tutorial/index.md b/docs/tutorial/index.md
@@ -7,7 +7,7 @@ Welcome to Gatsby! We’re glad you’re here. The goal of this tutorial is to g
 The full tutorial is intended to be as accessible as possible to people without much web development experience (yet!) — no need to be an expert. If you prefer to jump straight to code, feel free to skip the step-by-step tutorial and see the [quick start](/docs/) page.
 
 0.  [Set Up Your Development Environment](/tutorial/part-zero/): We'll introduce you to core technologies that power Gatsby, and guide you through setting up your development environment.
-1.  [Introduction to Gatsby basics](/tutorial/part-one/): Starting new projects, developing, and deploying sites.
+1.  [Get to know Gatsby building blocks](/tutorial/part-one/): Starting new projects, developing, and deploying sites.
 1.  [Introduction to using CSS in Gatsby](/tutorial/part-two/): Explore libraries like Typography.js and CSS Modules.
 1.  [Building nested layouts in Gatsby](/tutorial/part-three/): Layouts are sections of your site that are reused across multiple pages like headers and footers.
 

diff --git a/docs/tutorial/part-one/01-hello-world-vscode.png b/docs/tutorial/part-one/01-hello-world-vscode.png
diff --git a/docs/tutorial/part-one/02-hot-reloading.gif b/docs/tutorial/part-one/02-hot-reloading.gif
diff --git a/docs/tutorial/part-one/03-more-hot-reloading.png b/docs/tutorial/part-one/03-more-hot-reloading.png
diff --git a/docs/tutorial/part-one/04-add-image.png b/docs/tutorial/part-one/04-add-image.png
diff --git a/docs/tutorial/part-one/05-about-page.png b/docs/tutorial/part-one/05-about-page.png
diff --git a/docs/tutorial/part-one/06-header-component.png b/docs/tutorial/part-one/06-header-component.png
diff --git a/docs/tutorial/part-one/07-pass-data-header.png b/docs/tutorial/part-one/07-pass-data-header.png
diff --git a/docs/tutorial/part-one/08-duplicate-header.png b/docs/tutorial/part-one/08-duplicate-header.png
diff --git a/docs/tutorial/part-one/index.md b/docs/tutorial/part-one/index.md
diff --git a/docs/tutorial/part-two/index.md b/docs/tutorial/part-two/index.md
@@ -7,39 +7,7 @@ Welcome to part two of the Gatsby tutorial!
 
 ## What's in this tutorial?
 
-In this part you're going to explore options for styling Gatsby websites and dive
-deeper into using React components for building sites.
-
-## Building with components
-
-One of the big mental shifts you make when starting to build with components (if you are already a developer) is
-that now your CSS, HTML, and JavaScript are tightly coupled, and often living even
-within the same file.
-
-While a seemingly simple change, this has profound implications for how you think
-about building websites.
-
-Take the example of creating a custom button. In the past you would
-create a CSS class (perhaps `.primary-button`) with your custom styles and then
-whenever you want to apply those styles e.g.
-
-```html
-<button class="primary-button">
-  Click me
-</button>
-```
-
-In the world of components, you instead create a `PrimaryButton` component with
-your button styles and use it throughout your site like:
-
-<!-- prettier-ignore -->
-```jsx
-<PrimaryButton>Click me</PrimaryButton>
-```
-
-Components become the base building blocks of your site. Instead of being
-limited to the building blocks the browser provides e.g. `<button />`, you can easily create new
-building blocks that elegantly meet the needs of your projects.
+In this part you're going to explore options for styling Gatsby websites and dive deeper into using React components for building sites.
 
 ## Creating global styles
 

diff --git a/www/src/data/sidebars/tutorial-links.yaml b/www/src/data/sidebars/tutorial-links.yaml
@@ -24,26 +24,22 @@
           link: /tutorial/part-zero/#set-up-a-code-editor
         - title: Set up Prettier
           link: /tutorial/part-zero/#set-up-prettier
-    - title: 1. Introduction to Gatsby basics
+    - title: 1. Get to know Gatsby building blocks
       link: /tutorial/part-one/
       ui: steps
       items:
-        - title: Check environment
-          link: /tutorial/part-one/#check-your-development-environment
-        - title: Install the "Hello World" starter
-          link: /tutorial/part-one/#install-the-hello-world-starter
-        - title: Linking between pages
-          link: /tutorial/part-one/#linking-between-pages
-        - title: Interactive page
-          link: /tutorial/part-one/#interactive-page
-        - title: Deploying Gatsby.js websites
-          link: /tutorial/part-one/#deploying-gatsbyjs-websites
+        - title: Using Gatsby starters
+          link: /tutorial/part-one/#using-gatsby-starters
+        - title: Familiarizing with Gatsby pages
+          link: /tutorial/part-one/#familiarizing-with-gatsby-pages
+        - title: Building with components
+          link: /tutorial/part-one/#building-with-components
+        - title: Deploying a Gatsby site
+          link: /tutorial/part-one/#deploying-a-gatsby-site
     - title: 2. Introduction to using CSS in Gatsby
       link: /tutorial/part-two/
       ui: steps
       items:
-        - title: Building with components
-          link: /tutorial/part-two/#building-with-components
         - title: Creating Global Styles
           link: /tutorial/part-two/#creating-global-styles
         - title: Typography.js