Html, Css, Javascript, React - Online Certification Course

Build: Mobile Responsive Web Pages using CSS | Dynamic Web Apps in React | Interactive UI Components | E-Commerce Sites

What you'll learn

Learning the Foundations of HTML, CSS, JavaScript

Understanding the basic structure of a web page

Working with HTML, CSS, and JavaScript syntax

Building Lists, Formatting Text, and working with Tabular Data in HTML

Building Forms using Post vs. Get Method

Building Navigation Components such as Menus, Input Areas, and Buttons in HTML

Building Responsive Web Page layouts using Cascading Style Sheets (CSS)

Working with DIVs, IDs, and Style Properties in CSS

Styling Images, Backgrounds, Borders, and Text on Top of Images in CSS

Working with CSS Positioning (Static, Relative, Absolute, Fixed, Float)

Styling Links and Tables in CSS

Understanding the Document Object Model (DOM)

Building Simple Interactive Web Page components using JavaScript

Working with JavaScript Arithmetic Operators and Data Types

Exploring JavaScript Arrays, Loops, and Events

Understanding Operator Precedence, Objects, and Functions in JavaScript

Building Dynamic Web Apps in React

Debugging and React Events

Exploring Code Pen, JSON Server, and React Props

Working with the React State Hook and Styling React Projects

Requirements

Basic Computer Skills

No programming experience needed. You will learn everything you need to know.

Description

This course is designed to teach students the fundamental concepts and skills needed to build modern, responsive web pages. The course covers key topics including the basic structure of a web page, building mobile responsive web apps, working with HTML, CSS, and JavaScript syntax, and building various web components using these languages.First, students learn the structure of a web page and how to create mobile responsive sites that adapt to different screen sizes and devices. This will include an introduction to HTML, which is the markup language used to create basic web page structure. Students will learn various HTML elements and how to use them to create headings, paragraphs, lists, images, and other static content.Next, students explore CSS, the language used for styling and layout customization. CSS works in conjunction with HTML to create visually appealing site designs that stand out. Here, students learn to effectively use CSS selectors, properties, and values. This will include an introduction to responsive web design and using CSS media queries to create web pages that adapt to different screen sizes.In addition to learning the basics of HTML and CSS, students will also learn JavaScript, the programming language used to add interactivity and dynamic functionality to web pages. Students will learn the Document Object Model (DOM) and how to use JavaScript to dynamically manipulate page elements. We also explore JavaScript events, loops, arrays, and other programming concepts.The course will also cover more advanced topics such as building navigation components using HTML, creating forms using the post vs. get method, and working with DIVs, and IDs. We also cover styling images, backgrounds, borders, and text on top of images in CSS. Students will learn the different CSS positioning options (static, relative, absolute, fixed, float) and how to use them to create complex web page layouts. In the JavaScript section of the course, students learn the Document Object Model (DOM) and how to use JavaScript to manipulate the elements of a web page. Here we explore, events, loops, arrays, and other programming concepts such as operator precedence, objects, and functions.Once students have a handle on the foundational three languages, we dive into React JS – a powerful JavaScript library used for building stylish, dynamic web applications and UI components. Through a series of hands-on projects, students will build a fully functional connect-4 game, a calculator, and an e-commerce site complete with categories, checkout features, and more. This course is designed for students with little or no previous experience in web development, but it can also be beneficial for students who have some experience and are looking to improve their skills. With the knowledge and skills gained in this course, students will be prepared to take on more advanced web development projects and to continue learning about new web development technologies.

Overview

Section 1: HTML Section

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 Table 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 Section

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: DOM Object Model (DOM)

Lecture 71 DOM Introduction

Lecture 72 DOM Manipulation

Section 4: JavaScript Section

Lecture 73 JavaScript - Introduction

Lecture 74 JavaScript Placement

Lecture 75 External JavaScript

Lecture 76 JavaScript Output

Lecture 77 JavaScript InnerHTML

Lecture 78 JavaScript Commenting

Lecture 79 JavaScript Constants

Lecture 80 JavaScript Variables Introduction

Lecture 81 JavaScript Assignment Operator

Lecture 82 JavaScript Arithmetic Operations

Lecture 83 JavaScript Arithmetic Operations Continued

Lecture 84 JavaScript Operator Precedence

Lecture 85 JavaScript Data Types

Lecture 86 JavaScript Objects

Lecture 87 JavaScript Object Output

Lecture 88 JavaScript Strings

Lecture 89 JavaScript String Length

Lecture 90 JavaScript Special Characters

Lecture 91 JavaScript Random Numbers

Lecture 92 JavaScript Min and Max Function

Lecture 93 JavaScript Math Round Function

Lecture 94 JavaScript Arrays

Lecture 95 JavaScript Array Attributes

Lecture 96 JavaScript Arrays - Pop - Push - Shift - Unshift

Lecture 97 JavaScript Changing and Deleting Elements

Lecture 98 JavaScript Splicing an Array

Lecture 99 JavaScript Sorting an Array

Lecture 100 JavaScript Joining Arrays

Lecture 101 JavaScript Conditional Statements

Lecture 102 JavaScript Comparisons

Lecture 103 JavaScript Booleans

Lecture 104 JavaScript For Loops

Lecture 105 JavaScript For-In Loop

Lecture 106 JavaScript While Loops

Lecture 107 JavaScript Do-While Loop

Lecture 108 JavaScript Break and Continue

Lecture 109 JavaScript Functions

Lecture 110 JavaScript Events

Lecture 111 JavaScript Project 1 - BG Color Changer

Lecture 112 JavaScript Project 2 - Photo Gallery

Lecture 113 JavaScript Project 2 - Completion

Section 5: Introduction to React

Lecture 114 Skills Required

Lecture 115 What is React?

Section 6: Project 1: Build a Calculator in React

Lecture 116 Project Overview

Lecture 117 Hello React

Lecture 118 Tools Needed

Lecture 119 Code Pen

Lecture 120 Intro to JSX

Lecture 121 Functional Components in React

Lecture 122 Why Components?

Lecture 123 Intro to Props in React

Lecture 124 React Components, Props, and Callbacks

Lecture 125 Building the Calculator Visuals

Lecture 126 OnClick Events in React

Lecture 127 Passing Parameters in Callback Functions

Lecture 128 Using React State Hook

Lecture 129 Implementing the calculator - Display

Lecture 130 Implementing the Calculator - Operators

Lecture 131 Debugging in React

Lecture 132 Project Summary

Section 7: Project 2 - Build a Connect-4 Clone in React

Lecture 133 Project Introduction - What We Will Build

Lecture 134 Tools Needed

Lecture 135 Creating the Game Board

Lecture 136 Game Circle - OnClickEvent

Lecture 137 Passing Props - Destructing - React Children

Lecture 138 Passing Arguments to Click Events

Lecture 139 Inline Styling

Lecture 140 Square to Circle Component

Lecture 141 Global Styling

Lecture 142 Dynamic Styling

Lecture 143 Dynamic Classes

Lecture 144 Handling Callbacks

Lecture 145 Using React State Hook (again)

Lecture 146 Updating the Player Circle

Lecture 147 Initializing the Game Board

Lecture 148 React Key Property

Lecture 149 Styling the Game Board - Header and Footer

Lecture 150 Calculating the Winner

Lecture 151 Displaying the Winner

Lecture 152 Determining a Draw Condition

Lecture 153 React Lifecycle Events

Lecture 154 Initializing the Game

Lecture 155 Suggesting a Move - Implementing a Computer Player

Lecture 156 Smart Computer Player (Basic AI)

Lecture 157 CSS Variables

Lecture 158 Conditional Rendering

Lecture 159 Deploy to Netlify

Lecture 160 Deploy to Surge

Lecture 161 Project Summary

Section 8: Project 3 - Build an E-Commerce Site in React

Lecture 162 Project Introduction - What We Build

Lecture 163 Scaffolding the Project

Lecture 164 Intro to JSON Server

Lecture 165 Fetch API

Lecture 166 Styling the Store

Lecture 167 Rendering the Categories

Lecture 168 Binding the Products

Lecture 169 Refactor the Fetch API call

Lecture 170 Dealing with errors in Fetch API

Lecture 171 Tidy the Fetch API call

Lecture 172 Styling the Product List

Lecture 173 Installing React Router

Lecture 174 Fixing the Key Warning

Lecture 175 React Router - Detail Page

Lecture 176 Fetch API - Get Product By Id

Lecture 177 Product Description

Lecture 178 Intro to Styled Components

Lecture 179 Styled Components - Product Description

Lecture 180 Dangerously Set HTML (Yeah Really)

Lecture 181 Refactor the Categories

Lecture 182 Refactor the Layout

Lecture 183 Refactor the Home Page

Lecture 184 Intro to Context in React

Lecture 185 UseContext Hook and UseReducer Hook in React

Lecture 186 Basket Layout

Lecture 187 Implementing the Basket

Lecture 188 Implementing Basket Icons

Lecture 189 Implementing Basket Total

Lecture 190 Finishing the Checkout

Lecture 191 Checkout - Fixing the State

Lecture 192 Implementing the Order Confirmation

Lecture 193 Intro to Local Storage

Lecture 194 Implementing Search Results

Lecture 195 Better Searching with Debouncing

Lecture 196 Validating Forms in React - Part 1

Lecture 197 Validating Forms in React - Part 2

Lecture 198 Validating Forms in React - Part 3

Lecture 199 Validating Forms in React - Part 4

Lecture 200 Project Summary

Students interested in the Foundations of HTML, CSS, and JavaScript,Students interested in building mobile-responsive web layouts using HTML, CSS, and JS,Students interested in building Dynamic Web Apps using React,Students interested in mastering the art of front-end development