একদম জিরো থেকে, কোন প্রকার পূর্ব অভিজ্ঞতা ছাড়াই একজন প্রফেশনাল ওয়েব ডেভেলপার হওয়ার জন্য যা যা লাগবে তার সবকিছুই সহজ করে গিলিয়ে খাওয়ানো হবে এই কোর্সে।
কোর্স করতে করতেই তোমার প্রফেশনাল প্রোফাইল, দশটা সিরিয়াস প্রজেক্ট রেডি হয়ে যাবে। জিনিসগুলো হাতে কলমে শিখে, প্রফেশনাল ওয়েবসাইট বানিয়েই তুমি চাকরির ইন্টারভিউতে যেতে পারবে। 😀
কোন জায়গায় আটকে গেলে বা কনফিউজড হয়ে গেলে ২৪ ঘন্টার মধ্যে কোর্স রিলেটেড সকল প্রশ্নের উত্তর দেয়ার জন্য একজন প্রফেশনাল ওয়েব ডেভেলপার স্ট্যান্ডবাই থাকবে (ছুটির দিন বাদে)।
প্রত্যেক ভিডিও শেষে প্রশ্ন থাকবে। মডিউল শেষে ফাইনাল কুইজ থাকবে। টেক এওয়ে হোমওয়ার্ক থাকবে। হোমওয়ার্ক এর কোড প্রফেশনাল লেভেলের না হলে, ফিডব্যাক দেয়া হবে।
ফ্রন্টএন্ড (HTML, CSS, JavaScript, ES6, bootstrap, React, charting), ব্যাকএন্ড (node, express, API), ডাটাবেজ (mongodb), ক্রোম ডেভ টুল, হোস্টিং, গিটহাব, ইন্টারভিউ প্রবলেম সলভিং - সবকিছু!
সো, এক্ষুণি কোর্সে এনরোল করে ঝাঁপিয়ে পড়ো। তোমার লাইফের নতুন মিশন। হার্ডওয়ার্ক করবে তুমি। গাইডলাইন আর সাপোর্ট দিবো আমরা। পারলে ঠেকা!
এনরোল করার ৮ সপ্তাহের মধ্যে পুরা কোর্স সিরিয়াসলি কমপ্লিট কারীদের নিয়ে আমরা তৈরি করবো Super Charged Interviewee Club (SCIC) সিক্রেট ক্লাব। যাদের স্পেশাল ইন্টারভিউ ট্রেনিং দিয়ে রেজুমি পাঠিয়ে দিবো বিভিন্ন কোম্পানিতে ইন্টার্ন বা ডেভেলপার হিসেবে চাকরি পাওয়ার জন্য।
যারা ওয়েব ডেভেলপার হতে চায়। যারা একদম শূন্য থেকে শুরু করে শেষ পর্যন্ত ওয়েব ডেভেলপমেন্ট শিখে তারপর ওয়েব ডেভেলপার হিসেবে কোন সফটওয়্যার কোম্পানিতে চাকরি করতে চায়, তাদের জন্য। যারা প্রোগ্রামিং বা ওয়েব ডেভেলপমেন্ট সম্পর্কে তেমন কিছুই জানে না, তাদের জন্য। এমনকি যারা চার বছর CSE পড়েও কিভাবে কি করবে দিশা করতে পারতেছে না, গুছিয়ে তেমন কিছু শিখেনি, তারাও এই কোর্স থেকে কমপ্লিট ওয়েব ডেভেলপমেন্ট শিখে চাকরিতে এপ্লাই করতে পারবে। 😀
তোমাকে তিনটা জিনিস জানতে হবে:
১. কিভাবে কম্পিউটার অন-অফ করে। কোনটা কীবোর্ড আর কোনটা মাউস সেটা জানতে হবে।
২. ভিডিও দেখে দেখে জিনিসগুলো মাথায় ঢুকানোর জন্য একটুখানি ব্রেনের খালি জায়গা রাখতে হবে।
৩. কোথাও আটকে গেলে হেল্প চাওয়ার মেন্টালিটি এবং লেগে থাকার ইচ্ছা রাখতে হবে।
সেটা কোর্স কারিকুলাম দেখলেই বুঝতে পারবে। তবে ছোট করে বললে, বলা যায়: বর্তমান সময়ে একজন সিরিয়াস ওয়েব ডেভেলপার হওয়ার জন্য যা যা লাগে, তার সবই আছে এই কোর্সে। যেমন ধরো HTML, CSS থেকে শুরু করে bootstrap, JavaScript, Git, ES6, REST API, servers, JSON তো আছেই। তার সাথে সাথে আছে বর্তমান সময়ে সবচেয়ে বেশি চাকরি যে ফ্রেমওয়ার্ক সেই React, advanced React দিয়ে কমপ্লিট ওয়েবসাইট বানানোর সিস্টেম আছে। বাড়তি হিসেবে আছে node, database (mongodb), debug, problem solving, interview questions সহ আরো অনেক জিনিস আছে। আর পুরা কোর্সে তোমাকে সাতটা ওয়েবসাইট করে দেখানো হবে। আরো সাতটা ওয়েবসাইট থাকবে তোমার হোমওয়ার্ক হিসেবে। এই পুরা জিনিস কোন রকমে শেষ করতে পারলে, একজন উন্নতমানের জুনিয়র ওয়েব ডেভেলপার না হয়ে উপায় থাকবে না। 😀
কোর্সের ভিডিও গুলো প্রি-রেকর্ড থাকবে। তুমি একাউন্ট খুলে এই কোর্সে এনরোল করলে। ভিডিওগুলো কোর্স শুরু হওয়ার পরে থেকে প্রতিদিন একটা করে মডিউল দেয়া হবে। সারাদিনের মধ্যে তুমি যখন ইচ্ছা এই ওয়েব সাইটে লগিন করে কোর্স ভিডিও দেখতে পাবে।
তুমি যদি প্রতিদিন ১ থেকে দেড় ঘন্টা ধরে ভিডিও দেখো, তার সাথে সাথে মিনিমাম ৪ থেকে ৬ ঘন্টা প্রাকটিস করো, তাহলে তোমার দুই মাসের মতো সময় লাগবে। তবে মাঝে মধ্যে হোমওয়ার্ক আর টেক এওয়ে প্রজেক্ট এর জন্য বাড়তি সময় বরাদ্ধ রাখতে হবে। হার্ডওয়ার্ক করার মেন্টালিটি নিয়ে আসতে হবে। ফাঁকিবাজি বা শর্টকাট করার কোন উপায় নাই।
আমরা কোর্সটি এমনভাবে সাজিয়েছি যেখানে একাডেমিক ব্যাকগ্রাউন্ড ম্যাটার করে না। তুমি যেকোনো একাডেমিক ব্যাকগ্রাউন্ড থেকে এই কোর্সটি করতে পারবে। চাইলে ভার্সিটির স্টুডেন্ট, কলেজের স্টুডেন্ট, চাকরিজীবি, বেকার, প্রেমিক, পলাতক প্রেমিক, এমনকি ফোন ধরে না এমন প্রেমিকা সবাই যাতে শিখতে পারে সেজন্য একদম শূন্য থেকে শুরু করা হয়েছে।
প্রথমত লাগবে ডেডিকেটেড সময়। প্রতিদিন মাস্ট ৪-৬ ঘন্টা। সম্ভব হলে ৮-১০ঘন্টা( সময় না দিতে পারলে। হার্ডওয়ার্ক করার ইচ্ছা না থাকলে কোর্সে এনরোল করে কোন লাভ হবে না) দ্বিতীয়ত লাগবে একটা ল্যাপটপ (যেখানে node, Visual Studio কোড ইনস্টল করা যায়) আর তৃতীয়ত লাগবে মিনিমাম ৪-১০ এমবিপিএস এর ইন্টারনেট। ব্রডব্যান্ড হলেই ভালো। প্রফেশনাল ওয়েব ডেভেলপার হতে হলে মিনিমাম ৩ মাস সিরিয়াস হার্ডওয়ার্ক এর কথা মাথায় রেখে নামতে হবে।
আমাদের একজন প্রফেশনাল ওয়েব ডেভেলপার থাকবে তোমার সব প্রশ্নের উত্তর দিতে। কারণ আমরা জানি-- কোর্স করতে গেলে তুমি আটকে যাবে। তোমার মাথায় অনেক প্রশ্ন আসবে। এছাড়াও পুরা প্রজেক্টের পিছনে ৬জন মানুষ কাজ করছে এবং করে যাচ্ছে তোমাকে সফল করানোর জন্য। যখন দরকার হবে নতুন ভিডিও যোগ করা হবে। আর এই সার্ভিসগুলো রাখার জন্যই আমাদের কিছু ফি রাখতে হচ্ছে।
কোন টেনশন নাই। এখনই তোমার সমস্যা সম্পর্কে বিস্তারিত courses@programming-hero.com এই ইমেইলে পাঠিয়ে দাও। অথবা আমাদের অফিসিয়াল নাম্বারে কল করে জানাও। আমরা ঘুমিয়ে না থাকলে সঙ্গে সঙ্গেই রিপ্লাই দিবো। সর্বোচ্চ ২৪ ঘন্টার মধ্যে উত্তর না পেলে, এই ইমেইল ওয়ালার খবর আছে।
এই রিলেটেড একটা মডিউলও আছে। সেটা দেখে ফেললেই ইন্টারভিউ প্রোসেস, এপ্লিকেশন এবং চাকরি রিলেটেড অনেক অনেক জিনিস জানতে পারবে। এছাড়া তুমি ২ মাস যদি রেগুলার সিরিয়াসলি কোর্স নির্দিষ্ট সময়ের মধ্যে শেষ করো। তাহলে তোমাকে আরো এক মাস SCIC তে নিয়ে ইন্টারভিউ এর স্পেশাল ট্রেনিং দেয়া হবে। সো, তুমি যত বেশি চেষ্টা করবে আমরা তত বেশি সহযোগিতা করবো।
আমরা কোর্সের জন্য একটা সিক্রেট ফেইসবুক গ্রূপ তৈরি করেছি। যেখানে আমি থাকবো, আমাদের একজন প্রফেশনাল ওয়েব ডেভেলপার থাকবেন, সাপোর্ট করার জন্য আমাদের ডেভেলপার থাকবে। আমাদের টিম মেম্বাররা থাকবে। আমাদের সর্বাত্মক চেষ্টা থাকবে ২৪ ঘন্টার মধ্যে তোমার সব প্রশ্নের উত্তর দিতে। 😉
না। যদি কোন জায়গায় সেইম প্রশ্ন বারবার চলে আসে, তাহলে মাঝে মধ্যে সেই রিলেটেড ভিডিও যোগ করা হবে। দরকার হলে দুই একটা মডিউলও যোগ হয়ে যেতে পারে।
এই কোর্সে WordPress বা freelancing রিলেটেড সরাসরি কিছু নাই। কারণ, এই কোর্সের উদ্দেশ্য হচ্ছে সফটওয়্যার কোম্পানিতে ওয়েব ডেভেলপার বলতে যেটা বুঝানো হয় সেটা হতে চায় তাদের জন্য। এছাড়া এডভান্সড লেভেলে ওয়ার্ডপ্রেস কাস্টমাইজ করতে গেলে HTML, CSS, bootstrap, JavaScript, এমনকি React ও জানতে হয়। সেগুলা এই কোর্স থেকে শিখতে পারবে। তবে freelancing বা WordPress কে এই কোর্স হাইলাইট করা হয়নি।
কোন টেনশন নাই। তোমার যত প্রশ্ন আছে সেগুলা মনের মাধুরী মিশিয়ে courses@programming-hero.com এ পাঠিয়ে দাও। আমরা যত দ্রুত সম্ভব রিপ্লাই দিয়ে দিবো।
| 0 Orientation. How to get ready for this course | |||
| 0.1 Welcome to Complete Web Development Course | 00:03:00 | ||
| 0.2 Overview of the course with Milestones and Projects | 00:05:00 | ||
| 0.3 How to use Programming Hero Course Website | 00:05:00 | ||
| 0.4 How to ask for help in the support group | 00:08:00 | ||
| 0.5 Install Visual Studio Code where you will write code | 00:05:00 | ||
| 0.6 Install git scm, the version control system you will use | 00:05:00 | ||
| 0.7 Install Node that will be used in the future | 00:04:00 | ||
| 0.8 How to take care of the video buffering | 00:06:00 | ||
| 0.9 Module Summary and next steps | 00:03:00 | ||
| 1 Learn and Explore HTML as a Beginner | |||
| 1.1 Getting started with your first ever website | 00:09:00 | ||
| 1.2 HTML language, markup, tags structure, paragraph tag | 00:09:00 | ||
| 1.3 Bold, strong, how HTML tag works | 00:07:00 | ||
| 1.4 Heading tag, different types of headings | 00:06:00 | ||
| 1.5 HTML tag attribute, anchor, href, navigate | 00:10:00 | ||
| 1.6 Display image (online image, local image, folder image) | 00:12:00 | ||
| 1.7 List, Container tag, ordered list, unordered list | 00:08:00 | ||
| 1.8 Button, input, div, span, w3schools, every html tags | 00:08:00 | ||
| 1.9 HTML structure, head, body, title, meta tag | 00:06:00 | ||
| 1.10 HTML Module Summary, 4 types of HTML tags | 00:07:00 | ||
| 2 Learn and Explore CSS as a Beginner | |||
| 2.1 Introduction to CSS Module, getting started with CSS | 00:05:00 | ||
| 2.2 Style tag, embedded style, named color, hexcode, rgb | 00:12:00 | ||
| 2.3 Background-color, height, width, font, css measuring units | 00:12:00 | ||
| 2.4 CSS ID, apply styles to a specific HTML element | 00:08:00 | ||
| 2.5 CSS class, apply styles to multiple elements, ID vs Class | 00:10:00 | ||
| 2.6 Style a group of elements, style a small portion of text | 00:08:00 | ||
| 2.7 Border, border radius, margin, different ways to set margin | 00:10:00 | ||
| 2.8 Padding, different ways to set padding, CSS Box model | 00:08:00 | ||
| 2.9 Text align, float, display, inline, block, inline-block, external CSS | 00:11:00 | ||
| 2.10 CSS Module Summary | 00:06:00 | ||
| 3 Git, source control, GitHub and hosting | |||
| 3.1 What is GitHub? | 00:03:00 | ||
| 3.2 Install git, create GitHub repository | 00:08:00 | ||
| 3.3 Git init, git add, git commit, set origin | 00:09:00 | ||
| 3.4 Git push, git pull | 00:10:00 | ||
| 3.5 How to use Github Desktop software to use Github | 00:13:00 | ||
| 3.6 [advanced: feel free to skip] Git branch and this will confuse you | 00:11:00 | ||
| 3.7 Common git related issues faced by new github users | 00:18:00 | ||
| 3.8 [advanced: feel free to skip] GitHub hosting complicated things | 00:00:00 | ||
| 3.9 Github hosting related common issues | 00:08:00 | ||
| 3.10 GitHub overall summary | 00:03:00 | ||
| Git Final Quiz | 00:10:00 | ||
| 3_5 [Bonus] CSS Extra hover, position, specificity, homework | |||
| 3_5.1 pseudoclass part hover all elements, hover special | 00:06:00 | ||
| 3_5.2 pseudoclass focus first child, last child, nth child, visited | 00:09:00 | ||
| 3_5.3 pseudo element before after | 00:10:00 | ||
| 3_5.4 css position static relative absolute fixed | 00:10:00 | ||
| 3_5.5 CSS specificity style order style priority | 00:08:00 | ||
| 3_5.6 css homework and learn by yourself | 00:04:00 | ||
| 4 Build a beautiful and professional portfolio website | |||
| 4.1 Module Introduction, overview of the site you will build | 00:03:00 | ||
| 4.2 Setup and resources needed to start your first ever project | 00:10:00 | ||
| 4.3 Create HTML, link CSS, set title, span tag style | 00:09:00 | ||
| 4.4 Simple image background remove, set fancy background | 00:11:00 | ||
| 4.5 Float, Create container, Put two div side by side, Image size | 00:08:00 | ||
| 4.6 Background Image, Background-repeat, neutralize default style | 00:06:00 | ||
| 4.7 Link Button, target blank, text-decoration, linear gradient | 00:08:00 | ||
| 4.8 Dream image, half-width, background remove | 00:09:00 | ||
| 4.9 Dream area, dream text and download resume link button | 00:07:00 | ||
| 4.10 Experience Area, text highlight, meaningful class name | 00:08:00 | ||
| 4.11 Box shadow, border image, gradient angle, footer | 00:12:00 | ||
| 4.12 Website hosting, live portfolio link, portfolio summary | 00:08:00 | ||
| 5 Personal website, build a brand new website | |||
| 5.1 Personal website, build a complete website by yourself | 00:07:00 | ||
| 6 HTML 5 Semantic tags, audio, video, table, form | |||
| 6.1 audio, video, youtube video, Audio video (iframe) | 00:10:00 | ||
| 6.2 HTML5 Semantic tags section article aside mark | 00:15:00 | ||
| 6.3 html table tbody thead td th caption and table style | 00:13:00 | ||
| 6.4 html form input label fieldset legend textarea submit | 00:15:00 | ||
| 6.5 others (favicon comments attributes option closing tag ) | 00:14:00 | ||
| 6.6 Module Summary HTML5 | 00:05:00 | ||
| 7 CSS3 overflow, transition, transform, flexbox, grid layout | |||
| 7.1 CSS3 Module Introduction | 00:03:00 | ||
| 7.2 CSS Overflow hidden overflow scroll | 00:08:00 | ||
| 7.3 Optimize images, types of images, svg, png, jpg | 00:13:00 | ||
| 7.4 css transform and use multiple transform at the same time | 00:09:00 | ||
| 7.5 transition of css property over time | 00:10:00 | ||
| 7.6 Create simple cricket match with transition and transform | 00:15:00 | ||
| 7.7 css animation and bounce effect with balls | 00:14:00 | ||
| 7.8 flexbox, flex direction justify content align items | 00:11:00 | ||
| 7.9 CSS Grid layout template columns grid gap | 00:11:00 | ||
| 7.10 create calendar using css grid and flex box | 00:09:00 | ||
| 7.11 css media query based on device and using flexbox | 00:15:00 | ||
| 7.12 CSS3 and intermediate css module summary | 00:05:00 | ||
| 8 Learn and Explore Bootstrap | |||
| 8.1 Module Introduction, Purpose of Bootstrap | 00:02:00 | ||
| 8.2 Getting started with Bootstrap | 00:10:00 | ||
| 8.3 Buttons, text color, background corlor, color pallate | 00:11:00 | ||
| 8.4 Image, Responsive image, width style, image thumbnail | 00:09:00 | ||
| 8.5 Website card, card design, card image, card deck | 00:09:00 | ||
| 8.6 Nav tag, Navigation, nav bar, use ul-li for navigation | 00:10:00 | ||
| 8.7 Website Layout, Responsive website | 00:07:00 | ||
| 8.8 Grid layout, row, column, 12 column layout | 00:11:00 | ||
| 8.9 Responsive Grid, responsive break point | 00:09:00 | ||
| 8.10 Top banner animation, Image slide, Carousel | 00:07:00 | ||
| 8.11 Flex Layout, Element align, vertical and horizontal center | 00:12:00 | ||
| 8.12 Bootstrap Overview, Module Summary | 00:06:00 | ||
| 8_5 Develop an e-commerce website using Bootstrap | |||
| 8_5.1 Website overview and different section that you will build | 00:02:00 | ||
| 8_5.2 Project setup, github repository, project resources | 00:09:00 | ||
| 8_5.3 Container, navbar, navbar item, links | 00:08:00 | ||
| 8_5.4 Simple top banner carousel, set image for carousel | 00:05:00 | ||
| 8_5.5 Advanced carousel with row and column divide | 00:08:00 | ||
| 8_5.6 Vertical center in carousel item, button style | 00:12:00 | ||
| 8_5.7 Categories, column gap, category in each row | 00:19:00 | ||
| 8_5.8 Shoe Category, card-deck, card box shadow | 00:11:00 | ||
| 8_5.9 Backpack Category, card footer, align button | 00:09:00 | ||
| 8_5.10 Subscribe Section, Horizontal and vertical center | 00:11:00 | ||
| 8_5.11 Footer, small tag, text center align | 00:04:00 | ||
| 8_5.12 Project summary, Code Recap | 00:09:00 | ||
| 9 Hot Gadgets, e-commerce website by yourself | |||
| 9.1 Hot Gadgets, e-commerce website by yourself | 00:08:00 | ||
| 10 Landing Page Milestone Assignment | |||
| 10.1 Electronic school Responsive bootstrap landing page assignment | 00:12:00 | ||
| 11 CSS Bonus Content | |||
| 11.1 css position more explanation relative absolute | 00:14:00 | ||
| 11.2 Apply relative position in a photo album | 00:13:00 | ||
| 11.3 Apply transition transform in a practical situation | 00:10:00 | ||
| 11.4 CSS Grid Layout Extra explanation and compare with flexbox | 00:10:00 | ||
| 11.5 More discussion about display inline block inline-block | 00:16:00 | ||
| 11.6 git feature branch and bug fix branch | 00:13:00 | ||
| 11.7 inline css when and how to use inline css | 00:14:00 | ||
| 11.8 How to start working on a responsive website | 00:08:00 | ||
| 11.9 Setup navigation bar with bootstrap for a responsive website | 00:16:00 | ||
| 11.10 Setting profiles rows padding and images | 00:15:00 | ||
| 11.11 Responsive and gap to set three two or one items | 00:10:00 | ||
| 11.12 Module summary | 00:07:00 | ||
| 12 Revision Day 2 | |||
| 12.1 Revision Day 2 activities | 00:09:00 | ||
| 12.2 Install Node and run node in Visual Studio Code | 00:08:00 | ||
| 12_5 Getting started with Javascript | |||
| 12_5.1 Module overview, need for Javascript | 00:04:00 | ||
| 12_5.2 Run Javascript in browser, run Javascript in VS Code | 00:15:00 | ||
| 12_5.3 What is variable, declare a variable, see output | 00:06:00 | ||
| 12_5.4 Variable type, Numeric, String, Boolean | 00:10:00 | ||
| 12_5.5 variable name naming convention and best practice | 00:10:00 | ||
| 12_5.6 explore string case change index split | 00:12:00 | ||
| 12_5.7 integer float parseInt parseFloat type conversion | 00:12:00 | ||
| 12_5.8 Mathematical operations in JavaScript | 00:13:00 | ||
| 12_5.9 Math absolute round floor ceil random | 00:09:00 | ||
| 12_5.10 Make conditional decision, if-else, comparison | 00:11:00 | ||
| 12_5.11 Multiple conditions, fulfill both conditions, else if | 00:10:00 | ||
| 12_5.12 JavaScript Date timezone and Module Summary | 00:07:00 | ||
| 13 JavaScript Fundamental Concepts | |||
| 13.1 Fundamental JavaScript Module Introduction | 00:05:00 | ||
| 13.2 Array, index, set by index, indexOf | 00:11:00 | ||
| 13.3 Array advanced, push, pop, array length | 00:06:00 | ||
| 13.4 array add and remove element from the beginning and slice | 00:10:00 | ||
| 13.5 While loop, debug JavaScript code, less or equal | 00:10:00 | ||
| 13.6 For loop, run a loop for each element of an array | 00:12:00 | ||
| 13.7 javascript switch case break and default | 00:10:00 | ||
| 13.8 Function, call function | 00:06:00 | ||
| 13.9 Function parameter, multiple parameter, function return | 00:10:00 | ||
| 13.10 Comment, multiple lines comment | 00:04:00 | ||
| 13.11 Object, key value pair, get object property, set value | 00:12:00 | ||
| 13.12 Basic JavaScript Overview, Module Summary | 00:04:00 | ||
| 13_5 Apply Javascript Concepts | |||
| 13_5.1 Module Introduction Apply JS | 00:04:00 | ||
| 13_5.2 Unit Convert Inch to Feet use variable and function | 00:14:00 | ||
| 13_5.3 variable let and const and how to use them | 00:12:00 | ||
| 13_5.4 check whether a year is a Leap Year or not | 00:13:00 | ||
| 13_5.5 Calculate Factorial of a number using for loop | 00:14:00 | ||
| 13_5.6 Calculate Factorial of a number using a while loop | 00:10:00 | ||
| 13_5.7 Calculate Factorial in a Recursive function | 00:12:00 | ||
| 13_5.8 Create a Fibonacci Series using a for loop | 00:12:00 | ||
| 13_5.9 Fibonacci Element in a Recursive Way | 00:07:00 | ||
| 13_5.10 create Fibonacci series in a recursive way | 00:10:00 | ||
| 13_5.11 Check whether a number is a Prime Number or not | 00:14:00 | ||
| 13_5.12 Apply Basic JavaScript Module Summary | 00:05:00 | ||
| 14 Javascript coding problems, Simple Interview Question | |||
| 14.1 Module Introduction, problem setup | 00:03:00 | ||
| 14.2 Swap variable, swap without temp, destructing | 00:11:00 | ||
| 14.3 Random number, random number between 1 to 6 | 00:11:00 | ||
| 14.4 Find max of two values, find max of three values | 00:09:00 | ||
| 14.5 Find the largest element of an array | 00:08:00 | ||
| 14.6 Sum of all numbers in an array | 00:09:00 | ||
| 14.7 Remove duplicate item from an array | 00:09:00 | ||
| 14.8 Count the number of words in a string | 00:10:00 | ||
| 14.9 Reverse a string | 00:07:00 | ||
| 14.10 Module summary | 00:05:00 | ||
| 15 Problem Solving assignment | |||
| 15.1 Problem Solving assignment | 00:15:00 | ||
| 16 Basic JavaScript Bonus Module | |||
| 16.1 revisit Variable, string, array, loop | 00:11:00 | ||
| 16.2 Remove confusion with function and function vs loop | 00:14:00 | ||
| 16.3 how recursion works and recursion vs iterative | 00:13:00 | ||
| 16.4 Travelling in a Jungle and counting wild animals | 00:15:00 | ||
| 16.5 Is Problem Solving Important Should I focus on it | 00:05:00 | ||
| 17 Serious Web Developer Productivity, Efficiency, Tips & Tricks | |||
| 17.1 typing practice, typing lesson, typing test | 00:03:00 | ||
| 17.2 developer question answer, Stack Overflow, weekly newsletter | 00:08:00 | ||
| 17.3 Emmet, magic to write large amount HTML and CSS | 00:09:00 | ||
| 17.4 Live server, automatic reload of the website after save | 00:06:00 | ||
| 17.5 VSCode extension, JavaScript code snippet, ES linter | 00:05:00 | ||
| 17.6 Visual Studio Code shortcut key, settings change | 00:07:00 | ||
| 17.7 VS code multi cursor and multi line edit magic | 00:10:00 | ||
| 17.8 Module Summary, keep updated about skills | 00:03:00 | ||
| 18 How Javascript Works & DOM | |||
| 18.1 JavaScript and DOM Module Introduction | 00:03:00 | ||
| 18.2 Create Script tag and connect external Script file | 00:12:00 | ||
| 18.3 How Javascript Run and why script order is important | 00:12:00 | ||
| 18.4 What is DOM (Document Object Model) | 00:10:00 | ||
| 18.5 Capture Elements from HTML File using getElementById | 00:10:00 | ||
| 18.6 how to use getElementsByClassName and change innerHTML | 00:12:00 | ||
| 18.7 How to use querySelector and querySelectorAll | 00:09:00 | ||
| 18.8 node, node type, nodelist, htmlcollection, setAttribute | 00:13:00 | ||
| 18.9 How to add elements to HTML using Javascript | 00:10:00 | ||
| 18.10 module summary Javascript and DOM | 00:04:00 | ||
| 19 Function, addEventListener, Event bubble | |||
| 19.1 When to use a function, function inside an array | 00:19:00 | ||
| 19.2 When to return from a function and from where | 00:13:00 | ||
| 19.3 Callback function and pass different function | 00:12:00 | ||
| 19.4 arguments and deal with unknown number of arguments | 00:09:00 | ||
| 19.5 How to organize code inside a function | 00:09:00 | ||
| 19.6 What is Event, different types of event in web | 00:08:00 | ||
| 19.7 add event handler directly on an element | 00:10:00 | ||
| 19.8 add event listener using javascript | 00:14:00 | ||
| 19.9 Event bubble with example | 00:13:00 | ||
| 19.10 Stop propagating event bubble | 00:05:00 | ||
| 19.11 Event delegate and purpose of Event bubble | 00:21:00 | ||
| 19.12 Function, Event, Event bubble module summary | 00:05:00 | ||
| 19_5 Pioneer Bank, develop a simple bank website | |||
| 19_5.1 Project overview, Transaction and balance update | 00:02:00 | ||
| 19_5.2 Project Setup, github integration, bootstrap text align | 00:09:00 | ||
| 19_5.3 Login window, input field, password text field, form control | 00:09:00 | ||
| 19_5.4 Get HTML elements by tag, class or Id, Add Event Listener | 00:13:00 | ||
| 19_5.5 CSS styles in Javascript, Dynamically hide an element | 00:08:00 | ||
| 19_5.6 Dynamically display a hidden element using Javascript | 00:06:00 | ||
| 19_5.7 Deposit, Withdraw, Balance area, add column margin | 00:10:00 | ||
| 19_5.8 Submit transaction, placeholder help text for input | 00:07:00 | ||
| 19_5.9 Deposit button event handler, capture deposit amount | 00:07:00 | ||
| 19_5.10 Get innerText using Javascript, update text dynamically | 00:08:00 | ||
| 19_5.11 Update two fields at the same time, create function | 00:11:00 | ||
| 19_5.12 Money withdraw event handler, cleaner code with function | 00:11:00 | ||
| 19_5.13 Update withdraw amount, Reduce balance for withdraw | 00:05:00 | ||
| 19_5.14 Module summary and overall project overview | 00:08:00 | ||
| 20 Shopping Cart, Develop an interactive shopping Cart | |||
| 20.1 Shopping Cart, Develop an interactive shopping Cart | 00:08:00 | ||
| 20.2 How to start a simple Javascript project | 00:14:00 | ||
| 20_5 REVISIT JAVASCRIPT AND WORK ON SHOPPING CART | |||
| 20_5.1 Module Introduction Revisit JavaScript | 00:00:00 | ||
| 20_5.2 How to learn any Programming Language | 00:00:00 | ||
| 20_5.3 How to name variable and where to declare variable | 00:00:00 | ||
| 20_5.4 conditional code format and some feedback | 00:00:00 | ||
| 20_5.5 function return data and if possible similar data | 00:00:00 | ||
| 20_5.6 function return and more feedback | 00:00:00 | ||
| 20_5.7 shopping cart increase case count | 00:00:00 | ||
| 20_5.8 shopping cart handle decrease of count | 00:00:00 | ||
| 20_5.9 calculate all product total | 00:00:00 | ||
| 20_5.10 calculate tax and grand total | 00:00:00 | ||
| 20_5.11 Module Summary Revisit Javascript and Shopping cart | 00:00:00 | ||
| 21 INTEGRATE JAVASCRIPT BONUS CONTENT | |||
| 21.1 Global vs local variable IIFE function expression vs declaration | 00:00:00 | ||
| 21.2 Four situation when you should create a function | 00:00:00 | ||
| 21.3 when and how to use arguments in a function | 00:00:00 | ||
| 21.4 when and how to use javascript callback function | 00:00:00 | ||
| 21.5 concept of event bubble and event delegation | 00:00:00 | ||
| 21.6 build a digital calculator practice problem | 00:00:00 | ||
| 22 Pin matcher assignment | |||
| 22.1 Pin matcher assignment to integrate javascript | 00:00:00 | ||
| 23 Modern JavaScript, ES6, S2015, ECMASCRIPT 2015 | |||
| 23.1 Module overview, ES6, github integration setup | 00:06:00 | ||
| 23.2 Let, const, array declared with const, object declared with const | 00:11:00 | ||
| 23.3 Function default parameter for not provided values | 00:05:00 | ||
| 23.4 Template String, multiple line string | 00:08:00 | ||
| 23.5 Arrow function, multiple parameter, function body | 00:10:00 | ||
| 23.6 Spread operator, concatenate multiple arrays, array max | 00:10:00 | ||
| 23.7 Class, constructor, create object from class | 00:10:00 | ||
| 23.8 Inheritance, extends class, super, class method | 00:09:00 | ||
| 23.9 ES6 Module summary | 00:05:00 | ||
| 24 Advanced JavaScript, Javascript Interview Questions | |||
| 24.1 Module Overview, git integration setup | 00:04:00 | ||
| 24.2 Truthy and Falsy values | 00:11:00 | ||
| 24.3 Null Vs Undefined, different ways you will get undefined | 00:10:00 | ||
| 24.4 == vs ===, implicit conversion | 00:08:00 | ||
| 24.5 map, filter, find, smart way to run for loop | 00:15:00 | ||
| 24.6 Apply map, filter, find on an array of objects | 00:07:00 | ||
| 24.7 Arguments, array like objects, log all array elements | 00:07:00 | ||
| 24.8 Scope, block scope, access outer scope variable | 00:13:00 | ||
| 24.9 Closure, encapsulation, private variable | 00:09:00 | ||
| 24.10 Array slice, splice, array join elements | 00:09:00 | ||
| 24.11 Module Summary and overview | 00:08:00 | ||
| Advanced JavaScript Final quiz | 00:10:00 | ||
| 24_5 API JSON, Server, Data load, dynamic website, http | |||
| 24_5.1 Module overview, what you will learn from this module | 00:02:00 | ||
| 24_5.2 How internet works, DNS server, hosting server, database | 00:07:00 | ||
| 24_5.3 What is an API, the purpose of API, GET, POST | 00:06:00 | ||
| 24_5.4 JSON, JSON Structure, parse, stringify, JSON properties | 00:10:00 | ||
| 24_5.5 Load Data, JSON placeholder, GET data, display data on UI | 00:13:00 | ||
| 24_5.6 HTTP request, Status code, network tab, bad API | 00:11:00 | ||
| 24_5.7 Send data to the server, HTTP POST Method, GET Vs POST | 00:04:00 | ||
| 24_5.8 Send data to server, HTTP Post, JSON Stringify | 00:11:00 | ||
| 24_5.9 JQuery ajax, JQuery get, JQuery post | 00:04:00 | ||
| 24_5.10 Module Summary, API, Server Overview | 00:03:00 | ||
| 25 bind, call, appy, window, this, async-await, date | |||
| 25.1 multiple ways to set DOM event handler | 00:10:00 | ||
| 25.2 object method property review | 00:09:00 | ||
| 25.3 object use bind to borrow method from another object | 00:12:00 | ||
| 25.4 difference between bind, call and apply | 00:12:00 | ||
| 25.5 window, global variable, global scope | 00:17:00 | ||
| 25.6 new keyword, class and object difference | 00:09:00 | ||
| 25.7 how to understand the this keyword | 00:14:00 | ||
| 25.8 async await how to use it for async call | 00:16:00 | ||
| 25.9 Asynchronous Javascript setTimeout, setInterval | 00:10:00 | ||
| 25.10 How Javascript works event loop stack and queue | 00:04:00 | ||
| 25.11 JavaScript Datetime timezone and others | 00:07:00 | ||
| 26 TRY CREATE REACT APP | |||
| 26.1 Install React using Create React App | 00:00:00 | ||
| 27 How Browser Works, browser api and methods | |||
| 27.1 Module Overview, ContentEditable, live edit | 00:03:00 | ||
| 27.2 How Browser works, DOM tree, Render Tree | 00:08:00 | ||
| 27.3 Website alert, confirmation, prompt to collect data | 00:07:00 | ||
| 27.4 URL, URL parts, query string, hash, subdomain | 00:07:00 | ||
| 27.5 document location, access href, hash, assign | 00:05:00 | ||
| 27.6 history api, back, forward, go, history length | 00:05:00 | ||
| 27.7 cookies, dev tool application tab, cookies at server | 00:07:00 | ||
| 27.8 local storage, session storage, edit storage information | 00:09:00 | ||
| 27.9 Browser clear cache, chrome extension, web store, restart | 00:07:00 | ||
| 27.10 Browser Overview, Module Summary | 00:03:00 | ||
| 28 JavaScript debug, web debug, dev tool mastering | |||
| 28.1 Module overview, salary app overview, git clone issues | 00:05:00 | ||
| 28.2 dev tool element tab, edit HTML, get style, device tab | 00:13:00 | ||
| 28.3 edit CSS style live, hover class, CSS box model, event handler | 00:14:00 | ||
| 28.4 sources tab, break point, call stack, console table | 00:14:00 | ||
| 28.5 console tab, preserve log, error log, console api | 00:08:00 | ||
| 28.6 network tab, request method, header, response type | 00:05:00 | ||
| 28.7 Performance tab, memory tab, Audit, application tab | 00:05:00 | ||
| 28.8 Module Summary, Deb tool debug Overview | 00:04:00 | ||
| 29 One final recap day of javascript | |||
| 29.1 Javascript Things you will need in React | 00:00:00 | ||
| 30 Weather api practice problem | |||
| 30.1 Explore fun tasks with borded api | 00:00:00 | ||
| 30.2 Explore Random User API Who Am I | 00:00:00 | ||
| 30.3 Practice Problem Temperature Hot openweathermap api | 00:00:00 | ||
| 30_5 dev tool and bug fixing practice | |||
| 30_5.1 Debugging dev tool and bug fixing practice | 00:13:00 | ||
| 30_5.2 [optional] how to start fixing bug on a website | 00:11:00 | ||
| 31 ASSIGNMENT 6 | |||
| 31.1 Hard rock music and lyrics search | 00:00:00 | ||
| 31.2 Users API, Dynamic nested API and display multiple data from API | 00:00:00 | ||
| 32 JavaScript Blog day | |||
| 32.1 Summary of the 10 things you have learned in Javascript | 00:05:00 | ||
| 33 Modern Front-end application core concepts | |||
| 33.1 Module overview and modern application core parts | 00:02:00 | ||
| 33.2 Web component, 4 types of component, identify component | 00:07:00 | ||
| 33.3 Template, dynamically create HTML elements based on data | 00:16:00 | ||
| 33.4 Single Page Application (SPA), Performance benefit | 00:07:00 | ||
| 33.5 Routing, Route parameter, Routing in Angular | 00:06:00 | ||
| 33.6 Website state, state management, purpose of state | 00:06:00 | ||
| 33.7 Charting framework, d3js, nvd3, chartjs | 00:08:00 | ||
| 33.8 Simple Angular Application, angular cli, routing | 00:15:00 | ||
| 33.9 Module Summary | 00:04:00 | ||
| 34 React Fundamental, JSX, Component, props, state, lifecycle | |||
| 34.1 React Core concept module overview | 00:05:00 | ||
| 34.2 Install React App use create react app | 00:10:00 | ||
| 34.3 Create react app folder structure and favicon | 00:12:00 | ||
| 34.4 JSX, Dynamic content, Dynamic Style in React | 00:15:00 | ||
| 34.5 Component, 4 ways to identify a component | 00:05:00 | ||
| 34.6 Create Component, return multiple HTML from a component | 00:10:00 | ||
| 34.7 Pass dynamic data to components, props in react | 00:16:00 | ||
| 34.8 Pass object to components and access object | 00:15:00 | ||
| 34.9 Create multiple components from an array of objects | 00:13:00 | ||
| 34.10 Introduction to Component state | 00:08:00 | ||
| 34.11 Component state hook and set state method | 00:10:00 | ||
| 34.12 Set and update state and set event handler in React | 00:12:00 | ||
| 34.13 Module Summary React Core Concepts | 00:04:00 | ||
| 35 How React works, Recap React Concepts | |||
| 35.1 Module Introduction How React Works | 00:00:00 | ||
| 35.2 What is React | 00:00:00 | ||
| 35.3 Library vs Framework | 00:00:00 | ||
| 35.4 Angular vs react vs vue which one to learn | 00:00:00 | ||
| 35.5 Install React and React Component Recap | 00:00:00 | ||
| 35.6 Pass data through Props in React | 00:00:00 | ||
| 35.7 How to write and destructure usestate | 00:00:00 | ||
| 35.8 Event handler state update and pass state Recap | 00:00:00 | ||
| 35.9 How React works virtual dom diff algorithm fiber | 00:00:00 | ||
| 35.10 Render multiple component from an array recap | 00:00:00 | ||
| 35.11 Load data from API using useEffect recap | 00:00:00 | ||
| 35.12 Module Summary Recap and How React Works | 00:00:00 | ||
| Lession Final Quiz 40 | 00:10:00 | ||
| 36 Simple React SPA with Multiple Components | |||
| 36.1 React Core concept module overview | 00:05:00 | ||
| 36.2 Install react set favicon and get resources | 00:10:00 | ||
| 36.3 Editor setup, default project setup clean | 00:08:00 | ||
| 36.4 Create a component, folder structure, website logo | 00:12:00 | ||
| 36.5 Setting up logo position, navigation, nav menu | 00:07:00 | ||
| 36.6 Create Shop Component, load data and set state | 00:12:00 | ||
| 36.7 Component layout, use flexbox, setup area container | 00:06:00 | ||
| 36.8 Product Component, send dynamic data by props | 00:11:00 | ||
| 36.9 Display more information in the Product Component | 00:12:00 | ||
| 36.10 Install third party library, font awesome, react-fontawesome | 00:11:00 | ||
| 36.11 Pass eventhandler to child component and handle event | 00:12:00 | ||
| 36.12 Cart state setup and update cart state on add to cart button click | 00:06:00 | ||
| 36.13 Total Product price, shipping cost, Tax and total price | 00:19:00 | ||
| 36.14 Simple React SPA module summary | 00:03:00 | ||
| 37 Revision day | |||
| 37.1 Revision day after finishing milestone | 00:05:00 | ||
| 38 Simple React SPA Practice | |||
| 38.1 Ultra Nation load countries data using useEffect | 00:00:00 | ||
| 38.2 display loaded data in a simple way | 00:00:00 | ||
| 38.3 create child component and pass data | 00:00:00 | ||
| 38.4 pass multiple data to a child component | 00:00:00 | ||
| 38.5 how to add shared eventhandler | 00:00:00 | ||
| 38.6 Create shopping cart and use array reduce | 00:00:00 | ||
| 38.7 build your react app and host your react app in Netlify | 00:00:00 | ||
| 38.8 [optional] how to create fake data in Javascript | 00:00:00 | ||
| 38.9 React SPA practice to create a user collection | 00:00:00 | ||
| 39 REACT ASSIGNMENT 7 | |||
| 39.1 Simple React SPA Assignment to build a online class website | 00:00:00 | ||
| 40 Simple React Bonus | |||
| 40.1 Explain reduce of an array with example | 00:00:00 | ||
| 40.2 Where to declare event handler and make arrow function | 00:00:00 | ||
| 40.3 Build team and how react works | 00:00:00 | ||
| 41 React Bootstrap, Material UI, Axios, Rechart | |||
| 41.1 Module Introduction React Bootstrap | 00:00:00 | ||
| 41.2 use Bootstrap in your react application | 00:00:00 | ||
| 41.3 getting started with react bootstrap | 00:00:00 | ||
| 41.4 use jumbotron from react bootstrap | 00:00:00 | ||
| 41.5 use multiple react bootstrap component | 00:00:00 | ||
| 41.6 React Fragment empty element | 00:00:00 | ||
| 41.7 getting started with Material UI | 00:00:00 | ||
| 41.8 load data and display Material UI card | 00:00:00 | ||
| 41.9 Use reachart to draw any type of chart using React | 00:00:00 | ||
| 41.10 introduction to axios advance data loading system | 00:00:00 | ||
| 41.11 Module summary | 00:00:00 | ||
| 42 React Routing, State management | |||
| 42.1 Module overview Routing Devtool and share state | 00:09:00 | ||
| 42.2 React Router, Install React Router Dom | 00:08:00 | ||
| 42.3 Setup Router, Router path, exact path not found path | 00:12:00 | ||
| 42.4 Dynamic path, set route path parameter | 00:11:00 | ||
| 42.5 Load data based on route parameter, conditional formatting | 00:14:00 | ||
| 42.6 Different ways to handle state, Make button navigate to a route | 00:09:00 | ||
| 42.7 Save state on Localstore, store key and count, virtual DOM | 00:12:00 | ||
| 42.8 Retrieve data from local storage, set cart from saved state | 00:14:00 | ||
| 42.9 Review Component, Review Items, CSS in Javascript style | 00:10:00 | ||
| 42.10 module summary | 00:08:00 | ||
| 43 More Router, React Devtool, conditional format | |||
| 43.1 Module Introduction | 00:00:00 | ||
| 43.2 Remove from cart, pass parameter on click, remove from state | 00:00:00 | ||
| 43.3 Share components among multiple routes, share data on cart | 00:07:00 | ||
| 43.4 React Developer Tool, Chrome extension, Refactor add to Cart | 00:16:00 | ||
| 43.5 Sync state in multiple route, calculate total price in review page | 00:10:00 | ||
| 43.6 Please Order, Clear state, show conditional image | 00:14:00 | ||
| 43.7 Review of route dynamic parameters and useParams | 00:00:00 | ||
| 43.8 react router nested routes | 00:10:00 | ||
| 43.9 Explore more about Conditional Rendering | 00:00:00 | ||
| 43.10 Module summary | 00:00:00 | ||
| 44 React Router Practice Day | |||
| 44.1 project setup and react router installation | 00:00:00 | ||
| 44.2 setup simple react router with root and no match | 00:00:00 | ||
| 44.3 create route parameter and read from route parameter | 00:00:00 | ||
| 44.4 two ways to navigate dynamic route | 00:00:00 | ||
| 44.5 Rest Countries React Router Practice Problem | 00:00:00 | ||
| 45 Context Api, Use Reducer, Redux concepts | |||
| 45.1 Module overview about state management | 00:04:00 | ||
| 45.2 share state with sibling component | 00:06:00 | ||
| 45.3 share data to grandchildren | 00:09:00 | ||
| 45.4 context api set dynamic data | 00:09:00 | ||
| 45.5 update context API from any child Component | 00:10:00 | ||
| 45.6 filter data based on dynamic context change | 00:18:00 | ||
| 45.7 Shortcut destructuring of props | 00:15:00 | ||
| 46 Bonus Content | |||
| 46.1 how localStorage and sessionStorage works | 00:00:00 | ||
| 46.2 explain props and data flow parent to child | 00:00:00 | ||
| 46.3 useState useEffect useParams useHistory hook overview | 00:00:00 | ||
| 46.4 revisit shopping cart calculation and reduce | 00:00:00 | ||
| 47 Assignment 8 | |||
| 47.1 Social buddy react router material ui assignment | 00:00:00 | ||
| 48 bonus content | |||
| 48.1 how to implement Facebook Like button | 00:00:00 | ||
| 48.2 handle multiple data loading style and nested data access | 00:00:00 | ||
| 48.3 Why useState useEffect are called Hook | 00:00:00 | ||
| 49 Simple React authentication using Firebase authentication | |||
| 49.1 Module Introduction, authentication vs Authorization | 00:07:00 | ||
| 49.2 Create firebase project, Google Analytics Overview | 00:10:00 | ||
| 49.3 sign in method setup and email verification template | 00:10:00 | ||
| 49.4 Create simple authentication project, firebase config | 00:12:00 | ||
| 49.5 Install firebase, initialize firebase app | 00:09:00 | ||
| 49.6 Sign in with google, open google login popup | 00:09:00 | ||
| 49.7 Set logged in user in state, display logged in user info | 00:11:00 | ||
| 49.8 Not google user login, signout user | 00:11:00 | ||
| 49.9 Module Summary | 00:00:00 | ||
| 50 Login Form and Route Integration | |||
| 50.1 Module Introduction Login form | 00:00:00 | ||
| 50.2 Create simple login form email and password | 00:00:00 | ||
| 50.3 form field validation using regular expression | 00:00:00 | ||
| 50.4 Update State from Form Field | 00:00:00 | ||
| 50.5 create new user and handle error message | 00:00:00 | ||
| 50.6 toggle sign in and sign up form | 00:00:00 | ||
| 50.7 Update user name and other information to firebase | 00:00:00 | ||
| 50.8 How to handle facebook login | 00:00:00 | ||
| 50.9 Module Summary | 00:00:00 | ||
| 51 Shared auth and Protected Route | |||
| 51.1 Module Introduction Auth Integration | 00:00:00 | ||
| 51.2 create login route and set login form | 00:00:00 | ||
| 51.3 create user context and set logged in user in context | 00:00:00 | ||
| 51.4 Create Private Route and set auth Redirect | 00:00:00 | ||
| 51.5 Redirect to the initial page and use Router Link | 00:00:00 | ||
| 51.6 [optional] refactor Login manager to modularize code | 00:00:00 | ||
| 51.7 [optional] more refactoring of sign in method | 00:00:00 | ||
| 51.8 implement signout and redirect from private route | 00:00:00 | ||
| 51.9 create shipment form using React hook form | 00:00:00 | ||
| 51.10 Module Summary | 00:00:00 | ||
| 52 Firebase auth Recap and useReducer | |||
| 52.1 Module Introduction | 00:00:00 | ||
| 52.2 get simple google login auth set | 00:00:00 | ||
| 52.3 create user context to share it with multiple components | 00:00:00 | ||
| 52.4 create private route to protect a path | 00:00:00 | ||
| 52.5 another recap of firebase auth integration | 00:00:00 | ||
| 52.6 Redux Core concepts Store Action dispatch reducer | 00:00:00 | ||
| 52.7 a simple introduction of useReducer hook | 00:00:00 | ||
| 52.8 use useReducer for a simple case | 00:00:00 | ||
| 52.9 useReducer with collection | 00:00:00 | ||
| 52.10 useReducer with action and payload | 00:00:00 | ||
| 53 Getting started with Redux | |||
| 53.1 Module introduction about Redux | 00:06:00 | ||
| 53.2 install redux and react redux in a react app | 00:08:00 | ||
| 53.3 setup a simple application to use redux | 00:11:00 | ||
| 53.4 set actions and dispatch for redux cart | 00:08:00 | ||
| 53.5 create Cart Reducers handle actions | 00:13:00 | ||
| 53.6 create store use react redux provider | 00:10:00 | ||
| 53.7 connect component with redux state and actions | 00:13:00 | ||
| 53.8 use redux state and redux actions from a child component | 00:10:00 | ||
| 53.9 use redux to read dynamic state | 00:12:00 | ||
| 53.10 bug fix with redux reducer and action dispatch | 00:14:00 | ||
| 53.11 Redux summary, Saga, Redux Dev Tool Chrome extension | 00:13:00 | ||
| 54 bonus content | |||
| 54.1 How to Publish a React application in Firebase | 00:00:00 | ||
| 54.2 How to start react type application as assignment | 00:00:00 | ||
| 54.3 Hot Onion Practice Problem (Router and firebase) | 00:00:00 | ||
| 55 Firebase hosting and Travel Guru Assignment | |||
| 55.1 How to Handle Return Promise From A Function | 00:00:00 | ||
| 55.2 email verification password reset of an user | 00:00:00 | ||
| 55.3 useLocation destructuring in Private Route | 00:00:00 | ||
| 55.4 class Component and difference with hook | 00:00:00 | ||
| 55.5 travel guru firebase authentication assignment | 00:00:00 | ||
| 56 Node, Express, get api, post api, postman | |||
| 56.1 Module overview Introduction to Node | 00:03:00 | ||
| 56.2 Install express, start a server, your first api | 00:16:00 | ||
| 56.3 how to publish node project in git | 00:00:00 | ||
| 56.4 install nodemon, api return object, create multiple api | 00:06:00 | ||
| 56.5 dynamic api, api parameter, access params, access query | 00:08:00 | ||
| 56.6 use fetch to load data from server, middleware, handle cors | 00:11:00 | ||
| 56.7 create POST api, install postman, read post data, use body parser | 00:10:00 | ||
| 56.8 post data from website and read post api response | 00:14:00 | ||
| 56.9 Node express module summary | 00:05:00 | ||
| 57 Mongodb, cloud database integration, environment variable | |||
| 57.1 mongodb and mongo atlas module overview | 00:00:00 | ||
| 57.2 install mongodb, create mongodb atlas account | 00:00:00 | ||
| 57.3 connect to cloud database introduction to CRUD | 00:00:00 | ||
| 57.4 send data to database and read data from ui | 00:00:00 | ||
| 57.5 save data in database and Read all data | 00:00:00 | ||
| 57.6 load data database data and show on the UI | 00:00:00 | ||
| 57.7 Delete an item from the database from UI | 00:00:00 | ||
| 57.8 load single product from database using id | 00:00:00 | ||
| 57.9 update or modify a single item and save database | 00:00:00 | ||
| 57.10 Make CRUD operation working smoothly | 00:00:00 | ||
| 57.11 module summary and CRUD overview | 00:00:00 | ||
| 58 Secure a node API using JWT token | |||
| 58.1 Module introduction and project setup | 00:00:00 | ||
| 58.2 Create booking field and front end setup | 00:00:00 | ||
| 58.3 create server connect mongodb and verify connection | 00:00:00 | ||
| 58.4 send data to database and store in mongodb | 00:00:00 | ||
| 58.5 load filtered data from database for a specific user | 00:00:00 | ||
| 58.6 introduce JWT token and get jwt token on client side | 00:00:00 | ||
| 58.7 verify jwt token in the server end using firebase admin | 00:00:00 | ||
| 58.8 send 401 unauthorized status and refresh token concept | 00:00:00 | ||
| 58.9 set environment variable and hide sensitive information | 00:00:00 | ||
| 58.10 module summary and code review | 00:00:00 | ||
| 59 E-commerce site Node and Mongodb integration | |||
| 59.1 Module Introduction ema-john server | 00:00:00 | ||
| 59.2 connect database and create post endpoint | 00:00:00 | ||
| 59.3 insert bulk data many data to the database | 00:00:00 | ||
| 59.4 load data from the server | 00:00:00 | ||
| 59.5 load some products using keys | 00:00:00 | ||
| 59.6 Handle Inventory and how to store image on server | 00:00:00 | ||
| 59.7 Save orders in a new data collection in mongodb | 00:00:00 | ||
| 59.8 A simple overview of node mailer to send email | 00:00:00 | ||
| 59.9 a simple introduction to mongoose | 00:00:00 | ||
| 59.10 Module Summary and folder architecture | 00:00:00 | ||
| 60 Deploy to Heroku and Practice Problem | |||
| 60.1 Introduction to Heroku setup account and initial deploy | 00:00:00 | ||
| 60.2 how to publish and update heroku deployed server | 00:00:00 | ||
| 60.3 deploy client side project to firebase with server side url | 00:00:00 | ||
| 60.4 doctors porter project practice problem | 00:00:00 | ||
| 61 Full Stack Milestone Assignment | |||
| 61.1 A full stack assignment Volunteer Network | 00:00:00 | ||
| 61.2 [optional] different ways to start a full stack project | 00:00:00 | ||
| 61.3 [optional] set dynamic images and columns on client side | 00:00:00 | ||
| 61.4 [optional] search and load filtered data from mongodb | 00:00:00 | ||
| 62 Google Map CSS Preprocessor | |||
| 62.1 Module Introduction | 00:00:00 | ||
| 62.2 How to display a location on a Google Map | 00:00:00 | ||
| 62.3 Display Driving Direction and Route on Google Map | 00:00:00 | ||
| 62.4 Dynamically search and display travelling route on Google Map | 00:00:00 | ||
| 62.5 Display a loading spinner on a React Component | 00:00:00 | ||
| 62.6 Update Title based on component | 00:00:00 | ||
| 62.7 A simple overview of React Native | 00:00:00 | ||
| 63 Integrate Stripe Payment gateway (SSLCommerz) | |||
| 63.1 Module Overview and Payment gateway introduction | 00:00:00 | ||
| 63.2 stripe account install stripe and stripe for react | 00:00:00 | ||
| 63.3 create payment Process component with simple card form | 00:00:00 | ||
| 63.4 Use detail credit card from and avoid login after page refresh | 00:00:00 | ||
| 63.5 Handle payment processing error and success | 00:00:00 | ||
| 63.6 conditional payment form and store payment data on database | 00:00:00 | ||
| 63.7 Get a high level overview of Bangladeshi Payment Gateway | 00:00:00 | ||
| 63.8 How to implement search that loads data from database | 00:00:00 | ||
| 63.9 A brief introduction to higher order component | 00:00:00 | ||
| 63.10 Module summary | 00:00:00 | ||
| 64 Complete Website Project part-1 | |||
| 64.1 module introduction | 00:00:00 | ||
| 64.2 set navbar and header main component | 00:00:00 | ||
| 64.3 apply partial background of common components | 00:00:00 | ||
| 64.4 Set multiple business info components | 00:00:00 | ||
| 64.5 dynamically style business info and infocard | 00:00:00 | ||
| 64.6 set services and related data with style | 00:00:00 | ||
| 64.7 complete testimonials blogs and a few more components | 00:00:00 | ||
| 64.8 Module Summary | 00:00:00 | ||
| 65 Complete Website Project part-2 | |||
| 65.1 Module Introduction and Shared Components | 00:00:00 | ||
| 65.2 Create Appointment header and react calendar | 00:00:00 | ||
| 65.3 set bookings with selected date and style booking card | 00:00:00 | ||
| 65.4 Display a modal from on appointment click | 00:00:00 | ||
| 65.5 Style Modal form and Extract data to send to server | 00:00:00 | ||
| 65.6 Create Server to store appointment in a database | 00:00:00 | ||
| 65.7 send appointment and save to database | 00:00:00 | ||
| 65.8 set untidy dashboard with three columns | 00:00:00 | ||
| 65.9 Display appointments for the selected date | 00:00:00 | ||
| 65.10 Module summary and your homework | 00:00:00 | ||
| 66 Manage Image Upload and Admin Panel | |||
| 66.1 Create Admin page to upload image to the server | 00:00:00 | ||
| 66.2 Save uploaded image to the server | 00:00:00 | ||
| 66.3 display sensitive information to admin only | 00:00:00 | ||
| 66.4 Set admin panel with limited access based on permission | 00:00:00 | ||
| 66.5 Store image directly on mongodb and display them | 00:00:00 | ||
| 66.6 A small brief about google analytics lighthouse and page performance | 00:00:00 | ||
| 67 Creative Agency Assignment 11 | |||
| 67.1 Responsive App React Animation Unit Test | 00:00:00 | ||
| 67.2 Deploy doctors portal client to firebase and server to heroku | 00:00:00 | ||
| 67.3 Creative Agency Complete Website Assignment | 00:00:00 | ||
| 68 Data Structure Algorithm and Time Complexity | |||
| 68.1 Module Introduction | 00:00:00 | ||
| 68.2 Stack Data Structure with a few practical examples | 00:00:00 | ||
| 68.3 Queue Data Structure using some realistic examples | 00:00:00 | ||
| 68.4 simple Introduction to Dictionary and hash table | 00:00:00 | ||
| 68.5 Linked List code Doubly and circular Linked List Concept | 00:00:00 | ||
| 68.6 Concept of Tree Data Structure BST Depth first breadth first | 00:00:00 | ||
| 68.7 algorithm linear search and binary search | 00:00:00 | ||
| 68.8 Sorting algorithm bubble sort ascending and descending | 00:00:00 | ||
| 68.9 selection sort detail and insertion sort concept | 00:00:00 | ||
| 68.10 Time Complexity and module summary | 00:00:00 | ||
| 69 Object Oriented Programming (OOP) | |||
| 69.1 Module Introduction | 00:00:00 | ||
| 69.2 What is Object and What is object oriented Programming | 00:00:00 | ||
| 69.3 how to declare a class using class and function syntax | 00:00:00 | ||
| 69.4 how to declare class method and use properties from inside | 00:00:00 | ||
| 69.5 inheritance with smart device example | 00:00:00 | ||
| 69.6 Different ways to achieve encapsulation in javascript | 00:00:00 | ||
| 69.7 Understand polymorphism using a simple example | 00:00:00 | ||
| 69.8 Explore Abstraction concept in OOP | 00:00:00 | ||
| 69.9 Static method and static properties in a class | 00:00:00 | ||
| 69.10 prototypical inheritance and design pattern | 00:00:00 | ||
| 70 Interview Preparation and Get Ready to be hired | |||
| 70.1 How do you know you are ready to look for job or intern | 00:00:00 | ||
| 70.2 Five things you need to get ready for job or intern | 00:00:00 | ||
| 70.3 How to write a proper Resume to set an interview | 00:00:00 | ||
| 70.4 How utilize the power of facebook groups | 00:00:00 | ||
| 70.5 Different ways to find jobs and apply | 00:00:00 | ||
| 70.6 type of coding interview and find question pattern | 00:00:00 | ||
| 70.7 How to prepare for an interview | 00:00:00 | ||
| 70.8 how perform well during an interview | 00:00:00 | ||
| 70.9 HR and soft skill related questions | 00:00:00 | ||
| 70.10 How deal with interview rejection | 00:00:00 | ||
| 70.11 Module summary How to get hired as a web developer | 00:00:00 | ||
| 71 Last Module Grow as a web Developer | |||
| 71.1 Module overview of the last module | 00:00:00 | ||
| 71.2 How to become Senior developer from junior developer | 00:00:00 | ||
| 71.3 What you will need to do to become a full stack or backend developer | 00:00:00 | ||
| 71.4 How a software team works in agile with scrum and sprint | 00:00:00 | ||
| 71.5 Airbnb JS style guide ESLint Best practices | 00:00:00 | ||
| 71.6 Revise JavaScript and Redo the assignments and practice projects | 00:00:00 | ||
| 71.7 Challenge 1 power x gym project | 00:00:00 | ||
| 71.8 challenge 2 air cnc with google map api | 00:00:00 | ||
| 71.9 challenge 3 whatsapp message chatting app | 00:00:00 | ||
| 71.10 Module summary with Special message and remarks | 00:00:00 | ||
| 72 Placeholder dummy modules | |||
| 72.1 Placeholder dummy unit | 00:00:00 | ||
ঝংকার মাহবুব এক দশক ধরে প্রোগ্রামিং ও ওয়েব ডেভেলপমেন্টের সাথে জড়িত। বুয়েটের পড়ালেখা শেষ করার পর কম্পিউটার সায়েন্সে মাস্টার্স করেন আমেরিকার নর্থ ডেকোটা স্টেট ইউনিভার্সিটি। তারপর সিনিয়র ওয়েব ডেভেলপার হিসেবে দীর্ঘদিন ধরে কাজ করেছেন যুক্তরাষ্ট্রের নিলসেন কোম্পানিতে। বর্তমানে স্ত্রী কারিনা ইসলামসহ বসবাস করছেন যুক্তরাষ্ট্রের ক্যালিফোর্নিয়ার অঙ্গরাজ্যের সিলিকনভ্যালি এরিয়াতে।
প্রোগ্রামিংকে সহজ, মজার ও গল্পের ছলে উপস্থাপন করা নিয়ে জনপ্রিয় তিনটা বই লিখে ফেলেছেন তিনি। বইগুলো হচ্ছে: হাবলুদের জন্য প্রোগ্রামিং, প্রোগ্রামিংয়ের বলদ টু বস, আর প্রোগ্রামিংয়ের চৌদ্দগোষ্ঠী। এছাড়াও দিক-নির্দেশনামূলক বই লিখেছেন: রিচার্জ your ডাউন ব্যাটারি ও প্যারাময় লাইফের প্যারাসিটামল। আর অবসর সময়ে, Jhankar Mahbub নামক ইউটিউব চ্যানেলে প্রোগ্রামিং ও স্টুডেন্টদেরজন্য দিক-নির্দেশনামূলক ভিডিও বানান।
Rating
152/1 Mohakhali WirelessGate, Dhaka 1212 | Official: programming.hero1@gmail.com
Helpline : 01320976430 (Available : 09:00am to 07:00pm)
