React Project One: Build a Madlib Game


Not CompletedIntroduction to State in React

Welcome back to the React Course. In this guide, we are going to go over application's state, and we are going to basically make our app a bit more functional, a bit more operational.

Not CompletedTwo Way Binding in React with Inputs and State

Welcome back to the React Course. In the last guide, we talked about state. In this guide, we're going to further talk about state.

Not CompletedHow to Set State on Multiple Inputs

Welcome back. What I'd like to do in this guide is put a few more inputs on, and then talk about how we can render the rest because we're going to see that it's an inefficient way of doing things.

Not CompletedHow to Render Multiple Inputs in React

Hey and welcome back to the course. Now that we have those inputs, set let's create a few more.

Not CompletedHow to Create a Madlib Content Component in React

Hello and welcome back to the course. In this guide, we are going to create a content component so we can put our story right here.

Not CompletedGenerate Madlib and Clear Form Buttons in React

Welcome back to the course. In this guide, we're going to learn how to show and hide this component, so that when we hit the generate button we can show and hide.

Not CompletedHow to Reset a Component's State

Welcome back to the course. In the last guide, we set up the generate and clear buttons here and learned a bit about how we do that with the application's state.

Not CompletedHow to Give a List of Components Each a Unique Number Label in React

Hi, my name is Max, and in this guide, we are going to be adding in the numbers for our inputs. We're going to name a number of these with labels.

Not CompletedHow to Use CSS Grid to Properly Lay Out Components

Welcome back to the course. In this guide, we are going to be starting on the styles.

Not CompletedHow to Use CSS Grid Throughout an Application

Hello and welcome back to the React Course. In this guide, we're going to continue styling our grids. We are just going to set up the rest of our grids.

Not CompletedHow to Add Skews Using CSS in React

Hi. Welcome back to the course. In this guide, we're going to continue on with our styling here, except for we're going to move aside from the grid styles, and we are going to put in all of the beautiful styles.

Not CompletedHow to Style an Application Header in CSS and SCSS

Hey, welcome back to the course. In the last guide, we put in the background skew that you see right here. That looks nice, and in this guide, we're going to be putting in these two header styles.

Not CompletedHow to Style a Card Container Component

Hi, and welcome back to the React Course. In the last guide, we threw in these styles right here, the header styles, which look super clean and very close to our design, if not exactly the same.

Not CompletedHow to Style an Input Component in React

Hey there, and welcome back to the course. In this guide, I'd like to start off by closing this terminal, and going here and looking out these inputs. So basically, we want to style our input component.

Not CompletedHow to Style a Grid Element in React

Welcome back to the course. Turns out my mouse is actually at 85%, but anyway, what we need to do is finish the styles for this input, and then align it on the grid a bit better.

Not CompletedHow to Apply Different Styles to a Button at Different Times

Hi, and welcome back to the React App that we're building. In this guide, we are going to style the Generate Madlib Button as well as the Clear Madlib Button.

Not CompletedStyling the Madlib Content Component in React

Hi, and welcome back to the course. In this guide, we're going to develop the content component styles, and then we will finish up by fixing the height of this entire card component.

Not CompletedHow to Detect Text in an Input Element in React

Hi, welcome back to the course. In the last guide, at the end, we made a list of items we want to fix. First thing is the placeholder, and we'll be doing these during this guide.

Not CompletedAdding Labels to the Content Component in React

Hey there, and welcome back to the course. In this guide, we are going to fix the content labels that you see in our content component.

Not CompletedPositioning the Generate Button and Fixing the Content Label Counter

Hi. Welcome back to the course. In this guide, we're going to finish up our app by fixing the height where it says: Generate Madlib.

Unsupported Browser

devCamp does not support ancient browsers.
Install a modern version for best experience.