HTML, CSS, React – Certification Course for Beginners


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

What you will 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

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.


Subscribe to latest coupons on our Telegram channel.

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.

English
language

Content

HTML Development

Introduction to HTML
Basic Structure of a Web Page
HTML Head Tags
HTML Body Tag
HTML Paragraph Spacing
HTML Line Breaks
HTML Non-Breaking Space
HTML Header Tags
HTML Text Formatting and Decoration
HTML Inline Text Formatting
HTML Unordered Lists
HTML Ordered Lists
HTML Image Insertion
HTML Embedding Videos
HTML Absolute vs. Relative File Referencing
HTML Link Creation
HTML Anchor Tags
HTML Tables
HTML Nested Tables
HTML Merging Cells
HTML Text Wrapping
HTML Table Background Image
HTML Cell Alignment
HTML – Introduction to Forms
HTML Form Tags and Attributes
HTML Forms – Post vs Get
HTML Forms – Input Text Fields
HTML Forms – Select Menus
HTML Forms – Check Boxes and Radio Buttons
HTML Forms – Text Areas and Buttons
HTML Iframes
HTML Project – Introduction
HTML Project – Header
HTML Project – Callout
HTML Project – Image Insertion
HTML Project – Text Insertion
HTML Project – Links and Form
HTML Project – Tabular Data
HTML Project – Footer

CSS Development

Introduction to CSS
Parts of a CSS Rule
Types of CSS Rules
CSS – Color Names and Codes
CSS Classes and Spans
CSS Divisions – DIVs
CSS IDs
CSS Margins
CSS Padding
CSS Text Properties
CSS Font Properties
CSS Borders
CSS Backgrounds
CSS Transparency
CSS Text on Top of Images
CSS Width and Height Properties
CSS Display Properties
CSS Static Positioning
CSS Relative Positioning
CSS Absolute Positioning
CSS Fixed Positioning
CSS Float Property
CSS Clear Property
CSS Z-Index
CSS Styling Links
CSS Tables
CSS Project – Introduction
CSS Project – CSS Rules
CSS Project – Navigation Rules
CSS Project – Responsive CSS
CSS Project – Page Elements

Intro to React

Skills Required
What is React?

React Project: Build a Calculator in React

Project Overview
Hello React
Tools Needed
Code Pen
Intro to JSX
Functional Components in React
Why Components?
Intro to Props in React
React Components, Props and Callbacks
Building the calculator visuals
OnClick Events in React
Passing Parameters in Callback Functions
Using React State Hook
Implementing the calculator – Display
Implementing the calculator – Operators
Debugging in React
Project Summary

React Project: Build a Connect-4 Clone

Project Overview
Tools Needed
Creating the Game Board
Game Circle – OnClickEvent
Passing Props – Destructing – React Children
Passing Arguments to Click Events
Inline Styling
Square to Circle Component
Global Styling
Dynamic Styling
Dynamic Classes
Handling Callbacks
Using React State Hook (again)
Updating the Player Circle
Initializing the Game Board
React Key Property
Styling the Game Board – Header and Footer
Calculating the Winner
Displaying the Winner
Determining a Draw Condition
React Lifecycle Events
Initializing the Game
Suggesting a Move – Implementing a Computer Player
Smart Computer Player (Basic AI)
CSS Variables
Conditional Rendering
Deploy to Netlify
Deploy to Surge
Project Summary

React Project: Build an E-Commerce Site in React

Prroject Overview
Scaffolding the Project
Intro to JSON Server
Fetch API
Styling the Store
Rendering the Categories
Binding the Products
Refactor the Fetch API call
Dealing with errors in Fetch API
Tidy the Fetch API call
Styling the Product List
Installing React Router
Fixing the Key Warning
React Router – Detail Page
Fetch API – Get Product By Id
Product Description
Intro to Styled Components
Styled Components – Product Description
Dangerously Set HTML (yeah really)
Refactor the Categories
Refactor the Layout
Refactor the Home Page
Intro to Context in React
UseContext Hook and UseReducer Hook in React
Basket Layout
Implementing the Basket
Implementing Basket Icons
Implementing Basket Total
Finishing the Checkout
Checkout – Fixing the State
Implementing the Order Confirmation
Intro to Local Storage
Implementing Search Results
Better Searching with Debouncing
Validating Forms in React – Part 1
Validating Forms in React – Part 2
Validating Forms in React – Part 3
Validating Forms in React – Part 4
Project Summary