HTML, CSS, JavaScript, React – Online Certification Course

  • Post category:StudyBullet-13
  • Reading time:17 mins read


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.


Get Instant Notification of New Courses on our Telegram channel.


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

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

Tags: , , , , ,