We have finally made it all the way through the coding of our application and now it's time to get it out onto the web. In this video you will learn how to deploy a React app with Heroku. Heroku makes the process of deploying your app very easy. So, come along and let's get this app out to the world! Heroku: https://heroku.com Project repo on GitHub: https://github.com/jcoryalvernaz/cfn-coming-soon Need a website? I am available for hire: https://jasoncoryalvernaz.com Music: https://bensound.com

An important part of any developer's tool set is knowing how to leverage a version control system. In this video, you will learn all about the most popular version control system, Git, and one of the most popular code repositories, GitHub. We will cover how to initialize a repo on GitHub, discuss the differences between local and remote repositories, discuss branches, pull requests, and make our first commit. Come along and learn all about Git with GitHub. Project repo on GitHub: https://github.com/jcoryalvernaz/cfn-coming-soon Download Git: https://git-scm.com Need a website? I am available for hire: https://jasoncoryalvernaz.com Music: https://bensound.com

In this quick video, you will learn all about how to add Google Analytics to your React application. The process is fairly simple, and will give you a ton of insight into who is visiting your page. You will learn how to navigate the Google Analytics dashboard and find out all sorts of valuable information, including: how many people are visiting your site, what devices and browsers they are using, where in the world they are located, and so much more. I will even show you how to lock down your analytics to prevent your dashboard from being filled with invalid data. So, come along and learn how to integrate this amazing tool into your applications today.

React Hooks are a great addition to your application to increase the readability of conciseness of your code. To learn all about React Hooks and their benefits, you will convert the class components of the current code to functional components with Hooks. Come along and learn just how powerful this feature can be for your application. Check out the projects repo on GitHub: https://github.com/cfn-coming-soon A great blog post on React Hooks: https://www.jasoncoryalvernaz.com/introduction-to-react-hooks Need a website? I am available for hire: https://www.jasoncoryalvernaz.com/contact Music: https://bensound.com

Knowing how your app stacks up in terms of performance, best practices, accessibility, and SEO can be powerful knowledge. However, it can be difficult to know exactly how well you application is performing in these key areas. Luck for us, there is a tool called Lighthouse that is built directly into the Chrome dev tools that will score our app on these metrics and more. Furthermore, it can even give you useful information about how you can boost these scores. Come along and learn how to use this amazing tool to audit your react.js applications today. The GitHub repo for this project: https://github.com/jcoryalvernaz/cfn-coming-soon Need a website? I am available for hire: https://jasoncoryalvernaz.com Music: https://bensound.com

In this video you will get an introduction to GIMP. GIMP is an open source photo editing software that can do a lot of the same things you can do in Photoshop without the heavy price tag. You will learn how to use this software package to convert the SVG logo that we are using on our site to a favicon that can be used in the browser. This favicon let's the browser know what image we want displayed next to our page titles in the browser tab. Come along and learn how you can get started using this amazing tool. Check out the GitHub repo for this project: https://gihub.com/jcoryalvernaz/cfn-coming-soon Download GIMP: https://www.gimp.org Need a website? I am available for hire: https://jasoncoryalvernaz.com Music: https://bensound.com

It can be difficult to debug certain things in React, because, natively, there is no type checking. However, we can use the PropTypes package to allow us more control over what types of props get passed to our components. And when these PropTypes are not met, we will get errors in the console. These errors can be incredibly useful when trying discover why certain bugs are occurring. PropTypes are also helpful when working with teams, because the errors will allow colleagues to better understand what props your components are expecting. PropTypes allow you to define, with fairly granular detail, the type of prop to be passed and even whether it is required or not. Come along and learn all about checking types in React. Checkout the GitHub repo for this project: https://github.com/jcoryalvernaz/cfn-coming-soon Need a website? I am available for hire: https://jasoncoryalvernaz.com Music: https://bensound.com

To become a better developer, knowing how to use tools to debug and interrogate your code can make a huge impact. This week, you will learn how to use both the Chrome Dev Tools and the React Dev Tools to get better insights into your applications. We will cover how to use the Chrome Dev Tools to inspect DOM elements, change CSS on the fly, view network traffic and much more. We will then dive into the React Dev Tools to show how to interrogate and manipulate the state and props of your components. Leveraging the tools at your disposal is one of the most powerful skills for a developer. Join me in learning some of those skills, and putting the knowledge of these dev tools in your arsenal. React Dev Tools Chrome Extension: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en Project GitHub repo: https://github.com/jcoryalvernaz/cfn-coming-soon Need a website? I am available for hire: https://jasoncoryalvernaz.com Music: https://bensound.com

In this tutorial, you will learn how to build a customizable reactjs component to handle all your social media links. You will use a combination of reactjs and CSS Grid to make sure this component looks good no matter how many social media links you add. This component can make a perfect addition to any reactjs site that needs some social media links. Enjoy! Need a website? I am available for hire: https://jasoncoryalvernaz.com GitHub repo: https://github.com/jcoryalvernaz/cfn-coming-soon Resource for icons and fonts: https://creativemarket.com Inkscape to make your own SVGs: https://inkscape.org Music: https://bensound.com

Today you will learn an important lesson in UI design. As a developer, you want to give your user the sense that your application is running smooth and fast. One way to improve the feel of the speed of your application is through animations. When a user submits a form, for instance, you can add some animations to make it appear as though something is happening behind the scenes (because it is). In this application, you will learn how to speed up a very simple animation to give that feel that your application is grinding away on the client request. GitHub repo: https://github.com/jcoryalvernaz/cfn-coming-soon Need a website? I am available for hire: https://jasoncoryalvernaz.com Music: https://bensound.com

Last week you learned how to tie your React.js app to the MailChimp API and add subscribers to your mailing list. Today you will learn how to notify the user based on the JSON data that comes back from the request to MailChimp. To make this task a bit easier, you will also learn how to use a tool called Postman to interrogate the data coming back from an API request. With this data, you will be able to notify the user whether their request went through or failed. You will also be able to notify the user if they have already joined your mailing list. You will accomplish all of this by writing a custom React.js component to handle notifying the user and using some cool CSS Grid tricks to hide and display the notification. GitHub Repo: https://github.com/jcoryalvernaz/cfn-coming-soon Download the Postman app: https://www.getpostman.com/ Need a website? I am available for hire: https://jasoncoryalvernaz.com Music: https://bensound.com

In this video you will learn how to connect with the MailChimp API v3 from within your React app to add users to a mailing list. You will learn a lot of key concepts about handling backend requests including how to spin up an Express server, how to fetch your API data from the client, and what the heck CORS stand for. Today is all about the server side and how you can leverage all these awesome tools to make your website come to life. Check out the repo for the finished site: https://github.com/jcoryalvernaz/cfn-coming-soon Read the MailChimp API docs: https://mailchimp.com/developer/ Need a developer? I am for hire: https://jasoncoryalvernaz.com Music: https://bensound.com

This week you will learn how to design a responsive form for an email submission. To make the form look good at multiple screen sizes, you will use CSS Grid together with media queries to make the form responsive. Go out and put this to work in your own project today! See the end product in action: https://codingfromnull.io Need a website? I am for hire: https://jasoncoryalvernaz.com Another good CSS Grid course: https://cssgrid.io Music: https://bensound.com

In this video you will learn all about the difference between functional stateless components and class components in Reactjs. You will finish creating the components to show the Title and Description of the coming soon page and learn some pretty cool CSS Grid tricks courtesy of https://cssgrid.io. In a later video we will delve more into the differences between these two types of Reactjs components, and introduce the idea of React Hooks. Now go out and put this to work for your website. Project Github Repo: https://github.com/jcoryalvernaz/cfn-coming-soon Need a website? I am available for hire: https://jasoncoryalvernaz.com Music: https://bensound.com

In this week's video you will learn how to create your own Scalable Vector Graphics (SVGs) using an open source too called Inkscape. You will then import this SVG into your Reactjs application and animated using CSS. You will use CSS keyframes to animate the SVG for an infinite spin effect that will be sure to bring a nice addition to any website. Download Inkscape: https://inkscape.org Project GiHub Repo: https://github.com/jcoryalvernaz/cfn-coming-soon Coding From Null website: https://codingfromnull.io Do you need a website? I am available for hire: https://jasoncoryalvernaz.com Music: https://bensound.com