title
CSS Crash Course for Absolute Beginners - Full Course

description
Join the 3-part epic masterclass that shows you how to become a 6-figure developer... https://cleverprogrammer.com 🔥 TABLE OF CONTENTS... ENJOY 👇 2:09 - What is CSS? 13:07 - The Best Framework for CSS / Front-End 47:10 - How to Copy Elements from Other Websites 1:03:25 - How to Build a Beautiful Website with CSS and Bootstrap 2:08:01 - Guide to CSS Flexbox 2:19:25 - Project: Age in Days 2:52:29 - Project: Random Cat Generator Source Code: https://scrimba.com/c/cemzNRsN Enroll for exercises, tutorials, courses, and projects... https://cleverprogrammer.com?utm_source=youtube&utm_medium=yt-description Enroll in Learn Python™ course https://cleverprogrammer.com?utm_source=youtube&utm_medium=yt-description ================================================== Connect With Me! Website ► https://cleverprogrammer.com?utm_source=youtube&utm_medium=yt-description Facebook ► http://cleverprogrammer.io/facebook Twitter ► http://cleverprogrammer.io/twitter Instagram ► http://cleverprogrammer.io/instagram Snapchat ► Rafeh1 iTunes Podcast ► http://cleverprogrammer.io/podcast Google Podcast ► http://cleverprogrammer.io/google-podcast Support (Patreon) ► http://cleverprogrammer.io/patreon Youtube ► https://www.youtube.com/c/CleverProgrammer Github (Code) ► http://cleverprogrammer.io/github Biz / Sponsorships 👉 https://www.cleverprogrammer.com/partnerships

detail
{'title': 'CSS Crash Course for Absolute Beginners - Full Course', 'heatmap': [{'end': 1083.411, 'start': 837.382, 'weight': 0.924}, {'end': 1561.102, 'start': 1191.117, 'weight': 0.851}, {'end': 1923.342, 'start': 1791.091, 'weight': 0.708}, {'end': 3475.408, 'start': 3229.503, 'weight': 0.713}, {'end': 4789.537, 'start': 4544.7, 'weight': 0.79}, {'end': 5387.636, 'start': 5262.422, 'weight': 0.753}, {'end': 6584.384, 'start': 6341.568, 'weight': 0.808}, {'end': 7064.24, 'start': 6821.858, 'weight': 0.867}, {'end': 7912.298, 'start': 7657.165, 'weight': 0.745}, {'end': 9099.361, 'start': 8974.63, 'weight': 0.807}, {'end': 9816.919, 'start': 9694.321, 'weight': 0.886}, {'end': 10055.751, 'start': 9928.692, 'weight': 0.875}, {'end': 10294.251, 'start': 10169.353, 'weight': 0.707}, {'end': 11012.941, 'start': 10885.799, 'weight': 0.872}], 'summary': 'This css crash course for absolute beginners covers css flexbox, basics for website design, styling and box shadows, web development basics, bootstrap project showcase, railway font styling, web design and bootstrap integration, flexbox and css styling, and html and css layouts, emphasizing practical projects and offering a free three-part masterclass by rafik hazi and aaron from cleverprogrammer.com.', 'chapters': [{'end': 110.945, 'segs': [{'end': 110.945, 'src': 'embed', 'start': 42.751, 'weight': 0, 'content': [{'end': 50.698, 'text': 'lot of cool stuff css, flexbox, some of the theory about it at first, just to go over it, but then a couple cool projects.', 'start': 42.751, 'duration': 7.947}, {'end': 51.459, 'text': 'uh, is that about right?', 'start': 50.698, 'duration': 0.761}, {'end': 52.64, 'text': 'what else we have planned?', 'start': 51.459, 'duration': 1.181}, {'end': 53.821, 'text': "that's about right.", 'start': 52.64, 'duration': 1.181}, {'end': 61.809, 'text': "so we're gonna go through the theory in the start and make sure you get the theory down, and then we're gonna actually build some projects too,", 'start': 53.821, 'duration': 7.988}, {'end': 67.173, 'text': "some mini projects, and we're going to be building those later into the video.", 'start': 61.809, 'duration': 5.364}, {'end': 70.874, 'text': "So for now, let's jump into the meat and potatoes of this.", 'start': 67.233, 'duration': 3.641}, {'end': 81.778, 'text': 'I have put together an incredible, mind-blowing three-part masterclass that will show you, step by step, exactly what you need to do,', 'start': 71.234, 'duration': 10.544}, {'end': 89.42, 'text': 'what the opportunity in your life as a Python developer can look like, what your earning potential can look like,', 'start': 81.778, 'duration': 7.642}, {'end': 94.042, 'text': 'and what are the exact steps you need to take to make this happen in your life.', 'start': 89.42, 'duration': 4.622}, {'end': 101.415, 'text': "Please keep in mind this training I've put together for you is absolutely free of charge, completely free.", 'start': 94.622, 'duration': 6.793}, {'end': 105.343, 'text': "All I'm gonna need from you is your name and your email address.", 'start': 101.976, 'duration': 3.367}, {'end': 110.945, 'text': "And once you pop that in, I'm gonna send this training over to you right away.", 'start': 106.283, 'duration': 4.662}], 'summary': 'Masterclass on python development with free training and step-by-step guidance.', 'duration': 68.194, 'max_score': 42.751, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI42751.jpg'}], 'start': 0.129, 'title': 'Css flexbox crash course', 'summary': 'Introduces a css flexbox crash course, covering theory and practical projects, led by rafik hazi and aaron from cleverprogrammer.com, offering a free three-part masterclass.', 'chapters': [{'end': 110.945, 'start': 0.129, 'title': 'Css flexbox crash course', 'summary': 'Introduces a css flexbox crash course, covering the theory and practical projects, led by instructors rafik hazi and aaron from cleverprogrammer.com, offering a free three-part masterclass.', 'duration': 110.816, 'highlights': ['Instructors Rafik Hazi and Aaron will cover CSS Flexbox theory and practical projects in a three-part masterclass. Instructors Rafik Hazi and Aaron will cover CSS Flexbox theory and practical projects in a three-part masterclass.', 'The three-part masterclass will provide step-by-step guidance on the potential as a Python developer and the necessary steps for success. The three-part masterclass will provide step-by-step guidance on the potential as a Python developer and the necessary steps for success.', 'The training is offered for free and requires only name and email address for access. The training is offered for free and requires only name and email address for access.']}], 'duration': 110.816, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI129.jpg', 'highlights': ['Instructors Rafik Hazi and Aaron will cover CSS Flexbox theory and practical projects in a three-part masterclass.', 'The three-part masterclass will provide step-by-step guidance on the potential as a Python developer and the necessary steps for success.', 'The training is offered for free and requires only name and email address for access.']}, {'end': 1436.961, 'segs': [{'end': 204.663, 'src': 'embed', 'start': 175.686, 'weight': 0, 'content': [{'end': 181.448, 'text': 'And the second way that you can go is actually dressed up in really fancy clothing.', 'start': 175.686, 'duration': 5.762}, {'end': 193.675, 'text': "okay?. Designing your website or not, designing your website using CSS and just having HTML is kind of like being naked in today's day and age.", 'start': 181.448, 'duration': 12.227}, {'end': 196.277, 'text': "It's inappropriate.", 'start': 195.136, 'duration': 1.141}, {'end': 198.198, 'text': "It's not acceptable.", 'start': 196.577, 'duration': 1.621}, {'end': 204.663, 'text': "You'll be judged and your value on the social ladder will be lowered.", 'start': 199.079, 'duration': 5.584}], 'summary': "Designing a website without css is like being naked in today's age, not acceptable.", 'duration': 28.977, 'max_score': 175.686, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI175686.jpg'}, {'end': 263.972, 'src': 'embed', 'start': 233.032, 'weight': 2, 'content': [{'end': 235.113, 'text': 'Cool, with that said, let me give you an example.', 'start': 233.032, 'duration': 2.081}, {'end': 239.914, 'text': 'So here is the website with CSS.', 'start': 235.753, 'duration': 4.161}, {'end': 242.254, 'text': 'so what I just showed you and what it looked like.', 'start': 239.914, 'duration': 2.34}, {'end': 243.175, 'text': 'and it looks beautiful.', 'start': 242.254, 'duration': 0.921}, {'end': 244.115, 'text': 'the form is beautiful.', 'start': 243.175, 'duration': 0.94}, {'end': 245.875, 'text': 'when you click it, it goes beautiful blue.', 'start': 244.115, 'duration': 1.76}, {'end': 248.736, 'text': 'when you hover over, you know it gives you the little thing.', 'start': 245.875, 'duration': 2.861}, {'end': 251.357, 'text': "when you hover over, you know it's nice.", 'start': 248.736, 'duration': 2.621}, {'end': 259.738, 'text': 'Here is the same website without any CSS, okay? So notice the navigation bar, look what happened to that.', 'start': 251.937, 'duration': 7.801}, {'end': 263.972, 'text': 'And notice how nothing is centered.', 'start': 261.209, 'duration': 2.763}], 'summary': 'Demonstrated website with css: beautiful form, navigation, and hover effects.', 'duration': 30.94, 'max_score': 233.032, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI233032.jpg'}, {'end': 442.393, 'src': 'embed', 'start': 394.171, 'weight': 3, 'content': [{'end': 403.894, 'text': 'So this is one way of styling my code and this is essentially writing CSS inside of my HTML code.', 'start': 394.171, 'duration': 9.723}, {'end': 418.37, 'text': 'Another way I could do this is in my HTML, I could have a style tag like this.', 'start': 406.883, 'duration': 11.487}, {'end': 433.339, 'text': 'And inside of this style tag, I can say that my H1, right? And why I want to show you this way is because imagine if I had multiple H1s.', 'start': 419.33, 'duration': 14.009}, {'end': 442.393, 'text': "and let's say I wanted them all to be green.", 'start': 440.011, 'duration': 2.382}], 'summary': 'Demonstrates two ways of styling code: inline css and using style tag in html.', 'duration': 48.222, 'max_score': 394.171, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI394171.jpg'}, {'end': 801.355, 'src': 'embed', 'start': 768.384, 'weight': 4, 'content': [{'end': 772.107, 'text': "So in the upcoming video, I'll also show you how to set this up locally,", 'start': 768.384, 'duration': 3.723}, {'end': 777.151, 'text': 'how to create a CSS file and link it to your HTML file and everything and beyond.', 'start': 772.107, 'duration': 5.044}, {'end': 779.173, 'text': "We're gonna do all of that step by step.", 'start': 777.291, 'duration': 1.882}, {'end': 780.814, 'text': "That's it for this video.", 'start': 779.753, 'duration': 1.061}, {'end': 782.015, 'text': 'Thank you so much for watching.', 'start': 780.974, 'duration': 1.041}, {'end': 785.598, 'text': "As always, I'll see you in the next video.", 'start': 782.155, 'duration': 3.443}, {'end': 796.311, 'text': 'Hey you, welcome back.', 'start': 794.249, 'duration': 2.062}, {'end': 801.355, 'text': "So in this video we're gonna talk about the setup and how.", 'start': 796.651, 'duration': 4.704}], 'summary': 'Video tutorial covers local setup, css file creation, step-by-step process.', 'duration': 32.971, 'max_score': 768.384, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI768384.jpg'}, {'end': 1083.411, 'src': 'heatmap', 'start': 837.382, 'weight': 0.924, 'content': [{'end': 838.523, 'text': 'So I just use this.', 'start': 837.382, 'duration': 1.141}, {'end': 842.526, 'text': "Now I'm going to just open a folder.", 'start': 840.004, 'duration': 2.522}, {'end': 844.408, 'text': "So I'll go to a crash course.", 'start': 842.747, 'duration': 1.661}, {'end': 847.918, 'text': 'And I can open up whichever folder I want.', 'start': 845.217, 'duration': 2.701}, {'end': 849.319, 'text': "So I'm just gonna open that one up.", 'start': 848.159, 'duration': 1.16}, {'end': 852.381, 'text': "And let's get out of here.", 'start': 851.26, 'duration': 1.121}, {'end': 857.844, 'text': 'And in this one, I can create a new folder and start writing some CSS.', 'start': 853.201, 'duration': 4.643}, {'end': 861.786, 'text': "So we'll just play around with some CSS and just see how it feels.", 'start': 858.104, 'duration': 3.682}, {'end': 864.487, 'text': "And you'll start to get a hang of it.", 'start': 862.386, 'duration': 2.101}, {'end': 871.731, 'text': "And then I'll even show you that as a developer, you're not writing all this code all the time, unless you just do front end all the time.", 'start': 864.547, 'duration': 7.184}, {'end': 875.593, 'text': "You're not writing a lot of this code from scratch.", 'start': 872.711, 'duration': 2.882}, {'end': 880.595, 'text': 'You can actually use stuff from online and other tools you could use.', 'start': 875.933, 'duration': 4.662}, {'end': 882.436, 'text': 'And I want to share those with you as well.', 'start': 880.895, 'duration': 1.541}, {'end': 890.24, 'text': "So let's say I create a new file and we'll just call it kozy.html.", 'start': 883.717, 'duration': 6.523}, {'end': 894.803, 'text': 'And I will go to my Chrome.', 'start': 892.582, 'duration': 2.221}, {'end': 897.564, 'text': 'I will hit Command O.', 'start': 895.723, 'duration': 1.841}, {'end': 898.325, 'text': 'I will go to Chrome.', 'start': 897.564, 'duration': 0.761}, {'end': 902.812, 'text': 'GitHub HTML crash course and cause you to HTML.', 'start': 899.249, 'duration': 3.563}, {'end': 903.432, 'text': 'I will open it.', 'start': 902.892, 'duration': 0.54}, {'end': 906.934, 'text': "OK So it's currently a blank file like I expected.", 'start': 903.452, 'duration': 3.482}, {'end': 910.497, 'text': "I'll hit doc tab autocomplete.", 'start': 906.954, 'duration': 3.543}, {'end': 913.619, 'text': "I will delete that stuff because we don't need that for now.", 'start': 911.177, 'duration': 2.442}, {'end': 924.607, 'text': 'I will call this new final or new video.', 'start': 914.6, 'duration': 10.007}, {'end': 930.966, 'text': "and I will hit refresh and at the top you can see in the tab, so that's not CSS right now.", 'start': 925.663, 'duration': 5.303}, {'end': 937.991, 'text': "But I'll show you how to add CSS with it, okay? So, and I'll show you how to link your style sheet as well.", 'start': 931.447, 'duration': 6.544}, {'end': 948.717, 'text': "So now what I'm gonna do is, I'm just gonna create a folder and we're gonna call this folder practice CSS, okay?", 'start': 938.491, 'duration': 10.226}, {'end': 952.299, 'text': 'And in this folder I will throw Kazi in there, okay?', 'start': 949.158, 'duration': 3.141}, {'end': 954.421, 'text': "So I will hit, I'll move it in there.", 'start': 952.5, 'duration': 1.921}, {'end': 960.799, 'text': "Now inside of this folder, I'm going to create another folder, and I will call this styles.", 'start': 955.396, 'duration': 5.403}, {'end': 968.503, 'text': "And inside of the folder styles, I will create a new file, and I'll call it styles that CSS.", 'start': 962.42, 'duration': 6.083}, {'end': 971.444, 'text': 'Now this is very important how I structured it.', 'start': 969.023, 'duration': 2.421}, {'end': 973.025, 'text': 'So pay attention.', 'start': 971.564, 'duration': 1.461}, {'end': 984.691, 'text': 'And a lot, you know, you might make this mistake where you might put styles as CSS kind of outside of that folder or somewhere else.', 'start': 973.826, 'duration': 10.865}, {'end': 986.972, 'text': "So just make sure you're aware of that.", 'start': 984.711, 'duration': 2.261}, {'end': 997.917, 'text': "And what I want to do now is let's say I write some CSS in here, right? So I'll say, Hey, make all the H ones gonna be color here.", 'start': 988.912, 'duration': 9.005}, {'end': 1001.539, 'text': 'And I can also do something pretty cool.', 'start': 999.038, 'duration': 2.501}, {'end': 1003.68, 'text': "And I'll show you h1.", 'start': 1001.579, 'duration': 2.101}, {'end': 1011.344, 'text': "And I can say h1, a and make the color of this, let's say red.", 'start': 1004.441, 'duration': 6.903}, {'end': 1018.007, 'text': "Alright, so Visual Studio, again, it's pretty cool, I can hover over this and click this.", 'start': 1012.424, 'duration': 5.583}, {'end': 1021.889, 'text': 'And like, look, it shows me that the color of this is red.', 'start': 1018.887, 'duration': 3.002}, {'end': 1031.866, 'text': "And sometimes what it'll do is it'll even pop up like a color meter and you can just play around with it visually.", 'start': 1022.629, 'duration': 9.237}, {'end': 1034.107, 'text': 'but you know, like it just brought it up right now.', 'start': 1031.866, 'duration': 2.241}, {'end': 1040.609, 'text': 'I still am figuring out how the heck it actually brings it up, but sometimes it brings it up and then you can just control it from there.', 'start': 1034.887, 'duration': 5.722}, {'end': 1044.412, 'text': "Anyway, let's go back to our, uh, code and cause it at HTML.", 'start': 1040.95, 'duration': 3.462}, {'end': 1049.014, 'text': 'So in here, if I write an H one, right.', 'start': 1045.012, 'duration': 4.002}, {'end': 1056.315, 'text': 'And I say, um, practice CSS header one.', 'start': 1049.034, 'duration': 7.281}, {'end': 1061.158, 'text': 'This should be this should be green.', 'start': 1059.177, 'duration': 1.981}, {'end': 1062.98, 'text': 'Okay, so I have to open this file again.', 'start': 1061.318, 'duration': 1.662}, {'end': 1067.323, 'text': "So I'm going to because the I changed where the file is located.", 'start': 1063.52, 'duration': 3.803}, {'end': 1073.188, 'text': "So now it's not in this directory anymore users clever programmer GitHub, HTML crash core slash Qazi.", 'start': 1067.403, 'duration': 5.785}, {'end': 1083.411, 'text': "Now it's in slash Practice CSS slash Qazi.html.", 'start': 1073.248, 'duration': 10.163}], 'summary': 'Demonstration of creating folders, writing css, and linking styles in a coding tutorial.', 'duration': 246.029, 'max_score': 837.382, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI837382.jpg'}, {'end': 880.595, 'src': 'embed', 'start': 853.201, 'weight': 5, 'content': [{'end': 857.844, 'text': 'And in this one, I can create a new folder and start writing some CSS.', 'start': 853.201, 'duration': 4.643}, {'end': 861.786, 'text': "So we'll just play around with some CSS and just see how it feels.", 'start': 858.104, 'duration': 3.682}, {'end': 864.487, 'text': "And you'll start to get a hang of it.", 'start': 862.386, 'duration': 2.101}, {'end': 871.731, 'text': "And then I'll even show you that as a developer, you're not writing all this code all the time, unless you just do front end all the time.", 'start': 864.547, 'duration': 7.184}, {'end': 875.593, 'text': "You're not writing a lot of this code from scratch.", 'start': 872.711, 'duration': 2.882}, {'end': 880.595, 'text': 'You can actually use stuff from online and other tools you could use.', 'start': 875.933, 'duration': 4.662}], 'summary': 'Demonstrating css usage and efficiency in web development.', 'duration': 27.394, 'max_score': 853.201, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI853201.jpg'}, {'end': 1199.781, 'src': 'embed', 'start': 1173.086, 'weight': 6, 'content': [{'end': 1178.63, 'text': 'So now when I connect this style sheet to my HTML, how do I do that? I just go inside of my head.', 'start': 1173.086, 'duration': 5.544}, {'end': 1183.793, 'text': 'I do style, hit tab, or sorry, go here, hit link, hit tab.', 'start': 1179.27, 'duration': 4.523}, {'end': 1188.575, 'text': "And yes, it's a style sheet, so I'm gonna leave it as is.", 'start': 1184.613, 'duration': 3.962}, {'end': 1190.717, 'text': "And for the link, I'm gonna provide a local link.", 'start': 1188.675, 'duration': 2.042}, {'end': 1199.781, 'text': "So how do the paths work? Currently, right, I'm inside of qazi.html, so this is a file.", 'start': 1191.117, 'duration': 8.664}], 'summary': 'Connecting a style sheet to html using a local link inside qazi.html file.', 'duration': 26.695, 'max_score': 1173.086, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI1173086.jpg'}, {'end': 1331.322, 'src': 'embed', 'start': 1291.228, 'weight': 7, 'content': [{'end': 1294.791, 'text': 'So again, these are the you know, h1 is a selector.', 'start': 1291.228, 'duration': 3.563}, {'end': 1299.015, 'text': 'And I can, you know, use that to select it.', 'start': 1295.392, 'duration': 3.623}, {'end': 1302.859, 'text': 'And I can do the same thing.', 'start': 1300.997, 'duration': 1.862}, {'end': 1305.661, 'text': 'And dig even further, right.', 'start': 1303.9, 'duration': 1.761}, {'end': 1306.922, 'text': 'So I can say that h1.', 'start': 1305.721, 'duration': 1.201}, {'end': 1320.071, 'text': 'Or I can say that for h2, link on hover, what I want you to do is color orange.', 'start': 1307.183, 'duration': 12.888}, {'end': 1331.322, 'text': "So now what's gonna happen is that if you have a H2 tag and it's a link and when you hover on that link, it's gonna turn orange.", 'start': 1321.272, 'duration': 10.05}], 'summary': 'Explanation of using css selectors and defining hover effect for h2 link.', 'duration': 40.094, 'max_score': 1291.228, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI1291228.jpg'}], 'start': 111.345, 'title': 'Css basics for website design', 'summary': 'Discusses the importance of css in website design, emphasizing its impact on visual improvements and functionality enhancements, also covering html and css workflow setup and path connections and styling in html.', 'chapters': [{'end': 231.516, 'start': 111.345, 'title': 'Understanding css for website design', 'summary': 'Discusses the importance of css in website design, emphasizing that using only html for website design is inappropriate and can lower credibility, leading to missed opportunities and wasted time.', 'duration': 120.171, 'highlights': ['CSS stands for cascading style sheet, which is essential for giving a website design and pizazz, emphasizing that using only HTML for website design is inappropriate and can lower credibility, leading to missed opportunities and wasted time. CSS stands for cascading style sheet, which is essential for giving a website design and pizazz.', 'Using only HTML for website design is inappropriate and can lower credibility, leading to missed opportunities and wasted time. Using only HTML for website design is inappropriate and can lower credibility, leading to missed opportunities and wasted time.', 'Website design using CSS is compared to going out to a fancy dinner either naked or dressed up, highlighting the importance of website design using CSS for credibility and professionalism. Website design using CSS is compared to going out to a fancy dinner either naked or dressed up, highlighting the importance of website design using CSS for credibility and professionalism.']}, {'end': 713.669, 'start': 233.032, 'title': 'Introduction to css basics', 'summary': 'Demonstrates the impact of css on website design by providing a comparison of a website with and without css, highlighting the visual improvements and functionality enhancements, and also introduces the concept of styling elements through inline and internal css, specifying selectors and declarations and demonstrating the application of styles to html elements.', 'duration': 480.637, 'highlights': ['The chapter demonstrates the impact of CSS on website design by providing a comparison of a website with and without CSS, highlighting the visual improvements and functionality enhancements.', 'The instructor introduces the concept of styling elements through inline and internal CSS, specifying selectors and declarations and demonstrating the application of styles to HTML elements.', 'The instructor emphasizes the importance of using selectors and declarations in CSS to efficiently apply styles to multiple elements and avoid repetitive styling processes.', 'The instructor explains the process of selecting and applying different styles, such as changing colors, font sizes, and alignment, to HTML elements using CSS.', 'The chapter emphasizes that the purpose of the presentation is to provide a basic understanding of CSS and its functionalities, with the promise of more advanced topics in subsequent sessions.']}, {'end': 1089.976, 'start': 714.47, 'title': 'Html and css workflow setup', 'summary': 'Discusses the importance of segregating html and css code, setting up a local environment, and creating and linking css files to html files, providing a detailed walkthrough of creating and organizing css files with examples and tools.', 'duration': 375.506, 'highlights': ['The importance of segregating HTML and CSS code is emphasized to avoid redundancy and create a segmented and organized codebase for easier management. By placing the design in the CSS file and the rest of the code in the HTML file, the codebase becomes segmented, organized, and easier to manage.', 'The process of setting up a local environment and creating and linking CSS files to HTML files is explained for a seamless workflow. The chapter provides a detailed walkthrough of setting up a local environment, creating a CSS file, organizing it into folders, and linking it to an HTML file.', "A demonstration of writing CSS code, including using Visual Studio Code's features for color selection and a walkthrough of creating and organizing CSS files with examples and tools, is provided. The chapter includes a demonstration of writing CSS code, utilizing Visual Studio Code's features for color selection, and a detailed walkthrough of creating and organizing CSS files, providing practical examples and tools for developers."]}, {'end': 1436.961, 'start': 1091.117, 'title': 'Path connections and styling in html', 'summary': 'Explores how to connect a css file to an html file using paths, demonstrating the color changes of headers, links, and images, as well as the application of nested selectors to modify the appearance and behavior of elements.', 'duration': 345.844, 'highlights': ['Connecting a CSS file to an HTML file using paths The transcript discusses the process of connecting a CSS file to an HTML file using paths, showcasing the color changes of headers, links, and images based on the applied styles.', 'Demonstration of color changes for headers and links The speaker demonstrates the color changes for headers and links by applying different styles, such as turning headers and links red when specified.', 'Application of nested selectors to modify element appearance and behavior The transcript illustrates the use of nested selectors to modify the appearance and behavior of elements, such as changing the color of headers and links based on specific conditions.']}], 'duration': 1325.616, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI111345.jpg', 'highlights': ['Using only HTML for website design is inappropriate and can lower credibility, leading to missed opportunities and wasted time.', 'Website design using CSS is compared to going out to a fancy dinner either naked or dressed up, highlighting the importance of website design using CSS for credibility and professionalism.', 'The chapter demonstrates the impact of CSS on website design by providing a comparison of a website with and without CSS, highlighting the visual improvements and functionality enhancements.', 'The instructor emphasizes the importance of using selectors and declarations in CSS to efficiently apply styles to multiple elements and avoid repetitive styling processes.', 'The process of setting up a local environment and creating and linking CSS files to HTML files is explained for a seamless workflow.', "A demonstration of writing CSS code, including using Visual Studio Code's features for color selection and a walkthrough of creating and organizing CSS files with examples and tools, is provided.", 'Connecting a CSS file to an HTML file using paths The transcript discusses the process of connecting a CSS file to an HTML file using paths, showcasing the color changes of headers, links, and images based on the applied styles.', 'Application of nested selectors to modify element appearance and behavior The transcript illustrates the use of nested selectors to modify the appearance and behavior of elements, such as changing the color of headers and links based on specific conditions.']}, {'end': 2402.293, 'segs': [{'end': 1508.232, 'src': 'embed', 'start': 1469.092, 'weight': 8, 'content': [{'end': 1470.073, 'text': "I'll just give this an ID.", 'start': 1469.092, 'duration': 0.981}, {'end': 1475.785, 'text': "And I'll go to styles as CSS.", 'start': 1472.683, 'duration': 3.102}, {'end': 1481.568, 'text': 'And I will say one.', 'start': 1476.425, 'duration': 5.143}, {'end': 1491.834, 'text': "And we'll say border radius, and we'll give it like four pixels or something.", 'start': 1483.309, 'duration': 8.525}, {'end': 1495.756, 'text': "Okay, did something happen? I don't know.", 'start': 1491.854, 'duration': 3.902}, {'end': 1496.956, 'text': "Let's try with more.", 'start': 1495.816, 'duration': 1.14}, {'end': 1505.009, 'text': 'Did you guys notice something changed? It became a little bit more rounded around the edges.', 'start': 1498.057, 'duration': 6.952}, {'end': 1508.232, 'text': "Let's try something ridiculous so maybe we can see the difference.", 'start': 1505.55, 'duration': 2.682}], 'summary': 'Applying css to give a border radius of 4 pixels, noticing a slight change in the rounded edges.', 'duration': 39.14, 'max_score': 1469.092, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI1469092.jpg'}, {'end': 1639.226, 'src': 'embed', 'start': 1601.38, 'weight': 6, 'content': [{'end': 1605.863, 'text': 'So this ID is a form of selector and I can select things with that ID.', 'start': 1601.38, 'duration': 4.483}, {'end': 1609.685, 'text': 'I can also select things with a class.', 'start': 1606.323, 'duration': 3.362}, {'end': 1617.929, 'text': 'So now I can create a class and I can say chessboard.', 'start': 1610.165, 'duration': 7.764}, {'end': 1625.894, 'text': 'So as soon as it is a chessboard, maybe I want to give it a certain radius.', 'start': 1620.551, 'duration': 5.343}, {'end': 1630.64, 'text': "And if it's a maintenance one, I want to do something special.", 'start': 1628.198, 'duration': 2.442}, {'end': 1632.361, 'text': "Okay, so let's just look at it online.", 'start': 1630.7, 'duration': 1.661}, {'end': 1639.226, 'text': 'Okay, how to add shadow in CSS.', 'start': 1632.401, 'duration': 6.825}], 'summary': 'Using ids and classes, css can style elements with specific attributes like radius and shadow.', 'duration': 37.846, 'max_score': 1601.38, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI1601380.jpg'}, {'end': 1722.931, 'src': 'embed', 'start': 1666.031, 'weight': 2, 'content': [{'end': 1668.292, 'text': "And then you'll see how I use these as well.", 'start': 1666.031, 'duration': 2.261}, {'end': 1670.393, 'text': "Okay So let's just go here.", 'start': 1668.332, 'duration': 2.061}, {'end': 1673.073, 'text': "And let's see, they got something called box shadow.", 'start': 1670.573, 'duration': 2.5}, {'end': 1676.815, 'text': 'Okay Okay, cool.', 'start': 1673.093, 'duration': 3.722}, {'end': 1680.196, 'text': 'We have some examples of box shadows being used here.', 'start': 1676.855, 'duration': 3.341}, {'end': 1684.177, 'text': "All right, they're kind of over the top, something that doesn't look that good.", 'start': 1680.976, 'duration': 3.201}, {'end': 1688.298, 'text': "We'll just add in a random box shadow and see how it works.", 'start': 1684.657, 'duration': 3.641}, {'end': 1691.379, 'text': 'Box shadow.', 'start': 1690.439, 'duration': 0.94}, {'end': 1696.032, 'text': "And let's just make it 10 pixels.", 'start': 1691.999, 'duration': 4.033}, {'end': 1700.975, 'text': 'Apparently, it takes in a color.', 'start': 1699.575, 'duration': 1.4}, {'end': 1703.237, 'text': "Let's go to w three schools.", 'start': 1701.716, 'duration': 1.521}, {'end': 1710.722, 'text': "And it's saying box shadow, you can give it a width, a height, and or sorry, a height and width.", 'start': 1704.018, 'duration': 6.704}, {'end': 1713.324, 'text': 'And you can even give it a color.', 'start': 1711.143, 'duration': 2.181}, {'end': 1716.426, 'text': 'Okay, so you can pass in like multiple parameters for it.', 'start': 1713.424, 'duration': 3.002}, {'end': 1718.588, 'text': "So let's just kind of copy this guy.", 'start': 1716.486, 'duration': 2.102}, {'end': 1720.129, 'text': "And let's just paste it here.", 'start': 1718.768, 'duration': 1.361}, {'end': 1722.931, 'text': "And let's see what happens and what it does.", 'start': 1720.929, 'duration': 2.002}], 'summary': 'Demonstrating usage of box shadow with 10 pixels and color.', 'duration': 56.9, 'max_score': 1666.031, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI1666031.jpg'}, {'end': 1923.342, 'src': 'heatmap', 'start': 1791.091, 'weight': 0.708, 'content': [{'end': 1799.494, 'text': "If something's just a part of a chessboard class, right? So let's say I do this and I say class equals chessboard like that.", 'start': 1791.091, 'duration': 8.403}, {'end': 1801.734, 'text': 'And refresh.', 'start': 1801.134, 'duration': 0.6}, {'end': 1805.716, 'text': "You'll notice that it has that radius because chessboard has a border radius.", 'start': 1802.214, 'duration': 3.502}, {'end': 1809.198, 'text': "So you'll see that it has a little circular radius going on.", 'start': 1805.756, 'duration': 3.442}, {'end': 1824.103, 'text': 'Now what I can also do is for this one, the next one so you can see the difference, I can say class is equal to chessboard space mate in one.', 'start': 1809.739, 'duration': 14.364}, {'end': 1829.285, 'text': 'And notice how this is inheriting from two different classes.', 'start': 1826.364, 'duration': 2.921}, {'end': 1832.306, 'text': 'One is chessboard, two is mate in one.', 'start': 1829.745, 'duration': 2.561}, {'end': 1841.604, 'text': 'Now, if I wanted to look up checkmate in two images, I could maybe give them a different.', 'start': 1833.507, 'duration': 8.097}, {'end': 1846.426, 'text': "Oh okay, I thought that was actually my video that popped up, but that wasn't.", 'start': 1841.604, 'duration': 4.822}, {'end': 1855.991, 'text': 'So if I wanted checkmate into image, to look differently, I can copy that image address.', 'start': 1847.426, 'duration': 8.565}, {'end': 1862.254, 'text': 'And I can do something similar, paste it in here.', 'start': 1858.732, 'duration': 3.522}, {'end': 1868.534, 'text': 'And, and for class, I can create a new class.', 'start': 1864.014, 'duration': 4.52}, {'end': 1875.446, 'text': 'Okay, and try this, pause it and design your maintenance to class to look different than the maintenance one class.', 'start': 1868.594, 'duration': 6.852}, {'end': 1877.51, 'text': 'Okay, so give that a try right now.', 'start': 1875.907, 'duration': 1.603}, {'end': 1914.375, 'text': "Okay, and what I'm gonna do, so I already kinda gave you the answer there, and now for the class, I'm gonna do chessboard mate in two.", 'start': 1904.531, 'duration': 9.844}, {'end': 1923.342, 'text': 'Refresh, and now you can see that the mate, so this one, the first one, is just inheriting from the chessboard class.', 'start': 1915.595, 'duration': 7.747}], 'summary': 'Demonstration of applying classes to elements, inheriting styles, and creating new classes in html and css.', 'duration': 132.251, 'max_score': 1791.091, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI1791091.jpg'}, {'end': 2053.79, 'src': 'embed', 'start': 2018.924, 'weight': 0, 'content': [{'end': 2021.345, 'text': "that's where you're going to make the biggest progress.", 'start': 2018.924, 'duration': 2.421}, {'end': 2027.987, 'text': "every time i've literally just sat down and taken notes, i end up finding out that i haven't made real, true progress.", 'start': 2021.345, 'duration': 6.642}, {'end': 2033.469, 'text': "but when i work on something on my own and then i have it there at the end, that's when i make real progress.", 'start': 2027.987, 'duration': 5.482}, {'end': 2035.448, 'text': 'Okay, cool.', 'start': 2034.847, 'duration': 0.601}, {'end': 2036.95, 'text': 'So box shadow.', 'start': 2035.888, 'duration': 1.062}, {'end': 2040.494, 'text': 'Now we can also make the box shadows cooler.', 'start': 2037.31, 'duration': 3.184}, {'end': 2042.116, 'text': 'We can make them a little bit more different.', 'start': 2040.594, 'duration': 1.522}, {'end': 2046.201, 'text': "So first I'm going to make it so right now on hover it doesn't do it.", 'start': 2042.296, 'duration': 3.905}, {'end': 2053.79, 'text': "But I can make it that on hover, if you hover on the chessboard, right? So let's do that.", 'start': 2046.801, 'duration': 6.989}], 'summary': "Taking notes doesn't lead to real progress; working independently on projects does.", 'duration': 34.866, 'max_score': 2018.924, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI2018924.jpg'}, {'end': 2129.527, 'src': 'embed', 'start': 2097.781, 'weight': 3, 'content': [{'end': 2101.563, 'text': 'Right, it creates a yellow box shadow around those images.', 'start': 2097.781, 'duration': 3.782}, {'end': 2105.286, 'text': 'So it knows that those are selected.', 'start': 2103.565, 'duration': 1.721}, {'end': 2109.929, 'text': 'Now, could we make it the box shadows a little bit better? Yes, we can.', 'start': 2106.286, 'duration': 3.643}, {'end': 2111.169, 'text': "And let's try it out.", 'start': 2110.089, 'duration': 1.08}, {'end': 2113.691, 'text': "So there's a thing called CSS Matic.", 'start': 2111.269, 'duration': 2.422}, {'end': 2123.805, 'text': 'And you can go there and it lets you it lets you create different kinds of boxes, okay, and lets you do it visually.', 'start': 2114.712, 'duration': 9.093}, {'end': 2129.527, 'text': 'So whether you want to actually create a radius, and you want to see, you know, you want to make it look a certain way.', 'start': 2123.865, 'duration': 5.662}], 'summary': 'Using css matic to create better box shadows visually.', 'duration': 31.746, 'max_score': 2097.781, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI2097781.jpg'}, {'end': 2240.409, 'src': 'embed', 'start': 2205.267, 'weight': 1, 'content': [{'end': 2206.588, 'text': "I don't spend a lot of time doing it.", 'start': 2205.267, 'duration': 1.321}, {'end': 2213.99, 'text': 'But do I know how to put together a beautiful looking website and use the right resources for them or at least how to research? Yes.', 'start': 2206.988, 'duration': 7.002}, {'end': 2220.312, 'text': 'And that skill is a lot more important than even you knowing all of this just kind of at the back of your head.', 'start': 2214.61, 'duration': 5.702}, {'end': 2223.081, 'text': 'All right, so now I got this.', 'start': 2221.98, 'duration': 1.101}, {'end': 2231.185, 'text': 'If I had to guess what these here mean, I would assume that it has to do with compatibility between different browsers.', 'start': 2224.561, 'duration': 6.624}, {'end': 2240.409, 'text': "So if you're on Mozilla or WebKit, whatever that is, probably just gives you some, make sure that there's compatibility on all different platforms.", 'start': 2231.705, 'duration': 8.704}], 'summary': 'Proficient in website design and compatibility across browsers, emphasizing the importance of research and skill.', 'duration': 35.142, 'max_score': 2205.267, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI2205267.jpg'}], 'start': 1436.961, 'title': 'Css styling and box shadows in web development', 'summary': 'Covers using ids and classes as css selectors to add border radius and shadows, demonstrating the differences between them. it also discusses box shadow in css with examples of different parameters and colors, emphasizing experimentation and practical learning.', 'chapters': [{'end': 1664.217, 'start': 1436.961, 'title': 'Css styling with selectors', 'summary': 'Explains how to use ids and classes as css selectors to add border radius and shadows to elements, demonstrating the impact of different pixel values and the differences between ids and classes, in a practical and relatable manner.', 'duration': 227.256, 'highlights': ['Using IDs and classes as CSS selectors The speaker demonstrates how to use IDs and classes as CSS selectors to apply different styles to elements, providing a practical understanding of how these selectors work.', 'Impact of different pixel values on border radius The speaker showcases the impact of different pixel values on the border radius, illustrating how the changing pixel values affect the appearance of the element and providing a relatable example for understanding.', 'Differences between IDs and classes The speaker explains the differences between using IDs and classes as selectors, providing a clear comparison of the impact of applying styles using these different selectors.', 'Practical demonstration of adding shadows in CSS The speaker discusses the process of adding shadows in CSS, emphasizing the practical approach of Googling for solutions and highlighting the relatability of learning through natural curiosity and online searches.']}, {'end': 1944.128, 'start': 1666.031, 'title': 'Using box shadow and css classes', 'summary': 'Discusses using box shadow in css, showcasing examples of box shadows with different parameters and colors, and demonstrates the inheritance of properties between css classes.', 'duration': 278.097, 'highlights': ['The chapter discusses using box shadow in CSS, showcasing examples of box shadows with different parameters and colors Examples of box shadows with different parameters and colors were demonstrated, highlighting the versatility of box shadows in CSS.', 'Demonstrates the inheritance of properties between CSS classes The transcript illustrates the inheritance of properties between CSS classes, showcasing how properties from multiple classes can be inherited by an element.']}, {'end': 2402.293, 'start': 1945.134, 'title': 'Exploring box shadows in css', 'summary': 'Explores the concept of box shadows in css, emphasizing the importance of experimentation and playfulness in web development, showcasing practical examples and encouraging a mindset shift towards learning through hands-on experiences rather than relying solely on tutorials or structured learning.', 'duration': 457.159, 'highlights': ['Encouraging experimentation and playfulness in web development The speaker emphasizes the importance of playing around and experimenting with code, highlighting that genuine progress is made when working on projects independently rather than just following tutorials.', 'Demonstrating practical examples of creating box shadows in CSS The speaker provides a step-by-step demonstration of how to create and customize box shadows using CSS, including practical examples and visual effects.', 'Emphasizing the value of practical skills over theoretical knowledge The speaker stresses the importance of practical skills in web development, stating that understanding how to research and utilize resources effectively is more crucial than memorizing technical details.']}], 'duration': 965.332, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI1436961.jpg', 'highlights': ['The speaker emphasizes the importance of playing around and experimenting with code, highlighting that genuine progress is made when working on projects independently rather than just following tutorials.', 'The speaker stresses the importance of practical skills in web development, stating that understanding how to research and utilize resources effectively is more crucial than memorizing technical details.', 'Examples of box shadows with different parameters and colors were demonstrated, highlighting the versatility of box shadows in CSS.', 'The speaker provides a step-by-step demonstration of how to create and customize box shadows using CSS, including practical examples and visual effects.', 'The speaker discusses the process of adding shadows in CSS, emphasizing the practical approach of Googling for solutions and highlighting the relatability of learning through natural curiosity and online searches.', 'The transcript illustrates the inheritance of properties between CSS classes, showcasing how properties from multiple classes can be inherited by an element.', 'The speaker demonstrates how to use IDs and classes as CSS selectors to apply different styles to elements, providing a practical understanding of how these selectors work.', 'The speaker explains the differences between using IDs and classes as selectors, providing a clear comparison of the impact of applying styles using these different selectors.', 'The speaker showcases the impact of different pixel values on the border radius, illustrating how the changing pixel values affect the appearance of the element and providing a relatable example for understanding.']}, {'end': 3989.265, 'segs': [{'end': 2826.712, 'src': 'embed', 'start': 2803.556, 'weight': 1, 'content': [{'end': 2810.541, 'text': 'If you like this style of learning, right? This is less structured than like bullet point, everything just showing to you.', 'start': 2803.556, 'duration': 6.985}, {'end': 2813.943, 'text': "It's like we're working through things together and we're coming up together.", 'start': 2811.061, 'duration': 2.882}, {'end': 2818.746, 'text': 'If you like this style of learning, comment below if you like it and what you like about it.', 'start': 2814.283, 'duration': 4.463}, {'end': 2822.289, 'text': "If you don't, then comment below and do let me know.", 'start': 2819.687, 'duration': 2.602}, {'end': 2824.09, 'text': "That's it for this video.", 'start': 2823.069, 'duration': 1.021}, {'end': 2826.712, 'text': 'Thank you so much for watching as always.', 'start': 2824.41, 'duration': 2.302}], 'summary': 'Interactive learning approach encourages viewer feedback and engagement.', 'duration': 23.156, 'max_score': 2803.556, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI2803556.jpg'}, {'end': 2925.699, 'src': 'embed', 'start': 2899.318, 'weight': 0, 'content': [{'end': 2905.864, 'text': 'Or like a detective, I can pay attention and I can actually figure out exactly what you did.', 'start': 2899.318, 'duration': 6.546}, {'end': 2915.013, 'text': "And wouldn't that be awesome that you could go to other people's website and figure out exactly what they did to make it and then use that for your own website?", 'start': 2906.224, 'duration': 8.789}, {'end': 2916.494, 'text': 'So let me show you what I mean.', 'start': 2915.473, 'duration': 1.021}, {'end': 2925.699, 'text': "So let's just say that this was a website that I had built and you were just coming to it for the first time and you were like, okay, this is cool.", 'start': 2917.255, 'duration': 8.444}], 'summary': 'Learn to analyze websites and replicate successful strategies for your own website.', 'duration': 26.381, 'max_score': 2899.318, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI2899318.jpg'}, {'end': 3475.408, 'src': 'heatmap', 'start': 3229.503, 'weight': 0.713, 'content': [{'end': 3237.151, 'text': "Similarly, I can go onto this website, the project you're supposed to be building, right the cleverprogrammer.github.io.", 'start': 3229.503, 'duration': 7.648}, {'end': 3241.115, 'text': 'I can go to this and I can say this font is interesting.', 'start': 3237.151, 'duration': 3.964}, {'end': 3242.497, 'text': 'what font actually is it?', 'start': 3241.115, 'duration': 1.382}, {'end': 3249.842, 'text': 'So I can hit inspect and then, under inspect, can actually see what type of font it is okay.', 'start': 3242.557, 'duration': 7.285}, {'end': 3260.609, 'text': "so i can click or click here and it's telling me what font size it is h1, 2.5, rem and i can see what type of font it is.", 'start': 3249.842, 'duration': 10.767}, {'end': 3263.471, 'text': "so let's see if i scroll down.", 'start': 3260.609, 'duration': 2.862}, {'end': 3265.252, 'text': "it's selling me the font family.", 'start': 3263.471, 'duration': 1.781}, {'end': 3267.714, 'text': "so it's telling me a font family.", 'start': 3265.252, 'duration': 2.462}, {'end': 3271.436, 'text': "it's telling me the line height, is telling me the font weight and all of that.", 'start': 3267.714, 'duration': 3.722}, {'end': 3275.128, 'text': "So I'm like interesting.", 'start': 3274.048, 'duration': 1.08}, {'end': 3279.749, 'text': "We're using Railway Sans Serif.", 'start': 3276.509, 'duration': 3.24}, {'end': 3287.231, 'text': "All right, and it's telling me it's on line 22 under whatever this file is.", 'start': 3280.97, 'duration': 6.261}, {'end': 3290.192, 'text': 'So I actually, it might actually even take me to the file.', 'start': 3287.271, 'duration': 2.921}, {'end': 3294.773, 'text': "So now I'm actually looking straight up at the styles.css file.", 'start': 3290.692, 'duration': 4.081}, {'end': 3302.735, 'text': 'And I can see that under our content, I can see the font that was used, the line height that was used, the font weight that was used, the max width.', 'start': 3294.973, 'duration': 7.762}, {'end': 3310.542, 'text': 'and all of that, okay? So just to give you an example, let me full screen this guy so you can see him better.', 'start': 3304.136, 'duration': 6.406}, {'end': 3316.748, 'text': 'You can actually even use a tool like Font Face Ninja.', 'start': 3311.863, 'duration': 4.885}, {'end': 3323.257, 'text': 'and once you hover over it, it tells you what font is being used, so you can already see.', 'start': 3318.394, 'duration': 4.863}, {'end': 3324.417, 'text': 'It says Railway.', 'start': 3323.357, 'duration': 1.06}, {'end': 3333.242, 'text': "okay?. Railway is a cool font and you can see that it says it's in medium, about 40 pixels and 48 pixel line height.", 'start': 3324.417, 'duration': 8.825}, {'end': 3338.765, 'text': 'okay?. Line height means when you press Enter, you know how separated are they?', 'start': 3333.242, 'duration': 5.523}, {'end': 3341.347, 'text': 'So it has good spacing and it makes it really legible.', 'start': 3338.785, 'duration': 2.562}, {'end': 3343.942, 'text': 'So you can be like, okay, cool.', 'start': 3342.881, 'duration': 1.061}, {'end': 3353.594, 'text': 'Now what you can do is if you want that same font on the chest project or whatever that I was making here, I can go to fonts.google.com.', 'start': 3344.663, 'duration': 8.931}, {'end': 3361.145, 'text': 'and I can find Railway, so I can search for Railway.', 'start': 3358.001, 'duration': 3.144}, {'end': 3363.508, 'text': 'And here it is.', 'start': 3362.587, 'duration': 0.921}, {'end': 3367.233, 'text': 'I can go to Railway, and I can say select this font.', 'start': 3363.768, 'duration': 3.465}, {'end': 3368.454, 'text': 'It popped up at the bottom.', 'start': 3367.333, 'duration': 1.121}, {'end': 3370.958, 'text': "I'll zoom in a little bit more here.", 'start': 3368.474, 'duration': 2.484}, {'end': 3374.562, 'text': 'And once it pops up, I can just copy this thing.', 'start': 3371.999, 'duration': 2.563}, {'end': 3375.924, 'text': "So I'm gonna just go and import.", 'start': 3374.602, 'duration': 1.322}, {'end': 3378.512, 'text': 'copy it like this.', 'start': 3377.651, 'duration': 0.861}, {'end': 3383.996, 'text': 'So if I wanted to put it directly into my HTML, I would copy it with the style tag.', 'start': 3379.112, 'duration': 4.884}, {'end': 3388.239, 'text': 'But since I wanna put it only in my CSS, I will put it like this.', 'start': 3384.016, 'duration': 4.223}, {'end': 3392.002, 'text': "So I'll put it in my CSS file all the way at the top.", 'start': 3389.48, 'duration': 2.522}, {'end': 3407.374, 'text': "And to activate this thing, I'll actually say that whatever is in my body make it this font.", 'start': 3398.407, 'duration': 8.967}, {'end': 3410.355, 'text': "Now let's go back here, let's refresh.", 'start': 3408.755, 'duration': 1.6}, {'end': 3414.696, 'text': 'And as soon as I refresh, you can see the font looks better right?', 'start': 3411.375, 'duration': 3.321}, {'end': 3421.818, 'text': 'And now, when I right click on this and inspect, hopefully it, and then it shows up.', 'start': 3415.216, 'duration': 6.602}, {'end': 3423.778, 'text': 'In body, look at the font.', 'start': 3421.898, 'duration': 1.88}, {'end': 3427.119, 'text': 'Railway Sans Serif.', 'start': 3425.539, 'duration': 1.58}, {'end': 3430.48, 'text': "And it's looking a lot better in my opinion.", 'start': 3427.819, 'duration': 2.661}, {'end': 3434.634, 'text': "You'll be like, oh, interesting.", 'start': 3432.773, 'duration': 1.861}, {'end': 3437.736, 'text': 'Not this guy, this guy right over here, okay?', 'start': 3435.595, 'duration': 2.141}, {'end': 3445.401, 'text': "And you can also go to RafikHazi.com if you want inspiration from my actual one that I'm using as my business.", 'start': 3437.816, 'duration': 7.585}, {'end': 3451.085, 'text': "Or maybe for whatever reason, cleverprogrammer.github.io isn't working.", 'start': 3446.882, 'duration': 4.203}, {'end': 3458.955, 'text': 'So you can see how, like a detective, I can just go figure out each component of the puzzle, right?', 'start': 3452.79, 'duration': 6.165}, {'end': 3467.302, 'text': 'And including, maybe I can even figure out how to put this nav bar at the top, which I wanna leave to you as a challenge, all right?', 'start': 3459.575, 'duration': 7.727}, {'end': 3473.006, 'text': "So I've shown you how I would, as a detective, figure out a lot of these things and I would change a lot of these things,", 'start': 3467.322, 'duration': 5.684}, {'end': 3475.408, 'text': 'but I also wanna leave some of these things to you.', 'start': 3473.006, 'duration': 2.402}], 'summary': 'The speaker discusses identifying and implementing fonts for a project, using railway sans serif as an example, and demonstrates the process in html and css.', 'duration': 245.905, 'max_score': 3229.503, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI3229503.jpg'}, {'end': 3845.672, 'src': 'embed', 'start': 3820.867, 'weight': 3, 'content': [{'end': 3830.694, 'text': "But we are gonna be building one big project and in this big project you're gonna learn get a deep understanding of how CSS works,", 'start': 3820.867, 'duration': 9.827}, {'end': 3837.179, 'text': 'how to create forms, how to create beautiful buttons, how to create stuff where, when you hover over it, colors change,', 'start': 3830.694, 'duration': 6.485}, {'end': 3845.672, 'text': 'and just beautiful static websites that you can model after learning this.', 'start': 3837.179, 'duration': 8.493}], 'summary': 'Learn css to build beautiful static websites with forms and buttons.', 'duration': 24.805, 'max_score': 3820.867, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI3820867.jpg'}], 'start': 2402.953, 'title': 'Learning web development basics', 'summary': 'Covers the process of learning web development basics with a detective-like approach, enabling practical insights to build and improve websites.', 'chapters': [{'end': 2764.131, 'start': 2402.953, 'title': 'Css styling techniques', 'summary': 'Covers various css styling techniques including changing background colors, creating bullet points, and modifying link styles with examples of making bullet points orange on hover and removing underlines from links.', 'duration': 361.178, 'highlights': ['The chapter demonstrates creating bullet points and making them orange on hover for unordered lists, while ensuring ordered lists remain unaffected.', "It also illustrates removing underlines from links using 'text decoration: none' property and provides resources like Doorword.me and Stack Overflow for further learning.", 'Additionally, it showcases different CSS effects such as changing box shadows on hover and modifying the appearance of visited links.']}, {'end': 3167.374, 'start': 2764.151, 'title': 'Learning web development basics', 'summary': 'Covers the process of learning web development basics and emphasizes the importance of adopting a detective-like approach to understand and analyze website structures, styles, and elements, enabling the viewers to gain practical insights and knowledge to build and improve their own websites.', 'duration': 403.223, 'highlights': ['The importance of adopting a detective-like approach to understand and analyze website structures, styles, and elements. The speaker encourages the audience to approach websites like a detective, emphasizing the value of paying attention to details and understanding how different elements are constructed and styled, enabling the audience to gain insights into website development.', 'The practical demonstration of inspecting website elements and styles to gain insights into their construction. The speaker provides a step-by-step demonstration of inspecting website elements and styles, showcasing how to use the inspect tool to understand HTML code, style attributes, and their visual effects, facilitating practical learning and understanding of website development.', 'The interactive and engaging learning style that involves making mistakes and overcoming challenges together with the audience. The speaker highlights the less structured and more collaborative learning approach, emphasizing the value of making mistakes and sharing the problem-solving thought process with the audience, promoting an interactive and engaging learning experience.']}, {'end': 3437.736, 'start': 3167.934, 'title': 'Css class and font styling', 'summary': 'Covers learning about css classes, activating/deactivating styles, inspecting fonts, and applying fonts to a project, including learning about railway sans serif font and its styling.', 'duration': 269.802, 'highlights': ['Learning about CSS classes and activating/deactivating styles. The transcript discusses learning about CSS classes and the ability to activate or deactivate styles, providing insight into how to style elements with classes and IDs.', 'Inspecting and learning about font styling, including the use of Railway Sans Serif font. The transcript explains the process of inspecting font styles, identifying Railway Sans Serif font, and learning about its specific styling attributes like font size, line height, and font weight.', 'Applying the Railway Sans Serif font to a project from fonts.google.com. The transcript details the process of finding and applying the Railway Sans Serif font to a project from fonts.google.com, including the steps to select and import the font into the CSS file to style the project.']}, {'end': 3989.265, 'start': 3437.816, 'title': 'Building a static website with css and bootstrap', 'summary': 'Covers the process of building a static website using css and bootstrap, emphasizing the benefits of working deeply on one big project and leveraging detective-like skills to understand and recreate website components. the project will focus on creating forms, buttons, hover effects, and static websites to gain a deep understanding of css.', 'duration': 551.449, 'highlights': ['Leveraging detective-like skills to understand and recreate website components The speaker emphasizes the process of using detective-like skills to figure out each component of a website puzzle, including the ability to view page source and analyze HTML code, thereby encouraging the audience to recreate a website and deepen their understanding of web development.', 'Emphasizing the benefits of working deeply on one big project The speaker recommends working deeply on one big project, highlighting the importance of focusing on one project for an extended period to enhance coding skills, as opposed to dabbling in multiple small projects, to achieve a deep understanding of web development.', 'Focus on creating forms, buttons, hover effects, and static websites The project aims to provide a deep understanding of CSS by focusing on creating forms, buttons, hover effects, and static websites, emphasizing the significance of working on one big project to master these skills and create beautiful, functional web designs.']}], 'duration': 1586.312, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI2402953.jpg', 'highlights': ['The importance of adopting a detective-like approach to understand and analyze website structures, styles, and elements.', 'The interactive and engaging learning style that involves making mistakes and overcoming challenges together with the audience.', 'Leveraging detective-like skills to understand and recreate website components.', 'Focus on creating forms, buttons, hover effects, and static websites.']}, {'end': 4501.111, 'segs': [{'end': 4081.851, 'src': 'embed', 'start': 4026.826, 'weight': 0, 'content': [{'end': 4038.216, 'text': "Wouldn't it be cool to use the knowledge we've already built about HTML and then leverage CSS and Bootstrap to actually make a page like this?", 'start': 4026.826, 'duration': 11.39}, {'end': 4047.924, 'text': 'but actually even better than this, because I took the time to actually model this page and what I ended up building looks even better than this.', 'start': 4039.457, 'duration': 8.467}, {'end': 4052.768, 'text': "And so I think you're gonna have a lot of fun working on this, okay, just like I did.", 'start': 4048.385, 'duration': 4.383}, {'end': 4054.23, 'text': 'So let me go right here.', 'start': 4053.289, 'duration': 0.941}, {'end': 4057.552, 'text': 'So check out, so this is the new page.', 'start': 4055.05, 'duration': 2.502}, {'end': 4059.094, 'text': 'Again, same tagline.', 'start': 4057.793, 'duration': 1.301}, {'end': 4063.883, 'text': "But now at the top, you can see that there's a navigation bar.", 'start': 4060.441, 'duration': 3.442}, {'end': 4069.585, 'text': 'And when I hover over it, it has like specific styling that goes along with it.', 'start': 4064.383, 'duration': 5.202}, {'end': 4075.208, 'text': 'And the background pattern looks pretty cool, right? This is bland.', 'start': 4070.766, 'duration': 4.442}, {'end': 4075.868, 'text': "It's just white.", 'start': 4075.268, 'duration': 0.6}, {'end': 4081.851, 'text': 'And here we have some subtle minimalistic pattern going on in the background.', 'start': 4076.368, 'duration': 5.483}], 'summary': 'Using html, css, and bootstrap, a page was designed with improved features, including a navigation bar and a subtle background pattern.', 'duration': 55.025, 'max_score': 4026.826, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI4026826.jpg'}, {'end': 4236.368, 'src': 'embed', 'start': 4209.51, 'weight': 3, 'content': [{'end': 4221.165, 'text': "We're gonna have a lot of fun learning how to build this and learning some ins and outs of CSS along the way of Bootstrap along the way and some cool tips and tricks.", 'start': 4209.51, 'duration': 11.655}, {'end': 4230.183, 'text': 'And another thing I wanna focus on is While I want to show you the exact code that was used to build this project,', 'start': 4221.745, 'duration': 8.438}, {'end': 4236.368, 'text': "what I'm really interested in showing you is the real development workflow of a developer.", 'start': 4230.183, 'duration': 6.185}], 'summary': 'Learn css and bootstrap while building project, focus on development workflow.', 'duration': 26.858, 'max_score': 4209.51, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI4209510.jpg'}, {'end': 4316.137, 'src': 'embed', 'start': 4257.884, 'weight': 5, 'content': [{'end': 4267.388, 'text': 'And you guys might have this in your head, or you might have this in your head that as a software developer, you create everything from scratch.', 'start': 4257.884, 'duration': 9.504}, {'end': 4270.829, 'text': "But that's really far from the truth.", 'start': 4268.628, 'duration': 2.201}, {'end': 4314.196, 'text': "paid a lot for is knowing what to copy and paste, okay, and so that's a very real skill set, and I'm gonna be teaching you that as well.", 'start': 4304.051, 'duration': 10.145}, {'end': 4316.137, 'text': "and so it's just gonna be a lot of fun.", 'start': 4314.196, 'duration': 1.941}], 'summary': "Software developers don't create everything from scratch; they copy and paste a lot, and this is a valuable skill set.", 'duration': 58.253, 'max_score': 4257.884, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI4257884.jpg'}], 'start': 3989.705, 'title': 'Css bootstrap project showcase and building website from scratch', 'summary': 'Discusses leveraging html and creating visually appealing webpages with specific styling and a navigation bar, as well as providing insight into real development workflow and teaching coding tips to create a website from scratch.', 'chapters': [{'end': 4112.1, 'start': 3989.705, 'title': 'Css bootstrap project showcase', 'summary': 'Discusses the exchange of value in business, introducing a new business model and presenting a css bootstrap project to leverage html and create a visually appealing webpage with specific styling and a navigation bar.', 'duration': 122.395, 'highlights': ['Introducing a new business model focused on teaching how to scale business and exchange value. The chapter emphasizes teaching a new business model focused on scaling business and exchanging value, providing high-level courses like the Profitable Programmer, and presenting a CSS Bootstrap project to showcase these concepts.', 'Presenting a CSS Bootstrap project leveraging HTML to create a visually appealing webpage with specific styling and a navigation bar. The chapter introduces a CSS Bootstrap project, leveraging the knowledge of HTML and using CSS and Bootstrap to create a visually appealing webpage with specific styling, a navigation bar, a background pattern, and a well-designed form with a call-to-action button.', 'Describing the visual improvements of the new webpage, including enhanced readability and aesthetics. The chapter highlights the visual enhancements of the new webpage, such as improved readability due to centralized text alignment, a more appealing background pattern, a navigation bar with specific styling, and a well-designed call-to-action button.']}, {'end': 4501.111, 'start': 4112.542, 'title': 'Building website from scratch', 'summary': "Covers building a real project modeled after the speaker's website, hosted online, providing insight into real development workflow, and teaching coding tips to create a website from scratch, demonstrating a practical approach to web development.", 'duration': 388.569, 'highlights': ["The speaker emphasizes the practical approach to web development by building a real project modeled after their website, hosted online, and providing insight into the real development workflow. The project is modeled after the speaker's real website with actual traffic, and it will be hosted online. The goal is to provide insight into the real development workflow of a developer and to demonstrate the practical approach to web development.", 'The speaker aims to teach coding tips and emphasize the importance of knowing what to copy and paste in web development. The speaker plans to teach coding tips, including the importance of knowing what to copy and paste, demonstrating a practical skill set in web development.', 'The chapter focuses on creating a website from scratch, demonstrating a practical approach to web development. The speaker emphasizes the approach of creating a website from scratch, providing a practical demonstration of web development.']}], 'duration': 511.406, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI3989705.jpg', 'highlights': ['Presenting a CSS Bootstrap project leveraging HTML to create a visually appealing webpage with specific styling and a navigation bar.', 'Describing the visual improvements of the new webpage, including enhanced readability and aesthetics.', 'The chapter introduces a CSS Bootstrap project, leveraging the knowledge of HTML and using CSS and Bootstrap to create a visually appealing webpage with specific styling, a navigation bar, a background pattern, and a well-designed form with a call-to-action button.', 'The speaker emphasizes the practical approach to web development by building a real project modeled after their website, hosted online, and providing insight into the real development workflow.', 'The chapter focuses on creating a website from scratch, demonstrating a practical approach to web development.', 'The speaker aims to teach coding tips and emphasize the importance of knowing what to copy and paste in web development.']}, {'end': 5193.943, 'segs': [{'end': 4791.058, 'src': 'heatmap', 'start': 4530.574, 'weight': 1, 'content': [{'end': 4533.355, 'text': "I'm gonna try to actually just copy this part.", 'start': 4530.574, 'duration': 2.781}, {'end': 4539.657, 'text': 'And again, I can take this mark off.', 'start': 4536.076, 'duration': 3.581}, {'end': 4544.059, 'text': 'Is that the right way to say it? Tick this mark off? Whatever.', 'start': 4541.138, 'duration': 2.921}, {'end': 4552.144, 'text': 'So I can tick this mark off, and you can see that when I change it, how it affects the writing.', 'start': 4544.7, 'duration': 7.444}, {'end': 4556.146, 'text': 'So this is with the Railway Sans Serif font family on.', 'start': 4552.644, 'duration': 3.502}, {'end': 4562.77, 'text': "And when I turn this off, I can't see much of a difference there, but in my paragraphs, I can hopefully see the difference here.", 'start': 4556.787, 'duration': 5.983}, {'end': 4563.691, 'text': 'Okay, one is..', 'start': 4562.79, 'duration': 0.901}, {'end': 4566.433, 'text': "readable, but it's a little close.", 'start': 4564.551, 'duration': 1.882}, {'end': 4568.814, 'text': 'And this gives it a nice little breathing room.', 'start': 4566.653, 'duration': 2.161}, {'end': 4576.2, 'text': 'So now I know what line height is used for font weight, you know, this makes it way a little bit more.', 'start': 4568.915, 'duration': 7.285}, {'end': 4578.062, 'text': 'Okay, cool.', 'start': 4576.22, 'duration': 1.842}, {'end': 4580.664, 'text': "So I'm going to kind of paste that in here.", 'start': 4578.542, 'duration': 2.122}, {'end': 4581.564, 'text': 'All right.', 'start': 4580.684, 'duration': 0.88}, {'end': 4587.269, 'text': "Now what I know, oh, I'm sorry, I got to go in my styles that CSS, I'm going to paste it in here.", 'start': 4581.985, 'duration': 5.284}, {'end': 4593.805, 'text': "So now one thing I already know is that I'm gonna have this class and it's called like our content.", 'start': 4588.823, 'duration': 4.982}, {'end': 4595.065, 'text': 'You could call it whatever you want.', 'start': 4593.845, 'duration': 1.22}, {'end': 4596.586, 'text': 'You could call it something totally different.', 'start': 4595.165, 'duration': 1.421}, {'end': 4599.067, 'text': 'And this is a font family.', 'start': 4597.626, 'duration': 1.441}, {'end': 4601.067, 'text': 'This is the line height, font weight.', 'start': 4599.227, 'duration': 1.84}, {'end': 4610.471, 'text': "And let's see what this max width stuff is all about, right? So notice that when I put it on, look at what it does.", 'start': 4601.908, 'duration': 8.563}, {'end': 4615.897, 'text': 'right, changes the width here, and padding at the top.', 'start': 4612.074, 'duration': 3.823}, {'end': 4619.579, 'text': "So we'll try to build this from scratch as we go.", 'start': 4616.317, 'duration': 3.262}, {'end': 4621.44, 'text': 'Okay, I want to remove this.', 'start': 4619.599, 'duration': 1.841}, {'end': 4623.182, 'text': 'But I know a few things already.', 'start': 4621.861, 'duration': 1.321}, {'end': 4625.063, 'text': 'And we need to get the railway font.', 'start': 4623.362, 'duration': 1.701}, {'end': 4627.585, 'text': "So we'll go to fonts at google.com.", 'start': 4625.143, 'duration': 2.442}, {'end': 4632.748, 'text': 'I will go to look up railway.', 'start': 4630.526, 'duration': 2.222}, {'end': 4639.473, 'text': 'Right here, I will hit the plus sign it copied it.', 'start': 4635.67, 'duration': 3.803}, {'end': 4645.949, 'text': 'Okay and click it, I will grab the import code.', 'start': 4639.493, 'duration': 6.456}, {'end': 4650.071, 'text': "I'll paste it in my styles at CSS all the way at the top.", 'start': 4646.809, 'duration': 3.262}, {'end': 4654.192, 'text': 'And then this is the font family.', 'start': 4651.391, 'duration': 2.801}, {'end': 4657.094, 'text': "Okay, so I'm gonna go in here.", 'start': 4654.212, 'duration': 2.882}, {'end': 4662.596, 'text': "And I'll say that anything that goes in the body actually give it that font style.", 'start': 4657.974, 'duration': 4.622}, {'end': 4664.337, 'text': "Okay, so I'll say give it that font.", 'start': 4662.616, 'duration': 1.721}, {'end': 4669.945, 'text': "Now let's go to our HTML code.", 'start': 4667.742, 'duration': 2.203}, {'end': 4671.366, 'text': "I'll hit doc.", 'start': 4670.565, 'duration': 0.801}, {'end': 4673.128, 'text': "I'll delete these for now.", 'start': 4671.847, 'duration': 1.281}, {'end': 4684.385, 'text': "And we'll call this Kazi's website clone or Kazi's website.", 'start': 4676.072, 'duration': 8.313}, {'end': 4686.427, 'text': 'You can call it your own website.', 'start': 4684.705, 'duration': 1.722}, {'end': 4694.654, 'text': "And when I refresh this, you'll see at the top, the tab now says Kazi's website, so that's good.", 'start': 4688.428, 'duration': 6.226}, {'end': 4703.681, 'text': "All right, so let's get the copy from here, the headline, and then we'll just put the H1, we'll paste the headline, okay? And I'm gonna refresh.", 'start': 4694.814, 'duration': 8.867}, {'end': 4713.035, 'text': 'Now going into my style sheet, I will make sure that my body has the railway font.', 'start': 4705.211, 'duration': 7.824}, {'end': 4716.136, 'text': 'So font family railway, okay.', 'start': 4713.295, 'duration': 2.841}, {'end': 4719.658, 'text': 'I have this.', 'start': 4719.017, 'duration': 0.641}, {'end': 4721.418, 'text': "Now I'll refresh.", 'start': 4720.278, 'duration': 1.14}, {'end': 4724.079, 'text': "And that's weird.", 'start': 4722.419, 'duration': 1.66}, {'end': 4726.461, 'text': 'There are a few problems that we notice here.', 'start': 4724.64, 'duration': 1.821}, {'end': 4729.482, 'text': 'First of all, it starts from all the way to the left, goes all the way to the right.', 'start': 4726.561, 'duration': 2.921}, {'end': 4731.563, 'text': 'And notice this, this starts in the middle.', 'start': 4729.942, 'duration': 1.621}, {'end': 4737.336, 'text': "And also it doesn't look like it has the Railway font.", 'start': 4733.374, 'duration': 3.962}, {'end': 4743.699, 'text': "So what's going on there, right? Because like even if I delete this and hit save and come here and refresh, it looks the same.", 'start': 4737.916, 'duration': 5.783}, {'end': 4746.88, 'text': 'And when I do this and save and refresh, it still looks the same.', 'start': 4744.219, 'duration': 2.661}, {'end': 4751.842, 'text': "So what's the deal? Well, it's because I haven't linked the style sheet yet.", 'start': 4746.94, 'duration': 4.902}, {'end': 4759.465, 'text': "So in my head, I'm gonna go and I'll say link and I'll simply link that style sheet.", 'start': 4752.122, 'duration': 7.343}, {'end': 4767.388, 'text': 'So now, when I hit refresh, you can see that the Railway font is coming in, and if I actually right click and hit inspect,', 'start': 4759.725, 'duration': 7.663}, {'end': 4771.109, 'text': 'it should show me that the Railway font is coming in.', 'start': 4767.388, 'duration': 3.721}, {'end': 4777.03, 'text': 'So now I have the font looking somewhat good.', 'start': 4772.529, 'duration': 4.501}, {'end': 4780.091, 'text': "Now let's do a few more things.", 'start': 4778.731, 'duration': 1.36}, {'end': 4783.312, 'text': 'So my font looks good.', 'start': 4782.072, 'duration': 1.24}, {'end': 4789.537, 'text': "but it's still reading a lot from the left and then reading it all the way to the right.", 'start': 4784.414, 'duration': 5.123}, {'end': 4791.058, 'text': 'So it seems a little too much.', 'start': 4789.717, 'duration': 1.341}], 'summary': 'The transcript covers adjusting font styles and linking a font family to a website.', 'duration': 260.484, 'max_score': 4530.574, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI4530574.jpg'}, {'end': 4632.748, 'src': 'embed', 'start': 4601.908, 'weight': 0, 'content': [{'end': 4610.471, 'text': "And let's see what this max width stuff is all about, right? So notice that when I put it on, look at what it does.", 'start': 4601.908, 'duration': 8.563}, {'end': 4615.897, 'text': 'right, changes the width here, and padding at the top.', 'start': 4612.074, 'duration': 3.823}, {'end': 4619.579, 'text': "So we'll try to build this from scratch as we go.", 'start': 4616.317, 'duration': 3.262}, {'end': 4621.44, 'text': 'Okay, I want to remove this.', 'start': 4619.599, 'duration': 1.841}, {'end': 4623.182, 'text': 'But I know a few things already.', 'start': 4621.861, 'duration': 1.321}, {'end': 4625.063, 'text': 'And we need to get the railway font.', 'start': 4623.362, 'duration': 1.701}, {'end': 4627.585, 'text': "So we'll go to fonts at google.com.", 'start': 4625.143, 'duration': 2.442}, {'end': 4632.748, 'text': 'I will go to look up railway.', 'start': 4630.526, 'duration': 2.222}], 'summary': 'Experimenting with max width, changing width and padding, finding railway font online.', 'duration': 30.84, 'max_score': 4601.908, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI4601908.jpg'}, {'end': 4737.336, 'src': 'embed', 'start': 4705.211, 'weight': 3, 'content': [{'end': 4713.035, 'text': 'Now going into my style sheet, I will make sure that my body has the railway font.', 'start': 4705.211, 'duration': 7.824}, {'end': 4716.136, 'text': 'So font family railway, okay.', 'start': 4713.295, 'duration': 2.841}, {'end': 4719.658, 'text': 'I have this.', 'start': 4719.017, 'duration': 0.641}, {'end': 4721.418, 'text': "Now I'll refresh.", 'start': 4720.278, 'duration': 1.14}, {'end': 4724.079, 'text': "And that's weird.", 'start': 4722.419, 'duration': 1.66}, {'end': 4726.461, 'text': 'There are a few problems that we notice here.', 'start': 4724.64, 'duration': 1.821}, {'end': 4729.482, 'text': 'First of all, it starts from all the way to the left, goes all the way to the right.', 'start': 4726.561, 'duration': 2.921}, {'end': 4731.563, 'text': 'And notice this, this starts in the middle.', 'start': 4729.942, 'duration': 1.621}, {'end': 4737.336, 'text': "And also it doesn't look like it has the Railway font.", 'start': 4733.374, 'duration': 3.962}], 'summary': 'Styling issues with railway font in the body, alignment problems observed.', 'duration': 32.125, 'max_score': 4705.211, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI4705211.jpg'}, {'end': 4836.911, 'src': 'embed', 'start': 4811.09, 'weight': 4, 'content': [{'end': 4818.612, 'text': "But the problem is that when you on a mobile device, it can look pretty weird, you know, it's like reading every single word on it on its own line.", 'start': 4811.09, 'duration': 7.522}, {'end': 4823.393, 'text': "And it's okay in terms of centering something.", 'start': 4819.552, 'duration': 3.841}, {'end': 4831.729, 'text': "So what I'll do is I'll give it a max width of say, you know, 200 pixels, let's try 200 pixels.", 'start': 4823.453, 'duration': 8.276}, {'end': 4834.05, 'text': "And then I'll say margin is auto.", 'start': 4832.309, 'duration': 1.741}, {'end': 4836.911, 'text': 'Okay, so this is a cool way of making things centered.', 'start': 4834.07, 'duration': 2.841}], 'summary': 'Centering content on mobile with a max width of 200 pixels and margin set to auto resolves readability issues.', 'duration': 25.821, 'max_score': 4811.09, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI4811090.jpg'}, {'end': 4982.721, 'src': 'embed', 'start': 4952.556, 'weight': 2, 'content': [{'end': 4955.618, 'text': 'So you can see that this image right now looks really, really huge.', 'start': 4952.556, 'duration': 3.062}, {'end': 4958.1, 'text': "And that's not what we want.", 'start': 4956.699, 'duration': 1.401}, {'end': 4962.683, 'text': "So in my image, I'm going to add in a height attribute, and I'll just say 500.", 'start': 4958.18, 'duration': 4.503}, {'end': 4966.845, 'text': "And I'll add in a width attribute, and we'll just give it 300.", 'start': 4962.683, 'duration': 4.162}, {'end': 4971.408, 'text': "Okay, and you can put quotes around it or not doesn't really matter.", 'start': 4966.845, 'duration': 4.563}, {'end': 4977.152, 'text': 'Okay, so now it looks a little bit more normal, but it looks a little bit squished.', 'start': 4971.428, 'duration': 5.724}, {'end': 4982.721, 'text': "So we'll give it a little bit more, 400.", 'start': 4978.9, 'duration': 3.821}], 'summary': 'Adjust image size to 500x400 for better appearance', 'duration': 30.165, 'max_score': 4952.556, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI4952556.jpg'}], 'start': 4501.171, 'title': 'Styling with railway font', 'summary': 'Explains using railway sans serif font, its impact on line height, font weight, max width, and application in html and css. it also covers styling a web page using the railway font, including adjusting padding, centering content, adding an image, incorporating copyright text, and enhancing text readability.', 'chapters': [{'end': 4703.681, 'start': 4501.171, 'title': 'Styling with railway sans serif', 'summary': 'Explains the process of using railway sans serif font family and its impact on line height, font weight, and max width, as well as the integration of the font using import code and its application in html and css.', 'duration': 202.51, 'highlights': ['The chapter explains the process of using Railway Sans Serif font family and its impact on line height, font weight, and max width.', 'Demonstrates the integration of the font using import code in CSS and its application in HTML.', 'Illustrates the impact of turning on and off the Railway Sans Serif font family on the text.', 'Describes the process of obtaining the Railway font from Google Fonts and applying it to the body element in CSS.', 'Shows the impact of max width on the width and padding of the content.']}, {'end': 5193.943, 'start': 4705.211, 'title': 'Styling web page with railway font', 'summary': 'Covers the process of styling a web page using the railway font, including adjusting padding, centering content, adding an image, incorporating copyright text, and enhancing text readability through line height and font weight.', 'duration': 488.732, 'highlights': ['Adjusted padding and centering content to improve layout and readability.', 'Incorporated an image with specified height and width attributes to achieve the desired appearance.', 'Added copyright text to the web page and adjusted line height for improved readability.', 'Enhanced text readability by adjusting font weight to achieve a darker and weightier appearance.']}], 'duration': 692.772, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI4501171.jpg', 'highlights': ['Explains using Railway Sans Serif font, its impact on line height, font weight, max width, and application in html and css.', 'Illustrates the impact of turning on and off the Railway Sans Serif font family on the text.', 'Incorporated an image with specified height and width attributes to achieve the desired appearance.', 'Describes the process of obtaining the Railway font from Google Fonts and applying it to the body element in CSS.', 'Adjusted padding and centering content to improve layout and readability.']}, {'end': 7666.67, 'segs': [{'end': 5387.636, 'src': 'heatmap', 'start': 5262.422, 'weight': 0.753, 'content': [{'end': 5270.606, 'text': 'Okay And then underneath we can say button.', 'start': 5262.422, 'duration': 8.184}, {'end': 5278.391, 'text': 'Okay And the button can be called.', 'start': 5270.626, 'duration': 7.765}, {'end': 5279.251, 'text': 'Yes Gimme.', 'start': 5278.411, 'duration': 0.84}, {'end': 5285.574, 'text': 'Whoops So here you saw that.', 'start': 5281.312, 'duration': 4.262}, {'end': 5293.045, 'text': 'Whoops I have the email address and then it says, yes, gimme right there.', 'start': 5286.115, 'duration': 6.93}, {'end': 5296.387, 'text': "Okay So I'm just putting like a basic form right now.", 'start': 5293.065, 'duration': 3.322}, {'end': 5298.548, 'text': 'Later you can, you can make the form cooler.', 'start': 5296.527, 'duration': 2.021}, {'end': 5302.291, 'text': 'Like if you want to do something like where I hover over this button, maybe it turns orange.', 'start': 5298.909, 'duration': 3.382}, {'end': 5303.731, 'text': "That's not that hard to do.", 'start': 5302.651, 'duration': 1.08}, {'end': 5316.339, 'text': 'Right I can, I can just say something like button on hover, you know, make, make the color orange or something.', 'start': 5303.812, 'duration': 12.527}, {'end': 5323.757, 'text': 'So now it changes the font color to be orange.', 'start': 5319.768, 'duration': 3.989}, {'end': 5328.347, 'text': "Let's try if we can do background color.", 'start': 5326.302, 'duration': 2.045}, {'end': 5338.306, 'text': 'Okay, and now the entire button turns orange.', 'start': 5335.984, 'duration': 2.322}, {'end': 5343.249, 'text': "So you can do something like that for now just yeah, or not doesn't really matter.", 'start': 5338.866, 'duration': 4.383}, {'end': 5347.011, 'text': "We're gonna again, create the final version of this at the end.", 'start': 5343.269, 'duration': 3.742}, {'end': 5349.393, 'text': "We're not going to pay too much attention to that now.", 'start': 5347.712, 'duration': 1.681}, {'end': 5355.657, 'text': 'So our page is looking clean, very readable, very nice.', 'start': 5350.974, 'duration': 4.683}, {'end': 5359.88, 'text': "Now let's add that pattern in the background.", 'start': 5357.398, 'duration': 2.482}, {'end': 5369.395, 'text': "Okay, so what I'll do is I'll just grab a I'll look up minimalistic background patterns.", 'start': 5360.06, 'duration': 9.335}, {'end': 5376.747, 'text': "and I'll just kind of see what comes up.", 'start': 5375.006, 'duration': 1.741}, {'end': 5380.01, 'text': 'Where I got it from was like the subtle patterns thing.', 'start': 5377.328, 'duration': 2.682}, {'end': 5383.553, 'text': 'And so you can get that one or you can get this tic-tac-toe one.', 'start': 5380.55, 'duration': 3.003}, {'end': 5385.334, 'text': 'To be honest, I like it a lot.', 'start': 5383.593, 'duration': 1.741}, {'end': 5387.636, 'text': 'I might even like it more.', 'start': 5386.034, 'duration': 1.602}], 'summary': 'Creating a basic form with button and discussing hover effects and background patterns.', 'duration': 125.214, 'max_score': 5262.422, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI5262422.jpg'}, {'end': 5813.617, 'src': 'embed', 'start': 5784.735, 'weight': 1, 'content': [{'end': 5789.978, 'text': "So we're gonna go and grab the horizontal ones.", 'start': 5784.735, 'duration': 5.243}, {'end': 5790.738, 'text': "Let's see which one.", 'start': 5790.038, 'duration': 0.7}, {'end': 5792.579, 'text': "So it's this one, okay, I wanna grab.", 'start': 5790.998, 'duration': 1.581}, {'end': 5797.353, 'text': 'And it gives me the code for the bar.', 'start': 5794.352, 'duration': 3.001}, {'end': 5802.474, 'text': "And if I just read the code I'll try to understand and see how it's working.", 'start': 5798.173, 'duration': 4.301}, {'end': 5807.515, 'text': 'So I notice that here they have the UL which is unordered list.', 'start': 5802.974, 'duration': 4.541}, {'end': 5810.416, 'text': "So what they're actually using here is an unordered list.", 'start': 5808.055, 'duration': 2.361}, {'end': 5813.617, 'text': 'OK But how does it look like a navigation bar.', 'start': 5810.436, 'duration': 3.181}], 'summary': 'Analyzing code to understand the structure of a navigation bar using unordered list.', 'duration': 28.882, 'max_score': 5784.735, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI5784735.jpg'}, {'end': 6584.384, 'src': 'heatmap', 'start': 6341.568, 'weight': 0.808, 'content': [{'end': 6357.678, 'text': "the problem i think that's happening here is that this bar remember how we created this body right and every everything that's in this body it's supposed to be centered.", 'start': 6341.568, 'duration': 16.11}, {'end': 6368.511, 'text': 'Well, this navigation thing that we made is actually in that body, right inside of the body tag.', 'start': 6359.281, 'duration': 9.23}, {'end': 6372.175, 'text': "And because of that, it's also being centered.", 'start': 6369.432, 'duration': 2.743}, {'end': 6383.637, 'text': "So what we need to do is we need to make sure that the content of the website that's on the page is somehow being handled in a specific way where it's being centered,", 'start': 6372.816, 'duration': 10.821}, {'end': 6385.778, 'text': 'because the content is what needs to be centered right?', 'start': 6383.637, 'duration': 2.141}, {'end': 6391.342, 'text': "And then the navigation bar shouldn't be part of that content and it should be kind of separate.", 'start': 6386.419, 'duration': 4.923}, {'end': 6395.424, 'text': "So how do we do that? Well, how about this? Let's do this.", 'start': 6392.642, 'duration': 2.782}, {'end': 6405.29, 'text': "Let's make sure that the navigation bar is in its own div and we'll just give it a class of navigation.", 'start': 6397.925, 'duration': 7.365}, {'end': 6407.431, 'text': "We don't know if we're gonna use this class or not.", 'start': 6405.43, 'duration': 2.001}, {'end': 6420.393, 'text': "Okay And so we've put the navigation in its own class, that's not going to do anything, okay, right now.", 'start': 6411.371, 'duration': 9.022}, {'end': 6422.274, 'text': "So even if you refresh, nothing's gonna happen.", 'start': 6420.534, 'duration': 1.74}, {'end': 6425.555, 'text': "And we're gonna put all of the content in another div.", 'start': 6422.754, 'duration': 2.801}, {'end': 6431.496, 'text': "And we'll just call this class, our content, call it whatever you want.", 'start': 6426.115, 'duration': 5.381}, {'end': 6435.638, 'text': "I'll go at the bottom, whoops, and put it right here.", 'start': 6432.477, 'duration': 3.161}, {'end': 6440.639, 'text': 'Okay Cool.', 'start': 6435.658, 'duration': 4.981}, {'end': 6443.017, 'text': 'All right.', 'start': 6442.717, 'duration': 0.3}, {'end': 6446.8, 'text': 'Now, again, if I hit refresh, nothing is taking place.', 'start': 6443.558, 'duration': 3.242}, {'end': 6448.141, 'text': "But here's what we're going to do.", 'start': 6446.86, 'duration': 1.281}, {'end': 6449.221, 'text': "I'm going to go in styles.", 'start': 6448.161, 'duration': 1.06}, {'end': 6452.683, 'text': "I'll create a class called our content.", 'start': 6450.042, 'duration': 2.641}, {'end': 6457.707, 'text': "And inside of this class, I'll add this stuff.", 'start': 6453.524, 'duration': 4.183}, {'end': 6464.251, 'text': 'Because we only want our content to be centered.', 'start': 6462.029, 'duration': 2.222}, {'end': 6465.652, 'text': "Now let's hit refresh.", 'start': 6464.551, 'duration': 1.101}, {'end': 6471.677, 'text': "And you'll notice that the nav bar now runs across fine, which is what we want.", 'start': 6467.335, 'duration': 4.342}, {'end': 6474.839, 'text': 'And our content is centered.', 'start': 6472.117, 'duration': 2.722}, {'end': 6477.38, 'text': "So that's pretty good.", 'start': 6475.979, 'duration': 1.401}, {'end': 6484.083, 'text': "But for whatever reason, there's still that padding at the top that you can notice, right? So we need to now remove that padding.", 'start': 6477.84, 'duration': 6.243}, {'end': 6486.224, 'text': 'We can hit inspect on this nav bar.', 'start': 6484.443, 'duration': 1.781}, {'end': 6490.546, 'text': "Let's actually see, there's this padding on the top.", 'start': 6488.345, 'duration': 2.201}, {'end': 6494.648, 'text': 'If I remove that padding, notice the bar goes up higher.', 'start': 6490.626, 'duration': 4.022}, {'end': 6496.229, 'text': "So let's actually do that.", 'start': 6495.128, 'duration': 1.101}, {'end': 6502.472, 'text': "So this padding, this doesn't need to be added to the nav bar, but it needs to be added to the content,", 'start': 6496.809, 'duration': 5.663}, {'end': 6505.953, 'text': "because we don't want this how to start from right over here.", 'start': 6502.472, 'duration': 3.481}, {'end': 6509.915, 'text': "It's gonna make it look really murky and mixed in with the navigation bar.", 'start': 6505.973, 'duration': 3.942}, {'end': 6511.916, 'text': 'So we like that that padding is there.', 'start': 6510.195, 'duration': 1.721}, {'end': 6517.219, 'text': "So what we'll do is we'll take this padding and we'll add it right here.", 'start': 6512.417, 'duration': 4.802}, {'end': 6524.14, 'text': "Now notice that for our content, I don't actually need to add the font settings in here,", 'start': 6518.496, 'duration': 5.644}, {'end': 6527.422, 'text': "and the reason for that is because it's inheriting from the body.", 'start': 6524.14, 'duration': 3.282}, {'end': 6538.689, 'text': "Because our content is a div, and that's underneath body, it's inheriting the fonts from the style of the body.", 'start': 6528.522, 'duration': 10.167}, {'end': 6546.675, 'text': 'And now, when I hit refresh, look the bar is lot higher.', 'start': 6541.13, 'duration': 5.545}, {'end': 6551.396, 'text': "it's still not perfectly at the top, but it's still a lot higher.", 'start': 6546.675, 'duration': 4.721}, {'end': 6559.638, 'text': "okay, let's hit inspect and and you'll see that the it says inherited from body.", 'start': 6551.396, 'duration': 8.242}, {'end': 6566.38, 'text': "okay, that's where the font is actually coming from.", 'start': 6559.638, 'duration': 6.742}, {'end': 6570.28, 'text': "cool, let's go right here.", 'start': 6566.38, 'duration': 3.9}, {'end': 6572.601, 'text': "so it's, it's looking better at this point.", 'start': 6570.28, 'duration': 2.321}, {'end': 6576.26, 'text': "So because of the line height, let's go.", 'start': 6574.679, 'duration': 1.581}, {'end': 6578.381, 'text': 'Nope, not the line height.', 'start': 6576.28, 'duration': 2.101}, {'end': 6584.384, 'text': "Okay, now let's work on something else.", 'start': 6581.283, 'duration': 3.101}], 'summary': 'Problem: centering website content, separating navigation bar, adding padding and font settings.', 'duration': 242.816, 'max_score': 6341.568, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI6341568.jpg'}, {'end': 6385.778, 'src': 'embed', 'start': 6359.281, 'weight': 3, 'content': [{'end': 6368.511, 'text': 'Well, this navigation thing that we made is actually in that body, right inside of the body tag.', 'start': 6359.281, 'duration': 9.23}, {'end': 6372.175, 'text': "And because of that, it's also being centered.", 'start': 6369.432, 'duration': 2.743}, {'end': 6383.637, 'text': "So what we need to do is we need to make sure that the content of the website that's on the page is somehow being handled in a specific way where it's being centered,", 'start': 6372.816, 'duration': 10.821}, {'end': 6385.778, 'text': 'because the content is what needs to be centered right?', 'start': 6383.637, 'duration': 2.141}], 'summary': 'The navigation is within the body tag and centered, requiring the content to be centered as well.', 'duration': 26.497, 'max_score': 6359.281, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI6359281.jpg'}, {'end': 7064.24, 'src': 'heatmap', 'start': 6821.858, 'weight': 0.867, 'content': [{'end': 6828.223, 'text': 'CSS is what is used to make Twitter, or, sorry, Bootstrap is what is used to make Twitter as well.', 'start': 6821.858, 'duration': 6.365}, {'end': 6837.171, 'text': 'and you just get access to a lot of built-in classes in CSS and built-in divs and all that stuff.', 'start': 6829.568, 'duration': 7.603}, {'end': 6841.893, 'text': 'And so you can just use their already created styles.', 'start': 6837.752, 'duration': 4.141}, {'end': 6842.954, 'text': 'So, for example, right?', 'start': 6841.993, 'duration': 0.961}, {'end': 6847.689, 'text': "where we're creating this form or we're creating this button.", 'start': 6845.228, 'duration': 2.461}, {'end': 6852.47, 'text': "we could actually just use a button right from Bootstrap and we don't have to design our own button.", 'start': 6847.689, 'duration': 4.781}, {'end': 6857.471, 'text': 'We can just say something like button class Bootstrap button, for example,', 'start': 6852.49, 'duration': 4.981}, {'end': 6862.432, 'text': "and it'll turn the button into a beautiful button that you didn't have to write any CSS for.", 'start': 6857.471, 'duration': 4.961}, {'end': 6867.773, 'text': "It just kind of happened automagically, okay? And that's what we're going after.", 'start': 6862.832, 'duration': 4.941}, {'end': 6875.393, 'text': "So I'm gonna come in here and I'll add in bootstrap functionality.", 'start': 6867.793, 'duration': 7.6}, {'end': 6879.839, 'text': "So what we'll do is we'll go strap CDN.", 'start': 6875.414, 'duration': 4.425}, {'end': 6885.406, 'text': 'Click right here.', 'start': 6884.745, 'duration': 0.661}, {'end': 6899.468, 'text': "And here is Bootstrap complete CSS, okay? So you can download this file if you want, but I don't wanna download the file.", 'start': 6888.421, 'duration': 11.047}, {'end': 6901.369, 'text': 'I just wanna get it so I can link to it.', 'start': 6899.608, 'duration': 1.761}, {'end': 6910.294, 'text': "And now if I go online and actually paste this link in, it's just a big CSS file, okay? Just a giant CSS file.", 'start': 6901.449, 'duration': 8.845}, {'end': 6912.235, 'text': "And that's all of Bootstrap.", 'start': 6910.894, 'duration': 1.341}, {'end': 6919.222, 'text': 'You could download it and put it locally on your computer.', 'start': 6916.84, 'duration': 2.382}, {'end': 6920.923, 'text': 'I just like to link to it.', 'start': 6919.682, 'duration': 1.241}, {'end': 6923.565, 'text': "So now let's go here.", 'start': 6922.204, 'duration': 1.361}, {'end': 6924.806, 'text': "We're going to say link.", 'start': 6923.786, 'duration': 1.02}, {'end': 6926.748, 'text': "That's it.", 'start': 6926.348, 'duration': 0.4}, {'end': 6930.191, 'text': 'Okay So this is an example of a local CSS file.', 'start': 6926.768, 'duration': 3.423}, {'end': 6934.554, 'text': "This is an example of a CSS file that's actually hosted online.", 'start': 6930.291, 'duration': 4.263}, {'end': 6937.276, 'text': "Okay I'll hit refresh.", 'start': 6934.574, 'duration': 2.702}, {'end': 6947.529, 'text': 'And now notice it, the CSS got, or the styling automatically got a little bit better, right? You notice what actually happened at the top.', 'start': 6938.226, 'duration': 9.303}, {'end': 6953.031, 'text': "Now there's no spacing anymore and there's no weird padding at the top.", 'start': 6948.929, 'duration': 4.102}, {'end': 6958.012, 'text': 'Bootstrap automatically comes with a lot of intelligent built-in things.', 'start': 6953.091, 'duration': 4.921}, {'end': 6964.534, 'text': 'And when I hover over it, it turns blue, gets that underline, which makes it look nicer to be honest.', 'start': 6959.353, 'duration': 5.181}, {'end': 6967.135, 'text': 'It changed the font a little bit, which is totally fine.', 'start': 6964.834, 'duration': 2.301}, {'end': 6970.358, 'text': 'not that big of a deal.', 'start': 6968.897, 'duration': 1.461}, {'end': 6977.801, 'text': 'And at the bottom here, we still are running into this problem where this form is not looking nice.', 'start': 6971.338, 'duration': 6.463}, {'end': 6982.123, 'text': "So we're gonna use some bootstrap built-in stuff.", 'start': 6978.161, 'duration': 3.962}, {'end': 6989.477, 'text': "So what I'll do is I'll just literally type in how to make a form in Bootstrap.", 'start': 6982.904, 'duration': 6.573}, {'end': 6996.819, 'text': "That's actually what I would Google because I'm not sitting there making Bootstrap forms all day so I'll just forget.", 'start': 6990.837, 'duration': 5.982}, {'end': 6998.66, 'text': 'I come across this.', 'start': 6997.679, 'duration': 0.981}, {'end': 7004.261, 'text': 'And this is a cool looking form.', 'start': 7002.841, 'duration': 1.42}, {'end': 7005.181, 'text': "That's kinda what I want.", 'start': 7004.321, 'duration': 0.86}, {'end': 7007.802, 'text': 'I want an email address and I want a submit button.', 'start': 7005.221, 'duration': 2.581}, {'end': 7013.864, 'text': "So I'm gonna just cop this guy completely.", 'start': 7008.362, 'duration': 5.502}, {'end': 7018.259, 'text': "and I'll replace my form with that form and I'll hit save.", 'start': 7014.717, 'duration': 3.542}, {'end': 7024.702, 'text': 'Okay, it needs to be like this.', 'start': 7018.279, 'duration': 6.423}, {'end': 7032.385, 'text': 'Okay There we go.', 'start': 7024.722, 'duration': 7.663}, {'end': 7034.426, 'text': 'That looks properly indented.', 'start': 7032.845, 'duration': 1.581}, {'end': 7035.987, 'text': "I'll hit refresh.", 'start': 7034.546, 'duration': 1.441}, {'end': 7037.707, 'text': 'Now look at that.', 'start': 7036.967, 'duration': 0.74}, {'end': 7038.888, 'text': 'Look at that.', 'start': 7038.268, 'duration': 0.62}, {'end': 7040.989, 'text': "It's looking really clean.", 'start': 7039.008, 'duration': 1.981}, {'end': 7044.529, 'text': 'If you want it like this, you could leave it like this.', 'start': 7042.868, 'duration': 1.661}, {'end': 7053.554, 'text': "If you don't want the password one, we can just go in here, delete this, this, this, and this, and that should remove the password.", 'start': 7044.569, 'duration': 8.985}, {'end': 7058.317, 'text': 'This is the entire email thing.', 'start': 7056.396, 'duration': 1.921}, {'end': 7060.838, 'text': "So if you deleted this, it'll delete all of the email stuff.", 'start': 7058.337, 'duration': 2.501}, {'end': 7064.24, 'text': "And if you delete this, it'll remove the checkbox.", 'start': 7061.699, 'duration': 2.541}], 'summary': 'Using bootstrap allows for easy styling and design of elements without writing css. linking to the bootstrap css file online improved the styling, and using built-in form elements further enhanced the appearance of the webpage.', 'duration': 242.382, 'max_score': 6821.858, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI6821858.jpg'}, {'end': 6875.393, 'src': 'embed', 'start': 6845.228, 'weight': 0, 'content': [{'end': 6847.689, 'text': "where we're creating this form or we're creating this button.", 'start': 6845.228, 'duration': 2.461}, {'end': 6852.47, 'text': "we could actually just use a button right from Bootstrap and we don't have to design our own button.", 'start': 6847.689, 'duration': 4.781}, {'end': 6857.471, 'text': 'We can just say something like button class Bootstrap button, for example,', 'start': 6852.49, 'duration': 4.981}, {'end': 6862.432, 'text': "and it'll turn the button into a beautiful button that you didn't have to write any CSS for.", 'start': 6857.471, 'duration': 4.961}, {'end': 6867.773, 'text': "It just kind of happened automagically, okay? And that's what we're going after.", 'start': 6862.832, 'duration': 4.941}, {'end': 6875.393, 'text': "So I'm gonna come in here and I'll add in bootstrap functionality.", 'start': 6867.793, 'duration': 7.6}], 'summary': 'Using bootstrap allows easy creation of attractive buttons without writing css.', 'duration': 30.165, 'max_score': 6845.228, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI6845228.jpg'}, {'end': 7321.672, 'src': 'embed', 'start': 7289.762, 'weight': 4, 'content': [{'end': 7292.143, 'text': "But when you get this many votes, it's like a lot of people.", 'start': 7289.762, 'duration': 2.381}, {'end': 7297.407, 'text': 'And you can actually see right here, viewed 281,000 times.', 'start': 7292.584, 'duration': 4.823}, {'end': 7300.789, 'text': 'So something that people look up a lot.', 'start': 7298.648, 'duration': 2.141}, {'end': 7304.051, 'text': 'The same reason why developers use Stack Overflow a lot.', 'start': 7301.63, 'duration': 2.421}, {'end': 7305.873, 'text': 'I use Stack Overflow a lot for this reason.', 'start': 7304.171, 'duration': 1.702}, {'end': 7308.006, 'text': 'I get my answers like this.', 'start': 7306.846, 'duration': 1.16}, {'end': 7314.309, 'text': "And now he has some answer and this guy's like, if you wanna group the button on the left side, use this.", 'start': 7309.327, 'duration': 4.982}, {'end': 7316.25, 'text': 'If you wanna group the button on the right side, use this.', 'start': 7314.369, 'duration': 1.881}, {'end': 7317.13, 'text': 'So cool.', 'start': 7316.63, 'duration': 0.5}, {'end': 7321.672, 'text': "I'll look at this and basically he's putting the class into an input group.", 'start': 7317.93, 'duration': 3.742}], 'summary': 'A video with 281,000 views explains how to group buttons using specific classes.', 'duration': 31.91, 'max_score': 7289.762, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI7289762.jpg'}], 'start': 5194.224, 'title': 'Web design and bootstrap integration', 'summary': 'Covers creating a call to action and background patterns using html, understanding relative and absolute paths, creating a navigation bar with css, fixing navigation padding issues, and integrating bootstrap for improved styling and form design.', 'chapters': [{'end': 5398.704, 'start': 5194.224, 'title': 'Web design call to action and background patterns', 'summary': 'Covers creating a call to action for a web page using html and adding background patterns for a visually appealing design.', 'duration': 204.48, 'highlights': ["Creating a call to action for the web page by adding a form with input for email address and a button labeled 'Yes, Gimme'", 'Adding background patterns to the web page by looking up minimalistic patterns such as tic-tac-toe and previewing them for visual appeal', "Customizing the button's appearance by changing the font color and background color to orange on hover for enhanced user experience"]}, {'end': 5724.708, 'start': 5398.964, 'title': 'Html relative and absolute paths', 'summary': 'Explains the concept of relative and absolute paths in html, demonstrating how to navigate through folders using command line and providing examples of both types of paths, emphasizing the importance of understanding their differences for effective file referencing.', 'duration': 325.744, 'highlights': ['The chapter emphasizes the importance of understanding relative and absolute paths in HTML, explaining how to navigate through folders using command line and providing examples of both types of paths.', 'The speaker demonstrates the use of dot dot (..) to navigate back a directory in the command line, providing a clear example of how to do so and its significance in file referencing.', 'The concept of relative paths is explained through an analogy of giving directions within a house, offering a relatable comparison to help understand the concept.']}, {'end': 6265.153, 'start': 5725.569, 'title': 'Creating navigation bar with css', 'summary': 'Discusses creating a horizontal navigation bar using css, covering concepts like unordered lists, styling using padding and hover effects, with practical demonstrations and explanations.', 'duration': 539.584, 'highlights': ['The chapter discusses creating a horizontal navigation bar using CSS, covering concepts like unordered lists, styling using padding and hover effects. The author demonstrates the process of creating a horizontal navigation bar using CSS, including the use of unordered lists, styling with padding, and implementing hover effects.', 'The author provides practical demonstrations and explanations, emphasizing the importance of understanding how the code works. The author emphasizes the importance of understanding the code by providing practical demonstrations and explanations, highlighting the need to comprehend the working of the code.', 'The chapter encourages hands-on learning and experimentation by allowing readers to modify the code and observe the changes in real-time. The chapter encourages hands-on learning and experimentation by allowing readers to modify the code and observe the changes in real-time, promoting an interactive learning approach.']}, {'end': 7099.362, 'start': 6265.173, 'title': 'Styling website navigation and adding bootstrap functionality', 'summary': 'Discusses fixing website navigation padding issues, centering content, making navigation bar separate, adding active link functionality, and integrating bootstrap for improved styling and form design.', 'duration': 834.189, 'highlights': ['Fixing website navigation padding and centering content The chapter discusses addressing the issue of padding at the top of the navigation bar, ensuring the content is centered by placing the navigation bar in its own div, and adding a separate div for the content.', "Adding active link functionality It covers adding anchor tags to ensure that links are working without directing to another website, and using the 'active' class to turn specific links orange based on the page being accessed.", "Integrating Bootstrap for improved styling and form design The chapter explains the process of integrating Bootstrap functionality to enhance styling, including using Bootstrap's built-in classes for buttons and forms to achieve a cleaner and more professional look."]}, {'end': 7666.67, 'start': 7099.362, 'title': 'Bootstrap button styling and alignment', 'summary': 'Explores using bootstrap classes to style buttons, finding solutions for aligning elements using stack overflow, and making stylistic improvements to a website, resulting in a modern and minimalistic front end.', 'duration': 567.308, 'highlights': ["Using Bootstrap classes to style buttons The transcript discusses utilizing pre-built Bootstrap classes like 'button button secondary' and 'button button danger' to easily style buttons, providing a convenient way to create aesthetically pleasing buttons without custom design.", 'Finding solutions for aligning elements using Stack Overflow The speaker demonstrates the use of Stack Overflow to find solutions for aligning elements, highlighting the value of the platform with a specific example that garnered 236 upvotes and 281,000 views, showcasing its widespread usage and effectiveness in obtaining high-quality solutions.', 'Making stylistic improvements to a website The chapter details the process of making stylistic improvements to a website through trial and error, including adjusting line height, using the correct font family, and adding padding to achieve a modern and minimalistic look for the front end.']}], 'duration': 2472.446, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI5194224.jpg', 'highlights': ["Integrating Bootstrap for improved styling and form design The chapter explains the process of integrating Bootstrap functionality to enhance styling, including using Bootstrap's built-in classes for buttons and forms to achieve a cleaner and more professional look.", 'Creating a horizontal navigation bar using CSS, covering concepts like unordered lists, styling using padding and hover effects. The author demonstrates the process of creating a horizontal navigation bar using CSS, including the use of unordered lists, styling with padding, and implementing hover effects.', "Using Bootstrap classes to style buttons The transcript discusses utilizing pre-built Bootstrap classes like 'button button secondary' and 'button button danger' to easily style buttons, providing a convenient way to create aesthetically pleasing buttons without custom design.", 'Fixing website navigation padding and centering content The chapter discusses addressing the issue of padding at the top of the navigation bar, ensuring the content is centered by placing the navigation bar in its own div, and adding a separate div for the content.', 'Finding solutions for aligning elements using Stack Overflow The speaker demonstrates the use of Stack Overflow to find solutions for aligning elements, highlighting the value of the platform with a specific example that garnered 236 upvotes and 281,000 views, showcasing its widespread usage and effectiveness in obtaining high-quality solutions.']}, {'end': 9426.66, 'segs': [{'end': 7704.582, 'src': 'embed', 'start': 7666.75, 'weight': 0, 'content': [{'end': 7669.356, 'text': "Right And yeah, that's it.", 'start': 7666.75, 'duration': 2.606}, {'end': 7671.38, 'text': 'Thank you for working on this project.', 'start': 7669.757, 'duration': 1.623}, {'end': 7672.863, 'text': 'I really hope you enjoyed it.', 'start': 7671.48, 'duration': 1.383}, {'end': 7675.247, 'text': "That's it for this video.", 'start': 7674.045, 'duration': 1.202}, {'end': 7679.795, 'text': "And as always, I'll see you in the next video.", 'start': 7675.467, 'duration': 4.328}, {'end': 7693.318, 'text': 'All right, so here we have a basic HTML file.', 'start': 7687.836, 'duration': 5.482}, {'end': 7697.72, 'text': "You should know some basics of HTML and CSS if you're watching this video.", 'start': 7693.338, 'duration': 4.382}, {'end': 7704.582, 'text': "If you don't know them, then go and watch the CSS crash course and the HTML crash course that we have.", 'start': 7698.08, 'duration': 6.502}], 'summary': 'Introduction to html and css basics. refer to crash course for more details.', 'duration': 37.832, 'max_score': 7666.75, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI7666750.jpg'}, {'end': 7776.034, 'src': 'embed', 'start': 7749.775, 'weight': 10, 'content': [{'end': 7757.2, 'text': 'And then we have a basic styling file, which has certain properties, like for example, we want the container to be standing out.', 'start': 7749.775, 'duration': 7.425}, {'end': 7765.846, 'text': "So on the right hand side, you can see the container has a yellow golden border, just so you can see that that's a container.", 'start': 7757.22, 'duration': 8.626}, {'end': 7770.75, 'text': 'Then all the divs inside of the container just has a little bit of styling.', 'start': 7766.807, 'duration': 3.943}, {'end': 7776.034, 'text': 'So we have added like for example, if I change it to one or three, the size of the font changes.', 'start': 7770.97, 'duration': 5.064}], 'summary': 'Styling file defines properties, like yellow border for container, with font size adjustable.', 'duration': 26.259, 'max_score': 7749.775, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI7749775.jpg'}, {'end': 7822.698, 'src': 'embed', 'start': 7793.301, 'weight': 1, 'content': [{'end': 7797.666, 'text': 'So the first thing you want to do to activate flex box, the main command that you need,', 'start': 7793.301, 'duration': 4.365}, {'end': 7803.332, 'text': 'is the equivalent of like turning on a switch and then turning on a switch and then turning off a switch.', 'start': 7797.666, 'duration': 5.666}, {'end': 7806.876, 'text': 'Yeah So display flex.', 'start': 7803.592, 'duration': 3.284}, {'end': 7812.315, 'text': "Yep So you're basically like importing the Flexbox functionality pretty much.", 'start': 7807.574, 'duration': 4.741}, {'end': 7814.756, 'text': "It's like importing a library, blah, blah, blah.", 'start': 7812.375, 'duration': 2.381}, {'end': 7817.397, 'text': 'So that just activated it, right? Correct.', 'start': 7815.676, 'duration': 1.721}, {'end': 7818.577, 'text': 'As they can see on the right side.', 'start': 7817.497, 'duration': 1.08}, {'end': 7822.698, 'text': 'Yep So display Flex, Flex will activate the Flexbox.', 'start': 7818.597, 'duration': 4.101}], 'summary': "To activate flex box, use 'display: flex', like turning on a switch, importing flexbox functionality.", 'duration': 29.397, 'max_score': 7793.301, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI7793301.jpg'}, {'end': 7990.241, 'src': 'embed', 'start': 7960.742, 'weight': 3, 'content': [{'end': 7963.123, 'text': "And let's go here and let's do justify content.", 'start': 7960.742, 'duration': 2.381}, {'end': 7972.788, 'text': "And we can do justify content and let's just talk about what justify content does, okay? So let's go to justify content right here.", 'start': 7963.904, 'duration': 8.884}, {'end': 7976.65, 'text': 'And you could have justified content like left justified.', 'start': 7973.248, 'duration': 3.402}, {'end': 7982.013, 'text': 'You could have it maybe more right justified by doing flex end or centered.', 'start': 7977.231, 'duration': 4.782}, {'end': 7988.02, 'text': 'I personally like the space around or space evenly quite a bit.', 'start': 7984.019, 'duration': 4.001}, {'end': 7990.241, 'text': "So let's just give it a try.", 'start': 7988.94, 'duration': 1.301}], 'summary': 'Discussion on different types of justify content for layout, including left justified, flex end, centered, space around, and space evenly.', 'duration': 29.499, 'max_score': 7960.742, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI7960742.jpg'}, {'end': 8073.078, 'src': 'embed', 'start': 8046.477, 'weight': 4, 'content': [{'end': 8051.758, 'text': 'Now, how do we deal with that problem where it just keeps putting everything in one goddamn row?', 'start': 8046.477, 'duration': 5.281}, {'end': 8056.799, 'text': 'Instead of doing that, we want it to move over to the new line if the space runs out.', 'start': 8051.838, 'duration': 4.961}, {'end': 8060.66, 'text': 'To automatically wrap to any screen size pretty much.', 'start': 8057.74, 'duration': 2.92}, {'end': 8064.021, 'text': 'Yep So, well, it makes it really easy.', 'start': 8060.94, 'duration': 3.081}, {'end': 8065.482, 'text': 'We can do flex wrap, wrap.', 'start': 8064.201, 'duration': 1.281}, {'end': 8067.262, 'text': "And that's about it.", 'start': 8066.542, 'duration': 0.72}, {'end': 8070.437, 'text': 'Okay, now things just wrap.', 'start': 8068.536, 'duration': 1.901}, {'end': 8073.078, 'text': "So if I start going closer, it'll just wrap.", 'start': 8070.537, 'duration': 2.541}], 'summary': 'The solution to the problem of items being in one row is to use flex wrap to automatically wrap to any screen size.', 'duration': 26.601, 'max_score': 8046.477, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI8046477.jpg'}, {'end': 8123.527, 'src': 'embed', 'start': 8096.588, 'weight': 5, 'content': [{'end': 8106.598, 'text': 'Now, If we go and go here and I go order one, you can see which one got ordered one.', 'start': 8096.588, 'duration': 10.01}, {'end': 8112.041, 'text': 'Now if I add in order two, you can see what happens here.', 'start': 8106.658, 'duration': 5.383}, {'end': 8118.725, 'text': 'And if I do order three, we have the default order that we had originally.', 'start': 8112.161, 'duration': 6.564}, {'end': 8123.527, 'text': 'Yeah, so you can kind of manually order each item independently, which is what this allows you to do.', 'start': 8118.885, 'duration': 4.642}], 'summary': 'The system allows independent manual ordering of items, demonstrated with orders one, two, and three.', 'duration': 26.939, 'max_score': 8096.588, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI8096588.jpg'}, {'end': 8220.959, 'src': 'embed', 'start': 8195.884, 'weight': 6, 'content': [{'end': 8205.906, 'text': "Now, you probably don't wanna be using Internet Explorer, but if you're using the 11+, you have accessibility to Flexbox.", 'start': 8195.884, 'duration': 10.022}, {'end': 8212.174, 'text': 'With Chrome, Safari, and Mozilla Firefox, you obviously have the flexibility to use it.', 'start': 8206.311, 'duration': 5.863}, {'end': 8220.959, 'text': "Now where it says new, or new, that's where you can add the regular syntax of just saying flex.", 'start': 8213.434, 'duration': 7.525}], 'summary': 'Flexbox is accessible in internet explorer 11+ and supported in chrome, safari, and mozilla firefox.', 'duration': 25.075, 'max_score': 8195.884, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI8195884.jpg'}, {'end': 8340.433, 'src': 'embed', 'start': 8313.956, 'weight': 7, 'content': [{'end': 8319.6, 'text': 'We will have the source code in the description below for you to go and use.', 'start': 8313.956, 'duration': 5.644}, {'end': 8329.325, 'text': "Now we're gonna be jumping into the next portion of the video, where we're gonna be building a few mini projects that require Flexbox,", 'start': 8321.021, 'duration': 8.304}, {'end': 8330.566, 'text': 'so you can get the idea behind them.', 'start': 8329.325, 'duration': 1.241}, {'end': 8340.433, 'text': "One of them is going to be your age and days, and then the second one is going to be, what is it going to be? It's the cat generator.", 'start': 8331.308, 'duration': 9.125}], 'summary': 'The video includes source code for flexbox mini projects: age in days and cat generator.', 'duration': 26.477, 'max_score': 8313.956, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI8313956.jpg'}, {'end': 8729.227, 'src': 'embed', 'start': 8700.848, 'weight': 8, 'content': [{'end': 8705.551, 'text': "Okay Um, I'll come over here, refresh, and now we have two buttons.", 'start': 8700.848, 'duration': 4.703}, {'end': 8706.572, 'text': 'Okay, cool.', 'start': 8705.571, 'duration': 1.001}, {'end': 8711.996, 'text': 'So we got the buns, but now what? Now we want to make it look a little bit nicer.', 'start': 8706.872, 'duration': 5.124}, {'end': 8719.241, 'text': "So what I'm going to do is instead of designing my own Epic buttons, I'm just going to use bootstrap and bootstrap makes it really easy.", 'start': 8712.696, 'duration': 6.545}, {'end': 8729.227, 'text': 'Um, to just style my stuff and make it look a lot nicer, okay? Without me having to write a lot of code to style my button.', 'start': 8720.042, 'duration': 9.185}], 'summary': 'Using bootstrap to style buttons for easier and nicer appearance.', 'duration': 28.379, 'max_score': 8700.848, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI8700848.jpg'}, {'end': 8896.144, 'src': 'embed', 'start': 8873.274, 'weight': 9, 'content': [{'end': 8881.821, 'text': "It's gonna allow you to put things in a nice little grid and organize them instead of how we had to do it before we had Flexboxes.", 'start': 8873.274, 'duration': 8.547}, {'end': 8889.243, 'text': 'you have to use like coordinates and percentages and do a lot of math to create things into their own grids and columns.', 'start': 8882.461, 'duration': 6.782}, {'end': 8896.144, 'text': 'Well, with Flexbox, it makes it really easy to put things either in a row or in a column, and it just calculates everything for you.', 'start': 8889.703, 'duration': 6.441}], 'summary': 'Flexbox simplifies grid layout, eliminating the need for manual calculations and coordinates.', 'duration': 22.87, 'max_score': 8873.274, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI8873274.jpg'}, {'end': 9099.361, 'src': 'heatmap', 'start': 8974.63, 'weight': 0.807, 'content': [{'end': 8977.752, 'text': 'and each of those buttons is in its own div.', 'start': 8974.63, 'duration': 3.122}, {'end': 8983.014, 'text': "okay?, I'm gonna hit refresh here and you just see that each button is in its own div.", 'start': 8977.752, 'duration': 5.262}, {'end': 8988.397, 'text': 'Now what I wanna do is put them all kind of in one space.', 'start': 8983.875, 'duration': 4.522}, {'end': 8995.675, 'text': "So before I go and do all of that, let's just do flex box, container one.", 'start': 8988.757, 'duration': 6.918}, {'end': 9001.117, 'text': "And I'm gonna go in here and I'll just add a border, okay? I'll add one pixel.", 'start': 8996.636, 'duration': 4.481}, {'end': 9003.657, 'text': "Let's do solid and black.", 'start': 9001.897, 'duration': 1.76}, {'end': 9005.558, 'text': 'Come here, refresh.', 'start': 9003.697, 'duration': 1.861}, {'end': 9010.099, 'text': 'Flexbox container one.', 'start': 9006.958, 'duration': 3.141}, {'end': 9011.659, 'text': "Let's go back here.", 'start': 9010.359, 'duration': 1.3}, {'end': 9016.66, 'text': "Why isn't it showing up? Oh, obviously because I didn't link to the sheet.", 'start': 9012.139, 'duration': 4.521}, {'end': 9023.414, 'text': "So I'm just gonna do link and I'm gonna do static slash css,", 'start': 9016.72, 'duration': 6.694}, {'end': 9034.342, 'text': "slash style s css refresh here and now you can see that it's actually showing up somewhat okay.", 'start': 9023.414, 'duration': 10.928}, {'end': 9044.31, 'text': 'so we got those two divs there and then what i actually want to do is i want to say display flex.', 'start': 9034.342, 'duration': 9.968}, {'end': 9051.213, 'text': "okay, So I'm doing display flex now and I'm gonna do flex.", 'start': 9044.31, 'duration': 6.903}, {'end': 9053.334, 'text': "Let's add a little bit of padding to this.", 'start': 9051.553, 'duration': 1.781}, {'end': 9059.577, 'text': 'Okay, adding a little bit of padding here.', 'start': 9053.354, 'duration': 6.223}, {'end': 9074.658, 'text': "Oh, and this div here, let's move this down So sorry, my container div wasn't closing all the way at the bottom.", 'start': 9064.159, 'duration': 10.499}, {'end': 9077.061, 'text': "That's kind of where some of the stupid errors were coming from.", 'start': 9074.738, 'duration': 2.323}, {'end': 9078.382, 'text': "I don't know what the heck I'm doing here.", 'start': 9077.081, 'duration': 1.301}, {'end': 9082.246, 'text': 'And this div is supposed to be closing all the way at the bottom here.', 'start': 9078.903, 'duration': 3.343}, {'end': 9085.989, 'text': "Cool So now what's happening is this div is being closed here.", 'start': 9082.806, 'duration': 3.183}, {'end': 9087.351, 'text': 'This is closed here.', 'start': 9086.35, 'duration': 1.001}, {'end': 9088.412, 'text': 'This is closed here.', 'start': 9087.411, 'duration': 1.001}, {'end': 9089.933, 'text': "And this one's closed there.", 'start': 9088.992, 'duration': 0.941}, {'end': 9091.315, 'text': "Cool Now let's refresh.", 'start': 9089.993, 'duration': 1.322}, {'end': 9092.756, 'text': 'Okay, cool.', 'start': 9091.935, 'duration': 0.821}, {'end': 9099.361, 'text': 'So now we have the two buttons inside of, inside of one container, okay? This is the container.', 'start': 9093.256, 'duration': 6.105}], 'summary': 'Demonstrating the use of flexbox to organize buttons in a container.', 'duration': 124.731, 'max_score': 8974.63, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI8974630.jpg'}, {'end': 9426.66, 'src': 'embed', 'start': 9395.091, 'weight': 2, 'content': [{'end': 9402.976, 'text': 'Okay I can do, you know, different kinds of things with this, like I can choose my flex.', 'start': 9395.091, 'duration': 7.885}, {'end': 9415.888, 'text': 'direction. so i can do row, which is usually by default, and i can also do column and now notice that each of those are in its own column,', 'start': 9404.136, 'duration': 11.752}, {'end': 9417.73, 'text': 'which again is pretty cool.', 'start': 9415.888, 'duration': 1.842}, {'end': 9420.673, 'text': 'how it makes it so easy for you by just doing column.', 'start': 9417.73, 'duration': 2.943}, {'end': 9426.66, 'text': 'i can also do column reverse if i wanted to switch their orders right and um.', 'start': 9420.673, 'duration': 5.987}], 'summary': 'The transcript explains the options for flex direction, including row, column, and column reverse.', 'duration': 31.569, 'max_score': 9395.091, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI9395091.jpg'}], 'start': 7666.75, 'title': 'Flexbox and css styling', 'summary': 'Provides an introduction to html and css, covers the basics of flexbox, including its activation, properties, and usage for layout design, with a focus on responsive layouts, mobile friendliness, and manual ordering.', 'chapters': [{'end': 7725.802, 'start': 7666.75, 'title': 'Introduction to html and css', 'summary': 'Provides an introduction to html and css, emphasizing the availability of resources for further study, and the interactive learning experience on the scrimba platform.', 'duration': 59.052, 'highlights': ['The video introduces a basic HTML file and assumes that viewers have some knowledge of HTML and CSS.', 'Viewers are encouraged to watch the CSS crash course and the HTML crash course if they lack prior knowledge.', 'The interactive learning experience on the Scrimba platform allows users to revisit the video, scroll to any point, and modify the code for experimentation.']}, {'end': 8168.264, 'start': 7726.403, 'title': 'Complete guide to flexbox', 'summary': 'Covers the basics of flexbox, explaining how to activate flexbox, use flex direction, justify content, flex wrap, and order properties, making layouts responsive and more manageable, with a focus on mobile friendliness and manual ordering.', 'duration': 441.861, 'highlights': ["Activate Flexbox with 'display: flex' The main command to activate Flexbox is 'display: flex', which turns the container into a flexbox and enables Flexbox functionality for all its direct children.", "Use 'flex direction' for layout orientation The 'flex direction' property allows the orientation of the layout to be set, with options for row, row reverse, column, and column reverse, providing flexibility for different screen sizes and devices.", "Apply 'justify content' for alignment The 'justify content' property allows for alignment control, including options for left justified, right justified, centered, space around, and space evenly, providing flexibility in how items are aligned within the container.", "Utilize 'flex wrap' for responsive layouts The 'flex wrap' property allows items to automatically wrap to a new line if the space runs out, making layouts responsive and preventing items from overflowing the container, enhancing mobile friendliness.", "Manage item order with 'order' property The 'order' property allows items to be manually ordered independently, providing full freedom to customize the layout and make it more visually appealing, responsive, and manageable."]}, {'end': 8830.518, 'start': 8168.885, 'title': 'Using flexbox for layout design', 'summary': 'Covers the basics of using flexbox for layout design, including browser support and compatibility, and demonstrates the use of flexbox in building mini projects using html, css, and javascript.', 'duration': 661.633, 'highlights': ['Flexbox has browser support with Chrome, Safari, and Mozilla Firefox, with accessibility in Internet Explorer 11+. Flexbox has browser support with accessibility in Internet Explorer 11+ and compatibility with Chrome, Safari, and Mozilla Firefox.', "Demonstrates the use of Flexbox in building mini projects like 'your age and days' and 'random cat meme gif' using HTML, CSS, and JavaScript. Demonstrates the use of Flexbox in building mini projects like 'your age and days' and 'random cat meme gif' using HTML, CSS, and JavaScript.", 'Shows the use of Bootstrap for styling buttons, making it easier to design without writing extensive code. Shows the use of Bootstrap for styling buttons, making it easier to design without writing extensive code.', 'Guides through the process of linking JavaScript to HTML and demonstrates the use of console.log for debugging. Guides through the process of linking JavaScript to HTML and demonstrates the use of console.log for debugging.']}, {'end': 9426.66, 'start': 8830.518, 'title': 'Styling with flexbox and container', 'summary': 'Explains how to use flexbox to organize elements into a grid, add padding and borders to divs, and justify content with flexbox, demonstrating the usage of flexbox properties and how they affect the layout.', 'duration': 596.142, 'highlights': ['The chapter explains how to use Flexbox to organize elements into a grid. Flexbox simplifies the process of organizing elements into a grid layout, eliminating the need for using coordinates and percentages.', 'The chapter demonstrates adding padding and borders to divs within a Flexbox container. The demonstration includes adding padding and one-pixel solid black borders to individual divs within a Flexbox container, showing the visual impact of these styling techniques.', 'The chapter showcases justifying content with Flexbox and utilizing Flexbox properties such as justify-content, flex-wrap, and align-items. The explanation includes demonstrating the usage of justify-content to create space around elements, flex-wrap for wrapping elements, and align-items for centering content within a flex container.']}], 'duration': 1759.91, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI7666750.jpg', 'highlights': ['The video introduces a basic HTML file and assumes that viewers have some knowledge of HTML and CSS.', "Activate Flexbox with 'display: flex' The main command to activate Flexbox is 'display: flex', which turns the container into a flexbox and enables Flexbox functionality for all its direct children.", "The 'flex direction' property allows the orientation of the layout to be set, with options for row, row reverse, column, and column reverse, providing flexibility for different screen sizes and devices.", "The 'justify content' property allows for alignment control, including options for left justified, right justified, centered, space around, and space evenly, providing flexibility in how items are aligned within the container.", "The 'flex wrap' property allows items to automatically wrap to a new line if the space runs out, making layouts responsive and preventing items from overflowing the container, enhancing mobile friendliness.", "The 'order' property allows items to be manually ordered independently, providing full freedom to customize the layout and make it more visually appealing, responsive, and manageable.", 'Flexbox has browser support with Chrome, Safari, and Mozilla Firefox, with accessibility in Internet Explorer 11+.', "Demonstrates the use of Flexbox in building mini projects like 'your age and days' and 'random cat meme gif' using HTML, CSS, and JavaScript.", 'Shows the use of Bootstrap for styling buttons, making it easier to design without writing extensive code.', 'The chapter explains how to use Flexbox to organize elements into a grid, eliminating the need for using coordinates and percentages.', 'The chapter demonstrates adding padding and borders to divs within a Flexbox container, showing the visual impact of these styling techniques.', 'The chapter showcases justifying content with Flexbox and utilizing Flexbox properties such as justify-content, flex-wrap, and align-items.']}, {'end': 10443.997, 'segs': [{'end': 9549.269, 'src': 'embed', 'start': 9518.125, 'weight': 1, 'content': [{'end': 9520.908, 'text': "Now we're gonna go to our script.", 'start': 9518.125, 'duration': 2.783}, {'end': 9529.06, 'text': 'I will remove all of this and this is gonna be our challenge one, your age in days.', 'start': 9522.631, 'duration': 6.429}, {'end': 9537.721, 'text': 'Now this is the fun JavaScript part, okay? Okay, how do we do age and days? Well, think about it.', 'start': 9530.983, 'duration': 6.738}, {'end': 9541.644, 'text': "First, what we need is here's what we need to get okay?", 'start': 9537.921, 'duration': 3.723}, {'end': 9545.807, 'text': 'We need to see how, what year somebody was born in.', 'start': 9542.164, 'duration': 3.643}, {'end': 9549.269, 'text': "okay?. So let's say that you were born in 1994..", 'start': 9545.807, 'duration': 3.462}], 'summary': 'Challenge: calculate age in days using javascript', 'duration': 31.144, 'max_score': 9518.125, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI9518125.jpg'}, {'end': 9816.919, 'src': 'heatmap', 'start': 9694.321, 'weight': 0.886, 'content': [{'end': 9698.801, 'text': "Now that I've done that, I'm gonna go in the console and hit apple and look, it says six.", 'start': 9694.321, 'duration': 4.48}, {'end': 9700.382, 'text': 'It gives me a six as a string.', 'start': 9698.981, 'duration': 1.401}, {'end': 9702.282, 'text': 'Very cool.', 'start': 9701.562, 'duration': 0.72}, {'end': 9708.003, 'text': "So that's the information that you're actually gonna be, that's how you're gonna be taking in information from the user.", 'start': 9702.982, 'duration': 5.021}, {'end': 9709.963, 'text': "That's how you're gonna be using the prompt.", 'start': 9708.343, 'duration': 1.62}, {'end': 9720.293, 'text': "So I'm gonna go here and I'll say prompt what year were you born, good friend?", 'start': 9710.324, 'duration': 9.969}, {'end': 9728.837, 'text': "okay, so let's save it, let's come here, let's refresh and boom, there it is.", 'start': 9720.293, 'duration': 8.544}, {'end': 9729.637, 'text': 'I was born in 1994.', 'start': 9728.837, 'duration': 0.8}, {'end': 9740.829, 'text': "awesome. now what we're gonna do is we're gonna connect that button to a to triggering this.", 'start': 9729.637, 'duration': 11.192}, {'end': 9747.031, 'text': 'okay?. So every time we click, instead of just me refreshing the page and it popping up this prompt,', 'start': 9740.829, 'duration': 6.202}, {'end': 9751.512, 'text': 'what I wanna do is that it should pop up once I click the click me button.', 'start': 9747.031, 'duration': 4.481}, {'end': 9756.034, 'text': "So what I'm gonna do is I'm gonna wrap this inside of a function.", 'start': 9752.733, 'duration': 3.301}, {'end': 9771.709, 'text': "I'll call this function age in days, all right? And I'll go, in my index.html.", 'start': 9756.534, 'duration': 15.175}, {'end': 9776.252, 'text': "And what I'll say is that in this button, I'm going to give it another attribute.", 'start': 9772.35, 'duration': 3.902}, {'end': 9782.796, 'text': "And I'll say on click, run that function age in days.", 'start': 9776.292, 'duration': 6.504}, {'end': 9785.918, 'text': 'Okay, say run that function.', 'start': 9782.816, 'duration': 3.102}, {'end': 9787.039, 'text': "So I'll hit refresh.", 'start': 9786.179, 'duration': 0.86}, {'end': 9788.76, 'text': "And now look, the prompt didn't pop up.", 'start': 9787.059, 'duration': 1.701}, {'end': 9792.242, 'text': 'But when I click click me, the prompt prompts up, okay, pops up.', 'start': 9789, 'duration': 3.242}, {'end': 9796.384, 'text': "Cool So that's pretty exciting so far.", 'start': 9792.403, 'duration': 3.981}, {'end': 9798.007, 'text': "Let's keep going.", 'start': 9797.025, 'duration': 0.982}, {'end': 9799.41, 'text': 'We got our birth here.', 'start': 9798.287, 'duration': 1.123}, {'end': 9802.636, 'text': "What can we do now? Well, let's just pop up.", 'start': 9799.85, 'duration': 2.786}, {'end': 9807.237, 'text': "Hopefully it's Postmates and we got some delicious food.", 'start': 9803.476, 'duration': 3.761}, {'end': 9808.537, 'text': "We'll see how it is.", 'start': 9807.597, 'duration': 0.94}, {'end': 9810.378, 'text': "It's probably really good.", 'start': 9809.237, 'duration': 1.141}, {'end': 9814.279, 'text': "And let's just keep rolling with it, okay? So I'm gonna do var.", 'start': 9811.198, 'duration': 3.081}, {'end': 9814.779, 'text': 'All right.', 'start': 9814.319, 'duration': 0.46}, {'end': 9816.919, 'text': 'so age in days okay?', 'start': 9814.779, 'duration': 2.14}], 'summary': 'The transcript demonstrates using prompts and connecting a button to trigger a function in javascript.', 'duration': 122.598, 'max_score': 9694.321, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI9694321.jpg'}, {'end': 9788.76, 'src': 'embed', 'start': 9752.733, 'weight': 0, 'content': [{'end': 9756.034, 'text': "So what I'm gonna do is I'm gonna wrap this inside of a function.", 'start': 9752.733, 'duration': 3.301}, {'end': 9771.709, 'text': "I'll call this function age in days, all right? And I'll go, in my index.html.", 'start': 9756.534, 'duration': 15.175}, {'end': 9776.252, 'text': "And what I'll say is that in this button, I'm going to give it another attribute.", 'start': 9772.35, 'duration': 3.902}, {'end': 9782.796, 'text': "And I'll say on click, run that function age in days.", 'start': 9776.292, 'duration': 6.504}, {'end': 9785.918, 'text': 'Okay, say run that function.', 'start': 9782.816, 'duration': 3.102}, {'end': 9787.039, 'text': "So I'll hit refresh.", 'start': 9786.179, 'duration': 0.86}, {'end': 9788.76, 'text': "And now look, the prompt didn't pop up.", 'start': 9787.059, 'duration': 1.701}], 'summary': "Creating a function 'age in days' in index.html to prompt user input.", 'duration': 36.027, 'max_score': 9752.733, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI9752733.jpg'}, {'end': 10055.751, 'src': 'heatmap', 'start': 9928.692, 'weight': 0.875, 'content': [{'end': 9939.325, 'text': "Okay, so I'm gonna say, you are, you are here plus age in days.", 'start': 9928.692, 'duration': 10.633}, {'end': 9942.885, 'text': "So this is what we're doing right now is string concatenation.", 'start': 9939.965, 'duration': 2.92}, {'end': 9946.666, 'text': "So we're taking a string, and then we're adding a variable to it.", 'start': 9942.905, 'duration': 3.761}, {'end': 9951.207, 'text': "Okay, that's, it's just a fancy way of saying like, we're attaching two strings together.", 'start': 9946.706, 'duration': 4.501}, {'end': 9952.628, 'text': 'Got it.', 'start': 9952.288, 'duration': 0.34}, {'end': 9953.788, 'text': 'Okay, good.', 'start': 9953.468, 'duration': 0.32}, {'end': 9955.368, 'text': "All right, let's keep going.", 'start': 9954.448, 'duration': 0.92}, {'end': 9966.364, 'text': "So I'm gonna take this, I will add, days old to that, okay? So this is gonna create that text node.", 'start': 9955.428, 'duration': 10.936}, {'end': 9972.706, 'text': "This, I'm grabbing this age and days over here, and that's gonna be my text answer.", 'start': 9966.824, 'duration': 5.882}, {'end': 9976.528, 'text': 'Once I create this text answer, I wanna add it to my h1, okay?', 'start': 9973.127, 'duration': 3.401}, {'end': 9977.988, 'text': 'So how do I do that?', 'start': 9976.988, 'duration': 1}, {'end': 9986.451, 'text': "I'm gonna say set h1.setAttribute and I'm gonna say set its ID to age in days.", 'start': 9978.128, 'duration': 8.323}, {'end': 9994.824, 'text': 'And then I wanna do h1.appendChild text answer.', 'start': 9989.98, 'duration': 4.844}, {'end': 10006.573, 'text': 'And then lastly, what I wanna do is document.getElementById, flex box result, okay? And append child h1.', 'start': 9995.585, 'duration': 10.988}, {'end': 10010.957, 'text': "A lot going on here, and I'm gonna explain it in just a second.", 'start': 10007.494, 'duration': 3.463}, {'end': 10015.18, 'text': "So I'm gonna delete all of this, or that one line.", 'start': 10011.397, 'duration': 3.783}, {'end': 10018.405, 'text': "i'm gonna hit refresh, i'll hit click me.", 'start': 10016.121, 'duration': 2.284}, {'end': 10027.098, 'text': "i'll hit 1994 and boom, you can see that it says you are 8 760 days old in my code.", 'start': 10018.405, 'duration': 8.693}, {'end': 10032.322, 'text': "okay, doesn't say it anywhere else and not in the console, not in an alert.", 'start': 10027.098, 'duration': 5.224}, {'end': 10035.343, 'text': 'It actually says it right in my page.', 'start': 10032.482, 'duration': 2.861}, {'end': 10042.706, 'text': 'So how is this working? I can always right click and hit inspect.', 'start': 10035.783, 'duration': 6.923}, {'end': 10045.587, 'text': "Whenever you're in doubt, just inspect.", 'start': 10042.966, 'duration': 2.621}, {'end': 10050.789, 'text': "Think of it like you're a detective and you're trying to figure out what's actually taking place.", 'start': 10046.367, 'duration': 4.422}, {'end': 10055.751, 'text': "So while I'm looking at this, if I hover over, I can see my age and days.", 'start': 10051.409, 'duration': 4.342}], 'summary': 'Demonstrating string concatenation and dom manipulation to display age in days on a webpage.', 'duration': 127.059, 'max_score': 9928.692, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI9928692.jpg'}, {'end': 10294.251, 'src': 'heatmap', 'start': 10169.353, 'weight': 0.707, 'content': [{'end': 10176.215, 'text': 'Cause we did the click me together where I gave click me the ability to run this function agent days.', 'start': 10169.353, 'duration': 6.862}, {'end': 10179.017, 'text': 'See if you can get the reset one to figure it out.', 'start': 10176.696, 'duration': 2.321}, {'end': 10180.057, 'text': "I'm gonna give you five seconds.", 'start': 10179.037, 'duration': 1.02}, {'end': 10182.838, 'text': 'Five, four, three, two, one.', 'start': 10180.717, 'duration': 2.121}, {'end': 10187.58, 'text': "Okay, now I'm going to show you how to do it.", 'start': 10185.899, 'duration': 1.681}, {'end': 10189.22, 'text': "So if you didn't get it, don't worry.", 'start': 10187.62, 'duration': 1.6}, {'end': 10192.222, 'text': 'Beat yourself up just a little bit because you should have gotten it.', 'start': 10189.781, 'duration': 2.441}, {'end': 10194.603, 'text': "But if not, you know what? It's okay.", 'start': 10192.542, 'duration': 2.061}, {'end': 10198.624, 'text': "This happens and we're here to learn and we'll just figure it out together.", 'start': 10194.923, 'duration': 3.701}, {'end': 10200.245, 'text': 'okay?. You and me, okay?', 'start': 10198.624, 'duration': 1.621}, {'end': 10202.065, 'text': "We're in this battle together, so let's figure it out.", 'start': 10200.265, 'duration': 1.8}, {'end': 10205.127, 'text': "I'm going to go to my..", 'start': 10203.626, 'duration': 1.501}, {'end': 10208.744, 'text': "I'm gonna go to my button, okay, reset.", 'start': 10207.042, 'duration': 1.702}, {'end': 10214.49, 'text': "And I'm just gonna go here and I'll say on click and I will say run the function reset.", 'start': 10208.844, 'duration': 5.646}, {'end': 10215.471, 'text': "That's it.", 'start': 10215.13, 'duration': 0.341}, {'end': 10218.294, 'text': "So now I'll refresh, I'll hit click me 1994.", 'start': 10215.891, 'duration': 2.403}, {'end': 10220.996, 'text': 'You are 8,760 days old.', 'start': 10218.294, 'duration': 2.702}, {'end': 10227.603, 'text': "I'll hit reset and boom, it just grabs that div and just deletes it.", 'start': 10221.377, 'duration': 6.226}, {'end': 10228.624, 'text': "So now it's gone.", 'start': 10227.663, 'duration': 0.961}, {'end': 10234.691, 'text': "Okay, if I actually remove all the borders, you wouldn't even see anything here just look empty to you.", 'start': 10228.644, 'duration': 6.047}, {'end': 10240.137, 'text': 'And the last thing we want to do in this challenge is just make sure everything is kind of like centralized.', 'start': 10235.532, 'duration': 4.605}, {'end': 10244.461, 'text': "So what I want to do is I will go to my style at CSS, I'll go to my container.", 'start': 10240.557, 'duration': 3.904}, {'end': 10247.639, 'text': "and I'm gonna do margin zero auto.", 'start': 10245.638, 'duration': 2.001}, {'end': 10249.52, 'text': "And I'll hit refresh here.", 'start': 10248.139, 'duration': 1.381}, {'end': 10252.701, 'text': "And I'm gonna go to my width.", 'start': 10250.72, 'duration': 1.981}, {'end': 10257.283, 'text': "And I'll make my width like about 75%.", 'start': 10253.401, 'duration': 3.882}, {'end': 10258.223, 'text': "And I'll hit refresh.", 'start': 10257.283, 'duration': 0.94}, {'end': 10265.206, 'text': "And now you can see that it's a little bit more centralized, right? But the text is still not centralized.", 'start': 10258.663, 'duration': 6.543}, {'end': 10271.756, 'text': "So last thing I wanna do is align Text, or I think it's text align.", 'start': 10265.306, 'duration': 6.45}, {'end': 10274.637, 'text': 'Text align and center.', 'start': 10272.676, 'duration': 1.961}, {'end': 10276.659, 'text': "I'm not a front end expert, guys.", 'start': 10275.018, 'duration': 1.641}, {'end': 10279.201, 'text': 'I barely spend any time on front end.', 'start': 10277.379, 'duration': 1.822}, {'end': 10281.582, 'text': 'So take this with a grain of salt.', 'start': 10279.701, 'duration': 1.881}, {'end': 10284.224, 'text': 'So take this with a grain of salt, but this is good.', 'start': 10281.982, 'duration': 2.242}, {'end': 10285.345, 'text': "I'm gonna save it.", 'start': 10284.684, 'duration': 0.661}, {'end': 10286.605, 'text': "I'm gonna come here and refresh.", 'start': 10285.365, 'duration': 1.24}, {'end': 10287.786, 'text': 'Look at that.', 'start': 10287.206, 'duration': 0.58}, {'end': 10291.149, 'text': 'Nice and centralized, looking sexy.', 'start': 10288.287, 'duration': 2.862}, {'end': 10294.251, 'text': "We're ready to get into our challenge two.", 'start': 10291.949, 'duration': 2.302}], 'summary': 'Tutorial on adding functionality to a button, resetting data, and css styling.', 'duration': 124.898, 'max_score': 10169.353, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI10169353.jpg'}], 'start': 9429.056, 'title': 'Age in days calculator', 'summary': "Covers adding click functionality to calculate and display the user's age in days, getting age in days using javascript with prompts for user input, and creating an 'age in days' calculator using html, css, and javascript. it includes the process of calculating the age, attaching elements to the dom, and project-based learning emphasis.", 'chapters': [{'end': 9517.905, 'start': 9429.056, 'title': 'Adding click functionality and updating result display', 'summary': "Covers adding functionality to a web page to calculate and display the user's age in days upon clicking a button, involving the creation and styling of html elements.", 'duration': 88.849, 'highlights': ["The chapter demonstrates the process of adding a click functionality to calculate the user's age in days and update the result display upon clicking a button.", 'The instructor explains the steps involved in creating and styling HTML elements to achieve the desired functionality.', "The instructor mentions the creation of a div with the class 'flexbox container one' to inherit its styling, followed by the addition of an empty 'flexbox result' div and an H2 element to display the result.", "The instructor emphasizes the process of adding the functionality to calculate the user's age in days and updating the result display upon clicking the button 'click me'."]}, {'end': 9814.779, 'start': 9518.125, 'title': 'Getting age in days', 'summary': "Explains how to calculate a person's age in days using javascript, including prompts for user input and function to trigger the calculation, with an example of calculating the age in days.", 'duration': 296.654, 'highlights': ["The chapter explains how to calculate a person's age in days using JavaScript. It provides a simple explanation of multiplying a person's age by 365 to calculate their age in days.", "It includes prompts for user input and a function to trigger the calculation. Demonstrates the use of the 'prompt' function for user input and creating a function called 'age in days' to trigger the calculation.", 'An example of calculating the age in days is provided. An example is shown where the birth year is subtracted from the current year and multiplied by 365 to calculate the age in days.']}, {'end': 10443.997, 'start': 9814.779, 'title': 'Age in days calculator', 'summary': "Discusses creating an 'age in days' calculator using html, css, and javascript. it covers the process of calculating the age in days based on the birth year, displaying the result on the webpage, adding a reset function, and centering the content using css. key points include the calculation method, attaching elements to the dom, and the emphasis on project-based learning.", 'duration': 629.218, 'highlights': ["The chapter demonstrates creating an 'age in days' calculator using HTML, CSS, and JavaScript, focusing on project-based learning and the connection between JavaScript and the project.", 'It covers the process of calculating the age in days by subtracting the birth year from 2018 and multiplying the result by 365, resulting in the age in days, with an example yielding 8,760 days.', 'The code includes adding the calculated age in days to the webpage using the DOM (Document Object Model) and string concatenation, enabling the display of the age directly on the webpage.', 'The reset function is implemented to remove the displayed age in days from the webpage upon clicking the reset button, ensuring a clean interface.', 'The CSS part focuses on centralizing the content by adjusting margins, width, and text alignment, with the emphasis on HTML and CSS before addressing the JavaScript part for a well-rounded learning experience.']}], 'duration': 1014.941, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI9429056.jpg', 'highlights': ["The chapter demonstrates the process of adding a click functionality to calculate the user's age in days and update the result display upon clicking a button.", "The chapter explains how to calculate a person's age in days using JavaScript. It provides a simple explanation of multiplying a person's age by 365 to calculate their age in days.", "The chapter demonstrates creating an 'age in days' calculator using HTML, CSS, and JavaScript, focusing on project-based learning and the connection between JavaScript and the project."]}, {'end': 11956.96, 'segs': [{'end': 10494.475, 'src': 'embed', 'start': 10444.037, 'weight': 2, 'content': [{'end': 10445.558, 'text': "So it'll be a lot of fun.", 'start': 10444.037, 'duration': 1.521}, {'end': 10447.541, 'text': "Hang in there with me and let's get started.", 'start': 10445.819, 'duration': 1.722}, {'end': 10451.894, 'text': "So for this, let's talk about the HTML and CSS part.", 'start': 10448.652, 'duration': 3.242}, {'end': 10455.016, 'text': 'So you saw me just generate five cats right now.', 'start': 10452.074, 'duration': 2.942}, {'end': 10456.217, 'text': 'And notice what happened.', 'start': 10455.136, 'duration': 1.081}, {'end': 10460.1, 'text': "The cats didn't run across this border.", 'start': 10457.038, 'duration': 3.062}, {'end': 10462.061, 'text': "They didn't run across to the right or to the left.", 'start': 10460.14, 'duration': 1.921}, {'end': 10467.685, 'text': 'They nicely move on to a new line in this case.', 'start': 10462.862, 'duration': 4.823}, {'end': 10471.908, 'text': 'So how are these images intelligent like that?', 'start': 10468.045, 'duration': 3.863}, {'end': 10472.828, 'text': 'How does that happen?', 'start': 10471.968, 'duration': 0.86}, {'end': 10478.152, 'text': "How does it know to automatically go to a new line when it can't fit on the top one anymore?", 'start': 10473.328, 'duration': 4.824}, {'end': 10488.196, 'text': "And I'm gonna show you some really cool ways to be able to make something in a really super simple way, the simplest way, okay, to do that.", 'start': 10479.432, 'duration': 8.764}, {'end': 10491.537, 'text': 'Okay, normally it used to require math and for you to know percentages.', 'start': 10488.236, 'duration': 3.301}, {'end': 10494.475, 'text': "there's there's something so much easier.", 'start': 10492.895, 'duration': 1.58}], 'summary': 'Demonstrates generating 5 cats; images move to new line when necessary; promises simple way to achieve the same without math or percentages.', 'duration': 50.438, 'max_score': 10444.037, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI10444037.jpg'}, {'end': 10569.647, 'src': 'embed', 'start': 10539.025, 'weight': 7, 'content': [{'end': 10541.867, 'text': "And we made it like so it's more centered.", 'start': 10539.025, 'duration': 2.842}, {'end': 10543.589, 'text': 'all the content is centered on the page.', 'start': 10541.867, 'duration': 1.722}, {'end': 10552.736, 'text': 'But the outside of it and like the whole document is actually like the body, okay? So I just want you to be aware of that distinction.', 'start': 10544.61, 'duration': 8.126}, {'end': 10556.204, 'text': 'Now, first I wanna talk about this.', 'start': 10553.823, 'duration': 2.381}, {'end': 10563.326, 'text': 'okay?. So this is a container that contains everything about our challenge, okay?', 'start': 10556.204, 'duration': 7.122}, {'end': 10566.166, 'text': "So it's literally just a div, okay?", 'start': 10563.346, 'duration': 2.82}, {'end': 10569.647, 'text': 'And that div has a class of container.', 'start': 10567.006, 'duration': 2.641}], 'summary': "The document is centered, with all content contained in a div with a class of 'container'.", 'duration': 30.622, 'max_score': 10539.025, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI10539025.jpg'}, {'end': 10816.815, 'src': 'embed', 'start': 10778.724, 'weight': 6, 'content': [{'end': 10788.937, 'text': "So here I'm gonna just highlight it and Essentially the code we have for that is flex wrap wrap, okay?", 'start': 10778.724, 'duration': 10.213}, {'end': 10793.541, 'text': "So that's the specific code that's actually making the wrapping work.", 'start': 10789.357, 'duration': 4.184}, {'end': 10806.571, 'text': "And another thing I want you to be aware of is how everything is spaced kind of evenly, and then there's space around it, okay?", 'start': 10794.241, 'duration': 12.33}, {'end': 10813.994, 'text': 'So notice, Notice here right?', 'start': 10807.052, 'duration': 6.942}, {'end': 10816.815, 'text': 'This is not just that 10 padding, this is something else.', 'start': 10814.394, 'duration': 2.421}], 'summary': "The code 'flex wrap wrap' enables wrapping. items are evenly spaced with additional padding.", 'duration': 38.091, 'max_score': 10778.724, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI10778724.jpg'}, {'end': 11012.941, 'src': 'heatmap', 'start': 10885.799, 'weight': 0.872, 'content': [{'end': 10892.807, 'text': "So all the link that basically somebody put together this website where it's called a catapi.com.", 'start': 10885.799, 'duration': 7.008}, {'end': 10898.574, 'text': 'And every time you run their URL, it gets you a new image every single time.', 'start': 10892.988, 'duration': 5.586}, {'end': 10901.032, 'text': 'some random new image.', 'start': 10899.691, 'duration': 1.341}, {'end': 10904.955, 'text': "So I thought that'd be cool and it makes our life a lot easier, okay?", 'start': 10901.232, 'duration': 3.723}, {'end': 10911.18, 'text': 'So, if I you know, paste that every time and run it.', 'start': 10906.016, 'duration': 5.164}, {'end': 10913.661, 'text': 'you can see I keep getting a newer and newer image.', 'start': 10911.18, 'duration': 2.481}, {'end': 10918.28, 'text': 'and also because i want a small image.', 'start': 10916.039, 'duration': 2.241}, {'end': 10922.322, 'text': 'in the arguments of the url parameter i said size is equal to small.', 'start': 10918.28, 'duration': 4.042}, {'end': 10924.303, 'text': 'okay, and type is gif.', 'start': 10922.322, 'duration': 1.981}, {'end': 10926.325, 'text': 'now you could probably change the type.', 'start': 10924.303, 'duration': 2.022}, {'end': 10929.686, 'text': 'you could probably change the source and you could probably change the size.', 'start': 10926.325, 'duration': 3.361}, {'end': 10935.65, 'text': 'but i like small and i like gif because gifs are awesome.', 'start': 10929.686, 'duration': 5.964}, {'end': 10941.853, 'text': "so let's go back to our javascript steroids thing and i'm just going to paste that.", 'start': 10935.65, 'duration': 6.203}, {'end': 10944.337, 'text': "I'm just going to paste it.", 'start': 10943.356, 'duration': 0.981}, {'end': 10944.977, 'text': "That's it.", 'start': 10944.577, 'duration': 0.4}, {'end': 10954.465, 'text': "Okay, I'm just going to paste it as a source and we're going to hit refresh and you can see one of the images popping up in the flex box.", 'start': 10944.997, 'duration': 9.468}, {'end': 10956.166, 'text': "right?. It's popping up in the flex box.", 'start': 10954.465, 'duration': 1.701}, {'end': 10966.257, 'text': "Uh, let's try putting another image and another image and then, uh, refreshing and seeing what happens.", 'start': 10958.328, 'duration': 7.929}, {'end': 10974.079, 'text': "So now, what I want you to notice is that these images are really close to each other and there's no padding, right?", 'start': 10966.738, 'duration': 7.341}, {'end': 10982.621, 'text': 'So if I put this to the left hand side, whoops, if I put this to the left hand side, you see that this has padding,', 'start': 10974.139, 'duration': 8.482}, {'end': 10985.462, 'text': 'except our images on the right have absolutely no padding.', 'start': 10982.621, 'duration': 2.841}, {'end': 10993.736, 'text': 'And then another thing I want you to see is that it actually runs across instead of running on a new line, right?', 'start': 10986.202, 'duration': 7.534}, {'end': 10999.058, 'text': "So if I added another image here, it'll kind of look really ugly.", 'start': 10993.756, 'duration': 5.302}, {'end': 11000.218, 'text': 'Now press refresh.', 'start': 10999.218, 'duration': 1}, {'end': 11006.999, 'text': 'Like notice that the images are now just literally running across, right running across the page.', 'start': 11001.518, 'duration': 5.481}, {'end': 11010.36, 'text': 'If I refresh again, same thing, those are running across.', 'start': 11007.62, 'duration': 2.74}, {'end': 11012.941, 'text': 'So now, what should I do??', 'start': 11011.1, 'duration': 1.841}], 'summary': 'Using catapi.com, a new cat image is fetched with specific parameters, resulting in images displayed without padding and running across the page.', 'duration': 127.142, 'max_score': 10885.799, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI10885799.jpg'}, {'end': 11047.907, 'src': 'embed', 'start': 11013.081, 'weight': 4, 'content': [{'end': 11025.036, 'text': "Well, First, let's just highlight each image green, so you can actually see each of the elements inside of that flex box or inside of that container.", 'start': 11013.081, 'duration': 11.955}, {'end': 11033.42, 'text': "So I'm gonna say flex box container two and I'll go here and I'll say select the image.", 'start': 11025.096, 'duration': 8.324}, {'end': 11040.003, 'text': 'Okay, so I can go one level down that container and just select the image.', 'start': 11035.64, 'duration': 4.363}, {'end': 11047.907, 'text': "And I'm going to give border and I'll say one pixel solid and I'll say green.", 'start': 11040.583, 'duration': 7.324}], 'summary': 'Demonstrating how to highlight images in a flex box container with green borders.', 'duration': 34.826, 'max_score': 11013.081, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI11013081.jpg'}, {'end': 11101.071, 'src': 'embed', 'start': 11070.157, 'weight': 3, 'content': [{'end': 11078.14, 'text': 'Okay so now, how can we make it so the images actually run across or, sorry, run down??', 'start': 11070.157, 'duration': 7.983}, {'end': 11079.74, 'text': "Okay so first let's do that.", 'start': 11078.44, 'duration': 1.3}, {'end': 11082.221, 'text': 'So make sure that the image is actually running down.', 'start': 11079.76, 'duration': 2.461}, {'end': 11091.044, 'text': 'So my container, the type is flex, and then what I wanna do is I wanna say flex wrap and enable the wrap.', 'start': 11082.801, 'duration': 8.243}, {'end': 11101.071, 'text': "And when I hit refresh, you'll notice that now when it's about to run across, the div or the flex box, it'll automatically go to the new line.", 'start': 11091.544, 'duration': 9.527}], 'summary': 'Using flexbox, enable flex wrap to make images run down in the container.', 'duration': 30.914, 'max_score': 11070.157, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI11070157.jpg'}, {'end': 11373.886, 'src': 'embed', 'start': 11344.727, 'weight': 0, 'content': [{'end': 11349.931, 'text': "And in my JavaScript, I'm going to create a function called generate cat.", 'start': 11344.727, 'duration': 5.204}, {'end': 11359.997, 'text': "And what this is essentially gonna do is it's gonna first get that, it's gonna create an image element.", 'start': 11352.131, 'duration': 7.866}, {'end': 11366.741, 'text': 'Then I want to create a div element.', 'start': 11363.339, 'duration': 3.402}, {'end': 11373.886, 'text': "So I'm gonna say, or actually we don't need to create a div element, but what I do need to do is get access to the flexbox div.", 'start': 11366.801, 'duration': 7.085}], 'summary': "Javascript function 'generate cat' creates image element and accesses flexbox div.", 'duration': 29.159, 'max_score': 11344.727, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI11344727.jpg'}, {'end': 11764.606, 'src': 'embed', 'start': 11738.495, 'weight': 5, 'content': [{'end': 11747.665, 'text': "Whereas if you look at my final version, right, look at the images and look how there's this nice little margin between the images.", 'start': 11738.495, 'duration': 9.17}, {'end': 11749.908, 'text': "So we're gonna basically add that.", 'start': 11748.145, 'duration': 1.763}, {'end': 11755.564, 'text': "And here you're also gonna get to play around with the difference of padding and margin.", 'start': 11751.443, 'duration': 4.121}, {'end': 11762.365, 'text': 'okay?, A lot of the times you want to just be using margin, but sometimes you should use padding.', 'start': 11755.564, 'duration': 6.801}, {'end': 11764.606, 'text': 'Generally, I like to actually use margin.', 'start': 11762.465, 'duration': 2.141}], 'summary': 'Final version includes a nice margin between images. exploring padding and margin differences.', 'duration': 26.111, 'max_score': 11738.495, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI11738495.jpg'}, {'end': 11820.138, 'src': 'embed', 'start': 11793.081, 'weight': 1, 'content': [{'end': 11798.026, 'text': "and i'll go refresh and i'll do generate cat a few times and boom.", 'start': 11793.081, 'duration': 4.945}, {'end': 11798.547, 'text': 'look at that.', 'start': 11798.026, 'duration': 0.521}, {'end': 11801.83, 'text': 'instead of like extending each image box, what it did.', 'start': 11798.547, 'duration': 3.283}, {'end': 11806.195, 'text': 'is it just added spacing between each image box?', 'start': 11801.83, 'duration': 4.365}, {'end': 11810.912, 'text': 'okay, so Now this looks super clean.', 'start': 11806.195, 'duration': 4.717}, {'end': 11812.353, 'text': 'I love it.', 'start': 11811.893, 'duration': 0.46}, {'end': 11813.153, 'text': 'I hope you love it.', 'start': 11812.453, 'duration': 0.7}, {'end': 11820.138, 'text': 'And you can see the power of flex boxes, right? The more I hit generate cats, the container grows to fit it.', 'start': 11813.213, 'duration': 6.925}], 'summary': 'Using flex boxes, generating cats adds spacing, making the container grow.', 'duration': 27.057, 'max_score': 11793.081, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI11793081.jpg'}], 'start': 10444.037, 'title': 'Html and css layouts, document structure, flexbox styling, and image arrangement', 'summary': 'Covers creating html and css layouts, html document structure, flexbox styling with a 10 pixel margin and flex wrap wrap code, utilizing flex boxes for image arrangement, and automatically generating cat images using javascript with event listeners and flexbox layout.', 'chapters': [{'end': 10494.475, 'start': 10444.037, 'title': 'Html and css layouts', 'summary': "Discusses creating html and css layouts, demonstrating how images automatically move to a new line when they can't fit, and promising to show a simpler way to achieve this without requiring math or percentages.", 'duration': 50.438, 'highlights': ['The chapter discusses creating HTML and CSS layouts The instructor starts by introducing the topic of HTML and CSS layouts, setting the stage for the upcoming discussion.', "Demonstrating how images automatically move to a new line when they can't fit The instructor showcases the behavior of images in the layout, explaining how they intelligently move to a new line when space is insufficient, demonstrating a key aspect of CSS layout functionality.", "Promising to show a simpler way to achieve layout without requiring math or percentages The instructor hints at introducing a simpler method for achieving layouts, highlighting the upcoming focus on a more user-friendly approach that doesn't rely on mathematical calculations or percentages."]}, {'end': 10892.807, 'start': 10494.696, 'title': 'Html document structure and flexbox styling', 'summary': 'Explains the structure of an html document, focusing on the container and flexbox div, and discusses the flexbox styling with quantifiable data such as the 10 pixel margin and the flex wrap wrap code.', 'duration': 398.111, 'highlights': ['The chapter explains the structure of an HTML document, focusing on the container and flexbox div The transcript discusses the concept of the HTML document structure and highlights the importance of the container and the flexbox div for organizing content.', 'Discusses the flexbox styling with quantifiable data such as the 10 pixel margin and the flex wrap wrap code The transcript delves into the flexbox styling, explaining the 10 pixel margin and the flex wrap wrap code as quantifiable data used to control the layout of elements.']}, {'end': 11236.722, 'start': 10892.988, 'title': 'Utilizing flex boxes for image arrangement', 'summary': 'Discusses utilizing flex boxes to arrange images in a container, adjusting padding and justification to create a visually appealing layout, and demonstrating the impact of flex properties on the image arrangement.', 'duration': 343.734, 'highlights': ['Utilizing flex boxes to arrange images in a container The speaker demonstrates the use of flex boxes to organize images in a container, providing a practical example of layout manipulation.', 'Adjusting padding and justification for a visually appealing layout The speaker discusses the impact of padding and justification on the layout, emphasizing the need for equal spacing and centralized alignment for a visually appealing display.', "Demonstrating the impact of flex properties on the image arrangement The speaker showcases the effect of flex properties such as 'flex wrap' and 'justify content' on the arrangement of images, highlighting their role in controlling the flow and alignment of elements within the container."]}, {'end': 11956.96, 'start': 11237.002, 'title': 'Automatically generating cat images with javascript', 'summary': 'Discusses the process of automatically generating cat images using javascript, including adding event listeners, creating image elements, and implementing flexbox for layout. it also covers optimizing code by removing redundancy and demonstrating the power of flexboxes in dynamically adjusting to content.', 'duration': 719.958, 'highlights': ["The process of automatically generating cat images using JavaScript is discussed, including adding event listeners and creating image and div elements. The discussion covers the steps involved in adding event listeners to the 'generate cat' button, creating image elements using JavaScript, and obtaining access to the flexbox container.", 'The implementation of flexbox for layout is explained, demonstrating its dynamic adjustment to accommodate generated cat images. The demonstration highlights the utilization of flexbox properties to dynamically adjust the layout to fit the generated cat images, showcasing its responsiveness and flexibility.', 'Optimizing code by removing redundancy and simplifying CSS and JavaScript is demonstrated, leading to cleaner and more efficient code. The demonstration showcases the process of optimizing code by removing redundant CSS and JavaScript code, leading to a cleaner and more efficient implementation.']}], 'duration': 1512.923, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/KN6oBEOz2ZI/pics/KN6oBEOz2ZI10444037.jpg', 'highlights': ['The process of automatically generating cat images using JavaScript is discussed, including adding event listeners and creating image and div elements.', 'The implementation of flexbox for layout is explained, demonstrating its dynamic adjustment to accommodate generated cat images.', 'Optimizing code by removing redundancy and simplifying CSS and JavaScript is demonstrated, leading to cleaner and more efficient code.', 'Demonstrating the impact of flex properties on the image arrangement.', 'Utilizing flex boxes to arrange images in a container.', 'Adjusting padding and justification for a visually appealing layout.', 'Discussing the flexbox styling with quantifiable data such as the 10 pixel margin and the flex wrap wrap code.', 'The chapter explains the structure of an HTML document, focusing on the container and flexbox div.', "Demonstrating how images automatically move to a new line when they can't fit.", 'Promising to show a simpler way to achieve layout without requiring math or percentages.', 'The chapter discusses creating HTML and CSS layouts.']}], 'highlights': ['Instructors Rafik Hazi and Aaron will cover CSS Flexbox theory and practical projects in a three-part masterclass.', 'The three-part masterclass will provide step-by-step guidance on the potential as a Python developer and the necessary steps for success.', 'The training is offered for free and requires only name and email address for access.', 'The chapter demonstrates the impact of CSS on website design by providing a comparison of a website with and without CSS, highlighting the visual improvements and functionality enhancements.', 'The speaker emphasizes the importance of playing around and experimenting with code, highlighting that genuine progress is made when working on projects independently rather than just following tutorials.', 'The speaker stresses the importance of practical skills in web development, stating that understanding how to research and utilize resources effectively is more crucial than memorizing technical details.', 'The speaker provides a step-by-step demonstration of how to create and customize box shadows using CSS, including practical examples and visual effects.', 'The speaker discusses the process of adding shadows in CSS, emphasizing the practical approach of Googling for solutions and highlighting the relatability of learning through natural curiosity and online searches.', 'Presenting a CSS Bootstrap project leveraging HTML to create a visually appealing webpage with specific styling and a navigation bar.', 'The chapter introduces a CSS Bootstrap project, leveraging the knowledge of HTML and using CSS and Bootstrap to create a visually appealing webpage with specific styling, a navigation bar, a background pattern, and a well-designed form with a call-to-action button.', 'The speaker emphasizes the practical approach to web development by building a real project modeled after their website, hosted online, and providing insight into the real development workflow.', 'Explains using Railway Sans Serif font, its impact on line height, font weight, max width, and application in html and css.', "Integrating Bootstrap for improved styling and form design The chapter explains the process of integrating Bootstrap functionality to enhance styling, including using Bootstrap's built-in classes for buttons and forms to achieve a cleaner and more professional look.", 'The video introduces a basic HTML file and assumes that viewers have some knowledge of HTML and CSS.', "Activate Flexbox with 'display: flex' The main command to activate Flexbox is 'display: flex', which turns the container into a flexbox and enables Flexbox functionality for all its direct children.", "The 'flex direction' property allows the orientation of the layout to be set, with options for row, row reverse, column, and column reverse, providing flexibility for different screen sizes and devices.", "The 'justify content' property allows for alignment control, including options for left justified, right justified, centered, space around, and space evenly, providing flexibility in how items are aligned within the container.", "The 'flex wrap' property allows items to automatically wrap to a new line if the space runs out, making layouts responsive and preventing items from overflowing the container, enhancing mobile friendliness.", "The chapter demonstrates the process of adding a click functionality to calculate the user's age in days and update the result display upon clicking a button.", "The chapter explains how to calculate a person's age in days using JavaScript. It provides a simple explanation of multiplying a person's age by 365 to calculate their age in days.", 'The process of automatically generating cat images using JavaScript is discussed, including adding event listeners and creating image and div elements.', 'Optimizing code by removing redundancy and simplifying CSS and JavaScript is demonstrated, leading to cleaner and more efficient code.', 'The chapter explains the structure of an HTML document, focusing on the container and flexbox div.', 'Promising to show a simpler way to achieve layout without requiring math or percentages.', 'The chapter discusses creating HTML and CSS layouts.']}