Html, Css, React - Certification Course For Beginners

Creating interactive user-interface (UI) components using HTML, CSS, and React.

What you'll learn
HTML Foundations
The Structure of an HTML Web Page
HTML Body and Header Tags
HTML Text Formatting
HTML Unordered and Ordered Lists
Embedding Images, Video, and Media in HTML
Working with Tables and Nested Tables in HTML
Creating Web Forms with Input Fields, Select Menus, and Check Boxes
Working with Iframes in HTML
Building a Complete HTML Web Page
Foundations of CSS
Types of CSS Rules
Working with CSS ID and Class Selectors
Working with CSS Divisions (DIVs)
CSS Margins, Padding, Text Styling, and Backgrounds
CSS Display Properties, and Positioning
Styling Tables in CSS
Foundations of React
Introduction to React Tools for Building New Projects
Debugging React Projects
Building a Single and Multi-Player Connect-4 Clone Game with AI
Building a Fully Customized E-Commerce Site in React
Building a Fully Functional Calculator in React
Requirements
No programming experience needed. You will learn everything you need to know.
Basic Computer Skills
Description
Welcome to the HTML, CSS, and React Certification course for beginners. In this course you will learn how to develop stylish, mobile responsive web pages right from scratch using some of the most powerful front-end mark-up languages and JavaScript libraries. The course starts with an in-depth overview of HTML where we start by exploring the structure of an HTML web page. Once you’re comfortable with HTML foundations, we move on to demonstrating how to work with a number of HTML elements. This includes: Inline text elements, ordered and unordered lists, embedding media, link creation, tables, background images, form elements and iframes. The HTML segment concludes with a hands-on project that will guide you through creating a complete web page with headers, footers, callouts, images, links, forms and tabular data. By the end of the HTML segment, you’ll be able to proficiently code simple and complex html pages with ease.The second section of this course focuses exclusively on CSS to bring your web pages to life with custom style sheets. Here, students will learn the importance of responsive design and cross browser compatibility by embedding CSS style rules for individual page components. We start by exploring the parts, and types of CSS rules followed by an introduction into CSS Id’s and divisions. From there we move on to CSS margins, text properties, borders, transparency and text on top of images. Once you have a handle on the foundations we move on to more intricate CSS concepts including CSS positioning, CSS float properties, Link Styling, and z-indexes. Similar to the HTML section, the CSS segment concludes with a comprehensive hands-on guide to building a responsive web page, complete with CSS style definitions, element containers, navigation, and a number of other CSS page elements.Once you have a foundational understanding of HTML and CSS, we will dive into working with React, a powerful JavaScript library used for front-end UI development. The React section starts off with a hands-on project where you’ll learn how to work with functional React components, props, Callback functions, OnClick Events, and the React State hook to build a fully functional calculator. From there we will dive into project number two, where you will build a connect-4 clone. Here we will cover more intermediate concepts including passing props, destructuring, passing arguments to click events, various styling methods, and handling callbacks. You will also learn about the React key property, React lifecycle events, and conditional rendering. By the end you will have built a complete multi and single player connect-4 game board with built-in AI capabilities.In the final section of the course we further unleash the power of React by building out a complete e-commerce site with multiple product categories, a product showcase, shopping cart feature, and much more. Here, we introduce a number of integral new concepts including: JSON server, Fetch API, and installing React router. These essential building blocks will be used to render the product categories, style the product list, and configure the product details page. From there we dive into styled components, refactoring the shop layout, and exploring the concept of “context” in React. In the final stages of the project students will configure the shopping cart basket, and the checkout feature. We will also implement a product search feature, followed by in-depth exercises on validating input forms in React.As you can see this course covers a tremendous bit of ground. Best of all it’s co-authored by Tim Maclachlan - a renowned senior full-stack developer with over 20 years of commercial development experience. As a multi-faceted developer, Tim specializes in algorithmic, analytical and mobile development. To date, he’s written hundreds of applications and worked in a number of industries from commercial aviation and military, to banking and finance. Tim has a genuine passion for teaching others how to become better coders and looks forward to interacting with his students.With that said, we hope you’re just as excited about this course as we are, if so - hit that enroll button and let’s get started.

Overview

Section 1: HTML Development

Lecture 1 Introduction to HTML

Lecture 2 Basic Structure of a Web Page

Lecture 3 HTML Head Tags

Lecture 4 HTML Body Tag

Lecture 5 HTML Paragraph Spacing

Lecture 6 HTML Line Breaks

Lecture 7 HTML Non-Breaking Space

Lecture 8 HTML Header Tags

Lecture 9 HTML Text Formatting and Decoration

Lecture 10 HTML Inline Text Formatting

Lecture 11 HTML Unordered Lists

Lecture 12 HTML Ordered Lists

Lecture 13 HTML Image Insertion

Lecture 14 HTML Embedding Videos

Lecture 15 HTML Absolute vs. Relative File Referencing

Lecture 16 HTML Link Creation

Lecture 17 HTML Anchor Tags

Lecture 18 HTML Tables

Lecture 19 HTML Nested Tables

Lecture 20 HTML Merging Cells

Lecture 21 HTML Text Wrapping

Lecture 22 HTML Table Background Image

Lecture 23 HTML Cell Alignment

Lecture 24 HTML - Introduction to Forms

Lecture 25 HTML Form Tags and Attributes

Lecture 26 HTML Forms - Post vs Get

Lecture 27 HTML Forms - Input Text Fields

Lecture 28 HTML Forms - Select Menus

Lecture 29 HTML Forms - Check Boxes and Radio Buttons

Lecture 30 HTML Forms - Text Areas and Buttons

Lecture 31 HTML Iframes

Lecture 32 HTML Project - Introduction

Lecture 33 HTML Project - Header

Lecture 34 HTML Project - Callout

Lecture 35 HTML Project - Image Insertion

Lecture 36 HTML Project - Text Insertion

Lecture 37 HTML Project - Links and Form

Lecture 38 HTML Project - Tabular Data

Lecture 39 HTML Project - Footer

Section 2: CSS Development

Lecture 40 Introduction to CSS

Lecture 41 Parts of a CSS Rule

Lecture 42 Types of CSS Rules

Lecture 43 CSS - Color Names and Codes

Lecture 44 CSS Classes and Spans

Lecture 45 CSS Divisions - DIVs

Lecture 46 CSS IDs

Lecture 47 CSS Margins

Lecture 48 CSS Padding

Lecture 49 CSS Text Properties

Lecture 50 CSS Font Properties

Lecture 51 CSS Borders

Lecture 52 CSS Backgrounds

Lecture 53 CSS Transparency

Lecture 54 CSS Text on Top of Images

Lecture 55 CSS Width and Height Properties

Lecture 56 CSS Display Properties

Lecture 57 CSS Static Positioning

Lecture 58 CSS Relative Positioning

Lecture 59 CSS Absolute Positioning

Lecture 60 CSS Fixed Positioning

Lecture 61 CSS Float Property

Lecture 62 CSS Clear Property

Lecture 63 CSS Z-Index

Lecture 64 CSS Styling Links

Lecture 65 CSS Tables

Lecture 66 CSS Project - Introduction

Lecture 67 CSS Project - CSS Rules

Lecture 68 CSS Project - Navigation Rules

Lecture 69 CSS Project - Responsive CSS

Lecture 70 CSS Project - Page Elements

Section 3: Intro to React

Lecture 71 Skills Required

Lecture 72 What is React?

Section 4: React Project: Build a Calculator in React

Lecture 73 Project Overview

Lecture 74 Hello React

Lecture 75 Tools Needed

Lecture 76 Code Pen

Lecture 77 Intro to JSX

Lecture 78 Functional Components in React

Lecture 79 Why Components?

Lecture 80 Intro to Props in React

Lecture 81 React Components, Props and Callbacks

Lecture 82 Building the calculator visuals

Lecture 83 OnClick Events in React

Lecture 84 Passing Parameters in Callback Functions

Lecture 85 Using React State Hook

Lecture 86 Implementing the calculator - Display

Lecture 87 Implementing the calculator - Operators

Lecture 88 Debugging in React

Lecture 89 Project Summary

Section 5: React Project: Build a Connect-4 Clone

Lecture 90 Project Overview

Lecture 91 Tools Needed

Lecture 92 Creating the Game Board

Lecture 93 Game Circle - OnClickEvent

Lecture 94 Passing Props - Destructing - React Children

Lecture 95 Passing Arguments to Click Events

Lecture 96 Inline Styling

Lecture 97 Square to Circle Component

Lecture 98 Global Styling

Lecture 99 Dynamic Styling

Lecture 100 Dynamic Classes

Lecture 101 Handling Callbacks

Lecture 102 Using React State Hook (again)

Lecture 103 Updating the Player Circle

Lecture 104 Initializing the Game Board

Lecture 105 React Key Property

Lecture 106 Styling the Game Board - Header and Footer

Lecture 107 Calculating the Winner

Lecture 108 Displaying the Winner

Lecture 109 Determining a Draw Condition

Lecture 110 React Lifecycle Events

Lecture 111 Initializing the Game

Lecture 112 Suggesting a Move - Implementing a Computer Player

Lecture 113 Smart Computer Player (Basic AI)

Lecture 114 CSS Variables

Lecture 115 Conditional Rendering

Lecture 116 Deploy to Netlify

Lecture 117 Deploy to Surge

Lecture 118 Project Summary

Section 6: React Project: Build an E-Commerce Site in React

Lecture 119 Prroject Overview

Lecture 120 Scaffolding the Project

Lecture 121 Intro to JSON Server

Lecture 122 Fetch API

Lecture 123 Styling the Store

Lecture 124 Rendering the Categories

Lecture 125 Binding the Products

Lecture 126 Refactor the Fetch API call

Lecture 127 Dealing with errors in Fetch API

Lecture 128 Tidy the Fetch API call

Lecture 129 Styling the Product List

Lecture 130 Installing React Router

Lecture 131 Fixing the Key Warning

Lecture 132 React Router - Detail Page

Lecture 133 Fetch API - Get Product By Id

Lecture 134 Product Description

Lecture 135 Intro to Styled Components

Lecture 136 Styled Components - Product Description

Lecture 137 Dangerously Set HTML (yeah really)

Lecture 138 Refactor the Categories

Lecture 139 Refactor the Layout

Lecture 140 Refactor the Home Page

Lecture 141 Intro to Context in React

Lecture 142 UseContext Hook and UseReducer Hook in React

Lecture 143 Basket Layout

Lecture 144 Implementing the Basket

Lecture 145 Implementing Basket Icons

Lecture 146 Implementing Basket Total

Lecture 147 Finishing the Checkout

Lecture 148 Checkout - Fixing the State

Lecture 149 Implementing the Order Confirmation

Lecture 150 Intro to Local Storage

Lecture 151 Implementing Search Results

Lecture 152 Better Searching with Debouncing

Lecture 153 Validating Forms in React - Part 1

Lecture 154 Validating Forms in React - Part 2

Lecture 155 Validating Forms in React - Part 3

Lecture 156 Validating Forms in React - Part 4

Lecture 157 Project Summary

Students interested in Building Responsive Web Pages using HTML, CSS, and React,Students interested in Building Stylish Web Pages using HTML, CSS, and React Library,Students interested in Building an E-Commerce Site using React,Students interested in Learning the Foundations of React through Hands-On Projects