title
🔴 Build Modern Cryptopunk Clone with React.js & Web 3.0
description
Wanna be part of the Discord Community? Register for the challenge 👉 https://www.cleverprogrammer.com/challenge?utm_source=youtube&utm_medium=yt-description&utm_campaign=challenge_dec_21&utm_content=11-dec-day-2-stream
Signup for thirdweb 👉 https://bit.ly/3EJLftx
📥 Download Assets: https://drive.google.com/drive/folders/1v6M1lPEpFTiNC8aK9CKsCO6gAKv_upWQ?usp=sharing
In today's build, you're gonna learn about
👉 How to use React JS to build the Frontend of a Web Application
👉 How to use thirdweb to build the backend needed for an Ethereum APP
👉 Hosting your Web 3.0 APP on the Internet using Vercel
and more...
Love your beautiful face 🔥
-Qazi
#web3 #frontend #webdeveloper Biz / Sponsorships 👉 https://www.cleverprogrammer.com/partnerships
detail
{'title': '🔴 Build Modern Cryptopunk Clone with React.js & Web 3.0', 'heatmap': [{'end': 6049.37, 'start': 5924.209, 'weight': 0.802}, {'end': 11849.201, 'start': 11739.824, 'weight': 1}], 'summary': "Tutorial covers creating a modern cryptopunk clone using react.js and web 3.0, deploying a marketplace, showcasing features like search bar and card display, deploying nfts with high engagement levels, building projects from scratch, setting up the rinkeby test network for ethereum, front-end styling, website header styling, web development elements, building and styling collection cards, creating punk list and collection card components, building 'main' component in javascript, updating active punk image, css, project progress, and career outcomes, encouraging bootcamp enrollment for a cohort starting on december 21st, and sharing a success story of a boot camp graduate landing a six-figure job.", 'chapters': [{'end': 74.511, 'segs': [{'end': 30.214, 'src': 'embed', 'start': 1.42, 'weight': 0, 'content': [{'end': 2.822, 'text': 'what is up youtube.', 'start': 1.42, 'duration': 1.402}, {'end': 5.805, 'text': 'welcome to day two of the challenge.', 'start': 2.822, 'duration': 2.983}, {'end': 15.394, 'text': "today we're going to be building a crypto punk clone, the modern version of it, and we're going to be doing this with react js and web 3.0.", 'start': 5.805, 'duration': 9.589}, {'end': 20.36, 'text': "so if you're ready to have your mind blown, you are absolutely in the right place.", 'start': 15.394, 'duration': 4.966}, {'end': 22.422, 'text': 'without any further ado, smash the like button.', 'start': 20.36, 'duration': 2.062}, {'end': 24.083, 'text': "let's just get right into it.", 'start': 22.422, 'duration': 1.661}, {'end': 30.214, 'text': "so guys, Today we're gonna be building a pretty freaking awesome project.", 'start': 24.083, 'duration': 6.131}], 'summary': 'Building a modern crypto punk clone using react js and web 3.0 in day two of the challenge.', 'duration': 28.794, 'max_score': 1.42, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ1420.jpg'}, {'end': 85.636, 'src': 'embed', 'start': 50.847, 'weight': 1, 'content': [{'end': 53.269, 'text': 'You have this amazing search bar at the top.', 'start': 50.847, 'duration': 2.422}, {'end': 56.068, 'text': 'Right, the header looks amazing.', 'start': 54.266, 'duration': 1.802}, {'end': 59.834, 'text': 'And then you can actually choose whichever CryptoPunk you want.', 'start': 56.549, 'duration': 3.285}, {'end': 60.915, 'text': 'And guess what, guys?', 'start': 59.914, 'duration': 1.001}, {'end': 66.062, 'text': 'These CryptoPunks are actually also published on OpenSea, right?', 'start': 61.556, 'duration': 4.506}, {'end': 71.749, 'text': "So they're already on OpenSea and you can see that we're actually pulling them from there.", 'start': 66.082, 'duration': 5.667}, {'end': 74.511, 'text': "You're gonna be deploying your own marketplace today.", 'start': 72.29, 'duration': 2.221}, {'end': 77.852, 'text': "You're gonna be deploying your own NFTs today, okay?", 'start': 74.531, 'duration': 3.321}, {'end': 85.636, 'text': "So if you're excited about deploying your own NFTs, having it on OpenSea and then using your React project to kind of put it all together,", 'start': 77.912, 'duration': 7.724}], 'summary': 'Developers will deploy their own nfts on opensea using react project.', 'duration': 34.789, 'max_score': 50.847, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ50847.jpg'}], 'start': 1.42, 'title': 'Building cryptopunk clone', 'summary': 'Involves creating a modern version of a crypto punk clone using react js and web 3.0, deploying a marketplace, and showcasing features such as a search bar, card display, and integration with opensea.', 'chapters': [{'end': 74.511, 'start': 1.42, 'title': 'Building cryptopunk clone with react.js and web 3.0', 'summary': 'Involves building a modern version of a crypto punk clone using react js and web 3.0, deploying a marketplace, and showcasing the features including a search bar, card display, and integration with opensea.', 'duration': 73.091, 'highlights': ['Building a modern crypto punk clone using react js and web 3.0, with the ability to deploy a marketplace.', 'Showcasing features such as a search bar, card display, and integration with OpenSea for CryptoPunks.']}], 'duration': 73.091, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ1420.jpg', 'highlights': ['Building a modern crypto punk clone using react js and web 3.0, with the ability to deploy a marketplace.', 'Showcasing features such as a search bar, card display, and integration with OpenSea for CryptoPunks.']}, {'end': 1491.451, 'segs': [{'end': 166.338, 'src': 'embed', 'start': 138.303, 'weight': 1, 'content': [{'end': 141.304, 'text': "But first, let's recap what went down on day one.", 'start': 138.303, 'duration': 3.001}, {'end': 145.867, 'text': 'We had 16,000 of you watch this on YouTube, which was absolutely amazing.', 'start': 141.625, 'duration': 4.242}, {'end': 151.33, 'text': 'We had over 650 people live, you guys, watching all at the same time.', 'start': 146.267, 'duration': 5.063}, {'end': 153.711, 'text': "You're like what developer world?", 'start': 151.35, 'duration': 2.361}, {'end': 155.012, 'text': 'do you know where you have?', 'start': 153.711, 'duration': 1.301}, {'end': 157.073, 'text': '600 people live watching this right?', 'start': 155.012, 'duration': 2.061}, {'end': 163.456, 'text': "I feel like we're doing better numbers than some of the biggest companies that I know, like Firebase and all of this stuff.", 'start': 157.873, 'duration': 5.583}, {'end': 164.797, 'text': 'And we have all these people live.', 'start': 163.516, 'duration': 1.281}, {'end': 166.338, 'text': 'So thank you guys so much.', 'start': 164.837, 'duration': 1.501}], 'summary': "Day one had 16,000 youtube views and 650 live viewers, surpassing some major companies' numbers.", 'duration': 28.035, 'max_score': 138.303, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ138303.jpg'}, {'end': 200.505, 'src': 'embed', 'start': 174.983, 'weight': 4, 'content': [{'end': 180.386, 'text': "We're going to be using the technology to build the projects and they have allowed this event to happen.", 'start': 174.983, 'duration': 5.403}, {'end': 185.969, 'text': "So I just want to take a second to thank them because that's, you know, they are what makes this type of event possible.", 'start': 180.806, 'duration': 5.163}, {'end': 194.862, 'text': "And again, we're gonna be using some of their technology to build out this event, right? That's what we're gonna be building our own NFT.", 'start': 187.624, 'duration': 7.238}, {'end': 197.343, 'text': 'Yeah Okay.', 'start': 196.043, 'duration': 1.3}, {'end': 200.505, 'text': 'I know a lot of you guys said you completed the homework.', 'start': 198.464, 'duration': 2.041}], 'summary': 'Using technology from a partner to build nft for an event.', 'duration': 25.522, 'max_score': 174.983, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ174983.jpg'}, {'end': 1090.067, 'src': 'embed', 'start': 1059.153, 'weight': 3, 'content': [{'end': 1066.598, 'text': 'And it would be competing with Ethereum and people would be able to buy it and get it and things like that.', 'start': 1059.153, 'duration': 7.445}, {'end': 1071.702, 'text': 'You could also build your own marketplace, which is like if you built your own OpenSea.', 'start': 1067.779, 'duration': 3.923}, {'end': 1074.244, 'text': "The one thing that we're gonna be looking at is NFTs.", 'start': 1072.242, 'duration': 2.002}, {'end': 1078.094, 'text': "Okay, we're gonna build our NFT Connect collection.", 'start': 1075.39, 'duration': 2.704}, {'end': 1080.799, 'text': 'So click this and just hit setup module.', 'start': 1078.114, 'duration': 2.685}, {'end': 1090.067, 'text': "All right, and while we're setting this up, All we're going to say here is again for me.", 'start': 1081.921, 'duration': 8.146}], 'summary': 'Competing with ethereum, building nft collection, and setting up marketplace.', 'duration': 30.914, 'max_score': 1059.153, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ1059153.jpg'}, {'end': 1157.65, 'src': 'embed', 'start': 1125.41, 'weight': 2, 'content': [{'end': 1132.815, 'text': "And I'll do 10% royalty, but that none of that matters here because it's all free and it's on a test network.", 'start': 1125.41, 'duration': 7.405}, {'end': 1135.817, 'text': "So now it's asking me, it's going to take some gas fees.", 'start': 1133.376, 'duration': 2.441}, {'end': 1136.578, 'text': "So I'll hit confirm.", 'start': 1135.837, 'duration': 0.741}, {'end': 1154.585, 'text': "you'll see that with third web, they make it so easy for you to actually just launch your own project and then to mint your own nfts.", 'start': 1146.992, 'duration': 7.593}, {'end': 1157.65, 'text': "it's and you can do that all point and click and super fast.", 'start': 1154.585, 'duration': 3.065}], 'summary': 'Platform offers 10% royalty, free test network, easy minting of nfts.', 'duration': 32.24, 'max_score': 1125.41, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ1125410.jpg'}, {'end': 1230.124, 'src': 'embed', 'start': 1201.124, 'weight': 0, 'content': [{'end': 1206.268, 'text': "bandana punk, okay? So it's gonna be this guy right here.", 'start': 1201.124, 'duration': 5.144}, {'end': 1218.116, 'text': "And for price, we'll give him a property, we'll give him a key price and the value we're gonna give it is gonna be like eight.", 'start': 1208.869, 'duration': 9.247}, {'end': 1221.018, 'text': 'okay?. This, in my mind, just represents like eight ETH.', 'start': 1218.116, 'duration': 2.902}, {'end': 1223.12, 'text': 'Okay, so hit mint NFT.', 'start': 1221.038, 'duration': 2.082}, {'end': 1225.881, 'text': 'This is gonna take a second.', 'start': 1224.941, 'duration': 0.94}, {'end': 1227.603, 'text': "It's also gonna charge you gas fees.", 'start': 1225.902, 'duration': 1.701}, {'end': 1230.124, 'text': 'So just hit confirm on everything that pops up.', 'start': 1227.663, 'duration': 2.461}], 'summary': 'Creating an nft representing 8 eth, with gas fees to consider.', 'duration': 29, 'max_score': 1201.124, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ1201124.jpg'}], 'start': 74.531, 'title': 'Deploying nfts and project development', 'summary': 'Covers deploying nfts using react and third web, emphasizing high engagement levels, a 3-day coding project, building projects from scratch, setting up rinkeby test network for free ethereum, and creating nfts on the test network, including the process of minting nfts and setting prices.', 'chapters': [{'end': 197.343, 'start': 74.531, 'title': 'Deploying your own nfts with react and third web', 'summary': 'Focuses on deploying nfts using react and third web, with a highlight on the high engagement levels and the use of technology to enable the event.', 'duration': 122.812, 'highlights': ['The high engagement levels of the event, with 16,000 viewers on YouTube and over 650 people watching live, showcase the enthusiasm and interest in deploying NFTs using React and Third Web.', 'The acknowledgment of the sponsor, Third Web, for making the event possible emphasizes the crucial role of technology in enabling the deployment of NFTs and the importance of their support in facilitating such events.', 'The emphasis on using Third Web technology to build the NFT project highlights the practical application and significance of this technology in the deployment process.']}, {'end': 397.826, 'start': 198.464, 'title': 'Coding project overview', 'summary': 'Introduces a 3-day coding project, with day 2 focusing on building a challenging project and day 3 on job preparation, while acknowledging potential challenges faced by participants and the expected drop in participant numbers.', 'duration': 199.362, 'highlights': ['The chapter introduces a 3-day coding project, with day 2 focusing on building a challenging project and day 3 on job preparation, while acknowledging potential challenges faced by participants and the expected drop in participant numbers.', 'The instructor acknowledges the difficulty of the project, anticipating a significant drop in participant numbers due to frustration and coding challenges.', 'The instructor emphasizes the importance of commitment and accountability from participants to see the project through, preparing them for the upcoming challenges.']}, {'end': 557.077, 'start': 400.347, 'title': 'Building project from scratch', 'summary': 'Emphasized the importance of watching and understanding the coding process, allowing individuals to work at their own pace, and to collaborate to complete the project, acknowledging that not everyone may keep up initially.', 'duration': 156.73, 'highlights': ['The chapter stressed the importance of watching and understanding the coding process, allowing individuals to work at their own pace, and collaborate to complete the project, acknowledging that not everyone may keep up initially.', 'The instructor encouraged participants to watch and understand the coding process, work at their own pace, and collaborate to complete the project, acknowledging that not everyone may keep up initially.', 'Participants were advised to watch and understand the coding process, work at their own pace, and collaborate to complete the project, acknowledging that not everyone may keep up initially.']}, {'end': 1080.799, 'start': 557.457, 'title': 'Setting up rinkeby test network for free ethereum', 'summary': 'Covers the process of setting up a rinkeby test network on metamask, obtaining free ethereum, and creating a new project, with a focus on utilizing nfts and creating a new module.', 'duration': 523.342, 'highlights': ['The process of setting up the Rinkeby test network on MetaMask is explained, emphasizing the importance of choosing the correct network for the project. Emphasizes the importance of selecting the Rinkeby test network on MetaMask and the consequences of choosing the wrong network. Provides step-by-step guidance on accessing and toggling the show test networks option.', 'Obtaining free Ethereum from the test network is discussed, highlighting the process of accessing a link to receive free Ethereum and the reassurance that it involves fake Ethereum, ensuring no cost to the participants. Discusses the process of accessing a link to receive free Ethereum from the test network, reassuring participants that it involves fake Ethereum and will not incur any costs. Mentions sharing the link on Zoom and YouTube for wider participation.', 'Creating a new project and the process of obtaining free Ethereum for the project is detailed, highlighting the steps of copying the wallet address, pasting it to receive free Ethereum, and the subsequent confirmation of successful transactions. Details the steps of creating a new project, copying the wallet address, pasting it to receive free Ethereum, and the confirmation of successful transactions. Mentions the need for Ethereum to pay gas fees when minting projects.', 'The creation of a new module for NFTs within the project is explained, emphasizing the opportunity to create custom cryptocurrencies and marketplaces, and the focus on building an NFT collection. Explains the process of creating a new module within the project, highlighting the options to create custom cryptocurrencies, marketplaces, and specifically focusing on building an NFT collection. Mentions the ability to compete with Ethereum and the comparison to OpenSea.']}, {'end': 1491.451, 'start': 1081.921, 'title': 'Creating nfts on test network', 'summary': 'Discusses creating nfts on a test network using third web, including the process of minting nfts, setting prices, and the immutability of blockchain, culminating in the minting of multiple nfts with different prices and traits.', 'duration': 409.53, 'highlights': ['The process of minting NFTs on a test network using third web is explained, showcasing the ease and speed of launching a project and minting NFTs with a point-and-click interface. Ease of launching a project and minting NFTs with a point-and-click interface', 'The chapter outlines the process of minting multiple NFTs with different traits and prices, such as bandana punk, cyberpunk, cigar hat punk, and Captain America punk, with prices varying from 8 to 37 ETH. Minting multiple NFTs with prices varying from 8 to 37 ETH', 'The immutability of the blockchain is emphasized, highlighting that once an NFT is minted, it cannot be edited or deleted. Emphasizing the immutability of the blockchain for minted NFTs']}], 'duration': 1416.92, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ74531.jpg', 'highlights': ['The process of minting multiple NFTs with different traits and prices, such as bandana punk, cyberpunk, cigar hat punk, and Captain America punk, with prices varying from 8 to 37 ETH', 'The high engagement levels of the event, with 16,000 viewers on YouTube and over 650 people watching live, showcase the enthusiasm and interest in deploying NFTs using React and Third Web', 'The process of minting NFTs on a test network using third web is explained, showcasing the ease and speed of launching a project and minting NFTs with a point-and-click interface', 'The creation of a new module for NFTs within the project is explained, emphasizing the opportunity to create custom cryptocurrencies and marketplaces, and the focus on building an NFT collection', 'The acknowledgment of the sponsor, Third Web, for making the event possible emphasizes the crucial role of technology in enabling the deployment of NFTs and the importance of their support in facilitating such events']}, {'end': 2574.162, 'segs': [{'end': 1520.625, 'src': 'embed', 'start': 1492.092, 'weight': 0, 'content': [{'end': 1495.292, 'text': "Wow, we're at 168 people on Zoom and 315.", 'start': 1492.092, 'duration': 3.2}, {'end': 1504.014, 'text': "We're starting to see some droppers on YouTube because YouTube is gonna be a more casual, right? For most people, it's a more casual platform.", 'start': 1495.292, 'duration': 8.722}, {'end': 1505.694, 'text': "So we're gonna see some droppers.", 'start': 1504.034, 'duration': 1.66}, {'end': 1510.315, 'text': "but I'm really curious to see some droppers and when that starts actually on Zoom, because I know it's gonna start.", 'start': 1505.694, 'duration': 4.621}, {'end': 1514.038, 'text': 'I predict it starts usually when you start coding.', 'start': 1511.856, 'duration': 2.182}, {'end': 1520.625, 'text': "So we're about to start coding probably in like a minute or two.", 'start': 1516.38, 'duration': 4.245}], 'summary': '168 people on zoom, 315 on youtube. expect droppers during coding.', 'duration': 28.533, 'max_score': 1492.092, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ1492092.jpg'}, {'end': 1593.116, 'src': 'embed', 'start': 1563.567, 'weight': 1, 'content': [{'end': 1565.749, 'text': 'We have our very first NFT project.', 'start': 1563.567, 'duration': 2.182}, {'end': 1567.411, 'text': 'We have it minted, ready to go.', 'start': 1565.849, 'duration': 1.562}, {'end': 1575.137, 'text': 'If you wanted, you could actually go and tell your family members to buy it or friends.', 'start': 1568.171, 'duration': 6.966}, {'end': 1577.339, 'text': 'So, all right, so we got all of our punks.', 'start': 1575.217, 'duration': 2.122}, {'end': 1579.261, 'text': 'This is all I wanted for now.', 'start': 1577.719, 'duration': 1.542}, {'end': 1581.222, 'text': "It's six, starts from zero, that's why.", 'start': 1579.281, 'duration': 1.941}, {'end': 1588.068, 'text': "And you can see they're all owned by this wallet address, which in this case is me.", 'start': 1582.543, 'duration': 5.525}, {'end': 1593.116, 'text': 'Okay So I am good on this side.', 'start': 1589.815, 'duration': 3.301}], 'summary': 'First nft project minted, ready for sale, owned by wallet address.', 'duration': 29.549, 'max_score': 1563.567, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ1563567.jpg'}, {'end': 1654.121, 'src': 'embed', 'start': 1627.965, 'weight': 2, 'content': [{'end': 1631.986, 'text': "You guys don't need to go into any folders if you don't want to, or you don't know how to.", 'start': 1627.965, 'duration': 4.021}, {'end': 1635.227, 'text': 'You can just do npx create react app, no matter where you are.', 'start': 1632.306, 'duration': 2.921}, {'end': 1639.316, 'text': "All right, and I'm just gonna call this the same thing as the folder.", 'start': 1636.075, 'duration': 3.241}, {'end': 1643.217, 'text': 'I will just say React NFT challenge.', 'start': 1639.336, 'duration': 3.881}, {'end': 1644.978, 'text': "I'll just hit enter.", 'start': 1644.198, 'duration': 0.78}, {'end': 1652.101, 'text': "And so now what's happening is I'm getting my React project started.", 'start': 1648.459, 'duration': 3.642}, {'end': 1654.121, 'text': "It's installing my React project.", 'start': 1652.521, 'duration': 1.6}], 'summary': 'Creating react nft challenge project using npx create react app.', 'duration': 26.156, 'max_score': 1627.965, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ1627965.jpg'}, {'end': 1933.394, 'src': 'embed', 'start': 1904.399, 'weight': 3, 'content': [{'end': 1905.42, 'text': "I'll call it components.", 'start': 1904.399, 'duration': 1.021}, {'end': 1910.522, 'text': "And then inside of components, I'll actually create a new file and it'll be called header.js.", 'start': 1906.12, 'duration': 4.402}, {'end': 1919.389, 'text': "Here, I can use a snippet, which is R-A-F-C-E, and hit tab, and it'll auto-complete it.", 'start': 1912.827, 'duration': 6.562}, {'end': 1927.952, 'text': "If you don't have this snippet, you could do Command-Shift-X, go to your extensions and you could get our React snippets.", 'start': 1920.389, 'duration': 7.563}, {'end': 1929.892, 'text': "I believe it's called something like that", 'start': 1927.952, 'duration': 1.94}, {'end': 1933.394, 'text': 'Yeah, ES7 snippets, and just get this extension.', 'start': 1930.473, 'duration': 2.921}], 'summary': 'Creating a new file called header.js using a react snippet for auto-completion.', 'duration': 28.995, 'max_score': 1904.399, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ1904399.jpg'}, {'end': 1991.264, 'src': 'embed', 'start': 1964.049, 'weight': 4, 'content': [{'end': 1968.292, 'text': 'Now, what we need to do is you can just remove this character R here, write it again.', 'start': 1964.049, 'duration': 4.243}, {'end': 1971.014, 'text': 'It should ask you for this auto import, hit enter.', 'start': 1968.312, 'duration': 2.702}, {'end': 1974.217, 'text': "And now you've imported your header.", 'start': 1971.755, 'duration': 2.462}, {'end': 1982.003, 'text': 'So basically what we have done is we created our header component, right? And then we took it and we moved it to app.js.', 'start': 1974.497, 'duration': 7.506}, {'end': 1984.683, 'text': 'I love the speed.', 'start': 1983.763, 'duration': 0.92}, {'end': 1985.463, 'text': 'Okay, nice.', 'start': 1984.943, 'duration': 0.52}, {'end': 1986.904, 'text': 'Happy to hear that.', 'start': 1986.203, 'duration': 0.701}, {'end': 1989.444, 'text': 'We got our first droppers.', 'start': 1987.724, 'duration': 1.72}, {'end': 1991.264, 'text': 'Guys, everybody, give it up.', 'start': 1989.844, 'duration': 1.42}], 'summary': 'Created and imported header component to app.js. first droppers achieved.', 'duration': 27.215, 'max_score': 1964.049, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ1964049.jpg'}, {'end': 2043.39, 'src': 'embed', 'start': 2013.439, 'weight': 5, 'content': [{'end': 2017.341, 'text': "There's some weird margins around that I don't like, and we don't really need them.", 'start': 2013.439, 'duration': 3.902}, {'end': 2025.026, 'text': "So I'm gonna go to my index.css and in my index.css all the way at the top,", 'start': 2017.401, 'duration': 7.625}, {'end': 2031.129, 'text': 'all I wanna do is I just wanna say star like grab everything and I wanna go margin zero and I wanna go padding zero.', 'start': 2025.026, 'duration': 6.103}, {'end': 2037.733, 'text': "And now all those like weird margins are gone, because we don't need them, right? So gone.", 'start': 2031.71, 'duration': 6.023}, {'end': 2043.39, 'text': 'The next thing we need to do is change the background color right?', 'start': 2039.386, 'duration': 4.004}], 'summary': 'Remove unnecessary margins by setting margin and padding to zero in index.css.', 'duration': 29.951, 'max_score': 2013.439, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ2013439.jpg'}, {'end': 2132.112, 'src': 'embed', 'start': 2095.829, 'weight': 6, 'content': [{'end': 2100.612, 'text': 'The reason for this is so we can now select this app and basically style it right?', 'start': 2095.829, 'duration': 4.783}, {'end': 2106.557, 'text': "So let's go back to our app.css, and we're gonna start styling this.", 'start': 2101.113, 'duration': 5.444}, {'end': 2109.459, 'text': "Okay, so we have text align center, but we don't need that.", 'start': 2106.577, 'duration': 2.882}, {'end': 2110.399, 'text': "So let's remove that.", 'start': 2109.479, 'duration': 0.92}, {'end': 2112.08, 'text': 'All right.', 'start': 2111.74, 'duration': 0.34}, {'end': 2117.064, 'text': "And I'm gonna say background color and we'll give it black.", 'start': 2112.561, 'duration': 4.503}, {'end': 2123.985, 'text': "Perfect Coding is what I'm here for.", 'start': 2119.517, 'duration': 4.468}, {'end': 2124.707, 'text': 'This is dope.', 'start': 2124.025, 'duration': 0.682}, {'end': 2125.468, 'text': 'Okay, beautiful.', 'start': 2124.827, 'duration': 0.641}, {'end': 2132.112, 'text': 'Yeah All right.', 'start': 2131.178, 'duration': 0.934}], 'summary': 'Styling app.css with background color black for alignment and aesthetics.', 'duration': 36.283, 'max_score': 2095.829, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ2095829.jpg'}, {'end': 2253.559, 'src': 'embed', 'start': 2214.998, 'weight': 7, 'content': [{'end': 2223.509, 'text': "Can you guess? We'll call it header, okay? And now David, nice.", 'start': 2214.998, 'duration': 8.511}, {'end': 2231.498, 'text': "And now we're gonna basically go inside and what we're gonna do is we're gonna create a new file and we'll call this header.css.", 'start': 2224.17, 'duration': 7.328}, {'end': 2234.561, 'text': "Okay Let's go header.css.", 'start': 2232.098, 'duration': 2.463}, {'end': 2241.709, 'text': "And in here, what I wanna say is let's grab our header.", 'start': 2235.762, 'duration': 5.947}, {'end': 2248.997, 'text': "And what we'll do is we'll give it a color white.", 'start': 2245.695, 'duration': 3.302}, {'end': 2250.777, 'text': "Let's go white like this.", 'start': 2249.677, 'duration': 1.1}, {'end': 2253.559, 'text': 'All right.', 'start': 2253.199, 'duration': 0.36}], 'summary': 'Creating header.css file and setting header color to white.', 'duration': 38.561, 'max_score': 2214.998, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ2214998.jpg'}, {'end': 2499.519, 'src': 'embed', 'start': 2460.711, 'weight': 8, 'content': [{'end': 2462.291, 'text': "And we're gonna walk you through how to do this.", 'start': 2460.711, 'duration': 1.58}, {'end': 2466.182, 'text': "Okay, so it goes, I don't know the Punk logo and what that is.", 'start': 2463.28, 'duration': 2.902}, {'end': 2467.522, 'text': "Well, that's not a problem.", 'start': 2466.662, 'duration': 0.86}, {'end': 2471.385, 'text': "We're simply just actually gonna import it.", 'start': 2467.823, 'duration': 3.562}, {'end': 2472.285, 'text': 'All right.', 'start': 2471.865, 'duration': 0.42}, {'end': 2485.432, 'text': "so what I'm gonna do is I'll say import Punk logo from and we'll go into our assets, go into our header folder and it's actually right here.", 'start': 2472.285, 'duration': 13.147}, {'end': 2486.953, 'text': 'This is the logo that we need.', 'start': 2485.553, 'duration': 1.4}, {'end': 2487.734, 'text': "It's right there.", 'start': 2487.013, 'duration': 0.721}, {'end': 2499.519, 'text': "So now I'll say crypto punk-logo.png.", 'start': 2489.435, 'duration': 10.084}], 'summary': 'Import the punk logo from assets/header folder as crypto punk-logo.png.', 'duration': 38.808, 'max_score': 2460.711, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ2460711.jpg'}], 'start': 1492.092, 'title': 'Nft project setup, react coding, and front-end styling', 'summary': 'Covers setting up an nft project with 168 zoom participants and 315 youtube viewers, minting the first nft project, starting a react project, creating a header component in react, and front-end styling techniques including margin and padding adjustments, background color changes, header and logo styling, and asset imports.', 'chapters': [{'end': 1855.681, 'start': 1492.092, 'title': 'Nft project setup and react coding', 'summary': 'Discusses setting up an nft project with 168 people on zoom and 315 on youtube, creating and minting the first nft project, and starting a react project for coding.', 'duration': 363.589, 'highlights': ['Setting up NFT project with 168 people on Zoom and 315 on YouTube The chapter started with 168 people on Zoom and 315 on YouTube, indicating the interest and engagement of the audience in the NFT project setup.', 'Creating and minting the first NFT project The speaker successfully created and minted the first NFT project, expressing the milestone achievement of the project setup.', 'Starting a React project for coding The chapter proceeded with starting a React project for coding, demonstrating the practical implementation of the NFT project setup.']}, {'end': 2012.348, 'start': 1857.168, 'title': 'Creating header component in react', 'summary': 'Involves creating a header component called header.js and importing it into app.js, with the aim to cover all the details in one day.', 'duration': 155.18, 'highlights': ['Creating a new file called header.js inside the components folder and using a snippet to auto-complete the code. 1 new file created, snippet used for auto-completion', 'Importing the header component into app.js and celebrating the successful creation of the first component. Successful import of the header component', 'Emphasizing the need to keep up the pace to cover all details in one day and expressing satisfaction with progress. Urgency to cover all details in one day, satisfaction with progress']}, {'end': 2574.162, 'start': 2013.439, 'title': 'Front-end styling tutorial', 'summary': 'Covers front-end styling techniques, including setting margins and padding to zero, changing background color, styling header and logo, and importing assets for a project.', 'duration': 560.723, 'highlights': ['Setting margins and padding to zero in index.css to remove unnecessary margins In index.css, setting star selector to margin zero and padding zero removes unnecessary margins, optimizing the layout.', 'Changing background color to black in app.css and adding padding and other styling properties In app.css, changing the background color to black, adding padding, setting minimum height and maximum width, and refreshing the page to view the changes.', 'Styling the header by wrapping it in a div, creating a header.css file, and setting the text color to white Wrapping the header in a div, creating a separate header.css file, setting the text color to white for better visibility, and importing the header to display the changes.', 'Importing and displaying the logo by creating an assets folder and importing the logo image Creating an assets folder, importing the logo image, and ensuring the correct display of the logo by importing it from the assets folder.']}], 'duration': 1082.07, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ1492092.jpg', 'highlights': ['Setting up NFT project with 168 people on Zoom and 315 on YouTube', 'Creating and minting the first NFT project', 'Starting a React project for coding', 'Creating a new file called header.js inside the components folder and using a snippet to auto-complete the code', 'Importing the header component into app.js and celebrating the successful creation of the first component', 'Setting margins and padding to zero in index.css to remove unnecessary margins', 'Changing background color to black in app.css and adding padding and other styling properties', 'Styling the header by wrapping it in a div, creating a header.css file, and setting the text color to white', 'Importing and displaying the logo by creating an assets folder and importing the logo image']}, {'end': 3778.05, 'segs': [{'end': 2602.298, 'src': 'embed', 'start': 2574.602, 'weight': 0, 'content': [{'end': 2579.605, 'text': "Now we do need to change its size because I think it's still a little bit big.", 'start': 2574.602, 'duration': 5.003}, {'end': 2584.167, 'text': 'So I do want it to kind of become smaller now.', 'start': 2580.125, 'duration': 4.042}, {'end': 2591.091, 'text': "So let's go inside of our header and I'm gonna just say logo container.", 'start': 2584.988, 'duration': 6.103}, {'end': 2600.658, 'text': "or actually I'm just going to say punk logo and we'll make it it's with 200 pixels.", 'start': 2593.314, 'duration': 7.344}, {'end': 2602.298, 'text': 'All right.', 'start': 2602.018, 'duration': 0.28}], 'summary': 'Adjusting the size of the logo container to 200 pixels.', 'duration': 27.696, 'max_score': 2574.602, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ2574602.jpg'}, {'end': 2700.531, 'src': 'embed', 'start': 2672.513, 'weight': 2, 'content': [{'end': 2674.534, 'text': "But if you just get certain parts of it right, that's great.", 'start': 2672.513, 'duration': 2.021}, {'end': 2677.376, 'text': 'So yeah, search container is great, search bar is great.', 'start': 2675.034, 'duration': 2.342}, {'end': 2678.736, 'text': "I'm just gonna call it search bar.", 'start': 2677.476, 'duration': 1.26}, {'end': 2684.26, 'text': 'So if you got any of those great job you did fantastic, okay?', 'start': 2678.877, 'duration': 5.383}, {'end': 2692.665, 'text': "And then, inside of it, I'm gonna create another div and this div is gonna be there to hold this icon, okay?", 'start': 2685.241, 'duration': 7.424}, {'end': 2698.849, 'text': 'So what should I name this? Search icon container.', 'start': 2693.446, 'duration': 5.403}, {'end': 2700.531, 'text': 'okay?. Hopefully you guys were on the right track.', 'start': 2698.849, 'duration': 1.682}], 'summary': 'Creating a search bar and icon container in the web development tutorial.', 'duration': 28.018, 'max_score': 2672.513, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ2672513.jpg'}, {'end': 3304.094, 'src': 'embed', 'start': 3267.701, 'weight': 3, 'content': [{'end': 3270.401, 'text': "All right, it's these three guys right here.", 'start': 3267.701, 'duration': 2.7}, {'end': 3273.782, 'text': 'So I just added them in, this is what they look like.', 'start': 3270.821, 'duration': 2.961}, {'end': 3283.25, 'text': "All right, does anybody have any idea how we can take them from a column and put them in a row? Let's go back to header CSS.", 'start': 3274.548, 'duration': 8.702}, {'end': 3287.391, 'text': 'Yes, display flex, great work guys.', 'start': 3284.61, 'duration': 2.781}, {'end': 3291.791, 'text': "So we're gonna go dot header items, right? And I'll go display flex.", 'start': 3287.431, 'duration': 4.36}, {'end': 3299.413, 'text': 'Okay, display flex.', 'start': 3296.592, 'duration': 2.821}, {'end': 3304.094, 'text': "And let's refresh, there we go.", 'start': 3302.234, 'duration': 1.86}], 'summary': 'Three guys added to column, converted to row using display flex.', 'duration': 36.393, 'max_score': 3267.701, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ3267701.jpg'}, {'end': 3402.747, 'src': 'embed', 'start': 3373.26, 'weight': 4, 'content': [{'end': 3377.422, 'text': 'All right, so we just grabbed these P tags and we said, hey, in between all of them, add some margin.', 'start': 3373.26, 'duration': 4.162}, {'end': 3380.344, 'text': 'Okay, so that was a simple way of doing it.', 'start': 3377.922, 'duration': 2.422}, {'end': 3383.7, 'text': 'Gave it some nice spacing.', 'start': 3382.54, 'duration': 1.16}, {'end': 3385.841, 'text': 'I know, tricky question.', 'start': 3384.521, 'duration': 1.32}, {'end': 3386.641, 'text': 'We got you guys.', 'start': 3385.941, 'duration': 0.7}, {'end': 3389.982, 'text': "So with that said, we're done with header items.", 'start': 3387.682, 'duration': 2.3}, {'end': 3393.584, 'text': "Guys, we're flying through this, right? Before you even realize we're done.", 'start': 3390.062, 'duration': 3.522}, {'end': 3397.965, 'text': "Now the next things that we're gonna build are gonna be called header actions.", 'start': 3394.144, 'duration': 3.821}, {'end': 3402.747, 'text': "So these guys right here, we're gonna call it header actions.", 'start': 3398.565, 'duration': 4.182}], 'summary': 'Using p tags, added margin for spacing between them. moving on to building header actions.', 'duration': 29.487, 'max_score': 3373.26, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ3373260.jpg'}, {'end': 3607.417, 'src': 'embed', 'start': 3577.932, 'weight': 5, 'content': [{'end': 3578.972, 'text': "So let's get to work on it.", 'start': 3577.932, 'duration': 1.04}, {'end': 3583.793, 'text': 'And the color too, so somebody caught that.', 'start': 3581.553, 'duration': 2.24}, {'end': 3584.733, 'text': 'Good job on that.', 'start': 3583.873, 'duration': 0.86}, {'end': 3587.454, 'text': "All right, so let's go ahead and style this.", 'start': 3585.713, 'duration': 1.741}, {'end': 3589.694, 'text': "All right, so let's go to header CSS.", 'start': 3588.094, 'duration': 1.6}, {'end': 3596.555, 'text': "And here's how we're gonna do this, right? So header items, we did it.", 'start': 3591.834, 'duration': 4.721}, {'end': 3599.036, 'text': 'Now we need to style our header actions.', 'start': 3596.895, 'duration': 2.141}, {'end': 3601.356, 'text': "So let's go ahead and let's do header actions.", 'start': 3599.296, 'duration': 2.06}, {'end': 3603.996, 'text': "And we'll say display flex.", 'start': 3602.096, 'duration': 1.9}, {'end': 3607.417, 'text': "All right, and I'll give it a line item center.", 'start': 3605.117, 'duration': 2.3}], 'summary': 'Styling header with css, applying flex and centering', 'duration': 29.485, 'max_score': 3577.932, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ3577932.jpg'}], 'start': 2574.602, 'title': 'Website header styling', 'summary': 'Involves adjusting logo size to 200 pixels, adding a search bar with search icon, and styling the website header using flexbox with modifications such as display flex, margin adjustments, and css styling for header actions and theme switch container.', 'chapters': [{'end': 2626.766, 'start': 2574.602, 'title': 'Adjusting size of logo', 'summary': 'Involves adjusting the size of the logo to become smaller by setting its width to 200 pixels in the header, resulting in a successful reduction in size after refreshing the page.', 'duration': 52.164, 'highlights': ['Setting the width of the logo to 200 pixels in the header resulted in a successful reduction in size after refreshing the page.', 'The process involved selecting the logo container and making it smaller by specifying its width as 200 pixels.']}, {'end': 2837.616, 'start': 2626.786, 'title': 'Adding search bar in header', 'summary': 'Covers the process of adding a search bar in the header, including creating the search container, search icon container, importing the search icon, and adding an input bar with a placeholder.', 'duration': 210.83, 'highlights': ['The chapter emphasizes the importance of adding a search bar in the header and outlines the step-by-step process of creating the search container, search icon container, importing the search icon, and adding an input bar with a placeholder.', 'The instructor demonstrates the process of adding a search icon by creating a div to hold the icon and importing the search icon with a relative path.', 'The chapter discusses the naming conventions for the divs and classes involved in creating the search bar, emphasizing the importance of accurately naming each element for clarity and organization.', "The instructor addresses a student's question about destructuring, clarifying that the current process does not involve destructuring but rather using a variable in the JavaScript code."]}, {'end': 3266.46, 'start': 2838.376, 'title': 'Styling website header with flexbox', 'summary': 'Demonstrates the process of styling a website header using flexbox, including making it display flex, aligning items, setting margins, adding background color and rounded corners, and modifying the search input styling by removing background color and border, setting width to 100%, removing outline, changing text color, and setting font size to 16.', 'duration': 428.084, 'highlights': ['The chapter demonstrates the process of styling a website header using Flexbox. The transcript extensively covers the steps involved in styling a website header using Flexbox.', 'Modifying the search input styling by removing background color and border, setting width to 100%, removing outline, changing text color, and setting font size to 16. The speaker explains the detailed process of modifying the search input styling by removing background color, border, setting width to 100%, removing outline, changing text color, and setting font size to 16.', 'Making it display flex, aligning items, setting margins, adding background color, and rounded corners to the header. The speaker provides a detailed explanation of making the header display flex, aligning items, setting margins, adding background color, and rounded corners to the header.']}, {'end': 3778.05, 'start': 3267.701, 'title': 'Css header styling', 'summary': 'Covers the process of converting items from a column to a row using css display flex, addressing the spacing issue through margins, and styling the header actions and theme switch container by using flexbox, background color, border radius, and padding.', 'duration': 510.349, 'highlights': ['The chapter covers the process of converting items from a column to a row using CSS display flex. The instructor demonstrates using CSS display flex to convert items from a column to a row, achieving the desired layout.', 'Addressing the spacing issue through margins. The instructor explains a hacky way of adding margins between P tags to address the spacing issue, providing a simple solution for achieving the desired spacing.', 'Styling the header actions and theme switch container using flexbox, background color, border radius, and padding. The instructor walks through the process of styling the header actions and theme switch container using flexbox for layout, setting background color, applying border radius to create a circular shape, and adding padding for adjusting spacing.']}], 'duration': 1203.448, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ2574602.jpg', 'highlights': ['The process involved selecting the logo container and making it smaller by specifying its width as 200 pixels.', 'Setting the width of the logo to 200 pixels in the header resulted in a successful reduction in size after refreshing the page.', 'The chapter emphasizes the importance of adding a search bar in the header and outlines the step-by-step process of creating the search container, search icon container, importing the search icon, and adding an input bar with a placeholder.', 'The chapter covers the process of converting items from a column to a row using CSS display flex.', 'Addressing the spacing issue through margins. The instructor explains a hacky way of adding margins between P tags to address the spacing issue, providing a simple solution for achieving the desired spacing.', 'Styling the header actions and theme switch container using flexbox, background color, border radius, and padding.']}, {'end': 4777.716, 'segs': [{'end': 3807.04, 'src': 'embed', 'start': 3778.11, 'weight': 1, 'content': [{'end': 3782.532, 'text': "That's not what it is, okay? Just wanna put that out there for everybody.", 'start': 3778.11, 'duration': 4.422}, {'end': 3785.913, 'text': 'Okay, cool.', 'start': 3784.952, 'duration': 0.961}, {'end': 3788.676, 'text': "So we got the padding, that's good.", 'start': 3786.754, 'duration': 1.922}, {'end': 3791.8, 'text': 'Now we need to centralize everything.', 'start': 3789.838, 'duration': 1.962}, {'end': 3794.403, 'text': "So we're gonna go justify content and I'm gonna center it.", 'start': 3791.84, 'duration': 2.563}, {'end': 3796.746, 'text': "Let's go align items and center it.", 'start': 3794.824, 'duration': 1.922}, {'end': 3801.732, 'text': 'Align items vertically centers things, justify content horizontally centers things.', 'start': 3797.247, 'duration': 4.485}, {'end': 3807.04, 'text': 'The other thing I want to say is object fit contain.', 'start': 3803.396, 'duration': 3.644}], 'summary': 'Adjusting padding, justifying and aligning content, and using object fit contain for web design.', 'duration': 28.93, 'max_score': 3778.11, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ3778110.jpg'}, {'end': 3890.378, 'src': 'embed', 'start': 3862.607, 'weight': 0, 'content': [{'end': 3865.008, 'text': 'Michael Connell, I wanna highlight this comment.', 'start': 3862.607, 'duration': 2.401}, {'end': 3865.909, 'text': 'What a champ.', 'start': 3865.108, 'duration': 0.801}, {'end': 3871.011, 'text': 'He says, I got lost in the very, very beginning of using Visual Studio Code.', 'start': 3866.629, 'duration': 4.382}, {'end': 3876.415, 'text': 'If you Zoom people want to see it too, I guess I could do this.', 'start': 3873.914, 'duration': 2.501}, {'end': 3883.236, 'text': 'You Zoom people, can you guys see the comment now or no? Yeah, you guys can? Okay.', 'start': 3877.535, 'duration': 5.701}, {'end': 3889.058, 'text': "He says, I got lost in the very, very beginning, went back and couldn't figure it out, went back again, and I think I figured it out.", 'start': 3883.776, 'duration': 5.282}, {'end': 3890.378, 'text': "Now I'm only 10 minutes behind.", 'start': 3889.118, 'duration': 1.26}], 'summary': 'Michael connell got lost in the beginning of using visual studio code, but managed to figure it out and is now only 10 minutes behind.', 'duration': 27.771, 'max_score': 3862.607, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ3862607.jpg'}, {'end': 4060.631, 'src': 'embed', 'start': 4032.843, 'weight': 2, 'content': [{'end': 4035.565, 'text': 'You guys see this button showing up here? It says get in.', 'start': 4032.843, 'duration': 2.722}, {'end': 4041.496, 'text': "Okay, so right now it's just a div with some text in it.", 'start': 4038.014, 'duration': 3.482}, {'end': 4045.7, 'text': "So we'll make it look like a button and do things like a button.", 'start': 4041.616, 'duration': 4.084}, {'end': 4046.941, 'text': "Okay, so let's go ahead and do that.", 'start': 4045.74, 'duration': 1.201}, {'end': 4049.503, 'text': "Let's go to our header.css again.", 'start': 4047.421, 'duration': 2.082}, {'end': 4052.505, 'text': "And we're going to get to styling here.", 'start': 4050.623, 'duration': 1.882}, {'end': 4055.027, 'text': "And I'm going to say .login button.", 'start': 4052.605, 'duration': 2.422}, {'end': 4060.631, 'text': "And we'll grab the background and we'll give it a gradient.", 'start': 4056.788, 'duration': 3.843}], 'summary': 'Transforming a div into a button with gradient styling in header.css.', 'duration': 27.788, 'max_score': 4032.843, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ4032843.jpg'}, {'end': 4118.474, 'src': 'embed', 'start': 4094.434, 'weight': 3, 'content': [{'end': 4100.759, 'text': "So why I'm constantly asking you guys these questions is I'm trying to engage your brain even if you're not coding.", 'start': 4094.434, 'duration': 6.325}, {'end': 4104.841, 'text': "If you just keep answering these questions, it'll be like you're pretty much coding.", 'start': 4101.639, 'duration': 3.202}, {'end': 4111.107, 'text': "And the more pattern recognition I can drill into your freaking heads, you're gonna become better developers.", 'start': 4105.301, 'duration': 5.806}, {'end': 4114.43, 'text': "Because a lot of this is not intelligence, it's pattern recognition.", 'start': 4111.127, 'duration': 3.303}, {'end': 4118.474, 'text': "So a lot of people are answering this aren't because they're solving this.", 'start': 4114.97, 'duration': 3.504}], 'summary': 'Engage brain with pattern recognition for better coding.', 'duration': 24.04, 'max_score': 4094.434, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ4094434.jpg'}, {'end': 4395.594, 'src': 'embed', 'start': 4367.589, 'weight': 5, 'content': [{'end': 4372.494, 'text': "So it's gonna be a punk list that we're gonna be working on soon enough.", 'start': 4367.589, 'duration': 4.905}, {'end': 4380.327, 'text': 'Now, punk list, right, is the big thing that contains everything.', 'start': 4373.915, 'duration': 6.412}, {'end': 4388.13, 'text': "But inside of it, there's each thing that's gonna be its own component, okay? So this is a big component right here.", 'start': 4380.967, 'duration': 7.163}, {'end': 4388.991, 'text': "It's called punk list.", 'start': 4388.17, 'duration': 0.821}, {'end': 4395.594, 'text': 'But each of these cards is going to be its own component, each of these cards right here.', 'start': 4389.591, 'duration': 6.003}], 'summary': 'Developing a punk list with individual components for each card.', 'duration': 28.005, 'max_score': 4367.589, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ4367589.jpg'}, {'end': 4559.796, 'src': 'embed', 'start': 4529.008, 'weight': 6, 'content': [{'end': 4533.411, 'text': 'So a collection card is made up of a few different things here.', 'start': 4529.008, 'duration': 4.403}, {'end': 4537.973, 'text': 'okay?. So this collection card right here, when you see it, what is one thing that you see?', 'start': 4533.411, 'duration': 4.562}, {'end': 4538.614, 'text': 'Name it out.', 'start': 4538.174, 'duration': 0.44}, {'end': 4541.814, 'text': 'Yes, good job.', 'start': 4540.933, 'duration': 0.881}, {'end': 4547.883, 'text': 'So Joe Diaz said this as well, right? Here we see an image.', 'start': 4542.415, 'duration': 5.468}, {'end': 4549.386, 'text': "So it's made up of an image.", 'start': 4548.324, 'duration': 1.062}, {'end': 4551.669, 'text': "So we're definitely gonna see an image tag in here.", 'start': 4549.686, 'duration': 1.983}, {'end': 4558.075, 'text': 'What else is it made up of? Ah, nice.', 'start': 4552.35, 'duration': 5.725}, {'end': 4559.796, 'text': 'Somebody said border radius.', 'start': 4558.155, 'duration': 1.641}], 'summary': 'A collection card consists of an image and possibly a border radius.', 'duration': 30.788, 'max_score': 4529.008, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ4529008.jpg'}, {'end': 4729.263, 'src': 'embed', 'start': 4696.324, 'weight': 7, 'content': [{'end': 4697.185, 'text': "Let's see if that works.", 'start': 4696.324, 'duration': 0.861}, {'end': 4698.326, 'text': 'Oh, cool.', 'start': 4697.925, 'duration': 0.401}, {'end': 4699.647, 'text': 'Okay, that works.', 'start': 4698.946, 'duration': 0.701}, {'end': 4701.809, 'text': "Let's go to OpenSea.", 'start': 4700.507, 'duration': 1.302}, {'end': 4705.011, 'text': 'And I will take my wallet address.', 'start': 4702.629, 'duration': 2.382}, {'end': 4709.695, 'text': "And let's see if that shows up on OpenSea.", 'start': 4706.332, 'duration': 3.363}, {'end': 4711.356, 'text': "I'll type that in.", 'start': 4709.715, 'duration': 1.641}, {'end': 4721.018, 'text': "Nice So you guys see all the crypto, all the NFTs that I've made are now showing up on OpenSea and I can actually see what they're showing for.", 'start': 4713.413, 'duration': 7.605}, {'end': 4722.759, 'text': 'So this is public information.', 'start': 4721.038, 'duration': 1.721}, {'end': 4725.18, 'text': 'You know, if you guys wanted to go here, you could.', 'start': 4723.399, 'duration': 1.781}, {'end': 4729.263, 'text': "I'll drop the link here for all of you.", 'start': 4725.2, 'duration': 4.063}], 'summary': 'Nfts are successfully displayed on opensea, showcasing all created crypto and nfts as public information.', 'duration': 32.939, 'max_score': 4696.324, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ4696324.jpg'}], 'start': 3778.11, 'title': 'Web development elements', 'summary': "Covers styling and centering elements, engaging pattern recognition, and building a 'punk list' component, with a focus on specific instructions for visual appeal, enhancing developer skills, and creating a public nft collection integration.", 'chapters': [{'end': 4093.994, 'start': 3778.11, 'title': 'Styling and centering elements', 'summary': 'Focuses on styling and centering elements, with specific instructions on using justify content, align items, object fit contain, and setting specific dimensions for the image, resulting in a more visually appealing design. it also includes positive feedback from the audience and the addition of a styled login button.', 'duration': 315.884, 'highlights': ["Michael Connell's positive feedback and perseverance in using Visual Studio Code, expressing being 10 minutes behind but championing through. Michael Connell's positive feedback and perseverance in using Visual Studio Code, expressing being 10 minutes behind but championing through, reflecting the audience engagement and providing quantifiable data on the time delay.", 'Explanation of align items and justify content for centering elements, and using object fit contain to enhance the image appearance. Explanation of align items and justify content for centering elements, and using object fit contain to enhance the image appearance, providing crucial instructions and techniques for web design.', 'Adding and styling a login button with a gradient background, improving the visual appeal of the web page. Adding and styling a login button with a gradient background, improving the visual appeal of the web page, demonstrating practical application of CSS styling techniques.']}, {'end': 4337.486, 'start': 4094.434, 'title': 'Engaging pattern recognition for web development', 'summary': "Emphasizes the importance of pattern recognition in web development, particularly focusing on concepts like padding, border radius, and font color, to enhance developers' skills and create visually appealing designs, resulting in faster progress and attractive portfolios.", 'duration': 243.052, 'highlights': ["The chapter emphasizes the significance of pattern recognition in web development, highlighting the importance of concepts like padding, border radius, and font color to enhance developers' skills and create visually appealing designs.", 'Encouraging consistent engagement with pattern recognition, the instructor illustrates the impact of recognizing patterns in coding, equating consistent pattern recognition to improved coding skills.', "The instructor reinforces the concept of pattern recognition by emphasizing the importance of recognizing and applying familiar patterns such as padding, border radius, and font color, to create visually appealing designs and enhance developers' proficiency.", "By consistently reinforcing the recognition of coding patterns, the instructor aims to facilitate faster progress and the creation of visually appealing designs, which can significantly enhance a developer's portfolio and career prospects."]}, {'end': 4777.716, 'start': 4338.187, 'title': 'Building punk list component', 'summary': "Discusses building a 'punk list' component made up of 'collection cards', including the required elements such as images, border radius, title, and pricing, with a demonstration of image styling and integration with opensea showing public nft collection.", 'duration': 439.529, 'highlights': ["The 'punk list' component is made up of 'collection cards', with the 'collection card' being the first component to be built, followed by the 'punk list', which essentially loops through and builds each 'collection card'. The 'punk list' component is composed of 'collection cards', with the 'collection card' being the initial focus of development before proceeding to the construction of the 'punk list'.", "The 'collection card' contains elements such as images, border radius, title, and pricing, with a demonstration of image styling to ensure consistent appearance. The 'collection card' comprises elements like images, border radius, title, and pricing, with a focus on demonstrating image styling for consistent appearance.", 'Integration with OpenSea is demonstrated, allowing the presenter to display their public NFT collection and interact with viewers by sharing the collection link and acknowledging a donation. The integration with OpenSea is showcased, enabling the presenter to display their public NFT collection, share the collection link, and acknowledge a donation from a viewer.']}], 'duration': 999.606, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ3778110.jpg', 'highlights': ["Michael Connell's positive feedback and perseverance in using Visual Studio Code, reflecting audience engagement and providing quantifiable data on the time delay.", 'Explanation of align items and justify content for centering elements, and using object fit contain to enhance the image appearance, providing crucial instructions and techniques for web design.', 'Adding and styling a login button with a gradient background, improving the visual appeal of the web page, demonstrating practical application of CSS styling techniques.', "The chapter emphasizes the significance of pattern recognition in web development, highlighting the importance of concepts like padding, border radius, and font color to enhance developers' skills and create visually appealing designs.", 'Encouraging consistent engagement with pattern recognition, equating consistent pattern recognition to improved coding skills.', "The 'punk list' component is composed of 'collection cards', with the 'collection card' being the initial focus of development before proceeding to the construction of the 'punk list'.", "The 'collection card' contains elements such as images, border radius, title, and pricing, with a focus on demonstrating image styling for consistent appearance.", 'Integration with OpenSea is demonstrated, allowing the presenter to display their public NFT collection, share the collection link, and acknowledge a donation from a viewer.']}, {'end': 6349.191, 'segs': [{'end': 4952.416, 'src': 'embed', 'start': 4915.597, 'weight': 2, 'content': [{'end': 4917.839, 'text': "Now we're going to build out our price container.", 'start': 4915.597, 'duration': 2.242}, {'end': 4921.902, 'text': "So I'll go class name and I'll go price container.", 'start': 4918.539, 'duration': 3.363}, {'end': 4927.466, 'text': "And we'll put our images in here.", 'start': 4925.465, 'duration': 2.001}, {'end': 4932.888, 'text': 'So this will be called, this will be our, uh, Ethereum image.', 'start': 4928.306, 'duration': 4.582}, {'end': 4935.089, 'text': 'All right.', 'start': 4934.889, 'duration': 0.2}, {'end': 4943.733, 'text': 'And then the class name here is going to be image like this weath image or ETH image.', 'start': 4935.169, 'duration': 8.564}, {'end': 4944.633, 'text': 'Either one is fine.', 'start': 4943.813, 'duration': 0.82}, {'end': 4952.416, 'text': "Okay And then we're going to put, um, our price here.", 'start': 4944.653, 'duration': 7.763}], 'summary': "Creating a price container for ethereum image with class name 'eth image'.", 'duration': 36.819, 'max_score': 4915.597, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ4915597.jpg'}, {'end': 5343.822, 'src': 'embed', 'start': 5313.877, 'weight': 3, 'content': [{'end': 5318.201, 'text': 'But once we start controlling its size, like you see the border radius is showing up right there.', 'start': 5313.877, 'duration': 4.324}, {'end': 5320.363, 'text': 'You guys see that? Right there.', 'start': 5318.221, 'duration': 2.142}, {'end': 5325.607, 'text': 'We got to tame this beast.', 'start': 5324.146, 'duration': 1.461}, {'end': 5326.928, 'text': "Let's go overflow.", 'start': 5325.667, 'duration': 1.261}, {'end': 5330.03, 'text': 'Hidden on this thing.', 'start': 5328.95, 'duration': 1.08}, {'end': 5332.933, 'text': "Let's give it a width of 300 pixels.", 'start': 5330.551, 'duration': 2.382}, {'end': 5335.395, 'text': 'Okay, there we go.', 'start': 5332.953, 'duration': 2.442}, {'end': 5339.46, 'text': 'Starting to get more and more control now, right? There we go.', 'start': 5336.138, 'duration': 3.322}, {'end': 5343.822, 'text': 'So like the card is the width wise is starting to look good.', 'start': 5339.48, 'duration': 4.342}], 'summary': "Controlling the card's width to 300 pixels achieved more control over its appearance.", 'duration': 29.945, 'max_score': 5313.877, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ5313877.jpg'}, {'end': 5688.476, 'src': 'embed', 'start': 5663.438, 'weight': 1, 'content': [{'end': 5669.64, 'text': 'Awesome So yeah, because we added the padding to details, right? If you see it here, we added the padding to details.', 'start': 5663.438, 'duration': 6.202}, {'end': 5672.901, 'text': "So that's what allowed that to happen.", 'start': 5670.28, 'duration': 2.621}, {'end': 5675.042, 'text': 'And again, remember the pattern, guys.', 'start': 5673.441, 'duration': 1.601}, {'end': 5680.783, 'text': 'Remember what we said? When things get too close to each other, the pattern is most of the times padding.', 'start': 5675.082, 'duration': 5.701}, {'end': 5682.604, 'text': 'So start remembering that.', 'start': 5681.304, 'duration': 1.3}, {'end': 5688.476, 'text': 'With that said, I think now this card is looking awesome.', 'start': 5683.973, 'duration': 4.503}], 'summary': "Adding padding to details improved the card's appearance and spacing.", 'duration': 25.038, 'max_score': 5663.438, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ5663438.jpg'}, {'end': 5760.118, 'src': 'embed', 'start': 5735.121, 'weight': 0, 'content': [{'end': 5744.229, 'text': "Now what we need to do guys is we need to make a bunch of these cards, okay? It's not just like the few that we have here.", 'start': 5735.121, 'duration': 9.108}, {'end': 5752.735, 'text': 'We wanna be able to essentially like loop through it, right? And then have a bunch of these cards show up.', 'start': 5744.749, 'duration': 7.986}, {'end': 5756.919, 'text': "So what we're gonna do is we're gonna make another component and we're gonna call that component.", 'start': 5753.096, 'duration': 3.823}, {'end': 5760.118, 'text': 'Could you guess?', 'start': 5759.397, 'duration': 0.721}], 'summary': 'Creating multiple cards by looping through and adding a new component.', 'duration': 24.997, 'max_score': 5735.121, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ5735121.jpg'}, {'end': 6049.37, 'src': 'heatmap', 'start': 5924.209, 'weight': 0.802, 'content': [{'end': 5930.171, 'text': "This variable here, we're gonna store all of our punks right in there, okay?", 'start': 5924.209, 'duration': 5.962}, {'end': 5936.253, 'text': "Now we need to do use effect, because we're about to make our API call.", 'start': 5931.911, 'duration': 4.342}, {'end': 5941.591, 'text': "It's going to not have any dependencies to put that empty bracket there.", 'start': 5937.848, 'duration': 3.743}, {'end': 5944.974, 'text': "And here's what we're going to do.", 'start': 5943.973, 'duration': 1.001}, {'end': 5947.195, 'text': 'Oh, this is nice, David.', 'start': 5946.074, 'duration': 1.121}, {'end': 5951.518, 'text': "It's auto-writing some nice code for me that I bet works.", 'start': 5948.316, 'duration': 3.202}, {'end': 5954.18, 'text': "Okay, here's what we're going to do.", 'start': 5953.06, 'duration': 1.12}, {'end': 5956.702, 'text': "We're going to do get my NFTs.", 'start': 5954.2, 'duration': 2.502}, {'end': 5958.143, 'text': "We're going to make a function.", 'start': 5956.742, 'duration': 1.401}, {'end': 5960.045, 'text': 'This is going to be an async function.', 'start': 5958.504, 'duration': 1.541}, {'end': 5966.507, 'text': 'All right.', 'start': 5966.047, 'duration': 0.46}, {'end': 5970.47, 'text': "And we'll do a wait and get the data from Axios.", 'start': 5967.568, 'duration': 2.902}, {'end': 5984.62, 'text': 'Yeah Oh yeah, Ram, that GitHub autopilot is just too fricking strong.', 'start': 5978.816, 'duration': 5.804}, {'end': 5988.978, 'text': 'Now this is where it gets slightly tricky.', 'start': 5986.317, 'duration': 2.661}, {'end': 5991.739, 'text': 'So follow along with me as I write this out.', 'start': 5989.018, 'duration': 2.721}, {'end': 5995.98, 'text': "Okay So we're going to do HTTPS colon slash slash.", 'start': 5991.759, 'duration': 4.221}, {'end': 6000.502, 'text': 'Uh, can we drop this link somewhere, David? So people could get this link.', 'start': 5996.901, 'duration': 3.601}, {'end': 6002.443, 'text': "I think it'd be helpful.", 'start': 6001.542, 'duration': 0.901}, {'end': 6006.604, 'text': 'Just the base link, open c.io slash assets.', 'start': 6002.683, 'duration': 3.921}, {'end': 6012.226, 'text': 'And then we will do assets contract.', 'start': 6008.004, 'duration': 4.222}, {'end': 6014.962, 'text': 'Oh, sorry.', 'start': 6014.641, 'duration': 0.321}, {'end': 6017.484, 'text': 'Asset contract underscore address equals.', 'start': 6015.062, 'duration': 2.422}, {'end': 6022.888, 'text': 'And this address is basically going to be my third web wallet.', 'start': 6018.425, 'duration': 4.463}, {'end': 6024.73, 'text': "So I'm going to copy this.", 'start': 6023.609, 'duration': 1.121}, {'end': 6030.254, 'text': 'And I will paste it right there.', 'start': 6028.893, 'duration': 1.361}, {'end': 6037.821, 'text': 'Okay And we will do order underscore direction is equal to ascending.', 'start': 6030.274, 'duration': 7.547}, {'end': 6041.003, 'text': 'So this should get me all of mine in ascending order.', 'start': 6038.762, 'duration': 2.241}, {'end': 6049.37, 'text': 'And then the last thing I want to do here is just do console.log opencdata.data.assets.', 'start': 6043.046, 'duration': 6.324}], 'summary': 'Creating an async function to fetch nft data using axios and logging the result.', 'duration': 125.161, 'max_score': 5924.209, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ5924209.jpg'}], 'start': 4777.736, 'title': 'Building and styling collection cards', 'summary': 'Covers building a collection card ui with image, name, id, traits, and price container, styling the card with various attributes, enhancing the card design for a visually appealing look, and creating multiple cards with api calls to opensea using react components and axios.', 'chapters': [{'end': 5165.437, 'start': 4777.736, 'title': 'Building collection card ui', 'summary': 'Discusses building a collection card ui, including adding an image, name, id, traits, and price container, and showing it on app.js with props like id, name, traits, and image.', 'duration': 387.701, 'highlights': ['Building collection card UI with ID, name, traits, and image Discussing building a collection card UI with class names, divs, and details for ID, name, and traits, and showing an image.', 'Adding price container with Ethereum image and dynamic price Adding a price container with Ethereum image and discussing how to get the price dynamically.', 'Showing collection card on app.js with props Showing the collection card on app.js with props like ID, name, traits, and image, and discussing the need for styling.']}, {'end': 5437.145, 'start': 5168.462, 'title': 'Styling collection card', 'summary': 'Covers styling the collection card by creating a collection card.css file, importing it, and applying various styles such as color, border radius, width, height, and image size, with a focus on controlling the appearance and layout of the card.', 'duration': 268.683, 'highlights': ['Creating collection card.css file and importing it to apply styles The chapter emphasizes the process of creating a collection card.css file, importing it into the collection.js file, and applying styles to the collection card component.', 'Applying color, border radius, width, and height to the collection card The instructor demonstrates the application of styles such as color, border radius, width, and height to control the appearance and layout of the collection card.', 'Adjusting image size and handling donations from Samir and Gerardo The chapter showcases the adjustment of image size in the collection card and acknowledges donations from Samir and Gerardo, with Samir donating $5 and Gerardo donating $10.']}, {'end': 5734.521, 'start': 5437.165, 'title': 'Styling and enhancing card design', 'summary': 'Focused on enhancing the design of a card, including adjustments to image, pricing, and details, resulting in a visually appealing and well-structured card, with positive feedback from the audience.', 'duration': 297.356, 'highlights': ["The card's design was enhanced through adjustments to the image, pricing, and details, resulting in a visually appealing and well-structured card. The chapter focused on enhancing the design of a card, including adjustments to image, pricing, and details.", 'Positive audience feedback was received for the visually appealing and well-structured card. The audience provided positive feedback on the enhanced card design, expressing satisfaction with its appearance.', 'Approximately 145 people were present on Zoom, and nearly 300 viewers were on YouTube, indicating high audience engagement. The chapter attracted around 145 participants on Zoom and close to 300 viewers on YouTube, showcasing strong audience engagement.']}, {'end': 6349.191, 'start': 5735.121, 'title': 'Creating opensea cards and making api calls', 'summary': 'Discusses creating multiple cards, making api calls to opensea, using usestate and useeffect from react, and installing axios for api requests.', 'duration': 614.07, 'highlights': ['Creating multiple cards for OpenSea The speaker emphasizes the need to create a large number of cards for OpenSea to loop through and display, implying the scale of the task.', 'Using useState and useEffect from React for API calls The speaker explains the use of useState and useEffect from React to pull and store data from OpenSea, highlighting specific JavaScript functionalities and their purpose.', "Installing Axios for API requests The speaker instructs the audience to install Axios for making API requests, presenting both 'yarn add Axios' and 'NPM install Axios' methods, and expressing preference for yarn."]}], 'duration': 1571.455, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ4777736.jpg', 'highlights': ['Creating multiple cards for OpenSea The speaker emphasizes the need to create a large number of cards for OpenSea to loop through and display, implying the scale of the task.', "The card's design was enhanced through adjustments to the image, pricing, and details, resulting in a visually appealing and well-structured card. The chapter focused on enhancing the design of a card, including adjustments to image, pricing, and details.", 'Adding price container with Ethereum image and dynamic price Adding a price container with Ethereum image and discussing how to get the price dynamically.', 'Applying color, border radius, width, and height to the collection card The instructor demonstrates the application of styles such as color, border radius, width, and height to control the appearance and layout of the collection card.']}, {'end': 7143.414, 'segs': [{'end': 6413.632, 'src': 'embed', 'start': 6380.823, 'weight': 5, 'content': [{'end': 6383.944, 'text': "We're going to create our punk punk list.", 'start': 6380.823, 'duration': 3.121}, {'end': 6389.846, 'text': 'All right, so I want to start off.', 'start': 6386.064, 'duration': 3.782}, {'end': 6391.586, 'text': "It's a component right?", 'start': 6390.526, 'duration': 1.06}, {'end': 6393.107, 'text': 'So where am I gonna put this?', 'start': 6391.687, 'duration': 1.42}, {'end': 6396.529, 'text': 'Which folder am I going to create this file in?', 'start': 6393.707, 'duration': 2.822}, {'end': 6398.81, 'text': "And what's the file going to be called??", 'start': 6396.889, 'duration': 1.921}, {'end': 6399.67, 'text': 'Can you guys guess??', 'start': 6398.95, 'duration': 0.72}, {'end': 6406.273, 'text': "It's going to be in the components folder and it's going to be called punklist.js.", 'start': 6400.61, 'duration': 5.663}, {'end': 6410.991, 'text': "I'm going to R-F-C-E this bad boy.", 'start': 6407.489, 'duration': 3.502}, {'end': 6413.632, 'text': 'Hit tab, watch the magic happen.', 'start': 6411.171, 'duration': 2.461}], 'summary': 'Creating a component called punklist.js in the components folder using r-f-c-e.', 'duration': 32.809, 'max_score': 6380.823, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ6380823.jpg'}, {'end': 6546.25, 'src': 'embed', 'start': 6516.132, 'weight': 0, 'content': [{'end': 6522.596, 'text': "Collection card, okay? Self-closing tag is gonna have a couple of things that it's gonna take.", 'start': 6516.132, 'duration': 6.464}, {'end': 6527.247, 'text': "So we're going to give it a key and it's going to take the punk token ID.", 'start': 6523.866, 'duration': 3.381}, {'end': 6533.328, 'text': "We're going to give it, um, punk token ID for its ID as well for name.", 'start': 6528.407, 'duration': 4.921}, {'end': 6537.389, 'text': "We're going to give it punk dot name for traits.", 'start': 6533.868, 'duration': 3.521}, {'end': 6546.25, 'text': "Okay Can you guess the patterns? What am I going to write here? It's going to be what punk dot what dot traits.", 'start': 6537.509, 'duration': 8.741}], 'summary': 'Creating a collection card with punk token id and traits.', 'duration': 30.118, 'max_score': 6516.132, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ6516132.jpg'}, {'end': 6623.697, 'src': 'embed', 'start': 6565.581, 'weight': 1, 'content': [{'end': 6568.642, 'text': "Everybody who says something with punk.image, you're on the right track.", 'start': 6565.581, 'duration': 3.061}, {'end': 6575.305, 'text': "Okay, so it's just gonna be punk.image, underscore original, underscore URL.", 'start': 6568.662, 'duration': 6.643}, {'end': 6578.967, 'text': "And where this is coming from, if you're like, what the heck? I just thought it was gonna be image.", 'start': 6575.646, 'duration': 3.321}, {'end': 6584.77, 'text': "It's okay, you're not supposed, you don't have information to this just yet, but it's coming from here.", 'start': 6580.368, 'duration': 4.402}, {'end': 6590.305, 'text': 'image underscore original underscore URL.', 'start': 6587.482, 'duration': 2.823}, {'end': 6592.748, 'text': 'Okay So I have to follow that pattern there.', 'start': 6590.906, 'duration': 1.842}, {'end': 6598.864, 'text': 'okay, beautiful.', 'start': 6596.943, 'duration': 1.921}, {'end': 6601.626, 'text': "so we're, we're good on this.", 'start': 6598.864, 'duration': 2.762}, {'end': 6608.269, 'text': "so all that's happening is, once we get all of our data from openc, we put it in this variable punkless data.", 'start': 6601.626, 'duration': 6.643}, {'end': 6618.295, 'text': 'our punkless component gets to work, loops over and for every single punk inside of the punkless data.', 'start': 6608.269, 'duration': 10.026}, {'end': 6623.697, 'text': 'it builds it using collection cards, Using the collection card component.', 'start': 6618.295, 'duration': 5.402}], 'summary': 'Using punk.image_original_url for punkless data in collection cards.', 'duration': 58.116, 'max_score': 6565.581, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ6565581.jpg'}, {'end': 6822.155, 'src': 'embed', 'start': 6752.946, 'weight': 2, 'content': [{'end': 6758.59, 'text': "Yes, if you guys got the pattern, it's gonna be a CSS file and it's gonna be in here and it's gonna be called what?", 'start': 6752.946, 'duration': 5.644}, {'end': 6761.952, 'text': 'Punklist.css.', 'start': 6760.911, 'duration': 1.041}, {'end': 6766.925, 'text': 'Good job, guys.', 'start': 6766.104, 'duration': 0.821}, {'end': 6767.566, 'text': 'You got it.', 'start': 6766.965, 'duration': 0.601}, {'end': 6768.667, 'text': 'Nice work.', 'start': 6767.986, 'duration': 0.681}, {'end': 6774.694, 'text': 'Cough needs to just go away.', 'start': 6773.072, 'duration': 1.622}, {'end': 6777.257, 'text': 'Here we go.', 'start': 6776.776, 'duration': 0.481}, {'end': 6779.499, 'text': "So let's get to work, boys and girls.", 'start': 6777.637, 'duration': 1.862}, {'end': 6781.377, 'text': 'Punk list.', 'start': 6780.697, 'duration': 0.68}, {'end': 6785.26, 'text': "Okay First of all, we're going to make the cursors pointer.", 'start': 6782.198, 'duration': 3.062}, {'end': 6786.901, 'text': "Now let's go back to punk list.", 'start': 6785.4, 'duration': 1.501}, {'end': 6788.502, 'text': 'The styling is not working.', 'start': 6787.021, 'duration': 1.481}, {'end': 6790.102, 'text': 'Styling is not working.', 'start': 6788.922, 'duration': 1.18}, {'end': 6794.805, 'text': "The cursor is not turning into a pointer cause he what's wrong.", 'start': 6790.383, 'duration': 4.422}, {'end': 6803.21, 'text': 'Why is this not working? What do we need to do? Why is my cursor not turning into a pointer? Yes.', 'start': 6795.265, 'duration': 7.945}, {'end': 6804.271, 'text': 'Good job.', 'start': 6803.79, 'duration': 0.481}, {'end': 6807.212, 'text': 'We need to import it.', 'start': 6806.112, 'duration': 1.1}, {'end': 6811.052, 'text': 'Import punk list dot CSS.', 'start': 6807.753, 'duration': 3.299}, {'end': 6814.293, 'text': 'Okay Now I hover over and look at that.', 'start': 6811.692, 'duration': 2.601}, {'end': 6817.914, 'text': 'It turns into a mouse clicky pointer thing.', 'start': 6814.893, 'duration': 3.021}, {'end': 6822.155, 'text': 'Beautiful So our styling style file is connected.', 'start': 6818.814, 'duration': 3.341}], 'summary': 'Troubleshooting css styling issue resolved, cursor now displays as pointer.', 'duration': 69.209, 'max_score': 6752.946, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ6752946.jpg'}], 'start': 6349.211, 'title': 'Creating punk list and collection card', 'summary': "Focuses on creating a 'punklist.js' component to loop through punk list data, and creating a collection card with punk token details and styling the layout to be scrollable and aesthetically pleasing.", 'chapters': [{'end': 6513.171, 'start': 6349.211, 'title': 'Creating punk list component', 'summary': "Focuses on creating a punk list component named 'punklist.js' in the components folder, looping through the punk list data to build collection card components.", 'duration': 163.96, 'highlights': ["Creating punklist.js component in the components folder The chapter emphasizes creating a new component named 'punklist.js' in the components folder.", 'Looping through punk list data to build collection card components The chapter explains the process of looping through the punk list data to build collection card components, emphasizing the repetitive nature of this action.']}, {'end': 7143.414, 'start': 6516.132, 'title': 'Web development: collection card and styling', 'summary': 'Covers creating a collection card with punk token id, name, and traits, utilizing punk.image_original_url, and styling the punk list component with cursor pointer and display flex, resulting in a scrollable and aesthetically pleasing layout.', 'duration': 627.282, 'highlights': ['Creating a collection card with punk token ID, name, and traits The self-closing tag for the collection card takes a key and the punk token ID, name, and traits, and it utilizes the pattern punk dot name for traits.', 'Utilizing punk.image_original_URL for the image The pattern for the image is punk.image_original_URL, and it is used to display the image for the collection card.', 'Styling the punk list component with cursor pointer and display flex The punk list component is styled with cursor pointer and display flex to create an aesthetically pleasing layout.', 'Implementing overflow scroll to make the punk list scrollable Overflow scroll is implemented to make the punk list scrollable, ensuring that the entire screen does not scroll along with it.']}], 'duration': 794.203, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ6349211.jpg', 'highlights': ['Creating a collection card with punk token ID, name, and traits', 'Looping through punk list data to build collection card components', 'Implementing overflow scroll to make the punk list scrollable', 'Styling the punk list component with cursor pointer and display flex', 'Utilizing punk.image_original_URL for the image', 'Creating punklist.js component in the components folder']}, {'end': 8731.149, 'segs': [{'end': 7224.815, 'src': 'embed', 'start': 7168.287, 'weight': 2, 'content': [{'end': 7176.39, 'text': "So let's go main.js here, okay? And in main, Let's get to work.", 'start': 7168.287, 'duration': 8.103}, {'end': 7181.552, 'text': "We're gonna RAFCE this thing, hit tab, tab, save.", 'start': 7176.73, 'duration': 4.822}, {'end': 7187.394, 'text': 'Perfect And I wanna return the following.', 'start': 7183.193, 'duration': 4.201}, {'end': 7190.895, 'text': "So there's gonna be a bunch of stuff that's gonna be going on in here.", 'start': 7187.874, 'duration': 3.021}, {'end': 7198.638, 'text': "Since I don't wanna make it too heavy on styling, I'll kind of like do bunch of the styling and try to explain as I go along.", 'start': 7191.436, 'duration': 7.202}, {'end': 7206.826, 'text': 'But if you look at this here, right? you got the whole main div, this whole thing right here.', 'start': 7199.278, 'duration': 7.548}, {'end': 7210.448, 'text': 'Yeah, you got this whole thing right there.', 'start': 7209.047, 'duration': 1.401}, {'end': 7214.23, 'text': 'And then inside of it, you got the main content.', 'start': 7211.768, 'duration': 2.462}, {'end': 7217.151, 'text': "Okay, so this is gonna be the content that's inside of it.", 'start': 7215.03, 'duration': 2.121}, {'end': 7224.815, 'text': "Then you have the punk highlight, right? So this part, let's do it like this.", 'start': 7218.252, 'duration': 6.563}], 'summary': 'Transcript: working on main.js, explaining content structure and styling.', 'duration': 56.528, 'max_score': 7168.287, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ7168287.jpg'}, {'end': 7307.634, 'src': 'embed', 'start': 7281.402, 'weight': 4, 'content': [{'end': 7286.966, 'text': "So there's a bunch of stuff going on in here, okay? I'll try to go through it, but we'll go through this a little bit faster.", 'start': 7281.402, 'duration': 5.564}, {'end': 7292.67, 'text': 'All right, so class name for the whole thing is gonna be main.', 'start': 7286.986, 'duration': 5.684}, {'end': 7294.569, 'text': 'All right.', 'start': 7294.309, 'duration': 0.26}, {'end': 7296.81, 'text': "Inside of here, we're gonna have a class name.", 'start': 7294.729, 'duration': 2.081}, {'end': 7299.371, 'text': 'This is gonna contain the main content.', 'start': 7296.87, 'duration': 2.501}, {'end': 7300.371, 'text': "It's kind of what we want.", 'start': 7299.391, 'duration': 0.98}, {'end': 7307.634, 'text': "Okay In here, we'll have a class name of punk highlight.", 'start': 7302.112, 'duration': 5.522}], 'summary': "Transcript covers a class structure with 'main' and 'punk highlight'.", 'duration': 26.232, 'max_score': 7281.402, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ7281402.jpg'}, {'end': 7868.048, 'src': 'embed', 'start': 7844.636, 'weight': 5, 'content': [{'end': 7852.267, 'text': "So when I'm thinking styling for main component, what am I gonna be doing guys? What's the pattern here that you're seeing? I need to style.", 'start': 7844.636, 'duration': 7.631}, {'end': 7855.812, 'text': "So what's my next step without even thinking you should be able to get to this.", 'start': 7852.627, 'duration': 3.185}, {'end': 7861.14, 'text': 'Yes, absolutely.', 'start': 7859.898, 'duration': 1.242}, {'end': 7862.081, 'text': 'Somebody said flex.', 'start': 7861.2, 'duration': 0.881}, {'end': 7864.123, 'text': 'No, you need to create a file.', 'start': 7862.581, 'duration': 1.542}, {'end': 7864.984, 'text': "So we're gonna create a file.", 'start': 7864.163, 'duration': 0.821}, {'end': 7867.107, 'text': "It's gonna be called main.css.", 'start': 7865.004, 'duration': 2.103}, {'end': 7868.048, 'text': 'Okay, good job.', 'start': 7867.267, 'duration': 0.781}], 'summary': 'Discussing styling for main component, creating main.css file.', 'duration': 23.412, 'max_score': 7844.636, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ7844636.jpg'}, {'end': 8370.598, 'src': 'embed', 'start': 8342.804, 'weight': 7, 'content': [{'end': 8348.889, 'text': "But I want to kind of move on because I think styling is an important part, but it's not the most important part of the app.", 'start': 8342.804, 'duration': 6.085}, {'end': 8351.791, 'text': "We'll get more to the styling.", 'start': 8350.351, 'duration': 1.44}, {'end': 8353.172, 'text': "Let's work on the functionality.", 'start': 8351.951, 'duration': 1.221}, {'end': 8357.693, 'text': "Let's get the selected punk working and then we'll fix the styling.", 'start': 8353.191, 'duration': 4.502}, {'end': 8366.477, 'text': 'So maybe David, if you wanna like see if you can fix these here, right? Like the styling, move it down and I can explain it at the end.', 'start': 8358.074, 'duration': 8.403}, {'end': 8370.598, 'text': 'You wanna work on that for a little bit? Okay, so you try to kind of work on that and..', 'start': 8366.736, 'duration': 3.862}], 'summary': 'Prioritizing functionality over styling; addressing selected punk first.', 'duration': 27.794, 'max_score': 8342.804, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ8342804.jpg'}, {'end': 8452.495, 'src': 'embed', 'start': 8392.525, 'weight': 6, 'content': [{'end': 8401.031, 'text': 'Okay, and item number, the styling for the owner, the styling for each div, the owner image container.', 'start': 8392.525, 'duration': 8.506}, {'end': 8403.753, 'text': "It's like all of these are just going to take a ton of time.", 'start': 8401.451, 'duration': 2.302}, {'end': 8407.756, 'text': "And all of these styling, I'm going to make it available for you guys.", 'start': 8404.634, 'duration': 3.122}, {'end': 8410.478, 'text': 'So you guys can kind of go through it at your own pace and you should be fine.', 'start': 8407.776, 'duration': 2.702}, {'end': 8419.125, 'text': "Okay The only one that's bugging me is like the size of this bandana punk like that.", 'start': 8412.62, 'duration': 6.505}, {'end': 8421.767, 'text': 'That should be easy to make it huge.', 'start': 8419.906, 'duration': 1.861}, {'end': 8424.469, 'text': 'So we have title.', 'start': 8422.127, 'duration': 2.342}, {'end': 8426.811, 'text': 'Last name title.', 'start': 8425.77, 'duration': 1.041}, {'end': 8435.29, 'text': 'And then we have title right here and we are clearly giving it this huge size.', 'start': 8430.469, 'duration': 4.821}, {'end': 8442.512, 'text': 'Oh, class name with a capital N.', 'start': 8439.771, 'duration': 2.741}, {'end': 8445.253, 'text': 'Is that what it is? Yes.', 'start': 8442.512, 'duration': 2.741}, {'end': 8447.373, 'text': 'Nailed it.', 'start': 8446.793, 'duration': 0.58}, {'end': 8452.495, 'text': "Okay, there's probably some other like typo that I've made.", 'start': 8449.074, 'duration': 3.421}], 'summary': 'Styling and image container changes discussed for website, with typo and size adjustments.', 'duration': 59.97, 'max_score': 8392.525, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ8392525.jpg'}, {'end': 8594.892, 'src': 'embed', 'start': 8564.712, 'weight': 0, 'content': [{'end': 8569.296, 'text': 'Boom, click this one, three, click this one, four, click this one, five, click this one.', 'start': 8564.712, 'duration': 4.584}, {'end': 8575.061, 'text': "So I'm able to actually get the ID on click and my clicks are being detected.", 'start': 8569.837, 'duration': 5.224}, {'end': 8577.223, 'text': "Here's what I'm gonna do now.", 'start': 8576.222, 'duration': 1.001}, {'end': 8580.205, 'text': "Now we're gonna make it a little bit fancier.", 'start': 8578.164, 'duration': 2.041}, {'end': 8588.833, 'text': "So I'm gonna go to my app and I'll create a state variable for which is the selected punk.", 'start': 8580.226, 'duration': 8.607}, {'end': 8594.892, 'text': "Okay, so we're gonna do selected punk and we're gonna do set selected punk.", 'start': 8590.25, 'duration': 4.642}], 'summary': 'A developer detects clicks and plans to create a state variable for the selected punk.', 'duration': 30.18, 'max_score': 8564.712, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ8564712.jpg'}, {'end': 8716.13, 'src': 'embed', 'start': 8684.172, 'weight': 1, 'content': [{'end': 8685.172, 'text': 'Yeah, command P.', 'start': 8684.172, 'duration': 1}, {'end': 8688.974, 'text': "And if you do command P, P, it'll switch to the most recent file.", 'start': 8685.172, 'duration': 3.802}, {'end': 8691.115, 'text': 'If you do command P and then like type in.', 'start': 8689.034, 'duration': 2.081}, {'end': 8695.818, 'text': "So for example, you know, if you type in the name of the file, like it'll take you there.", 'start': 8691.596, 'duration': 4.222}, {'end': 8699.124, 'text': "Right?. So I'll just do.", 'start': 8697.423, 'duration': 1.701}, {'end': 8706.626, 'text': 'I changed that to command D, cause I think command D is a much better shortcut, like way better than command P, but just just just do command P.', 'start': 8699.124, 'duration': 7.502}, {'end': 8709.488, 'text': "And then if you do command PP, it'll take you to the most recent file.", 'start': 8706.626, 'duration': 2.862}, {'end': 8716.13, 'text': "And if you do command P and then just type start, like, don't even look and think about it.", 'start': 8710.848, 'duration': 5.282}], 'summary': "The shortcut 'command p' can be used to switch to the most recent file, and 'command pp' will take you to the most recent file.", 'duration': 31.958, 'max_score': 8684.172, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ8684172.jpg'}], 'start': 7143.434, 'title': "Building 'main' component and visual styling in javascript", 'summary': "Discusses building the 'main' component in javascript, including structure, styling, and initial rendering, and also focuses on visually styling the app, implementing flex display, and creating a main.css file, with key points including recognizing and displaying the id of the selected punk and navigating between files using command p.", 'chapters': [{'end': 7537.39, 'start': 7143.434, 'title': "Building 'main' component in javascript", 'summary': "Discusses building the 'main' component in javascript, including the structure and styling of the component, inline styling, and initial rendering of the 'main' component with a sample image.", 'duration': 393.956, 'highlights': ["The 'main' component in JavaScript is built, and the main file 'main.js' is created, with the use of RAFCE command, and the component is saved after the creation. RAFCE command usage", "The structure of the 'main' component is explained, including the main div, main content, punk highlight, punk container, and inline styling for text color. Explanation of component structure", "The addition of class names and inline styling for the 'main' component, including the title, active punk's name, and item number, is demonstrated. Demonstration of class names and inline styling"]}, {'end': 8452.495, 'start': 7537.57, 'title': 'Visual styling and functionality', 'summary': 'Focuses on visually styling the app and working on its functionality, with key points including creating a main.css file, implementing flex display and styling details for various components.', 'duration': 914.925, 'highlights': ['The main focus is on visually styling the app and working on its functionality, including creating a main.css file and implementing flex display.', 'Styling details for components such as title, item number, owner details, and owner image container are addressed with the intention of making the finished version available for reference.', 'The process involves fixing bugs, simplifying the structure, and prioritizing the functionality over styling to ensure the selected punk functionality is working.', 'The chapter also involves adding finishing touches to the styling, such as adjusting the size of the bandana punk and rectifying any typos in the code.']}, {'end': 8731.149, 'start': 8452.515, 'title': 'Punk list functionality', 'summary': 'Focuses on implementing the functionality to recognize and display the id of the selected punk when clicked, and creating a state variable for the selected punk with default value as zero, with the ability to navigate between files using command p.', 'duration': 278.634, 'highlights': ['The functionality to recognize and display the ID of the selected punk when clicked is implemented, showing the ID of each punk as it is clicked, allowing for the detection of clicks and display of the corresponding IDs.', 'A state variable for the selected punk is created with a default value of zero, and the ability to update the selected punk when clicked is established, allowing for dynamic tracking of the currently active selected punk.', 'The method of navigating between files using command P and the shortcut command PP for switching to the most recent file is demonstrated, providing a fast and efficient way to navigate within the files.']}], 'duration': 1587.715, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ7143434.jpg', 'highlights': ['The functionality to recognize and display the ID of the selected punk when clicked is implemented, showing the ID of each punk as it is clicked, allowing for the detection of clicks and display of the corresponding IDs.', 'The method of navigating between files using command P and the shortcut command PP for switching to the most recent file is demonstrated, providing a fast and efficient way to navigate within the files.', "The 'main' component in JavaScript is built, and the main file 'main.js' is created, with the use of RAFCE command, and the component is saved after the creation. RAFCE command usage", "The structure of the 'main' component is explained, including the main div, main content, punk highlight, punk container, and inline styling for text color. Explanation of component structure", "The addition of class names and inline styling for the 'main' component, including the title, active punk's name, and item number, is demonstrated. Demonstration of class names and inline styling", 'The main focus is on visually styling the app and working on its functionality, including creating a main.css file and implementing flex display.', 'Styling details for components such as title, item number, owner details, and owner image container are addressed with the intention of making the finished version available for reference.', 'The process involves fixing bugs, simplifying the structure, and prioritizing the functionality over styling to ensure the selected punk functionality is working.', 'The chapter also involves adding finishing touches to the styling, such as adjusting the size of the bandana punk and rectifying any typos in the code.']}, {'end': 9616.513, 'segs': [{'end': 8808.297, 'src': 'embed', 'start': 8731.309, 'weight': 0, 'content': [{'end': 8734.311, 'text': "So I got this so far, so that's good.", 'start': 8731.309, 'duration': 3.002}, {'end': 8736.192, 'text': "So selected punk, that's awesome.", 'start': 8734.491, 'duration': 1.701}, {'end': 8746.68, 'text': 'Now what we need to do is when I do select the punk, I need this image and this whole thing to update.', 'start': 8737.994, 'duration': 8.686}, {'end': 8753.245, 'text': "Yeah, so let's go ahead and work on that.", 'start': 8748.822, 'duration': 4.423}, {'end': 8754.666, 'text': 'Okay, so punk list.', 'start': 8753.265, 'duration': 1.401}, {'end': 8756.905, 'text': 'Pass it.', 'start': 8756.305, 'duration': 0.6}, {'end': 8764.707, 'text': 'All right.', 'start': 8764.467, 'duration': 0.24}, {'end': 8767.648, 'text': "So in main, what I want to do is let's go to main.", 'start': 8764.747, 'duration': 2.901}, {'end': 8770.729, 'text': 'And in main, I want to do the following.', 'start': 8769.108, 'duration': 1.621}, {'end': 8779.311, 'text': 'I want to basically say const active punk set active punk.', 'start': 8771.589, 'duration': 7.722}, {'end': 8789.365, 'text': "And we'll just say use state and from punk list data, grab the first punk.", 'start': 8781.159, 'duration': 8.206}, {'end': 8793.488, 'text': "And we'll also pass some props.", 'start': 8791.186, 'duration': 2.302}, {'end': 8798.011, 'text': "So we'll pass it selected punk and we'll pass it punk list data.", 'start': 8793.508, 'duration': 4.503}, {'end': 8801.313, 'text': 'So this will be all of the punks.', 'start': 8799.932, 'duration': 1.381}, {'end': 8803.914, 'text': 'This is the currently selected punk that will pass it.', 'start': 8801.393, 'duration': 2.521}, {'end': 8806.856, 'text': 'All right.', 'start': 8806.616, 'duration': 0.24}, {'end': 8808.297, 'text': "Now it doesn't know useState.", 'start': 8806.896, 'duration': 1.401}], 'summary': 'Updating image and data when selecting punk in main, using usestate', 'duration': 76.988, 'max_score': 8731.309, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ8731309.jpg'}, {'end': 8870.557, 'src': 'embed', 'start': 8838.984, 'weight': 1, 'content': [{'end': 8845.33, 'text': 'And for the dependency array here, all I need is punk list data and then selected punk.', 'start': 8838.984, 'duration': 6.346}, {'end': 8853.48, 'text': 'Okay This means that the page will update if the punk list changes or the selected punk changes.', 'start': 8846.493, 'duration': 6.987}, {'end': 8857.564, 'text': "Cause that's what you want, right? You don't want to hit refresh every single time to see the change.", 'start': 8853.52, 'duration': 4.044}, {'end': 8859.045, 'text': 'You want to see it in real time.', 'start': 8857.604, 'duration': 1.441}, {'end': 8865.172, 'text': 'Okay Punk list data.', 'start': 8861.087, 'duration': 4.085}, {'end': 8870.557, 'text': "Yup So it's getting an error on this line.", 'start': 8867.854, 'duration': 2.703}], 'summary': 'The dependency array requires punk list data and selected punk, enabling real-time updates without manual refresh.', 'duration': 31.573, 'max_score': 8838.984, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ8838984.jpg'}, {'end': 9236.756, 'src': 'embed', 'start': 9205.603, 'weight': 2, 'content': [{'end': 9210.227, 'text': "So, uh, I'm going to put a little emoji here so we can actually see where this is coming from.", 'start': 9205.603, 'duration': 4.624}, {'end': 9222.789, 'text': "Also, I think it's you know, I know it's not as smooth, but I think it's also good for you guys to see some live debugging, because it is helpful,", 'start': 9213.484, 'duration': 9.305}, {'end': 9225.95, 'text': "because a lot of the times, in reality, you're always going to be running into problems.", 'start': 9222.789, 'duration': 3.161}, {'end': 9227.331, 'text': "It's not going to go as smooth.", 'start': 9226.15, 'duration': 1.181}, {'end': 9236.756, 'text': "So I am getting the freaking, um, I'm getting what I'm looking for.", 'start': 9229.312, 'duration': 7.444}], 'summary': 'Live debugging helps to see problems - not always smooth.', 'duration': 31.153, 'max_score': 9205.603, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ9205603.jpg'}, {'end': 9397.929, 'src': 'embed', 'start': 9368.145, 'weight': 4, 'content': [{'end': 9369.747, 'text': "Let's make the whole thing dynamic.", 'start': 9368.145, 'duration': 1.602}, {'end': 9375.856, 'text': 'Okay So for example, where the title is now, this needs to be active punk.name.', 'start': 9369.807, 'duration': 6.049}, {'end': 9386.645, 'text': "Okay, So if I give it a one, you'll see, not only did it change the photo, but it actually changed the title,", 'start': 9378.382, 'duration': 8.263}, {'end': 9389.326, 'text': 'but we need to make sure that this is dynamic as well.', 'start': 9386.645, 'duration': 2.681}, {'end': 9390.947, 'text': 'That ID right there.', 'start': 9389.986, 'duration': 0.961}, {'end': 9394.568, 'text': "So let's go ahead and fix that.", 'start': 9391.567, 'duration': 3.001}, {'end': 9397.929, 'text': "So we're going to go here and we're going to say, we're going to leave some of that there.", 'start': 9394.588, 'duration': 3.341}], 'summary': 'Making the title and photo dynamic by assigning active punk.name and ensuring the id is dynamic.', 'duration': 29.784, 'max_score': 9368.145, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ9368145.jpg'}, {'end': 9582.548, 'src': 'embed', 'start': 9550.755, 'weight': 5, 'content': [{'end': 9555.795, 'text': 'So as soon as we added that, We give it a max width and a max height.', 'start': 9550.755, 'duration': 5.04}, {'end': 9562.098, 'text': 'It makes sure, and this is super mobile responsive.', 'start': 9557.756, 'duration': 4.342}, {'end': 9564.099, 'text': 'So if I make it smaller, it becomes smaller.', 'start': 9562.158, 'duration': 1.941}, {'end': 9568.261, 'text': 'If I make it bigger, it is beautiful.', 'start': 9564.159, 'duration': 4.102}, {'end': 9573.504, 'text': 'So that magic is happening from here, the selected punk.', 'start': 9569.542, 'duration': 3.962}, {'end': 9582.548, 'text': "Then punk details, if I go here, the punk details take care of what's happening here.", 'start': 9575.244, 'duration': 7.304}], 'summary': 'Implemented mobile responsive design with max width and height for seamless resizing.', 'duration': 31.793, 'max_score': 9550.755, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ9550755.jpg'}], 'start': 8731.309, 'title': 'Updating active punk image and debugging web page', 'summary': 'Involves updating the active punk image and content based on the selected punk, utilizing usestate and useeffect for real-time updates, also includes debugging, making the web page dynamic, passing props, and fixing undefined errors.', 'chapters': [{'end': 9227.331, 'start': 8731.309, 'title': 'Updating active punk image', 'summary': 'Involves updating the active punk image and content based on the selected punk, utilizing usestate and useeffect to manage the dynamic display of data from the punk list, ensuring real-time updates without requiring page refresh.', 'duration': 496.022, 'highlights': ['Utilizing useState and useEffect to manage the dynamic display of data from the punk list The code involves using useState to set the active punk from the punk list data and passing props such as selected punk and punk list data, while employing useEffect to ensure real-time updates without requiring page refresh.', 'Implementing conditional rendering based on the length of punk list data to avoid errors and optimize the display By using the length of punk list data as a condition, the code ensures that the active punk image and content are only updated when the API call has gone through, preventing errors and optimizing the display based on the availability of punk data.', 'Conducting live debugging to troubleshoot issues and provide a learning experience The inclusion of live debugging provides a learning experience, offering insight into the troubleshooting process and the common challenges encountered when working with dynamic data.']}, {'end': 9616.513, 'start': 9229.312, 'title': 'Debugging and making web page dynamic', 'summary': 'Describes the process of debugging and making a web page dynamic, including passing props and fixing undefined errors, with the main focus on making the selected punk dynamic and responsive.', 'duration': 387.201, 'highlights': ['The main focus is on passing props and fixing the issue of undefined errors related to the selected punk, which leads to making the web page dynamic and responsive.', "The process involves changing the code to make the selected punk dynamic, including updating the title and image based on the selected punk's attributes.", 'The CSS portion is briefly touched upon, highlighting the mobile responsiveness and styling changes made to the selected punk and punk details, enhancing the visual appearance of the web page.']}], 'duration': 885.204, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ8731309.jpg', 'highlights': ['Utilizing useState and useEffect to manage the dynamic display of data from the punk list', 'Implementing conditional rendering based on the length of punk list data to avoid errors and optimize the display', 'Conducting live debugging to troubleshoot issues and provide a learning experience', 'The main focus is on passing props and fixing the issue of undefined errors related to the selected punk', "The process involves changing the code to make the selected punk dynamic, including updating the title and image based on the selected punk's attributes", 'The CSS portion is briefly touched upon, highlighting the mobile responsiveness and styling changes made to the selected punk and punk details']}, {'end': 10326.708, 'segs': [{'end': 9672.982, 'src': 'embed', 'start': 9644.362, 'weight': 0, 'content': [{'end': 9649.725, 'text': 'Yo guys, I mean give it up for yourselves, like you were here the whole way through.', 'start': 9644.362, 'duration': 5.363}, {'end': 9652.126, 'text': 'we have 125 people like what the heck?', 'start': 9649.725, 'duration': 2.401}, {'end': 9656.428, 'text': "that's crazy, Sheesh.", 'start': 9652.126, 'duration': 4.302}, {'end': 9659.609, 'text': 'Yes, yes, yes, Andrea says I will take your bootcamp.', 'start': 9656.428, 'duration': 3.181}, {'end': 9662.391, 'text': 'fantastic, would love to have you at the bootcamp, brother.', 'start': 9659.609, 'duration': 2.782}, {'end': 9672.982, 'text': "Oh Yeah, anybody that wants to join us, you know, Isaac is in the bootcamp, so you'll be, you know, working with Isaac, learning with him.", 'start': 9662.411, 'duration': 10.571}], 'summary': '125 people attended the bootcamp, with andrea expressing interest in joining.', 'duration': 28.62, 'max_score': 9644.362, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ9644362.jpg'}, {'end': 9718.552, 'src': 'embed', 'start': 9691.496, 'weight': 2, 'content': [{'end': 9694.915, 'text': "Isn't that crazy? To be able to do that in three hours.", 'start': 9691.496, 'duration': 3.419}, {'end': 9699.457, 'text': 'The cohort for this bootcamp starts December 21st.', 'start': 9695.835, 'duration': 3.622}, {'end': 9705.361, 'text': "So if you were looking to join it, I wouldn't miss out on it because the next one after that starts many, many months later.", 'start': 9700.178, 'duration': 5.183}, {'end': 9708.643, 'text': "So it's in about one or two weeks.", 'start': 9705.381, 'duration': 3.262}, {'end': 9716.57, 'text': 'so yeah, the deadline for that is fast approaching and if you guys do want to join it, we do have financing options and things like that.', 'start': 9709.665, 'duration': 6.905}, {'end': 9718.552, 'text': "but that's not what i'm here to talk about.", 'start': 9716.57, 'duration': 1.982}], 'summary': 'Join the december 21st bootcamp cohort with fast-approaching deadline and financing options.', 'duration': 27.056, 'max_score': 9691.496, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ9691496.jpg'}, {'end': 9914.749, 'src': 'embed', 'start': 9886.809, 'weight': 1, 'content': [{'end': 9889.57, 'text': 'And yes, it was so fast, right? Like think about this.', 'start': 9886.809, 'duration': 2.761}, {'end': 9894.772, 'text': 'We did, man, this project should take a normal person like a month to do.', 'start': 9889.65, 'duration': 5.122}, {'end': 9902.735, 'text': 'Like if a developer was hired, it would take like weeks or like a month to build this or longer.', 'start': 9894.892, 'duration': 7.843}, {'end': 9911.048, 'text': 'You watched this project get built in what??', 'start': 9904.725, 'duration': 6.323}, {'end': 9914.749, 'text': 'Three hours, right?', 'start': 9913.589, 'duration': 1.16}], 'summary': 'A project that would take a month for a developer was built in just three hours.', 'duration': 27.94, 'max_score': 9886.809, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ9886809.jpg'}, {'end': 10153.3, 'src': 'embed', 'start': 10127.705, 'weight': 4, 'content': [{'end': 10132.589, 'text': 'And just that learning one item out of that boot camp paid for the class by itself.', 'start': 10127.705, 'duration': 4.884}, {'end': 10138.833, 'text': 'Yeah, you were what, like two weeks into the boot camp and you got a six-figure job offer.', 'start': 10133.189, 'duration': 5.644}, {'end': 10140.274, 'text': 'That was nuts.', 'start': 10139.294, 'duration': 0.98}, {'end': 10142.436, 'text': "That doesn't happen for everybody, by the way.", 'start': 10141.035, 'duration': 1.401}, {'end': 10143.256, 'text': 'I just want to say that.', 'start': 10142.456, 'duration': 0.8}, {'end': 10145.058, 'text': 'But that was awesome.', 'start': 10143.316, 'duration': 1.742}, {'end': 10146.979, 'text': 'Dave, thanks so much.', 'start': 10146.099, 'duration': 0.88}, {'end': 10150.302, 'text': "And I'll take on more questions from other people, okay? Thank you, buddy.", 'start': 10147.279, 'duration': 3.023}, {'end': 10150.762, 'text': 'Appreciate it.', 'start': 10150.322, 'duration': 0.44}, {'end': 10153.3, 'text': 'Any other?', 'start': 10152.86, 'duration': 0.44}], 'summary': 'Boot camp led to six-figure job offer after two weeks.', 'duration': 25.595, 'max_score': 10127.705, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ10127705.jpg'}], 'start': 9616.513, 'title': 'Css and project progress', 'summary': 'Discusses unexplained css and project progress, concluding a 3-hour session with 125 attendees and encouraging bootcamp enrollment for a cohort starting on december 21st. it also covers building an nft project in less than three hours and future plans, with a success story of a boot camp graduate landing a six-figure job being shared.', 'chapters': [{'end': 9708.643, 'start': 9616.513, 'title': 'Css missing highlights', 'summary': 'Covers unexplained css, concluding a 3-hour session with 125 attendees, encouraging bootcamp enrollment for a cohort starting on december 21st.', 'duration': 92.13, 'highlights': ['The bootcamp session concluded with 125 attendees, showcasing high engagement and interest in the material.', 'Encouragement for bootcamp enrollment for the upcoming cohort starting on December 21st, emphasizing limited future opportunities for participation.', 'The completion of the app building process within three hours, highlighting the efficiency and speed of the development process.']}, {'end': 10326.708, 'start': 9709.665, 'title': 'Project progress and future plans', 'summary': 'Discussed the progress of the project, including building an nft project in less than three hours, and encouraged participants to continue working on it with a meeting scheduled for the next day to discuss further opportunities and career advancement, with a success story of a boot camp graduate landing a six-figure job being shared.', 'duration': 617.043, 'highlights': ['The project involved building an NFT project in under three hours, which would typically take a month for a developer, showcasing the speed and efficiency of the process. The project, which would usually take a developer weeks or a month to build, was completed in under three hours, demonstrating the efficiency and speed of the process.', 'A meeting was scheduled for the next day to discuss career advancement opportunities and future plans, emphasizing the importance of continuing the project and participating in the boot camp for further learning and development. The participants were encouraged to attend a meeting the next day to explore career advancement opportunities and future plans, highlighting the importance of continuing the project and participating in the boot camp for further learning and development.', 'A success story was shared of a boot camp graduate landing a six-figure job, showcasing the potential career opportunities and success that can result from the boot camp. A success story was shared of a boot camp graduate securing a six-figure job, highlighting the potential career opportunities and success that can result from the boot camp.']}], 'duration': 710.195, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ9616513.jpg', 'highlights': ['The bootcamp session concluded with 125 attendees, showcasing high engagement and interest in the material.', 'The completion of the app building process within three hours, highlighting the efficiency and speed of the development process.', 'Encouragement for bootcamp enrollment for the upcoming cohort starting on December 21st, emphasizing limited future opportunities for participation.', 'The project involved building an NFT project in under three hours, showcasing the speed and efficiency of the process.', 'A success story was shared of a boot camp graduate landing a six-figure job, showcasing the potential career opportunities and success that can result from the boot camp.', 'A meeting was scheduled for the next day to discuss career advancement opportunities and future plans, emphasizing the importance of continuing the project and participating in the boot camp for further learning and development.']}, {'end': 11851.65, 'segs': [{'end': 10459.993, 'src': 'embed', 'start': 10408.863, 'weight': 0, 'content': [{'end': 10412.486, 'text': 'We use the OpenSea API to pull all of this data.', 'start': 10408.863, 'duration': 3.623}, {'end': 10417.05, 'text': "So that's how all of these are connected, right? We use React.js to build the front end.", 'start': 10413.467, 'duration': 3.583}, {'end': 10427.881, 'text': 'So you know, we connected React with third web nfts and then open c to pull the data and get access from api,', 'start': 10418.431, 'duration': 9.45}, {'end': 10438.248, 'text': 'and then we use things like metamask to have our wallets, so we could actually mint all this and pull it, if that makes sense.', 'start': 10427.881, 'duration': 10.367}, {'end': 10442.251, 'text': 'so is there, like any other websites like openc, where we can take the source?', 'start': 10438.248, 'duration': 4.003}, {'end': 10447.008, 'text': 'Um, there are, but OpenSea is the most popular one.', 'start': 10443.767, 'duration': 3.241}, {'end': 10452.69, 'text': 'The the the thing that a lot that helped us out a lot with this project was third web,', 'start': 10448.389, 'duration': 4.301}, {'end': 10459.993, 'text': "because that's how we were able to like get the NFTs minted and and and publish to OpenSea and then be able to pull it from there.", 'start': 10452.69, 'duration': 7.303}], 'summary': 'Opensea api used to connect react with third web nfts, enabling minting and publishing on opensea.', 'duration': 51.13, 'max_score': 10408.863, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ10408863.jpg'}, {'end': 10507.194, 'src': 'embed', 'start': 10481.934, 'weight': 1, 'content': [{'end': 10488.743, 'text': 'Like we just had a Thomas who went to our bootcamp and he just got a six figure job offer.', 'start': 10481.934, 'duration': 6.809}, {'end': 10494.107, 'text': 'Like Uh three four days ago at reason one inc.', 'start': 10489.483, 'duration': 4.624}, {'end': 10495.328, 'text': 'and he crushed it.', 'start': 10494.107, 'duration': 1.221}, {'end': 10496.608, 'text': "but not everybody's gonna get that.", 'start': 10495.328, 'duration': 1.28}, {'end': 10502.192, 'text': 'just because Like he was one of the hardest working people and his skill level just skyrocketed.', 'start': 10496.608, 'duration': 5.584}, {'end': 10507.194, 'text': 'So he was like really highly skilled and the people just got so excited that interviewed him.', 'start': 10502.192, 'duration': 5.002}], 'summary': 'A bootcamp graduate recently secured a six-figure job at reason one inc. after demonstrating exceptional skills and hard work.', 'duration': 25.26, 'max_score': 10481.934, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ10481934.jpg'}, {'end': 10715.038, 'src': 'embed', 'start': 10681.203, 'weight': 4, 'content': [{'end': 10682.464, 'text': 'And I wanted to say this to you.', 'start': 10681.203, 'duration': 1.261}, {'end': 10689.508, 'text': 'Thank you so much because I just landed my software engineering internship with Slack.', 'start': 10682.524, 'duration': 6.984}, {'end': 10700.933, 'text': 'With Slack? Are you serious? I just wanted to say thank you so, so much because I would have never done this without you.', 'start': 10690.369, 'duration': 10.564}, {'end': 10702.434, 'text': 'You are amazing, guys.', 'start': 10700.953, 'duration': 1.481}, {'end': 10704.034, 'text': 'It is amazing.', 'start': 10702.454, 'duration': 1.58}, {'end': 10707.876, 'text': "I've been rejected so many times.", 'start': 10705.295, 'duration': 2.581}, {'end': 10715.038, 'text': 'And then because of that one project, that one project in my GitHub, we spoke about it.', 'start': 10708.896, 'duration': 6.142}], 'summary': "Landed software engineering internship with slack, thanks to mentor's help and github project.", 'duration': 33.835, 'max_score': 10681.203, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ10681203.jpg'}, {'end': 11077.85, 'src': 'embed', 'start': 11050.588, 'weight': 5, 'content': [{'end': 11055.912, 'text': "but I think that if you're excited about what you built and you did put in a lot of hard work and if you want to talk about it,", 'start': 11050.588, 'duration': 5.324}, {'end': 11058.634, 'text': 'talk about all the things that you did, I think that goes a long way.', 'start': 11055.912, 'duration': 2.722}, {'end': 11064.418, 'text': 'And I think that passion, that excitement rubs off and people can feel it from you from a distance.', 'start': 11058.894, 'duration': 5.524}, {'end': 11065.98, 'text': 'Cool Thanks.', 'start': 11065.339, 'duration': 0.641}, {'end': 11066.82, 'text': 'You got it.', 'start': 11066.4, 'duration': 0.42}, {'end': 11070.824, 'text': "David says what's the best way to prepare for the bootcamp slash cohort?", 'start': 11067.761, 'duration': 3.063}, {'end': 11077.85, 'text': 'So, for example, the people that are joining, like Cody, who just joined one of our December cohorts,', 'start': 11070.844, 'duration': 7.006}], 'summary': 'Passion and excitement about your work can make a strong impression, influencing others positively.', 'duration': 27.262, 'max_score': 11050.588, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ11050588.jpg'}, {'end': 11345.369, 'src': 'embed', 'start': 11319.947, 'weight': 7, 'content': [{'end': 11326.13, 'text': "cody is going to be in our december cohort, so if you guys join, you'll be cody's peers.", 'start': 11319.947, 'duration': 6.183}, {'end': 11328.251, 'text': 'oscar asks is there interview prep and resume?', 'start': 11326.13, 'duration': 2.121}, {'end': 11332.633, 'text': 'yes, our coding boot camps have interview prep and resume and we will work with you until you get a job.', 'start': 11328.251, 'duration': 4.382}, {'end': 11344.308, 'text': "And if for some reason you don't get a job, we give a job money back guarantee because we don't want just another student.", 'start': 11337.863, 'duration': 6.445}, {'end': 11345.369, 'text': 'We want a success story.', 'start': 11344.388, 'duration': 0.981}], 'summary': 'Coding boot camps offer interview prep, resume assistance, and job money back guarantee to ensure student success.', 'duration': 25.422, 'max_score': 11319.947, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ11319947.jpg'}, {'end': 11454.464, 'src': 'embed', 'start': 11426.025, 'weight': 6, 'content': [{'end': 11430.487, 'text': "put you in this really solid niche where there's a huge demand and not a lot of supply.", 'start': 11426.025, 'duration': 4.462}, {'end': 11437.529, 'text': "So like you become a front end developer, which is valuable already, but then you'll have like ton of like crypto type of projects.", 'start': 11431.267, 'duration': 6.262}, {'end': 11440.311, 'text': "So you'll actually be able to land jobs in crypto companies.", 'start': 11437.91, 'duration': 2.401}, {'end': 11446.453, 'text': 'Awesome Great.', 'start': 11442.151, 'duration': 4.302}, {'end': 11452.003, 'text': 'Yeah, this is amazing, fantastic.', 'start': 11449.622, 'duration': 2.381}, {'end': 11454.464, 'text': 'So yeah, get scheduled on a call.', 'start': 11452.123, 'duration': 2.341}], 'summary': 'Front end developers with crypto skills are in high demand and can land jobs in crypto companies.', 'duration': 28.439, 'max_score': 11426.025, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ11426025.jpg'}, {'end': 11849.201, 'src': 'heatmap', 'start': 11684.744, 'weight': 8, 'content': [{'end': 11692.069, 'text': "So, yeah, the token will be driving next week and also in January we'll be dropping it to 10,000 minted Arabians.", 'start': 11684.744, 'duration': 7.325}, {'end': 11693.63, 'text': "And we're also making a video game.", 'start': 11692.489, 'duration': 1.141}, {'end': 11694.791, 'text': 'So look out for that.', 'start': 11693.87, 'duration': 0.921}, {'end': 11695.751, 'text': 'Oh, damn.', 'start': 11695.111, 'duration': 0.64}, {'end': 11696.952, 'text': "That's going to be hype.", 'start': 11696.072, 'duration': 0.88}, {'end': 11698.133, 'text': 'Oh, shit.', 'start': 11697.713, 'duration': 0.42}, {'end': 11699.714, 'text': "I'm playing the frickin 3D game.", 'start': 11698.173, 'duration': 1.541}, {'end': 11703.705, 'text': 'Damn, I just, yeah, I got on it.', 'start': 11701.923, 'duration': 1.782}, {'end': 11705.126, 'text': 'You guys probably heard that right now.', 'start': 11703.785, 'duration': 1.341}, {'end': 11708.089, 'text': "That's super cool, actually.", 'start': 11706.868, 'duration': 1.221}, {'end': 11709.891, 'text': 'Awesome, Andre.', 'start': 11708.83, 'duration': 1.061}, {'end': 11710.832, 'text': 'Well, thank you, brother.', 'start': 11710.031, 'duration': 0.801}, {'end': 11712.554, 'text': 'Appreciate you for being on here, man.', 'start': 11710.992, 'duration': 1.562}, {'end': 11713.354, 'text': 'Really appreciate you.', 'start': 11712.594, 'duration': 0.76}, {'end': 11723.304, 'text': "Amazing Yeah, some of the projects I'm looking at is a hate beast.", 'start': 11713.374, 'duration': 9.93}, {'end': 11726.256, 'text': 'Hate Beast, it drops this month.', 'start': 11724.275, 'duration': 1.981}, {'end': 11732.8, 'text': "So I'm like, I have alarms for like December 15th, December 18th, 23rd.", 'start': 11727.417, 'duration': 5.383}, {'end': 11734.401, 'text': "I don't know when it's going to drop, but I'm excited.", 'start': 11732.84, 'duration': 1.561}, {'end': 11736.763, 'text': 'I think that project is going to be pretty awesome.', 'start': 11734.421, 'duration': 2.342}, {'end': 11740.305, 'text': 'Okay, cool.', 'start': 11739.824, 'duration': 0.481}, {'end': 11747.049, 'text': 'Any other questions, concerns, feedback, something? Okay.', 'start': 11740.725, 'duration': 6.324}, {'end': 11750.345, 'text': 'Okay This was great.', 'start': 11747.069, 'duration': 3.276}, {'end': 11751.986, 'text': 'Currently transitioning out of the army.', 'start': 11750.425, 'duration': 1.561}, {'end': 11753.487, 'text': 'Deep diving.', 'start': 11753.027, 'duration': 0.46}, {'end': 11754.388, 'text': 'This was very helpful.', 'start': 11753.507, 'duration': 0.881}, {'end': 11756.129, 'text': 'Watch Make sure you guys stay hungry.', 'start': 11754.488, 'duration': 1.641}, {'end': 11757.15, 'text': 'Watch a lot.', 'start': 11756.629, 'duration': 0.521}, {'end': 11758.331, 'text': 'You just trust me.', 'start': 11757.17, 'duration': 1.161}, {'end': 11759.091, 'text': "It'll be your next teacher.", 'start': 11758.371, 'duration': 0.72}, {'end': 11760.973, 'text': 'Okay Amazing.', 'start': 11759.151, 'duration': 1.822}, {'end': 11762.013, 'text': 'Okay, guys.', 'start': 11761.533, 'duration': 0.48}, {'end': 11765.416, 'text': 'With that said, thank you so much for being on here.', 'start': 11762.133, 'duration': 3.283}, {'end': 11769.779, 'text': "How many days is a bootcamp per week? It's three to four days per week.", 'start': 11765.576, 'duration': 4.203}, {'end': 11774.603, 'text': 'Okay Fourth day is usually optional, but yeah, three to four days per week.', 'start': 11769.819, 'duration': 4.784}, {'end': 11777.785, 'text': 'okay, amazing.', 'start': 11776.224, 'duration': 1.561}, {'end': 11778.206, 'text': 'thank you guys.', 'start': 11777.785, 'duration': 0.421}, {'end': 11779.406, 'text': 'so much for coming on here.', 'start': 11778.206, 'duration': 1.2}, {'end': 11782.208, 'text': 'we built an amazing project.', 'start': 11779.406, 'duration': 2.802}, {'end': 11787.852, 'text': 'uh, only we did it in like two and a half hours, which was crazy, but we are done with it.', 'start': 11782.208, 'duration': 5.644}, {'end': 11792.996, 'text': "but you might not be done with it, so you're gonna still go and work on it.", 'start': 11787.852, 'duration': 5.144}, {'end': 11798.6, 'text': "i'm excited about that and by tomorrow you promise you'll have a lot of it done.", 'start': 11792.996, 'duration': 5.604}, {'end': 11801.303, 'text': 'yes, Can I get a promise from you guys?', 'start': 11798.6, 'duration': 2.703}, {'end': 11802.746, 'text': 'Can I get some level of commitment??', 'start': 11801.323, 'duration': 1.423}, {'end': 11805.831, 'text': 'Thumbs up something so I can see it? Team no sleep.', 'start': 11802.826, 'duration': 3.005}, {'end': 11807.794, 'text': 'Yeah Team no sleep.', 'start': 11805.891, 'duration': 1.903}, {'end': 11808.475, 'text': "Let's go.", 'start': 11807.854, 'duration': 0.621}, {'end': 11810.598, 'text': 'Okay Amazing.', 'start': 11808.495, 'duration': 2.103}, {'end': 11813.743, 'text': "I'm excited to see what you guys get accomplished by tomorrow.", 'start': 11810.698, 'duration': 3.045}, {'end': 11817.52, 'text': "I'm going to see you guys tomorrow at 5 p.m. All right.", 'start': 11814.858, 'duration': 2.662}, {'end': 11818.721, 'text': "We've got a surprise for you all.", 'start': 11817.54, 'duration': 1.181}, {'end': 11822.704, 'text': "And we're going to give you a lot more value on the last day.", 'start': 11819.462, 'duration': 3.242}, {'end': 11825.206, 'text': 'Okay So thank you guys so much for coming.', 'start': 11823.044, 'duration': 2.162}, {'end': 11826.607, 'text': 'I love your beautiful face.', 'start': 11825.566, 'duration': 1.041}, {'end': 11828.488, 'text': 'As always, this is your boy Kazi.', 'start': 11826.667, 'duration': 1.821}, {'end': 11829.829, 'text': "And I'll see you.", 'start': 11829.069, 'duration': 0.76}, {'end': 11834.753, 'text': "Who can finish this for me? I'll see you in the next video.", 'start': 11831.11, 'duration': 3.643}, {'end': 11835.414, 'text': 'In the next video.', 'start': 11834.853, 'duration': 0.561}, {'end': 11835.834, 'text': "Let's do this, guys.", 'start': 11835.454, 'duration': 0.38}, {'end': 11836.434, 'text': "Let's go.", 'start': 11835.854, 'duration': 0.58}, {'end': 11839.357, 'text': "I'll see you guys.", 'start': 11838.716, 'duration': 0.641}, {'end': 11840.738, 'text': 'Take care now.', 'start': 11839.377, 'duration': 1.361}, {'end': 11841.999, 'text': 'Have a good night.', 'start': 11841.418, 'duration': 0.581}, {'end': 11843.36, 'text': 'Take care, everybody.', 'start': 11842.019, 'duration': 1.341}, {'end': 11847.715, 'text': 'Goodbye, YouTube.', 'start': 11846.912, 'duration': 0.803}, {'end': 11849.201, 'text': 'Smash that freaking like button.', 'start': 11847.755, 'duration': 1.446}], 'summary': 'Preparing to release 10,000 minted arabians, developing a video game, and discussing project timelines and commitments for a bootcamp.', 'duration': 80.672, 'max_score': 11684.744, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ11684744.jpg'}], 'start': 10326.728, 'title': 'Web 3.0, nft projects, and coding success', 'summary': "Explores the interconnectedness of web 3.0 tools, opensea's role in nft projects, coding career outcomes, and success stories, including a six-figure job offer. it also highlights coding achievements, nft project development, and the potential for niche opportunities in crypto companies, along with upcoming nft token projects and video game developments.", 'chapters': [{'end': 10574.095, 'start': 10326.728, 'title': 'Web 3.0, opensea, and career success', 'summary': 'Discusses the interconnection between web 3.0 tools, the role of opensea in nft projects, and the potential career outcomes after completing a coding bootcamp, including a notable success story of a bootcamp graduate securing a six-figure job offer.', 'duration': 247.367, 'highlights': ['The importance of Web 3.0 tools like MetaMask, Third Web, and OpenSea in NFT projects, enabling the minting and publishing of NFTs and data retrieval through APIs.', 'The significant impact of hard work and skill level on career outcomes, exemplified by a bootcamp graduate securing a $100,000 a year job offer, highlighting the potential for high earning after the program.', 'Managing expectations by emphasizing that not everyone will achieve the same level of success, with average initial job offers likely ranging from $60,000 to $70,000, providing a realistic perspective for bootcamp graduates.', 'The popularity and prominence of OpenSea as a marketplace for NFTs, with the speaker recommending it as the best choice for those seeking to engage in similar projects, providing practical advice for the audience.', 'The utilization of React.js to build the front end and connect with Third Web NFTs, demonstrating the practical application of programming languages and technologies in NFT projects, offering insights into the technical aspects of the discussed projects.']}, {'end': 10915.118, 'start': 10574.095, 'title': 'Coding success and achievements', 'summary': 'Highlights the dedication and success of individuals in coding, with a participant securing a software engineering internship at slack while still in college, earning $44 per hour, and potential for a full-time position, demonstrating the impact of learning and dedication in coding.', 'duration': 341.023, 'highlights': ['A participant shares their achievement of securing a software engineering internship at Slack while still in college, earning $44 per hour and potential for a full-time position. The participant shares landing a software engineering internship at Slack while still in college, with an hourly pay of $44, totaling almost $90,000 a year, and potential for a full-time position after college.', 'The participant expresses gratitude for the impact of learning, showcasing that their project in GitHub impressed interviewers and contributed to their success in securing the internship. The participant attributes their success to learning and dedication, as their project in GitHub impressed interviewers and contributed to securing the internship at Slack.', 'A participant inquires about making a project capable of facilitating purchases through the website, demonstrating a desire to enhance their coding skills and project capabilities. A participant inquires about enhancing their project to facilitate purchases through the website, showcasing their ambition to expand their coding skills and project capabilities.']}, {'end': 11643.26, 'start': 10915.158, 'title': 'Nft project development and bootcamp preparation', 'summary': 'Discusses adding buy now functionality to a project, transitioning from test to real market for selling nfts, and highlights the value of excitement and passion in pitching a project. additionally, it covers the benefits of front-end development in landing jobs, the comprehensive support provided in the bootcamp, and the potential for niche opportunities in crypto companies.', 'duration': 728.102, 'highlights': ['The value of excitement and passion in pitching a project is emphasized, as genuine enthusiasm and detailed knowledge about the project can catch the attention of recruiters. Excitement and passion in pitching a project can catch the attention of recruiters, as demonstrated by the genuine enthusiasm and detailed knowledge exhibited by a successful candidate.', 'Front-end development is highlighted as a valuable skill for landing jobs, with the potential to secure roles in crypto companies due to a high demand for front-end developers in the crypto industry. Front-end development is emphasized as a valuable skill for securing jobs, particularly in the crypto industry where there is a high demand for front-end developers.', 'Comprehensive support, including pre-course materials and interview preparation, is provided in the bootcamp, with a job money-back guarantee if a student does not secure employment. The bootcamp offers comprehensive support, including pre-course materials, interview preparation, and a job money-back guarantee if employment is not obtained.']}, {'end': 11851.65, 'start': 11643.26, 'title': 'Nft token projects and video game development', 'summary': "Discusses involvement in nft token projects, including the upcoming drop of r.i.p. harambe token next week and 10,000 minted arabians in january, as well as the development of a video game; also mentions the anticipation of hate beast project's drop this month and transitioning out of the army.", 'duration': 208.39, 'highlights': ['The upcoming drop of R.I.P. Harambe token next week and 10,000 minted Arabians in January, as well as the development of a video game', "Mentions the anticipation of Hate Beast project's drop this month", 'Transitioning out of the army']}], 'duration': 1524.922, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hhZtiytNaBQ/pics/hhZtiytNaBQ10326728.jpg', 'highlights': ['The interconnectedness of Web 3.0 tools and OpenSea in NFT projects, enabling minting and publishing of NFTs and data retrieval through APIs.', 'A bootcamp graduate securing a $100,000 a year job offer, highlighting the potential for high earning after the program.', 'The popularity and prominence of OpenSea as a marketplace for NFTs, recommended as the best choice for similar projects.', 'The utilization of React.js to build the front end and connect with Third Web NFTs, demonstrating practical application of programming languages in NFT projects.', 'A participant securing a software engineering internship at Slack while still in college, with potential for a full-time position.', 'The value of excitement and passion in pitching a project, catching the attention of recruiters.', 'Front-end development highlighted as a valuable skill for landing jobs, particularly in the crypto industry.', 'Comprehensive support, including pre-course materials and interview preparation, provided in the bootcamp, with a job money-back guarantee if employment is not obtained.', 'The upcoming drop of R.I.P. Harambe token next week and 10,000 minted Arabians in January, as well as the development of a video game.', "Mentions the anticipation of Hate Beast project's drop this month.", 'Transitioning out of the army.']}], 'highlights': ['The completion of the app building process within three hours, highlighting the efficiency and speed of the development process.', 'Encouragement for bootcamp enrollment for the upcoming cohort starting on December 21st, emphasizing limited future opportunities for participation.', 'A success story was shared of a boot camp graduate landing a six-figure job, showcasing the potential career opportunities and success that can result from the boot camp.', 'The interconnectedness of Web 3.0 tools and OpenSea in NFT projects, enabling minting and publishing of NFTs and data retrieval through APIs.', 'The popularity and prominence of OpenSea as a marketplace for NFTs, recommended as the best choice for similar projects.', 'Front-end development highlighted as a valuable skill for landing jobs, particularly in the crypto industry.']}