Ultimate Front-End Bootcamp: Css, Bootstrap, Jq, Js, React

Build Stylish Mobile Responsive Web Apps with Interactive Components using CSS, Bootstrap, JS, & React JS Library

What you'll learn

Building Mobile Responsive Web Pages using CSS and Bootstrap

Working with Various Style Elements in CSS

Developing Site Layouts using CSS Divisions, ID's, and other attributes

Creating Internal and External Style sheets

Working with CSS Transparency, Text and Display Properties

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

Understanding Bootstrap Page Structure

Creating Mobile-First Bootstrap Page Layouts

Working with the Bootstrap Grid System

Creating Bootstrap Menus and Navigation Components

Working with Bootstrap Scrollspy, Panels, Carousels, and Models

Developing Websites using Pre-Built Bootstrap Themes

Working with jQuery to Create Animations (Fade, Toggle, Slide, Animate, Hide-Show)

Mastering the Use of jQuery with Multiple Params, Relative Values, and Queue Functionality

Adding interactive events using jQuery

How to use the jQuery Callback, and Chaining Function

Understanding the Document Object Model and DOM Manipulation

JavaScript Variables and Arithmetic

JavaScript Operator Precedence, Datay Types, Object Output, and Special Characters

JavaScript Arrays, Conditional Statements, Booleans, Loops, Functions, Arrays

React Components

Events, Parameters, Props in React

React Dynamic Styling

React State Hook, Key Property, Initialization, Conditional Rendering

JSON Server, Fetch API, React Router, Context in React

Building Interactive, Customizable Web Apps in React

Requirements

Basic Computer Skills

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

Description

Welcome to our course on CSS, Bootstrap, JavaScript, and React. This course is designed for anyone who is interested in learning the basics of front-end web development. By the end of this course, you will have a solid understanding of how to create beautiful and responsive websites using these powerful tools.CSS, or Cascading Style Sheets, is a language used to style and layout web pages. You will learn how to use CSS to control the layout, colors, and fonts of your website, as well as how to use CSS selectors and cascading rules to target specific elements on a page. We will also cover advanced CSS topics such as media queries and CSS Grid, which allow you to create responsive designs that adapt to different screen sizes.Bootstrap is a popular front-end framework that makes it easy to create responsive and mobile-friendly websites. You will learn how to use Bootstrap's pre-built components and classes to quickly create layouts and add common features such as navigation bars, forms, and buttons. You will also learn how to customize the look and feel of your website using Bootstrap's built-in CSS and JavaScript.JavaScript is a powerful programming language that allows you to add interactivity and dynamic behavior to your websites. You will learn the basics of JavaScript syntax, as well as how to use JavaScript to manipulate the DOM (Document Object Model) and respond to user events. We will also cover more advanced topics such as JavaScript objects and arrays, as well as how to use JavaScript to make HTTP requests and work with JSON data.React is a popular JavaScript library for building user interfaces. You will learn how to use React to create reusable components, manage state, and handle user interactions. We will also cover the basics of JSX, a syntax extension for JavaScript that allows you to write HTML-like elements in your JavaScript code. By the end of the course, you will be able to build dynamic, interactive web applications using React. This includes a fully functional e-commerce site, complete with product categories, a shopping cart feature, and checkout page. Throughout the course, you will work on several hands-on projects that will help you apply what you've learned. We start by creating a simple website using HTML, CSS, and Bootstrap, and then gradually add more features and complexity as we explore JavaScript and React. By the end of the course, you will have built a complete web application that demonstrates your understanding of the technologies covered in the course.This course is perfect for anyone who is new to front-end web development, or anyone who wants to refresh their skills in these areas. No prior experience is required, but some basic knowledge of HTML and web development concepts is helpful. You will also need access to a computer and an internet connection to complete the course.Enroll in this course today and start your journey to becoming a front-end web developer! Whether you're looking to build your own website, or start a career in web development, this course will give you the skills and confidence you need to succeed.

Overview

Section 1: CSS Development

Lecture 1 Introduction to CSS

Lecture 2 Parts of a CSS Rule

Lecture 3 Types of CSS Rules

Lecture 4 CSS - Color Names and Codes

Lecture 5 CSS Classes and Spans

Lecture 6 CSS Divisions - DIVs

Lecture 7 CSS IDs

Lecture 8 CSS Margins

Lecture 9 CSS Padding

Lecture 10 CSS Text Properties

Lecture 11 CSS Font Properties

Lecture 12 CSS Borders

Lecture 13 CSS Backgrounds

Lecture 14 CSS Transparency

Lecture 15 CSS Text on Top of Images

Lecture 16 CSS Width and Height Properties

Lecture 17 CSS Display Properties

Lecture 18 CSS Static Positioning

Lecture 19 CSS Relative Positioning

Lecture 20 CSS Absolute Positioning

Lecture 21 CSS Fixed Positioning

Lecture 22 CSS Float Property

Lecture 23 CSS Clear Property

Lecture 24 CSS Z-Index

Lecture 25 CSS Styling Links

Lecture 26 CSS Tables

Lecture 27 CSS Project - Introduction

Lecture 28 CSS Project - CSS Rules

Lecture 29 CSS Project - Navigation Rules

Lecture 30 CSS Project - Responsive CSS

Lecture 31 CSS Project - Page Elements

Section 2: Bootstrap Development

Lecture 32 Introduction to Bootstrap

Lecture 33 Embedding Bootstrap

Lecture 34 Bootstrap - Basic Page Structure

Lecture 35 Bootstrap Grid System

Lecture 36 Bootstrap Three Column Layouts

Lecture 37 Bootstrap Typography

Lecture 38 Bootstrap Tables

Lecture 39 Bootstrap Styling Images

Lecture 40 Bootstrap Jumbotron

Lecture 41 Bootstrap Wells

Lecture 42 Bootstrap Alerts

Lecture 43 Bootstrap Buttons

Lecture 44 Bootstrap Button Groups

Lecture 45 Bootstrap Justified Button Groups

Lecture 46 Bootstrap Glyphicons

Lecture 47 Bootstrap Badges and Labels

Lecture 48 Bootstrap Progress Bars

Lecture 49 Bootstrap Pagination

Lecture 50 Bootstrap Pager Pagination

Lecture 51 Bootstrap List Groups

Lecture 52 Bootstrap Panels

Lecture 53 Bootstrap Dropdown Menus

Lecture 54 Bootstrap Collapsibles

Lecture 55 Bootstrap Collapse Panel

Lecture 56 Bootstrap Collapse List Group

Lecture 57 Bootstrap Accordian

Lecture 58 Bootstrap Tab Menus

Lecture 59 Bootstrap Pill Menus

Lecture 60 Bootstrap Dynamic Tabs and Pills

Lecture 61 Bootstrap Navigation Bar

Lecture 62 Bootstrap Collapsible Navigation Bar

Lecture 63 Bootstrap Forms - Vertical and Inline

Lecture 64 Bootstrap Inputs

Lecture 65 Bootstrap Form Control States

Lecture 66 Bootstrap Input Sizing

Lecture 67 Bootstrap Carousel

Lecture 68 Bootstrap Modal

Lecture 69 Bootstrap Tooltip

Lecture 70 Bootstrap Popover

Lecture 71 Bootstrap Scrollspy

Lecture 72 Bootstrap Project - Themes Intro

Lecture 73 Bootstrap Project - File Overview

Lecture 74 Bootstrap Project - Script Overview

Lecture 75 Bootstrap Project - Script Overview Continued

Section 3: DOM Object Model (DOM)

Lecture 76 DOM Introduction

Lecture 77 DOM Manipulation

Section 4: JavaScript Development

Lecture 78 Introduction

Lecture 79 JS Placement

Lecture 80 External JavaScript

Lecture 81 JavaScript Output

Lecture 82 JavaScript InnerHTML

Lecture 83 JavaScript Commenting

Lecture 84 JavaScript Constants

Lecture 85 JavaScript Variables Introduction

Lecture 86 JavaScript Assignment Operator

Lecture 87 JavaScript Arithmetic Operations

Lecture 88 JavaScript Arithmetic Operations Continued

Lecture 89 JavaScript Operator Precedence

Lecture 90 JavaScript Data Types

Lecture 91 JavaScript Objects

Lecture 92 JavaScript Object Output

Lecture 93 JavaScript Strings

Lecture 94 JavaScript String Length

Lecture 95 JavaScript Special Characters

Lecture 96 JavaScript Random Numbers

Lecture 97 JavaScript Min and Max Function

Lecture 98 JavaScript Math Round Function

Lecture 99 JavaScript Arrays

Lecture 100 JavaScript Array Attributes

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

Lecture 102 JavaScript Changing and Deleting Elements

Lecture 103 JavaScript Splicing an Array

Lecture 104 JavaScript Sorting an Array

Lecture 105 JavaScript Joining Arrays

Lecture 106 JavaScript Conditional Statements

Lecture 107 JavaScript Comparisons

Lecture 108 JavaScript Booleans

Lecture 109 JavaScript For Loops

Lecture 110 JavaScript For-In Loop

Lecture 111 JavaScript While Loops

Lecture 112 JavaScript Do-While Loop

Lecture 113 JavaScript Break and Continue

Lecture 114 JavaScript Functions

Lecture 115 JavaScript Events

Lecture 116 JavaScript Project 1 - BG Color Changer

Lecture 117 JavaScript Project 2 - Photo Gallery

Lecture 118 JavaScript Project 2 - Completion

Section 5: jQuery Library

Lecture 119 Introduction to jQuery

Lecture 120 Embedding jQuery

Lecture 121 jQuery Syntax and Selector Intro

Lecture 122 jQuery ID Selector

Lecture 123 jQuery Class Selector

Lecture 124 jQuery Other Selectors

Lecture 125 External jQuery File

Lecture 126 jQuery Events Intro

Lecture 127 jQuery Events - mouseenter and mouseleave

Lecture 128 jQuery Events - mousedown and mouseup

Lecture 129 jQuery Multiple Event Handlers

Lecture 130 jQuery Hiding-Showing

Lecture 131 jQuery Toggle

Lecture 132 jQuery Fade In-Out

Lecture 133 jQuery Fade Toggle

Lecture 134 jQuery Fade To

Lecture 135 jQuery Slide Down

Lecture 136 jQuery Slide Up

Lecture 137 jQuery Slide Toggle

Lecture 138 jQuery Animate

Lecture 139 jQuery Animate - Multiple Params

Lecture 140 jQuery Animate - Relative Values

Lecture 141 jQuery Animate - Queue Functionality

Lecture 142 jQuery Stop Method

Lecture 143 jQuery Callback Functions

Lecture 144 jQuery Chaining

Lecture 145 jQuery Draggables

Lecture 146 jQuery Accordian Menu

Lecture 147 jQuery Get Content - text and html

Lecture 148 jQuery Get Content - Val

Lecture 149 jQuery Get Content - attr

Lecture 150 jQuery Set Content - text - html - val

Lecture 151 jQuery Set Attributes - attr

Lecture 152 jQuery Append and Preprend

Lecture 153 jQuery - After and Before

Lecture 154 jQuery Remove and Empty

Lecture 155 jQuery Filter Remove

Lecture 156 jQuery Add Class

Lecture 157 jQuery Remove Class

Lecture 158 jQuery Toggle Class

Section 6: React JS

Lecture 159 Skills Required

Lecture 160 What is React?

Section 7: React Project: Build a Calculator in React

Lecture 161 Project Overview

Lecture 162 Hello React

Lecture 163 Tools Needed

Lecture 164 Code Pen

Lecture 165 Intro to JSX

Lecture 166 Functional Components in React

Lecture 167 Why Components?

Lecture 168 Intro to Props in React

Lecture 169 React Components, Props and Callbacks

Lecture 170 Building the Calculator Visuals

Lecture 171 OnClick Events in React

Lecture 172 Passing Parameters in Callback Functions

Lecture 173 Using React State Hook

Lecture 174 Implementing the calculator - Display

Lecture 175 Implementing the calculator - Operators

Lecture 176 Debugging in React

Lecture 177 Project Summary

Section 8: React Project: Build a Connect-4 Clone

Lecture 178 Project Overview

Lecture 179 Tools Needed

Lecture 180 Creating the Game Board

Lecture 181 Game Circle - OnClickEvent

Lecture 182 Passing Props - Destructing - React Children

Lecture 183 Passing Arguments to Click Events

Lecture 184 Inline Styling

Lecture 185 Square to Circle Component

Lecture 186 Global Styling

Lecture 187 Dynamic Styling

Lecture 188 Dynamic Classes

Lecture 189 Handling Callbacks

Lecture 190 Using React State Hook (again)

Lecture 191 Updating the Player Circle

Lecture 192 Initializing the Game Board

Lecture 193 React Key Property

Lecture 194 Styling the Game Board - Header and Footer

Lecture 195 Calculating the Winner

Lecture 196 Displaying the Winner

Lecture 197 Determining a Draw Condition

Lecture 198 React Lifecycle Events

Lecture 199 Initializing the Game

Lecture 200 Suggesting a Move - Implementing a Computer Player

Lecture 201 Smart Computer Player (Basic AI)

Lecture 202 CSS Variables

Lecture 203 Conditional Rendering

Lecture 204 Deploy to Netlify

Lecture 205 Deploy to Surge

Lecture 206 Project Summary

Section 9: React Project: Build an E-Commerce Site

Lecture 207 Project Overview

Lecture 208 Scaffolding the Project

Lecture 209 Intro to JSON Server

Lecture 210 Fetch API

Lecture 211 Styling the Store

Lecture 212 Rendering the Categories

Lecture 213 Binding the Products

Lecture 214 Refactor the Fetch API call

Lecture 215 Dealing with errors in Fetch API

Lecture 216 Tidy the Fetch API call

Lecture 217 Styling the Product List

Lecture 218 Installing React Router

Lecture 219 Fixing the Key Warning

Lecture 220 React Router - Detail Page

Lecture 221 Fetch API - Get Product By Id

Lecture 222 Product Description

Lecture 223 Intro to Styled Components

Lecture 224 Styled Components - Product Description

Lecture 225 Dangerously Set HTML (yeah really)

Lecture 226 Refactor the Categories

Lecture 227 Refactor the Layout

Lecture 228 Refactor the Home Page

Lecture 229 Intro to Context in React

Lecture 230 UseContext Hook and UseReducer Hook in React

Lecture 231 Basket Layout

Lecture 232 Implementing the Basket

Lecture 233 Implementing Basket Icons

Lecture 234 Implementing Basket Total

Lecture 235 Finishing the Checkout

Lecture 236 Checkout - Fixing the State

Lecture 237 Implementing the Order Confirmation

Lecture 238 Intro to Local Storage

Lecture 239 Implementing Search Results

Lecture 240 Better Searching with Debouncing

Lecture 241 Validating Forms in React - Part 1

Lecture 242 Validating Forms in React - Part 2

Lecture 243 Validating Forms in React - Part 3

Lecture 244 Validating Forms in React - Part 4

Lecture 245 Project Summary

Students interesting in building Mobile Responsive Web Pages using CSS, Bootstrap, jQuery, and JavaScript,Students interested in styling web pages using CSS & Bootstrap,Students interested in using Bootstrap Themes to build stylish web pages,Students interested in learning the foundations of JavaScript for Web Page Interactivity,Students interested in using the React JS library to build UI Components,Students interested in building Web Apps using React