Learn Complete Front-End Web Development Course (2023)

Focused View

Fatah Gabrial

38:38:57

65 View

01 - Introduction to HTML

001 Choosing The Right Browser.mp4

03:01

002 Choosing the right code editor.mp4

03:28

003 Download and Install VS Code.mp4

02:20

004 What is HTML.mp4

01:46

005 Whats the web made of.mp4

01:58

006 What do HTML, CSS, and JavaScript do.mp4

01:59

external-links.txt

02 - Text Formatting in HTML

001 HTML Syntax.mp4

04:09

002 Paragraph Tag in Practical.mp4

06:28

003 Headings in HTML.mp4

05:24

004 Bolds and Italics in HTML.mp4

04:57

005 Lists in HTML.mp4

12:43

006 Types of Elements.mp4

04:08

007 Quotes in HTML.mp4

03:30

008 Date and Time in HTML.mp4

07:59

009 Kbd Code Pre and Br Tag.mp4

06:43

010 Subscript Superscript and Small Tag.mp4

03:57

03 - HTML Essentials

001 Attributes in HTML.mp4

07:05

002 ARIA in HTML.mp4

04:54

003 Blank Spaces and Comments.mp4

01:16

004 Uppercase and Lowercase.mp4

00:37

005 Types of Tags.mp4

01:53

006 Non Breaking Space.mp4

03:48

007 Links and Anchor Tags.mp4

04:39

008 Absolute URLs.mp4

01:08

009 Relative URLs.mp4

05:15

010 Organizing Files.mp4

01:56

011 Naming Files.mp4

04:45

012 HTML Navigation.mp4

06:37

04 - Images in HTML

001 Images in HTML.mp4

04:06

002 Image File Formats.mp4

03:06

003 Responsive Images in HTML.mp4

04:57

004 Responsive Images Based on Width.mp4

01:36

005 Responsive Picture Tag.mp4

03:21

006 Figure and Fig-Caption Tag.mp4

01:47

05 - Multimedia in HTML

001 Audio in HTML.mp4

06:12

002 Video in HTML.mp4

06:08

003 Video Captions and Subtitles.mp4

07:30

004 Embedding Videos with iFrame.mp4

03:09

06 - Content in HTML

001 Languages in HTML.mp4

02:57

002 The Div and The Span Tag.mp4

01:08

003 The Document Structure.mp4

01:33

004 Inside the Head Tag.mp4

07:03

005 Inside the Body Tag.mp4

02:31

006 Creating a Basic Page.mp4

02:56

07 - Form Elements in HTML

001 Form Elements.mp4

07:34

002 Input Types in Forms.mp4

03:36

003 Phone and Password Field.mp4

02:52

004 URL and Number Field.mp4

02:43

005 Date Time Month Week and More.mp4

07:44

006 Radio Buttons.mp4

03:48

007 Checkbox Fields.mp4

02:09

008 Search and Upload Fields.mp4

04:33

009 The Color Field.mp4

01:28

010 Dropdown Fields in Forms.mp4

08:23

011 Message and Range Field.mp4

03:57

012 Range Fancy Button Hidden Field and Reset.mp4

03:28

013 Wrapping Form Fields.mp4

01:49

08 - Tables in HTML

001 Tables in HTML.mp4

00:51

002 Working with Tables in HTML.mp4

02:50

09 - Getting started with CSS

001 Getting Started with CSS.mp4

00:57

002 Browser Developer Tools.mp4

04:55

003 Placements.mp4

05:58

004 CSS Syntax.mp4

03:41

10 - CSS Essentials

001 CSS Core Concepts.mp4

03:16

002 Color Property Values.mp4

07:23

003 CSS Selectors.mp4

04:29

004 Class and ID in CSS.mp4

02:22

005 Live Example of Class and ID.mp4

06:27

006 Descendant Selectors in CSS.mp4

05:11

007 Grouping Selectors.mp4

02:11

008 Inheritance in CSS.mp4

06:45

009 Pseudo Classes in CSS.mp4

05:36

11 - Understanding Box Model in CSS

001 Getting Started with Box Model.mp4

01:40

002 Inline Block and Display.mp4

06:06

003 Box Model Testing.mp4

05:12

12 - Typography in CSS

001 Introduction to Typography.mp4

03:24

002 Font Weight and Style.mp4

07:18

003 Font-Size and Formatting.mp4

03:25

13 - Layouts in CSS

001 Floats and Clear.mp4

03:57

002 Build a Layout with Floats.mp4

07:26

003 Positions in CSS.mp4

10:59

004 The Z-Index.mp4

06:02

14 - Flexbox and Grid in CSS

001 Flexbox and Grid Systems.mp4

01:51

002 Flex Directions and More.mp4

12:58

003 CSS Grid Essentials.mp4

06:28

15 - Advanced CSS Selections

001 Advanced CSS Selectors.mp4

04:54

002 Pseudo Selectors.mp4

03:41

16 - Building The Website

001 The Website Structure.mp4

13:54

002 Installing Google Fonts for Website.mp4

01:37

003 Styling The Site Header.mp4

05:57

004 Building The Navigation Bar.mp4

07:12

005 Creating a Responsive Image Slider.mp4

05:40

006 Styling The Content Holder.mp4

07:15

007 Styling The Footer.mp4

04:02

008 Creating and Styling Services and Products Page.mp4

06:45

009 Creating and Styling About Page.mp4

02:11

010 Creating and Styling Contact Page.mp4

11:34

17 - Responsive Web Design (RWD)

001 Introduction to Responsive Web Design (RWD).mp4

02:59

002 How Responsive Web Design Works.mp4

06:24

003 Creating Responsive Header.mp4

04:09

004 Creating Responsive Navigation Bar.mp4

08:13

005 Creating Responsive Banner Slider.mp4

01:05

006 Creating Responsive Content Holder.mp4

02:02

007 Creating Responsive Footer.mp4

01:46

18 - JavaScript - Getting Started

001 Introduction to JavaScript.mp4

02:08

002 What you should know.mp4

00:37

003 Hello World.mp4

01:14

004 JavaScript Statements.mp4

02:32

005 Placements in JavaScript Part-1.mp4

01:11

006 Placements in JavaScript Part-2.mp4

03:14

19 - JavaScript - Fundamentals

001 Variables in JavaScript.mp4

01:59

002 Conditions in JavaScript.mp4

03:00

003 Operators in JavaScript.mp4

08:47

004 Working with Browser Console.mp4

02:38

005 Loops in JavaScript.mp4

07:42

006 Functions in JavaScript.mp4

05:02

007 Creating Custom Loops with Functions.mp4

04:06

20 - JavaScript - Data Types

001 Working with Arrays.mp4

03:32

002 Numbers in JavaScript.mp4

04:23

003 Strings in JavaScript.mp4

04:30

004 Working with Dates Object.mp4

02:36

005 Objects in JavaScript.mp4

02:48

21 - JavaScript DOM - Document Object Model

001 DOM in JavaScript.mp4

03:04

002 Element Node Types.mp4

00:52

003 Working with DOM Elements.mp4

05:13

004 Changing Contents of DOM.mp4

01:52

005 Creating New Elements with JavaScript.mp4

03:27

006 Adding Events to DOM Elements.mp4

03:47

007 Working with Form Elements.mp4

02:01

008 Timers in JavaScript.mp4

01:15

22 - JavaScript - Advanced

001 Debugging in JavaScript.mp4

03:12

002 Creating Modern Live Validation Forms.mp4

08:20

003 Minify & Validate JavaScript.mp4

04:34

004 Using JavaScript Libraries.mp4

05:20

005 Working with Modern JavaScript.mp4

02:11

006 Making Use Of Use Strict.mp4

03:53

007 JavaScript Bad Practices.mp4

02:16

008 JavaScript Regular Expressions.mp4

02:12

23 - ECMA Script 6 (JavaScript ES6)

001 Introduction to ES6.mp4

00:52

002 What you should know.mp4

00:24

003 What is ES6.mp4

00:25

004 Transpiling in ES6.mp4

00:34

005 Why use Babel JS.mp4

00:25

006 How to use Babel JS.mp4

02:09

007 Installing Node JS.mp4

01:23

24 - ECMA Script 6 (ES6) - Fundamentals

001 Let Syntax in ES6.mp4

05:20

002 Using The Const Keyword.mp4

03:35

003 Working with Template Strings.mp4

05:02

004 Spread Operator in JavaScript ES6.mp4

02:59

005 Default Function Parameters in ES6.mp4

03:11

006 Working with Object Literals in ES6.mp4

03:49

007 Arrow Functions in JavaScript ES6.mp4

02:08

008 Arrow Functions with This Scope in ES6.mp4

04:12

009 Destructuring in JavaScript ES6.mp4

06:24

010 Generators in JavaScript ES6.mp4

05:24

011 Working with Class Syntax in JavaScript ES6.mp4

02:52

012 Class Inheritance in JavaScript ES6.mp4

01:48

25 - Bootstrap 5 - Getting Started

001 Introduction to Bootstrap 5.mp4

02:55

002 What you will need.mp4

02:16

003 Hello World.mp4

06:30

004 Bootstrap Document Structure.mp4

01:20

26 - Bootstrap 5 - Layouts

001 Breakpoints in Bootstrap 5.mp4

04:02

002 Container Types.mp4

02:28

003 Grid.mp4

06:01

004 Grid Options.mp4

05:32

005 Nesting Rows and Columns.mp4

03:17

006 Column Vertical Alignment.mp4

06:22

007 Column Horizontal Alignment.mp4

05:30

008 Column Wrapping and Column Breaks.mp4

03:28

009 Reordering and Offsetting Columns.mp4

05:38

010 Margin Utilities.mp4

06:34

011 Gutters.mp4

00:49

012 Horizontal Gutters.mp4

05:17

013 Vertical Gutters.mp4

02:06

014 Horizontal and Vertical Gutters.mp4

02:47

27 - Bootstrap 5 - Contents

001 Typography.mp4

04:42

002 Inline Text Elements.mp4

05:46

003 Abbreviations and Blockquotes.mp4

05:03

004 Working with Lists.mp4

05:40

005 Images in Bootstrap.mp4

06:20

006 Tables in Bootstrap.mp4

15:36

007 Table Alignment, Nesting and Anatomy.mp4

06:16

008 Figures in Bootstrap.mp4

03:06

28 - Bootstrap 5 - Forms

001 Forms in Bootstrap.mp4

05:58

002 Form Control.mp4

13:38

003 Checks and Radios.mp4

11:38

004 Range.mp4

03:34

005 Input Groups.mp4

23:14

006 Floating Labels.mp4

05:07

007 Form Layout.mp4

10:11

008 Horizontal Forms.mp4

06:06

009 Auto Sizing Forms.mp4

07:28

010 Inline Forms.mp4

07:10

011 Form Validation.mp4

08:51

29 - Bootstrap 5 - Components

001 Accordions.mp4

10:04

002 Alerts.mp4

06:28

003 Dismissing Alerts.mp4

02:32

004 Badges.mp4

11:37

005 Breadcrumb.mp4

06:46

006 Buttons.mp4

20:54

007 Button Group.mp4

08:14

008 Button Toolbar.mp4

04:59

009 Button Group Alteration.mp4

06:06

010 Card.mp4

12:39

011 Card Sizing.mp4

03:05

012 Card Navigation.mp4

03:44

013 Card Images.mp4

07:38

014 Card Styles.mp4

08:48

015 Carousel.mp4

03:41

016 Carousel Controls.mp4

03:20

017 Carousel Indicators.mp4

03:01

018 Carousel Caption.mp4

03:46

019 Carousel Fade Effect.mp4

02:12

020 Carousel Timing.mp4

02:09

021 Disable Carousel Touch Swiping.mp4

01:13

022 Carousel Dark Variant.mp4

00:49

023 (Bootstrap 5.3 Update) Deprecation of Carousel Dark & The New Method.mp4

03:05

024 Close Button.mp4

02:52

025 (Bootstrap 5.3 Update) Deprecation of btn-close-white & The New Method.mp4

02:04

026 Collapse.mp4

04:19

027 Horizontal Collapse.mp4

02:48

028 Multiple Targets.mp4

04:34

029 Dropdowns.mp4

04:54

030 Split Button.mp4

03:15

031 Dropdown Sizing.mp4

02:19

032 Dark Dropdowns.mp4

01:20

033 (Bootstrap 5.3 Update) Deprecation of Dark Dropdowns & The New Method.mp4

01:59

034 Dropdown Directions.mp4

06:09

035 Dropup and Dropdown Alignment.mp4

07:22

036 Menu Items.mp4

06:25

037 Menu Alignment.mp4

04:40

038 Dropdown Alignment Options.mp4

06:43

039 Menu Contents.mp4

03:36

040 Dropdown Forms.mp4

04:01

041 Dropdown Options.mp4

04:03

042 Dropdown Auto Close.mp4

02:42

043 List Group.mp4

02:24

044 List Group Links and Buttons.mp4

03:31

045 List Group Flush.mp4

00:51

046 Numbered List.mp4

02:36

047 Horizontal List Groups.mp4

03:06

048 Contextual List Group Classes.mp4

03:11

049 List Group with Badges.mp4

02:08

050 List Group with Custom Content.mp4

02:58

051 List Group Checkboxes and Radios.mp4

02:46

052 List Group JavaScript Tabs.mp4

09:17

053 Modals.mp4

06:08

054 Static Backdrop.mp4

02:02

055 Scrolling Long Content.mp4

01:53

056 Vertically Centered.mp4

00:46

057 Modal Tooltips and Popovers.mp4

06:37

058 Using Grid system in Modal.mp4

01:28

059 Varying Modal Content.mp4

09:47

060 Toggle Between Modals.mp4

06:50

061 Optional Modal Sizes.mp4

03:06

062 Navbar.mp4

04:05

063 (Bootstrap 5.3 Update) The All New bg-body-tertiary.mp4

02:28

064 Navigation Links.mp4

06:05

065 Navbar Dropdown.mp4

03:17

066 Navbar Nested Dropdown.mp4

05:22

067 Navbar Forms.mp4

01:54

068 Navbar Input Group.mp4

00:57

069 Navbar Plain Text.mp4

01:03

070 Navbar Colors.mp4

02:01

071 (Bootstrap 5.3 Update) The Navbar Dark-Mode.mp4

01:55

072 (Bootstrap 5.3 Update) The New Navbar Color.mp4

03:29

073 Navbar Containers.mp4

04:00

074 Navbar Placement.mp4

05:02

075 Navbar Scrolling.mp4

02:15

076 Off Canvas Navbar.mp4

10:57

077 Navs and Tabs.mp4

10:10

078 Nav Flex Utilities.mp4

02:09

079 Nav Tabs and Pills with Dropdown.mp4

04:15

080 Tabs and Pills Behaviors.mp4

12:10

081 Offcanvas In-Depth.mp4

06:58

082 (Bootstrap 5.3 Update) Offcanvas Dark-Mode.mp4

01:58

083 Offcanvas Scrolling.mp4

02:35

084 Offcanvas Placement.mp4

02:33

085 Pagination.mp4

06:15

086 Placeholders.mp4

08:44

087 Popovers In-Depth.mp4

05:46

088 Popover Direction.mp4

01:37

089 Custom Popovers.mp4

03:02

090 Dismiss on next click.mp4

01:09

091 Enable Popover on Hover.mp4

00:48

092 Progress Bars.mp4

03:30

093 Progress bar height and Background.mp4

01:48

094 Stripes and Animation.mp4

01:10

095 (Bootstrap 5.3 Update) The New Progress Bar.mp4

05:19

096 (Bootstrap 5.3 Update) Progress Bar Height.mp4

01:31

097 (Bootstrap 5.3 Update) Labels and Backgrounds in Progress Bars.mp4

03:44

098 (Bootstrap 5.3 Update) Multiple Stacked Progress Bars.mp4

04:44

099 (Bootstrap 5.3 Update) Stripped and Animated Progress Bars.mp4

02:40

100 Scrollspy.mp4

11:16

101 Spinners.mp4

01:37

102 Growing Spinner.mp4

01:03

103 Spinner Alignment.mp4

04:40

104 Spinner Sizes.mp4

01:54

105 Spinner in Buttons.mp4

02:55

106 Toasts.mp4

16:53

107 Toast Alignment.mp4

02:46

108 Tooltips In-Depth.mp4

03:40

109 Custom Tooltip.mp4

02:32

110 Tooltip Directions.mp4

01:49

111 HTML in Tooltip.mp4

01:41

112 Tooltip on Disabled Elements.mp4

01:45

30 - Bootstrap 5 - Helpers

001 Clearfix.mp4

01:41

002 Colors and Background.mp4

03:41

003 Colored Links.mp4

01:17

004 (Bootstrap 5.3 Update) Link Utilities.mp4

05:43

005 (Bootstrap 5.3 Update) Focus Rings.mp4

05:06

006 (Bootstrap 5.3 Update) Icon Links.mp4

04:39

007 Ratios.mp4

02:42

008 Positions.mp4

04:18

009 Stacks.mp4

07:23

010 Visually Hidden.mp4

00:46

011 Stretched Link.mp4

02:39

012 Text Truncate.mp4

02:19

013 Vertical Rule.mp4

02:13

31 - Bootstrap 5 - Utilities

001 Backgrounds.mp4

01:48

002 (Bootstrap 5.3 Update) Additional Background Colors.mp4

03:42

003 Background Gradients.mp4

00:59

004 Background Opacity.mp4

02:22

005 Borders.mp4

03:53

006 Border Color.mp4

03:06

007 Border Opacity.mp4

01:56

008 Border Width.mp4

01:10

009 Border Radius.mp4

01:49

010 Rounded Border Sizes.mp4

02:15

011 Text Colors.mp4

01:34

012 Text Opacity.mp4

01:39

013 Display Inline and Block.mp4

02:45

014 Hiding Elements.mp4

03:31

015 Display in Print.mp4

02:30

016 Flex.mp4

02:03

017 Flex Direction.mp4

05:41

018 Flex Justify Content.mp4

02:37

019 Flex Align Items.mp4

03:44

020 Flex Align Self.mp4

03:58

021 Flex Fill.mp4

02:39

022 Flex Grow and Shrink.mp4

03:27

023 Flex Auto Margins.mp4

01:17

024 Flex with Align Items.mp4

01:53

025 Flex Wrap.mp4

02:18

026 Flex Order.mp4

03:44

027 Flex Align Content.mp4

03:57

028 Flex Media Object.mp4

03:36

029 Responsive Float.mp4

02:35

030 Interactions.mp4

04:49

031 (Bootstrap 5.3 Update) Link Opacity.mp4

03:46

032 (Bootstrap 5.3 Update) Link Underlines.mp4

05:45

033 (Bootstrap 5.3 Update) Colored Links.mp4

02:26

034 (Bootstrap 5.3 Update) Object Fit.mp4

04:17

035 (Bootstrap 5.3 Update) Responsive Object Fit.mp4

04:49

036 Opacity.mp4

01:17

037 Overflow.mp4

03:02

038 Position.mp4

02:32

039 Position Center Elements.mp4

02:23

040 Position Center Elements within Edges.mp4

03:39

041 Position Examples Part 1.mp4

08:31

042 Position Example Part 2.mp4

05:17

043 Shadow.mp4

02:01

044 Sizing.mp4

05:28

045 Spacing.mp4

03:55

046 Gap.mp4

01:40

047 Text Alignment.mp4

02:46

048 Text Wrap.mp4

01:30

049 Text Break.mp4

01:04

050 Text Transform.mp4

01:47

051 Font Size.mp4

01:05

052 Font weights and italics.mp4

02:31

053 Line Height.mp4

01:34

054 Monoscope.mp4

01:06

055 Reset Color.mp4

01:26

056 Text Decoration.mp4

01:57

057 Vertical Alignment.mp4

03:52

058 Visibility.mp4

00:57

059 (Bootstrap 5.3 Update) The Z-Index.mp4

04:51

060 Bootstrap Icons.mp4

06:29

32 - Bootstrap 5 Project 1 - EMS App

001 Introduction to EMS2.0 Project.mp4

03:08

002 Creating the Login Page.mp4

09:04

003 Creating Dash Nav and Brand Logo.mp4

05:59

004 Creating the Navbar Toggler.mp4

02:08

005 Creating Navbar Items.mp4

02:40

006 Creating Form Fields for Navbar.mp4

04:56

007 Creating Cards for Dashboard.mp4

03:32

008 Creating Employees List Page.mp4

01:59

009 Creating Employees Page Sidebar.mp4

03:37

010 Creating Employees List Table.mp4

07:15

011 Creating Add Employee Modal.mp4

04:49

012 Creating Add Employee Modal Form.mp4

06:49

013 Creating Details Modal for Employee List.mp4

07:07

014 Creating Edit Details for Employee List.mp4

05:04

015 Creating Delete Modal for Employees List.mp4

05:15

016 Creating Jobs List Page.mp4

01:42

017 Updating the Job List Page.mp4

03:27

018 Creating Job List Table.mp4

01:31

019 Creating Add Job Modal.mp4

02:17

020 Creating Details Modal for Job.mp4

02:05

021 Creating Edit Details for Job Modal.mp4

02:52

022 Creating Delete Modal for Job List.mp4

03:43

external-links.txt

33 - Bootstrap 5 Project 2 - BLOG2.0 App

001 Blog Project Introduction.mp4

01:21

002 Whats Required for Template Building.mp4

03:03

003 Creating The Index File.mp4

02:18

004 Creating The Navbar and Brand Logo.mp4

02:31

005 Creating Navbar Toggler.mp4

01:27

006 Creating Navbar Items.mp4

03:01

007 Creating The Search Field.mp4

02:02

008 Creating The Home Banner.mp4

06:29

009 Creating The Subscribe Modal.mp4

06:42

010 Creating Home Posts Section.mp4

05:48

011 Creating Blog Footer.mp4

01:20

012 Adding Custom Effects To Navbar.mp4

02:28

013 Creating Default Page Header.mp4

03:33

014 Creating Post Loop For Default Page.mp4

05:40

015 Creating Sidebar Subscribe Form.mp4

03:00

016 Creating Categories and Archive Widgets.mp4

02:35

017 Creating Page and Post Content Area.mp4

05:00

018 Creating Comment Form for Posts.mp4

03:23

019 Creating The Search Page.mp4

02:06

020 Linking Everything Together.mp4

02:43

external-links.txt

34 - Bootstrap 5 Project 3 - Professional Website

001 Introduction To Project.mp4

01:51

002 Setting Up Project Folder.mp4

01:17

003 Creating Navbar and Brand.mp4

02:57

004 Creating Navbar Toggler.mp4

01:45

005 Creating Nav Items.mp4

03:12

006 Creating Navbar Search Field.mp4

01:42

007 Creating Navbar Sign-Up and Login Buttons.mp4

06:50

008 Creating The Banner Text.mp4

05:44

009 Adding Banner Image.mp4

02:24

010 Creating Site Feature Set.mp4

06:43

011 Creating Course Loop Header.mp4

04:38

012 Creating Course Loop Filter.mp4

04:11

013 Creating Course Loop Header.mp4

02:01

014 Creating Single Course List Item.mp4

07:19

015 Creating Duplicates of Course Items.mp4

00:39

016 Creating Home Page Content.mp4

04:18

017 Adding Home Content Image.mp4

00:47

018 Creating Subscribe Area.mp4

07:24

019 Creating Main Footer.mp4

01:44

020 Creating Footer Address.mp4

02:44

021 Creating Link Items For Footer.mp4

01:42

022 Creating Social Icons.mp4

04:45

023 Creating Copyright Info.mp4

01:44

024 Creating Sticky Footer.mp4

06:19

025 Creating About Page Header.mp4

05:52

026 Creating About Content Section.mp4

03:11

027 Creating The Courses Page.mp4

04:20

028 Creating Single Course Page And Breadcrumb.mp4

05:44

029 Creating Course Header Description and Meta Data.mp4

06:12

030 Creating Course Meta Data.mp4

03:26

031 Adding Icons To Course Meta Data.mp4

05:18

032 Adding Course Buttons.mp4

03:28

033 Creating Single Course Image.mp4

01:33

034 Creating Single Course Contents.mp4

07:02

035 Creating FAQ Header.mp4

02:14

036 Creating FAQ List.mp4

03:18

037 Creating Post Question Form.mp4

04:26

038 Creating Blog Page and Header.mp4

02:17

039 Creating Blog Posts List.mp4

05:01

040 Creating Blog Sidebar.mp4

02:16

041 Creating Subscribe Modal.mp4

05:22

042 Creating The Subscribe Form.mp4

02:23

043 Creating Single Post Page.mp4

04:38

044 Creating Contact Page Header.mp4

05:07

045 Creating Contact Page Cards.mp4

06:12

046 Creating Contact Modal.mp4

02:39

047 Linking Everything Together.mp4

04:09

external-links.txt

35 - Angular - Getting Started

001 Introduction to Angular.mp4

01:39

002 What you should know.mp4

01:08

003 What you need to get started.mp4

01:02

004 Installing Node JS.mp4

01:42

005 Installing Angular.mp4

02:03

006 Installing Cmder for Angular.mp4

02:19

36 - Angular - Fundamentals

001 Setting up Angular Project.mp4

01:46

002 Install VS Code for Angular.mp4

01:27

003 Creating the Hello World Project in Angular.mp4

03:06

004 Angular App Directory Structure.mp4

03:49

005 Creating New Components in Angular.mp4

03:14

006 Creating Styles for Angular Components.mp4

04:19

007 Adding Bootstrap & jQuery to Angular Project.mp4

08:13

008 Interpolation in Angular.mp4

02:42

009 Data Binding in Angular.mp4

02:33

010 Ng If Else Directives in Angular.mp4

03:09

011 Event Binding in Angular.mp4

02:55

012 Pipes in Angular.mp4

01:33

013 Input Decorator in Angular.mp4

05:16

014 Creating Services in Angular.mp4

04:29

015 HTTP Client Module in Angular.mp4

05:59

37 - React JS - Getting Started

001 Introduction to React JS.mp4

01:19

002 Installing Browser Tools.mp4

01:11

003 Installing Node JS for React.mp4

01:23

004 Install VS Code for React.mp4

01:27

005 Hello World in React JS.mp4

02:54

006 JSX in React JS.mp4

03:09

external-links.txt

38 - React JS - Fundamentals

001 What is a Component in React JS.mp4

01:12

002 Create First React Component.mp4

01:57

003 Stateless Component in React JS.mp4

01:03

004 Props in React JS.mp4

03:12

005 Events in React JS.mp4

04:21

006 State in React JS.mp4

04:26

007 Adding State to Note Component.mp4

04:28

008 Refs in React JS.mp4

02:08

39 - React JS - Project Sticky Notes

001 Creating Board With Props in React JS.mp4

02:10

002 Adding Child Elements to Board.mp4

03:30

003 Updating & Deleting Notes.mp4

09:51

004 Adding Notes.mp4

03:45

005 Keys in React JS.mp4

04:57

006 Mounting Components.mp4

04:51

007 Setting Default Styles.mp4

01:51

008 Updating Components.mp4

02:50

009 Making React Components Draggable.mp4

03:18

010 Setup & Install Create React App.mp4

02:05

011 Building Scratch Pad With React JS.mp4

06:57

40 - Create React App - Getting Started

001 Introduction to Create React App.mp4

00:36

002 Prerequisites.mp4

00:42

41 - Create React App - What is React

001 What is React.mp4

00:55

002 Install React Tools on Chrome.mp4

01:38

003 Install React Tools on Firefox.mp4

01:08

42 - Create React App - React Elements

001 Install Create-React-App.mp4

04:36

002 Project Generation.mp4

02:22

003 Creating React Elements.mp4

03:42

004 Using JSX to Refactor Elements.mp4

04:11

43 - Create React App - Components in React

001 Creating React Components.mp4

02:10

002 Creating Different Components.mp4

05:17

003 Component Properties.mp4

05:00

004 Working with Lists.mp4

03:24

005 Adding Keys to List Items.mp4

04:48

006 Display Images in React.mp4

06:25

007 Working with Fragments.mp4

04:01

44 - Create React App - State in React Component

001 Conditional Rendering.mp4

06:46

002 Destructureing Arrays and Objects.mp4

03:28

003 Working with useState Hook.mp4

07:01

004 Working with useEffect.mp4

06:16

005 Incorporating useReducer with React.mp4

04:58

45 - Create React App - React Asynchronous

001 Using Hooks to Fetch Data.mp4

05:15

002 Displaying Data from API with React.mp4

03:14

003 Handling Loading States.mp4

05:03

46 - Create React App - Testing in React

001 Testing Platform using Create React App.mp4

02:01

002 Using Jest to Test Small Functions.mp4

03:09

003 Testing Library in React.mp4

04:06

004 Testing Hooks with React Testing Library.mp4

06:36

47 - Create React App - Working with React Routers

001 Installing and Setting up React Routers.mp4

03:17

002 React Routers Configuration.mp4

05:10

003 Linking Components Together.mp4

06:53

48 - React Project - Introduction

001 Introduction to React Project.mp4

01:05

49 - React Project - Setting-Up and Installation

001 Installing Requirements.mp4

02:18

002 Create React App Installation.mp4

04:28

003 Clean up React Application.mp4

03:25

004 Using External Components.mp4

05:00

005 Installing Bootstrap CSS in React.mp4

08:24

006 Customizing Bootstrap Components in React.mp4

04:03

50 - React Project - Developing Project

001 Building your first Component.mp4

10:10

002 Sub Component Hooks.mp4

02:55

003 Adding Appointments into our Project.mp4

11:32

004 Creating JSON Data for Demo Users.mp4

04:06

005 Importing JSON Data into React Part-1.mp4

06:19

51 - React Project - Setting-up Sort and Search Functionality

001 Sending Data to the Component.mp4

06:40

002 Conditional Classes and useState Hooks.mp4

05:26

52 - React Project - Manipulation Data

001 Working with useEffect and useCallback.mp4

04:33

002 Deleting Data.mp4

06:48

003 Searching Data with Filters.mp4

07:31

004 Working with Sort.mp4

05:37

005 Applying the Sort Algorithm.mp4

16:39

006 Adding New Appointments.mp4

15:07

Description

Learn Complete Front End Web Development with HTML5, CSS3, Bootstrap 5, JavaScript, ECMAScript 6, Angular & React JS

What You'll Learn?

You will learn complete front-end web development from scratch
You will learn to build Modern websites Angular & React JS
You will learn to build Bootstrap 5 Web Applications
You will learn HTML5 & CSS3 from scratch, & build a full working website
You will learn Complete JavaScript + ECMA Script 6 (ES6) from scratch
You will build front-end Reactive Web applications with CRUD

Who is this for?

Anyone who is interested to learn Front-End Web development from Scratch

Anyone who wants to start career in web development

What You Need to Know?

All you need is a PC / Laptop

Decent internet connectivity

More details

Description
(June 2023 - Update) Updated Bootstrap Section to Bootstrap 5.3
The course is now updated with the latest version of Bootstrap 5.3
In this Front-End Web Development - Complete Guide (Step by Step) [Updated 2023] you will learn complete front-end web development from scratch. As part of the course, You will learn complete HTML5, and CSS3 step by step.
Later you will learn how to use, integrate or add user interactivity with the help of JavaScript. This course also covers the latest JavaScript version which is ECMA Script learn the modern JavaScript techniques with ECMA Script 6 or later.
The next big step would be to learn Bootstrap 5 which is the latest and the most popular CSS framework available. Here you will learn to create 3 Live Projects. In the 1st project, you will learn to create an EMS Web App also known as Employee Management System.
2nd the project we will see how to create a full blog for beginners to Advanced Levels. For the 3rd project, you will create a professional website.
Once you have completed Bootstrap 5 the next topic would be to get started with Angular. In the Angular Topic, you will learn the beginnerâ€™s level to integrate angular to any HTML5 and CSS3 App.
Then with the help of React JS, we will see how to build a Scratch Pad App from Beginner to Advanced level. After that you will learn about Create React App tool, used to build React applications. With the help of Bootstrap 5, you will learn to build a Practical web application with React.
As the project, you will learn to create a web application, which will manage the user data via API. In the web application, we allow the users to create new data, Read data and also Delete data from the application itself.
I will be always available in the Q & A section for any help. Please feel free to ask any doubts and queries during the course.
All the best, hope you enjoy the course.
Who this course is for:
Anyone who is interested to learn Front-End Web development from Scratch
Anyone who wants to start career in web development

User Reviews

Rating

average 0

Total votes0

Focused display

Hi, my name is Fatah Gabrial and I am a Graphic Designer, Web Designer, Web Developer, and SEO Enthusiast. I have been teaching Graphic Design, Web Design, and Web Development to my students since 2010, and I have helped more than 1000’s students to build their careers, and I have helped more than 100’s students to set up their businesses.I am a Freelancer and I work on many projects from time to time. I share my projects with my students with my client's consent of course so that my students can have a Real-Time experience of how the Real-World Projects work. This helps my students to crack almost any interviews.I love to code, and I love to design more than anything. I also love to adapt to new technologies, which also helps me in learning some new stuff, which I can share with my students later on.In addition, I have worked with many technologies, like WordPress, Adobe Photoshop, HTML5, CSS3, JavaScript, ES6+, jQuery, Angular, React, Python, and Django. I also work with some marketing and optimization techniques like SEO – Search Engine Optimization, Digital Marketing, and Social Media Marketing.Here at Udemy, I am going to share all my skills with you guys. I love to create courses for you so that you guys can master all the technologies as I have done throughout my experience.I am always here and available in the Q & A Section, so you can get in touch with me anytime on Udemy, My Social Media Profiles, or my Website.

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.