title
Code your own YouTube app: YouTube API + HTML + CSS + JavaScript (full tutorial)

description
Create a dynamic YouTube playlist app using HTML, CSS, Javascript and jQuery. 🔗The Completed App - https://codepen.io/Middi/pen/QQrOdB 🔗 Thumbnail image - https://i.ytimg.com/vi/qxWrnhZEuRU/mqdefault.jpg 🔗YouTube Logo - https://github.com/Middi/youtube-api/blob/master/images/logo.png 🎥Check out Richard's YouTube channel - https://www.youtube.com/channel/UCimIdsDPn0mE03Cb7C6aR8Q -- Learn to code for free and get a developer job: https://www.freecodecamp.com Read hundreds of articles on programming: https://medium.freecodecamp.com

detail
{'title': 'Code your own YouTube app: YouTube API + HTML + CSS + JavaScript (full tutorial)', 'heatmap': [{'end': 1584.063, 'start': 1499.168, 'weight': 1}], 'summary': 'Learn to create a youtube playlist app with 12 videos using the youtube api, html, css, and javascript, including styling, embedding videos, dynamic content creation, and api data retrieval.', 'chapters': [{'end': 57.64, 'segs': [{'end': 57.64, 'src': 'embed', 'start': 26.927, 'weight': 0, 'content': [{'end': 32.351, 'text': "so basically, what it does is I've created a playlist here on my YouTube channel.", 'start': 26.927, 'duration': 5.424}, {'end': 37.794, 'text': 'And the link for all the stuff I give you links for will be in the description.', 'start': 33.352, 'duration': 4.442}, {'end': 41.295, 'text': "And there's 12 videos in here.", 'start': 39.354, 'duration': 1.941}, {'end': 47.797, 'text': 'So this playlist will be pulled into our app.', 'start': 42.595, 'duration': 5.202}, {'end': 50.338, 'text': 'You can see the order is the same in our app here.', 'start': 47.877, 'duration': 2.461}, {'end': 57.64, 'text': "It will be pulled in using the YouTube API, right? Cool, so let's get started.", 'start': 51.718, 'duration': 5.922}], 'summary': 'Playlist with 12 videos will be pulled into the app using youtube api.', 'duration': 30.713, 'max_score': 26.927, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9sWEecNUW-o/pics/9sWEecNUW-o26927.jpg'}], 'start': 0.509, 'title': 'Creating a youtube playlist app with youtube api', 'summary': 'Provides a guide to create a simple youtube playlist app using the youtube api, with 12 videos in a consistent order and linking necessary resources in the description.', 'chapters': [{'end': 57.64, 'start': 0.509, 'title': 'Youtube playlist app with youtube api', 'summary': 'Introduces creating a simple youtube playlist app using the youtube api, pulling in 12 videos with consistent order, and linking the necessary resources in the description.', 'duration': 57.131, 'highlights': ['The app pulls in a playlist with 12 videos using the YouTube API.', 'The playlist in the app maintains the same order as on the YouTube channel.', 'The transcript contains links to resources for creating the app.']}], 'duration': 57.131, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9sWEecNUW-o/pics/9sWEecNUW-o509.jpg', 'highlights': ['The app pulls in a playlist with 12 videos using the YouTube API.', 'The playlist in the app maintains the same order as on the YouTube channel.', 'The transcript contains links to resources for creating the app.']}, {'end': 456.24, 'segs': [{'end': 89.7, 'src': 'embed', 'start': 58.14, 'weight': 0, 'content': [{'end': 65.924, 'text': "So the first thing we wanna do We probably want to create this central div here in the middle where it's white.", 'start': 58.14, 'duration': 7.784}, {'end': 69.646, 'text': 'Then this div is built into sections.', 'start': 66.024, 'duration': 3.622}, {'end': 73.149, 'text': "So there's a header, another section, and the main bit.", 'start': 70.587, 'duration': 2.562}, {'end': 76.391, 'text': "So let's build that section.", 'start': 74.61, 'duration': 1.781}, {'end': 80.854, 'text': 'So jump into CodePen.', 'start': 77.431, 'duration': 3.423}, {'end': 86.257, 'text': 'First thing, I just want you to check that you have a few things ready.', 'start': 81.014, 'duration': 5.243}, {'end': 89.7, 'text': 'So jump into the settings cog at the side of the CSS.', 'start': 87.038, 'duration': 2.662}], 'summary': 'Creating a central white div with sections in codepen.', 'duration': 31.56, 'max_score': 58.14, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9sWEecNUW-o/pics/9sWEecNUW-o58140.jpg'}, {'end': 430.056, 'src': 'embed', 'start': 289.934, 'weight': 1, 'content': [{'end': 293.817, 'text': 'logo This is so in the CSS we can change it.', 'start': 289.934, 'duration': 3.883}, {'end': 295.198, 'text': 'Then hit tab.', 'start': 294.657, 'duration': 0.541}, {'end': 303.675, 'text': 'We want then to fill out the SRC with the actual location of the image.', 'start': 296.969, 'duration': 6.706}, {'end': 306.938, 'text': "So here's the location for me.", 'start': 305.197, 'duration': 1.741}, {'end': 309.681, 'text': "And it's a bit too big.", 'start': 308.72, 'duration': 0.961}, {'end': 312.423, 'text': "So let's change that.", 'start': 310.642, 'duration': 1.781}, {'end': 315.366, 'text': "Let's go to logo in the CSS.", 'start': 312.924, 'duration': 2.442}, {'end': 318.769, 'text': "Let's change it to width 120 pixels.", 'start': 316.407, 'duration': 2.362}, {'end': 324.545, 'text': "All right, that's cool.", 'start': 323.905, 'duration': 0.64}, {'end': 325.426, 'text': "So that's getting better.", 'start': 324.585, 'duration': 0.841}, {'end': 337.452, 'text': 'But if you notice on here, when we scroll up this and the header, the video on the header stays in the same place, right?', 'start': 326.306, 'duration': 11.146}, {'end': 343.416, 'text': 'And if we did that now, you can see the YouTube is disappearing.', 'start': 340.074, 'duration': 3.342}, {'end': 346.998, 'text': "So let's fix that before we go any further.", 'start': 344.696, 'duration': 2.302}, {'end': 359.127, 'text': "So I'm just going to go above the logo and say yo, header tags, i want you to stay fixed to the top.", 'start': 347.058, 'duration': 12.069}, {'end': 370.7, 'text': "so it's a position fixed right doesn't look like it did that much, but if i scroll now And I've scrolled and you can see the scroll bar here.", 'start': 359.127, 'duration': 11.573}, {'end': 372.541, 'text': "It's staying where it is.", 'start': 371.701, 'duration': 0.84}, {'end': 379.989, 'text': "Right, okay, so let's make this image central, centralized.", 'start': 374.023, 'duration': 5.966}, {'end': 393.122, 'text': 'We can do that by saying text align center, right? He says.', 'start': 380.75, 'duration': 12.372}, {'end': 400.338, 'text': 'Ah, so we need to give it, so it is centered.', 'start': 397.197, 'duration': 3.141}, {'end': 414.683, 'text': "So if I go background color red, you'll see the actual background of it is only a small amount and we want it to be the full width right?", 'start': 400.878, 'duration': 13.805}, {'end': 423.026, 'text': "So we want it to be also 560 pixels, because when you make something fixed, you're taking out the flow of the document.", 'start': 414.723, 'duration': 8.303}, {'end': 430.056, 'text': "So normally with a div, you'd go header, main, and it'd carry on going down the page one after another.", 'start': 423.789, 'duration': 6.267}], 'summary': 'Adjusting css properties to centralize image, fix header position, and set image width to 120 pixels.', 'duration': 140.122, 'max_score': 289.934, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9sWEecNUW-o/pics/9sWEecNUW-o289934.jpg'}], 'start': 58.14, 'title': 'Creating central div and sections', 'summary': 'Discusses creating a central div with sections for header, video, and main content using emmet in codepen, and applying styles such as background color and dimensions. it also demonstrates how to center an image, fix the header position, and adjust its width in a web design tutorial, using css to style the elements and achieve the desired layout.', 'chapters': [{'end': 258.064, 'start': 58.14, 'title': 'Creating central div and sections', 'summary': 'Discusses creating a central div with sections for header, video, and main content using emmet in codepen, and applying styles such as background color and dimensions.', 'duration': 199.924, 'highlights': ['Creating central div and sections using Emmet in CodePen', 'Applying background color and dimensions']}, {'end': 456.24, 'start': 258.764, 'title': 'Web design tutorial', 'summary': 'Demonstrates how to center an image, fix the header position, and adjust its width in a web design tutorial, using css to style the elements and achieve the desired layout.', 'duration': 197.476, 'highlights': ["The chapter demonstrates how to fix the header position using 'position: fixed' in CSS, ensuring that the header stays at the top of the page as the user scrolls.", "The tutorial explains the process of centering an image using 'text-align: center' in CSS to achieve a centralized layout.", "The instructor adjusts the width of the header image to 560 pixels in the CSS, highlighting how 'position: fixed' affects the flow and inheritance of width in the document.", 'The tutorial illustrates the method of styling the image with a class in CSS to enable easy modification of its properties.']}], 'duration': 398.1, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9sWEecNUW-o/pics/9sWEecNUW-o58140.jpg', 'highlights': ['Creating central div and sections using Emmet in CodePen', 'Applying background color and dimensions', "The chapter demonstrates how to fix the header position using 'position: fixed' in CSS, ensuring that the header stays at the top of the page as the user scrolls.", "The tutorial explains the process of centering an image using 'text-align: center' in CSS to achieve a centralized layout.", "The instructor adjusts the width of the header image to 560 pixels in the CSS, highlighting how 'position: fixed' affects the flow and inheritance of width in the document.", 'The tutorial illustrates the method of styling the image with a class in CSS to enable easy modification of its properties.']}, {'end': 895.418, 'segs': [{'end': 486.928, 'src': 'embed', 'start': 456.24, 'weight': 0, 'content': [{'end': 464.685, 'text': 'and now that text align works, look, if i take that off, it goes across there, because now it knows what width it has.', 'start': 456.24, 'duration': 8.445}, {'end': 467.602, 'text': "right. that's good for now.", 'start': 465.942, 'duration': 1.66}, {'end': 480.686, 'text': "so let's put in that video right, and the way you can get this video embedded you can do straight from youtube.", 'start': 467.602, 'duration': 13.084}, {'end': 486.928, 'text': 'if i jump into youtube, this is our playlist and i click on one of the videos, and this is with any video right.', 'start': 480.686, 'duration': 6.242}], 'summary': 'Demonstrating text alignment feature and embedding video from youtube.', 'duration': 30.688, 'max_score': 456.24, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9sWEecNUW-o/pics/9sWEecNUW-o456240.jpg'}, {'end': 554.206, 'src': 'embed', 'start': 521.626, 'weight': 1, 'content': [{'end': 533.778, 'text': "so the video is scrolling and we don't want that to happen, and this header is kind of sitting on top of it.", 'start': 521.626, 'duration': 12.152}, {'end': 540.985, 'text': "so why don't we make this section the same position fixed as the header?", 'start': 533.778, 'duration': 7.207}, {'end': 546.28, 'text': "Well, it also needs the width and the text line doesn't really matter to it.", 'start': 541.977, 'duration': 4.303}, {'end': 550.483, 'text': "So why don't we just tag on to here by saying colon section.", 'start': 546.36, 'duration': 4.123}, {'end': 554.206, 'text': 'So now these have both the same things going on.', 'start': 551.244, 'duration': 2.962}], 'summary': 'Fix video scrolling, make header and section position fixed.', 'duration': 32.58, 'max_score': 521.626, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9sWEecNUW-o/pics/9sWEecNUW-o521626.jpg'}, {'end': 669.569, 'src': 'embed', 'start': 636.878, 'weight': 2, 'content': [{'end': 649.382, 'text': 'what we want to do here is need an image and the details, so we could probably fit these in just one container and split this container too right.', 'start': 636.878, 'duration': 12.504}, {'end': 661.186, 'text': "so we're going to do that very semantically and jump into our html and we're going to create an article and hit tab.", 'start': 649.382, 'duration': 11.804}, {'end': 669.569, 'text': 'an article is just a very semantic way of basically saying This is kind of the main container of what holds our content.', 'start': 661.186, 'duration': 8.383}], 'summary': 'Creating a semantic article container for image and details.', 'duration': 32.691, 'max_score': 636.878, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9sWEecNUW-o/pics/9sWEecNUW-o636878.jpg'}, {'end': 780.128, 'src': 'embed', 'start': 743.687, 'weight': 4, 'content': [{'end': 745.767, 'text': "so that's all the article needs to have right.", 'start': 743.687, 'duration': 2.08}, {'end': 756.63, 'text': 'so it needs an image tag inside an article and a div with details inside an article.', 'start': 745.767, 'duration': 10.863}, {'end': 762.612, 'text': "as you can see, it's right up here now and this, the header, doesn't seem to have a background.", 'start': 756.63, 'duration': 5.982}, {'end': 764.841, 'text': "So there's a couple of things we need to do.", 'start': 763.78, 'duration': 1.061}, {'end': 769.763, 'text': 'Jump into our CSS and for this header.', 'start': 766.061, 'duration': 3.702}, {'end': 771.464, 'text': 'so this is header and section.', 'start': 769.763, 'duration': 1.701}, {'end': 780.128, 'text': 'we can just give it a background color of that white color, which is three Fs, hashtag, three Fs.', 'start': 771.464, 'duration': 8.664}], 'summary': 'Article needs image tag, div with details, and header background color set to #fff.', 'duration': 36.441, 'max_score': 743.687, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9sWEecNUW-o/pics/9sWEecNUW-o743687.jpg'}], 'start': 456.24, 'title': 'Embedding youtube video and semantic html', 'summary': 'Covers embedding youtube videos and fixing their position on a webpage using css, as well as utilizing semantic html elements like article, image, and div, and applying css for consistent layout and dimension adjustments.', 'chapters': [{'end': 636.878, 'start': 456.24, 'title': 'Embedding youtube video and fixing video position', 'summary': 'Demonstrates how to embed a youtube video and fix its position on a web page using css, ensuring it stays in place as the user scrolls, and adjusting the position of other elements to prevent overlap.', 'duration': 180.638, 'highlights': ["The chapter explains how to embed a YouTube video into a web page using the 'embed' option available on YouTube, which provides the necessary code for the video.", 'It also covers fixing the position of the video using CSS, ensuring it remains in place as the user scrolls, and adjusting the position of other elements, such as the header and logo, to prevent overlap.', "The tutorial provides specific CSS instructions for fixing the position of the video element and adjusting the position of other elements, such as setting the video and header to 'position: fixed' and adding padding to the logo."]}, {'end': 895.418, 'start': 636.878, 'title': 'Semantic html and css styling', 'summary': 'Covers the use of semantic html elements like article, image, and div, and the application of css to style these elements, adjusting padding and dimensions for a consistent layout.', 'duration': 258.54, 'highlights': ['The chapter emphasizes the use of semantic HTML elements such as article, image, and div to encapsulate content, ensuring a structured and accessible webpage.', 'The speaker demonstrates the process of adding an image and details container within the article, ensuring a visually appealing layout and user-friendly experience.', 'CSS is utilized to style the HTML elements, including setting background colors, adjusting padding, and specifying dimensions for consistent design and layout.', 'Specific CSS properties, such as background-color and padding, are applied to the header and section elements, enhancing the visual presentation of the webpage.', 'The speaker illustrates the use of CSS to adjust the dimensions of the image by setting a specific height for the thumbnail class, ensuring a uniform appearance for different aspect ratios.']}], 'duration': 439.178, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9sWEecNUW-o/pics/9sWEecNUW-o456240.jpg', 'highlights': ["The chapter explains how to embed a YouTube video using the 'embed' option on YouTube.", 'Covers fixing the video position using CSS to remain in place as the user scrolls.', 'Emphasizes the use of semantic HTML elements like article, image, and div for structured content.', 'Demonstrates adding an image and details container within the article for a visually appealing layout.', 'Utilizes CSS to style HTML elements, including setting background colors and adjusting padding.', 'Illustrates the use of CSS to adjust image dimensions for a uniform appearance.']}, {'end': 1419.048, 'segs': [{'end': 1015.689, 'src': 'embed', 'start': 927.807, 'weight': 0, 'content': [{'end': 930.248, 'text': "It's a little bit disjointed, right? This is kind of down.", 'start': 927.807, 'duration': 2.441}, {'end': 936.591, 'text': 'The reason is because these have their own margins and paddings, the P and the H4.', 'start': 931.268, 'duration': 5.323}, {'end': 938.591, 'text': "So let's pull them off now.", 'start': 937.551, 'duration': 1.04}, {'end': 943.253, 'text': "Let's do some styling of the typography.", 'start': 938.631, 'duration': 4.622}, {'end': 949.816, 'text': "We're gonna do it at the top because I like to have my typography out of the way at the top.", 'start': 944.274, 'duration': 5.542}, {'end': 956.419, 'text': "So the way we do this, we're gonna use something in SCSS.", 'start': 950.976, 'duration': 5.443}, {'end': 967.514, 'text': "it's called a mixing and basically what that does is it gives you some pre-arranged code which then you can use over and over again.", 'start': 958.828, 'duration': 8.686}, {'end': 973.178, 'text': "so it's kind of like a variable, but in CSS.", 'start': 967.514, 'duration': 5.664}, {'end': 979.643, 'text': "so to do this we want to basically say we're creating a mixing.", 'start': 973.178, 'duration': 6.465}, {'end': 981.765, 'text': "so at mixing, then we're going to give it a name.", 'start': 979.643, 'duration': 2.122}, {'end': 993.474, 'text': 'So we want to create a section of code called font base, which we can then import into multiple CSS blocks.', 'start': 983.086, 'duration': 10.388}, {'end': 1000.359, 'text': 'So we want to take off the padding, right? And we want to take off the margin.', 'start': 994.695, 'duration': 5.664}, {'end': 1005.563, 'text': 'And we want to do a few other things.', 'start': 1004.242, 'duration': 1.321}, {'end': 1015.689, 'text': 'We want to give it a line height of 1.3, which is basically,', 'start': 1005.623, 'duration': 10.066}], 'summary': 'Styling typography using scss mixing for reusability and consistency.', 'duration': 87.882, 'max_score': 927.807, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9sWEecNUW-o/pics/9sWEecNUW-o927807.jpg'}, {'end': 1106.973, 'src': 'embed', 'start': 1042.381, 'weight': 5, 'content': [{'end': 1048.247, 'text': "We're saying, Hey, H4, we want you to be, uh, to include font base.", 'start': 1042.381, 'duration': 5.866}, {'end': 1054.695, 'text': 'So the way you do it and you say at include, so you include in it, then just call the name font base.', 'start': 1048.928, 'duration': 5.767}, {'end': 1060.83, 'text': 'And you can see that just jumped up then because now it has the padding and everything else taken off it.', 'start': 1056.527, 'duration': 4.303}, {'end': 1069.456, 'text': 'The P tag, we also want that to be including our font base.', 'start': 1062.451, 'duration': 7.005}, {'end': 1073.719, 'text': 'So include font base and watch what it does.', 'start': 1070.376, 'duration': 3.343}, {'end': 1075.46, 'text': 'Boom, there you go.', 'start': 1074.779, 'duration': 0.681}, {'end': 1078.862, 'text': "But now they're the same.", 'start': 1076.941, 'duration': 1.921}, {'end': 1082.845, 'text': 'And in our visual, this is gray and smaller.', 'start': 1079.162, 'duration': 3.683}, {'end': 1085.086, 'text': "So let's do gray and smaller then.", 'start': 1083.866, 'duration': 1.22}, {'end': 1085.687, 'text': "Let's do that now.", 'start': 1085.106, 'duration': 0.581}, {'end': 1089.448, 'text': 'So color, which is how you get the font color.', 'start': 1087.085, 'duration': 2.363}, {'end': 1093.292, 'text': "I'm just going to call it gray because I know that's a good color.", 'start': 1089.468, 'duration': 3.824}, {'end': 1095.394, 'text': 'And we want to make the text smaller.', 'start': 1094.133, 'duration': 1.261}, {'end': 1100.78, 'text': "So we're going to say font size 0.7 rem.", 'start': 1095.434, 'duration': 5.346}, {'end': 1106.973, 'text': 'There you go.', 'start': 1106.553, 'duration': 0.42}], 'summary': 'Applying font base to h4 and p tags, resulting in color change and smaller text size.', 'duration': 64.592, 'max_score': 1042.381, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9sWEecNUW-o/pics/9sWEecNUW-o1042381.jpg'}, {'end': 1183.302, 'src': 'embed', 'start': 1143.325, 'weight': 4, 'content': [{'end': 1155.473, 'text': "So we need to now start adjusting some paddings, right? So the way we're going to do that is our article.", 'start': 1143.325, 'duration': 12.148}, {'end': 1157.955, 'text': 'So if we jump down to our article.', 'start': 1156.494, 'duration': 1.461}, {'end': 1160.957, 'text': 'Our article is only display flex at the moment.', 'start': 1159.036, 'duration': 1.921}, {'end': 1162.198, 'text': 'So it needs a few things.', 'start': 1161.077, 'duration': 1.121}, {'end': 1163.959, 'text': 'We want this.', 'start': 1163.379, 'duration': 0.58}, {'end': 1180.38, 'text': 'this details to sit in the middle of kind of the whole article, so we can say align items center and that that aligns centrally.', 'start': 1165.29, 'duration': 15.09}, {'end': 1183.302, 'text': 'you see, it just moved down.', 'start': 1180.38, 'duration': 2.922}], 'summary': 'Adjust paddings and align items center for article display flex.', 'duration': 39.977, 'max_score': 1143.325, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9sWEecNUW-o/pics/9sWEecNUW-o1143325.jpg'}, {'end': 1305.741, 'src': 'embed', 'start': 1271.323, 'weight': 7, 'content': [{'end': 1279.092, 'text': "You can just say and hover, and it knows you're dealing with whatever you're inside of, because we're still inside of these curly brackets, right?", 'start': 1271.323, 'duration': 7.769}, {'end': 1282.3, 'text': 'so, and hover.', 'start': 1280.598, 'duration': 1.702}, {'end': 1283.04, 'text': 'so the articles.', 'start': 1282.3, 'duration': 0.74}, {'end': 1299.195, 'text': 'hover, we want to have a border of two pixels solid and we want this red color which is hash ff9999 right.', 'start': 1283.04, 'duration': 16.155}, {'end': 1305.741, 'text': "so now, when we hover, there you go, but it's looking a little funky when we they're kind of moving about,", 'start': 1299.195, 'duration': 6.546}], 'summary': 'Css code adjusts border and color on hover', 'duration': 34.418, 'max_score': 1271.323, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9sWEecNUW-o/pics/9sWEecNUW-o1271323.jpg'}], 'start': 895.418, 'title': 'Styling flexbox container and css for multiple elements', 'summary': 'Discusses styling a flexbox container with scss mixing and addresses positioning and typography issues while explaining the concept of mixing in scss. it also covers creating a reusable code section for css styling, including adjustments for padding, margins, line height, font weight, font color, font size, alignment, and hover effects for multiple elements, resulting in a scrollable list.', 'chapters': [{'end': 981.765, 'start': 895.418, 'title': 'Styling flexbox container with scss mixing', 'summary': 'Discusses styling a flexbox container in an article using scss mixing, addressing the positioning and typography issues while explaining the concept of mixing in scss.', 'duration': 86.347, 'highlights': ['The chapter discusses styling a flexbox container in an article using SCSS mixing, addressing the positioning and typography issues while explaining the concept of mixing in SCSS.', 'The speaker explains the process of using a SCSS mixin to create pre-arranged code for reusability, likening it to a variable in CSS.', 'The chapter highlights the need to use SCSS mixing to address margins and paddings in typography, emphasizing the advantages of pre-arranged code for repetitive use.']}, {'end': 1419.048, 'start': 983.086, 'title': 'Css styling for multiple elements', 'summary': 'Covers creating a reusable code section for css styling, including adjusting padding, margins, line height, font weight, font color, font size, alignment, and hover effects for multiple elements, resulting in a scrollable list.', 'duration': 435.962, 'highlights': ['The chapter explains creating a CSS section for reusable styling, including removing padding and margin, setting line height to 1.3, and font weight to 600, resulting in consistent styling across multiple elements.', 'It details the process of including the font base code to H4 and P tags, resulting in the removal of padding and consistent styling for both elements.', 'The transcript outlines setting the font color to gray and font size to 0.7 rem, providing specific styling attributes for text color and size.', 'It describes adjusting padding and alignment for the article and details sections, including setting specific pixel values for padding and aligning items within the article.', 'The chapter explains implementing a hover effect using SCSS, including specifying border color and size, and rounding the edges of the container and thumbnails.']}], 'duration': 523.63, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9sWEecNUW-o/pics/9sWEecNUW-o895418.jpg', 'highlights': ['The chapter discusses styling a flexbox container in an article using SCSS mixing, addressing positioning and typography issues (3)', 'The chapter explains creating a CSS section for reusable styling, including removing padding and margin, setting line height to 1.3, and font weight to 600 (2)', 'The speaker explains the process of using a SCSS mixin to create pre-arranged code for reusability, likening it to a variable in CSS (1)', 'The chapter highlights the need to use SCSS mixing to address margins and paddings in typography, emphasizing the advantages of pre-arranged code for repetitive use (1)', 'It describes adjusting padding and alignment for the article and details sections, including setting specific pixel values for padding and aligning items within the article (1)', 'The transcript outlines setting the font color to gray and font size to 0.7 rem, providing specific styling attributes for text color and size (1)', 'It details the process of including the font base code to H4 and P tags, resulting in the removal of padding and consistent styling for both elements (1)', 'The chapter explains implementing a hover effect using SCSS, including specifying border color and size, and rounding the edges of the container and thumbnails (1)']}, {'end': 1847.343, 'segs': [{'end': 1446.354, 'src': 'embed', 'start': 1419.048, 'weight': 0, 'content': [{'end': 1423.09, 'text': 'the video stays where it is, the header stays where it is and you can scroll down.', 'start': 1419.048, 'duration': 4.042}, {'end': 1427.597, 'text': "Obviously, we don't have the click functionality in yet.", 'start': 1424.614, 'duration': 2.983}, {'end': 1431.02, 'text': "That's going to be dealt in the JavaScript and the jQuery in the next video.", 'start': 1427.717, 'duration': 3.303}, {'end': 1437.471, 'text': "the next video we're going to actually look at how to set up the api uh,", 'start': 1432.23, 'duration': 5.241}, {'end': 1444.133, 'text': 'how to get an api key and how to make the calls and make all this information dynamic.', 'start': 1437.471, 'duration': 6.662}, {'end': 1446.354, 'text': 'it does mean we pull a bit of this information out of here.', 'start': 1444.133, 'duration': 2.221}], 'summary': 'Video discusses setting up api, getting key, making calls, and dynamic information.', 'duration': 27.306, 'max_score': 1419.048, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9sWEecNUW-o/pics/9sWEecNUW-o1419048.jpg'}, {'end': 1613.465, 'src': 'heatmap', 'start': 1499.168, 'weight': 3, 'content': [{'end': 1505.45, 'text': 'so let me show you first the youtube docs.', 'start': 1499.168, 'duration': 6.282}, {'end': 1506.79, 'text': 'so here we are.', 'start': 1505.45, 'duration': 1.34}, {'end': 1509.791, 'text': 'the link for this is in the description as well.', 'start': 1506.79, 'duration': 3.001}, {'end': 1516.653, 'text': "um, and we're interested in playlist items and the list of those playlist items.", 'start': 1509.791, 'duration': 6.862}, {'end': 1520.137, 'text': "you can see on the left here, but you can see there's all sorts here.", 'start': 1516.653, 'duration': 3.484}, {'end': 1531.389, 'text': "there's channels, comments you can get comments from them, subscriptions, thumbnails, lots of information we can pull from the youtube api.", 'start': 1520.137, 'duration': 11.252}, {'end': 1536.71, 'text': "so What we're going to do is we're going to have a little play, so we're going to click on JavaScript here.", 'start': 1531.389, 'duration': 5.321}, {'end': 1541.733, 'text': "And I know there's different bits of information you can get.", 'start': 1537.751, 'duration': 3.982}, {'end': 1543.474, 'text': 'I know we just want snippet.', 'start': 1542.233, 'duration': 1.241}, {'end': 1546.796, 'text': "So I'm just going to say, yep, take snippet.", 'start': 1544.815, 'duration': 1.981}, {'end': 1551.198, 'text': "We've got 12 videos, but we can bring back 20 videos to our playlist.", 'start': 1547.816, 'duration': 3.382}, {'end': 1562.105, 'text': "And what we need to do is if we put in our playlist ID here, which is this for me, I'll put this in the link as well so you can use it.", 'start': 1552.279, 'duration': 9.826}, {'end': 1572.495, 'text': 'And if we click execute, you can see here, create a weather app using an API, part one HTML.', 'start': 1563.089, 'duration': 9.406}, {'end': 1575.538, 'text': 'Go down all the thumbnail stuff here.', 'start': 1573.736, 'duration': 1.802}, {'end': 1577.919, 'text': 'Again, part two here.', 'start': 1576.338, 'duration': 1.581}, {'end': 1580.601, 'text': 'And all the videos are listed here.', 'start': 1578.98, 'duration': 1.621}, {'end': 1584.063, 'text': "So it's made that request for us in the documentation.", 'start': 1580.661, 'duration': 3.402}, {'end': 1587.045, 'text': 'So we can actually see if this is gonna work.', 'start': 1584.684, 'duration': 2.361}, {'end': 1590.268, 'text': 'And if the information coming back is what we actually want.', 'start': 1588.266, 'duration': 2.002}, {'end': 1592.35, 'text': "And it is, so that's cool.", 'start': 1591.209, 'duration': 1.141}, {'end': 1595.452, 'text': 'And it sends that request to this URL here.', 'start': 1592.79, 'duration': 2.662}, {'end': 1599.935, 'text': "So we're gonna do the same.", 'start': 1597.413, 'duration': 2.522}, {'end': 1613.465, 'text': 'And to do that, first of all, we need the YouTube API enabled and we also need an API key, so effectively, a password right?', 'start': 1601.977, 'duration': 11.488}], 'summary': 'Demonstrating how to use the youtube api to retrieve snippet information and display 20 videos from a playlist.', 'duration': 32.804, 'max_score': 1499.168, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9sWEecNUW-o/pics/9sWEecNUW-o1499168.jpg'}, {'end': 1764.236, 'src': 'embed', 'start': 1679.824, 'weight': 1, 'content': [{'end': 1681.525, 'text': "then that'll create it for you.", 'start': 1679.824, 'duration': 1.701}, {'end': 1683.046, 'text': 'There might be a little bit of a time delay.', 'start': 1681.705, 'duration': 1.341}, {'end': 1685.728, 'text': 'You might have to wait for it to go through the process of it.', 'start': 1683.066, 'duration': 2.662}, {'end': 1693.554, 'text': 'But after a minute or so, you should be able to then select your project from in here.', 'start': 1686.329, 'duration': 7.225}, {'end': 1695.415, 'text': "So I'm going to select new project.", 'start': 1693.574, 'duration': 1.841}, {'end': 1701.32, 'text': 'And then we want to enable the YouTube API.', 'start': 1696.977, 'duration': 4.343}, {'end': 1705.423, 'text': "So we'll do that by just clicking enable APIs and services right here.", 'start': 1701.88, 'duration': 3.543}, {'end': 1708.793, 'text': 'and searching.', 'start': 1707.432, 'duration': 1.361}, {'end': 1713.797, 'text': "so we're going to search youtube and there's four apis here.", 'start': 1708.793, 'duration': 5.004}, {'end': 1725.425, 'text': 'we want youtube data api v3 right, because this is just getting provides information form such as videos, playlists, etc.', 'start': 1713.797, 'duration': 11.628}, {'end': 1729.408, 'text': 'so click on that one and click the big blue enable button.', 'start': 1725.425, 'duration': 3.983}, {'end': 1736.036, 'text': "It'll do this spinny thing and it'll take a while to enable it again.", 'start': 1731.974, 'duration': 4.062}, {'end': 1744.08, 'text': "But once it's enabled, what we need to do is we then need to get an API key, which is effectively the password.", 'start': 1736.896, 'duration': 7.184}, {'end': 1752.584, 'text': "So if you watched the last video we did, the weather app video, you'll know that we could just send the request and get information back.", 'start': 1744.94, 'duration': 7.644}, {'end': 1756.311, 'text': "This time we don't have that ability.", 'start': 1753.749, 'duration': 2.562}, {'end': 1759.793, 'text': 'We need to send with it our information.', 'start': 1756.911, 'duration': 2.882}, {'end': 1764.236, 'text': 'So on the left hand side, you can see credentials.', 'start': 1760.953, 'duration': 3.283}], 'summary': 'Enable youtube api, get api key, and select project in a minute or so.', 'duration': 84.412, 'max_score': 1679.824, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9sWEecNUW-o/pics/9sWEecNUW-o1679824.jpg'}, {'end': 1847.343, 'src': 'embed', 'start': 1816.728, 'weight': 5, 'content': [{'end': 1823.89, 'text': 'So click on that, save and close, and jQuery is installed, ready to use right?', 'start': 1816.728, 'duration': 7.162}, {'end': 1827.391, 'text': 'So how do we start this off?', 'start': 1825.05, 'duration': 2.341}, {'end': 1831.432, 'text': 'Well, we need to start off with a container for jQuery to work in.', 'start': 1827.791, 'duration': 3.641}, {'end': 1836.455, 'text': "So we say dollar for hey jQuery, we're about to use you.", 'start': 1832.592, 'duration': 3.863}, {'end': 1841.919, 'text': "So you're saying when the document, so that's the page, this is the document.", 'start': 1836.475, 'duration': 5.444}, {'end': 1847.343, 'text': 'When that document is ready, I want you to do something.', 'start': 1843.62, 'duration': 3.723}], 'summary': 'Installing jquery and setting up a container for it to work in.', 'duration': 30.615, 'max_score': 1816.728, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9sWEecNUW-o/pics/9sWEecNUW-o1816728.jpg'}], 'start': 1419.048, 'title': 'Setting up youtube api for dynamic content', 'summary': 'Covers setting up the youtube api to dynamically pull information enabling the user to retrieve and display dynamic content like images, titles, and descriptions through creating a playlist, making api calls, and fetching video details.', 'chapters': [{'end': 1613.465, 'start': 1419.048, 'title': 'Setting up youtube api for dynamic content', 'summary': 'Covers setting up the youtube api to dynamically pull information including creating a playlist, making api calls, and fetching video details, enabling the user to retrieve and display dynamic content like images, titles, and descriptions.', 'duration': 194.417, 'highlights': ['The chapter covers setting up the YouTube API to dynamically pull information including creating a playlist, making API calls, and fetching video details.', 'Enabling the user to retrieve and display dynamic content like images, titles, and descriptions.', 'The tutorial discusses the process of getting an API key and making API calls to retrieve dynamic information.']}, {'end': 1847.343, 'start': 1614.485, 'title': 'Setting up youtube api in developers console', 'summary': 'Explains the process of setting up a new project in the developers console, enabling the youtube data api v3, and obtaining an api key for accessing information from youtube, using jquery for the implementation.', 'duration': 232.858, 'highlights': ['The process of setting up a new project in the Developers Console and enabling the YouTube Data API v3', 'Obtaining an API key for accessing information from YouTube', 'Using jQuery for the implementation']}], 'duration': 428.295, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9sWEecNUW-o/pics/9sWEecNUW-o1419048.jpg', 'highlights': ['Enabling the user to retrieve and display dynamic content like images, titles, and descriptions.', 'The chapter covers setting up the YouTube API to dynamically pull information including creating a playlist, making API calls, and fetching video details.', 'The process of setting up a new project in the Developers Console and enabling the YouTube Data API v3', 'Obtaining an API key for accessing information from YouTube', 'The tutorial discusses the process of getting an API key and making API calls to retrieve dynamic information.', 'Using jQuery for the implementation']}, {'end': 2234.518, 'segs': [{'end': 1983.618, 'src': 'embed', 'start': 1879.315, 'weight': 0, 'content': [{'end': 1880.815, 'text': "So let's create a variable called key.", 'start': 1879.315, 'duration': 1.5}, {'end': 1886.117, 'text': 'And what we want to do is we want to just copy and paste.', 'start': 1881.775, 'duration': 4.342}, {'end': 1891.644, 'text': 'so copy and paste from your credentials, your key.', 'start': 1886.937, 'duration': 4.707}, {'end': 1899.335, 'text': 'we want to copy and paste that straight into our document, into our variable here.', 'start': 1891.644, 'duration': 7.691}, {'end': 1900.537, 'text': "so that's my key.", 'start': 1899.335, 'duration': 1.202}, {'end': 1908.044, 'text': 'now we also need the playlist id to send it to right.', 'start': 1902.62, 'duration': 5.424}, {'end': 1912.727, 'text': "so let's go and get that playlist id.", 'start': 1908.044, 'duration': 4.683}, {'end': 1917.431, 'text': 'so if i go to the playlist, so this is the actual playlist page.', 'start': 1912.727, 'duration': 4.704}, {'end': 1931.254, 'text': 'look the way you can get the id is go into the address bar at the top and the last little bit where it says list equals after the equals.', 'start': 1917.431, 'duration': 13.823}, {'end': 1933.216, 'text': "that's the playlist id.", 'start': 1931.254, 'duration': 1.962}, {'end': 1935.278, 'text': "so let's copy that out of there.", 'start': 1933.216, 'duration': 2.062}, {'end': 1951.394, 'text': "i'll put the link in the description for you and let's call this var, play oops, playlist id, equals and put that in quotes.", 'start': 1935.278, 'duration': 16.116}, {'end': 1953.997, 'text': 'there we go playlist id.', 'start': 1951.394, 'duration': 2.603}, {'end': 1966.445, 'text': "now The last bit of information is where the API call is right? What we're actually sending the API call to.", 'start': 1953.997, 'duration': 12.448}, {'end': 1974.111, 'text': 'So we go back to the documents, the YouTube docs, and that was here, look.', 'start': 1967.266, 'duration': 6.845}, {'end': 1977.473, 'text': 'So we filled all this stuff in before.', 'start': 1974.371, 'duration': 3.102}, {'end': 1981.776, 'text': 'This is the request, HTTP request.', 'start': 1978.574, 'duration': 3.202}, {'end': 1983.618, 'text': "I'll link this in the description also.", 'start': 1981.976, 'duration': 1.642}], 'summary': 'Create a variable for api key, playlist id, and api call url.', 'duration': 104.303, 'max_score': 1879.315, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9sWEecNUW-o/pics/9sWEecNUW-o1879315.jpg'}, {'end': 2043.93, 'src': 'embed', 'start': 2011.594, 'weight': 3, 'content': [{'end': 2018.82, 'text': 'so if you look back here um we, we are sending a few bits of information.', 'start': 2011.594, 'duration': 7.226}, {'end': 2024.444, 'text': "we're sending snippet, which basically gets those things like thumbnail, title, etc.", 'start': 2018.82, 'duration': 5.624}, {'end': 2039.569, 'text': 'max results, 20, whatever and a playlist id, and when you send all this information to here, along with your api key, then it will send the response.', 'start': 2025.925, 'duration': 13.644}, {'end': 2040.869, 'text': 'but all these are options.', 'start': 2039.569, 'duration': 1.3}, {'end': 2043.93, 'text': 'so we actually need to send that with the request.', 'start': 2040.869, 'duration': 3.061}], 'summary': 'Sending snippet, max results 20, playlist id, and api key to get response.', 'duration': 32.336, 'max_score': 2011.594, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9sWEecNUW-o/pics/9sWEecNUW-o2011594.jpg'}, {'end': 2177.278, 'src': 'embed', 'start': 2116.856, 'weight': 4, 'content': [{'end': 2123.198, 'text': 'So all the stuff on the left is stuff YouTube has specified the names of.', 'start': 2116.856, 'duration': 6.342}, {'end': 2124.659, 'text': 'So you see it all here.', 'start': 2123.798, 'duration': 0.861}, {'end': 2130.481, 'text': 'You know, parameters here, playlist ID, max results, tells you all about it in the docs.', 'start': 2124.679, 'duration': 5.802}, {'end': 2134.159, 'text': "And we're just basically sending him what he wants.", 'start': 2131.618, 'duration': 2.541}, {'end': 2137.2, 'text': 'So playlist ID is coming straight from this variable.', 'start': 2134.299, 'duration': 2.901}, {'end': 2140.881, 'text': 'Right So onto the request.', 'start': 2138.5, 'duration': 2.381}, {'end': 2153.645, 'text': "So we want to say, Hey, um, let's let's create a function and it's going to load the vids, right? So it's going to load our videos, load vids.", 'start': 2142.541, 'duration': 11.104}, {'end': 2160.762, 'text': 'And what that actually is going to do is going to send a request.', 'start': 2156.558, 'duration': 4.204}, {'end': 2162.464, 'text': 'So dollar.', 'start': 2161.863, 'duration': 0.601}, {'end': 2165.206, 'text': "So we're using jQuery here.", 'start': 2163.545, 'duration': 1.661}, {'end': 2172.193, 'text': 'So saying, hey, jQuery, you have a function called getJSON.', 'start': 2165.727, 'duration': 6.466}, {'end': 2173.915, 'text': "Let's use that.", 'start': 2173.114, 'duration': 0.801}, {'end': 2175.676, 'text': "It's already built in.", 'start': 2174.115, 'duration': 1.561}, {'end': 2177.278, 'text': "It's a pre-made code.", 'start': 2175.696, 'duration': 1.582}], 'summary': 'Using jquery, a function called getjson is used to send a request to load videos specified by youtube parameters.', 'duration': 60.422, 'max_score': 2116.856, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9sWEecNUW-o/pics/9sWEecNUW-o2116856.jpg'}], 'start': 1847.623, 'title': 'Setting up jquery for youtube api data retrieval', 'summary': 'Covers setting up jquery for api calls, preparing and sending necessary information for youtube api data retrieval, including key points such as snippet and max results, and utilizing the jquery getjson function for data retrieval.', 'chapters': [{'end': 1983.618, 'start': 1847.623, 'title': 'Setting up jquery for api calls', 'summary': 'Explains how to set up jquery for api calls, including creating a variable for the api key, obtaining the playlist id, and identifying the endpoint for the api call.', 'duration': 135.995, 'highlights': ['Creating a variable for the API key by copying and pasting it into the document, making the API call process easier', 'Obtaining the playlist ID from the playlist page URL by extracting the ID from the address bar', 'Identifying the endpoint for the API call by referring to the YouTube documentation and filling in the necessary information']}, {'end': 2081.257, 'start': 1985.41, 'title': 'Youtube api data retrieval', 'summary': 'Explains how to prepare and send necessary information for retrieving youtube api data, including setting up url and options with key points such as snippet and max results being included in the request.', 'duration': 95.847, 'highlights': ['Setting up URL and options with key points such as snippet and max results being included in the request', 'Explanation of the necessary information to be sent for retrieving YouTube API data', 'The importance of sending options with the request']}, {'end': 2234.518, 'start': 2082.717, 'title': 'Youtube api data retrieval', 'summary': 'Covers the process of loading youtube videos using the youtube api, specifying parameters such as max results and playlist id, and utilizing the jquery getjson function to send requests for data retrieval.', 'duration': 151.801, 'highlights': ['The process involves specifying parameters such as max results (e.g. 20) and playlist ID to dictate the information retrieval from YouTube.', 'Utilizing the jQuery getJSON function to send requests for data retrieval, with the necessary information such as URL and options being provided to the function.', "Creating a function to load the videos and returning the data within a specified parameter, such as 'data'."]}], 'duration': 386.895, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9sWEecNUW-o/pics/9sWEecNUW-o1847623.jpg', 'highlights': ['Obtaining the playlist ID from the playlist page URL by extracting the ID from the address bar', 'Creating a variable for the API key by copying and pasting it into the document, making the API call process easier', 'Identifying the endpoint for the API call by referring to the YouTube documentation and filling in the necessary information', 'Setting up URL and options with key points such as snippet and max results being included in the request', 'Utilizing the jQuery getJSON function to send requests for data retrieval, with the necessary information such as URL and options being provided to the function', 'The process involves specifying parameters such as max results (e.g. 20) and playlist ID to dictate the information retrieval from YouTube']}, {'end': 3371.915, 'segs': [{'end': 2326.042, 'src': 'embed', 'start': 2235.178, 'weight': 0, 'content': [{'end': 2236.519, 'text': 'We need a name to be able to access it.', 'start': 2235.178, 'duration': 1.341}, {'end': 2248.756, 'text': "So let's console log this data, right? And we also need to call the function.", 'start': 2237.8, 'duration': 10.956}, {'end': 2252.179, 'text': 'So call it loadVids.', 'start': 2249.877, 'duration': 2.302}, {'end': 2258.264, 'text': "So we're calling it above it and the function is underneath, right? Let's see what happens.", 'start': 2253.42, 'duration': 4.844}, {'end': 2261.987, 'text': "Fuck's sake son.", 'start': 2261.146, 'duration': 0.841}, {'end': 2283.694, 'text': "So we'll inspect the elements so we can get to the console.", 'start': 2279.531, 'duration': 4.163}, {'end': 2285.535, 'text': 'Here we go in our console.', 'start': 2284.534, 'duration': 1.001}, {'end': 2292.539, 'text': 'I just need to get to logs.', 'start': 2290.198, 'duration': 2.341}, {'end': 2293.84, 'text': 'So here we are, logs.', 'start': 2292.879, 'duration': 0.961}, {'end': 2295.641, 'text': 'Zoom in.', 'start': 2295.301, 'duration': 0.34}, {'end': 2297.742, 'text': "You see right here, there's an object.", 'start': 2296.101, 'duration': 1.641}, {'end': 2303.486, 'text': "If we open this object, you can see, oh, there's items in here.", 'start': 2298.723, 'duration': 4.763}, {'end': 2307.228, 'text': "Oh, from zero to 11, so there's 12 items.", 'start': 2304.346, 'duration': 2.882}, {'end': 2312.231, 'text': 'So this is gonna be our information, right? Snippet, there we go, we asked for that.', 'start': 2308.908, 'duration': 3.323}, {'end': 2318.896, 'text': "And it's telling us our channel title, the channel title of the playlist.", 'start': 2313.652, 'duration': 5.244}, {'end': 2320.658, 'text': 'Create a weather app.', 'start': 2319.737, 'duration': 0.921}, {'end': 2323.6, 'text': 'Thumbnails are in here as well.', 'start': 2321.919, 'duration': 1.681}, {'end': 2326.042, 'text': 'Video IDs in here.', 'start': 2324.841, 'duration': 1.201}], 'summary': 'Console logged data showing 12 items including channel title, thumbnails, and video ids', 'duration': 90.864, 'max_score': 2235.178, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9sWEecNUW-o/pics/9sWEecNUW-o2235178.jpg'}, {'end': 2474.786, 'src': 'embed', 'start': 2404.858, 'weight': 1, 'content': [{'end': 2412.745, 'text': "So it's going to find that and then it's going to inject something into it.", 'start': 2404.858, 'duration': 7.887}, {'end': 2421.552, 'text': "So let's say, hey jQuery, dollar symbol, find something called video.", 'start': 2412.825, 'duration': 8.727}, {'end': 2425.905, 'text': "that's called hashtag video.", 'start': 2423.203, 'duration': 2.702}, {'end': 2429.228, 'text': 'so find something called hash video.', 'start': 2425.905, 'duration': 3.323}, {'end': 2443.461, 'text': "what I want you to do is I want you to change the HTML that's within those tags to something something new, right.", 'start': 2429.228, 'duration': 14.233}, {'end': 2446.003, 'text': "so I'm going to use back ticks to do this.", 'start': 2443.461, 'duration': 2.542}, {'end': 2451.786, 'text': "um, just gonna make sure i've copied it correctly from here.", 'start': 2447.962, 'duration': 3.824}, {'end': 2471.044, 'text': 'so control x and basically backticks is allows us to inject variables directly into um, into the string, rather than having to close the string.', 'start': 2451.786, 'duration': 19.258}, {'end': 2474.786, 'text': 'add a plus sign, add a variable, add another plus sign, open a string up.', 'start': 2471.044, 'duration': 3.742}], 'summary': 'Demonstrates using backticks for injecting variables into strings in javascript.', 'duration': 69.928, 'max_score': 2404.858, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9sWEecNUW-o/pics/9sWEecNUW-o2404858.jpg'}, {'end': 2551.376, 'src': 'embed', 'start': 2517.9, 'weight': 3, 'content': [{'end': 2521.761, 'text': 'so we just need to run this main main video function from inside here.', 'start': 2517.9, 'duration': 3.861}, {'end': 2534.269, 'text': 'so basically saying make the api call, then load this function called main vid.', 'start': 2521.761, 'duration': 12.508}, {'end': 2535.43, 'text': 'there you go.', 'start': 2534.269, 'duration': 1.161}, {'end': 2545.314, 'text': 'then, once main vid is run, find the video um section and inject this html.', 'start': 2535.43, 'duration': 9.884}, {'end': 2551.376, 'text': "but this isn't dynamic yet right, because we have this hard-coded id here.", 'start': 2545.314, 'duration': 6.062}], 'summary': 'Run main video function, make api call, inject html into video section.', 'duration': 33.476, 'max_score': 2517.9, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9sWEecNUW-o/pics/9sWEecNUW-o2517900.jpg'}, {'end': 2654.106, 'src': 'embed', 'start': 2619.503, 'weight': 7, 'content': [{'end': 2627.665, 'text': 'So the way we do that is we say, create a variable called ID and set that equal to data.', 'start': 2619.503, 'duration': 8.162}, {'end': 2632.126, 'text': 'Now we need to go find out where it is.', 'start': 2630.545, 'duration': 1.581}, {'end': 2633.066, 'text': 'So inspect element.', 'start': 2632.206, 'duration': 0.86}, {'end': 2636.88, 'text': "Let's go to console.", 'start': 2635.94, 'duration': 0.94}, {'end': 2638.181, 'text': "Here's my logs again.", 'start': 2637.441, 'duration': 0.74}, {'end': 2642.922, 'text': 'So data is object because this is what we named it.', 'start': 2638.941, 'duration': 3.981}, {'end': 2644.983, 'text': 'So this is our very root element.', 'start': 2643.202, 'duration': 1.781}, {'end': 2653.325, 'text': "So data, I'm going to go into items because items is an array.", 'start': 2645.103, 'duration': 8.222}, {'end': 2654.106, 'text': "It's not an object.", 'start': 2653.385, 'duration': 0.721}], 'summary': "Creating a variable 'id' and accessing 'items' from 'data' object.", 'duration': 34.603, 'max_score': 2619.503, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9sWEecNUW-o/pics/9sWEecNUW-o2619503.jpg'}, {'end': 3127.252, 'src': 'embed', 'start': 3092.229, 'weight': 6, 'content': [{'end': 3099.373, 'text': "so what we need to do is for doing this for one item, you don't want to be copying and changing this one.", 'start': 3092.229, 'duration': 7.144}, {'end': 3106.198, 'text': "we can use uh, for each loop or in jquery it's just called an each loop.", 'start': 3099.373, 'duration': 6.825}, {'end': 3109.199, 'text': "so let's set up that each loop.", 'start': 3106.198, 'duration': 3.001}, {'end': 3119.108, 'text': "so we're saying hey, jquery for Each, and this is a jQuery built-in function.", 'start': 3109.199, 'duration': 9.909}, {'end': 3121.549, 'text': 'JavaScript has the same for each.', 'start': 3120.188, 'duration': 1.361}, {'end': 3127.252, 'text': "So we're saying for each data.", 'start': 3122.529, 'duration': 4.723}], 'summary': 'Using a for each loop in jquery to iterate over data.', 'duration': 35.023, 'max_score': 3092.229, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9sWEecNUW-o/pics/9sWEecNUW-o3092229.jpg'}, {'end': 3371.915, 'src': 'embed', 'start': 3337, 'weight': 8, 'content': [{'end': 3342.906, 'text': 'So we can use JavaScript to remove everything over 100 characters right?', 'start': 3337, 'duration': 5.906}, {'end': 3344.188, 'text': 'And how we do that?', 'start': 3343.467, 'duration': 0.721}, {'end': 3357.462, 'text': 'is, we say go to our desk variable and at the very end, just before the semicolon, just type dot substring, sorry, lowercase substring,', 'start': 3344.188, 'duration': 13.274}, {'end': 3362.129, 'text': 'and it needs two arguments.', 'start': 3360.107, 'duration': 2.022}, {'end': 3363.87, 'text': 'it needs to know where it starts.', 'start': 3362.129, 'duration': 1.741}, {'end': 3369.614, 'text': 'so it starts at the very first letter zero, and for how long?', 'start': 3363.87, 'duration': 5.744}, {'end': 3371.915, 'text': 'so a hundred hundred letters.', 'start': 3369.614, 'duration': 2.301}], 'summary': 'Use javascript to remove characters over 100 by using .substring(0, 100).', 'duration': 34.915, 'max_score': 3337, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9sWEecNUW-o/pics/9sWEecNUW-o3337000.jpg'}], 'start': 2235.178, 'title': 'Dynamic content creation', 'summary': 'Covers accessing and logging data from an api response, identifying the number of items, dynamically creating video content, dynamically injecting html, using variables, finding and utilizing specific data elements, dynamically generating html content, manipulating the dom using jquery, and focusing on thumbnail, title, and description with a 100-character description limit.', 'chapters': [{'end': 2403.897, 'start': 2235.178, 'title': 'Accessing and dynamically creating video content', 'summary': 'Covers accessing and logging data from an api response, identifying the number of items in the response, and dynamically creating video content based on the retrieved information.', 'duration': 168.719, 'highlights': ['The API response contains 12 items, including channel title, thumbnails, and video IDs, providing comprehensive information for creating video content dynamically.', "The process involves accessing the API response and dynamically creating video content by identifying the container and utilizing a new function called 'main vid'.", 'Initial steps include logging the data from the API response, inspecting elements in the console, and dynamically changing the video displayed on the webpage.']}, {'end': 2769.008, 'start': 2404.858, 'title': 'Dynamic html injection and variable usage', 'summary': 'Discusses dynamically injecting html using backticks and using variables to manipulate the content, along with finding and utilizing specific data elements within a javascript array.', 'duration': 364.15, 'highlights': ['Using backticks to dynamically inject HTML and allowing easy variable inclusion within the string.', 'Utilizing specific data elements within a JavaScript array to dynamically populate the content.', 'Demonstrating the use of inspect element and console to identify and extract specific data elements from an array.']}, {'end': 3371.915, 'start': 2769.889, 'title': 'Dynamic html generation and dom manipulation', 'summary': 'Discusses the process of dynamically generating html content and manipulating the dom using jquery, including looping through data items, extracting specific information, and appending it to the dom, with a focus on thumbnail, title, and description, and limiting description length to 100 characters.', 'duration': 602.026, 'highlights': ['The process of dynamically generating HTML content and manipulating the DOM using jQuery is explained.', 'Looping through data items and extracting specific information like thumbnails, titles, and descriptions to dynamically update the content is demonstrated.', 'Limiting the description length to 100 characters using JavaScript is shown.']}], 'duration': 1136.737, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9sWEecNUW-o/pics/9sWEecNUW-o2235178.jpg', 'highlights': ['The API response contains 12 items, including channel title, thumbnails, and video IDs, providing comprehensive information for creating video content dynamically.', 'Using backticks to dynamically inject HTML and allowing easy variable inclusion within the string.', 'The process of dynamically generating HTML content and manipulating the DOM using jQuery is explained.', "The process involves accessing the API response and dynamically creating video content by identifying the container and utilizing a new function called 'main vid'.", 'Looping through data items and extracting specific information like thumbnails, titles, and descriptions to dynamically update the content is demonstrated.', 'Initial steps include logging the data from the API response, inspecting elements in the console, and dynamically changing the video displayed on the webpage.', 'Utilizing specific data elements within a JavaScript array to dynamically populate the content.', 'Demonstrating the use of inspect element and console to identify and extract specific data elements from an array.', 'Limiting the description length to 100 characters using JavaScript is shown.']}, {'end': 4053.966, 'segs': [{'end': 3401.765, 'src': 'embed', 'start': 3371.915, 'weight': 4, 'content': [{'end': 3373.556, 'text': 'there we are.', 'start': 3371.915, 'duration': 1.641}, {'end': 3374.977, 'text': "we've cut it down dramatically.", 'start': 3373.556, 'duration': 1.421}, {'end': 3377.559, 'text': 'now. um.', 'start': 3374.977, 'duration': 2.582}, {'end': 3392.001, 'text': "so the only thing left to do is um, when we click on one of these, because at the moment doesn't do anything we need to update that video, um,", 'start': 3377.559, 'duration': 14.442}, {'end': 3396.103, 'text': 'and we actually need to pull some information from the api.', 'start': 3392.001, 'duration': 4.102}, {'end': 3397.103, 'text': 'so it knows where to go.', 'start': 3396.103, 'duration': 1}, {'end': 3401.765, 'text': "so let's, let's do that.", 'start': 3397.103, 'duration': 4.662}], 'summary': 'Dramatically cut down the video, now need to update and pull information from the api.', 'duration': 29.85, 'max_score': 3371.915, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9sWEecNUW-o/pics/9sWEecNUW-o3371915.jpg'}, {'end': 3894.623, 'src': 'embed', 'start': 3821.387, 'weight': 0, 'content': [{'end': 3833.898, 'text': 'what we want to do is we want to call this main video, because we can pass in an id and the id will change and it will update the html.', 'start': 3821.387, 'duration': 12.511}, {'end': 3837.779, 'text': 'it will update the video right.', 'start': 3833.898, 'duration': 3.881}, {'end': 3847.804, 'text': "so let's call it, let's call main vid and let's send that new variable, this data key.", 'start': 3837.779, 'duration': 10.025}, {'end': 3851.686, 'text': "let's send it in its parentheses to that function again.", 'start': 3847.804, 'duration': 3.882}, {'end': 3854.97, 'text': 'This should be very close here.', 'start': 3853.382, 'duration': 1.588}, {'end': 3857.262, 'text': 'So when I click on this, here we go.', 'start': 3855.051, 'duration': 2.211}, {'end': 3858.086, 'text': "Now it's changing.", 'start': 3857.442, 'duration': 0.644}, {'end': 3863.224, 'text': "that's pretty much all there is to it.", 'start': 3860.902, 'duration': 2.322}, {'end': 3868.727, 'text': 'um few little things, i guess when we scroll down, we saw this.', 'start': 3863.224, 'duration': 5.503}, {'end': 3872.35, 'text': 'you know the white stuff has ended right.', 'start': 3868.727, 'duration': 3.623}, {'end': 3884.538, 'text': 'so we can just go into our css, and i think this was because we set a um height of vh here.', 'start': 3872.35, 'duration': 12.188}, {'end': 3889.021, 'text': 'so we can take that off and there you go straight to the bottom.', 'start': 3884.538, 'duration': 4.483}, {'end': 3894.623, 'text': 'no vh clicking through, and they all work.', 'start': 3889.021, 'duration': 5.602}], 'summary': 'Updating main video by passing an id to update html, removing vh for smooth scrolling.', 'duration': 73.236, 'max_score': 3821.387, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9sWEecNUW-o/pics/9sWEecNUW-o3821387.jpg'}, {'end': 4004.262, 'src': 'embed', 'start': 3963.053, 'weight': 2, 'content': [{'end': 3965.554, 'text': 'we then call the results loop.', 'start': 3963.053, 'duration': 2.501}, {'end': 3967.996, 'text': "i'll just take out space and stuff.", 'start': 3965.554, 'duration': 2.442}, {'end': 3978.826, 'text': 'uh, and basically the results loop tuck in the data from that api call And for each item it created variables of what we needed.', 'start': 3967.996, 'duration': 10.83}, {'end': 3989.69, 'text': "Then, appended to the main, so it didn't change the whole HTML, it added to the main each time, an article.", 'start': 3980.226, 'duration': 9.464}, {'end': 3991.511, 'text': 'This is the article.', 'start': 3990.751, 'duration': 0.76}, {'end': 4004.262, 'text': 'Add an article to it with the dynamic data for each array item.', 'start': 3995.112, 'duration': 9.15}], 'summary': 'Results loop tucks in data from api call, creates variables for each item, and appends to main as an article.', 'duration': 41.209, 'max_score': 3963.053, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9sWEecNUW-o/pics/9sWEecNUW-o3963053.jpg'}], 'start': 3371.915, 'title': 'Updating video information from api', 'summary': 'Covers updating video information from an api, including adding video ids to articles, event handling, and adjusting css for better user experience, resulting in a streamlined process for accessing and updating video content.', 'chapters': [{'end': 4053.966, 'start': 3371.915, 'title': 'Updating video information from api', 'summary': 'Covers updating video information from an api, including adding video ids to articles, event handling, and adjusting css for better user experience, resulting in a streamlined process for accessing and updating video content.', 'duration': 682.051, 'highlights': ['Event handling for clicking on main to update video, including adding video IDs to articles and sending information back to the main video function.', 'Adjusting CSS to improve user experience by removing vh height, resulting in smoother scrolling.', 'Utilizing functions to load and call main video with updated video IDs, effectively updating the video content from the API.', 'Creating variables for each item from the API call and appending dynamic data to the main article, allowing for seamless updates to the video content.', 'Demonstrating the process of accessing and updating video content for improved user experience and functionality.']}], 'duration': 682.051, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/9sWEecNUW-o/pics/9sWEecNUW-o3371915.jpg', 'highlights': ['Utilizing functions to load and call main video with updated video IDs, effectively updating the video content from the API.', 'Event handling for clicking on main to update video, including adding video IDs to articles and sending information back to the main video function.', 'Creating variables for each item from the API call and appending dynamic data to the main article, allowing for seamless updates to the video content.', 'Adjusting CSS to improve user experience by removing vh height, resulting in smoother scrolling.', 'Demonstrating the process of accessing and updating video content for improved user experience and functionality.']}], 'highlights': ['The app pulls in a playlist with 12 videos using the YouTube API.', 'Enabling the user to retrieve and display dynamic content like images, titles, and descriptions.', 'The API response contains 12 items, including channel title, thumbnails, and video IDs, providing comprehensive information for creating video content dynamically.', 'Creating central div and sections using Emmet in CodePen', 'The chapter discusses styling a flexbox container in an article using SCSS mixing, addressing positioning and typography issues', 'The process of setting up a new project in the Developers Console and enabling the YouTube Data API v3', 'Obtaining the playlist ID from the playlist page URL by extracting the ID from the address bar', 'Utilizing functions to load and call main video with updated video IDs, effectively updating the video content from the API.', "The tutorial explains the process of centering an image using 'text-align: center' in CSS to achieve a centralized layout.", 'The chapter explains creating a CSS section for reusable styling, including removing padding and margin, setting line height to 1.3, and font weight to 600', "The process involves accessing the API response and dynamically creating video content by identifying the container and utilizing a new function called 'main vid'.", 'The process involves specifying parameters such as max results (e.g. 20) and playlist ID to dictate the information retrieval from YouTube', 'The chapter explains implementing a hover effect using SCSS, including specifying border color and size, and rounding the edges of the container and thumbnails', 'The transcript contains links to resources for creating the app.', 'The tutorial discusses the process of getting an API key and making API calls to retrieve dynamic information.', 'The process of dynamically generating HTML content and manipulating the DOM using jQuery is explained.']}