Learn Flexbox, Netlify and Tachyons

Starting from a prebuilt frontend, Jason Lengstorf guides you through the creation of a "Corgi Up-boop App" that uses Netlify Functions and Hasura. You can view [the deployed final product on Netlify](https://egghead-serverless-functions.netlify.app/).

You'll set up the Netlify CLI, and configure a local development environment before writing and deploying functions with a few different use cases.

The first example function bypasses CORS restrictions to retrieve corgi data from an example third-party API.

Next, you'll configure environmental variables to securely communicate with the Unsplash API without exposing private keys to the client.

Serverless functions don't persist data by themselves, so we will use  Hasura to create a GraphQL API for tracking the number of "boops" each corgi receives.

This course is an excellent illustration of the speed of Serverless functions, and how fast you can implement functionality in your web applications.

An all-in-one workflow that combines global deployment, continuous integration, and automatic HTTPS.

netlify

Build a Corgi Up-boop Web App with Netlify Serverless Functions and Hasura

How does e-commerce work on the Jamstack? 

Jason Lengstorf and [Thor 雷神](https://twitter.com/thorwebdev) teamed up on _Learn With Jason_ to [build a serverless Stripe Checkout implementation](https://www.learnwithjason.dev/sell-products-on-the-jamstack). This collection is a cleaned up, egghead-style tutorial for selling products on a Jamstack site using Netlify Functions and Stripe Checkout.

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Sell Products Using Stripe Checkout and Netlify Functions

OpenGraph images are the images you see when you paste a link into a social platform and it "unfurls" into an image, title, and description. This happens on Twitter, Discord, Slack, and many other platforms. This collection goes over everything from designing OpenGraph images in Figma, to implementing them in CodeSandbox, to returning headless browser screenshots from Netlify Functions, and finally using Cloudinary as a write-through cache. 

You will come away from this collection with the ability to ship an API that you can use on any of your sites, and also on-demand, that can generate images for not only OpenGraph unfurls, but also for Instagram, GitHub, and more. Using headless browsers with playwright to generate our images means we get full access to all the responsive power of CSS and all the logical power of JS to handle layout, importing assets like pngs, choosing different fonts, and more.

The image below is generated via the project you'll build and deploy in this course

![An example opengraph image](https://relaxed-payne-d1bfbe.netlify.com/opengraph?title=Building%20an%20OpenGraph%20image%20generation%20API%20with%20Cloudinary%20Netlify%20Functions%20and%20React&tags=figma,netlify%20functions,playwright&author=chrisbiscardi)

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Building an OpenGraph image generation API with Cloudinary, Netlify Functions, and React

A short list of screencasts to cover essentials of [Gatsby](https://www.gatsbyjs.org/) to get started and have enough knowledge to become dangerous. 

The content comes from multiple instructors that have each covered different essentials, this cherry picks some of the most important concepts.

Videos in this collection cover these topics:
- installing plugins
- creating pages
- navigating between pages
- adding optimized images
- theming your styles
- deploying your site

Gatsby is a blazing fast static site generator built with React. Gatsby gives you all of the modern JavaScript tools you want; set up and ready to go out of the box.

gatsby

Up and Running with Gatsby

It's tempting to pick up a framework which has preselected flexbox or grid as the layout tool of choice, but it's important to learn when and why to use each method. This leads to slimmer stylesheets which results in better site performance, and less likelihood for "hacks" to make one method do what the other does inherently better.

Throughout this collection, we will be progressively styling a responsive landing page template while building your knowledge on when to select grid or flexbox for any layout scenario. Spoiler alert: sometimes the best solution is using both!

The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent.

flexbox

Create a Landing Page with CSS Grid and Flexbox

This application serves as an introduction to building products with a JAMStack and Serverless approach. We cover everything from the beginning:

* starting with the Gatsby client
* handling authentication with Netlify Identity
* Shipping a GraphQL server on Netlify Functions
* Building in access control with a serverless capable database

It uses tools that remove as many of the barriers as possible while also allowing upgrading in the future. Netlify Functions can grow into AWS Lambda, Netlify Identity can grow into Auth0 or Cognito, and FaunaDB can grow into DynamoDB.

Building a Serverless JAMStack Todo app with Netlify, Gatsby, GraphQL, and FaunaDB

This collection is a sequel to the [Building a Serverless JAMStack Todo app with Netlify, Gatsby, GraphQL, and FaunaDB](https://egghead.io/playlists/building-a-serverless-jamstack-todo-app-with-netlify-gatsby-graphql-and-faunadb-53bb) collection. In this collection we take the TODO application we built and convert it to run using Netlify Identity, AWS Lambda (using the serverless framework) and DynamoDB. We cover

* Fauna vs DynamoDB and when to use each
* Setting up AWS accounts
* Creating DynamoDB tables and data modeling differences between Fauna and Dynamo
* Converting our Netlify Functions deployment to a Serverless Framework deployment
* Implementing Custom authorizer functions on AWS

It uses tools that remove as many of the barriers as possible. Netlify Functions grows into Serverless Framework adn AWS Lambda, Netlify Identity is kept around, and FaunaDB can grows into DynamoDB.



FaunaDB is a global serverless database that gives you ubiquitous, low latency access to app data, without sacrificing data correctness. It eliminates layers of app code for manually handling data anomalies, security, and scale, creating a friendlier dev experience for you and better app experience for your users.

faunadb

Converting a Serverless App to run on AWS Lambda and DynamoDB with Serverless Framework

Flexbox is a powerful way to layout HTML so that elements can grow to fit the size of their container.  It can also control how the elements are positioned within a flexed container.  

Once you start thinking in `rows` and `columns`, you can control almost any flexed layout with just a few simple flexbox layout primitives.

Get Started with Flexbox CSS Layouts

This playlist covers various aspects of CSS including different rules, selectors, and patterns

CSS Tips and Tricks

Flexbox is a wonderful tool built into the CSS specification. Using flexbox doesn't require any special framework or library, just a browser with CSS3 support. It is so awesome, and makes the arranging elements on a page almost fun!

Flexbox Fundamentals

Next.js is a React framework that provides a solutions to problems such as:

- 🌟 bundling & transpiling your React code
- 🌟 code splitting
- 🌟 being able to switch between client side rendering & server side rendering depending on the page (e.g. landing page vs. settings page)
- 🌟 client-side routing

In this collection we're going to learn how to harness the power of Next.js + TypeScript and how to work with Netlify in order to deploy our site for others to enjoy!

Learn how to:
- 🔥 Create a new Next.js project
- 🔥 Add TypeScript support
- 🔥 Create styled components with Emotion
- 🔥 Use both static and dynamic routes
- 🔥 Generate fully typed static pages
- 🔥 Set up Netlify deployments
- 🔥 Add a Netlify Form to our site
- 🔥 and more!

Next.js is a minimalistic framework for server-rendered React applications.

Build a site from scratch with Next.js, TypeScript, Emotion and Netlify

In this lesson, you will learn how to push your website code to Github and Build and deploy it using Netlify

Deploy a Gatsby website on Netlify

Netlify will automatically build your Gatsby website whenever you push new code to your repository but what about content changes in Contentful. In this lesson, you will learn how to use Contentful webhook feature to trigger a Netlify build whenever you publish or delete new content on Contentful

Trigger Netlify Builds when content changes in Contentful

After setting `display: flex` on a parent element, you can use `flex-direction` to switch the container to be either a `row` or a `column`.

We also switch the body between `row` and `column`.

Flex into a Row or a Column with flex-direction

We can space items inside of a flexed component in the "on-axis" direction, with `justify-content`.

Justify content can take the following values: `flex-start`, `flex-end`, `center`, `space-between`, `space-around`, or `space-evenly`

Change the Spacing of Flexed Components with justify-content

We changed the axis layout with 'justify-content', and the "off axis" layout is controlled by 'align-items'.  The most common values are `flex-start`, `flex-end`, or `center`.

Change the off-axis Alignment of a Flexed Container with `align-items`

To set the wrap settings of elements inside of a container, we can set the `flex-wrap` css attribute.  The most common values are: `nowrap`, `wrap`, or `wrap-reverse`

Wrap Elements Inside of a Flexed Container with `flex-wrap`

To stretch individual elements to fit the given space, we can set the `flex-grow` or `flex` attributes to any integer.  Other surrounding elements will grow proportionally to their `flex-grow` or `flex` attributes.

Proportionally Grow a Flexed Element by Setting `flex-grow` or `flex` Styles

We set up the build command, deployment directory, and other necessities to get our Gatsby site auto-deploying on commit to Netlify.

Setting up continuous deployment for a Gatsby site in yarn workspaces using Netlify

Netlify Identity allows you to manage and authenticate users on your site or app, without requiring them to be users of Netlify or any other service. You can use this for gated content, site administration, and more.

In this lesson, we integrate Netlify identity with Gatsby using React hooks.

Implementing Authentication with Netlify Identity, React hooks, and Gatsby

Restricting access to content that is delivered client-side in a Gatsby site takes a few steps. We use Netlify Identity to handle user authentication and reach router to build our auth-restricted client-side application.

Topics

Instructors

Content Type