title
🔴 Let's Build a YouTube Clone with REACT JS for Beginners

description
Do you want to become JavaScript Developer & make an income? I just dropped a FREE ONE hour video training 👉 https://event.webinarjam.com/register/1/0z8y0u8?ref=https://www.cleverprogrammer.com/a/30476/isBQm8G8&utm_source=youtube&utm_medium=yt-description&utm_content=29-july-live-youtube-clone-sonny-qazi&utm_campaign=live-everyday&utm_term=warm&utm_affiliate_link=true Here is Profit with JavaScript course... https://www.cleverprogrammer.com/pwj?ref=https://www.cleverprogrammer.com/a/30476/isBQm8G8&utm_source=youtube&utm_medium=yt-description&utm_content=29-july-live-youtube-clone-sonny-qazi&utm_campaign=live-everyday&utm_term=warm&utm_affiliate_link=true In this FREE LIVE training, Qazi & Sonny will show you how to build a YouTube Clone with REACT JS 🚀. #reactjs #youtube #javascript Biz / Sponsorships 👉 https://www.cleverprogrammer.com/partnerships

detail
{'title': "🔴 Let's Build a YouTube Clone with REACT JS for Beginners", 'heatmap': [{'end': 669.056, 'start': 529.591, 'weight': 0.921}, {'end': 2278.502, 'start': 2136.747, 'weight': 0.724}, {'end': 6158.392, 'start': 6019.851, 'weight': 0.923}], 'summary': 'Learn to build a youtube clone with material ui and firebase, implementing real-time database and deployment, gaining 660,000 subscribers, and announcing a live build session for a tiktok clone on july 30th, while achieving significant viewership and engagement milestones.', 'chapters': [{'end': 292.915, 'segs': [{'end': 45.448, 'src': 'embed', 'start': 23.078, 'weight': 1, 'content': [{'end': 32.842, 'text': "yeah, so today we're going to be showing you guys how to use material ui, how to get a responsive design using flexbox, how to use some material ui,", 'start': 23.078, 'duration': 9.764}, {'end': 35.964, 'text': 'how to get responsive design using flexbox.', 'start': 32.842, 'duration': 3.122}, {'end': 42.947, 'text': "we're going to be showing you guys how to use firebase, so how to host data and also how to deploy the website live,", 'start': 35.964, 'duration': 6.983}, {'end': 45.448, 'text': 'so that you guys can go ahead and put this on your portfolio.', 'start': 42.947, 'duration': 2.501}], 'summary': 'Learn to use material ui, flexbox for responsive design, and deploy with firebase for your portfolio.', 'duration': 22.37, 'max_score': 23.078, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY23078.jpg'}, {'end': 96.084, 'src': 'embed', 'start': 68.625, 'weight': 0, 'content': [{'end': 71.768, 'text': 'Guys is going to be a massively awesome build.', 'start': 68.625, 'duration': 3.143}, {'end': 77.192, 'text': "I mean, look at this like this literally, you will get confused whether it's YouTube or not.", 'start': 71.828, 'duration': 5.364}, {'end': 84.719, 'text': 'And even if we go to demo it, and I type in something like clever programmer and hit search, you can see how it pulls up.', 'start': 77.713, 'duration': 7.006}, {'end': 88.14, 'text': "a whole different thing and it's instant, right? It's fast.", 'start': 85.639, 'duration': 2.501}, {'end': 93.183, 'text': "Does it even refresh, Sunny, when I actually type it in and hit? Nope, it doesn't refresh.", 'start': 88.36, 'duration': 4.823}, {'end': 95.224, 'text': 'So no refreshing.', 'start': 93.863, 'duration': 1.361}, {'end': 96.084, 'text': 'Think about that.', 'start': 95.404, 'duration': 0.68}], 'summary': 'The build is fast and does not require refreshing, providing instant results.', 'duration': 27.459, 'max_score': 68.625, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY68625.jpg'}, {'end': 170.338, 'src': 'embed', 'start': 141.013, 'weight': 3, 'content': [{'end': 141.793, 'text': 'All of that stuff.', 'start': 141.013, 'duration': 0.78}, {'end': 142.293, 'text': 'Dope Exactly.', 'start': 142.053, 'duration': 0.24}, {'end': 146.588, 'text': 'Okay, okay, what other things should we highlight?', 'start': 143.895, 'duration': 2.693}, {'end': 147.968, 'text': 'so, guys, you can actually go.', 'start': 146.588, 'duration': 1.38}, {'end': 153.051, 'text': "if you go, press this button here, you're able to then go back to youtube.", 'start': 147.968, 'duration': 5.083}, {'end': 156.032, 'text': 'i mean, guys, are you guys excited about this build?', 'start': 153.051, 'duration': 2.981}, {'end': 156.912, 'text': 'or what i mean?', 'start': 156.032, 'duration': 0.88}, {'end': 163.335, 'text': 'imagine adding this to your portfolio, exactly like guys, like if you could show this on your portfolio.', 'start': 156.912, 'duration': 6.423}, {'end': 165.076, 'text': "it's massive value.", 'start': 163.335, 'duration': 1.741}, {'end': 170.338, 'text': 'like if you could show this and then you can go ahead and build the amazon clone, all of those other things that we went ahead and built.', 'start': 165.076, 'duration': 5.262}], 'summary': 'Exciting build with massive value, adding to portfolio and building amazon clone.', 'duration': 29.325, 'max_score': 141.013, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY141013.jpg'}, {'end': 231.493, 'src': 'embed', 'start': 207.042, 'weight': 2, 'content': [{'end': 212.887, 'text': "Yeah And just keep in mind, we're going to show you how to have a real time database with Firebase.", 'start': 207.042, 'duration': 5.845}, {'end': 213.647, 'text': 'We mentioned that.', 'start': 212.927, 'duration': 0.72}, {'end': 218.391, 'text': "And then of course, you know, we mentioned it light lately, but we're going to teach you how to deploy it.", 'start': 213.707, 'duration': 4.684}, {'end': 220.613, 'text': 'So it will not be on ngrok.', 'start': 218.451, 'duration': 2.162}, {'end': 223.776, 'text': "It'll be like actually hosted for you on Firebase.", 'start': 220.653, 'duration': 3.123}, {'end': 226.338, 'text': 'And then people will be able to use this app as well.', 'start': 224.296, 'duration': 2.042}, {'end': 229.151, 'text': 'Exactly Yeah.', 'start': 227.89, 'duration': 1.261}, {'end': 231.493, 'text': 'Awesome Okay, so cool.', 'start': 229.171, 'duration': 2.322}], 'summary': 'Learn to set up real-time firebase database and deploy it for usage.', 'duration': 24.451, 'max_score': 207.042, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY207042.jpg'}, {'end': 292.915, 'src': 'embed', 'start': 251.423, 'weight': 4, 'content': [{'end': 257.644, 'text': "So that's pretty important when you're doing responsive design and even like how the videos are appearing like now they're stacked,", 'start': 251.423, 'duration': 6.221}, {'end': 260.005, 'text': 'but when the screen got bigger, they went in like a nice row.', 'start': 257.644, 'duration': 2.361}, {'end': 265.347, 'text': "So those things are all huge and they're going to be important when you're considering front end web development.", 'start': 260.406, 'duration': 4.941}, {'end': 266.748, 'text': 'So yeah.', 'start': 266.328, 'duration': 0.42}, {'end': 271.117, 'text': 'There you go.', 'start': 270.677, 'duration': 0.44}, {'end': 274.44, 'text': 'Awesome Wasik says, you guys are doing an excellent job.', 'start': 271.418, 'duration': 3.022}, {'end': 276.262, 'text': "We're learning a lot from your live videos.", 'start': 274.46, 'duration': 1.802}, {'end': 277.263, 'text': 'Love you, bros.', 'start': 276.482, 'duration': 0.781}, {'end': 278.004, 'text': 'Thank you.', 'start': 277.603, 'duration': 0.401}, {'end': 280.306, 'text': 'Awesome Awesome, guys.', 'start': 278.024, 'duration': 2.282}, {'end': 281.487, 'text': 'We have a few people.', 'start': 280.346, 'duration': 1.141}, {'end': 283.589, 'text': 'So my confidence level.', 'start': 281.507, 'duration': 2.082}, {'end': 288.133, 'text': 'So Viral Sangavi says, my confidence levels has increased massively by following your live tutorials.', 'start': 283.609, 'duration': 4.524}, {'end': 290.154, 'text': 'Amazing We love to see that.', 'start': 288.513, 'duration': 1.641}, {'end': 291.194, 'text': 'We love, love, love.', 'start': 290.274, 'duration': 0.92}, {'end': 292.255, 'text': "That's amazing.", 'start': 291.414, 'duration': 0.841}, {'end': 292.915, 'text': 'I see that.', 'start': 292.335, 'duration': 0.58}], 'summary': 'Responsive design and front-end web development are important for stacking videos and increasing confidence levels, as mentioned by the audience.', 'duration': 41.492, 'max_score': 251.423, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY251423.jpg'}], 'start': 1.229, 'title': 'Building youtube clone and firebase deployment', 'summary': 'Covers building a youtube clone with material ui and firebase, creating value with portfolio-building projects, and implementing firebase for real-time database and deployment, leading to increased confidence levels and positive feedback.', 'chapters': [{'end': 140.652, 'start': 1.229, 'title': 'Building youtube clone with material ui and firebase', 'summary': 'Covers building a youtube clone using material ui, firebase for hosting and deploying, and handling separate pages in an app using react viewer, showcasing a fast and responsive design.', 'duration': 139.423, 'highlights': ['They will be showing how to use Material UI, get a responsive design using flexbox, and host data and deploy the website live using Firebase.', 'They will demonstrate how to handle separate pages in an app using React viewer.', 'The build will result in a YouTube clone with instant search functionality and a fast, responsive design, similar to the original YouTube.', 'Demonstrating the usage of Material UI icon set to pull in and run icons inside the app.']}, {'end': 206.982, 'start': 141.013, 'title': 'Excitement for portfolio-building projects', 'summary': "Discusses the excitement and value of adding a portfolio-building project to one's repertoire, creating massive value and potential job opportunities, as well as the enthusiasm of the participants.", 'duration': 65.969, 'highlights': ['Participants express excitement and anticipation for the portfolio-building project, emphasizing its potential value and impact on their portfolios and job prospects.', "The chapter emphasizes the massive value of adding the portfolio-building project to one's repertoire, highlighting its potential impact on employability and job opportunities.", 'The participants, including Srendi, express their excitement and enthusiasm for learning and the upcoming project, reflecting a positive and motivated learning environment.']}, {'end': 292.915, 'start': 207.042, 'title': 'Firebase real time database and deployment', 'summary': 'Demonstrates how to create a real-time database with firebase, deploy it for hosting, and implement responsive design for a front-end web development, leading to increased confidence levels and positive feedback from viewers.', 'duration': 85.873, 'highlights': ['The chapter demonstrates how to create a real-time database with Firebase and deploy it for hosting. This is a key point as it outlines the main focus of the tutorial and the practical application for viewers.', 'Implementing responsive design for front-end web development is emphasized, showcasing dynamic changes in layout based on screen size. This is important as it highlights a key aspect of front-end web development and its relevance to user experience.', 'Positive feedback from viewers, expressing increased confidence levels and learning from the live tutorials, is shared. This demonstrates the impact and effectiveness of the tutorial, providing quantifiable evidence of its value to the audience.']}], 'duration': 291.686, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY1229.jpg', 'highlights': ['The build will result in a YouTube clone with instant search functionality and a fast, responsive design, similar to the original YouTube.', 'They will be showing how to use Material UI, get a responsive design using flexbox, and host data and deploy the website live using Firebase.', 'The chapter demonstrates how to create a real-time database with Firebase and deploy it for hosting. This is a key point as it outlines the main focus of the tutorial and the practical application for viewers.', 'Participants express excitement and anticipation for the portfolio-building project, emphasizing its potential value and impact on their portfolios and job prospects.', 'Implementing responsive design for front-end web development is emphasized, showcasing dynamic changes in layout based on screen size. This is important as it highlights a key aspect of front-end web development and its relevance to user experience.', 'Positive feedback from viewers, expressing increased confidence levels and learning from the live tutorials, is shared. This demonstrates the impact and effectiveness of the tutorial, providing quantifiable evidence of its value to the audience.']}, {'end': 1722.801, 'segs': [{'end': 332.319, 'src': 'embed', 'start': 293.916, 'weight': 0, 'content': [{'end': 297.898, 'text': 'Marek says, Hey guys, I just enrolled to your profit with JavaScript course.', 'start': 293.916, 'duration': 3.982}, {'end': 299.258, 'text': 'I am so excited.', 'start': 298.178, 'duration': 1.08}, {'end': 300.499, 'text': 'That is amazing.', 'start': 299.658, 'duration': 0.841}, {'end': 301.159, 'text': 'Thank you so much.', 'start': 300.539, 'duration': 0.62}, {'end': 305.721, 'text': 'And actually we saw when you enrolled this morning, I think Sonny, you probably saw it too.', 'start': 301.199, 'duration': 4.522}, {'end': 307.702, 'text': 'So that is amazing.', 'start': 306.241, 'duration': 1.461}, {'end': 311.124, 'text': 'And then make sure you come to the live calls as well, where Sonny will be training you.', 'start': 307.822, 'duration': 3.302}, {'end': 315.811, 'text': 'Exactly Every Tuesday guys, I will be teaching on those live calls.', 'start': 312.225, 'duration': 3.586}, {'end': 318.736, 'text': "So if you're gonna get involved in that link in the description, go check it out.", 'start': 316.091, 'duration': 2.645}, {'end': 320.318, 'text': 'Yep Awesome.', 'start': 319.337, 'duration': 0.981}, {'end': 322.422, 'text': "So let's dive into it.", 'start': 321.32, 'duration': 1.102}, {'end': 329.096, 'text': "So what's the first thing, should we start off with, uh, creating the project? Yeah, so exactly.", 'start': 322.462, 'duration': 6.634}, {'end': 330.137, 'text': 'Oh, we had Max Seuss.', 'start': 329.196, 'duration': 0.941}, {'end': 331.418, 'text': "He's just enrolled as well.", 'start': 330.337, 'duration': 1.081}, {'end': 332.319, 'text': 'Welcome to the course, dude.', 'start': 331.458, 'duration': 0.861}], 'summary': 'Marek and max enrolled in the profit with javascript course; sonny will teach live every tuesday.', 'duration': 38.403, 'max_score': 293.916, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY293916.jpg'}, {'end': 450.02, 'src': 'embed', 'start': 404.812, 'weight': 3, 'content': [{'end': 411.075, 'text': "So we've used it in all of our builds and to do that we say mpx, create react app, and then we basically give it a name.", 'start': 404.812, 'duration': 6.263}, {'end': 416.958, 'text': "so in this case we'll say youtube, clone, and you only make sure that you're using dashes, not spaces, guys.", 'start': 411.075, 'duration': 5.883}, {'end': 420.94, 'text': 'so yeah, dashes not spaces, perfect, yeah.', 'start': 416.958, 'duration': 3.982}, {'end': 425.563, 'text': "and while that's actually getting set up, kazi, let's go ahead and set up firebase.", 'start': 420.94, 'duration': 4.623}, {'end': 431.686, 'text': "okay, so let's go over here and we'll type in firebase.com.", 'start': 425.563, 'duration': 6.123}, {'end': 437.857, 'text': "yeah, and let's go to While we're loading up, guys,", 'start': 431.686, 'duration': 6.171}, {'end': 446.919, 'text': 'Firebase is essentially a suite of tools provided by Google and they basically allow you to do so many things, including having a database,', 'start': 437.857, 'duration': 9.062}, {'end': 450.02, 'text': 'having authentication, having a bunch of other stuff, including hosting.', 'start': 446.919, 'duration': 3.101}], 'summary': "Used mpx create react app with name 'youtube-clone', set up firebase for database, authentication, and hosting.", 'duration': 45.208, 'max_score': 404.812, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY404812.jpg'}, {'end': 559.665, 'src': 'embed', 'start': 529.591, 'weight': 5, 'content': [{'end': 536.014, 'text': "It's going to set everything up that we need in order to get, like, our database up and running, our Firebase hosting up and running.", 'start': 529.591, 'duration': 6.423}, {'end': 541.857, 'text': "What we're going to do now is once this step is finished, we do need to get a config file, right? So we need the config file.", 'start': 536.334, 'duration': 5.523}, {'end': 545.918, 'text': "And that's going to be the magic key that connects our React app to our Firebase backend.", 'start': 541.877, 'duration': 4.041}, {'end': 548.799, 'text': "So now that that's done, let's go ahead and click continue.", 'start': 546.278, 'duration': 2.521}, {'end': 552.221, 'text': 'Yep There we go.', 'start': 550.2, 'duration': 2.021}, {'end': 559.665, 'text': "and once we're at this screen we should be able to click the uh, the burger menu on the top left.", 'start': 553.98, 'duration': 5.685}], 'summary': 'Setting up database and firebase hosting, obtaining config file to connect react app to firebase backend.', 'duration': 30.074, 'max_score': 529.591, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY529591.jpg'}, {'end': 683.369, 'src': 'heatmap', 'start': 529.591, 'weight': 7, 'content': [{'end': 536.014, 'text': "It's going to set everything up that we need in order to get, like, our database up and running, our Firebase hosting up and running.", 'start': 529.591, 'duration': 6.423}, {'end': 541.857, 'text': "What we're going to do now is once this step is finished, we do need to get a config file, right? So we need the config file.", 'start': 536.334, 'duration': 5.523}, {'end': 545.918, 'text': "And that's going to be the magic key that connects our React app to our Firebase backend.", 'start': 541.877, 'duration': 4.041}, {'end': 548.799, 'text': "So now that that's done, let's go ahead and click continue.", 'start': 546.278, 'duration': 2.521}, {'end': 552.221, 'text': 'Yep There we go.', 'start': 550.2, 'duration': 2.021}, {'end': 559.665, 'text': "and once we're at this screen we should be able to click the uh, the burger menu on the top left.", 'start': 553.98, 'duration': 5.685}, {'end': 561.567, 'text': 'this, can we just click right here?', 'start': 559.665, 'duration': 1.902}, {'end': 562.968, 'text': 'oh, oh, yeah, we can click that one.', 'start': 561.567, 'duration': 1.401}, {'end': 564.169, 'text': 'yeah, we can click that one.', 'start': 562.968, 'duration': 1.201}, {'end': 573.117, 'text': 'okay, and then here we give it a nickname, so we can say youtube clone also set up firebase hosting for this app.', 'start': 564.169, 'duration': 8.948}, {'end': 574.959, 'text': 'yep, so we set up firebase hosting for that.', 'start': 573.117, 'duration': 1.842}, {'end': 579.425, 'text': 'It will say to you now you have to install the Firebase SDK and stuff like that.', 'start': 576.003, 'duration': 3.422}, {'end': 583.627, 'text': "We're not going to bother with this stuff because we actually go ahead and use node modules.", 'start': 579.445, 'duration': 4.182}, {'end': 590.791, 'text': "If you haven't done this step, you will need to do this, and you're probably going to have to do sudo npm install, whatever it said.", 'start': 583.707, 'duration': 7.084}, {'end': 593.933, 'text': "So that's perfect, and now this could continue to console.", 'start': 590.851, 'duration': 3.082}, {'end': 603.778, 'text': "So once you've done that, click the burger menu icon on the top left, and then click on the- Project settings, I see.", 'start': 594.613, 'duration': 9.165}, {'end': 610.076, 'text': "Nice And then let's go to the config and pull the config out.", 'start': 604.979, 'duration': 5.097}, {'end': 617.34, 'text': 'Yeah So guys, you literally just want to copy that and just keep that somewhere, right? You want to keep that for later.', 'start': 611.277, 'duration': 6.063}, {'end': 624.823, 'text': "So whether it's notes or something else, but just copy that and paste that somewhere so that you can use that later on, right? So nice.", 'start': 617.68, 'duration': 7.143}, {'end': 632.194, 'text': "Should they maybe just make like a little file like Firebase.js and just save it in there for now? Yeah, that's a really good idea.", 'start': 625.083, 'duration': 7.111}, {'end': 633.175, 'text': "Yeah, it's really good idea.", 'start': 632.334, 'duration': 0.841}, {'end': 634.357, 'text': "So it's Firebase.js.", 'start': 633.195, 'duration': 1.162}, {'end': 635.919, 'text': 'Cause like that step.', 'start': 634.697, 'duration': 1.222}, {'end': 636.239, 'text': 'you know.', 'start': 635.919, 'duration': 0.32}, {'end': 643.229, 'text': "for us I think it's good because we have like a Jack clipboard, but I think for most people like like where do I put this??", 'start': 636.239, 'duration': 6.99}, {'end': 645.352, 'text': 'Yeah, no good step.', 'start': 644.511, 'duration': 0.841}, {'end': 646.914, 'text': "That's a good, that's a good step to include.", 'start': 645.492, 'duration': 1.422}, {'end': 656.141, 'text': 'Nice Um, and then, and then should we delete these three of the test ones that come with it? Yeah.', 'start': 647.095, 'duration': 9.046}, {'end': 658.084, 'text': 'So now basically we do some, yeah.', 'start': 656.181, 'duration': 1.903}, {'end': 659.706, 'text': 'So we have like a cleanup process guys.', 'start': 658.164, 'duration': 1.542}, {'end': 661.008, 'text': 'We want to delete the test files.', 'start': 659.726, 'duration': 1.282}, {'end': 664.192, 'text': 'So the ones that cause these highlighted here, you just want to go ahead and get rid of those.', 'start': 661.308, 'duration': 2.884}, {'end': 669.056, 'text': 'So the app.test.js, the setup.test.js, and the logo.svg.', 'start': 664.912, 'duration': 4.144}, {'end': 672.379, 'text': "But before we do that, Kazi, let's actually go and show them.", 'start': 669.636, 'duration': 2.743}, {'end': 675.041, 'text': 'So this just created a React app, right?', 'start': 672.819, 'duration': 2.222}, {'end': 683.369, 'text': "So, in order to get this thing started up and to see if you're at the correct step, you need to go into the terminal and go ahead and type npm start.", 'start': 675.462, 'duration': 7.907}], 'summary': 'Setting up firebase hosting, configuring react app, and cleaning up test files.', 'duration': 153.778, 'max_score': 529.591, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY529591.jpg'}, {'end': 818.362, 'src': 'embed', 'start': 788.046, 'weight': 8, 'content': [{'end': 789.567, 'text': "Let's do a YouTube clone.", 'start': 788.046, 'duration': 1.521}, {'end': 792.229, 'text': 'Nice There we go.', 'start': 791.629, 'duration': 0.6}, {'end': 795.318, 'text': "Awesome So that's a good starting point guys.", 'start': 792.249, 'duration': 3.069}, {'end': 796.898, 'text': "We've still got one cleanup step.", 'start': 795.378, 'duration': 1.52}, {'end': 804.321, 'text': "So for this bit, just rename the class name to a lowercase a because we follow something called a, it's a BAM naming convention.", 'start': 796.998, 'duration': 7.323}, {'end': 806.281, 'text': 'So B E M right.', 'start': 804.361, 'duration': 1.92}, {'end': 808.642, 'text': "So I'm class naming convention.", 'start': 806.741, 'duration': 1.901}, {'end': 812.123, 'text': 'So this is something super useful guys and we do it in every video.', 'start': 808.682, 'duration': 3.441}, {'end': 813.184, 'text': 'So make sure you learn that.', 'start': 812.143, 'duration': 1.041}, {'end': 818.362, 'text': 'Um, and then what you want to do guys is go into app dot CSS, Yeah.', 'start': 813.864, 'duration': 4.498}], 'summary': 'Creating a youtube clone, discussing class naming convention and app.css', 'duration': 30.316, 'max_score': 788.046, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY788046.jpg'}, {'end': 881.378, 'src': 'embed', 'start': 854.671, 'weight': 9, 'content': [{'end': 858.893, 'text': 'So the one more rule that we need to adjust is inside of index.css.', 'start': 854.671, 'duration': 4.222}, {'end': 860.674, 'text': 'This stuff you can leave, guys.', 'start': 859.254, 'duration': 1.42}, {'end': 862.555, 'text': 'So you can actually leave this in there for now.', 'start': 860.994, 'duration': 1.561}, {'end': 870.299, 'text': 'But what you can go ahead and do is add one rule inside the index.css, which is apply this to everything, which is what this little asterisk means.', 'start': 862.975, 'duration': 7.324}, {'end': 872.24, 'text': 'And it means get rid of this margin.', 'start': 870.679, 'duration': 1.561}, {'end': 879.937, 'text': "So if you guys can see on the right above where it says hello, clever programmer, let's build a youtube clone.", 'start': 872.32, 'duration': 7.617}, {'end': 881.378, 'text': "there's actually an invisible margin.", 'start': 879.937, 'duration': 1.441}], 'summary': 'Adjust the index.css to add a rule applying to everything to remove an invisible margin.', 'duration': 26.707, 'max_score': 854.671, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY854671.jpg'}, {'end': 945.437, 'src': 'embed', 'start': 915.571, 'weight': 10, 'content': [{'end': 918.833, 'text': 'we are going to actually be building the TikTok clone.', 'start': 915.571, 'duration': 3.262}, {'end': 922.935, 'text': "And this is going to be one of the craziest builds we've ever done.", 'start': 919.793, 'duration': 3.142}, {'end': 927.016, 'text': "And it's very, very anticipated and people are already kind of going crazy for it.", 'start': 923.155, 'duration': 3.861}, {'end': 930.418, 'text': "So I don't want you to miss out on that.", 'start': 927.497, 'duration': 2.921}, {'end': 939.191, 'text': 'So make sure you put on your calendar tomorrow, 10, 15 a.m. Pacific, to show up for the TikTok clone.', 'start': 930.478, 'duration': 8.713}, {'end': 945.437, 'text': "We're going to have probably 1, 000 people or more, maybe 10, 000 people come to that and watch it.", 'start': 939.211, 'duration': 6.226}], 'summary': 'Building a tiktok clone with anticipated 10,000 viewers at 10:15 am pacific.', 'duration': 29.866, 'max_score': 915.571, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY915571.jpg'}, {'end': 991.606, 'src': 'embed', 'start': 961.024, 'weight': 11, 'content': [{'end': 964.446, 'text': 'Building TikTok is a pretty big challenge to get that working.', 'start': 961.024, 'duration': 3.422}, {'end': 968.209, 'text': "We're actually not even sure if we're going to actually be able to do it, but I think we will.", 'start': 964.967, 'duration': 3.242}, {'end': 972.138, 'text': 'yeah, like all of these builds have been like challenges.', 'start': 969.437, 'duration': 2.701}, {'end': 973.479, 'text': "we're like oh, can we do it like?", 'start': 972.138, 'duration': 1.341}, {'end': 976.64, 'text': 'and then we, we conquer it and we show you guys how to do it as well.', 'start': 973.479, 'duration': 3.161}, {'end': 983.863, 'text': "yeah, so, um, just mark that on your calendar, guys, july 30th, tomorrow, thursday, bring everybody that you know it's going to be on youtube.", 'start': 976.64, 'duration': 7.223}, {'end': 985.724, 'text': "it's available to everybody.", 'start': 983.863, 'duration': 1.861}, {'end': 987.124, 'text': 'um, but just you know.', 'start': 985.724, 'duration': 1.4}, {'end': 991.606, 'text': "bring the people, just know, put on your calendar, and that's tomorrow.", 'start': 987.124, 'duration': 4.482}], 'summary': 'Challenging tiktok build to be showcased on youtube, july 30th.', 'duration': 30.582, 'max_score': 961.024, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY961024.jpg'}, {'end': 1187.869, 'src': 'embed', 'start': 1159.199, 'weight': 12, 'content': [{'end': 1162.88, 'text': 'Yep And then third is a recommended video one.', 'start': 1159.199, 'duration': 3.681}, {'end': 1165.981, 'text': "And that's that whole thing guys is a component.", 'start': 1163.06, 'duration': 2.921}, {'end': 1176.424, 'text': 'So if I was to actually kind of full screen and show you, You know, that entire thing, boom, around that recommended section is a component.', 'start': 1166.041, 'duration': 10.383}, {'end': 1180.226, 'text': 'Exactly Dope.', 'start': 1177.785, 'duration': 2.441}, {'end': 1184.207, 'text': "I'm going to show you how to do all of that with React Guru.", 'start': 1181.406, 'duration': 2.801}, {'end': 1187.869, 'text': 'So how, why, like what, and also, oh yeah.', 'start': 1184.607, 'duration': 3.262}], 'summary': 'The transcript discusses creating a recommended video component with react guru.', 'duration': 28.67, 'max_score': 1159.199, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY1159199.jpg'}, {'end': 1710.198, 'src': 'embed', 'start': 1681.172, 'weight': 13, 'content': [{'end': 1684.255, 'text': "So what we're going to do now, guys, is we just installed the icon.", 'start': 1681.172, 'duration': 3.083}, {'end': 1689.84, 'text': "So the stuff that you guys are seeing on the top left, the burger menu, and on the top right, we've got a bunch of icons.", 'start': 1684.295, 'duration': 5.545}, {'end': 1692.273, 'text': 'So we are gonna go ahead.', 'start': 1690.693, 'duration': 1.58}, {'end': 1700.635, 'text': 'and if we actually go back to material UI, uh-huh, Show everyone how we can actually search the icon library.', 'start': 1692.273, 'duration': 8.362}, {'end': 1702.316, 'text': 'by the way, guys, really thank you.', 'start': 1700.635, 'duration': 1.681}, {'end': 1710.198, 'text': "Hayes and Nike checks and I see bunch of people and they're like we can't donate because it's not in their region.", 'start': 1702.316, 'duration': 7.882}], 'summary': 'Installed icon on ui, demonstrated icon library search. thanked team and audience.', 'duration': 29.026, 'max_score': 1681.172, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY1681172.jpg'}], 'start': 293.916, 'title': 'Web development with javascript, firebase, and css', 'summary': 'Discusses the enrollment of marek and max seuss to a javascript course, setting up firebase and sharing a terminal, configuring firebase and cleaning up the process, css adjustments for app and index files, and building youtube clone with react, with anticipated viewership of 1,000-10,000 people for tiktok clone announcement.', 'chapters': [{'end': 332.319, 'start': 293.916, 'title': 'Enrollment to javascript course', 'summary': 'Discusses the enrollment of marek and max seuss to the profit with javascript course, with mention of live training calls and encouragement to check out the course link in the description.', 'duration': 38.403, 'highlights': ['Marek and Max Seuss enrolled in the profit with JavaScript course, expressing excitement and appreciation.', 'Sonny will be conducting live training calls every Tuesday for the course.', 'Encouragement is given to check out the course link in the description.']}, {'end': 590.791, 'start': 332.779, 'title': 'Setting up firebase and sharing terminal', 'summary': "Covers sharing a terminal using vs live share, setting up firebase, and creating a react app using create react app tool and firebase, with explanations of their functions and comparison with aws, emphasizing firebase's user-friendliness and ease of use.", 'duration': 258.012, 'highlights': ['The chapter begins with sharing a terminal using VS Live Share, demonstrating the shortcut command J for Mac and ctrl J for Windows, and providing read and write access to Visual Studio code.', "The process of setting up a React app using Create React App tool is explained, with the command 'mpx create react app' followed by the app name 'youtube-clone' using dashes instead of spaces.", 'An introduction to Firebase is provided, describing it as a suite of tools by Google for database, authentication, hosting, and more, likening it to AWS but emphasizing its user-friendliness and simplicity.', 'The steps of setting up Firebase for a project are detailed, including creating a Google project, obtaining a config file to connect the React app to the Firebase backend, and setting up Firebase hosting for the app.', 'The comparison between Firebase and AWS is highlighted, with Firebase being portrayed as a more user-friendly and simpler alternative to AWS, emphasizing its ease of use and simplicity.', "The chapter concludes with a mention of needing to install the Firebase SDK and node modules for further setup, with a note on using 'sudo npm install' if necessary."]}, {'end': 812.123, 'start': 590.851, 'title': 'Firebase configuration and cleanup process', 'summary': 'Discusses setting up firebase configuration by copying the config and saving it for later use, deleting unnecessary test files, and cleaning up the react app by renaming class names to adhere to the bem naming convention.', 'duration': 221.272, 'highlights': ['Setting up Firebase configuration by copying the config and saving it for later use Copying and saving the Firebase config for later use is emphasized as a crucial step, ensuring the availability of necessary data for Firebase setup.', 'Deleting unnecessary test files to clean up the React app The chapter emphasizes the importance of deleting unnecessary test files like app.test.js, setup.test.js, and logo.svg to ensure a clean React app structure.', "Renaming class names to adhere to the BEM naming convention The importance of adhering to the BEM naming convention is highlighted, as the chapter instructs to rename the class name to a lowercase 'a' for consistent naming convention."]}, {'end': 976.64, 'start': 812.143, 'title': 'Css tutorial and announcement for tiktok clone', 'summary': 'Covers css adjustments for app and index files, emphasizing the removal of margins, and announces the upcoming tiktok clone build with anticipated viewership of 1,000-10,000 people.', 'duration': 164.497, 'highlights': ['The chapter emphasizes the removal of margins in the CSS files app and index.css, with the goal of ensuring the text is no longer centered, and demonstrating the elimination of the invisible margin above the content.', 'An announcement is made for the upcoming TikTok clone build, scheduled for tomorrow at 10:15 a.m. Pacific, with an anticipated viewership of 1,000-10,000 people and a call to action for participation.', 'The speaker expresses excitement and acknowledges the challenge of building the TikTok clone, highlighting the uncertainty of success and the history of conquering similar challenges in previous builds.']}, {'end': 1722.801, 'start': 976.64, 'title': 'Building youtube clone with react', 'summary': 'Covers the process of building a youtube clone using react, including the creation of components like header, sidebar, and recommended videos, and the installation of material ui icons and core to enhance the user interface.', 'duration': 746.161, 'highlights': ['The chapter discusses the process of building a YouTube clone using React, emphasizing the creation of components like header, sidebar, and recommended videos. The chapter focuses on building components that mimic the layout of YouTube, such as the header, sidebar, and recommended video section.', 'The installation of Material UI icons and core is demonstrated to enhance the user interface, including adding icons for the burger menu and various other functionalities. The transcript discusses the installation of Material UI icons and core to improve the user interface by incorporating icons for different functionalities such as the burger menu.']}], 'duration': 1428.885, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY293916.jpg', 'highlights': ['Marek and Max Seuss enrolled in the profit with JavaScript course, expressing excitement and appreciation.', 'Sonny will be conducting live training calls every Tuesday for the course.', 'Encouragement is given to check out the course link in the description.', "The process of setting up a React app using Create React App tool is explained, with the command 'mpx create react app' followed by the app name 'youtube-clone' using dashes instead of spaces.", 'An introduction to Firebase is provided, describing it as a suite of tools by Google for database, authentication, hosting, and more, likening it to AWS but emphasizing its user-friendliness and simplicity.', 'The steps of setting up Firebase for a project are detailed, including creating a Google project, obtaining a config file to connect the React app to the Firebase backend, and setting up Firebase hosting for the app.', 'Copying and saving the Firebase config for later use is emphasized as a crucial step, ensuring the availability of necessary data for Firebase setup.', 'Deleting unnecessary test files like app.test.js, setup.test.js, and logo.svg to ensure a clean React app structure.', "Renaming class names to adhere to the BEM naming convention is highlighted, as the chapter instructs to rename the class name to a lowercase 'a' for consistent naming convention.", 'The chapter emphasizes the removal of margins in the CSS files app and index.css, with the goal of ensuring the text is no longer centered, and demonstrating the elimination of the invisible margin above the content.', 'An announcement is made for the upcoming TikTok clone build, scheduled for tomorrow at 10:15 a.m. Pacific, with an anticipated viewership of 1,000-10,000 people and a call to action for participation.', 'The speaker expresses excitement and acknowledges the challenge of building the TikTok clone, highlighting the uncertainty of success and the history of conquering similar challenges in previous builds.', 'The chapter discusses the process of building a YouTube clone using React, emphasizing the creation of components like header, sidebar, and recommended videos.', 'The installation of Material UI icons and core is demonstrated to enhance the user interface, including adding icons for the burger menu and various other functionalities.']}, {'end': 2527.57, 'segs': [{'end': 1831.365, 'src': 'embed', 'start': 1800.435, 'weight': 0, 'content': [{'end': 1804.217, 'text': 'You can see we get the video call icon, we get a bunch of fast forward, rewind.', 'start': 1800.435, 'duration': 3.782}, {'end': 1808.521, 'text': 'play, pause, all of the sort of icons that you can expect that are related to a video.', 'start': 1804.757, 'duration': 3.764}, {'end': 1811.365, 'text': 'And you can also even get the sort of variations on the left.', 'start': 1808.842, 'duration': 2.523}, {'end': 1814.368, 'text': 'You have filled, outlined, rounded, two-tone, sharp.', 'start': 1811.385, 'duration': 2.983}, {'end': 1818.512, 'text': 'Oh, nice.', 'start': 1815.769, 'duration': 2.743}, {'end': 1819.774, 'text': 'I did not know about that.', 'start': 1818.632, 'duration': 1.142}, {'end': 1822.136, 'text': 'Crazy, right? Look at that.', 'start': 1820.835, 'duration': 1.301}, {'end': 1824.018, 'text': 'Damn For YouTube.', 'start': 1822.657, 'duration': 1.361}, {'end': 1824.639, 'text': 'is it sharp??', 'start': 1824.018, 'duration': 0.621}, {'end': 1825.46, 'text': "It's sharp right?", 'start': 1824.759, 'duration': 0.701}, {'end': 1831.365, 'text': "um, i think i just used filled, but yeah, you're right, actually it was that.", 'start': 1826.861, 'duration': 4.504}], 'summary': 'Discussion about video icons and variations with surprise and confirmation.', 'duration': 30.93, 'max_score': 1800.435, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY1800435.jpg'}, {'end': 1876.072, 'src': 'embed', 'start': 1847.938, 'weight': 3, 'content': [{'end': 1850.943, 'text': "um, okay, So we're already at 800 likes.", 'start': 1847.938, 'duration': 3.005}, {'end': 1852.984, 'text': 'Nice Thank you guys.', 'start': 1851.783, 'duration': 1.201}, {'end': 1854.384, 'text': "We're about to break 1, 000 likes.", 'start': 1853.004, 'duration': 1.38}, {'end': 1856.725, 'text': 'We just broke 5, 000 views on this video.', 'start': 1854.404, 'duration': 2.321}, {'end': 1857.885, 'text': 'So thank you guys for that.', 'start': 1856.745, 'duration': 1.14}, {'end': 1861.106, 'text': 'And Lucas says, joining profit with JavaScript.', 'start': 1858.145, 'duration': 2.961}, {'end': 1861.987, 'text': "Let's go.", 'start': 1861.167, 'duration': 0.82}, {'end': 1863.127, 'text': "Let's go.", 'start': 1862.867, 'duration': 0.26}, {'end': 1863.627, 'text': 'Love that.', 'start': 1863.187, 'duration': 0.44}, {'end': 1864.228, 'text': 'Thank you, dude.', 'start': 1863.667, 'duration': 0.561}, {'end': 1866.428, 'text': 'Nice All right.', 'start': 1864.248, 'duration': 2.18}, {'end': 1869.89, 'text': "Let's go ahead and carry on with the build.", 'start': 1866.669, 'duration': 3.221}, {'end': 1871.85, 'text': "So let's go to the header component.", 'start': 1869.91, 'duration': 1.94}, {'end': 1874.251, 'text': "And let's open up the app on the right.", 'start': 1872.311, 'duration': 1.94}, {'end': 1876.072, 'text': 'All right.', 'start': 1875.652, 'duration': 0.42}], 'summary': 'Video has 800 likes, 5000 views, and proceeding with javascript build.', 'duration': 28.134, 'max_score': 1847.938, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY1847938.jpg'}, {'end': 2278.502, 'src': 'heatmap', 'start': 2136.747, 'weight': 0.724, 'content': [{'end': 2142.049, 'text': "So one icon that we're interested in is one called the video call icon.", 'start': 2136.747, 'duration': 5.302}, {'end': 2147.592, 'text': "So it's on the top right of our, uh, of our screen that we saw previously.", 'start': 2142.73, 'duration': 4.862}, {'end': 2150.113, 'text': 'So video icon.', 'start': 2148.672, 'duration': 1.441}, {'end': 2157.192, 'text': 'So if video, you know, Video call, I go ahead and do this video call icon and save it.', 'start': 2150.153, 'duration': 7.039}, {'end': 2160.413, 'text': 'Now you can see we should have a video call icon.', 'start': 2158.152, 'duration': 2.261}, {'end': 2160.833, 'text': 'There you go.', 'start': 2160.433, 'duration': 0.4}, {'end': 2163.334, 'text': 'See that little video call icons popped up now.', 'start': 2161.393, 'duration': 1.941}, {'end': 2165.595, 'text': 'The next one again was the apps icon.', 'start': 2163.794, 'duration': 1.801}, {'end': 2166.715, 'text': 'So that was like a little grid.', 'start': 2165.615, 'duration': 1.1}, {'end': 2169.396, 'text': "So I'm going to go ahead and pull that in right now.", 'start': 2166.855, 'duration': 2.541}, {'end': 2175.418, 'text': 'So apps icon, go ahead here, pop that in apps icon, save it.', 'start': 2169.496, 'duration': 5.922}, {'end': 2178.88, 'text': "And I'm going to show you guys how we can basically take it from this way.", 'start': 2175.778, 'duration': 3.102}, {'end': 2182.188, 'text': 'It looks like right now, to what you saw previously.', 'start': 2178.9, 'duration': 3.288}, {'end': 2185.089, 'text': "And it's going to be a really nice transformation once we do that.", 'start': 2182.228, 'duration': 2.861}, {'end': 2189.871, 'text': 'Right And the notifications icon, which is the final one.', 'start': 2185.669, 'duration': 4.202}, {'end': 2192.872, 'text': "And then we have an avatar at the end, but we're going to do the avatar at the end.", 'start': 2190.011, 'duration': 2.861}, {'end': 2196.494, 'text': 'So notifications icons.', 'start': 2193.953, 'duration': 2.541}, {'end': 2198.595, 'text': "I'm going to go ahead and pop that in right here.", 'start': 2196.534, 'duration': 2.061}, {'end': 2201.116, 'text': 'So boom, notifications icon.', 'start': 2198.675, 'duration': 2.441}, {'end': 2201.896, 'text': 'There we go.', 'start': 2201.256, 'duration': 0.64}, {'end': 2203.737, 'text': 'Right Nice.', 'start': 2201.916, 'duration': 1.821}, {'end': 2205.558, 'text': 'And there is one more thing, actually.', 'start': 2204.498, 'duration': 1.06}, {'end': 2209.98, 'text': "So we remember whenever you're logged into YouTube, you kind of have that little profile picture icon on the right.", 'start': 2205.598, 'duration': 4.382}, {'end': 2213.036, 'text': "Right So we're basically going to go ahead and pop that in.", 'start': 2210.655, 'duration': 2.381}, {'end': 2218.938, 'text': 'So material UI gives you a really nice little component called avatar.', 'start': 2213.076, 'duration': 5.862}, {'end': 2220.939, 'text': "So you can see I've just pulled it in.", 'start': 2219.478, 'duration': 1.461}, {'end': 2222.019, 'text': "So it's called avatar.", 'start': 2220.959, 'duration': 1.06}, {'end': 2226.941, 'text': "And basically we can go ahead and which icon is it when you're logged in? Oh, okay.", 'start': 2222.54, 'duration': 4.401}, {'end': 2227.301, 'text': 'This one.', 'start': 2226.981, 'duration': 0.32}, {'end': 2229.462, 'text': 'Yeah That top right icon.', 'start': 2227.601, 'duration': 1.861}, {'end': 2231.603, 'text': 'Yeah So it gives you like a nice circular icon.', 'start': 2229.502, 'duration': 2.101}, {'end': 2236.552, 'text': 'So what I can go ahead and do is pop that into our code as well.', 'start': 2233.39, 'duration': 3.162}, {'end': 2239.114, 'text': 'And this is an image of me pretty much.', 'start': 2236.932, 'duration': 2.182}, {'end': 2242.336, 'text': "So this is just like a URL that we're using as a dummy one.", 'start': 2239.474, 'duration': 2.862}, {'end': 2243.176, 'text': 'This is from GitHub.', 'start': 2242.376, 'duration': 0.8}, {'end': 2244.717, 'text': "It's my GitHub handle.", 'start': 2243.777, 'duration': 0.94}, {'end': 2246.198, 'text': "So I'm just going to pop this onto two lines.", 'start': 2244.737, 'duration': 1.461}, {'end': 2249.46, 'text': 'If you do want to use that, you can go ahead and use that.', 'start': 2246.238, 'duration': 3.222}, {'end': 2250.801, 'text': 'But there we go.', 'start': 2250.261, 'duration': 0.54}, {'end': 2253.002, 'text': 'So that is my GitHub picture.', 'start': 2251.361, 'duration': 1.641}, {'end': 2256.805, 'text': 'And here, I mean, the alternative text, I could just write Sonny Sanger just for now.', 'start': 2253.483, 'duration': 3.322}, {'end': 2266.269, 'text': "fine. um, there we go and, guys, you could pass this in as a prop, but for now we're just going to show like a static version for the one for the header.", 'start': 2257.577, 'duration': 8.692}, {'end': 2267.13, 'text': 'so you can see.', 'start': 2266.269, 'duration': 0.861}, {'end': 2271.977, 'text': "now there's a picture of me, there's some icons, there's the youtube thing, but nothing looks like what we want it to look like.", 'start': 2267.13, 'duration': 4.847}, {'end': 2278.502, 'text': "okay, So the first step here, guys, is, whenever you're dealing with this kind of stuff,", 'start': 2271.977, 'duration': 6.525}], 'summary': 'The transcript discusses adding various icons and an avatar using material ui components.', 'duration': 141.755, 'max_score': 2136.747, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY2136747.jpg'}, {'end': 2332.642, 'src': 'embed', 'start': 2305.44, 'weight': 1, 'content': [{'end': 2309.683, 'text': "Yep So notice how everything's kind of grouped in a certain way.", 'start': 2305.44, 'duration': 4.243}, {'end': 2317.007, 'text': 'So we have the top left, which is essentially the YouTube icon and the burger icon, so that collapsible icon.', 'start': 2309.763, 'duration': 7.244}, {'end': 2321.109, 'text': "Then you've got the middle, which is the search input.", 'start': 2317.307, 'duration': 3.802}, {'end': 2326.319, 'text': 'So is this space evenly? Space between.', 'start': 2321.309, 'duration': 5.01}, {'end': 2327.3, 'text': 'Space between.', 'start': 2326.339, 'duration': 0.961}, {'end': 2328.2, 'text': 'Got it.', 'start': 2327.84, 'duration': 0.36}, {'end': 2332.642, 'text': 'And then the stuff on the right is the sort of third grouping.', 'start': 2328.54, 'duration': 4.102}], 'summary': 'The design consists of three main groupings: youtube and burger icon on the top left, search input in the middle, and other elements on the right.', 'duration': 27.202, 'max_score': 2305.44, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY2305440.jpg'}, {'end': 2412.465, 'src': 'embed', 'start': 2381.751, 'weight': 2, 'content': [{'end': 2385.172, 'text': "And that's also what's able to make the space between the two.", 'start': 2381.751, 'duration': 3.421}, {'end': 2389.734, 'text': "So here you're using space between, right? Yeah, exactly.", 'start': 2385.252, 'duration': 4.482}, {'end': 2392.495, 'text': "Okay, so I'm gonna just say BET for that.", 'start': 2389.894, 'duration': 2.601}, {'end': 2400.398, 'text': 'So flexbox is what allows you to make it look like this, guys, and in a nice, responsive, mobile friendly way.', 'start': 2393.756, 'duration': 6.642}, {'end': 2403.422, 'text': 'Exactly Exactly that.', 'start': 2401.561, 'duration': 1.861}, {'end': 2407.963, 'text': 'So Shreya said React clone using React coming soon.', 'start': 2403.582, 'duration': 4.381}, {'end': 2412.465, 'text': 'Nice Saying it many times.', 'start': 2409.784, 'duration': 2.681}], 'summary': 'Flexbox enables creating space and a responsive, mobile-friendly design; react clone using react coming soon.', 'duration': 30.714, 'max_score': 2381.751, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY2381751.jpg'}], 'start': 1722.941, 'title': 'Finding material icons and building youtube clone header', 'summary': 'Discusses finding material icons for coding, covering access and search methods for relevant icons, including variations, and obtaining svg icons. it also explores building the youtube clone header, achieving 800 likes, breaking 5,000 views, and step-by-step implementation of adding icons and components.', 'chapters': [{'end': 1847.938, 'start': 1722.941, 'title': 'Finding material icons for coding', 'summary': 'Discusses how to find material icons for coding, showcasing a method to access and search for relevant icons, including variations like filled, outlined, rounded, two-tone, and sharp, with the added benefit of obtaining svg icons for a crisp build.', 'duration': 124.997, 'highlights': ["The speaker encourages viewers to 'smash the thumbs up button' as a form of donation if they are unable to donate.", 'The speaker explains a method to access a page for finding material icons by going into icons, scrolling up, and searching the full list of icons.', "The speaker demonstrates how to search for icons, such as typing 'video' to find related icons like video call, fast forward, rewind, play, pause, and variations like filled, outlined, rounded, two-tone, and sharp.", 'The speaker highlights the benefit of using svg icons for a crisp build when coding.']}, {'end': 2527.57, 'start': 1847.938, 'title': 'Building youtube clone header', 'summary': 'Discusses the process of building the youtube clone header, which includes reaching 800 likes, breaking 5,000 views, and the step-by-step implementation of adding various icons and components to the header component.', 'duration': 679.632, 'highlights': ['The video has already reached 800 likes and 5,000 views, with an anticipation of reaching 1,000 likes. The video has 800 likes and just broke 5,000 views, with anticipation of hitting 1,000 likes soon.', 'The step-by-step process of adding the burger icon, YouTube logo, input field, button, search icon, video call icon, apps icon, notifications icon, and avatar is explained. Step-by-step explanation of adding various icons and components to the header, including burger icon, YouTube logo, input field, button, search icon, video call icon, apps icon, notifications icon, and avatar.', 'Discussion on using the BEM naming convention and applying flexbox to create a responsive, mobile-friendly layout. Explanation of using BEM naming convention and applying flexbox for a responsive, mobile-friendly layout.']}], 'duration': 804.629, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY1722941.jpg', 'highlights': ["The speaker demonstrates how to search for icons, such as typing 'video' to find related icons like video call, fast forward, rewind, play, pause, and variations like filled, outlined, rounded, two-tone, and sharp.", 'The step-by-step process of adding the burger icon, YouTube logo, input field, button, search icon, video call icon, apps icon, notifications icon, and avatar is explained.', 'Discussion on using the BEM naming convention and applying flexbox to create a responsive, mobile-friendly layout.', 'The video has already reached 800 likes and 5,000 views, with an anticipation of reaching 1,000 likes.']}, {'end': 3778.729, 'segs': [{'end': 2627.983, 'src': 'embed', 'start': 2598.735, 'weight': 0, 'content': [{'end': 2602.216, 'text': "guys, this is a pattern in flex box that, like you'll start.", 'start': 2598.735, 'duration': 3.481}, {'end': 2603.797, 'text': 'everything is pattern recognition.', 'start': 2602.216, 'duration': 1.581}, {'end': 2606.037, 'text': 'you guys can get so good with pattern recognition.', 'start': 2603.797, 'duration': 2.24}, {'end': 2612.498, 'text': "that's why you should be coming to every single live where we build these projects and the ones who are coming here.", 'start': 2606.037, 'duration': 6.461}, {'end': 2616.539, 'text': "you're just like improving your skills like crazy.", 'start': 2612.498, 'duration': 4.041}, {'end': 2624.719, 'text': "and then there's like a bunch of cry babies who are coming in here and they're like this project doesn't have 10 million things of functionality.", 'start': 2616.539, 'duration': 8.18}, {'end': 2627.983, 'text': "Well, you know, it doesn't matter.", 'start': 2626.861, 'duration': 1.122}], 'summary': 'Improve skills through pattern recognition in flex box projects.', 'duration': 29.248, 'max_score': 2598.735, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY2598735.jpg'}, {'end': 2725.593, 'src': 'embed', 'start': 2700.463, 'weight': 2, 'content': [{'end': 2706.884, 'text': "just even if you sometimes aren't following like line by line, just remember, like, by attending these calls and seeing it,", 'start': 2700.463, 'duration': 6.421}, {'end': 2712.005, 'text': "you're going to notice those patterns and notice sort of the same things that we carry across within different builds.", 'start': 2706.884, 'duration': 5.121}, {'end': 2714.765, 'text': 'now, um, i just want to mention some point.', 'start': 2712.005, 'duration': 2.76}, {'end': 2717.786, 'text': 'um, here i forgot a row here i think mentioned it in the chat.', 'start': 2714.765, 'duration': 3.021}, {'end': 2725.593, 'text': "so if i was to add a line like this, a width of like, let's say 400, uh, let's say 40 pixels right Now, look what happens when I do this.", 'start': 2717.786, 'duration': 7.807}], 'summary': 'Attending calls helps identify patterns and commonalities in different builds.', 'duration': 25.13, 'max_score': 2700.463, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY2700463.jpg'}, {'end': 3017.881, 'src': 'embed', 'start': 2989.454, 'weight': 3, 'content': [{'end': 2991.855, 'text': "We're going to add some padding to the outside header.", 'start': 2989.454, 'duration': 2.401}, {'end': 2995.137, 'text': "Let's go ahead and add some padding outside this header.", 'start': 2992.035, 'duration': 3.102}, {'end': 2996.618, 'text': 'There you go.', 'start': 2995.798, 'duration': 0.82}, {'end': 2999.28, 'text': "It's padded it out a bit.", 'start': 2996.638, 'duration': 2.642}, {'end': 3002.502, 'text': "That way, everything's not touching the sides as it was.", 'start': 2999.98, 'duration': 2.522}, {'end': 3008.177, 'text': "And then what we're going to do is we're actually going to go ahead and set the so first.", 'start': 3003.135, 'duration': 5.042}, {'end': 3013.58, 'text': "what I'm going to do is I'm going to go ahead and say the header inputs, that middle field, the one that's kind of gone out of alignment.", 'start': 3008.177, 'duration': 5.403}, {'end': 3017.881, 'text': "now I'm going to say go ahead and target that and set that to display flex.", 'start': 3013.58, 'duration': 4.301}], 'summary': 'Add padding to outside header and set middle field to display flex.', 'duration': 28.427, 'max_score': 2989.454, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY2989454.jpg'}, {'end': 3078.979, 'src': 'embed', 'start': 3051.753, 'weight': 4, 'content': [{'end': 3060.815, 'text': "So we're going to go ahead and say here for those icons, for those icons, I'm going to say display flex, display flex.", 'start': 3051.753, 'duration': 9.062}, {'end': 3065.077, 'text': "And then I'm going to go ahead and say align items center.", 'start': 3061.656, 'duration': 3.421}, {'end': 3071.939, 'text': "So as soon as I save this, you'll see that it will display flex and it will align everything centrally in that right container.", 'start': 3065.797, 'duration': 6.142}, {'end': 3078.979, 'text': "And then what we're going to go ahead and say is I'm going to go ahead and actually at that point, that's pretty nice.", 'start': 3072.717, 'duration': 6.262}], 'summary': 'Using css, the speaker aligns icons centrally in a container using display flex and align items center.', 'duration': 27.226, 'max_score': 3051.753, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY3051753.jpg'}, {'end': 3164.54, 'src': 'embed', 'start': 3134.189, 'weight': 5, 'content': [{'end': 3138.031, 'text': "That can, as soon as I apply 40% to that, let's see what happens.", 'start': 3134.189, 'duration': 3.842}, {'end': 3140.312, 'text': 'You see, it took up 40% of the space.', 'start': 3138.071, 'duration': 2.241}, {'end': 3143.154, 'text': "So it kind of it's very hard to visually see that.", 'start': 3140.332, 'duration': 2.822}, {'end': 3148.177, 'text': "but if I go ahead and add a border, so let's say border one pixel solid black right?", 'start': 3143.154, 'duration': 5.023}, {'end': 3150.022, 'text': 'Now look what happens guys.', 'start': 3148.84, 'duration': 1.182}, {'end': 3153.946, 'text': "If I save that, see, that's what it's actually taking up right now.", 'start': 3150.222, 'duration': 3.724}, {'end': 3156.49, 'text': 'So keep that border in there while we do this.', 'start': 3154.507, 'duration': 1.983}, {'end': 3159.934, 'text': "And what I'm going to do now is I'm going to add a margin left and a margin right.", 'start': 3156.51, 'duration': 3.424}, {'end': 3164.54, 'text': "For now, what we can do is let's go ahead and target the input field.", 'start': 3161.676, 'duration': 2.864}], 'summary': 'Applying 40% space, adding a border, and adjusting margins for input field in the code demonstration.', 'duration': 30.351, 'max_score': 3134.189, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY3134189.jpg'}, {'end': 3516.151, 'src': 'embed', 'start': 3487.938, 'weight': 7, 'content': [{'end': 3490.759, 'text': "And what I'm going to go ahead and do is give that a background color.", 'start': 3487.938, 'duration': 2.821}, {'end': 3495.682, 'text': 'And the hex code that you see here is just a very subtle gray.', 'start': 3491.64, 'duration': 4.042}, {'end': 3497.783, 'text': "So it's a very subtle gray.", 'start': 3496.782, 'duration': 1.001}, {'end': 3500.104, 'text': 'And you can see it very, very slightly.', 'start': 3497.803, 'duration': 2.301}, {'end': 3510.048, 'text': "I'm going to give it a border left because that's what they have inside of the YouTube clone, as in inside of YouTube itself.", 'start': 3500.124, 'duration': 9.924}, {'end': 3512.029, 'text': "And I'm going to say the color should be gray.", 'start': 3510.428, 'duration': 1.601}, {'end': 3513.85, 'text': 'So the color of the icon should be gray.', 'start': 3512.449, 'duration': 1.401}, {'end': 3516.151, 'text': 'And there you can see we have a gray icon now, which is nice.', 'start': 3513.93, 'duration': 2.221}], 'summary': 'Applied a subtle gray background color and border left, resulting in a gray icon.', 'duration': 28.213, 'max_score': 3487.938, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY3487938.jpg'}, {'end': 3564.328, 'src': 'embed', 'start': 3532.237, 'weight': 8, 'content': [{'end': 3535.86, 'text': "He's going at it every single day doing these builds one after another.", 'start': 3532.237, 'duration': 3.623}, {'end': 3540.623, 'text': 'So if you guys are enjoying this so far, just go ahead, show your appreciation and smash that like button.', 'start': 3535.88, 'duration': 4.743}, {'end': 3544.205, 'text': "And let's get this video out to more and more people, you guys.", 'start': 3540.923, 'duration': 3.282}, {'end': 3545.406, 'text': 'Thank you for being here.', 'start': 3544.526, 'duration': 0.88}, {'end': 3546.347, 'text': 'Smash that like button.', 'start': 3545.466, 'duration': 0.881}, {'end': 3547.688, 'text': "and let's get back to it.", 'start': 3546.807, 'duration': 0.881}, {'end': 3549.711, 'text': 'We appreciate you guys.', 'start': 3548.649, 'duration': 1.062}, {'end': 3552.774, 'text': "We actually just hit over 1, 000 likes, so that's amazing, dude.", 'start': 3549.751, 'duration': 3.023}, {'end': 3555.077, 'text': 'Oh, nice.', 'start': 3553.896, 'duration': 1.181}, {'end': 3564.328, 'text': "We're at 500 viewers right now, and we actually hit, and DS Cuber just said the best YouTube channel ever, and we're getting a lot of love.", 'start': 3555.518, 'duration': 8.81}], 'summary': 'The video received over 1,000 likes and 500 viewers, with positive feedback on being the best youtube channel.', 'duration': 32.091, 'max_score': 3532.237, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY3532237.jpg'}, {'end': 3604.421, 'src': 'embed', 'start': 3575.004, 'weight': 6, 'content': [{'end': 3576.804, 'text': "Yep, so it's going up, guys.", 'start': 3575.004, 'duration': 1.8}, {'end': 3580.365, 'text': "We're getting more and more people here because you guys are like commenting, you guys are engaging.", 'start': 3576.824, 'duration': 3.541}, {'end': 3582.386, 'text': "We're about to break 10, 000 views on this.", 'start': 3580.385, 'duration': 2.001}, {'end': 3585.626, 'text': 'We got 500 viewers and then we broke 1, 000 likes.', 'start': 3582.446, 'duration': 3.18}, {'end': 3587.186, 'text': 'So that is amazing.', 'start': 3585.646, 'duration': 1.54}, {'end': 3588.187, 'text': 'Thank you guys for that.', 'start': 3587.327, 'duration': 0.86}, {'end': 3591.807, 'text': "And let's make this the best YouTube clone out there.", 'start': 3588.787, 'duration': 3.02}, {'end': 3594.168, 'text': "Exactly, let's do it, guys.", 'start': 3592.868, 'duration': 1.3}, {'end': 3602.5, 'text': "the light gray border in place now, so you can see like that, it's actually looking a lot cleaner.", 'start': 3597.455, 'duration': 5.045}, {'end': 3604.421, 'text': "it's looking a lot nicer.", 'start': 3602.5, 'duration': 1.921}], 'summary': 'Youtube clone reaching 10,000 views, 500 viewers, and 1,000 likes. aim for the best youtube clone.', 'duration': 29.417, 'max_score': 3575.004, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY3575004.jpg'}], 'start': 2527.63, 'title': 'Flexbox design and ui improvement', 'summary': 'Discusses the importance of pattern recognition in flexbox design, and styling containers, aligning elements using css. it emphasizes the need to understand and apply patterns for aligning items, with examples demonstrating the impact of using flex and recognizing the patterns. additionally, it covers improving the ui of a youtube clone, attracting over 500 viewers, 1,000 likes, and about to break 10,000 views, demonstrating strong engagement and popularity.', 'chapters': [{'end': 2717.786, 'start': 2527.63, 'title': 'Flexbox pattern recognition', 'summary': 'Discusses the importance of pattern recognition in flexbox design, emphasizing the need to understand and apply patterns for aligning items, with examples demonstrating the impact of using flex and recognizing the patterns in building projects.', 'duration': 190.156, 'highlights': ['The importance of pattern recognition in flexbox design is emphasized, with the need to understand and apply patterns for aligning items. The chapter underlines the significance of pattern recognition in flexbox design, stressing the need to comprehend and utilize patterns for aligning items.', 'Demonstration of the impact of using flex and recognizing patterns in building projects is provided, showcasing the difference in layout alignment and functionality. Examples are given to illustrate the impact of using flex and recognizing patterns in building projects, highlighting the variance in layout alignment and functionality.', 'The significance of attending live sessions to recognize patterns and notice recurrent elements across different builds is emphasized. The importance of attending live sessions to recognize patterns and identify recurring elements across different builds is stressed.']}, {'end': 3421.417, 'start': 2717.786, 'title': 'Styling containers and aligning elements', 'summary': 'Covers styling containers and aligning elements using css, including adding padding, setting display properties, and aligning items, with a focus on creating a search bar and aligning icons.', 'duration': 703.631, 'highlights': ['Adding padding to the outside header and setting display properties for input and icons The speaker demonstrates adding padding to the header and setting display properties like flex for input and icons to improve alignment.', 'Using flex properties to align items centrally and adjusting margins for better layout The speaker explains using flex properties to align items centrally and adjusting margins to optimize the layout for better visual presentation.', 'Applying specific width to elements and using border property to visualize space allocation The speaker applies a specific width to elements and utilizes the border property to visualize space allocation within the containers for improved design.']}, {'end': 3778.729, 'start': 3422.098, 'title': 'Improving ui and interactivity', 'summary': 'Discusses improving the ui of a youtube clone, including setting button width, adding background color and border, and making the design responsive. the live session attracted over 500 viewers, 1,000 likes, and was about to break 10,000 views, demonstrating strong engagement and popularity.', 'duration': 356.631, 'highlights': ['Over 500 viewers and 1,000 likes were achieved during the live session, showcasing strong engagement and popularity.', 'The chapter discusses setting button width, adding background color, and border, as well as making the design responsive, contributing to improving the UI of the YouTube clone.', 'The presenter encourages engagement by asking the audience to show appreciation by smashing the like button, demonstrating the importance of audience interaction for content creators.', 'The live session was about to break 10,000 views, indicating significant interest and traction in the content.', 'The speaker mentions the first-place winner of the COVID tracker challenge, who won $500, showcasing community engagement and involvement in competitions.']}], 'duration': 1251.099, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY2527630.jpg', 'highlights': ['The importance of pattern recognition in flexbox design is emphasized, with the need to understand and apply patterns for aligning items.', 'Demonstration of the impact of using flex and recognizing patterns in building projects is provided, showcasing the difference in layout alignment and functionality.', 'The significance of attending live sessions to recognize patterns and notice recurrent elements across different builds is emphasized.', 'Adding padding to the outside header and setting display properties for input and icons.', 'Using flex properties to align items centrally and adjusting margins for better layout.', 'Applying specific width to elements and using border property to visualize space allocation.', 'Over 500 viewers and 1,000 likes were achieved during the live session, showcasing strong engagement and popularity.', 'The chapter discusses setting button width, adding background color, and border, as well as making the design responsive, contributing to improving the UI of the YouTube clone.', 'The presenter encourages engagement by asking the audience to show appreciation by smashing the like button, demonstrating the importance of audience interaction for content creators.', 'The live session was about to break 10,000 views, indicating significant interest and traction in the content.']}, {'end': 5136.229, 'segs': [{'end': 3809.041, 'src': 'embed', 'start': 3779.29, 'weight': 1, 'content': [{'end': 3780.852, 'text': 'Yeah Oh, dude.', 'start': 3779.29, 'duration': 1.562}, {'end': 3783.555, 'text': 'Nice Awesome.', 'start': 3780.972, 'duration': 2.583}, {'end': 3785.798, 'text': 'Travel with Zenz as we love you, Sonny.', 'start': 3783.755, 'duration': 2.043}, {'end': 3788.301, 'text': 'Hey, I love you too.', 'start': 3785.818, 'duration': 2.483}, {'end': 3790.143, 'text': 'Love to see something like that.', 'start': 3788.921, 'duration': 1.222}, {'end': 3794.844, 'text': 'Nice Somebody said ReactJS and MySQL.', 'start': 3790.704, 'duration': 4.14}, {'end': 3797.086, 'text': "No, we're going to use ReactJS and Firebase, guys.", 'start': 3794.924, 'duration': 2.162}, {'end': 3800.25, 'text': 'Yeah Firebase is a beautiful thing to use.', 'start': 3797.647, 'duration': 2.603}, {'end': 3809.041, 'text': "Okay, So what we're going to do now is we are going to actually go ahead and add the sticky functionality right?", 'start': 3800.53, 'duration': 8.511}], 'summary': 'Discussion about using reactjs and firebase for adding sticky functionality.', 'duration': 29.751, 'max_score': 3779.29, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY3779290.jpg'}, {'end': 3932.71, 'src': 'embed', 'start': 3905.354, 'weight': 4, 'content': [{'end': 3910.397, 'text': "So if we set a Z index of 100, there's nothing that's going to go underneath that header right?", 'start': 3905.354, 'duration': 5.043}, {'end': 3914.66, 'text': 'But we also need to give it a background color as a finishing touch.', 'start': 3911.358, 'duration': 3.302}, {'end': 3916.361, 'text': 'So background color of white.', 'start': 3914.94, 'duration': 1.421}, {'end': 3923.883, 'text': "So what I'm going to show you guys is if I don't give it a background color, and I don't give it a Z-index, and we save it.", 'start': 3916.881, 'duration': 7.002}, {'end': 3928.067, 'text': "We're going to get the sticky functionality, but it's going to be transparent.", 'start': 3924.465, 'duration': 3.602}, {'end': 3930.208, 'text': "So let's go ahead and show them that, Kazi.", 'start': 3928.267, 'duration': 1.941}, {'end': 3932.71, 'text': "Yep So I'm going to show them that.", 'start': 3931.029, 'duration': 1.681}], 'summary': 'Setting z index to 100 prevents items from going under the header, while adding a white background color.', 'duration': 27.356, 'max_score': 3905.354, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY3905354.jpg'}, {'end': 4418.945, 'src': 'embed', 'start': 4385.66, 'weight': 2, 'content': [{'end': 4392.265, 'text': 'guys is I want I am a sidebar to only take up 20% of the screen and I want the rest of the videos to take up 80% of the screen.', 'start': 4385.66, 'duration': 6.605}, {'end': 4397.95, 'text': "So in order to do that, the way we do that is we go to app.js and you see here's the two children inside of it.", 'start': 4392.605, 'duration': 5.345}, {'end': 4400.632, 'text': 'So inside of sidebar, what I can go ahead and do.', 'start': 4398.39, 'duration': 2.242}, {'end': 4404.915, 'text': 'So if I open up sidebar.js, I need to create a CSS file.', 'start': 4400.812, 'duration': 4.103}, {'end': 4407.437, 'text': "And firstly, I'm going to stick to our BEM naming.", 'start': 4405.015, 'duration': 2.422}, {'end': 4418.945, 'text': "i'm going to go ahead and give this sidebar and i'm going to go ahead and import sidebar.css and watch it's going to scream because we don't have sidebar.css yet.", 'start': 4408.021, 'duration': 10.924}], 'summary': 'Adjust sidebar to occupy 20% of screen and videos to take up 80% by modifying app.js and sidebar.js', 'duration': 33.285, 'max_score': 4385.66, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY4385660.jpg'}, {'end': 4671.867, 'src': 'embed', 'start': 4633.307, 'weight': 3, 'content': [{'end': 4638.111, 'text': 'So guys, right here, you got your 20%.', 'start': 4633.307, 'duration': 4.804}, {'end': 4642.955, 'text': 'And then over here, on the other side, you got your 80%.', 'start': 4638.111, 'duration': 4.844}, {'end': 4651.899, 'text': 'And And this was achieved by flex 0.8.', 'start': 4642.955, 'duration': 8.944}, {'end': 4657.242, 'text': 'And then this one was achieved with flex 0.2.', 'start': 4651.899, 'duration': 5.343}, {'end': 4659.483, 'text': 'Exactly This is sidebar.', 'start': 4657.242, 'duration': 2.241}, {'end': 4663.985, 'text': 'And this is your recommended videos component.', 'start': 4660.283, 'duration': 3.702}, {'end': 4671.867, 'text': "Yeah And guys, remember, whenever you're doing weights, they have to add up to one.", 'start': 4665.346, 'duration': 6.521}], 'summary': 'The layout consists of a 20% sidebar and an 80% recommended videos component achieved by flex 0.8 and 0.2, respectively, with the reminder to ensure the weights add up to one.', 'duration': 38.56, 'max_score': 4633.307, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY4633307.jpg'}, {'end': 5136.229, 'src': 'embed', 'start': 5090.065, 'weight': 0, 'content': [{'end': 5090.386, 'text': 'There we go.', 'start': 5090.065, 'duration': 0.321}, {'end': 5092.788, 'text': 'Okay, so now we have three things.', 'start': 5091.027, 'duration': 1.761}, {'end': 5097.412, 'text': 'We pass it in, but how do we actually pull that into our app and use it as a prop right?', 'start': 5093.069, 'duration': 4.343}, {'end': 5106.078, 'text': "So here we need to make sure whenever you're passing a prop as a component as a prop, this has to be uppercase,", 'start': 5097.432, 'duration': 8.646}, {'end': 5109.4, 'text': 'because we know that components and React actually makes sure that you do that.', 'start': 5106.078, 'duration': 3.322}, {'end': 5111.262, 'text': 'Thank you so much, Deepank Yadav.', 'start': 5109.761, 'duration': 1.501}, {'end': 5112.623, 'text': 'Oh, yeah, thank you.', 'start': 5111.662, 'duration': 0.961}, {'end': 5115.464, 'text': "Damn, we're at by the way.", 'start': 5113.423, 'duration': 2.041}, {'end': 5116.644, 'text': 'Thank you guys so much.', 'start': 5115.524, 'duration': 1.12}, {'end': 5120.885, 'text': 'We are at actually $15 in the chat like super chat.', 'start': 5116.704, 'duration': 4.181}, {'end': 5126.807, 'text': 'That is really really cool, And we have broke over 10, 000 views on this video.', 'start': 5120.925, 'duration': 5.882}, {'end': 5132.248, 'text': 'So thank you guys so much for smashing that like button and also just being on this video.', 'start': 5126.807, 'duration': 5.441}, {'end': 5133.988, 'text': 'Thank you Thank you.', 'start': 5132.308, 'duration': 1.68}, {'end': 5136.229, 'text': 'Thank you so much.', 'start': 5134.209, 'duration': 2.02}], 'summary': 'The video has over 10,000 views and received $15 in super chat. props in react components must be uppercase.', 'duration': 46.164, 'max_score': 5090.065, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY5090065.jpg'}], 'start': 3779.29, 'title': 'Implementing reactjs features', 'summary': 'Covers adding sticky functionality, creating responsive web layout, explaining flexbox weighting, and using props to customize components in reactjs. it includes setting position sticky, adjusting layout using flexbox, and discussing props customization with examples. the super chat total is $15, and the video has over 10,000 views.', 'chapters': [{'end': 4030.635, 'start': 3779.29, 'title': 'Adding sticky functionality in reactjs', 'summary': 'Demonstrates the process of adding sticky functionality to a header in reactjs using firebase, including setting position sticky, z index, and background color, and emphasizes the importance of these elements for a seamless user experience.', 'duration': 251.345, 'highlights': ['The chapter demonstrates the process of adding sticky functionality to a header in ReactJS using Firebase. This highlights the main topic of the chapter, focusing on the demonstration of adding sticky functionality to the header.', 'The importance of setting position sticky, Z index, and background color is emphasized for a seamless user experience. This point underscores the significance of these elements in ensuring the sticky functionality works effectively and provides a better user experience.']}, {'end': 4431.963, 'start': 4030.635, 'title': 'Creating responsive web layout', 'summary': 'Covers adjusting the layout to have a responsive sidebar taking up 20% of the screen and recommended videos occupying the remaining 80%, achieved by using flexbox and css, with step-by-step instructions and live code.', 'duration': 401.328, 'highlights': ['The chapter demonstrates adjusting the layout to have a responsive sidebar taking up 20% of the screen and recommended videos occupying the remaining 80%, achieved by using flexbox and CSS, with step-by-step instructions and live code.', 'The speaker discusses changing the background color to white and achieving a perfectly responsive header.', 'The chapter discusses the creation of a sidebar and recommended videos section, along with the use of flexbox to have the two children elements display next to each other. The sidebar is set to take up 20% of the screen while the recommended videos occupy 80%.', 'The speaker discusses using step-by-step instructions and live code for free, with the implementation of DisplayFlex to position the sidebar and recommended videos next to each other in a row.']}, {'end': 4784.232, 'start': 4432.484, 'title': 'Flexbox weighting explained', 'summary': 'Discusses the use of flexbox and its weighting properties, showcasing examples where a sidebar takes up 20% and recommended videos take up 80%, emphasizing the need for weights to add up to one for proper alignment.', 'duration': 351.748, 'highlights': ['The chapter discusses the use of flexbox and its weighting properties, showcasing examples where a sidebar takes up 20% and recommended videos take up 80%, emphasizing the need for weights to add up to one for proper alignment.', 'Flexbox allows specifying the weight of containers, with a demonstration of how assigning flex 0.2 to the sidebar and flex 0.8 to the recommended videos results in respective widths of 20% and 80%.', 'The importance of weights adding up to one is emphasized to ensure proper alignment and avoid strange spacing issues when utilizing flexbox.']}, {'end': 5136.229, 'start': 4784.232, 'title': 'Using props to customize components', 'summary': 'Discusses the use of props in react to customize components, including passing different properties and icons, and applying css styling, with a total of $15 in super chat and over 10,000 views on the video.', 'duration': 351.997, 'highlights': ['The chapter discusses using props in React to customize components, including passing different properties and icons. The speaker demonstrates how to pass different properties and icons, such as home, trending, and subscription icons, to customize the components.', "The chapter explains applying CSS styling to the components, achieving a line item center alignment. The speaker demonstrates applying CSS styling, including centering the icons and text using 'line-item center' to improve visual presentation.", 'The chapter mentions a total of $15 in super chat and over 10,000 views on the video. The chapter reveals that the video has received a total of $15 in super chat donations and has surpassed 10,000 views, indicating audience engagement and reach.']}], 'duration': 1356.939, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY3779290.jpg', 'highlights': ['The chapter discusses using props in React to customize components, including passing different properties and icons.', 'The chapter demonstrates the process of adding sticky functionality to a header in ReactJS using Firebase.', 'The chapter demonstrates adjusting the layout to have a responsive sidebar taking up 20% of the screen and recommended videos occupying the remaining 80%, achieved by using flexbox and CSS, with step-by-step instructions and live code.', 'The chapter discusses the use of flexbox and its weighting properties, showcasing examples where a sidebar takes up 20% and recommended videos take up 80%, emphasizing the need for weights to add up to one for proper alignment.', 'The importance of setting position sticky, Z index, and background color is emphasized for a seamless user experience.', 'The chapter mentions a total of $15 in super chat and over 10,000 views on the video.']}, {'end': 5998.908, 'segs': [{'end': 5158.254, 'src': 'embed', 'start': 5136.229, 'weight': 4, 'content': [{'end': 5144.665, 'text': 'so now, remember, we use the home icon before right, but I, if i want to use the icon that we pass in, i literally just do that.', 'start': 5136.229, 'duration': 8.436}, {'end': 5150.029, 'text': 'and now, if i save this, i literally just replaced it with the prop name, which is capitalized.', 'start': 5144.665, 'duration': 5.364}, {'end': 5152.01, 'text': "remember, because it's a component.", 'start': 5150.029, 'duration': 1.981}, {'end': 5154.612, 'text': "if you don't capitalize it, it doesn't actually work.", 'start': 5152.01, 'duration': 2.602}, {'end': 5155.673, 'text': 'guys, it freaks out.', 'start': 5154.612, 'duration': 1.061}, {'end': 5158.254, 'text': "okay, like it freaks out and it doesn't work.", 'start': 5155.673, 'duration': 2.581}], 'summary': 'Using the passed-in icon, replacing with capitalized prop name for component functionality.', 'duration': 22.025, 'max_score': 5136.229, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY5136229.jpg'}, {'end': 5413.648, 'src': 'embed', 'start': 5388.43, 'weight': 6, 'content': [{'end': 5395.021, 'text': "And then what we're going to go ahead and do is say for the icon, guys, i want to change those icons to the following.", 'start': 5388.43, 'duration': 6.591}, {'end': 5397.782, 'text': 'so i want to say sidebar, sidebar.', 'start': 5395.021, 'duration': 2.761}, {'end': 5399.903, 'text': 'so for those icons, i want to give the following rules.', 'start': 5397.782, 'duration': 2.121}, {'end': 5402.263, 'text': 'i want to say give it a color of gray.', 'start': 5399.903, 'duration': 2.36}, {'end': 5404.604, 'text': 'so sidebar, row icon, give it a color of gray.', 'start': 5402.263, 'duration': 2.341}, {'end': 5410.546, 'text': 'so this is a hexadecimal for gray, and this is the remember, icons are actually fonts.', 'start': 5404.604, 'duration': 5.942}, {'end': 5413.648, 'text': "if you didn't know that, that's a new thing for you guys.", 'start': 5410.546, 'duration': 3.102}], 'summary': 'Changing sidebar icons to gray color.', 'duration': 25.218, 'max_score': 5388.43, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY5388430.jpg'}, {'end': 5485.099, 'src': 'embed', 'start': 5457.857, 'weight': 0, 'content': [{'end': 5462.881, 'text': "Nice So we're also going to target the title now.", 'start': 5457.857, 'duration': 5.024}, {'end': 5465.003, 'text': "So for the title, we're going to do the following.", 'start': 5463.302, 'duration': 1.701}, {'end': 5468.286, 'text': "We're going to say, target the title.", 'start': 5465.023, 'duration': 3.263}, {'end': 5475.491, 'text': "I'm going to say, give it a, so the title that we're talking about is, right.", 'start': 5468.326, 'duration': 7.165}, {'end': 5477.973, 'text': 'So I want that title to take up the majority of the space.', 'start': 5475.511, 'duration': 2.462}, {'end': 5480.115, 'text': 'So the way I do it is I say flex one.', 'start': 5478.474, 'duration': 1.641}, {'end': 5485.099, 'text': "So it's going to basically bully the other one into saying like, all right, give me as much room as possible.", 'start': 5480.556, 'duration': 4.543}], 'summary': 'Targeting the title to take up majority of space using flex one.', 'duration': 27.242, 'max_score': 5457.857, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY5457857.jpg'}, {'end': 5531.065, 'src': 'embed', 'start': 5499.592, 'weight': 2, 'content': [{'end': 5501.373, 'text': 'So margin left of 20 pixels.', 'start': 5499.592, 'duration': 1.781}, {'end': 5502.534, 'text': 'There we go.', 'start': 5502.174, 'duration': 0.36}, {'end': 5505.222, 'text': 'So margin left.', 'start': 5504.301, 'duration': 0.921}, {'end': 5507.683, 'text': 'And then you can see it gets that gap away from it.', 'start': 5505.382, 'duration': 2.301}, {'end': 5512.286, 'text': "And then I'm going to say give it a font size of 12 pixels and a font weight of 500.", 'start': 5508.164, 'duration': 4.122}, {'end': 5514.248, 'text': 'So font weight of 500 will bold it a little bit.', 'start': 5512.286, 'duration': 1.962}, {'end': 5516.149, 'text': 'But it will also make the text a bit smaller.', 'start': 5514.508, 'duration': 1.641}, {'end': 5518.29, 'text': 'So it looks a bit nicer, right? So there we go.', 'start': 5516.309, 'duration': 1.981}, {'end': 5521.372, 'text': 'That actually automatically starts to look a lot nicer.', 'start': 5518.31, 'duration': 3.062}, {'end': 5526.796, 'text': "It starts to look a lot more like we sort of expected to, right? And what I'm going to do now is also make it.", 'start': 5521.793, 'duration': 5.003}, {'end': 5531.065, 'text': 'So thank you so much Yashodip for that React donation.', 'start': 5527.622, 'duration': 3.443}], 'summary': 'Setting margin left to 20 pixels, font size to 12 pixels, and font weight to 500 for a more pleasing appearance.', 'duration': 31.473, 'max_score': 5499.592, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY5499592.jpg'}, {'end': 5642.919, 'src': 'embed', 'start': 5617.118, 'weight': 1, 'content': [{'end': 5623.459, 'text': 'And what I did is I applied a flex one, which basically said use up as much room as you want in that container.', 'start': 5617.118, 'duration': 6.341}, {'end': 5626.86, 'text': 'So the title and this title means what the word says home.', 'start': 5623.639, 'duration': 3.221}, {'end': 5633.162, 'text': "Yep And when you say use up as much with it's pretty much using all of this with right here.", 'start': 5627.821, 'duration': 5.341}, {'end': 5640.278, 'text': "Exactly, it's just just trying to use up as much room as it can, and then margin left is saying Give.", 'start': 5634.136, 'duration': 6.142}, {'end': 5642.919, 'text': "it says don't, let it touch that the icon.", 'start': 5640.278, 'duration': 2.641}], 'summary': 'Applied flex one to use up as much room in container, with margin left to prevent touching the icon.', 'duration': 25.801, 'max_score': 5617.118, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY5617118.jpg'}, {'end': 5710.619, 'src': 'embed', 'start': 5682.583, 'weight': 3, 'content': [{'end': 5686.885, 'text': 'We want it so that when you hover over it, we want to change the color of the icon to red.', 'start': 5682.583, 'duration': 4.302}, {'end': 5697.467, 'text': 'So the way we do that is, we say sidebar, row, hover, and then we say when you hover, go to the icon, so the sidebar row icon,', 'start': 5687.325, 'duration': 10.142}, {'end': 5698.828, 'text': 'and change the color of it to red.', 'start': 5697.467, 'duration': 1.361}, {'end': 5702.872, 'text': 'So if I save this, so as soon as I save this, it will start to do that.', 'start': 5698.868, 'duration': 4.004}, {'end': 5706.055, 'text': 'Oh, that is clean.', 'start': 5703.272, 'duration': 2.783}, {'end': 5710.619, 'text': 'I like how you can only change the icon color to red and not the other one.', 'start': 5706.215, 'duration': 4.404}], 'summary': 'Hover over icon to change color to red, clean and specific.', 'duration': 28.036, 'max_score': 5682.583, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY5682583.jpg'}], 'start': 5136.229, 'title': 'Troubleshooting react component and styling title with css flexbox', 'summary': 'Discusses troubleshooting a react component, emphasizing proper capitalization and identifying class names and styling rules. it also covers using css flexbox to style the title with specific properties such as flex, margin, font size, weight, and hover effects.', 'chapters': [{'end': 5457.103, 'start': 5136.229, 'title': 'Troubleshooting react component', 'summary': 'Discusses troubleshooting a react component, explaining the process of troubleshooting and resolving issues while implementing react components, emphasizing the importance of proper capitalization and identifying the use of class names and styling rules for icons.', 'duration': 320.874, 'highlights': ['The importance of proper capitalization in component names is emphasized, as not capitalizing a component name may lead to it not working. The speaker emphasizes the importance of capitalizing component names, as failure to do so may result in the component not working.', 'Troubleshooting the application involved identifying and correcting errors in the props and ensuring proper rendering of icons. The process of troubleshooting the application involved identifying and correcting errors in the props and ensuring proper rendering of icons to resolve the issues.', 'The speaker explains the use of class names and styling rules to modify the appearance of icons, such as changing the color and size. The speaker explains the use of class names and styling rules to modify the appearance of icons, such as changing the color to gray and adjusting the size.']}, {'end': 5998.908, 'start': 5457.857, 'title': 'Styling title with css flexbox', 'summary': "Discusses using css flexbox to style the title, including setting the flex property to 'flex: 1', applying margin left, setting font size to 12 pixels, font weight to 500, and creating interactive hover effects with color changes.", 'duration': 541.051, 'highlights': ["The chapter discusses using CSS Flexbox to style the title. The transcript covers using CSS Flexbox to style the title, including setting the flex property to 'flex: 1' to take up the majority of the space.", "Setting the flex property to 'flex: 1' and applying margin left. The speaker explains applying 'flex: 1' to make the title take up as much room as possible and applying a margin left of 20 pixels to create a gap.", 'Setting font size to 12 pixels and font weight to 500. The speaker describes setting the font size to 12 pixels and the font weight to 500, which bolds the text and makes it smaller for a nicer appearance.', 'Creating interactive hover effects with color changes. The chapter explains creating interactive hover effects by changing the cursor to a pointer, changing the background color to light gray, and changing the color of the icon to red when hovered over.']}], 'duration': 862.679, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY5136229.jpg', 'highlights': ["The chapter discusses using CSS Flexbox to style the title, including setting the flex property to 'flex: 1' to take up the majority of the space.", "The speaker explains applying 'flex: 1' to make the title take up as much room as possible and applying a margin left of 20 pixels to create a gap.", 'The speaker describes setting the font size to 12 pixels and the font weight to 500, which bolds the text and makes it smaller for a nicer appearance.', 'Creating interactive hover effects with color changes. The chapter explains creating interactive hover effects by changing the cursor to a pointer, changing the background color to light gray, and changing the color of the icon to red when hovered over.', 'The importance of proper capitalization in component names is emphasized, as not capitalizing a component name may lead to it not working.', 'The process of troubleshooting the application involved identifying and correcting errors in the props and ensuring proper rendering of icons to resolve the issues.', 'The speaker explains the use of class names and styling rules to modify the appearance of icons, such as changing the color to gray and adjusting the size.']}, {'end': 7179.267, 'segs': [{'end': 6076.85, 'src': 'embed', 'start': 6049.582, 'weight': 0, 'content': [{'end': 6053.044, 'text': "And the reason why that's so useful is because in actual apps like YouTube,", 'start': 6049.582, 'duration': 3.462}, {'end': 6057.907, 'text': 'you should be able to go into your code and basically have a selected sort of prop.', 'start': 6053.044, 'duration': 4.863}, {'end': 6059.808, 'text': 'So this is massive.', 'start': 6058.547, 'duration': 1.261}, {'end': 6061.609, 'text': 'They use this in a lot of production apps.', 'start': 6060.028, 'duration': 1.581}, {'end': 6064.79, 'text': "So basically what we're going to do is we're going to go ahead and pull that in here.", 'start': 6062.089, 'duration': 2.701}, {'end': 6067.592, 'text': "And what we're going to do is we're going to modify our CSS.", 'start': 6064.81, 'duration': 2.782}, {'end': 6068.873, 'text': "We're going to modify our CSS.", 'start': 6067.932, 'duration': 0.941}, {'end': 6069.453, 'text': "We're going to say.", 'start': 6068.893, 'duration': 0.56}, {'end': 6073.047, 'text': "Right So I'm going to make some strings.", 'start': 6070.185, 'duration': 2.862}, {'end': 6074.208, 'text': 'So these are back ticks.', 'start': 6073.107, 'duration': 1.101}, {'end': 6076.85, 'text': 'And this allows us to have some JavaScript inside of here.', 'start': 6074.368, 'duration': 2.482}], 'summary': 'Using selected props in apps like youtube for production apps and modifying css with javascript.', 'duration': 27.268, 'max_score': 6049.582, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY6049582.jpg'}, {'end': 6180.636, 'src': 'heatmap', 'start': 6019.851, 'weight': 1, 'content': [{'end': 6026.517, 'text': 'we pretty much have, like those on the sidebar, we have the highlighting functionality, the hovering functionality, available.', 'start': 6019.851, 'duration': 6.666}, {'end': 6033.282, 'text': "um, So, what we're going to do now is actually go ahead, and guys, please don't spam the chat by the way.", 'start': 6026.517, 'duration': 6.765}, {'end': 6036.125, 'text': "Like you, it's going to you're just going to get timed out if you do that.", 'start': 6033.423, 'duration': 2.702}, {'end': 6037.266, 'text': "So please don't do that.", 'start': 6036.165, 'duration': 1.101}, {'end': 6038.808, 'text': 'Thank you.', 'start': 6038.548, 'duration': 0.26}, {'end': 6041.758, 'text': 'Yeah, thank you so much.', 'start': 6040.717, 'duration': 1.041}, {'end': 6049.442, 'text': "We're going to basically allow it so that we can pass a prop to that sidebar row and choose if something's selected.", 'start': 6041.838, 'duration': 7.604}, {'end': 6053.044, 'text': "And the reason why that's so useful is because in actual apps like YouTube,", 'start': 6049.582, 'duration': 3.462}, {'end': 6057.907, 'text': 'you should be able to go into your code and basically have a selected sort of prop.', 'start': 6053.044, 'duration': 4.863}, {'end': 6059.808, 'text': 'So this is massive.', 'start': 6058.547, 'duration': 1.261}, {'end': 6061.609, 'text': 'They use this in a lot of production apps.', 'start': 6060.028, 'duration': 1.581}, {'end': 6064.79, 'text': "So basically what we're going to do is we're going to go ahead and pull that in here.", 'start': 6062.089, 'duration': 2.701}, {'end': 6067.592, 'text': "And what we're going to do is we're going to modify our CSS.", 'start': 6064.81, 'duration': 2.782}, {'end': 6068.873, 'text': "We're going to modify our CSS.", 'start': 6067.932, 'duration': 0.941}, {'end': 6069.453, 'text': "We're going to say.", 'start': 6068.893, 'duration': 0.56}, {'end': 6073.047, 'text': "Right So I'm going to make some strings.", 'start': 6070.185, 'duration': 2.862}, {'end': 6074.208, 'text': 'So these are back ticks.', 'start': 6073.107, 'duration': 1.101}, {'end': 6076.85, 'text': 'And this allows us to have some JavaScript inside of here.', 'start': 6074.368, 'duration': 2.482}, {'end': 6084.556, 'text': "And I'm basically going to say, if selected, right, then add the following class, add the selected class.", 'start': 6077.25, 'duration': 7.306}, {'end': 6087.178, 'text': "Right And then I'm going to save that.", 'start': 6085.076, 'duration': 2.102}, {'end': 6089.6, 'text': "And I'm going to go over to sidebar row.", 'start': 6087.558, 'duration': 2.042}, {'end': 6093.222, 'text': "And what I'm going to go ahead and do is basically add the following rules.", 'start': 6090.28, 'duration': 2.942}, {'end': 6095.124, 'text': "I'm going to say if it's selected.", 'start': 6093.262, 'duration': 1.862}, {'end': 6101.637, 'text': 'Before we continue, what are you actually trying to do right now, functionality-wise?', 'start': 6097.974, 'duration': 3.663}, {'end': 6102.237, 'text': 'What are we adding?', 'start': 6101.657, 'duration': 0.58}, {'end': 6106.861, 'text': 'So if you on the YouTube home screen and things like that?', 'start': 6103.779, 'duration': 3.082}, {'end': 6109.063, 'text': 'so if we go to our build, you see the top one.', 'start': 6106.861, 'duration': 2.202}, {'end': 6110.804, 'text': 'the home page is by default selected.', 'start': 6109.063, 'duration': 1.741}, {'end': 6114.947, 'text': 'When you say selected, what does that mean? Oh, oh, I see.', 'start': 6112.465, 'duration': 2.482}, {'end': 6115.628, 'text': 'Okay, yeah.', 'start': 6115.067, 'duration': 0.561}, {'end': 6120.632, 'text': "So it's, yeah, by default, this one is already like an active state.", 'start': 6115.688, 'duration': 4.944}, {'end': 6129.135, 'text': 'Yeah Then the other ones, when you hover over, it previews that this is going to be the next active state one, right? Yeah.', 'start': 6121.73, 'duration': 7.405}, {'end': 6137.62, 'text': 'So what you want to do is you basically want to allow that functionality to exist by introducing a selected prop into your components.', 'start': 6129.175, 'duration': 8.445}, {'end': 6140.082, 'text': 'That is how you basically achieve and solve that puzzle.', 'start': 6137.66, 'duration': 2.422}, {'end': 6152.307, 'text': "So what we've done is we created a selected and then what we're saying is we're actually saying If we have a class called sidebar row and notice there's no space here saying if it also has a selected class,", 'start': 6140.122, 'duration': 12.185}, {'end': 6153.928, 'text': 'then give the background color of light gray.', 'start': 6152.307, 'duration': 1.621}, {'end': 6158.392, 'text': "So now if I save this, you'll see the home one will now have a light gray background.", 'start': 6153.968, 'duration': 4.424}, {'end': 6163.356, 'text': 'So if I save that, we should be able to see that the home.', 'start': 6158.452, 'duration': 4.904}, {'end': 6167.339, 'text': "So I think it's saving sidebar row.", 'start': 6164.057, 'duration': 3.282}, {'end': 6172.684, 'text': 'You might have to save sidebar row.', 'start': 6170.041, 'duration': 2.643}, {'end': 6173.584, 'text': "No, it's already saved.", 'start': 6172.704, 'duration': 0.88}, {'end': 6174.205, 'text': 'So selected.', 'start': 6173.644, 'duration': 0.561}, {'end': 6179.136, 'text': "Yep And if we go into sidebar, Oh, sidebar.js isn't saved.", 'start': 6174.895, 'duration': 4.241}, {'end': 6180.636, 'text': 'Okay There we go.', 'start': 6179.156, 'duration': 1.48}], 'summary': "Adding functionality to allow selection and hover effects on sidebar rows, similar to youtube's home page.", 'duration': 28.329, 'max_score': 6019.851, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY6019851.jpg'}, {'end': 6336.472, 'src': 'embed', 'start': 6307.973, 'weight': 2, 'content': [{'end': 6314.258, 'text': 'So now the actual sidebar row icon selected, sidebar row icon.', 'start': 6307.973, 'duration': 6.285}, {'end': 6316.62, 'text': 'It should actually be red by default.', 'start': 6314.338, 'duration': 2.282}, {'end': 6319.642, 'text': "So I don't think this one's saved correctly.", 'start': 6316.68, 'duration': 2.962}, {'end': 6322.183, 'text': 'Sidebar row icon, sidebar row icon.', 'start': 6319.662, 'duration': 2.521}, {'end': 6327.007, 'text': 'Okay Nice.', 'start': 6324.465, 'duration': 2.542}, {'end': 6327.867, 'text': "It's there.", 'start': 6327.207, 'duration': 0.66}, {'end': 6328.988, 'text': 'Oh, there we go.', 'start': 6328.448, 'duration': 0.54}, {'end': 6329.429, 'text': "Now it's there.", 'start': 6329.028, 'duration': 0.401}, {'end': 6329.929, 'text': 'Yeah, dope.', 'start': 6329.449, 'duration': 0.48}, {'end': 6331.129, 'text': 'So there we go.', 'start': 6330.669, 'duration': 0.46}, {'end': 6335.351, 'text': "So now it's like it has that same hover effect, but it's always there if it's the selected one.", 'start': 6331.149, 'duration': 4.202}, {'end': 6336.472, 'text': 'Right So there we go.', 'start': 6335.391, 'duration': 1.081}], 'summary': 'Sidebar row icon should be red by default, and now it has the same hover effect when selected.', 'duration': 28.499, 'max_score': 6307.973, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY6307973.jpg'}, {'end': 6821.295, 'src': 'embed', 'start': 6789.153, 'weight': 3, 'content': [{'end': 6797.297, 'text': "So what I'll do is I'll say, here is the title, right? The component, the overall component is called video.", 'start': 6789.153, 'duration': 8.144}, {'end': 6800.539, 'text': 'Yep Okay.', 'start': 6798.478, 'duration': 2.061}, {'end': 6806.807, 'text': 'And then we got the channel name, which is right there.', 'start': 6801.704, 'duration': 5.103}, {'end': 6812.61, 'text': 'Yup And then we got how many views it got, which is right there.', 'start': 6806.827, 'duration': 5.783}, {'end': 6815.832, 'text': 'And then we got timestamp.', 'start': 6814.171, 'duration': 1.661}, {'end': 6821.295, 'text': 'Yeah And then I see a lot of comments by the way, saying, call it a video card.', 'start': 6817.053, 'duration': 4.242}], 'summary': 'Discussing video component, channel name, views, and timestamp.', 'duration': 32.142, 'max_score': 6789.153, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY6789153.jpg'}, {'end': 7058.487, 'src': 'embed', 'start': 7033.7, 'weight': 5, 'content': [{'end': 7040.682, 'text': 'But the reason why we do it, guys, like the way I showed it, is because this is like the ES6 standard now of doing this.', 'start': 7033.7, 'duration': 6.982}, {'end': 7041.602, 'text': 'This is the ES6 standard.', 'start': 7040.702, 'duration': 0.9}, {'end': 7045.563, 'text': 'Rather than basically if we just destructure the props at this level.', 'start': 7041.642, 'duration': 3.921}, {'end': 7050.864, 'text': "it's so clear to us that this is the exact props that come in super clean,", 'start': 7045.563, 'duration': 5.301}, {'end': 7056.466, 'text': 'less code and basically we can just use the actual prop name as opposed to saying props.proc.', 'start': 7050.864, 'duration': 5.602}, {'end': 7058.487, 'text': 'So a very simple way of doing it.', 'start': 7056.966, 'duration': 1.521}], 'summary': 'Using es6 standard for prop destructuring simplifies code and increases clarity.', 'duration': 24.787, 'max_score': 7033.7, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY7033700.jpg'}], 'start': 6000.255, 'title': 'Implementing and styling components for youtube app', 'summary': "Discusses implementing the selected prop in the sidebar component to achieve functionality similar to youtube's home page, styling components, building the sidebar and recommended videos, and creating a reusable video card component with a focus on reusability and maintainability.", 'chapters': [{'end': 6258.853, 'start': 6000.255, 'title': 'Implementing selected prop in sidebar', 'summary': "Discusses implementing the selected prop in the sidebar component, with the aim of achieving functionality similar to youtube's home page, where the selected item is highlighted and previewed upon hovering.", 'duration': 258.598, 'highlights': ["The selected prop is being introduced into the components to achieve functionality similar to YouTube's home page, where the selected item is highlighted and previewed upon hovering.", 'The addition of the selected prop and corresponding CSS modifications allows for the selected item in the sidebar to have a light gray background, indicating its active state.', 'The discussion involves troubleshooting and ensuring that the selected prop and CSS modifications are correctly applied to the sidebar component for the desired functionality to take effect.', 'The chapter emphasizes the practical application of the selected prop in production apps, highlighting its significance in creating user-friendly interfaces.', 'The speaker encourages avoiding chat spam and mentions the potential consequence of being timed out for spamming.']}, {'end': 6789.113, 'start': 6259.338, 'title': 'Styling and building components for youtube app', 'summary': 'Details the process of adding styling to components and building the sidebar, recommended videos, and individual video components for a youtube app, with specific focus on applying default styles and creating the recommended video layout.', 'duration': 529.775, 'highlights': ['The sidebar is styled to change icon and title colors when selected, with a default red color, achieving a seamless hover effect and finalized with a horizontal row section. The sidebar is styled to change icon and title colors when selected, with a default red color, achieving a seamless hover effect and finalized with a horizontal row section.', 'The process of styling the recommended videos section to match the layout of the YouTube app, including the use of flex properties, background color, padding, and margin to achieve the desired appearance. The process of styling the recommended videos section to match the layout of the YouTube app, including the use of flex properties, background color, padding, and margin to achieve the desired appearance.', 'Discussions and planning around creating a video component, specifying the props required for the component, such as title, channel name, views, timestamp, images, and avatar. Discussions and planning around creating a video component, specifying the props required for the component, such as title, channel name, views, timestamp, images, and avatar.']}, {'end': 7179.267, 'start': 6789.153, 'title': 'Building video card component', 'summary': 'Discusses building a reusable video card component with props like image, title, channel, views, timestamp, and channel image, while emphasizing the use of destructuring and es6 standards, showcasing the power of reusability and maintainability.', 'duration': 390.114, 'highlights': ['The component is called video card and it includes props like image, title, channel, views, timestamp, and channel image. The overall component is called video card and it includes props like image, title, channel, views, timestamp, and channel image.', 'The power of reusability and maintainability is showcased through the use of destructuring and ES6 standards. The use of destructuring and ES6 standards is emphasized to showcase the power of reusability and maintainability.', "The chapter emphasizes not using 'var' and always using 'let' instead for simplicity and ease. The chapter advises not using 'var' and always using 'let' for simplicity and ease."]}], 'duration': 1179.012, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY6000255.jpg', 'highlights': ["The selected prop is being introduced into the components to achieve functionality similar to YouTube's home page, where the selected item is highlighted and previewed upon hovering.", 'The addition of the selected prop and corresponding CSS modifications allows for the selected item in the sidebar to have a light gray background, indicating its active state.', 'The sidebar is styled to change icon and title colors when selected, with a default red color, achieving a seamless hover effect and finalized with a horizontal row section.', 'Discussions and planning around creating a video component, specifying the props required for the component, such as title, channel name, views, timestamp, images, and avatar.', 'The component is called video card and it includes props like image, title, channel, views, timestamp, and channel image.', 'The power of reusability and maintainability is showcased through the use of destructuring and ES6 standards.']}, {'end': 8395.072, 'segs': [{'end': 7206.317, 'src': 'embed', 'start': 7179.307, 'weight': 0, 'content': [{'end': 7187.03, 'text': "So what we're going to do now is actually go and pass in some dummy props, right? Pass in some dummy props.", 'start': 7179.307, 'duration': 7.723}, {'end': 7194.772, 'text': "So I'm going to go ahead and check out the, where are we actually rendering this? It's on video.", 'start': 7187.05, 'duration': 7.722}, {'end': 7197.673, 'text': 'We render that on the recommended videos page.', 'start': 7194.892, 'duration': 2.781}, {'end': 7206.317, 'text': "So Let's imagine I've got the following props, right? So this is a basically a YouTube video that I made.", 'start': 7198.713, 'duration': 7.604}], 'summary': 'Discussing passing dummy props for rendering a youtube video on the recommended videos page.', 'duration': 27.01, 'max_score': 7179.307, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY7179307.jpg'}, {'end': 7761.384, 'src': 'embed', 'start': 7734.754, 'weight': 1, 'content': [{'end': 7739.055, 'text': 'So right now, what we actually have is for this we actually have.', 'start': 7734.754, 'duration': 4.301}, {'end': 7742.105, 'text': 'It is actually display block, I think.', 'start': 7739.742, 'duration': 2.363}, {'end': 7745.188, 'text': "And then we're actually stacking the rows on top of each other.", 'start': 7742.125, 'duration': 3.063}, {'end': 7747.73, 'text': 'And each row is just using up the appropriate size.', 'start': 7745.308, 'duration': 2.422}, {'end': 7755.318, 'text': 'But if you do apply flex to a container, guys, by default, it goes in a row, right? By default, it goes in a row.', 'start': 7747.75, 'duration': 7.568}, {'end': 7761.384, 'text': 'And then what you want to do instead is change the flex direction to a column.', 'start': 7755.978, 'duration': 5.406}], 'summary': 'Using flexbox to stack rows on top of each other. changing flex direction to column.', 'duration': 26.63, 'max_score': 7734.754, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY7734754.jpg'}, {'end': 7807.525, 'src': 'embed', 'start': 7778.147, 'weight': 2, 'content': [{'end': 7779.288, 'text': 'Yeah Awesome.', 'start': 7778.147, 'duration': 1.141}, {'end': 7781.289, 'text': 'Yeah Nice.', 'start': 7779.828, 'duration': 1.461}, {'end': 7787.072, 'text': "So now, guys, what we're going to do is for video card info.", 'start': 7782.65, 'duration': 4.422}, {'end': 7796.396, 'text': "So video card info, what we're going to do now is – We're actually going to add a slight margin top to the video card info.", 'start': 7787.172, 'duration': 9.224}, {'end': 7804.483, 'text': 'So, right now you can see the text is touching the exact sort of top of the thumbnail, which is not nice, right?', 'start': 7796.416, 'duration': 8.067}, {'end': 7807.525, 'text': "First I'm going to give a padding to the right and I'm going to give a margin to the top.", 'start': 7804.523, 'duration': 3.002}], 'summary': 'Adding margin top to video card info for better layout.', 'duration': 29.378, 'max_score': 7778.147, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY7778147.jpg'}, {'end': 8243.679, 'src': 'embed', 'start': 8215.503, 'weight': 3, 'content': [{'end': 8222.307, 'text': "um. Also, one thing that I forgot to mention is if you're in the course, you can actually hit us up.", 'start': 8215.503, 'duration': 6.804}, {'end': 8226.728, 'text': 'We have people who send us a text message and they can reach out to us.', 'start': 8222.707, 'duration': 4.021}, {'end': 8233.772, 'text': "So I think that level is very important, because I think that's how you grow and learn through osmosis, just being around.", 'start': 8226.749, 'duration': 7.023}, {'end': 8243.679, 'text': 'And any mentor that you guys have learned from and you have significantly gotten an increase in your skill set by, like, massive amounts.', 'start': 8234.472, 'duration': 9.207}], 'summary': 'Access mentors in course for skill growth and learning through osmosis.', 'duration': 28.176, 'max_score': 8215.503, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY8215503.jpg'}], 'start': 7179.307, 'title': 'Video rendering and styling', 'summary': 'Discusses passing dummy props for video rendering and covers styling video cards using css, while also optimizing the display of video card information and emphasizing the importance of dedicating significant hours to coding.', 'chapters': [{'end': 7313.321, 'start': 7179.307, 'title': 'Passing dummy props for video rendering', 'summary': 'Discusses passing dummy props for video rendering, including title, views, timestamp, channel image, and channel name, to demonstrate the process of rendering videos with dummy components and the issues encountered with image sizes and repetition.', 'duration': 134.014, 'highlights': ['The process of passing dummy props for video rendering is demonstrated, including title, views, timestamp, channel image, and channel name.', 'Issues with image sizes and repetition are encountered while rendering videos with dummy components.', 'The chapter discusses reusing the dummy components and the need to address issues related to image sizes and repetition.']}, {'end': 7777.567, 'start': 7314.339, 'title': 'Styling video cards with css', 'summary': 'Covers styling video cards using css, including setting fixed width and margin, targeting the thumbnail, achieving responsive design using flexbox, and aligning text using display flex.', 'duration': 463.228, 'highlights': ['Achieving responsive design using flexbox The instructor demonstrates using flexbox to achieve responsive design, allowing the content to wrap and adjust based on screen size.', 'Setting fixed width and margin The instructor sets a fixed width of 270 pixels for the video card container and adds a 40-pixel bottom margin to prevent elements from touching.', 'Targeting the thumbnail and applying specific dimensions The instructor targets the video card thumbnail and sets its height to 140 pixels and width to 250 pixels to achieve a consistent thumbnail size.', 'Aligning text using display flex The instructor uses display flex to align the avatar next to the text within the video card, achieving a clean layout.']}, {'end': 8010.503, 'start': 7778.147, 'title': 'Optimizing video card display', 'summary': 'Focuses on optimizing the display of video card information, including adding padding and margin to ensure the text does not touch the thumbnail, adjusting font sizes and colors for improved readability, and setting the correct size for the video avatar, while also promoting a free one-hour training session for aspiring javascript developers.', 'duration': 232.356, 'highlights': ['The chapter focuses on adding padding and margin to the video card info to prevent the text from touching the exact top of the thumbnail, resulting in a cleaner display.', 'The speaker targets the H4 inside the video card text, reducing its font size and adding a margin bottom to avoid it touching the paragraphs underneath, leading to improved readability.', 'The process involves adjusting the font size and color of the paragraph tags underneath the video card text, resulting in a smaller size and a gray color for enhanced visibility.', 'The final step involves setting the correct size for the video avatar, overriding its CSS to achieve the desired display, and also promoting a free one-hour training session for aspiring JavaScript developers.', 'The speaker promotes an epic free one-hour training for JavaScript developers, urging the audience to register for it through the provided link in the description below the video.']}, {'end': 8395.072, 'start': 8010.523, 'title': 'Maximizing coding hours for success', 'summary': 'Highlights the importance of dedicating significant hours to coding, with 10 hours making one good, 20 hours making one great, and 30+ hours turning one into a legend, emphasizing the impact of osmosis learning and focusing on mastering a single coding language.', 'duration': 384.549, 'highlights': ['Emphasizing the impact of osmosis learning and focusing on mastering a single coding language The chapter emphasizes the importance of spending hours mastering a single coding language to make the skill sellable and valuable to an employer or client, citing the impact of osmosis learning when around high-caliber individuals.', 'The impact of dedicating significant hours to coding The chapter emphasizes that dedicating 10 hours to coding makes one good, 20 hours makes one great, and 30+ hours turns one into a legend, highlighting the correlation between hours spent and coding proficiency.', "The importance of osmosis learning The transcript highlights the influence of osmosis learning, where being around high-caliber individuals, such as React developers, significantly improves one's skills and proficiency in coding."]}], 'duration': 1215.765, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY7179307.jpg', 'highlights': ['The process of passing dummy props for video rendering is demonstrated, including title, views, timestamp, channel image, and channel name.', 'Achieving responsive design using flexbox The instructor demonstrates using flexbox to achieve responsive design, allowing the content to wrap and adjust based on screen size.', 'The chapter focuses on adding padding and margin to the video card info to prevent the text from touching the exact top of the thumbnail, resulting in a cleaner display.', 'Emphasizing the impact of osmosis learning and focusing on mastering a single coding language The chapter emphasizes the importance of spending hours mastering a single coding language to make the skill sellable and valuable to an employer or client, citing the impact of osmosis learning when around high-caliber individuals.']}, {'end': 10470.604, 'segs': [{'end': 8420.286, 'src': 'embed', 'start': 8395.913, 'weight': 0, 'content': [{'end': 8402.456, 'text': "We're getting a pretty dope mansion for Team Clever Programmer, and we're going to be running small events.", 'start': 8395.913, 'duration': 6.543}, {'end': 8409.16, 'text': "For most people, it's going to be pretty expensive, but for you, you're invited.", 'start': 8403.417, 'duration': 5.743}, {'end': 8416.364, 'text': "So, if you actually are ever in town, we would just do a one-day in-person event, whether it's React or whatever skills,", 'start': 8409.24, 'duration': 7.124}, {'end': 8418.405, 'text': "and you're just invited to the VIP bootcamp.", 'start': 8416.364, 'duration': 2.041}, {'end': 8420.286, 'text': 'So I just want to actually throw that out for you, by the way.', 'start': 8418.425, 'duration': 1.861}], 'summary': 'Team clever programmer is hosting small events in a mansion, offering vip bootcamps with in-person one-day events for invited guests.', 'duration': 24.373, 'max_score': 8395.913, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY8395913.jpg'}, {'end': 8533.374, 'src': 'embed', 'start': 8506.358, 'weight': 2, 'content': [{'end': 8509.901, 'text': "But what's actually allowing that to happen is something called a React Router.", 'start': 8506.358, 'duration': 3.543}, {'end': 8517.069, 'text': "So whoever's interested in learning React Router, we're going to about to show you a live demo and teach you how to use that right now.", 'start': 8510.262, 'duration': 6.807}, {'end': 8524.771, 'text': "And then we're gonna go and show you how you can have these two pages and two routes and also notice how in the URL now It says forward slash search,", 'start': 8517.949, 'duration': 6.822}, {'end': 8526.712, 'text': 'forward slash, clever programmer.', 'start': 8524.771, 'duration': 1.941}, {'end': 8533.374, 'text': 'So it actually shows what cause he typed in the search bar and actually chose that as a route, which is amazing, right?', 'start': 8526.712, 'duration': 6.662}], 'summary': 'Introduction to react router with live demo and teaching on creating two pages and routes.', 'duration': 27.016, 'max_score': 8506.358, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY8506358.jpg'}, {'end': 8626.428, 'src': 'embed', 'start': 8592.745, 'weight': 1, 'content': [{'end': 8594.226, 'text': 'So it can be used in that way.', 'start': 8592.745, 'duration': 1.481}, {'end': 8603.732, 'text': 'Just make sure that if you do use something like a clone – that you can actually explain code and you can actually break down what the clone represents.', 'start': 8594.466, 'duration': 9.266}, {'end': 8608.375, 'text': 'The key thing about the clones is not only is it going to make your portfolio look good,', 'start': 8603.893, 'duration': 4.482}, {'end': 8620.223, 'text': "but what I would recommend you do with a thing like a clone is what I would do is I would take them and then I would add in a lot of my own custom functionality of whatever I try to type of app I'm building.", 'start': 8608.375, 'duration': 11.848}, {'end': 8626.428, 'text': "So for example, I would take somebody's blog clone they're showing me, and I would turn it into a video blog clone.", 'start': 8620.644, 'duration': 5.784}], 'summary': 'Using clones in portfolio to demonstrate coding skills and customize functionality for unique projects.', 'duration': 33.683, 'max_score': 8592.745, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY8592745.jpg'}, {'end': 9550.803, 'src': 'embed', 'start': 9521.428, 'weight': 3, 'content': [{'end': 9524.51, 'text': "So always use link whenever I think you're working with React.", 'start': 9521.428, 'duration': 3.082}, {'end': 9526.969, 'text': 'Yeah, exactly that.', 'start': 9525.908, 'duration': 1.061}, {'end': 9533.092, 'text': "Because, guys, if you're using React Router, you do not want to be using A tag.", 'start': 9527.029, 'duration': 6.063}, {'end': 9538.155, 'text': 'What happens if you link to an external site, like link to Facebook.com?', 'start': 9533.132, 'duration': 5.023}, {'end': 9539.616, 'text': 'You should just use A tags for that?', 'start': 9538.216, 'duration': 1.4}, {'end': 9545.44, 'text': 'I think you can use React Router, but basically it would just do a normal redirect.', 'start': 9541.037, 'duration': 4.403}, {'end': 9546.12, 'text': 'Got it.', 'start': 9545.82, 'duration': 0.3}, {'end': 9548.282, 'text': 'Yeah, so it would do a normal redirect.', 'start': 9546.781, 'duration': 1.501}, {'end': 9550.803, 'text': 'Or it may actually try and.', 'start': 9549.062, 'duration': 1.741}], 'summary': 'Use react router instead of a tag for internal links to avoid normal redirects.', 'duration': 29.375, 'max_score': 9521.428, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY9521428.jpg'}, {'end': 9917.603, 'src': 'embed', 'start': 9891.178, 'weight': 4, 'content': [{'end': 9899.223, 'text': "let us know, let's keep that energy pumping the positive vibes up, because even us you'll notice our energy starts to go down,", 'start': 9891.178, 'duration': 8.045}, {'end': 9902.305, 'text': 'and i see even the even a lot of your guys energy is going down.', 'start': 9899.223, 'duration': 3.082}, {'end': 9908.729, 'text': "so let's just bring that back up together, and that gives us a boost and it's going to make his coding better,", 'start': 9902.305, 'duration': 6.424}, {'end': 9911.691, 'text': 'which is going to make your projects in your portfolio better.', 'start': 9908.729, 'duration': 2.962}, {'end': 9917.603, 'text': "and so let's bring it up and then let's get back into oh and smash the like button if you haven't already, Exactly.", 'start': 9911.691, 'duration': 5.912}], 'summary': 'Maintain positive energy to improve coding and projects.', 'duration': 26.425, 'max_score': 9891.178, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY9891178.jpg'}, {'end': 10298.353, 'src': 'embed', 'start': 10270.925, 'weight': 5, 'content': [{'end': 10283.149, 'text': "This $25, I don't know why, but it feels like $25, 000 because it kind of is just a vote of confidence, and nobody has to actually pay at all.", 'start': 10270.925, 'duration': 12.224}, {'end': 10288.731, 'text': 'But it just makes us feel really appreciated and loved for what we are doing because.', 'start': 10283.929, 'duration': 4.802}, {'end': 10298.353, 'text': 'it does take a tremendous amount of energy putting this together, planning it for days in advance or weeks in advance, and then, just like even today,', 'start': 10289.731, 'duration': 8.622}], 'summary': 'Receiving a $25 donation feels like $25,000, showing appreciation for the effort put into planning events.', 'duration': 27.428, 'max_score': 10270.925, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY10270925.jpg'}], 'start': 8395.913, 'title': 'Building and marketing web projects', 'summary': 'Covers plans for a clever programmer mansion, vip bootcamp, and portfolio enhancement with clones. it also delves into react router implementation, page routing, search page styling, energy management, youtube component building, and avatar creation using material ui, while also highlighting a generous donation and teasing an upcoming tiktok clone build.', 'chapters': [{'end': 8568.005, 'start': 8395.913, 'title': 'Team clever programmer mansion and vip bootcamp', 'summary': 'Discusses the plans for a mansion for team clever programmer, running small events, and inviting viewers to a vip bootcamp, along with a demonstration of building search functionality using react router.', 'duration': 172.092, 'highlights': ['The chapter discusses the plans for a mansion for Team Clever Programmer, running small events, and inviting viewers to a VIP bootcamp, along with a demonstration of building search functionality using React Router.', 'The team is getting a mansion for Team Clever Programmer to run small events, and viewers are invited to a VIP bootcamp, making it exclusive and special for them.', 'The chapter culminates with a live demonstration of building search functionality using React Router, showcasing the seamless and elegant user experience, along with the process of setting up routes and URLs.']}, {'end': 8760.336, 'start': 8570.348, 'title': 'Using clones to enhance your portfolio', 'summary': 'Discusses how to use clones in your portfolio to attract clients and make money by adding custom functionality, emphasizing the importance of pushing clones further to demonstrate understanding and avoid being perceived as simply copying.', 'duration': 189.988, 'highlights': ['Using clones in your portfolio can help attract clients and make money by adding custom functionality. This can be achieved by taking a basic clone and enhancing it with additional features such as admin dashboard, analytics, and payment functionality, demonstrating your understanding and capability.', "It's important to push clones further to demonstrate understanding and avoid being perceived as simply copying. By extending the functionality of clones and implementing additional features, it showcases a deeper comprehension and effort, making the project more appealing to recruiters and clients.", 'The session emphasizes the value of understanding and enhancing clones, showcasing the capability to take projects further, beyond just replicating the basic functionality. This is crucial in making the project stand out and demonstrating a comprehensive grasp of the technology.']}, {'end': 9498.162, 'start': 8760.696, 'title': 'React router and page routing', 'summary': 'Explains the implementation of page routing in a react app using react router. it demonstrates the use of routes to display components, dynamic routing with wildcards, and updating state using usestate hook, resulting in dynamic page rendering without refresh.', 'duration': 737.466, 'highlights': ['The chapter explains the implementation of page routing in a React app using React Router. It covers the concept of adding a router to determine which URL loads what component, introducing routes for homepage and search page, and the use of React Router for page routing.', "Demonstrates the use of routes to display components. It showcases the use of routes to determine which component to display based on the URL, such as displaying the homepage component for the '/' route and the search page component for the '/search' route.", 'Dynamic routing with wildcards. It explains the concept of using wildcards in routes to match any URL, enabling dynamic routing for various search terms, and rendering the search page based on the matched route.', 'Updating state using useState hook, resulting in dynamic page rendering without refresh. It demonstrates the use of useState hook to update and track the input search state, allowing dynamic updates to the input field and URL without requiring a page refresh.']}, {'end': 9872.208, 'start': 9499.158, 'title': 'React router and search page styling', 'summary': "Discusses the importance of using react router's link component over a tag for internal links, emphasizing the need to style the search page with filter icon and text, and adding a horizontal row to divide the sections for a cleaner look.", 'duration': 373.05, 'highlights': ['The link component in React Router does not refresh when clicked, making it the preferred choice over A tag for internal links, ensuring instant navigation (e.g., link to Facebook.com).', 'Emphasizing the importance of using React Router and avoiding A tags when working with internal links to ensure smooth navigation and avoid potential issues with external links.', 'Styling the search page with a filter icon and text using div and H2 elements, demonstrating the process of adding CSS rules to achieve the desired UI effects.', 'Adding a horizontal row to the search page to divide sections and improve visual organization, enhancing the overall layout and user experience.']}, {'end': 10226.487, 'start': 9872.228, 'title': 'Boosting energy and building youtube components', 'summary': 'Discusses the importance of maintaining high energy levels during coding sessions, as it directly impacts the quality of coding and projects. it also outlines the process of building two components for a youtube clone, the video row, and channel row, with specifics on the props required for the channel row component.', 'duration': 354.259, 'highlights': ['Maintaining high energy levels is crucial for quality coding and projects, as evident from the exhausting nature of long coding sessions. The speaker emphasizes the impact of energy levels on coding quality and mentions the exhaustion experienced during long coding sessions.', 'Two components for a YouTube clone, the video row, and channel row, are being built, with detailed specifications for the props required in the channel row component. The chapter delves into the process of building two components for a YouTube clone, providing specifics on the props required for the channel row component.']}, {'end': 10470.604, 'start': 10227.388, 'title': 'Building avatar with material ui', 'summary': 'Discusses creating an avatar using material ui, while also acknowledging a generous donation of $25,000 and teasing an upcoming tiktok clone build, showcasing engagement with the audience and the planning involved in content creation.', 'duration': 243.216, 'highlights': ['Acknowledgment of a generous $25,000 donation and gratitude for the support and appreciation from the audience. The speaker expresses gratitude for a $25,000 donation, emphasizing the value of audience support and appreciation for their content creation efforts.', 'Teasing the upcoming build of a TikTok clone and engaging with the audience to gauge excitement for the upcoming content. The speaker teases the upcoming build of a TikTok clone, engaging with the audience to gauge excitement and interest, showcasing the planning involved in future content creation.', 'Discussion of the process of creating an avatar using Material UI and the technical steps involved in setting it up. The chapter discusses the technical process of creating an avatar using Material UI, highlighting the steps and challenges involved in setting it up.']}], 'duration': 2074.691, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY8395913.jpg', 'highlights': ['The chapter discusses plans for a mansion for Team Clever Programmer and a VIP bootcamp, along with a demonstration of building search functionality using React Router.', 'Using clones in your portfolio can help attract clients and make money by adding custom functionality, showcasing a deeper comprehension and effort.', 'The chapter explains the implementation of page routing in a React app using React Router, including dynamic routing with wildcards and updating state using useState hook.', 'Emphasizing the importance of using React Router and avoiding A tags when working with internal links to ensure smooth navigation and avoid potential issues with external links.', 'Maintaining high energy levels is crucial for quality coding and projects, as evident from the exhausting nature of long coding sessions.', 'Acknowledgment of a generous $25,000 donation and teasing the upcoming build of a TikTok clone, engaging with the audience to gauge excitement for the upcoming content.']}, {'end': 11306.361, 'segs': [{'end': 10553.371, 'src': 'embed', 'start': 10498.725, 'weight': 0, 'content': [{'end': 10500.748, 'text': 'You know, Gary Vee says skilled, unskillable.', 'start': 10498.725, 'duration': 2.023}, {'end': 10501.869, 'text': "That's actually us.", 'start': 10500.788, 'duration': 1.081}, {'end': 10504.393, 'text': 'Nice Love that.', 'start': 10503.271, 'duration': 1.122}, {'end': 10508.938, 'text': "yeah, awesome, all right, let's keep going.", 'start': 10507.037, 'duration': 1.901}, {'end': 10513.76, 'text': "that's just funny, that's so dope, um.", 'start': 10508.938, 'duration': 4.822}, {'end': 10517.481, 'text': 'so now, guys, we have the um.', 'start': 10513.76, 'duration': 3.721}, {'end': 10519.522, 'text': 'people are pumped for the tiktok.', 'start': 10517.481, 'duration': 2.041}, {'end': 10525.744, 'text': 'clone, becky and abby and ankur mahesh said can you make a video on spotify?', 'start': 10519.522, 'duration': 6.222}, {'end': 10527.025, 'text': "clone, it's on the list.", 'start': 10525.744, 'duration': 1.281}, {'end': 10529.025, 'text': 'dude, we have spotify coming up as well.', 'start': 10527.025, 'duration': 2}, {'end': 10531.623, 'text': 'yeah, i think next week, Yeah.', 'start': 10529.025, 'duration': 2.598}, {'end': 10533.124, 'text': 'Next week we have Spotify coming.', 'start': 10531.703, 'duration': 1.421}, {'end': 10535.645, 'text': 'Awesome So channel.', 'start': 10533.724, 'duration': 1.921}, {'end': 10540.306, 'text': "So here we have the avatar and it's consuming the image prop, right? So we have the image prop.", 'start': 10535.705, 'duration': 4.601}, {'end': 10550.95, 'text': "And then what we're going to do is we are going to have a div with all of the text inside of it, because we want that to sit to the right of the,", 'start': 10541.187, 'duration': 9.763}, {'end': 10551.831, 'text': 'the avatar.', 'start': 10550.95, 'duration': 0.881}, {'end': 10553.371, 'text': "So here I'm going to have channel row.", 'start': 10551.851, 'duration': 1.52}], 'summary': 'Team discusses upcoming content for tiktok and spotify, with plans for next week.', 'duration': 54.646, 'max_score': 10498.725, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY10498725.jpg'}, {'end': 10758.675, 'src': 'embed', 'start': 10732.522, 'weight': 1, 'content': [{'end': 10737.984, 'text': "And on the next episode of Devs Got Talent, we're going to be announcing the winner who's going to get first place for $1, 000.", 'start': 10732.522, 'duration': 5.462}, {'end': 10740.126, 'text': 'So stay tuned for that too.', 'start': 10737.985, 'duration': 2.141}, {'end': 10742.085, 'text': "Oh, that's dope.", 'start': 10741.164, 'duration': 0.921}, {'end': 10743.566, 'text': "That's so sick, man.", 'start': 10742.405, 'duration': 1.161}, {'end': 10744.386, 'text': 'I love that.', 'start': 10743.706, 'duration': 0.68}, {'end': 10747.948, 'text': "That's sick.", 'start': 10744.446, 'duration': 3.502}, {'end': 10753.812, 'text': "Was that Nas's idea? No, somebody, I think Amanat or somebody in the chat said devs got talent.", 'start': 10747.988, 'duration': 5.824}, {'end': 10756.373, 'text': "And I'm like, yo, that's actually sick.", 'start': 10753.832, 'duration': 2.541}, {'end': 10758.675, 'text': 'I mean, I think it might have been me on the stream.', 'start': 10756.734, 'duration': 1.941}], 'summary': 'Announcing the winner of devs got talent, offering $1,000 prize.', 'duration': 26.153, 'max_score': 10732.522, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY10732522.jpg'}, {'end': 10958.427, 'src': 'embed', 'start': 10923.406, 'weight': 3, 'content': [{'end': 10926.307, 'text': "This week, who's going to win? Devs Got Talent.", 'start': 10923.406, 'duration': 2.901}, {'end': 10933.47, 'text': 'Do you have what it takes? It opens up with Nas doing a little dance and stuff.', 'start': 10926.947, 'duration': 6.523}, {'end': 10935.73, 'text': 'Yeah, Nas does a little step.', 'start': 10934.07, 'duration': 1.66}, {'end': 10938.091, 'text': 'That would be hilarious.', 'start': 10936.09, 'duration': 2.001}, {'end': 10942.042, 'text': 'Awesome So now- Whoa.', 'start': 10940.2, 'duration': 1.842}, {'end': 10951.031, 'text': "By the way, Radon who joined, he texts me back and he's like, I just wrote, he goes, here's my pledge.", 'start': 10943.083, 'duration': 7.948}, {'end': 10954.074, 'text': 'If I succeed, I will give scholarship to 10 people.', 'start': 10951.451, 'duration': 2.623}, {'end': 10956.825, 'text': 'Oh, damn.', 'start': 10955.663, 'duration': 1.162}, {'end': 10958.427, 'text': 'So, yeah, guys.', 'start': 10957.806, 'duration': 0.621}], 'summary': 'Radon pledges to give scholarships to 10 people if he succeeds in devs got talent.', 'duration': 35.021, 'max_score': 10923.406, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY10923406.jpg'}, {'end': 11258.03, 'src': 'embed', 'start': 11232.266, 'weight': 4, 'content': [{'end': 11238.37, 'text': 'Dude, it is banned in India because my number one was always India.', 'start': 11232.266, 'duration': 6.104}, {'end': 11241.192, 'text': "I'm actually not joking.", 'start': 11240.031, 'duration': 1.161}, {'end': 11246.015, 'text': "The reason why my last TikTok got 146, 000 is there's no people from India on here.", 'start': 11241.292, 'duration': 4.723}, {'end': 11247.997, 'text': 'United Kingdom is number one.', 'start': 11246.496, 'duration': 1.501}, {'end': 11250.264, 'text': 'united states.', 'start': 11248.843, 'duration': 1.421}, {'end': 11251.285, 'text': "by the way, that's kind of crazy.", 'start': 11250.264, 'duration': 1.021}, {'end': 11254.568, 'text': 'united kingdom is number one, the united states is number two.', 'start': 11251.285, 'duration': 3.283}, {'end': 11258.03, 'text': "so yeah, that actually proves it to me that it's actually banned in india.", 'start': 11254.568, 'duration': 3.462}], 'summary': 'Tiktok is banned in india, with 146,000 views; uk is top, us is second.', 'duration': 25.764, 'max_score': 11232.266, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY11232266.jpg'}], 'start': 10470.644, 'title': 'Building ui component and devs got talent', 'summary': "Involves building a ui component for a streaming platform with upcoming features like tiktok clone and spotify video. it also celebrates donation milestones and announces devs got talent with a $1,000 prize, along with discussing a participant's pledge to sponsor scholarships and the impact of tiktok ban in india on viewership.", 'chapters': [{'end': 10899.245, 'start': 10470.644, 'title': 'Building a ui component and announcing devs got talent', 'summary': 'Involves building a ui component for a streaming platform, with mentions of upcoming features like tiktok clone and spotify video, as well as celebrating donation milestones and announcing an upcoming event called devs got talent with a $1,000 prize.', 'duration': 428.601, 'highlights': ['Mention of upcoming features like TikTok clone and Spotify video The transcript mentions upcoming features for the streaming platform, including a TikTok clone and a video on Spotify, indicating future development plans.', 'Celebrating donation milestones and announcing Devs Got Talent event with a $1,000 prize The transcript includes celebrating donation milestones and announcing an upcoming event called Devs Got Talent, with a $1,000 prize, showcasing community engagement and future event plans.', 'Building a UI component for a streaming platform The chapter involves building a UI component for a streaming platform, demonstrating technical development and design work within the project.']}, {'end': 11306.361, 'start': 10900.146, 'title': 'Devs got talent and tiktok ban in india', 'summary': "Discusses devs got talent event, where a participant pledges to sponsor 10 scholarships if successful, and the ban of tiktok in india, with the speaker's analytics indicating a significant impact on viewership.", 'duration': 406.215, 'highlights': ['A participant pledges to sponsor 10 scholarships if successful in the program. The participant, Radon, commits to providing 10 sponsorships if he succeeds, demonstrating a significant contribution to the program.', "The ban of TikTok in India is discussed, with the speaker's analytics indicating a significant impact on viewership and engagement. The speaker's analytics show a significant impact on viewership, with United Kingdom and United States ranking higher than India, indicating a notable decrease in viewers from India.", "Discussion about the ban of TikTok and its impact on the speaker's viewership and engagement. The ban of TikTok in India is a significant topic, with the speaker's analytics indicating a substantial decrease in viewership and engagement from India, impacting the success of his content."]}], 'duration': 835.717, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY10470644.jpg', 'highlights': ['Mention of upcoming features like TikTok clone and Spotify video The transcript mentions upcoming features for the streaming platform, including a TikTok clone and a video on Spotify, indicating future development plans.', 'Celebrating donation milestones and announcing Devs Got Talent event with a $1,000 prize The transcript includes celebrating donation milestones and announcing an upcoming event called Devs Got Talent, with a $1,000 prize, showcasing community engagement and future event plans.', 'Building a UI component for a streaming platform The chapter involves building a UI component for a streaming platform, demonstrating technical development and design work within the project.', 'A participant pledges to sponsor 10 scholarships if successful in the program. The participant, Radon, commits to providing 10 sponsorships if he succeeds, demonstrating a significant contribution to the program.', "The ban of TikTok in India is discussed, with the speaker's analytics indicating a significant impact on viewership and engagement. The speaker's analytics show a significant impact on viewership, with United Kingdom and United States ranking higher than India, indicating a notable decrease in viewers from India."]}, {'end': 13379.388, 'segs': [{'end': 11401.474, 'src': 'embed', 'start': 11375.133, 'weight': 1, 'content': [{'end': 11382.016, 'text': "So for the H4, I'm going to go ahead and say display flex, align item center and justify content space between.", 'start': 11375.133, 'duration': 6.883}, {'end': 11384.157, 'text': 'So now I go ahead and apply that.', 'start': 11382.076, 'duration': 2.081}, {'end': 11385.958, 'text': 'We see it finally gets us out.', 'start': 11384.517, 'duration': 1.441}, {'end': 11387.959, 'text': "So let's go ahead and make that screen bigger.", 'start': 11385.998, 'duration': 1.961}, {'end': 11395.282, 'text': 'What screen? As in the app, the app demoing.', 'start': 11391.18, 'duration': 4.102}, {'end': 11395.702, 'text': 'All right.', 'start': 11395.302, 'duration': 0.4}, {'end': 11399.273, 'text': "Let's go ahead and make that bigger.", 'start': 11397.932, 'duration': 1.341}, {'end': 11401.474, 'text': 'And we can see now, guys, there you go.', 'start': 11399.413, 'duration': 2.061}], 'summary': 'Using display flex, align item center and justify content space between for h4 resulted in successful application.', 'duration': 26.341, 'max_score': 11375.133, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY11375133.jpg'}, {'end': 11556.771, 'src': 'embed', 'start': 11523.808, 'weight': 0, 'content': [{'end': 11524.909, 'text': 'Boom Video row.', 'start': 11523.808, 'duration': 1.101}, {'end': 11526.675, 'text': 'And then we have it up here.', 'start': 11525.714, 'duration': 0.961}, {'end': 11529.956, 'text': 'So now inside of the video row component.', 'start': 11527.155, 'duration': 2.801}, {'end': 11536.039, 'text': "So this is again, the same situation guys, it's going to take the following props, right? So video row is going to take the phone.", 'start': 11529.976, 'duration': 6.063}, {'end': 11536.92, 'text': "It's going to take a views.", 'start': 11536.059, 'duration': 0.861}, {'end': 11538.361, 'text': "It's going to take subs.", 'start': 11536.94, 'duration': 1.421}, {'end': 11539.841, 'text': "It's going to take a description.", 'start': 11538.721, 'duration': 1.12}, {'end': 11542.943, 'text': "It's going to take a timestamp.", 'start': 11539.861, 'duration': 3.082}, {'end': 11546.005, 'text': "It's going to take a channel.", 'start': 11544.044, 'duration': 1.961}, {'end': 11547.625, 'text': "So let's go ahead and save this.", 'start': 11546.525, 'duration': 1.1}, {'end': 11548.286, 'text': 'So we get there.', 'start': 11547.685, 'duration': 0.601}, {'end': 11549.286, 'text': "It's going to take a channel.", 'start': 11548.346, 'duration': 0.94}, {'end': 11552.548, 'text': "It's going to take a title and an image.", 'start': 11549.306, 'duration': 3.242}, {'end': 11556.771, 'text': 'Sunny, I actually got a great idea because of CodeSmasher.', 'start': 11553.968, 'duration': 2.803}], 'summary': 'The video row component will take props including views, subs, description, timestamp, channel, title, and image.', 'duration': 32.963, 'max_score': 11523.808, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY11523808.jpg'}, {'end': 12712.371, 'src': 'embed', 'start': 12684.1, 'weight': 2, 'content': [{'end': 12691.603, 'text': 'So remember, if you change your app after this point, you have to do npm run build again to get the most up-to-date one inside of your build folder.', 'start': 12684.1, 'duration': 7.503}, {'end': 12695.165, 'text': "Then once that's done, it's as simple as doing Firebase deploy.", 'start': 12691.623, 'duration': 3.542}, {'end': 12702.062, 'text': 'before we do that, guys, like, if you guys have found this useful, firstly,', 'start': 12696.277, 'duration': 5.785}, {'end': 12706.366, 'text': "smash the thumbs up button and let us know in the comments right now if you're ready to deploy this app.", 'start': 12702.062, 'duration': 4.304}, {'end': 12712.371, 'text': "like, if you're ready to deploy this app, let us know right now, because we finally got to this point and we are super excited.", 'start': 12706.366, 'duration': 6.005}], 'summary': 'After making changes, run npm build and then deploy using firebase. ready to deploy?', 'duration': 28.271, 'max_score': 12684.1, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY12684100.jpg'}, {'end': 13001.415, 'src': 'embed', 'start': 12973.906, 'weight': 3, 'content': [{'end': 12976.908, 'text': 'Thank you guys so much for being here and enjoying this.', 'start': 12973.906, 'duration': 3.002}, {'end': 12984.172, 'text': "If you guys found this to be helpful, remember, guys, we're going live tomorrow for TikTok clone.", 'start': 12976.928, 'duration': 7.244}, {'end': 12985.672, 'text': 'at what is it?', 'start': 12984.172, 'duration': 1.5}, {'end': 12986.333, 'text': '10, 15 a.m..', 'start': 12986.113, 'duration': 0.22}, {'end': 12987.734, 'text': 'Pacific Los Angeles time.', 'start': 12986.373, 'duration': 1.361}, {'end': 12994.437, 'text': "So July 30th, Thursday, tomorrow, we're building the TikTok clone.", 'start': 12987.754, 'duration': 6.683}, {'end': 13001.415, 'text': "So if you guys are pumped, make sure, guys, here's what I wanna actually do, okay? Pull out your phones, please.", 'start': 12994.837, 'duration': 6.578}], 'summary': 'Going live tomorrow at 10:15 am to build a tiktok clone on july 30th.', 'duration': 27.509, 'max_score': 12973.906, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY12973906.jpg'}], 'start': 11306.361, 'title': 'Building app interfaces and video components', 'summary': 'Covers building an app interface using flexbox, creating a video component, styling and deploying a react app with 660,000 subscribers, and announcing an upcoming live build session for a tiktok clone on july 30th.', 'chapters': [{'end': 11690.911, 'start': 11306.361, 'title': 'Building app interface with flexbox', 'summary': 'Discusses building an app interface using flexbox, targeting specific elements, applying styling, and creating a video row component, with a suggestion to use media queries to handle resizing, and a plan to discuss bootstrap 5 in a live stream.', 'duration': 384.55, 'highlights': ['Creating a video row component with specific props such as views, subs, description, timestamp, channel, title, and image. The chapter outlines the creation of a video row component with specific props including 1.4 million views, subs, description, cozy are you, timestamp, channel title, and image.', 'Suggestion to use media queries to handle resizing for better user experience. The chapter suggests using media queries to handle resizing for better user experience, providing a solution for the resizing issue.', "Plan to discuss Bootstrap 5 in a live stream to cover what's going on with it. There is a plan to discuss Bootstrap 5 in a live stream to cover what's going on with it, with an invitation for the viewers to drop their comments below if they want to see it.", 'Discussion of applying styling to specific elements like paragraph, logo, and H4 using flexbox properties. The chapter discusses applying styling to specific elements like paragraph, logo, and H4 using flexbox properties, showcasing the use of flexbox in building the app interface.']}, {'end': 12123.976, 'start': 11691.091, 'title': 'Building a video component', 'summary': 'Covers the process of building a video component, including importing css, rendering images and text, and applying styling to achieve a specific layout and design.', 'duration': 432.885, 'highlights': ['The process of building a video component, including importing CSS, rendering images and text, and applying styling to achieve a specific layout and design.', 'Demonstration of using P tag to style individual parts of the text and applying span to class names for styling.', 'Applying CSS properties like display flex, object fit, width, height, margin, and font size to achieve the desired layout and design for the video component.']}, {'end': 12973.886, 'start': 12123.976, 'title': 'Building and deploying a react app', 'summary': 'Covers the process of styling and deploying a react app, including creating and styling subscriber count, deploying using firebase, and receiving positive feedback during a live session, with 660,000 subscribers and a lot of engagement.', 'duration': 849.91, 'highlights': ['The chapter covers the process of styling and deploying a React app It details the steps involved in styling and deploying a React app, including creating and styling subscriber count, deploying using Firebase, and receiving positive feedback during a live session.', 'Positive feedback during a live session, with 660,000 subscribers and a lot of engagement The session received positive engagement with 660,000 subscribers, and viewers actively participating in the live session, providing positive feedback.', 'Deploying using Firebase The process of deploying the React app using Firebase is explained, including initializing Firebase, configuring it as a single-page app, and deploying the app with positive viewer anticipation and engagement.', 'Creating and styling subscriber count The creation and styling of the subscriber count in the React app using span tags, class names, pixel padding, and RGB color are demonstrated, resulting in a visually appealing and YouTube-like subscriber count.']}, {'end': 13379.388, 'start': 12973.906, 'title': 'Tiktok clone live build tomorrow', 'summary': 'Highlights the upcoming live build session for a tiktok clone, scheduled for july 30th, and encourages viewers to set alarms and confirm attendance in the comments, expressing excitement for the challenging project and thanking the audience for their support.', 'duration': 405.482, 'highlights': ['The upcoming live build session for a TikTok clone is scheduled for July 30th, and viewers are encouraged to set alarms and confirm attendance in the comments. The speaker announces the live build session for a TikTok clone scheduled for July 30th and urges viewers to set alarms and express their attendance in the comments.', 'The speaker expresses excitement for the challenging project and thanks the audience for their support. The speaker expresses excitement for the challenging project of building a TikTok clone and expresses gratitude to the audience for their support and attendance.', 'Viewers are encouraged to set alarms and confirm attendance in the comments, with several individuals expressing their commitment to attend the session. The speaker encourages viewers to set alarms and confirm attendance in the comments, and several individuals express their commitment to attend the session, indicating strong engagement.']}], 'duration': 2073.027, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/NT299zIk2JY/pics/NT299zIk2JY11306361.jpg', 'highlights': ['Creating a video row component with specific props including 1.4 million views, subs, description, cozy are you, timestamp, channel title, and image.', 'The chapter discusses applying styling to specific elements like paragraph, logo, and H4 using flexbox properties, showcasing the use of flexbox in building the app interface.', 'The process of deploying the React app using Firebase is explained, including initializing Firebase, configuring it as a single-page app, and deploying the app with positive viewer anticipation and engagement.', 'The upcoming live build session for a TikTok clone is scheduled for July 30th, and viewers are encouraged to set alarms and confirm attendance in the comments.']}], 'highlights': ['The upcoming live build session for a TikTok clone is scheduled for July 30th, and viewers are encouraged to set alarms and confirm attendance in the comments.', 'The process of deploying the React app using Firebase is explained, including initializing Firebase, configuring it as a single-page app, and deploying the app with positive viewer anticipation and engagement.', 'Creating a video row component with specific props including 1.4 million views, subs, description, cozy are you, timestamp, channel title, and image.', 'The chapter discusses applying styling to specific elements like paragraph, logo, and H4 using flexbox properties, showcasing the use of flexbox in building the app interface.', "The ban of TikTok in India is discussed, with the speaker's analytics indicating a significant impact on viewership and engagement. The speaker's analytics show a significant impact on viewership, with United Kingdom and United States ranking higher than India, indicating a notable decrease in viewers from India."]}