From f45e63c686ec2257b4f3e2069c1b99237b5eaed3 Mon Sep 17 00:00:00 2001 From: Hashim Warren Date: Tue, 14 Jan 2020 12:31:25 -0500 Subject: [PATCH] Add challenge 3 of 100DaysOfGatsby (#20584) * Add challenge 3 of 100DaysOfGatsby * chore: format * Update docs/blog/100days/gatsby-image/index.md Co-Authored-By: LB * Update docs/blog/100days/gatsby-image/index.md Co-Authored-By: LB * chore: format Co-authored-by: GatsbyJS Bot Co-authored-by: LB --- docs/blog/100days/gatsby-image/index.md | 46 +++++++++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 docs/blog/100days/gatsby-image/index.md diff --git a/docs/blog/100days/gatsby-image/index.md b/docs/blog/100days/gatsby-image/index.md new file mode 100644 index 0000000000000..cb558b44ed08c --- /dev/null +++ b/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 `Img`React component provided by [`gatsby-image` ](/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 + +[Create an About page](/docs/recipes/pages-layouts/#creating-pages-automatically) 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!