Ultimate Front-End Bootcamp: CSS, Bootstrap, JQ, JS, React

Focused View

YouAccel Training

17:35:50

242 View

1 - CSS Development

1 - Introduction to CSS.mp4

03:31

2 - Parts of a CSS Rule.mp4

06:31

3 - Types of CSS Rules.mp4

02:54

4 - CSS Color Names and Codes.mp4

02:17

5 - CSS Classes and Spans.mp4

05:43

6 - CSS Divisions DIVs.mp4

02:52

7 - CSS IDs.mp4

05:53

8 - CSS Margins.mp4

03:52

9 - CSS Padding.mp4

02:12

10 - CSS Text Properties.mp4

08:28

11 - CSS Font Properties.mp4

03:00

12 - CSS Borders.mp4

02:19

13 - CSS Backgrounds.mp4

06:25

14 - CSS Transparency.mp4

02:52

15 - CSS Text on Top of Images.mp4

05:09

16 - CSS Width and Height Properties.mp4

06:03

17 - CSS Display Properties.mp4

02:09

18 - CSS Static Positioning.mp4

01:54

19 - CSS Relative Positioning.mp4

04:03

20 - CSS Absolute Positioning.mp4

02:12

21 - CSS Fixed Positioning.mp4

02:07

22 - CSS Float Property.mp4

02:23

23 - CSS Clear Property.mp4

01:08

24 - CSS ZIndex.mp4

01:39

25 - CSS Styling Links.mp4

02:01

26 - CSS Tables.mp4

02:16

27 - CSS Project Introduction.mp4

01:22

28 - CSS Project CSS Rules.mp4

05:35

29 - CSS Project Navigation Rules.mp4

02:16

30 - CSS Project Responsive CSS.mp4

02:37

31 - CSS Project Page Elements.mp4

02:33

2 - Bootstrap Development

32 - Introduction to Bootstrap.mp4

02:12

33 - Embedding Bootstrap.mp4

00:49

34 - Bootstrap Basic Page Structure.mp4

05:29

35 - Bootstrap Grid System.mp4

05:32

36 - Bootstrap Three Column Layouts.mp4

02:24

37 - Bootstrap Typography.mp4

06:50

38 - Bootstrap Tables.mp4

03:00

39 - Bootstrap Styling Images.mp4

02:17

40 - Bootstrap Jumbotron.mp4

02:27

41 - Bootstrap Wells.mp4

00:58

42 - Bootstrap Alerts.mp4

02:24

43 - Bootstrap Buttons.mp4

07:11

44 - Bootstrap Button Groups.mp4

01:57

45 - Bootstrap Justified Button Groups.mp4

02:32

46 - Bootstrap Glyphicons.mp4

02:52

47 - Bootstrap Badges and Labels.mp4

03:12

48 - Bootstrap Progress Bars.mp4

02:54

49 - Bootstrap Pagination.mp4

02:24

50 - Bootstrap Pager Pagination.mp4

01:17

51 - Bootstrap List Groups.mp4

05:10

52 - Bootstrap Panels.mp4

02:33

53 - Bootstrap Dropdown Menus.mp4

04:37

54 - Bootstrap Collapsibles.mp4

03:24

55 - Bootstrap Collapse Panel.mp4

01:53

56 - Bootstrap Collapse List Group.mp4

00:57

57 - Bootstrap Accordian.mp4

05:01

58 - Bootstrap Tab Menus.mp4

04:46

59 - Bootstrap Pill Menus.mp4

03:12

60 - Bootstrap Dynamic Tabs and Pills.mp4

04:03

61 - Bootstrap Navigation Bar.mp4

06:24

62 - Bootstrap Collapsible Navigation Bar.mp4

03:30

63 - Bootstrap Forms Vertical and Inline.mp4

03:36

64 - Bootstrap Inputs.mp4

04:28

65 - Bootstrap Form Control States.mp4

03:41

66 - Bootstrap Input Sizing.mp4

03:11

67 - Bootstrap Carousel.mp4

09:22

68 - Bootstrap Modal.mp4

04:01

69 - Bootstrap Tooltip.mp4

02:12

70 - Bootstrap Popover.mp4

02:52

71 - Bootstrap Scrollspy.mp4

05:40

72 - Bootstrap Project Themes Intro.mp4

03:31

73 - Bootstrap Project File Overview.mp4

02:15

74 - Bootstrap Project Script Overview.mp4

08:46

75 - Bootstrap Project Script Overview Continued.mp4

07:49

3 - DOM Object Model DOM

76 - DOM Introduction.mp4

03:12

77 - DOM Manipulation.mp4

01:17

4 - JavaScript Development

78 - Introduction.mp4

05:41

79 - JS Placement.mp4

02:09

80 - External JavaScript.mp4

01:50

81 - JavaScript Output.mp4

01:41

82 - JavaScript InnerHTML.mp4

01:03

83 - JavaScript Commenting.mp4

01:48

84 - JavaScript Constants.mp4

01:34

85 - JavaScript Variables Introduction.mp4

04:31

86 - JavaScript Assignment Operator.mp4

01:05

87 - JavaScript Arithmetic Operations.mp4

03:43

88 - JavaScript Arithmetic Operations Continued.mp4

03:45

89 - JavaScript Operator Precedence.mp4

00:58

90 - JavaScript Data Types.mp4

01:13

91 - JavaScript Objects.mp4

01:42

92 - JavaScript Object Output.mp4

01:22

93 - JavaScript Strings.mp4

03:11

94 - JavaScript String Length.mp4

00:41

95 - JavaScript Special Characters.mp4

01:18

96 - JavaScript Random Numbers.mp4

00:54

97 - JavaScript Min and Max Function.mp4

01:05

98 - JavaScript Math Round Function.mp4

01:38

99 - JavaScript Arrays.mp4

02:14

100 - JavaScript Array Attributes.mp4

01:28

101 - JavaScript Arrays Pop Push Shift Unshift.mp4

02:04

102 - JavaScript Changing and Deleting Elements.mp4

01:58

103 - JavaScript Splicing an Array.mp4

01:35

104 - JavaScript Sorting an Array.mp4

01:24

105 - JavaScript Joining Arrays.mp4

01:04

106 - JavaScript Conditional Statements.mp4

06:17

107 - JavaScript Comparisons.mp4

02:26

108 - JavaScript Booleans.mp4

01:21

109 - JavaScript For Loops.mp4

02:40

110 - JavaScript ForIn Loop.mp4

00:46

111 - JavaScript While Loops.mp4

02:08

112 - JavaScript DoWhile Loop.mp4

01:58

113 - JavaScript Break and Continue.mp4

01:14

114 - JavaScript Functions.mp4

01:53

115 - JavaScript Events.mp4

01:18

116 - JavaScript Project 1 BG Color Changer.mp4

02:13

117 - JavaScript Project 2 Photo Gallery.mp4

02:24

118 - JavaScript Project 2 Completion.mp4

02:38

5 - jQuery Library

119 - Introduction to jQuery.mp4

01:30

120 - Embedding jQuery.mp4

00:51

121 - jQuery Syntax and Selector Intro.mp4

03:32

122 - jQuery ID Selector.mp4

01:36

123 - jQuery Class Selector.mp4

01:07

124 - jQuery Other Selectors.mp4

01:53

125 - External jQuery File.mp4

01:43

126 - jQuery Events Intro.mp4

02:04

127 - jQuery Events mouseenter and mouseleave.mp4

02:07

128 - jQuery Events mousedown and mouseup.mp4

01:14

129 - jQuery Multiple Event Handlers.mp4

01:31

130 - jQuery HidingShowing.mp4

02:08

131 - jQuery Toggle.mp4

01:23

132 - jQuery Fade InOut.mp4

04:08

133 - jQuery Fade Toggle.mp4

01:26

134 - jQuery Fade To.mp4

01:19

135 - jQuery Slide Down.mp4

03:05

136 - jQuery Slide Up.mp4

00:57

137 - jQuery Slide Toggle.mp4

00:47

138 - jQuery Animate.mp4

03:30

139 - jQuery Animate Multiple Params.mp4

00:58

140 - jQuery Animate Relative Values.mp4

00:41

141 - jQuery Animate Queue Functionality.mp4

01:59

142 - jQuery Stop Method.mp4

01:51

143 - jQuery Callback Functions.mp4

02:09

144 - jQuery Chaining.mp4

02:39

145 - jQuery Draggables.mp4

02:22

146 - jQuery Accordian Menu.mp4

03:18

147 - jQuery Get Content text and html.mp4

02:41

148 - jQuery Get Content Val.mp4

01:06

149 - jQuery Get Content attr.mp4

01:08

150 - jQuery Set Content text html val.mp4

02:48

151 - jQuery Set Attributes attr.mp4

01:47

152 - jQuery Append and Preprend.mp4

02:33

153 - jQuery After and Before.mp4

01:18

154 - jQuery Remove and Empty.mp4

01:32

155 - jQuery Filter Remove.mp4

01:47

156 - jQuery Add Class.mp4

02:17

157 - jQuery Remove Class.mp4

01:52

158 - jQuery Toggle Class.mp4

00:44

6 - React JS

159 - Skills Required.mp4

00:56

160 - What is React.mp4

04:42

7 - React Project Build a Calculator in React

161 - Project Overview.mp4

00:58

162 - Hello React.mp4

06:23

163 - Tools Needed.mp4

01:02

164 - Code Pen.mp4

04:40

165 - Intro to JSX.mp4

04:05

166 - Functional Components in React.mp4

05:31

167 - Why Components.mp4

03:02

168 - Intro to Props in React.mp4

03:51

169 - React Components Props and Callbacks.mp4

04:16

170 - Building the Calculator Visuals.mp4

11:01

171 - OnClick Events in React.mp4

05:46

172 - Passing Parameters in Callback Functions.mp4

04:28

173 - Using React State Hook.mp4

04:42

174 - Implementing the calculator Display.mp4

07:27

175 - Implementing the calculator Operators.mp4

10:11

176 - Debugging in React.mp4

05:09

177 - Project Summary.mp4

01:49

8 - React Project Build a Connect4 Clone

178 - Project Overview.mp4

01:27

179 - Tools Needed.mp4

00:53

180 - Creating the Game Board.mp4

11:49

181 - Game Circle OnClickEvent.mp4

05:33

182 - Passing Props Destructing React Children.mp4

06:57

183 - Passing Arguments to Click Events.mp4

09:18

184 - Inline Styling.mp4

05:39

185 - Square to Circle Component.mp4

13:11

186 - Global Styling.mp4

06:36

187 - Dynamic Styling.mp4

03:52

188 - Dynamic Classes.mp4

03:40

189 - Handling Callbacks.mp4

05:52

190 - Using React State Hook again.mp4

14:24

191 - Updating the Player Circle.mp4

17:05

192 - Initializing the Game Board.mp4

08:12

193 - React Key Property.mp4

02:04

194 - Styling the Game Board Header and Footer.mp4

11:09

195 - Calculating the Winner.mp4

13:30

196 - Displaying the Winner.mp4

14:33

197 - Determining a Draw Condition.mp4

05:43

198 - React Lifecycle Events.mp4

03:16

199 - Initializing the Game.mp4

06:15

200 - Suggesting a Move Implementing a Computer Player.mp4

11:55

201 - Smart Computer Player Basic AI.mp4

19:00

202 - CSS Variables.mp4

07:06

203 - Conditional Rendering.mp4

08:15

204 - Deploy to Netlify.mp4

06:00

205 - Deploy to Surge.mp4

02:39

206 - Project Summary.mp4

02:34

9 - React Project Build an ECommerce Site

207 - Project Overview.mp4

01:53

208 - Scaffolding the Project.mp4

03:57

209 - Intro to JSON Server.mp4

04:00

210 - Fetch API.mp4

10:33

211 - Styling the Store.mp4

04:07

212 - Rendering the Categories.mp4

10:48

213 - Binding the Products.mp4

08:05

214 - Refactor the Fetch API call.mp4

08:49

215 - Dealing with errors in Fetch API.mp4

08:25

216 - Tidy the Fetch API call.mp4

02:21

217 - Styling the Product List.mp4

13:00

218 - Installing React Router.mp4

06:07

219 - Fixing the Key Warning.mp4

03:56

220 - React Router Detail Page.mp4

12:24

221 - Fetch API Get Product By Id.mp4

08:55

222 - Product Description.mp4

05:25

223 - Intro to Styled Components.mp4

13:00

224 - Styled Components Product Description.mp4

03:07

225 - Dangerously Set HTML yeah really.mp4

04:07

226 - Refactor the Categories.mp4

08:23

227 - Refactor the Layout.mp4

05:25

228 - Refactor the Home Page.mp4

05:50

229 - Intro to Context in React.mp4

08:53

230 - UseContext Hook and UseReducer Hook in React.mp4

17:59

231 - Basket Layout.mp4

11:11

232 - Implementing the Basket.mp4

06:22

233 - Implementing Basket Icons.mp4

04:36

234 - Implementing Basket Total.mp4

07:50

235 - Finishing the Checkout.mp4

01:07

236 - Checkout Fixing the State.mp4

12:31

237 - Implementing the Order Confirmation.mp4

06:43

238 - Intro to Local Storage.mp4

13:07

239 - Implementing Search Results.mp4

14:23

240 - Better Searching with Debouncing.mp4

07:36

241 - Validating Forms in React Part 1.mp4

08:47

242 - Validating Forms in React Part 2.mp4

09:15

243 - Validating Forms in React Part 3.mp4

08:11

244 - Validating Forms in React Part 4.mp4

07:55

245 - Project Summary.mp4

02:45

Description

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

Who is this 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

More details

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

User Reviews

Rating

average 0

Total votes0

Focused display

YouAccel was founded in 2015 with the mission to be one of the most interactive e-learning platforms on the web. YouAccel is now a leading provider in online training, serving a global audience of over 2 million passionate learners. This includes 6+ Million enrollments, across 50 best-selling courses. YouAccel offers courses across numerous industries from Programming & IT to Business, Marketing, Design, and Productivity.The e-learning experience provided by YouAccel is Dynamic. Each course is streamed in High Definition with corresponding assignments, quizzes, and exams that are delivered and graded electronically. All YouAccel courses are taught by certified educators that have numerous years of work experience in the field for which they provide instruction. The courses can be taken at one's own pace and are offered at several levels including beginner, intermediate and advanced. Taking the experience to a new personalized level, free support is available to all students who register for a course. All courses come with a certificate of completion and no age restrictions apply.YouAccel strongly believes that the future of online learning will be through open community-based initiatives, where everyone’s voice is equally heard. This is exactly what YouAccel strives to achieve – an inclusive environment, where students have control over the direction of course content. YouAccel courses are continuously updated based on feedback from students and engaged community members. YouAccel instructors encourage communication at every step of the learning process. To date, hundreds of contributors around the globe have invested both time and resources, to ensure YouAccel courses meet the highest level of quality. YouAccel instructors are world renowned and many of them have been featured in mainstream publications such as Forbes, Mashable, Entrepreneur, and PBS among others.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.