Add challenge 3 of 100DaysOfGatsby

docs/blog/100days/gatsby-image/index.md

@@ -0,0 +1,46 @@
+---
+title: Challenge 3 - Auto-Optimize Images on Your Gatsby Site
+date: 2020-01-14
+author: "Hashim Warren"
+tags: ["learning-to-code", "contest", "100-Days-of-Gatsby"]
+---
+
+_Gatsby was named the [#1 new technology to learn in 2020](https://www.cnbc.com/2019/12/02/10-hottest-tech-skills-that-could-pay-off-most-in-2020-says-new-report.html)!_
+
+_To help you learn about Gatsby and our ecosystem, we invite you to take the #100DaysOfGatsby challenge! If you are new to Gatsby, you can follow along with our beginner-friendly weekly prompts. Or if you are familiar with Gatsby and want to go deeper, we invite you to [build your first Gatsby Theme](/docs/themes/building-themes/)._
+
+_Over 3,000 web developers have registered for the challenge! Learn more about [#100DaysOfGatsby here](/blog/100days)!_
+
+## Challenge 3: Learn How to Use Images with Gatsby
+
+Gatsby sites are known for their [blazing fast speed](/blog/2019-01-30-flamingo-case-study). The way a Gatsby site [optimizes images](/docs/using-gatsby-image/) is a big reason for that.
+
+This week’s challenge invites you to add images to your blog and learn about a popular and powerful Gatsby feature, `gatsby-image`.
+
+#### Part 1
+
+Add images to your markdown-based blog posts. If you are doing each challenge sequentially, then you have a [Gatsby blog that uses markdown](/100days/start-blog/) for blog posts, and is [deployed live to a CDN](/blog/100days/free-hosting/).
+
+But what good is a blog without beautiful images? We want you to use the resources section below to add auto-optimized images to your markdown blog posts!
+
+#### Part 2
+
+Now it’s time to get direct experience using the [`gatsby-image` React component](/packages/gatsby-image/)! Create an about page using JSX, then use the gatsby-image API to transform a normal selfie into a square, black-and-white image.
+
+Bonus: Take note of the build times for your site before and after you add images to your project. Also, record the performance of specific pages with images, using [a tool like Lighthouse](/docs/audit-with-lighthouse/). As a Gatsby Developer you should be aware of how images affect your site’s production and user experience.
+
+### Challenge Resources
+
+#### Part 1 Resource
+
+Follow this tutorial that explains how to [add images to your markdown-based pages](/docs/working-with-images-in-markdown/). After you configure your site as outlined, Gatsby will auto-optimize your images for you.
+
+#### Part 2 Resource
+
+[This recipe](/docs/recipes/pages-layouts#directions) will help you to rapidly create an About page using JSX, the preferred templating language for [React](/docs/glossary/react/). After that, you can [learn about gatsby-image](/docs/working-with-images), then [use its API](/docs/gatsby-image/) to transform your selfie into a black-and-white square.
+
+### How to Get Help
+
+Depending on your experience with Gatsby and React, this may be the hardest challenge we've given you. So, if you get stuck, please ask for help from the [Gatsby community](/contributing/community/) and the [ASKGatsbyJS](https://twitter.com/AskGatsbyJS) twitter account. You can find fellow Gatsby Developers on [Discord](https://discordapp.com/invite/gatsby), [Reddit](https://www.reddit.com/r/gatsbyjs/), [Spectrum](https://spectrum.chat/gatsby-js), and [Dev](https://dev.to/t/gatsby).
+
+Have fun! We can't wait to see what you build!