Create your own Web Application
This is a series of lessons to introduce you to creating your own web application on the public web.
Introduction
#1: Learn to create your own web applications
Learn how to create your own web applications on the public web. Introduces technologies including React, Material Design, mui.com, Next.js, static site deployments, Google Firebase hosting, Firebase authentication, and Firebase database synchronization. [9m28s]
Website Basics
#2: Introduction to web hosting
An introduction to options for hosting websites, touching on topics such as choosing between SaaS content management solutions like wix.com and Squarespace versus open source like WordPress and Joomla. Also touches on topics such as domain name management. [5m44s]
#3: Installing Next.js
Next.js is a set of tools to simplify building web apps using React. This lesson talks about installing Node.js (the JavaScript runtime environment), Next.js (a framework for building web applications), and basic tools to get started. [9m20s]
#4: Installing the MUI Material UI Library
Material UI is a look-and-feel for user interfaces, defined by Google. MUI.com defines a set of React components that can be used with Next.js to create web applications. This library takes away much of the need to learn HTML and CSS in depth. There is also a library of almost 2,000 icons defined by Material. [6m48s]
#5: Set up Firebase hosting for your site static files
Learn how to set up Google Firebase for hosting static files (created by Next.js) on a public web site. This is where we take the web app we were building locally and make it available on the public web. Google Firebase hosting provides cheap hosting of static files (free for small volumes of downloads). [3m54s]
Publishing
#7: Introduction to HTML
Learn the basics of HTML markup (open and close tags, attributes), and the main differences to XML (which is used by React). Also spends some time on how to embed structured data into HTML pages, to help search engines correctly understand the purpose of your page, and how to use Chrome Developers Tools to examine the HTML on a page, which can be useful later to diagnose problems on HTML pages. [17m28s]