HTML, CSS, React – Certification Course for Beginners

HTML, CSS, React - Certification Course for Beginners

HTML, CSS, React – Certification Course for Beginners

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

Language: english

Note: 4.5/5 (64 notes) 11,050 students

Instructor(s): YouAccel Training

Last update: 2022-09-12

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.


 

Who this course is for

  • 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

 

Course 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

 

HTML, CSS, React - Certification Course for BeginnersHTML, CSS, React - Certification Course for Beginners

Time remaining or 257 enrolls left

 

Don’t miss any coupons by joining our Telegram group 

Udemy Coupon Code 100% off | Udemy Free Course | Udemy offer | Course with certificate