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
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.
Get Instant Notification of New Courses on our
Telegram channel.
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.
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
Bootstrap Development
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 Object Model (DOM)
DOM Introduction
DOM Manipulation
JavaScript Development
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
jQuery Library
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
React JS
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
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
