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 will 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
  • This course includes:
  • 17.5 hours on-demand video
  • Access on mobile and TV
  • Full lifetime access
  • Certificate of completion

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.

Who this course is for:
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

Requirements

  • Basic Computer Skills
  • No programming experience needed. You will learn everything you need to know.


Course Content

  • 9 sections • 245 lectures • 17h 35m total length
  • 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
  • Introduction to Bootstrap
  • Embedding Bootstrap
  • Bootstrap – Basic Page Structure
  • Bootstrap Grid System
  • Bootstrap Three Column Layouts
  • Bootstrap Typography
  • Bootstrap Tables
  • Bootstrap Styling Images
  • Bootstrap Jumbotron
  • Bootstrap Wells
  • Bootstrap Alerts
  • Bootstrap Buttons
  • Bootstrap Button Groups
  • Bootstrap Justified Button Groups
  • Bootstrap Glyphicons
  • Bootstrap Badges and Labels
  • Bootstrap Progress Bars
  • Bootstrap Pagination
  • Bootstrap Pager Pagination
  • Bootstrap List Groups
  • Bootstrap Panels
  • Bootstrap Dropdown Menus
  • Bootstrap Collapsibles
  • Bootstrap Collapse Panel
  • Bootstrap Collapse List Group
  • Bootstrap Accordian
  • Bootstrap Tab Menus
  • Bootstrap Pill Menus
  • Bootstrap Dynamic Tabs and Pills
  • Bootstrap Navigation Bar
  • Bootstrap Collapsible Navigation Bar
  • Bootstrap Forms – Vertical and Inline
  • Bootstrap Inputs
  • Bootstrap Form Control States
  • Bootstrap Input Sizing
  • Bootstrap Carousel
  • Bootstrap Modal
  • Bootstrap Tooltip
  • Bootstrap Popover
  • Bootstrap Scrollspy
  • Bootstrap Project – Themes Intro
  • Bootstrap Project – File Overview
  • Bootstrap Project – Script Overview
  • Bootstrap Project – Script Overview Continued
  • DOM Introduction
  • DOM Manipulation
  • Introduction
  • JS 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 jQuery
  • Embedding jQuery
  • jQuery Syntax and Selector Intro
  • jQuery ID Selector
  • jQuery Class Selector
  • jQuery Other Selectors
  • External jQuery File
  • jQuery Events Intro
  • jQuery Events – mouseenter and mouseleave
  • jQuery Events – mousedown and mouseup
  • jQuery Multiple Event Handlers
  • jQuery Hiding-Showing
  • jQuery Toggle
  • jQuery Fade In-Out
  • jQuery Fade Toggle
  • jQuery Fade To
  • jQuery Slide Down
  • jQuery Slide Up
  • jQuery Slide Toggle
  • jQuery Animate
  • jQuery Animate – Multiple Params
  • jQuery Animate – Relative Values
  • jQuery Animate – Queue Functionality
  • jQuery Stop Method
  • jQuery Callback Functions
  • jQuery Chaining
  • jQuery Draggables
  • jQuery Accordian Menu
  • jQuery Get Content – text and html
  • jQuery Get Content – Val
  • jQuery Get Content – attr
  • jQuery Set Content – text – html – val
  • jQuery Set Attributes – attr
  • jQuery Append and Preprend
  • jQuery – After and Before
  • jQuery Remove and Empty
  • jQuery Filter Remove
  • jQuery Add Class
  • jQuery Remove Class
  • jQuery Toggle Class
  • Skills Required
  • What is 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 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
  • Project 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



Latest Free Coupons

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Today's 30+ Free Courses

X