HTML, CSS, JavaScript, React - Online Certification Course

Focused View

YouAccel Training

15:48:00

88 View

1. HTML Section

1. Introduction to HTML.mp4

01:46

2. Basic Structure of a Web Page.mp4

03:35

3. HTML Head Tags.mp4

07:59

4. HTML Body Tag.mp4

03:18

5. HTML Paragraph Spacing.mp4

02:57

6. HTML Line Breaks.mp4

02:04

7. HTML Non-Breaking Space.mp4

02:38

8. HTML Header Tags.mp4

01:58

9. HTML Text Formatting and Decoration.mp4

05:15

10. HTML Inline Text Formatting.mp4

02:04

11. HTML Unordered Lists.mp4

02:36

12. HTML Ordered Lists.mp4

02:39

13. HTML Image Insertion.mp4

03:57

14. HTML Embedding Videos.mp4

02:50

15. HTML Absolute vs. Relative File Referencing.mp4

02:00

16. HTML Link Creation.mp4

06:34

17. HTML Anchor Tags.mp4

03:35

18. HTML Tables.mp4

11:29

19. HTML Nested Tables.mp4

06:26

20. HTML Merging Cells.mp4

01:00

21. HTML Text Wrapping.mp4

01:17

22. HTML Table Background Image.mp4

01:12

23. HTML Table Cell Alignment.mp4

00:39

24. HTML - Introduction to Forms.mp4

03:30

25. HTML Form Tags and Attributes.mp4

03:59

26. HTML Forms - Post vs. Get.mp4

02:08

27. HTML Forms - Input Text Fields.mp4

03:51

28. HTML Forms - Select Menus.mp4

05:32

29. HTML Forms - Check Boxes and Radio Buttons.mp4

05:44

30. HTML Forms - Text Areas and Buttons.mp4

05:49

31. HTML Iframes.mp4

04:03

32. HTML Project - Introduction.mp4

01:40

33. HTML Project - Header.mp4

03:33

34. HTML Project - Callout.mp4

03:19

35. HTML Project - Image Insertion.mp4

01:34

36. HTML Project - Text Insertion.mp4

01:23

37. HTML Project - Links and Form.mp4

03:28

38. HTML Project - Tabular Data.mp4

02:23

39. HTML Project - Footer.mp4

01:22

2. CSS Section

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 Z-Index.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

3. DOM Object Model (DOM)

1. DOM Introduction.mp4

03:12

2. DOM Manipulation.mp4

01:17

4. JavaScript Section

1. JavaScript - Introduction.mp4

05:41

2. JavaScript Placement.mp4

02:09

3. External JavaScript.mp4

01:50

4. JavaScript Output.mp4

01:41

5. JavaScript InnerHTML.mp4

01:03

6. JavaScript Commenting.mp4

01:48

7. JavaScript Constants.mp4

01:34

8. JavaScript Variables Introduction.mp4

04:31

9. JavaScript Assignment Operator.mp4

01:05

10. JavaScript Arithmetic Operations.mp4

03:43

11. JavaScript Arithmetic Operations Continued.mp4

03:45

12. JavaScript Operator Precedence.mp4

00:58

13. JavaScript Data Types.mp4

01:13

14. JavaScript Objects.mp4

01:42

15. JavaScript Object Output.mp4

01:22

16. JavaScript Strings.mp4

03:11

17. JavaScript String Length.mp4

00:41

18. JavaScript Special Characters.mp4

01:18

19. JavaScript Random Numbers.mp4

00:54

20. JavaScript Min and Max Function.mp4

01:05

21. JavaScript Math Round Function.mp4

01:38

22. JavaScript Arrays.mp4

02:14

23. JavaScript Array Attributes.mp4

01:28

24. JavaScript Arrays - Pop - Push - Shift - Unshift.mp4

02:04

25. JavaScript Changing and Deleting Elements.mp4

01:58

26. JavaScript Splicing an Array.mp4

01:35

27. JavaScript Sorting an Array.mp4

01:24

28. JavaScript Joining Arrays.mp4

01:04

29. JavaScript Conditional Statements.mp4

06:17

30. JavaScript Comparisons.mp4

02:26

31. JavaScript Booleans.mp4

01:21

32. JavaScript For Loops.mp4

02:40

33. JavaScript For-In Loop.mp4

00:46

34. JavaScript While Loops.mp4

02:08

35. JavaScript Do-While Loop.mp4

01:58

36. JavaScript Break and Continue.mp4

01:14

37. JavaScript Functions.mp4

01:53

38. JavaScript Events.mp4

01:18

39. JavaScript Project 1 - BG Color Changer.mp4

02:13

40. JavaScript Project 2 - Photo Gallery.mp4

02:24

41. JavaScript Project 2 - Completion.mp4

02:38

5. Introduction to React

1. Skills Required.mp4

00:56

2. What is React.mp4

04:42

6. Project 1 Build a Calculator in React

1. Project Overview.mp4

00:58

2. Hello React.mp4

06:23

3. Tools Needed.mp4

01:02

4. Code Pen.mp4

04:40

5. Intro to JSX.mp4

04:05

6. Functional Components in React.mp4

05:31

7. Why Components.mp4

03:02

8. Intro to Props in React.mp4

03:51

9. React Components, Props, and Callbacks.mp4

04:16

10. Building the Calculator Visuals.mp4

11:01

11. OnClick Events in React.mp4

05:46

12. Passing Parameters in Callback Functions.mp4

04:28

13. Using React State Hook.mp4

04:42

14. Implementing the calculator - Display.mp4

07:27

15. Implementing the Calculator - Operators.mp4

10:11

16. Debugging in React.mp4

05:09

17. Project Summary.mp4

01:49

7. Project 2 - Build a Connect-4 Clone in React

1. Project Introduction - What We Will Build.mp4

01:27

2. Tools Needed.mp4

00:53

3. Creating the Game Board.mp4

11:49

4. Game Circle - OnClickEvent.mp4

05:33

5. Passing Props - Destructing - React Children.mp4

06:57

6. Passing Arguments to Click Events.mp4

09:18

7. Inline Styling.mp4

05:39

8. Square to Circle Component.mp4

13:11

9. Global Styling.mp4

06:36

10. Dynamic Styling.mp4

03:52

11. Dynamic Classes.mp4

03:40

12. Handling Callbacks.mp4

05:52

13. Using React State Hook (again).mp4

14:24

14. Updating the Player Circle.mp4

17:05

15. Initializing the Game Board.mp4

08:12

16. React Key Property.mp4

02:04

17. Styling the Game Board - Header and Footer.mp4

11:09

18. Calculating the Winner.mp4

13:30

19. Displaying the Winner.mp4

14:33

20. Determining a Draw Condition.mp4

05:43

21. React Lifecycle Events.mp4

03:16

22. Initializing the Game.mp4

06:15

23. Suggesting a Move - Implementing a Computer Player.mp4

11:55

24. Smart Computer Player (Basic AI).mp4

19:00

25. CSS Variables.mp4

07:06

26. Conditional Rendering.mp4

08:15

27. Deploy to Netlify.mp4

06:00

28. Deploy to Surge.mp4

02:39

29. Project Summary.mp4

02:34

8. Project 3 - Build an E-Commerce Site in React

1. Project Introduction - What We Build.mp4

01:53

2. Scaffolding the Project.mp4

03:57

3. Intro to JSON Server.mp4

04:00

4. Fetch API.mp4

10:33

5. Styling the Store.mp4

04:07

6. Rendering the Categories.mp4

10:48

7. Binding the Products.mp4

08:05

8. Refactor the Fetch API call.mp4

08:49

9. Dealing with errors in Fetch API.mp4

08:25

10. Tidy the Fetch API call.mp4

02:21

11. Styling the Product List.mp4

13:00

12. Installing React Router.mp4

06:07

13. Fixing the Key Warning.mp4

03:56

14. React Router - Detail Page.mp4

12:24

15. Fetch API - Get Product By Id.mp4

08:55

16. Product Description.mp4

05:25

17. Intro to Styled Components.mp4

13:00

18. Styled Components - Product Description.mp4

03:07

19. Dangerously Set HTML (Yeah Really).mp4

04:07

20. Refactor the Categories.mp4

08:23

21. Refactor the Layout.mp4

05:25

22. Refactor the Home Page.mp4

05:50

23. Intro to Context in React.mp4

08:53

24. UseContext Hook and UseReducer Hook in React.mp4

17:59

25. Basket Layout.mp4

11:11

26. Implementing the Basket.mp4

06:22

27. Implementing Basket Icons.mp4

04:36

28. Implementing Basket Total.mp4

07:50

29. Finishing the Checkout.mp4

01:07

30. Checkout - Fixing the State.mp4

12:31

31. Implementing the Order Confirmation.mp4

06:43

32. Intro to Local Storage.mp4

13:07

33. Implementing Search Results.mp4

14:23

34. Better Searching with Debouncing.mp4

07:36

35. Validating Forms in React - Part 1.mp4

08:47

36. Validating Forms in React - Part 2.mp4

09:15

37. Validating Forms in React - Part 3.mp4

08:11

38. Validating Forms in React - Part 4.mp4

07:55

39. Project Summary.mp4

02:45

Description

Build: Mobile Responsive Web Pages using CSS | Dynamic Web Apps in React | Interactive UI Components | E-Commerce Sites

What You'll Learn?

Learning the Foundations of HTML, CSS, JavaScript
Understanding the basic structure of a web page
Working with HTML, CSS, and JavaScript syntax
Building Lists, Formatting Text, and working with Tabular Data in HTML
Building Forms using Post vs. Get Method
Building Navigation Components such as Menus, Input Areas, and Buttons in HTML
Building Responsive Web Page layouts using Cascading Style Sheets (CSS)
Working with DIVs, IDs, and Style Properties in CSS
Styling Images, Backgrounds, Borders, and Text on Top of Images in CSS
Working with CSS Positioning (Static, Relative, Absolute, Fixed, Float)
Styling Links and Tables in CSS
Understanding the Document Object Model (DOM)
Building Simple Interactive Web Page components using JavaScript
Working with JavaScript Arithmetic Operators and Data Types
Exploring JavaScript Arrays, Loops, and Events
Understanding Operator Precedence, Objects, and Functions in JavaScript
Building Dynamic Web Apps in React
Debugging and React Events
Exploring Code Pen, JSON Server, and React Props
Working with the React State Hook and Styling React Projects

Who is this for?

Students interested in the Foundations of HTML, CSS, and JavaScript

Students interested in building mobile-responsive web layouts using HTML, CSS, and JS

Students interested in building Dynamic Web Apps using React

Students interested in mastering the art of front-end development

More details

Description
This course is designed to teach students the fundamental concepts and skills needed to build modern, responsive web pages. The course covers key topics including the basic structure of a web page, building mobile responsive web apps, working with HTML, CSS, and JavaScript syntax, and building various web components using these languages.

First, students learn the structure of a web page and how to create mobile responsive sites that adapt to different screen sizes and devices. This will include an introduction to HTML, which is the markup language used to create basic web page structure. Students will learn various HTML elements and how to use them to create headings, paragraphs, lists, images, and other static content.

Next, students explore CSS, the language used for styling and layout customization. CSS works in conjunction with HTML to create visually appealing site designs that stand out. Here, students learn to effectively use CSS selectors, properties, and values. This will include an introduction to responsive web design and using CSS media queries to create web pages that adapt to different screen sizes.

In addition to learning the basics of HTML and CSS, students will also learn JavaScript, the programming language used to add interactivity and dynamic functionality to web pages. Students will learn the Document Object Model (DOM) and how to use JavaScript to dynamically manipulate page elements. We also explore JavaScript events, loops, arrays, and other programming concepts.

The course will also cover more advanced topics such as building navigation components using HTML, creating forms using the post vs. get method, and working with DIVs, and IDs. We also cover styling images, backgrounds, borders, and text on top of images in CSS. Students will learn the different CSS positioning options (static, relative, absolute, fixed, float) and how to use them to create complex web page layouts.

In the JavaScript section of the course, students learn the Document Object Model (DOM) and how to use JavaScript to manipulate the elements of a web page. Here we explore, events, loops, arrays, and other programming concepts such as operator precedence, objects, and functions.
Once students have a handle on the foundational three languages, we dive into React JS â€“ a powerful JavaScript library used for building stylish, dynamic web applications and UI components. Through a series of hands-on projects, students will build a fully functional connect-4 game, a calculator, and an e-commerce site complete with categories, checkout features, and more.

This course is designed for students with little or no previous experience in web development, but it can also be beneficial for students who have some experience and are looking to improve their skills. With the knowledge and skills gained in this course, students will be prepared to take on more advanced web development projects and to continue learning about new web development technologies.
Who this course is for:
Students interested in the Foundations of HTML, CSS, and JavaScript
Students interested in building mobile-responsive web layouts using HTML, CSS, and JS
Students interested in building Dynamic Web Apps using React
Students interested in mastering the art of front-end development

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.