Front-End Engineering Career Programme

Oak Academy

• HTML and CSS 12:56:08

  • 1: Build a Real-World Website With HTML and CSS 02:08
  • 2: General Terms 09:43
  • 3: How the Website Works 02:49
  • 4: What is IDE 08:30
  • 5: First Webpage 11:02
  • 6: What is HTML 02:22
  • 7: HTML Document Structure 09:23
  • 8: Text Element 11:49
  • 9: Lists 05:59
  • 10: Images 07:24
  • 11: Hyperlinks 07:44
  • 12: Container Elements 10:56
  • 13: What is Semantic HTML 03:40
  • 14: Creating Tables with HTML 07:17
  • 15: Colspan & Rowspan 06:19
  • 16: Working With Form Elements 15:16
  • 17: Input Type Checkbox 06:23
  • 18: Input Type Radio and File 07:00
  • 19: Select & Option 06:05
  • 20: New Visual Studio Code Extensions 03:13
  • 21: Challenge 04:00
  • 22: Let's Make the Challenges 16:22
  • 23: Challenge Solutions Continue 10:00
  • 24: What is CSS 03:16
  • 25: Stylink Method Inline, Internal and External 13:17
  • 26: Let’s Do Some Styling (1) 18:47
  • 27: Let’s Do Some Styling 18:47
  • 28: Combining Selectors 07:00
  • 29: Style Operation With Class and Id Assignment 15:20
  • 30: Order of Priority in CSS 09:42
  • 31: Working With Colors 07:48
  • 32: Working With Colors on Code 09:40
  • 33: Using Border in CSS 07:55
  • 34: Pseudo-Class in CSS 12:50
  • 35: Styling Hyperlinks With Pseudo-Class 09:38
  • 36: Crome DevTools 12:51
  • 37: Important Advice for CSS 13:11
  • 38: Challenge 1 26:53
  • 39: Box Model 03:49
  • 40: Margin & Padding 15:55
  • 41: Let's Start Using Margin and Padding 21:36
  • 42: Dimensioning With 16:53
  • 43: Let's Centre Our Page 08:07
  • 44: Challenge 2 15:32
  • 45: Types Of Boxes 16:51
  • 46: Element Positioning With CSS 15:32
  • 47: Use of Fixed and Sticky 11:28
  • 48: Creating Shadow in CSS 10:31
  • 49: Challenge 3 21:15
  • 50: 3 Ways to Create Layout on Web Pages 05:15
  • 51: Float 18:24
  • 52: Flexbox 12:27
  • 53: Flexbox Overview 05:17
  • 54: Let’s Keep Using Flexbox 13:35
  • 55: Flex-Wrap 08:25
  • 56: Adding Flexbox in Our Project 11:36
  • 57: Adding Flexbox to Our Project 2 17:03
  • 58: ÜLet’s Change the Page Layout With Flexbox 08:26
  • 59: Introduction to CSS Grid 12:53
  • 60: What Is CSS Grid 04:44
  • 61: Let’s Continue Examining CSS Grid Features 10:43
  • 62: Other Grid Features 09:12
  • 63: Media Query 03:37
  • 64: Responsive Menu Making With Media Query 08:43
  • 65: CSS Animations 13:39
  • 66: Making a Slider Menu with Transform 09:26
  • 67: Keyframes 04:12
  • 68: Animations Examples With Keyframes 17:17
  • 69: Portfolio Website 04:49
  • 70: Let’s Start Creating the Sections 09:22
  • 71: Let’s Start With Header Creation 18:26
  • 72: Home Section 14:38
  • 73: About Section 05:45
  • 74: Services Section 08:26

• Tailwind 3:51:20

  • 75: Tailwind CSS From Scratch 02:01
  • 76: What Is CSS Framework 04:01
  • 77: Tailwind CSS 03:47
  • 78: Setting Up Tailwind CSS 15:44
  • 79: Working With Color 13:42
  • 80: Text Features 10:13
  • 81: Using Box Model Properties With Tailwind CSS 12:18
  • 82: Responsive Design With Tailwind CSS 11:14
  • 83: Using Flexbox 06:34
  • 84: Using CSS Grid 16:25
  • 85: Styling Buttons and Links 07:39
  • 86: Styling Form Elements 10:09
  • 87: Position Features and z-index 09:03
  • 88: Try Adding Some Custom CSS 07:31
  • 89: Custom Font Family 05:52
  • 90: How to Install Node.js and NPM 05:08
  • 91: Project Presentation 03:50
  • 92: Project Setup 15:02
  • 93: Construction of Navigation Area 21:04
  • 94: Now Let's Make the Header Tag 05:55
  • 95: Let's Create the Main Content 09:34
  • 96: Let's Continue With the Main Tag 19:11
  • 97: Creation of the Form Field 15:23

• Bootstrap 6:19:15

  • 98: Bootstrap 5 03:01
  • 99: How to Integrate Bootstrap Into Applications 13:02
  • 100: Container and Container Fluid 09:40
  • 101: Bootstrap 5 Typography Review 06:58
  • 102: Text Features 11:32
  • 103: Use of Colors 10:18
  • 104: Spacing 10:06
  • 105: Border 08:45
  • 106: 32-Display 09:07
  • 107: 33-Position Relative & Absolute 10:55
  • 108: 34-Position Fixed & Sticky 03:25
  • 109: 35-Sizing 06:26
  • 110: 36-Buttons 06:49
  • 111: 37-Using Images Classes 06:48
  • 112: 38-Other Bootstrap 5 Features 18:10
  • 113: 39-Grid 14:33
  • 114: 40-Using Bootstrap Grid Structure on Different Screen Size 11:15
  • 115: 41-Aligning Columns and Gutters 18:09
  • 116: 42-Let's Start Using Flex with Bootstrap 5 09:45
  • 117: 43-Vertical and Horizontal Alignment in Flex Structure 14:10
  • 118: 44-Other Flexbox Features 07:00
  • 119: 45-List Group 12:24
  • 120: 46-Form Classes 09:18
  • 121: 47-Let's Continue Working with Form Elements 08:58
  • 122: 48-Other Input Features 07:48
  • 123: 49-Creating Tables With Bootstrap 5 15:04
  • 124: 50-Bootstrap Features Working With Javascript 01:49
  • 125: 51-Dropdown 10:34
  • 126: 52-Modal 10:51
  • 127: 53-Carousel 15:08
  • 128: 54-Collapse & Accordion 15:39
  • 129: 55-Project Presentation 03:16
  • 130: 56-Navbar 14:28
  • 131: 57-Let’s Start Creating Carousel 08:40
  • 132: 58- Let’s Start Creating the Main Section 13:58
  • 133: 59-Creation of Students and Questions Sections 07:11
  • 134: 60-Creation of Contact and Footer Section 14:15

• JavaScript 14:06:56

  • 135: Welcome To The Javascript World 02:14
  • 136: Configuration of Code Editor 03:26
  • 137: Let’s Dive In 00:32
  • 138: First Code 03:48
  • 139: Introduction to Javascript 06:55
  • 140: Linking a Javascript File 10:11
  • 141: Values and Variables 13:38
  • 142: Data Types 16:20
  • 143: Let, Const and Var Keywords 07:35
  • 144: Basic Operators 13:24
  • 145: Operator Precedence 08:31
  • 146: Strings and Template Literals 07:28
  • 147: If / Else Statements 07:10
  • 148: Type Conversion and Coercion 15:18
  • 149: Truthy and Falsy Values 08:31
  • 150: Equality Operators 12:43
  • 151: Booleans 08:42
  • 152: Logical Operators 05:17
  • 153: Switch Statement 06:03
  • 154: Statements and Expressions 04:48
  • 155: Ternary Operator 07:19
  • 156: Strict Mode 07:20
  • 157: Functions 17:57
  • 158: Declarations and Expressions 10:11
  • 159: Arrow Functions 09:24
  • 160: Functions Can Call Other Functions 07:38
  • 161: Recap 14:21
  • 162: Arrays 19:00
  • 163: Basic Array Operations 11:53
  • 164: Objects 05:36
  • 165: Object Notations 11:16
  • 166: Object Methods 19:39
  • 167: The For Loop 10:13
  • 168: Looping Arrays 19:32
  • 169: Looping Backwards 10:18
  • 170: The While Loop 10:34
  • 171: Project What is in the box? 08:13
  • 172: DOM ( Document Object Model ) 07:03
  • 173: Selecting and Manipulating Elements 08:25
  • 174: Click Events 14:01
  • 175: Game Logic 1 08:51
  • 176: Game Logic 2 09:37
  • 177: CSS Styles 05:32
  • 178: Reset Button 08:15
  • 179: Highscores 06:45
  • 180: Refactor 13:51
  • 181: Project Rock Paper Scissors 03:10
  • 182: Selecting Elements 08:50
  • 183: Generate Computer Selection and Make Player Selection 08:52
  • 184: Display Player and Computer Choices on the Page 07:28
  • 185: Compare Choices and Get Result 07:48
  • 186: Update Score and Game Over Functionality 08:02
  • 187: Reset Game Functionality 05:22
  • 188: Overview of JavaScript 13:05
  • 189: JS Engine and Runtime 14:16
  • 190: How JavaScript Code Execute? 16:25
  • 191: Scope and Scope Chain 17:56
  • 192: Variable Environment 10:09
  • 193: This Keyword 06:20
  • 194: How The This Keyword Works in Action 14:43
  • 195: Array Destructuring 21:48
  • 196: Objects Destructuring 18:38
  • 197: Spread Operator 08:16
  • 198: Rest Operator 06:33
  • 199: Short Circuiting 15:10
  • 200: Let’s Work with Strings 1 08:57
  • 201: Let’s Work with Strings 2 08:55
  • 202: Let’s Work with Strings 3 09:44
  • 203: Simple Methods 09:21
  • 204: forEach Loop 06:23
  • 205: map() Method 07:32
  • 206: filter() Method 09:44
  • 207: reduce() Method 06:47
  • 208: find() Method 06:34
  • 209: flat() and flatMap() Methods 11:50
  • 210: Sorting Arrays 12:56
  • 211: Introduction to Async Javascript 15:16
  • 212: First AJAX Call 16:40
  • 213: Request Chain 08:41
  • 214: Promises and Fetch 08:33
  • 215: Get Data From Promise 09:25
  • 216: Promise Chain 06:05
  • 217: Error Handling of Promises 12:35
  • 218: Throwing Errors 12:49

• Git -Github 2:01:50

  • 219: GIT&GITHUB-LECTURE-1 01:06
  • 220: GIT&GITHUB-LECTURE2 05:48
  • 221: GIT&GITHUB-LECTURE3 07:57
  • 222: GIT&GITHUB-LECTURE4 08:09
  • 223: GIT&GITHUB-LECTURE5 06:45
  • 224: GIT&GITHUB-LECTURE6 08:52
  • 225: GIT_GITHUB-LECTURE7 08:49
  • 226: GIT_GITHUB-LECTURE8 07:34
  • 227: GIT_GITHUB-LECTURE9 08:07
  • 228: GIT_GITHUB-LECTURE10 14:48
  • 229: GIT_GITHUB-LECTURE11 04:25
  • 230: GIT_GITHUB-LECTURE12 06:41
  • 231: GIT_GITHUB-LECTURE13 05:04
  • 232: GIT_GITHUB-LECTURE14 13:55
  • 233: GIT&GITHUB-LECTURE15 13:50

• React 21:38:25

  • 234: 1-What We Will Learn 01:54
  • 235: 2-Why a library or framework is needed 03:00
  • 236: 3-What Is React 05:12
  • 237: 4-Why Should We Use React 02:14
  • 238: 5-React vs. Vanilla JavaScript 04:37
  • 239: 6-Setting Up Our Development Environment 04:17
  • 240: 7-Look At React’s Official Documentation 01:25
  • 241: 8-Pure React 09:08
  • 242: 9-Setting Up a Project With Create React App 08:46
  • 243: 10-Rendering the Root Component 04:46
  • 244: 11-Debugging 04:32
  • 245: 12-Creating and Reusing a Component 04:24
  • 246: 13-What Is JSX 03:11
  • 247: 14-Creating More Components 04:35
  • 248: 15-JavaScript Logic in Components 04:27
  • 249: 16- Separation of Concerns 03:23
  • 250: 17-Styling React Applications 07:38
  • 251: 18-Props 08:14
  • 252: 19-Props & One-Way Data Flow 02:33
  • 253: 20-Rendering Lists 12:42
  • 254: 21-Conditional Rendering 1 05:09
  • 255: 22-Conditional Rendering 2 03:45
  • 256: 23-Extraction JSX Into a New Component 03:14
  • 257: 24-Destructuring Props 04:48
  • 258: 25-React Fragments 01:32
  • 259: 26-Dynamic Classes 04:41
  • 260: 27-Section Overview 00:39
  • 261: 28-Let’s build a new project 14:11
  • 262: 29-Events Handling 07:54
  • 263: 30-What Is State 03:53
  • 264: 31-Creating a State With useState 07:25
  • 265: 32-Set State Manually 03:20
  • 266: 33-Adding Open-Close Button 05:48
  • 267: 34-React Developer Tools 04:18
  • 268: 35-Updating State Based on Current State 04:10
  • 269: 36-Introduction of the Application 02:20
  • 270: 37-Creating the Layout 13:14
  • 271: 38-Rendering a List Component 12:01
  • 272: 39-Rendering a Form Component 11:48
  • 273: 40-Controlled Element 13:28
  • 274: 41-Let's Think About State 03:55
  • 275: 42-Lifting Up State 11:01
  • 276: 43-Deleting an Item 04:33
  • 277: 44-Updating an Item 05:05
  • 278: 45-Calculating Package Quantities 07:02
  • 279: 46-Shorting Items 07:57
  • 280: 47-Application Introduction 01:17
  • 281: 48-Project Setup 06:25
  • 282: 49-Components Structure 05:06
  • 283: 50-Let’s Start Using Data 07:51
  • 284: 51-Let’s Start Creating the Card Structure 13:02
  • 285: 52-Class-Based Component 06:00
  • 286: 53-Counter Example With Class-Based Component 05:50
  • 287: 54-Working With Event Handlers 06:45
  • 288: 55-Class-Based Component vs Functional Component 03:17
  • 289: 56-useEffect Hook 05:22
  • 290: 57-Counter Example With useEffect Hook 10:49
  • 291: 58-Dependency Array 03:17
  • 292: 59-Clean-Up Function 05:35
  • 293: 60-useState + useEffect+ Data Fetch 12:35
  • 294: 61-Project Structure 09:22
  • 295: 62-Component Structure & Styling 14:07
  • 296: 63-Using an Async Function & Axios 08:16
  • 297: 64-Section Overview 00:27
  • 298: 65-Refs 04:10
  • 299: 66-Why We Use useRef Hook 02:11
  • 300: 67-Refs to Select DOM Elements 04:13
  • 301: 68-What Is This Custom Hook 02:31
  • 302: 69-Custom Hook Counter Example 08:23
  • 303: 70-Section Overview 00:45
  • 304: 71-What Is React Router 02:52
  • 305: 72-Creating a Regular Application 06:12
  • 306: 73-Adding a React Router to the Project 09:43
  • 307: 74-Link & NavLink 04:35
  • 308: 75-Server Side Rendering & Client Side Rendering 05:27
  • 309: 76-Creation of Components & Application Layout 09:21
  • 310: 77-Components & Pages Layout and Styling 16:08
  • 311: 78-Components & Pages Layout and Styling 2 12:40
  • 312: 79-Personnel Page 09:37
  • 313: 80-Dynamic Routing 06:47
  • 314: 81-useParams & useLocation 10:34
  • 315: 82-PersonnelDetail Page 11:47
  • 316: 83-useNavigate vs Link 03:24
  • 317: 84-notFound Page & Navigate 05:11
  • 318: 85-Error Handling 06:14
  • 319: 86-Loading 08:48
  • 320: 87-Nested Route 11:25
  • 321: 88-Absolute Path & Relative Path 04:43
  • 322: 89-Private Router 08:19
  • 323: 90-Project Introduction & API Source 02:53
  • 324: 91-File Structure 08:49
  • 325: 92-Creation of Routes 09:28
  • 326: 93-Let’s Start Creating the Pages 12:52
  • 327: 94-Navbar 10:20
  • 328: 95-Home Page 10:48
  • 329: 96-Header 13:47
  • 330: 97-Card 15:49
  • 331: 98-Detail Page 09:44
  • 332: 99-Login & Logout 06:45
  • 333: 2-Section Overview 00:47
  • 334: 3-Why state management libraries are needed 04:07
  • 335: 4- Context API 03:54
  • 336: 5-Stages of Using the Context API 01:39
  • 337: 6-Let’s Start Using the Context API 12:03
  • 338: 7-Context Provider 09:43
  • 339: 8-Data Management 11:07
  • 340: 9-Creating Multiple Context 10:04
  • 341: 10-Locale Storage 12:43
  • 342: 11-Using Custom Hook 09:08
  • 343: 12-Section Overview 01:07
  • 344: 13-What Is useReducer Hook 03:39
  • 345: 14-Project Setup 12:16
  • 346: 15-useReducer 10:48
  • 347: 16-Let's Start Using the Reducer Function 09:01
  • 348: 17-Counter Reducer 11:38
  • 349: 18-Section Overview 01:31
  • 350: 19-Project Introduction and API Source 04:28
  • 351: 20-Project Setup and File Structure 13:01
  • 352: 21-Creating the Route Structure 04:06
  • 353: 22-Header and Navbar 17:11
  • 354: 23-Search Page 10:01
  • 355: 24-NewsCard 10:01
  • 356: 25-Home Page 12:13
  • 357: 26-Context and Theme 11:47
  • 358: 27-Slider 11:35
  • 359: 28-Categories Page 12:34
  • 360: 29-Filtering by Country 06:00
  • 361: 30-Data Extraction With Custom Hook 18:21
  • 362: 31-Section Overview 03:54
  • 363: 32-Redux 02:46
  • 364: 33-Redux Folder 09:11
  • 365: 34-Counter Component and createStore 04:35
  • 366: 35-useDispatch & useSelector 06:13
  • 367: 36-How to Use Folders With Redux 10:52
  • 368: 37-combineReducers 10:35
  • 369: 38-Todo Component 11:51
  • 370: 39-todoReducer 14:36
  • 371: 40-CLEAR Action 05:23
  • 372: 41-Section Overview 00:50
  • 373: 42-Redux Toolkit 03:02
  • 374: 43-Let's Start Using Redux Toolkit 14:46
  • 375: 44-Using Actions in Redux Toolkit 07:37
  • 376: 45-Todo Example 06:01
  • 377: 46-Todo Slice 06:07
  • 378: 47-addTodo & deleteTodo 05:03
  • 379: 48-What Is Redux-Thunk 09:10
  • 380: 49-Let’s Start Using Thunk in Redux Toolkit 15:15
  • 381: 50-Post Component 11:04
  • 382: 51-Project Introduction 03:04
  • 383: 52-Creation of File Structure 08:21
  • 384: 53-Route Structure and Navbar 11:22
  • 385: 54-Login page 08:18
  • 386: 55-authSlice 12:01
  • 387: 56-NewsSlice 11:07
  • 388: 57-News Page and Card Structure 11:01
  • 389: 58-What We Did in This Application 05:54
  • 390: 59-Section Overview 01:01
  • 391: 60-Setting Up a File Structure 09:14
  • 392: 61-React Router v6.4+ 05:26
  • 393: 62-Building the App Layout & Nested Routes 09:01
  • 394: 63-Data Fetching With Loaders 12:00
  • 395: 64-useNavigation 03:54
  • 396: 65-Error Handling 06:37
  • 397: 66-Dynamic Path 12:08
  • 398: 67-Section Overview 01:19
  • 399: 68-Project Introduction and API Resource 02:40
  • 400: 69-Creation of the Project With Vite 09:26
  • 401: 70-Creating the Folder Structure 07:13
  • 402: 71-Creation of Route Structure 10:39
  • 403: 72-Navbar 06:32
  • 404: 73-Login Page 05:04
  • 405: 74-Manage User State With Redux Toolkit 07:12
  • 406: 75-Manage Movies Data With Redux Tollkit 10:20
  • 407: 76-Movies Page 11:25
  • 408: 77-Using Loader in MovieDetail Page 09:55

• Typescript 12:41:03

  • 409: 1-How to Get Help_ 01:28
  • 410: 2-A Birdseye View of TypeScript 08:48
  • 411: 3-Initial Setups 08:14
  • 412: 4-App Review 05:54
  • 413: 5-How to Run TypeScript Code 07:04
  • 414: 6-A Subtle Adjustment 05:07
  • 415: 7-Catching Errors 10:29
  • 416: 8-Catching Errors 2 06:07
  • 417: 9-Types in TypeScript 07:18
  • 418: 10-Types in TypeScript 2 08:21
  • 419: 11-More Types with Examples 06:25
  • 420: 12-Where Do We Use Types 01:24
  • 421: 13-Introduction of Type Annotation and Infrence 02:53
  • 422: 14-How Annotatitons Work 06:53
  • 423: 15-Object Annotations 09:38
  • 424: 16-Function Annotations 08:07
  • 425: 17-Type Infrence 05:34
  • 426: 18-Understanding 'Any' Type 11:10
  • 427: 19-Fixing 'any' Type 02:50
  • 428: 20-Initiate Annotation Later 04:38
  • 429: 21-When type can not be inferred 07:00
  • 430: 22-Annotations with Functions 07:17
  • 431: 23-Type Infrence with Functions 08:42
  • 432: 24-Using Annotations with Anonymous Functions 02:16
  • 433: 25- Never and Void Types 04:06
  • 434: 26-Object Destructure with Annotations 04:33
  • 435: 27-Using Annotations with Objects 10:35
  • 436: 28-Typed Arrays 07:11
  • 437: 29-More on Typed Arrays 06:16
  • 438: 30-Working with Multiple Types 07:55
  • 439: 31-When should we use typed arrays 01:30
  • 440: 32-Tuples 05:32
  • 441: 33-More on Tuples 08:02
  • 442: 34-When Should We Use Tuples 04:48
  • 443: 35-Interfaces-Final 02:30
  • 444: 36-Long Type Annotations-Final 07:11
  • 445: 37-Fixing Long Annotations with Interfaces - Final 06:38
  • 446: 38-Syntax Around Interfaces-Final 04:06
  • 447: 39-Functions in Interfaces-Final 06:53
  • 448: 40-Code Reuse with Interfaces 06:18
  • 449: 41-Classes-Final 05:35
  • 450: 42-Basic Inheritance-Final 04:37
  • 451: 43-Instance Method Modifiers-Final 09:34
  • 452: 44-Field in Classes-Final 08:30
  • 453: 45-Fields with Inheritance-Final 06:34
  • 454: 46-App Overview-Final 03:48
  • 455: 47-Webpack Setup and Configuration-Final 09:59
  • 456: 48-Project Structure-Final 05:07
  • 457: 49-Generating Random Data-Final 07:01
  • 458: 50-Using Definition Files-Final 08:56
  • 459: 51-Export Statements in Typescript-Final 07:44
  • 460: 52-Typescript Configuration-Final 02:32
  • 461: 54-Adding Google Maps Support-Final 10:25
  • 462: 55-Google Maps Integration-Final 04:57
  • 463: 53-Defining a Cargo-Final 05:13
  • 464: 56-Exploring Type Definition Files-Final 17:11
  • 465: 57-Why Use Private Modifiers-Final 12:58
  • 466: 58-Attaching Markers-Final 12:49
  • 467: 59-Restricting Access with Interfaces-Final 07:35
  • 468: 60-Impicit Type Checks-Final 04:15
  • 469: 61-Showing Popup Windows-Final 09:41
  • 470: 62-Updating Interface Definitions-Final 09:05
  • 471: 63-Optional Implements Clauses-Final 08:33
  • 472: 64-App Recap-Final 11:54
  • 473: 65-App Overview-Final 01:58
  • 474: 66-Configuring Typescript Compiler-Final 10:53
  • 475: 67-Concurrent Compilation and Execution-Final 06:32
  • 476: 68-A Simple Sorting Algorithm-Final 05:47
  • 477: 69-Sorter Scaffolding-Final 05:03
  • 478: 70-Sorting Implementation-Final 06:43
  • 479: 71-Two Huge Issues-Final 09:44
  • 480: 72-Typescript is Really Smart-Final 10:41
  • 481: 73-Type Guards-Final 12:00
  • 482: 75-Why is This Bad-Final 03:37
  • 483: 76-Extracting Key Logic-Final 10:24
  • 484: 77-Seperating Swapping and Comparison-Final 18:54
  • 485: 78-The Big Reveal-Final 06:03
  • 486: 79-Interface Definition-Final 06:45
  • 487: 80-Sorting Arbitrary Collections-Final 14:32
  • 488: 81-Just One More Fix-Final 03:12
  • 489: 82-Integrating the Sort Method-Final 04:05
  • 490: 83-Issues with Inheritance-Final 09:34
  • 491: 84-Abstract Classes-Final 08:53
  • 492: 85-Why Use Abstract Classes-Final 05:56
  • 493: 86-Solving All Issues with Abstract Classes-Final 04:20
  • 494: 87-Interfaces vs Abstract Classes-Final 04:53
  • 495: 88-React and Redux Overview-Final 09:38
  • 496: 89-App Overview-Final 03:11
  • 497: 90-Generating the App-Final 01:42
  • 498: 91-Simple Components-Final 04:53
  • 499: 92-Interfaces with Props-Final 05:04
  • 500: 93-Handling Component State-Final 03:15
  • 501: 94-Confusing Component Status-Final 15:06
  • 502: 95-Functional Components-Final 04:37
  • 503: 96-Redux Setup-Final 08:51
  • 504: 97-Action Creators with Typescript-Final 10:12
  • 505: 98-Action Types Enum-Final 07:28
  • 506: 99-The Generic Dispatch Function-Final 06:55
  • 507: 100-A Reducer with Enums-Final 09:08
  • 508: 101-Validating Store Structure-Final 07:05
  • 509: 102-Connecting a Component to Redux-Final 07:52
  • 510: 103-Rendering a List-Final 06:05
  • 511: 104-Adding in Delete Functionality-Final 04:09
  • 512: 105-Breaking Out Action Creators-Final 04:40
  • 513: 106-Expressing Actions as Type Union-Final 05:55
  • 514: 107-Type Guards in Reducers-Final 03:41
  • 515: 108-Wiring Up deleteToDo Action-Final 02:31
  • 516: 109-Again, Type Definition Files-Final 04:30
  • 517: 110-Tracking Loading with Component State-Final 06:16
  • 518: 111-App Recap-Final 05:36

• Next.JS 14:05:03

  • 519: 2-What Is Next.js 04:27
  • 520: 3-Create the First Next.js Application 13:35
  • 521: 4-Server Component Logic and File Structure 08:20
  • 522: 5-Creating Routes and Using the Link Component 09:32
  • 523: 6-Creating and Using Components With Next.Js 12:11
  • 524: 7-Create Dynamic Routes 11:04
  • 525: 8- Project Introduction 03:33
  • 526: 9-Project Creation & Creating Routes 14:49
  • 527: 10-Creation of the Application Layout and Header Component 14:08
  • 528: 11-Let’s Start Using Module CSS in Our Project 12:13
  • 529: 12-Creating the Home Page and Slides Component 12:13
  • 530: 13-Components Types In Next.js 06:04
  • 531: 14-Active Link Building 05:26
  • 532: 15-Fetching Data 12:09
  • 533: 16-Client and Server Components Optimization 10:15
  • 534: 17-Adding a Loading Page 07:32
  • 535: 18-Error Page 08:09
  • 536: 19-Not Found Page 03:23
  • 537: 20-Page Creation With Dynamic Route 12:43
  • 538: 21-Share Page 07:13
  • 539: 22-Create Custom Image Picker 18:16
  • 540: 23-Using Server Action 10:40
  • 541: 24-Application Optimization with useFormStatus Hook 07:18
  • 542: 25-Input Validation & useFormState Hook 14:32
  • 543: 26-Alternative Error Handling 04:52
  • 544: 27-Metadata 17:29
  • 545: 28-Section Summary 06:14
  • 546: 29-Section Overview 01:50
  • 547: 30-Project Presentation 06:45
  • 548: 31-Project Setup 11:35
  • 549: 32-Create Pages With Fake Data 12:26
  • 550: 33-Handlinh Not Found Page 04:05
  • 551: 34-Working With Parallel Routes 07:31
  • 552: 35-Rendering Nested Routes & Parallel Routes 14:12
  • 553: 36-Simplify Pages With MovieCard Component 05:57
  • 554: 37-Catch All Routes 07:00
  • 555: 38-Multiple Path With Catch All Route 17:03
  • 556: 39-Error Page & Editing Main-Header Component 11:39
  • 557: 40-Programmatic Routing 06:58
  • 558: 41-Route Groups 14:10
  • 559: 42-Managing API Requests With Route File 05:26
  • 560: 43-Using Middleware in Next.js 06:46
  • 561: 44-Section Overview 02:26
  • 562: 45-Client Side Data Fetching 21:31
  • 563: 46-Data Fetching Optimization in Client Components 07:37
  • 564: 47-Server-Side Data Fetching in Next.js 06:39
  • 565: 48-Data Fetching Optimization and Loading Component 04:40
  • 566: 49-Migration of My Favorite Route to TMDB API 06:22
  • 567: 50-Migration of My Favorite Route to TMDB API 03:05
  • 568: 51-Lets Move Dynamic Pages of the Application to TMDB API 17:02
  • 569: 52-Use of the Suspense Component 10:00
  • 570: 53-What is Firebase 08:10
  • 571: 54-Integrate Firebase Into the Application 15:02
  • 572: 55-Sign Up Page 14:12
  • 573: 56-Sign-In Page 05:38
  • 574: 57-Logout 08:07
  • 575: 58-Pages Router 05:08
  • 576: 59-Let’s Start an Application With Pages Router 12:04
  • 577: 60-Working With Nested Routes & Dynamic Routes 08:42
  • 578: 61-Using Nested Dynamic Routes 08:51
  • 579: 62-Catch All Routes & Link Component 08:21
  • 580: 63-Programmatic Navigation 05:46
  • 581: 64-Adding a Custom Not Found Page 01:52
  • 582: 65-Section Overview 00:38
  • 583: 66-Static Rendering & Server Side Rendering 06:31
  • 584: 67-getStaticProps 09:38
  • 585: 68-Let's Compile Component Server with Filesystem 10:27
  • 586: 69-Incremental Static Generation (ISR) 08:45
  • 587: 70-notFound & Redirect 03:44
  • 588: 71-Working With Dynamic Pages 09:19
  • 589: 72-Using getStaticPaths 13:21
  • 590: 73-Fallback & notFound 07:59
  • 591: 74-getServerSideProps 05:48
  • 592: 75-Dynamic Pages with getServerSideProps 13:41
  • 593: 76-Why We Need Client Side Data Fetching 03:09
  • 594: 77-Client Side Data Fetching Using Firebase 18:35
  • 595: 78-Project Overview 02:42
  • 596: 79-Start the Project & Create the Pages and Fake Data 09:55
  • 597: 80-Create Tour Components 04:51
  • 598: 81-Using Tour Data in Components and Style Operation 12:27
  • 599: 82-Creating the Button Component & Start Creating Detail Page 08:23
  • 600: 83-Create Detail Page Components 13:41
  • 601: 84-Create a General Layout Wrapper 06:09
  • 602: 85-All Tour Page & Creating a Form for Tour Filtering 10:16
  • 603: 86-Programmatic Page Navigation by Filtering Tours 08:13
  • 604: 87-Let's Make Data Controls on the Page with Filtered Tours 12:32
  • 605: 88-Show Filtered Tours in Catch-All Page 06:40
  • 606: 89-Create a Real Time Database Using Firebase 05:10
  • 607: 90-Let's Create Home Page According to Static Side Generation 09:18
  • 608: 91-Let's Recreate Tour Detail Page Component with Firebase Data 10:53
  • 609: 92-Optimizing Data Fetching 06:41
  • 610: 93-All Tour Page & Catch All Routes Page 12:39
  • 611: 94-Section Summary 10:00

This programme follows a carefully designed progression that mirrors the real front-end development lifecycle used by professional teams.

You begin by mastering core web technologies at an engineering level — understanding how browsers work, how the DOM is structured, how layouts are calculated and how responsive systems adapt across devices.

You then advance into modern JavaScript development, where the focus shifts to application logic, state management, asynchronous workflows and API-driven interfaces. You will learn how real applications interact with data, handle user interactions and manage complex UI behavior.

As the programme progresses, you will adopt component-based development, learning how to design reusable UI systems, manage shared state and maintain clean project architecture. You will work with modern front-end patterns that emphasize readability, scalability and long-term maintainability.

In addition, the programme covers essential professional topics such as:

• Front-end architecture and folder structures

• Performance optimization and rendering strategies

• Accessibility (WCAG) and inclusive UI development

• Cross-browser compatibility and responsive design systems

• Version control, collaboration and real development workflows

• Deployment, build processes and production readiness

Every major concept is reinforced through hands-on projects that simulate real business requirements. These projects are designed to build a strong professional portfolio and demonstrate your readiness for front-end roles.

What You Will Learn

• Professional HTML & semantic markup

• Advanced CSS layouts, responsive systems and design patterns

• Modern JavaScript for real application logic

• API integration and data-driven interfaces

• Component-based UI architecture

• State management and application flow

• Performance optimization techniques

• Accessibility and usability standards

• Front-end debugging and troubleshooting

• Production deployment and maintenance workflows

Real-World Projects & Portfolio

Throughout the programme, you will build multiple production-style projects, such as:

• Responsive multi-page websites

• Interactive dashboard-style interfaces

• API-driven web applications

• Component-based UI systems

• Performance-optimized front-end projects

These projects form a professional portfolio that demonstrates real front-end engineering capability to employers or clients.

• Individuals aiming to become professional front-end developers

• Career switchers entering the software industry

• Students preparing for junior front-end or web developer roles

• Designers transitioning into development-focused roles

• Freelancers seeking professional-grade front-end skills

• Developers wanting a strong front-end engineering foundation

• No prior front-end experience required

• Basic computer literacy

• Commitment to consistent practice and project work

• Willingness to think logically and solve problems

• Access to a computer and internet connection

Upon successful completion, learners are prepared for roles such as:

• Front-End Developer

• Junior Front-End Engineer

• Web Developer

• UI Developer

With experience:

• Mid-Level Front-End Engineer

• Senior Front-End Developer

• Full-Stack Developer

There are currently no Q&As for this course. Be the first to ask a question.