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

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.

English

language

Content

HTML Section

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

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

DOM Object Model (DOM)

DOM Introduction

DOM Manipulation

JavaScript Section

JavaScript – Introduction

JavaScript Placement

External JavaScript

JavaScript Output

JavaScript InnerHTML

JavaScript Commenting

JavaScript Constants

JavaScript Variables Introduction

JavaScript Assignment Operator

JavaScript Arithmetic Operations

JavaScript Arithmetic Operations Continued

JavaScript Operator Precedence

JavaScript Data Types

JavaScript Objects

JavaScript Object Output

JavaScript Strings

JavaScript String Length

JavaScript Special Characters

JavaScript Random Numbers

JavaScript Min and Max Function

JavaScript Math Round Function

JavaScript Arrays

JavaScript Array Attributes

JavaScript Arrays – Pop – Push – Shift – Unshift

JavaScript Changing and Deleting Elements

JavaScript Splicing an Array

JavaScript Sorting an Array

JavaScript Joining Arrays

JavaScript Conditional Statements

JavaScript Comparisons

JavaScript Booleans

JavaScript For Loops

JavaScript For-In Loop

JavaScript While Loops

JavaScript Do-While Loop

JavaScript Break and Continue

JavaScript Functions

JavaScript Events

JavaScript Project 1 – BG Color Changer

JavaScript Project 2 – Photo Gallery

JavaScript Project 2 – Completion

Introduction to React

Skills Required

What is React?

Project 1: 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

Project 2 – Build a Connect-4 Clone in React

Project Introduction – What We Will Build

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

Project 3 – Build an E-Commerce Site in React

Project Introduction – What We Build

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

Enroll for Free

HTML, CSS, JavaScript, React – Online Certification Course

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

HTML Section

CSS Section

DOM Object Model (DOM)

JavaScript Section

Introduction to React

Project 1: Build a Calculator in React

Project 2 – Build a Connect-4 Clone in React

Project 3 – Build an E-Commerce Site in React

💠 Follow this Video to Get Free Courses on Every Needed Topics! 💠

Ads Blocker Detected!!!