title
HTML Crash Course for Absolute Beginners 2020 [Tutorial]

description
3 Secrets to Become a Python Freelancer FREE TRAINING: https://events.genndi.com/register/169105139238457808/257d6fbaf8 Join the 3-part epic masterclass that shows you how to become a 6-figure developer... https://cleverprogrammer.com 🔥 TABLE OF CONTENTS... ENJOY 👇 5:30 - HTML Header Tags 6:00 - HTML File 10:30 - Paragraph Tags 13:35 - How to embed a video 18:20 -How to add images 22:48 - How to make a link 26:43 - Create lists 41:03 - Create tables 49:45 - How to create a simple HTML Website 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': 'HTML Crash Course for Absolute Beginners 2020 [Tutorial]', 'heatmap': [{'end': 179.921, 'start': 115.315, 'weight': 0.867}, {'end': 896.252, 'start': 846.351, 'weight': 1}, {'end': 1575.122, 'start': 1354.204, 'weight': 0.727}, {'end': 3061.434, 'start': 3006.482, 'weight': 0.861}], 'summary': 'This html crash course for beginners covers unorder lists, order lists, header tags, creating webpages, setting up visual studio code, html structure, manipulating elements, form elements, methods, design, essentials, and building a youtube clone with practical examples and a free one-hour training program.', 'chapters': [{'end': 85.426, 'segs': [{'end': 42.219, 'src': 'embed', 'start': 16.28, 'weight': 0, 'content': [{'end': 21.444, 'text': "In this HTML crash course, we're gonna go through all of the basics and we're gonna go through fast.", 'start': 16.28, 'duration': 5.164}, {'end': 22.485, 'text': 'You know how we do it here.', 'start': 21.464, 'duration': 1.021}, {'end': 29.13, 'text': "We get dirty, we get down into it, and we just start coding things up and you're not gonna listen to a bunch of boring fluff here.", 'start': 22.525, 'duration': 6.605}, {'end': 30.371, 'text': "That's not what this channel is about.", 'start': 29.17, 'duration': 1.201}, {'end': 32.351, 'text': "So we're gonna get into it really fast.", 'start': 30.651, 'duration': 1.7}, {'end': 35.414, 'text': "Now we're gonna be covering how unorder lists work.", 'start': 32.953, 'duration': 2.461}, {'end': 36.475, 'text': 'order lists work.', 'start': 35.414, 'duration': 1.061}, {'end': 38.557, 'text': 'what the hell are header tags?', 'start': 36.475, 'duration': 2.082}, {'end': 42.219, 'text': 'how do you actually use tags and how do you create a basic looking webpage?', 'start': 38.557, 'duration': 3.662}], 'summary': 'Fast-paced html crash course covering unordered lists, ordered lists, header tags, and webpage creation.', 'duration': 25.939, 'max_score': 16.28, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY16280.jpg'}, {'end': 75.438, 'src': 'embed', 'start': 50.345, 'weight': 1, 'content': [{'end': 55.429, 'text': "that's absolutely free if you want to become a web developer or a freelance developer.", 'start': 50.345, 'duration': 5.084}, {'end': 61.552, 'text': 'Now. this training is called Top Three Secrets to Become a Python Freelancer, but it will work perfectly well for you,', 'start': 55.669, 'duration': 5.883}, {'end': 66.594, 'text': "even if you're not a Python freelancer and you wanna become a freelancer as a web developer, okay?", 'start': 61.552, 'duration': 5.042}, {'end': 73.857, 'text': "It has the main principles that you need and it's unbelievable content, and we have made it free for a limited amount of time.", 'start': 66.654, 'duration': 7.203}, {'end': 75.438, 'text': 'So go ahead and click that link.', 'start': 73.917, 'duration': 1.521}], 'summary': 'Free training for web developers and freelancers, applicable beyond python, with limited-time offer.', 'duration': 25.093, 'max_score': 50.345, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY50345.jpg'}], 'start': 0.229, 'title': 'Html5 crash course for beginners', 'summary': 'Covers a fast-paced html5 crash course for beginners, including unorder lists, order lists, header tags, and creating a basic looking webpage, with a free one-hour training included for those interested in becoming a web or freelance developer.', 'chapters': [{'end': 85.426, 'start': 0.229, 'title': 'Html5 crash course for beginners', 'summary': 'Covers a fast-paced html5 crash course for beginners, including unorder lists, order lists, header tags, and creating a basic looking webpage, with a free one-hour training included for those interested in becoming a web or freelance developer.', 'duration': 85.197, 'highlights': ['The chapter offers a fast-paced HTML5 crash course for beginners, covering unorder lists, order lists, header tags, and creating a basic looking webpage.', "A free one-hour training is mentioned for those interested in becoming a web or freelance developer, called 'Top Three Secrets to Become a Python Freelancer'."]}], 'duration': 85.197, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY229.jpg', 'highlights': ['The chapter offers a fast-paced HTML5 crash course for beginners, covering unorder lists, order lists, header tags, and creating a basic looking webpage.', "A free one-hour training is mentioned for those interested in becoming a web or freelance developer, called 'Top Three Secrets to Become a Python Freelancer'."]}, {'end': 748.358, 'segs': [{'end': 179.921, 'src': 'heatmap', 'start': 85.706, 'weight': 0, 'content': [{'end': 89.329, 'text': 'First things first, there are multiple text editors that you can use.', 'start': 85.706, 'duration': 3.623}, {'end': 94.353, 'text': "The one that we recommend is free, and it's also one of the best, so Visual Studio Code.", 'start': 89.369, 'duration': 4.984}, {'end': 96.654, 'text': 'Go ahead and download this.', 'start': 94.873, 'duration': 1.781}, {'end': 99.057, 'text': "whichever version you're on.", 'start': 97.495, 'duration': 1.562}, {'end': 105.504, 'text': "I'm on a Mac, so I'm gonna just download the Mac version and then, as soon as you're done downloading it, just open it up,", 'start': 99.057, 'duration': 6.447}, {'end': 108.408, 'text': 'install it and then open up a new file in it.', 'start': 105.504, 'duration': 2.904}, {'end': 111.892, 'text': 'Okay, once you open up a new file, your screen should look like this.', 'start': 108.488, 'duration': 3.404}, {'end': 115.315, 'text': "We're gonna create a new folder on our desktop.", 'start': 111.912, 'duration': 3.403}, {'end': 128.782, 'text': "I'm gonna call it HTML HTML Crash Course and then, inside of this folder, we're gonna open this folder from our Visual Studio Code.", 'start': 115.315, 'duration': 13.467}, {'end': 130.806, 'text': "okay?. So I'll go click here.", 'start': 128.782, 'duration': 2.024}, {'end': 136.614, 'text': "and we're gonna just select this folder and go ahead and open it.", 'start': 133.232, 'duration': 3.382}, {'end': 138.776, 'text': "Let's create a new file.", 'start': 136.795, 'duration': 1.981}, {'end': 145.441, 'text': "Okay, so let's go back to our Visual Studio code and we are going to create a new file.", 'start': 138.936, 'duration': 6.505}, {'end': 148.463, 'text': "I'm gonna hit this and we'll call it index.html.", 'start': 145.461, 'duration': 3.002}, {'end': 151.005, 'text': 'Now remember, this is important.', 'start': 148.883, 'duration': 2.122}, {'end': 153.707, 'text': "If your cursor doesn't look like mine, don't worry about that.", 'start': 151.525, 'duration': 2.182}, {'end': 156.189, 'text': "Yours will just look like this, how it's supposed to.", 'start': 153.767, 'duration': 2.422}, {'end': 164.733, 'text': "I'm using something called Vim for more advanced users, but again, this is for complete beginners, so we want you to be able to follow along.", 'start': 157.349, 'duration': 7.384}, {'end': 179.921, 'text': "Now I'm just gonna hit save and I'm gonna show you that this file that I just made is actually this file that I just made is gonna be right over here on your computer now,", 'start': 165.153, 'duration': 14.768}], 'summary': 'Recommend using visual studio code for creating html files and folders.', 'duration': 53.07, 'max_score': 85.706, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY85706.jpg'}, {'end': 238.693, 'src': 'embed', 'start': 211.571, 'weight': 1, 'content': [{'end': 217.176, 'text': 'Right, try to stick with using Chrome, because this is gonna be the best for you and the easiest way to go.', 'start': 211.571, 'duration': 5.605}, {'end': 222.46, 'text': "Now, because that's my default browser, that's why this index.html file turns into this.", 'start': 217.936, 'duration': 4.524}, {'end': 224.001, 'text': 'The extension is very important.', 'start': 222.66, 'duration': 1.341}, {'end': 233.288, 'text': "If you're on Windows or in some other computer and it turns it into txt at the end, make sure that you change it to html okay?", 'start': 224.361, 'duration': 8.927}, {'end': 238.693, 'text': "And if you double click it or you open it from your Chrome and it looks like this, then you're good.", 'start': 233.949, 'duration': 4.744}], 'summary': 'Use chrome as default browser for opening index.html files to ensure proper display.', 'duration': 27.122, 'max_score': 211.571, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY211571.jpg'}, {'end': 356.709, 'src': 'embed', 'start': 326.895, 'weight': 3, 'content': [{'end': 333.121, 'text': "So let's go here and if I hit inspect, right, what I'll find out here is that this says h1.", 'start': 326.895, 'duration': 6.226}, {'end': 336.684, 'text': 'So this is actually a heading tag, okay?', 'start': 334.322, 'duration': 2.362}, {'end': 348.846, 'text': 'So going back to my code, if I actually do h1, hit tab and do programming language refresh here, these are the heading tags.', 'start': 337.144, 'duration': 11.702}, {'end': 350.426, 'text': 'This is why theirs is big too.', 'start': 348.866, 'duration': 1.56}, {'end': 354.168, 'text': "Cool? So let's go ahead and remove this.", 'start': 351.247, 'duration': 2.921}, {'end': 356.709, 'text': 'Now we need to give our page a structure.', 'start': 354.708, 'duration': 2.001}], 'summary': 'Demo on using h1 tag for page structure in coding.', 'duration': 29.814, 'max_score': 326.895, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY326895.jpg'}, {'end': 407.098, 'src': 'embed', 'start': 375.482, 'weight': 4, 'content': [{'end': 384.472, 'text': 'For HTML5, this is something you always have to do to make sure that your document is interpreted correctly from the browser.', 'start': 375.482, 'duration': 8.99}, {'end': 389.497, 'text': "So I'm using Chrome, and this will make sure that it's doing it correctly.", 'start': 384.592, 'duration': 4.905}, {'end': 396.062, 'text': 'Then other tags that we actually need are things like a head tag and a body tag.', 'start': 390.017, 'duration': 6.045}, {'end': 407.098, 'text': 'All the code you generally write goes in your body tag like this.', 'start': 397.691, 'duration': 9.407}], 'summary': 'Html5 requires correct interpretation for browser display using tags like head and body.', 'duration': 31.616, 'max_score': 375.482, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY375482.jpg'}, {'end': 617.064, 'src': 'embed', 'start': 564.617, 'weight': 5, 'content': [{'end': 568.58, 'text': "Now, there's something called comments in HTML.", 'start': 564.617, 'duration': 3.963}, {'end': 573.463, 'text': 'Comments are First of all, HTML is not a programming language.', 'start': 568.64, 'duration': 4.823}, {'end': 575.183, 'text': "It's a markup language.", 'start': 573.523, 'duration': 1.66}, {'end': 580.906, 'text': 'But every programming language or most languages in general have this ability to write comments.', 'start': 576.264, 'duration': 4.642}, {'end': 584.948, 'text': "Comments are not for the computer to interpret, they're for the human to read.", 'start': 580.966, 'duration': 3.982}, {'end': 589.351, 'text': 'So we can add comments by doing this.', 'start': 586.169, 'duration': 3.182}, {'end': 593.633, 'text': 'And I can say header tags.', 'start': 591.031, 'duration': 2.602}, {'end': 601.024, 'text': "If I go in here and refresh, it doesn't change anything on the page, but it definitely puts them here.", 'start': 595.478, 'duration': 5.546}, {'end': 604.188, 'text': 'Now I can show you paragraph tags.', 'start': 601.044, 'duration': 3.144}, {'end': 611.22, 'text': "Okay, they're also known as p tags.", 'start': 609.258, 'duration': 1.962}, {'end': 613.621, 'text': 'And what they allow you to do is just write stuff.', 'start': 611.66, 'duration': 1.961}, {'end': 617.064, 'text': "So let's say I wanted to write things, right, and I wanted to break them apart.", 'start': 614.002, 'duration': 3.062}], 'summary': 'Html allows adding comments for humans to read, not for computer interpretation. it involves using tags for headers and paragraphs.', 'duration': 52.447, 'max_score': 564.617, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY564617.jpg'}], 'start': 85.706, 'title': 'Setting up visual studio code for html and understanding html structure and tags', 'summary': 'Guides beginners on setting up visual studio code for html, emphasizing chrome as the default browser. it also explains the structure and usage of html tags, including their impact on webpage formatting and the significance of comments in html.', 'chapters': [{'end': 272.199, 'start': 85.706, 'title': 'Setting up visual studio code for html', 'summary': 'Guides beginners on setting up visual studio code for html, creating a new folder, opening it in visual studio code, and ensuring the correct file extension for html files. it emphasizes the importance of using chrome as the default browser for ease of use.', 'duration': 186.493, 'highlights': ['Visual Studio Code is recommended for HTML development as it is free and one of the best text editors available. The chapter recommends Visual Studio Code for HTML development, highlighting its free availability and high quality.', "Creating a new folder named 'HTML Crash Course' on the desktop and opening it in Visual Studio Code. The chapter instructs to create a new folder named 'HTML Crash Course' on the desktop and open it in Visual Studio Code for further development.", 'Emphasizing the importance of using Chrome as the default browser for HTML development. The chapter stresses the importance of using Chrome as the default browser for HTML development due to its ease of use and best performance.']}, {'end': 748.358, 'start': 272.199, 'title': 'Html structure and tags', 'summary': 'Explains the structure and usage of html tags, such as header tags, title tags, body tags, and paragraph tags, and their impact on webpage formatting, as well as the significance of comments in html and their application in webpage development.', 'duration': 476.159, 'highlights': ['Explanation of header tags and their impact on webpage structure and formatting. The chapter explains the usage of header tags in HTML, illustrating their impact on webpage layout and appearance, with examples of different header tag levels.', 'Importance of title and body tags in HTML for webpage content and structure. The significance of title and body tags in HTML is highlighted, emphasizing their role in defining webpage content and structure, demonstrated through practical examples.', 'Demonstration of paragraph tags and their application in organizing and formatting webpage content. The chapter showcases the application of paragraph tags in HTML, demonstrating their role in organizing and formatting webpage content, with examples of creating separate paragraphs.', 'Significance of comments in HTML for explanatory purposes and their non-interpretation by the computer. The chapter emphasizes the importance of comments in HTML for explanatory purposes, clarifying that they are not interpreted by the computer, but are intended for human understanding.']}], 'duration': 662.652, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY85706.jpg', 'highlights': ['Visual Studio Code is recommended for HTML development as it is free and one of the best text editors available.', 'Emphasizing the importance of using Chrome as the default browser for HTML development.', "Creating a new folder named 'HTML Crash Course' on the desktop and opening it in Visual Studio Code.", 'Explanation of header tags and their impact on webpage structure and formatting.', 'Importance of title and body tags in HTML for webpage content and structure.', 'Demonstration of paragraph tags and their application in organizing and formatting webpage content.', 'Significance of comments in HTML for explanatory purposes and their non-interpretation by the computer.']}, {'end': 1323.441, 'segs': [{'end': 773.145, 'src': 'embed', 'start': 748.458, 'weight': 0, 'content': [{'end': 757.52, 'text': 'Now you can also do lorem and hit autocomplete, and it basically creates this lorem ipsum, which just means dummy text.', 'start': 748.458, 'duration': 9.062}, {'end': 761.061, 'text': "okay?, It's a fancy weird way of saying just dummy text.", 'start': 757.52, 'duration': 3.541}, {'end': 768.383, 'text': "Most text editors probably have this capability, so if you do lorem and you hit tab, it'll autocomplete it.", 'start': 761.961, 'duration': 6.422}, {'end': 773.145, 'text': 'But what we wanna do is we wanna make sure that we put P tags around it.', 'start': 769.642, 'duration': 3.503}], 'summary': 'Autocompletion feature generates dummy text using lorem ipsum, enclosed in p tags.', 'duration': 24.687, 'max_score': 748.458, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY748458.jpg'}, {'end': 896.252, 'src': 'heatmap', 'start': 846.351, 'weight': 1, 'content': [{'end': 848.071, 'text': "Okay, so let's take this video.", 'start': 846.351, 'duration': 1.72}, {'end': 850.772, 'text': "All right, so let's now go to Share.", 'start': 848.251, 'duration': 2.521}, {'end': 853.033, 'text': "So I'll click Share right over here.", 'start': 851.252, 'duration': 1.781}, {'end': 861.335, 'text': 'And inside of Share, click Embed on a YouTube video, copy this code, all right? You can also hit the button Copy here.', 'start': 853.713, 'duration': 7.622}, {'end': 863.975, 'text': 'And now just get out of here.', 'start': 861.995, 'duration': 1.98}, {'end': 866.176, 'text': "You don't need to be here anymore, okay?", 'start': 864.015, 'duration': 2.161}, {'end': 869.317, 'text': 'And you can paste this code all right?', 'start': 866.936, 'duration': 2.381}, {'end': 875.52, 'text': "Now, if I refresh, you'll see that that video is actually embedded into your website.", 'start': 869.457, 'duration': 6.063}, {'end': 880.364, 'text': "Now, in this tutorial, we're not gonna be teaching you how to host this website online yet,", 'start': 875.8, 'duration': 4.564}, {'end': 891.232, 'text': 'but we wanna show you how to make a useful HTML website that people could actually use and that you would even wanna use.', 'start': 880.364, 'duration': 10.868}, {'end': 896.252, 'text': 'So now this is using something called the iframe tag here, right?', 'start': 892.99, 'duration': 3.262}], 'summary': 'Tutorial on embedding a youtube video using iframe tag for a useful html website.', 'duration': 49.901, 'max_score': 846.351, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY846351.jpg'}, {'end': 896.252, 'src': 'embed', 'start': 869.457, 'weight': 1, 'content': [{'end': 875.52, 'text': "Now, if I refresh, you'll see that that video is actually embedded into your website.", 'start': 869.457, 'duration': 6.063}, {'end': 880.364, 'text': "Now, in this tutorial, we're not gonna be teaching you how to host this website online yet,", 'start': 875.8, 'duration': 4.564}, {'end': 891.232, 'text': 'but we wanna show you how to make a useful HTML website that people could actually use and that you would even wanna use.', 'start': 880.364, 'duration': 10.868}, {'end': 896.252, 'text': 'So now this is using something called the iframe tag here, right?', 'start': 892.99, 'duration': 3.262}], 'summary': 'Tutorial demonstrates embedding video using iframe tag for a useful html website.', 'duration': 26.795, 'max_score': 869.457, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY869457.jpg'}, {'end': 972.497, 'src': 'embed', 'start': 936.176, 'weight': 3, 'content': [{'end': 943.339, 'text': 'So, for example, if I go again to YouTube, that video right, you can actually change code on the fly right?', 'start': 936.176, 'duration': 7.163}, {'end': 945.541, 'text': "And now what I can do is, let's say,", 'start': 943.84, 'duration': 1.701}, {'end': 954.465, 'text': 'I do hit inspect element and I highlight it and I hit inspect element right right over here and I can click into it.', 'start': 945.541, 'duration': 8.924}, {'end': 966.413, 'text': 'It says Python full course for beginners, and I can say, JavaScript crash course by Aaron.', 'start': 954.505, 'duration': 11.908}, {'end': 972.497, 'text': "And all of a sudden it's changed.", 'start': 970.236, 'duration': 2.261}], 'summary': 'The video title on youtube can be modified using inspect element, showcasing its dynamic nature.', 'duration': 36.321, 'max_score': 936.176, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY936176.jpg'}, {'end': 1091.302, 'src': 'embed', 'start': 1063.209, 'weight': 4, 'content': [{'end': 1068.133, 'text': 'You wanna be able to tinker these things and change them, and then you keep improving your skill set that way.', 'start': 1063.209, 'duration': 4.924}, {'end': 1071.849, 'text': "All right, let's continue.", 'start': 1069.508, 'duration': 2.341}, {'end': 1078.013, 'text': 'So if you see this width, try changing it and do 300 and come here and refresh and see what happens.', 'start': 1072.55, 'duration': 5.463}, {'end': 1083.776, 'text': "Oh, it changed, right? Let's go here and change the height and go here and refresh.", 'start': 1078.353, 'duration': 5.423}, {'end': 1086.257, 'text': 'Oh, now the height is bigger.', 'start': 1084.196, 'duration': 2.061}, {'end': 1091.302, 'text': "And this is how you're gonna get a lot better by constantly practicing.", 'start': 1087.458, 'duration': 3.844}], 'summary': 'Constantly practice to improve skills by tinkering and making changes to enhance learning and development.', 'duration': 28.093, 'max_score': 1063.209, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY1063209.jpg'}, {'end': 1289.487, 'src': 'embed', 'start': 1255.635, 'weight': 5, 'content': [{'end': 1257.475, 'text': 'you can also pass it attributes.', 'start': 1255.635, 'duration': 1.84}, {'end': 1259.876, 'text': "So here we'll pass it for alt.", 'start': 1257.855, 'duration': 2.021}, {'end': 1265.217, 'text': 'Well, alt is mostly useful for one, the computers and the crawlers.', 'start': 1260.616, 'duration': 4.601}, {'end': 1270.1, 'text': "For example, if the computer comes here and it doesn't know what the image is,", 'start': 1265.637, 'duration': 4.463}, {'end': 1274.882, 'text': 'having an alternative description will tell the computer what it actually is.', 'start': 1270.1, 'duration': 4.782}, {'end': 1282.084, 'text': "And another thing it's useful for, I don't know if you know this, it's useful for if there's somebody who's blind and they're on your website.", 'start': 1274.902, 'duration': 7.182}, {'end': 1289.487, 'text': 'Yeah Yeah, you know a lot of blind people actually use websites and use computers.', 'start': 1284.405, 'duration': 5.082}], 'summary': 'Adding alt attributes to images is useful for computers and blind users.', 'duration': 33.852, 'max_score': 1255.635, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY1255635.jpg'}], 'start': 748.458, 'title': 'Using html and manipulating elements', 'summary': 'Covers using lorem ipsum for dummy text, embedding youtube videos using html, and manipulating html elements and attributes to improve coding skills, with a focus on autocomplete functionality and iframe tags, as well as changing video titles and views and adding images.', 'chapters': [{'end': 935.716, 'start': 748.458, 'title': 'Using html for dummy text and video embedding', 'summary': 'Covers using lorem ipsum for dummy text and embedding youtube videos using html, with a focus on autocomplete functionality and iframe tags.', 'duration': 187.258, 'highlights': ["The chapter emphasizes using 'lorem ipsum' for generating dummy text and utilizing autocomplete functionality by typing 'lorem' and hitting tab to auto complete, with most text editors having this capability.", 'It also details the process of embedding YouTube videos using HTML, particularly by utilizing the iframe tag and discussing attributes like width and height, and the necessity of starting and ending tags for elements like P and H1.', 'Furthermore, the chapter provides a practical example of embedding a YouTube video by obtaining the embed code from YouTube and pasting it into the HTML, demonstrating the process of hosting videos on a website using HTML.']}, {'end': 1323.441, 'start': 936.176, 'title': 'Playing with html code and elements', 'summary': 'Demonstrates how to manipulate html elements and attributes, such as changing video titles and views, practicing with code, and adding images, to improve coding skills and understanding.', 'duration': 387.265, 'highlights': ["You can change video titles and views on-the-fly using inspect element, like changing a video from 'Python full course for beginners' to 'JavaScript crash course by Aaron' and altering the views from 18,000 to 2,387,000, showcasing the ability to manipulate HTML elements. Demonstrates the process of using inspect element to change video titles and views, indicating the practical application of manipulating HTML elements.", 'Practicing with code and constantly tinkering with HTML elements, such as changing the width and height attributes, is emphasized as a means to improve coding skills and understanding, as demonstrated by the ability to alter the width and height of an element and witnessing the changes upon refreshing the page. Emphasizes the importance of practice and experimentation with HTML code to enhance coding skills, illustrated by the ability to modify and witness immediate changes in element attributes.', "The process of adding images to a webpage using HTML, including sourcing online images and incorporating attributes like 'alt' for accessibility and description, is explained, highlighting the practical application of adding images to a webpage and the importance of accessibility for users, including those with disabilities. Explains the process of adding images to a webpage using HTML, emphasizing the importance of accessibility and description through attributes like 'alt' for users, including those with disabilities, and practical application of sourcing and incorporating images."]}], 'duration': 574.983, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY748458.jpg', 'highlights': ["The chapter emphasizes using 'lorem ipsum' for generating dummy text and utilizing autocomplete functionality by typing 'lorem' and hitting tab to auto complete, with most text editors having this capability.", 'It also details the process of embedding YouTube videos using HTML, particularly by utilizing the iframe tag and discussing attributes like width and height, and the necessity of starting and ending tags for elements like P and H1.', 'Furthermore, the chapter provides a practical example of embedding a YouTube video by obtaining the embed code from YouTube and pasting it into the HTML, demonstrating the process of hosting videos on a website using HTML.', "You can change video titles and views on-the-fly using inspect element, like changing a video from 'Python full course for beginners' to 'JavaScript crash course by Aaron' and altering the views from 18,000 to 2,387,000, showcasing the ability to manipulate HTML elements.", 'Practicing with code and constantly tinkering with HTML elements, such as changing the width and height attributes, is emphasized as a means to improve coding skills and understanding, as demonstrated by the ability to alter the width and height of an element and witnessing the changes upon refreshing the page.', "The process of adding images to a webpage using HTML, including sourcing online images and incorporating attributes like 'alt' for accessibility and description, is explained, highlighting the practical application of adding images to a webpage and the importance of accessibility for users, including those with disabilities."]}, {'end': 1861.34, 'segs': [{'end': 1579.366, 'src': 'heatmap', 'start': 1349.642, 'weight': 1, 'content': [{'end': 1354.044, 'text': 'So there it made the height a little bit, Yeah, and it kind of skewed and warped the image a little bit.', 'start': 1349.642, 'duration': 4.402}, {'end': 1365.929, 'text': "Yep So this is how you make images, right? So I'll put image tag, because images are useful.", 'start': 1354.204, 'duration': 11.725}, {'end': 1368.29, 'text': 'Now some other things you can do that are useful.', 'start': 1365.989, 'duration': 2.301}, {'end': 1370.992, 'text': 'is what if you need to make something in link?', 'start': 1368.29, 'duration': 2.702}, {'end': 1374.273, 'text': 'So if it says Aaron and if it says Qazi?', 'start': 1371.712, 'duration': 2.561}, {'end': 1380.116, 'text': "well, what if it linked to Aaron's Instagram profile or Qazi's Instagram profile?", 'start': 1374.273, 'duration': 5.843}, {'end': 1384.054, 'text': "So let's go here and let's go Instagram.com.", 'start': 1381.232, 'duration': 2.822}, {'end': 1385.334, 'text': 'slash Clever, Qazi.', 'start': 1384.054, 'duration': 1.28}, {'end': 1390.537, 'text': 'And if we actually go here, this is my Instagram, correct?', 'start': 1386.415, 'duration': 4.122}, {'end': 1399.642, 'text': "So now I'm gonna grab this URL, copy it X out of this, and what I'll do is I'll put Qazi inside of something called an A tag.", 'start': 1391.017, 'duration': 8.625}, {'end': 1404.424, 'text': "Okay, so I'll try it here, and I'll do A and hit Tab.", 'start': 1400.482, 'duration': 3.942}, {'end': 1405.524, 'text': "It'll auto-complete it.", 'start': 1404.644, 'duration': 0.88}, {'end': 1412.007, 'text': "It's asking for a link, so I'll link it to Instagram.com slash CleverKazi.", 'start': 1406.425, 'duration': 5.582}, {'end': 1417.71, 'text': "Then I'll put the text here that says okay, so first of all, watch what happens, right?", 'start': 1412.468, 'duration': 5.242}, {'end': 1422.592, 'text': "If I hit Save and I go to the website, okay, I'm just gonna delete the lorem ipsum because it's getting annoying.", 'start': 1417.77, 'duration': 4.822}, {'end': 1424.213, 'text': 'It keeps asking about the translation.', 'start': 1422.652, 'duration': 1.561}, {'end': 1425.875, 'text': 'There we go.', 'start': 1425.435, 'duration': 0.44}, {'end': 1427.636, 'text': "So, I'm gonna go here.", 'start': 1426.595, 'duration': 1.041}, {'end': 1432.017, 'text': "Now, can you find on the screen where it's showing the link? No.", 'start': 1427.856, 'duration': 4.161}, {'end': 1433.377, 'text': "No You can't.", 'start': 1432.057, 'duration': 1.32}, {'end': 1438.698, 'text': "Well, the reason why it's not showing is because you have to add text here.", 'start': 1433.617, 'duration': 5.081}, {'end': 1440.879, 'text': "Yeah, that's the text that actually displays.", 'start': 1439.238, 'duration': 1.641}, {'end': 1442.739, 'text': 'Displays, exactly, displays.', 'start': 1440.919, 'duration': 1.82}, {'end': 1447.14, 'text': "So now, when we add the text, I'll say Kazi's profile.", 'start': 1442.799, 'duration': 4.341}, {'end': 1449.421, 'text': 'Save and hit refresh.', 'start': 1448.201, 'duration': 1.22}, {'end': 1451.381, 'text': "Well, you have Kazi's profile.", 'start': 1450.021, 'duration': 1.36}, {'end': 1455.503, 'text': "Now, if I click this, it'll actually take me to it.", 'start': 1451.882, 'duration': 3.621}, {'end': 1458.704, 'text': 'Yeah, to the URL that we put in the href, which is just a reference.', 'start': 1455.803, 'duration': 2.901}, {'end': 1462.286, 'text': "It's like, where is this text going to refer to? Yep.", 'start': 1458.924, 'duration': 3.362}, {'end': 1469.589, 'text': "Now, what if we don't want the people who are on our website to leave from our website? Instead, we want them to instead open up a new tab.", 'start': 1462.806, 'duration': 6.783}, {'end': 1472.59, 'text': 'Okay, well, we do something called.', 'start': 1470.189, 'duration': 2.401}, {'end': 1479.715, 'text': 'we pass in an attribute called target and we say go to a blank, all right?', 'start': 1472.59, 'duration': 7.125}, {'end': 1482.137, 'text': 'Which is kind of a weird way of doing this.', 'start': 1480.095, 'duration': 2.042}, {'end': 1487.982, 'text': "It should be something like target new tab instead of underscore blank, but you'll see what it does.", 'start': 1482.197, 'duration': 5.785}, {'end': 1496.49, 'text': 'If I hit it now, I open up a new tab, rather than it going to a completely new website, okay?', 'start': 1488.042, 'duration': 8.448}, {'end': 1506.211, 'text': 'Okay, now what if I wanna make this Qazi a link which is inside of a p tag??', 'start': 1501.627, 'duration': 4.584}, {'end': 1507.011, 'text': 'Well, you can do that.', 'start': 1506.251, 'duration': 0.76}, {'end': 1510.534, 'text': 'You can nest tags however deeply you want.', 'start': 1507.031, 'duration': 3.503}, {'end': 1515.738, 'text': 'So I can actually go a tag here.', 'start': 1511.095, 'duration': 4.643}, {'end': 1528.589, 'text': 'I can say href equals and I can do the same Instagram link, right? I can go like this and then in between here I can put Qazi.', 'start': 1515.959, 'duration': 12.63}, {'end': 1537.267, 'text': 'Where did we go? There.', 'start': 1533.243, 'duration': 4.024}, {'end': 1538.348, 'text': 'All right.', 'start': 1537.987, 'duration': 0.361}, {'end': 1540.009, 'text': 'So watch what happens now.', 'start': 1538.888, 'duration': 1.121}, {'end': 1542.371, 'text': 'When I refresh, Qazi is now a link.', 'start': 1540.049, 'duration': 2.322}, {'end': 1546.395, 'text': 'If I click it, it opens the Instagram profile.', 'start': 1542.912, 'duration': 3.483}, {'end': 1550.418, 'text': 'All right, and I can do the same thing.', 'start': 1548.917, 'duration': 1.501}, {'end': 1551.439, 'text': 'I can add that.', 'start': 1550.478, 'duration': 0.961}, {'end': 1554.041, 'text': 'Target Yep.', 'start': 1552.78, 'duration': 1.261}, {'end': 1555.002, 'text': 'New tab.', 'start': 1554.582, 'duration': 0.42}, {'end': 1559.446, 'text': 'Target statement like that.', 'start': 1557.485, 'duration': 1.961}, {'end': 1565.195, 'text': 'Oops Done.', 'start': 1559.827, 'duration': 5.368}, {'end': 1575.122, 'text': "If I go refresh, now if I hit Kazi, it'll open up a new tab rather than redirecting the website.", 'start': 1568.017, 'duration': 7.105}, {'end': 1579.366, 'text': "And I can remove this now where it said Kazi's profile.", 'start': 1575.223, 'duration': 4.143}], 'summary': 'Demonstrating how to create links and open them in new tabs', 'duration': 229.724, 'max_score': 1349.642, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY1349642.jpg'}, {'end': 1487.982, 'src': 'embed', 'start': 1455.803, 'weight': 2, 'content': [{'end': 1458.704, 'text': 'Yeah, to the URL that we put in the href, which is just a reference.', 'start': 1455.803, 'duration': 2.901}, {'end': 1462.286, 'text': "It's like, where is this text going to refer to? Yep.", 'start': 1458.924, 'duration': 3.362}, {'end': 1469.589, 'text': "Now, what if we don't want the people who are on our website to leave from our website? Instead, we want them to instead open up a new tab.", 'start': 1462.806, 'duration': 6.783}, {'end': 1472.59, 'text': 'Okay, well, we do something called.', 'start': 1470.189, 'duration': 2.401}, {'end': 1479.715, 'text': 'we pass in an attribute called target and we say go to a blank, all right?', 'start': 1472.59, 'duration': 7.125}, {'end': 1482.137, 'text': 'Which is kind of a weird way of doing this.', 'start': 1480.095, 'duration': 2.042}, {'end': 1487.982, 'text': "It should be something like target new tab instead of underscore blank, but you'll see what it does.", 'start': 1482.197, 'duration': 5.785}], 'summary': 'Using the target attribute to open links in a new tab instead of leaving the website.', 'duration': 32.179, 'max_score': 1455.803, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY1455803.jpg'}, {'end': 1597.779, 'src': 'embed', 'start': 1557.485, 'weight': 0, 'content': [{'end': 1559.446, 'text': 'Target statement like that.', 'start': 1557.485, 'duration': 1.961}, {'end': 1565.195, 'text': 'Oops Done.', 'start': 1559.827, 'duration': 5.368}, {'end': 1575.122, 'text': "If I go refresh, now if I hit Kazi, it'll open up a new tab rather than redirecting the website.", 'start': 1568.017, 'duration': 7.105}, {'end': 1579.366, 'text': "And I can remove this now where it said Kazi's profile.", 'start': 1575.223, 'duration': 4.143}, {'end': 1585.75, 'text': 'OK So we can do header tags.', 'start': 1583.128, 'duration': 2.622}, {'end': 1587.111, 'text': 'We can do paragraph tags.', 'start': 1585.83, 'duration': 1.281}, {'end': 1588.392, 'text': 'We can do images.', 'start': 1587.251, 'duration': 1.141}, {'end': 1592.155, 'text': 'You just learned how to actually embed a YouTube video.', 'start': 1589.313, 'duration': 2.842}, {'end': 1597.779, 'text': "What else can we do with HTML? There's a lot.", 'start': 1593.857, 'duration': 3.922}], 'summary': 'Html basics covered: header, paragraph, images, and embedding a youtube video.', 'duration': 40.294, 'max_score': 1557.485, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY1557485.jpg'}, {'end': 1657.743, 'src': 'embed', 'start': 1626.111, 'weight': 3, 'content': [{'end': 1633.118, 'text': "So what we're going to do is we're going to say UL and then inside of this UL tag, we want to do list item like this.", 'start': 1626.111, 'duration': 7.007}, {'end': 1642.187, 'text': 'And I will say JavaScript and we will say Python.', 'start': 1634.8, 'duration': 7.387}, {'end': 1645.411, 'text': 'Python, JavaScript.', 'start': 1644.53, 'duration': 0.881}, {'end': 1650.038, 'text': "And then we'll say Java and then PHP or something.", 'start': 1646.155, 'duration': 3.883}, {'end': 1657.743, 'text': "Right And if I hit refresh, you'll see, we have an unordered list at the bottom, which is actually pretty difficult to see.", 'start': 1650.078, 'duration': 7.665}], 'summary': 'Demonstration of creating an unordered list with javascript, python, java, and php.', 'duration': 31.632, 'max_score': 1626.111, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY1626111.jpg'}], 'start': 1323.521, 'title': 'Html basics and tags', 'summary': 'Covers the basics of html tags, including image tags, link tags, nested tags, header tags, and paragraph tags with examples and explanations, emphasizing their importance for web development and web scraping.', 'chapters': [{'end': 1861.34, 'start': 1323.521, 'title': 'Html basics and tags', 'summary': 'Covers the basics of html tags, including image tags, link tags, nested tags, header tags, paragraph tags, and creating unordered and ordered lists with examples and explanations of their usage, emphasizing their importance for web development and web scraping.', 'duration': 537.819, 'highlights': ['Explaining the usage of image tags and adjusting image dimensions using width and height attributes. The speaker explains how to use image tags and adjust the dimensions of images by adding the width and height attributes, demonstrating the change in size with specific values like 400 for width and 300 for height.', 'Demonstrating the creation and linking of text to external URLs using anchor tags with the href attribute. The speaker demonstrates how to create links to external URLs using anchor tags and the href attribute, exemplifying the linking of text to Instagram profiles and the method to open links in new tabs using the target attribute.', 'Showing the nesting of tags and the creation of unordered and ordered lists with examples of programming languages. The speaker showcases the nesting of tags by demonstrating the creation of unordered and ordered lists, providing examples of programming languages within the lists and highlighting the importance of understanding HTML for web scraping.']}], 'duration': 537.819, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY1323521.jpg', 'highlights': ['Covers basics of html tags, including image, link, nested, header, and paragraph tags with examples and explanations.', 'Demonstrates usage of image tags and adjusting dimensions using width and height attributes.', 'Explains creation and linking of text to external URLs using anchor tags with href attribute.', 'Shows nesting of tags and creation of unordered and ordered lists with examples of programming languages.']}, {'end': 2431.168, 'segs': [{'end': 1918.319, 'src': 'embed', 'start': 1861.34, 'weight': 0, 'content': [{'end': 1870.798, 'text': 'okay, uh, another other things that are important to learn about are well, if you wanted to have, like you know,', 'start': 1861.34, 'duration': 9.458}, {'end': 1876.703, 'text': 'if somebody could put in their phone number on your website or their email on your website or their name on your website,', 'start': 1870.798, 'duration': 5.905}, {'end': 1881.247, 'text': 'or maybe what item you know you wanted to take a quiz.', 'start': 1876.703, 'duration': 4.544}, {'end': 1886.813, 'text': 'maybe how do you actually ask for those inputs? Yeah.', 'start': 1881.247, 'duration': 5.566}, {'end': 1895.638, 'text': "Okay, so when you have a form on a page, where does the form take you? That's the action.", 'start': 1887.631, 'duration': 8.007}, {'end': 1903.405, 'text': 'For example, if you go on Facebook.com and you hit login, you hit that submit button.', 'start': 1896.178, 'duration': 7.227}, {'end': 1906.828, 'text': 'well, it takes you to the Facebook homepage, correct?', 'start': 1903.405, 'duration': 3.423}, {'end': 1908.169, 'text': "That's the action.", 'start': 1907.348, 'duration': 0.821}, {'end': 1918.319, 'text': "So action is, for example, Facebook.com, all right? Or, That's the action.", 'start': 1908.409, 'duration': 9.91}], 'summary': 'Learning to create forms for gathering user information and determining form actions is important for web development.', 'duration': 56.979, 'max_score': 1861.34, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY1861340.jpg'}, {'end': 1990.01, 'src': 'embed', 'start': 1963.43, 'weight': 1, 'content': [{'end': 1970.712, 'text': "I mean I know it's a little convoluted how it's written, but so here, if you wrote slash,", 'start': 1963.43, 'duration': 7.282}, {'end': 1977.615, 'text': 'that would be the equivalent of the action being facebook.com or yourwebsite.com.', 'start': 1970.712, 'duration': 6.903}, {'end': 1981.776, 'text': 'Okay, then we have something called method.', 'start': 1979.315, 'duration': 2.461}, {'end': 1990.01, 'text': 'And method, well, what that means is you can either have a get method or a post method.', 'start': 1983.243, 'duration': 6.767}], 'summary': 'Explanation of url structure with examples, including methods like get and post.', 'duration': 26.58, 'max_score': 1963.43, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY1963430.jpg'}, {'end': 2330.564, 'src': 'embed', 'start': 2235.217, 'weight': 3, 'content': [{'end': 2237.778, 'text': "And for type, we're actually going to change it to email.", 'start': 2235.217, 'duration': 2.561}, {'end': 2247.945, 'text': "Now if I hit refresh, you'll see there's email here, and we got that.", 'start': 2241.263, 'duration': 6.682}, {'end': 2259.608, 'text': "Another thing we wanna do is let's use div tags, because these are pretty important, and let's start putting things into divs,", 'start': 2248.805, 'duration': 10.803}, {'end': 2263.409, 'text': "because what you'll see is they'll start organizing them in a nicer way.", 'start': 2259.608, 'duration': 3.801}, {'end': 2268.29, 'text': "So we'll put that one into div, and then we'll do the same thing here.", 'start': 2264.049, 'duration': 4.241}, {'end': 2275.361, 'text': 'by refresh, okay.', 'start': 2273.22, 'duration': 2.141}, {'end': 2289.607, 'text': "There, so I have name, I have email, and I have them formatted in a correct way, and they're under the form tag, so that's the important part.", 'start': 2277.482, 'duration': 12.125}, {'end': 2299.584, 'text': "The reason why we created a type called email is it's built into HTML and this adds in email validation.", 'start': 2292.299, 'duration': 7.285}, {'end': 2308.309, 'text': "So if you're typing in stuff and you're not typing in the correct email, it'll eventually tell you and it'll give you an error.", 'start': 2300.244, 'duration': 8.065}, {'end': 2311.031, 'text': "if you type in the wrong emails, it won't let you submit the form.", 'start': 2308.309, 'duration': 2.722}, {'end': 2316.634, 'text': 'And then last thing we need is a submit button.', 'start': 2313.172, 'duration': 3.462}, {'end': 2323.319, 'text': "All right, so we can have just any kind of button or we can, let's go like this.", 'start': 2317.115, 'duration': 6.204}, {'end': 2330.564, 'text': 'We can do input and do submit and we do label.', 'start': 2324.68, 'duration': 5.884}], 'summary': 'Changing input type to email for built-in validation and adding submit button.', 'duration': 95.347, 'max_score': 2235.217, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY2235217.jpg'}], 'start': 1861.34, 'title': 'Html form elements and methods', 'summary': 'Explains html form elements and methods, covering actions and methods for handling user input, such as get and post methods, as well as the equivalent urls, with practical examples and comparisons with popular websites. it also covers the process of creating html form inputs and labels, including the use of div tags for organizing and the built-in email validation feature.', 'chapters': [{'end': 2064.253, 'start': 1861.34, 'title': 'Html form elements and methods', 'summary': 'Explains the html form elements and methods, covering actions and methods for handling user input, such as get and post methods, as well as the equivalent urls, with emphasis on practical examples and comparisons with popular websites.', 'duration': 202.913, 'highlights': ['The chapter emphasizes the importance of learning about HTML form elements, including gathering user input such as phone numbers, emails, names, and quizzes. The chapter highlights the significance of learning about HTML form elements for gathering various user inputs, including phone numbers, emails, names, and quizzes.', 'The explanation covers the actions and methods for handling user input, including the use of get and post methods, and provides practical examples of equivalent URLs like Facebook.com. The explanation covers actions and methods for handling user input, such as the use of get and post methods, and provides practical examples of equivalent URLs, like Facebook.com.', 'The chapter provides practical examples and comparisons with popular websites, such as Facebook, to illustrate the concepts of actions and methods for handling user input. The chapter offers practical examples and comparisons with popular websites, such as Facebook, to illustrate the concepts of actions and methods for handling user input.']}, {'end': 2431.168, 'start': 2064.612, 'title': 'Html form input and labeling', 'summary': 'Covers the process of creating html form inputs and labels, including the use of div tags for organizing, and the built-in email validation feature, leading to better understanding and implementation of form elements.', 'duration': 366.556, 'highlights': ["The reason for creating a type called email is it's built into HTML and adds in email validation, preventing submission of incorrect email formats. HTML has a built-in email validation feature for the input type 'email', which prevents submission of incorrect email formats, improving data accuracy and user experience.", 'Demonstrates the use of div tags for organizing form elements, improving the visual presentation and organization of the form. The usage of div tags is demonstrated to organize form elements, enhancing the visual presentation and organization of the form for improved user experience.', 'Detailed explanation of creating form inputs and labels, including the process of changing input type to email for email validation and modification of submit button text. The transcript provides a detailed explanation of creating form inputs and labels, including the process of incorporating email validation by changing input types, and modifying the text of the submit button for customization.']}], 'duration': 569.828, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY1861340.jpg', 'highlights': ['The chapter emphasizes the importance of learning about HTML form elements, including gathering user input such as phone numbers, emails, names, and quizzes.', 'The explanation covers the actions and methods for handling user input, including the use of get and post methods, and provides practical examples of equivalent URLs like Facebook.com.', 'The chapter provides practical examples and comparisons with popular websites, such as Facebook, to illustrate the concepts of actions and methods for handling user input.', "HTML has a built-in email validation feature for the input type 'email', which prevents submission of incorrect email formats, improving data accuracy and user experience.", 'The usage of div tags is demonstrated to organize form elements, enhancing the visual presentation and organization of the form for improved user experience.', 'The transcript provides a detailed explanation of creating form inputs and labels, including the process of incorporating email validation by changing input types, and modifying the text of the submit button for customization.']}, {'end': 2844.707, 'segs': [{'end': 2524.297, 'src': 'embed', 'start': 2438.814, 'weight': 0, 'content': [{'end': 2446.8, 'text': 'What are other useful things for us to be able to use? Well, there are a few things that we can also add to forms.', 'start': 2438.814, 'duration': 7.986}, {'end': 2461.807, 'text': 'We can add things that allow us to select, right? And we can also add things that, allow us to create tables.', 'start': 2446.88, 'duration': 14.927}, {'end': 2467.748, 'text': "So let's go ahead and create a table.", 'start': 2463.007, 'duration': 4.741}, {'end': 2478.471, 'text': "And table needs two things, it needs a head, so we're gonna leave that here, and then it needs a table body.", 'start': 2470.849, 'duration': 7.622}, {'end': 2485.09, 'text': "So inside the table head, we're gonna create a row.", 'start': 2480.506, 'duration': 4.584}, {'end': 2489.373, 'text': "And inside of that row, we're gonna create a cell.", 'start': 2485.71, 'duration': 3.663}, {'end': 2505.478, 'text': "And this, we're gonna call it, we can call it, what should we call it? It should be th, right? Title header, not td.", 'start': 2491.595, 'duration': 13.883}, {'end': 2506.719, 'text': "Oh yeah, you're right.", 'start': 2506.018, 'duration': 0.701}, {'end': 2514.367, 'text': "So th, what should we call it? Let's just put age or name, email, age.", 'start': 2507.139, 'duration': 7.228}, {'end': 2521.814, 'text': 'Name, email, age.', 'start': 2515.268, 'duration': 6.546}, {'end': 2522.915, 'text': 'Yep And boom, look at this.', 'start': 2521.834, 'duration': 1.081}, {'end': 2524.297, 'text': 'It shows up right over here.', 'start': 2523.076, 'duration': 1.221}], 'summary': 'Demonstrating adding elements to forms, such as tables and table cells, for better user interaction.', 'duration': 85.483, 'max_score': 2438.814, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY2438814.jpg'}, {'end': 2593.969, 'src': 'embed', 'start': 2560.067, 'weight': 1, 'content': [{'end': 2562.37, 'text': "One by what? We'll have Aaron.", 'start': 2560.067, 'duration': 2.303}, {'end': 2567.215, 'text': "We'll have Aaron at Aaron.com.", 'start': 2563.932, 'duration': 3.283}, {'end': 2571.139, 'text': "And then we'll have..", 'start': 2568.537, 'duration': 2.602}, {'end': 2571.92, 'text': "Please don't email me.", 'start': 2571.139, 'duration': 0.781}, {'end': 2575.504, 'text': "We'll have ageis24.", 'start': 2573.462, 'duration': 2.042}, {'end': 2579.523, 'text': 'So there you go.', 'start': 2578.823, 'duration': 0.7}, {'end': 2581.844, 'text': "Doesn't look like a useful table.", 'start': 2580.404, 'duration': 1.44}, {'end': 2587.367, 'text': "Generally, you're not writing many tables directly in HTML.", 'start': 2582.144, 'duration': 5.223}, {'end': 2593.969, 'text': "If you are creating tables, you're gonna be using some kind of themes like CSS style sheets.", 'start': 2588.027, 'duration': 5.942}], 'summary': 'Discussion on creating tables in html using css style sheets.', 'duration': 33.902, 'max_score': 2560.067, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY2560067.jpg'}, {'end': 2716.648, 'src': 'embed', 'start': 2669.589, 'weight': 2, 'content': [{'end': 2674.651, 'text': "but don't actually create it in full-on projects, because it doesn't look that beautiful.", 'start': 2669.589, 'duration': 5.062}, {'end': 2683.094, 'text': "Now, I wanna show you some important things that people don't show is the Googling skills required to be able to do stuff.", 'start': 2676.485, 'duration': 6.609}, {'end': 2685.157, 'text': 'This is gonna be very common.', 'start': 2683.996, 'duration': 1.161}, {'end': 2688.702, 'text': 'So how do you create a dropdown in HTML?', 'start': 2685.538, 'duration': 3.164}, {'end': 2693.588, 'text': 'right?. So if I do dropdown in HTML, Well, how do I do that?', 'start': 2688.702, 'duration': 4.886}, {'end': 2697.852, 'text': 'Luckily, W3 school is gonna come up a lot in your journey.', 'start': 2694.569, 'duration': 3.283}, {'end': 2699.693, 'text': 'And this is something you gotta get used to.', 'start': 2698.032, 'duration': 1.661}, {'end': 2705.759, 'text': "And inside of here, it talks about, well, if you write this code, it'll create a dropdown.", 'start': 2699.713, 'duration': 6.046}, {'end': 2706.459, 'text': 'Try it yourself.', 'start': 2705.879, 'duration': 0.58}, {'end': 2707.5, 'text': "So I'm gonna copy this.", 'start': 2706.479, 'duration': 1.021}, {'end': 2713.425, 'text': "And I'm just going to go ahead and paste it inside of that form that we actually created earlier.", 'start': 2708.321, 'duration': 5.104}, {'end': 2716.648, 'text': "And let's go here and hit refresh.", 'start': 2714.606, 'duration': 2.042}], 'summary': 'Learning about creating a dropdown in html and utilizing google skills for coding, with emphasis on w3schools.', 'duration': 47.059, 'max_score': 2669.589, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY2669589.jpg'}], 'start': 2438.814, 'title': 'Html form design', 'summary': 'Discusses creating tables and dropdowns in html forms, emphasizing the importance of using css for table creation, googling skills in web development, and referencing w3schools for dropdown creation.', 'chapters': [{'end': 2669.589, 'start': 2438.814, 'title': 'Creating tables in html forms', 'summary': 'Discusses how to create tables in html forms, including adding table head, table body, and table data, and highlights the importance of using css style sheets for table creation.', 'duration': 230.775, 'highlights': ['The chapter explains the process of creating tables in HTML forms, emphasizing the addition of table head, table body, and table data.', 'It mentions the importance of using CSS style sheets for creating tables instead of directly writing them in HTML.', 'It demonstrates the step-by-step process of adding rows and cells to the table, with an example of adding name, email, and age information.']}, {'end': 2844.707, 'start': 2669.589, 'title': 'Html dropdown creation and w3schools', 'summary': 'Discusses the process of creating a dropdown in html using code from w3schools, emphasizing the importance of googling skills in web development and the common use of w3schools for reference, with an example of adding a dropdown to a form.', 'duration': 175.118, 'highlights': ['The importance of Googling skills in web development and the common use of W3Schools for reference.', 'Demonstration of creating a dropdown in HTML using code from W3Schools.', 'Emphasizing the process of adding a dropdown to a form as an important aspect of web development.']}], 'duration': 405.893, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY2438814.jpg', 'highlights': ['The chapter explains the process of creating tables in HTML forms, emphasizing the addition of table head, table body, and table data.', 'It mentions the importance of using CSS style sheets for creating tables instead of directly writing them in HTML.', 'Demonstration of creating a dropdown in HTML using code from W3Schools.', 'Emphasizing the process of adding a dropdown to a form as an important aspect of web development.', 'The importance of Googling skills in web development and the common use of W3Schools for reference.', 'It demonstrates the step-by-step process of adding rows and cells to the table, with an example of adding name, email, and age information.']}, {'end': 3295.614, 'segs': [{'end': 2899.347, 'src': 'embed', 'start': 2845.767, 'weight': 0, 'content': [{'end': 2852.009, 'text': "So what we're gonna do instead is we're gonna create a new thing, and first of all,", 'start': 2845.767, 'duration': 6.242}, {'end': 2857.29, 'text': "I'm gonna create a div and I'm gonna put it inside of here and it's called text area.", 'start': 2852.009, 'duration': 5.281}, {'end': 2860.351, 'text': 'So you wanna put it in the text area.', 'start': 2858.789, 'duration': 1.562}, {'end': 2865.738, 'text': 'So I did text area, I hit tab, and it auto-completed it with a lot of these defaults.', 'start': 2861.212, 'duration': 4.526}, {'end': 2879.513, 'text': "We'll say the name is message, the ID is message, An ID right now for this tutorial doesn't matter at all.", 'start': 2866.559, 'duration': 12.954}, {'end': 2881.935, 'text': "Let's hit refresh and let's go here.", 'start': 2879.533, 'duration': 2.402}, {'end': 2884.576, 'text': 'Now you can see messages, a box like this.', 'start': 2881.975, 'duration': 2.601}, {'end': 2890.721, 'text': 'So I can change it by doing, instead of having it say 30, I can say 10 and hit refresh.', 'start': 2885.177, 'duration': 5.544}, {'end': 2892.062, 'text': "We'll change the size of it.", 'start': 2890.761, 'duration': 1.301}, {'end': 2895.685, 'text': 'So the default is good.', 'start': 2894.364, 'duration': 1.321}, {'end': 2899.347, 'text': 'And the cool thing about messages, they can drag it up and down.', 'start': 2896.045, 'duration': 3.302}], 'summary': 'Creating a new text area with default values like name: message, id: message, and size: 30, then changing it to 10, allowing draggable functionality.', 'duration': 53.58, 'max_score': 2845.767, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY2845767.jpg'}, {'end': 2993.892, 'src': 'embed', 'start': 2935.641, 'weight': 2, 'content': [{'end': 2936.702, 'text': 'We were in sync right there.', 'start': 2935.641, 'duration': 1.061}, {'end': 2938.024, 'text': "All right, let's go.", 'start': 2937.283, 'duration': 0.741}, {'end': 2940.066, 'text': 'So a few things.', 'start': 2938.684, 'duration': 1.382}, {'end': 2940.907, 'text': 'What we want to do is..', 'start': 2940.126, 'duration': 0.781}, {'end': 2948.696, 'text': 'want to make sure is first of all, just add an HTML tag here because we forgot to add it last video.', 'start': 2943.174, 'duration': 5.522}, {'end': 2952.197, 'text': 'So have the big deal.', 'start': 2950.417, 'duration': 1.78}, {'end': 2955.038, 'text': "Yeah, it's it's really not it's still working.", 'start': 2952.537, 'duration': 2.501}, {'end': 2961.141, 'text': 'Okay, and then make sure you grab everything and you indent it inside.', 'start': 2956.659, 'duration': 4.482}, {'end': 2964.362, 'text': 'All right, just grab everything in one big mega HTML.', 'start': 2961.161, 'duration': 3.201}, {'end': 2966.282, 'text': 'So everything should be inside of the HTML tag.', 'start': 2964.382, 'duration': 1.9}, {'end': 2970.421, 'text': "That's a proper proper I don't know why I put air quotations.", 'start': 2966.302, 'duration': 4.119}, {'end': 2971.821, 'text': 'This is the proper way to do it.', 'start': 2970.481, 'duration': 1.34}, {'end': 2973.022, 'text': 'So do that.', 'start': 2971.881, 'duration': 1.141}, {'end': 2980.825, 'text': 'Now what I want to show you guys is how do you link back and forth between like files? So say you had another file locally.', 'start': 2973.702, 'duration': 7.123}, {'end': 2990.069, 'text': "Well, how would you link between that? So let's create a a new file.", 'start': 2981.265, 'duration': 8.804}, {'end': 2992.391, 'text': 'Okay, HTML file.', 'start': 2990.97, 'duration': 1.421}, {'end': 2993.892, 'text': "Yep So I'm gonna go here.", 'start': 2992.671, 'duration': 1.221}], 'summary': 'The transcript discusses adding html tags and linking files, emphasizing proper formatting and structure.', 'duration': 58.251, 'max_score': 2935.641, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY2935641.jpg'}, {'end': 3061.434, 'src': 'heatmap', 'start': 3006.482, 'weight': 0.861, 'content': [{'end': 3010.004, 'text': "And I'm going to call it youtube.html like that.", 'start': 3006.482, 'duration': 3.522}, {'end': 3014.566, 'text': 'All right, so it should have this HTML symbol next to it.', 'start': 3011.245, 'duration': 3.321}, {'end': 3018.527, 'text': 'Maybe yours might not, but it should have that extension at least.', 'start': 3015.106, 'duration': 3.421}, {'end': 3022.767, 'text': 'Now if you click here and you go here, it should have YouTube HTML like that.', 'start': 3018.847, 'duration': 3.92}, {'end': 3028.269, 'text': 'All right now, depending on what text editor you are on.', 'start': 3023.788, 'duration': 4.481}, {'end': 3034.91, 'text': "if you type in HTML and hit autocomplete, it'll autocomplete it to a bunch of things, but on VS Code it won't.", 'start': 3028.269, 'duration': 6.641}, {'end': 3040.471, 'text': "So on VS Code you'll have to type doc, hit tab, and it'll autocomplete it to this.", 'start': 3034.99, 'duration': 5.481}, {'end': 3049.525, 'text': 'So a few of these things is just good practice to have how VS code has it.', 'start': 3041.92, 'duration': 7.605}, {'end': 3053.508, 'text': 'So you can kind of leave that without worrying about what it does too much.', 'start': 3049.565, 'duration': 3.943}, {'end': 3061.434, 'text': 'Okay But if we look at, you know, for example, this meta tag here, this makes it easier for mobile devices.', 'start': 3053.528, 'duration': 7.906}], 'summary': 'Creating a youtube html file with specific code and meta tag for mobile devices.', 'duration': 54.952, 'max_score': 3006.482, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY3006482.jpg'}, {'end': 3221.296, 'src': 'embed', 'start': 3194.733, 'weight': 3, 'content': [{'end': 3205.486, 'text': 'there are things like you know your webpage links, you know right at the top, or maybe you know what else goes in the header?', 'start': 3194.733, 'duration': 10.753}, {'end': 3211.602, 'text': "I mean theoretically, in HTML you can put anything anywhere and it'll still do something.", 'start': 3207.816, 'duration': 3.786}, {'end': 3214.526, 'text': 'But usually good practice is just stuff that got to be at the top.', 'start': 3211.862, 'duration': 2.664}, {'end': 3218.191, 'text': 'So like maybe, yeah, like nav bar, your logo.', 'start': 3214.546, 'duration': 3.645}, {'end': 3221.296, 'text': 'Some people put it in the actual head tag up there, like up there.', 'start': 3218.672, 'duration': 2.624}], 'summary': 'The good practice for webpage structure is to place essential elements like nav bar and logo at the top.', 'duration': 26.563, 'max_score': 3194.733, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY3194733.jpg'}], 'start': 2845.767, 'title': 'Html essentials', 'summary': 'Covers creating a text area in html, modifying its attributes, and emphasizing its draggable feature, and also discusses essential html tags, linking between files, and best practices for organizing content.', 'chapters': [{'end': 2899.347, 'start': 2845.767, 'title': 'Creating text area in html', 'summary': 'Demonstrates creating a text area in html, setting its attributes such as name and id, and modifying its size, emphasizing its draggable feature.', 'duration': 53.58, 'highlights': ["The default text area with the name 'message' and ID 'message' is demonstrated, and the size is modified from 30 to 10, showcasing its flexibility and customizability.", 'The draggable feature of the text area is highlighted as a cool and useful functionality, enhancing user experience.']}, {'end': 3295.614, 'start': 2900.008, 'title': 'Html crash course part two', 'summary': 'Covers essential html tags, including the tag, linking between files, and best practices for organizing content, emphasizing the importance of proper structure and navigation.', 'duration': 395.606, 'highlights': ['The chapter emphasizes the importance of adding the tag and indenting all content inside it, ensuring proper structure. The instructor stresses the significance of adding the tag and indenting all content inside it, highlighting the importance of proper structure in HTML.', 'The section demonstrates how to create links between files by using relative paths, allowing seamless navigation between web pages. The tutorial illustrates the process of creating links between files using relative paths, ensuring seamless navigation between web pages.', 'The instructor discusses best practices for organizing content, such as placing navigation elements and logos in the header tag for clarity and ease of web scripting. The chapter covers best practices for organizing content, including placing navigation elements and logos in the header tag for clarity and ease of web scripting.']}], 'duration': 449.847, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY2845767.jpg', 'highlights': ['The draggable feature of the text area is highlighted as a cool and useful functionality, enhancing user experience.', "The default text area with the name 'message' and ID 'message' is demonstrated, and the size is modified from 30 to 10, showcasing its flexibility and customizability.", 'The section demonstrates how to create links between files by using relative paths, allowing seamless navigation between web pages.', 'The instructor discusses best practices for organizing content, such as placing navigation elements and logos in the header tag for clarity and ease of web scripting.', 'The chapter emphasizes the importance of adding the tag and indenting all content inside it, ensuring proper structure.']}, {'end': 4222.141, 'segs': [{'end': 3468.178, 'src': 'embed', 'start': 3434.176, 'weight': 2, 'content': [{'end': 3449.265, 'text': "And what we'll do to add that in is we will use something called the small tag and I'll do clever programmer, Python programming and you know,", 'start': 3434.176, 'duration': 15.089}, {'end': 3450.905, 'text': 'hashtag, tutorial and just kind of.', 'start': 3449.265, 'duration': 1.64}, {'end': 3451.606, 'text': 'leave it like that.', 'start': 3450.905, 'duration': 0.701}, {'end': 3455.174, 'text': 'Yeah Perfect.', 'start': 3451.626, 'duration': 3.548}, {'end': 3466.257, 'text': 'Looking better, huh? So now we have that we can do probably a similar thing with views are published.', 'start': 3456.575, 'duration': 9.682}, {'end': 3468.178, 'text': 'So we can say like when I was published.', 'start': 3466.297, 'duration': 1.881}], 'summary': "Adding tags such as 'clever programmer', 'python programming', and 'tutorial' to improve visibility.", 'duration': 34.002, 'max_score': 3434.176, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY3434176.jpg'}, {'end': 3549.838, 'src': 'embed', 'start': 3517.81, 'weight': 0, 'content': [{'end': 3518.73, 'text': 'This is our website.', 'start': 3517.81, 'duration': 0.92}, {'end': 3521.551, 'text': 'We get to decide, right? Whatever we want.', 'start': 3518.93, 'duration': 2.621}, {'end': 3527.712, 'text': 'Boom This is what YouTube used to look like in its first iteration.', 'start': 3523.031, 'duration': 4.681}, {'end': 3530.593, 'text': "So we're pretty much pioneers at this point.", 'start': 3527.752, 'duration': 2.841}, {'end': 3533.154, 'text': 'We all are.', 'start': 3532.574, 'duration': 0.58}, {'end': 3536.695, 'text': 'Right, this is looking great.', 'start': 3534.894, 'duration': 1.801}, {'end': 3542.076, 'text': 'So there, we have a pretty much simple version of a YouTube clone.', 'start': 3537.035, 'duration': 5.041}, {'end': 3543.976, 'text': 'I wonder what else we should add.', 'start': 3542.176, 'duration': 1.8}, {'end': 3549.838, 'text': 'A channel name, maybe? And maybe like an image of the Clever Programmer logo.', 'start': 3543.996, 'duration': 5.842}], 'summary': 'Discussing the creation of a youtube clone website, aiming for simplicity and potential features.', 'duration': 32.028, 'max_score': 3517.81, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY3517810.jpg'}, {'end': 3643.409, 'src': 'embed', 'start': 3583.679, 'weight': 3, 'content': [{'end': 3584.16, 'text': 'It should work.', 'start': 3583.679, 'duration': 0.481}, {'end': 3601.968, 'text': 'Yep And what I want to do is I want to create a div that has both of these guys in there.', 'start': 3585.04, 'duration': 16.928}, {'end': 3613.355, 'text': 'the Clever Programmer title and the premiered like I wanted in one place.', 'start': 3605.273, 'duration': 8.082}, {'end': 3617.776, 'text': 'Or sorry, the Clever Programmer logo.', 'start': 3616.096, 'duration': 1.68}, {'end': 3623.857, 'text': 'And then that should be good.', 'start': 3619.576, 'duration': 4.281}, {'end': 3631.479, 'text': "And I'm going to create a P tag.", 'start': 3629.259, 'duration': 2.22}, {'end': 3634.36, 'text': 'Put this image in there.', 'start': 3633.02, 'duration': 1.34}, {'end': 3643.409, 'text': "And then after this image, let's just put the words Clever Programmer.", 'start': 3636.383, 'duration': 7.026}], 'summary': 'Creating a div with the clever programmer logo and the premiered image, followed by a p tag with the clever programmer text.', 'duration': 59.73, 'max_score': 3583.679, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY3583679.jpg'}, {'end': 4032.887, 'src': 'embed', 'start': 4002.273, 'weight': 1, 'content': [{'end': 4004.996, 'text': 'Guys, this is not HTML anymore.', 'start': 4002.273, 'duration': 2.723}, {'end': 4006.838, 'text': "Now we're starting to get into styling.", 'start': 4005.016, 'duration': 1.822}, {'end': 4009.3, 'text': 'This is the CSS part of things.', 'start': 4006.898, 'duration': 2.402}, {'end': 4014.065, 'text': 'So we are not going to get into the CSS any further.', 'start': 4009.921, 'duration': 4.144}, {'end': 4017.428, 'text': 'We just wanted to share the very basics with you.', 'start': 4014.145, 'duration': 3.283}, {'end': 4020.991, 'text': "But that's actually how any website gets designed.", 'start': 4017.808, 'duration': 3.183}, {'end': 4032.887, 'text': 'and it goes beyond, just like the most basic html that you see right here, anything else we need to cover, aaron, or we did a pretty good job.', 'start': 4021.912, 'duration': 10.975}], 'summary': 'Introduction to css in web design, covering the basics.', 'duration': 30.614, 'max_score': 4002.273, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY4002273.jpg'}, {'end': 4183.067, 'src': 'embed', 'start': 4160.961, 'weight': 4, 'content': [{'end': 4170.131, 'text': 'And we have taken kind of the best tools and skills you actually need to become a successful freelance developer and put it into this training.', 'start': 4160.961, 'duration': 9.17}, {'end': 4176.6, 'text': 'The catch of this training is that around after the one hour mark, we pitch you a paid product.', 'start': 4170.573, 'duration': 6.027}, {'end': 4181.604, 'text': 'so we, if you know if you enjoyed the training, you get value out of it.', 'start': 4177.56, 'duration': 4.044}, {'end': 4183.067, 'text': 'we pitch you a paid product.', 'start': 4181.604, 'duration': 1.463}], 'summary': 'Training offers essential skills for freelance developers, with a pitch for a paid product after one hour.', 'duration': 22.106, 'max_score': 4160.961, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY4160961.jpg'}], 'start': 3295.614, 'title': 'Building a youtube clone and html/css basics', 'summary': 'Discusses creating a simple youtube clone, adding features like embedding videos, headers, titles, hashtags, and view counts using html and css. it also covers creating a basic website with html and css, including adding a logo, text, and styling elements, and emphasizes the importance of practical application and independent projects in learning css and html, along with a training program for freelance development lasting over an hour.', 'chapters': [{'end': 3543.976, 'start': 3295.614, 'title': 'Building a youtube clone', 'summary': 'Discusses the process of building a simple version of a youtube clone, including adding features like embedding videos, headers, titles, hashtags, and view counts using html and css.', 'duration': 248.362, 'highlights': ['The chapter discusses the process of building a simple version of a YouTube clone, including adding features like embedding videos, headers, titles, hashtags, and view counts using HTML and CSS.', 'Encourages the audience to increase their skills and develop projects by modeling something they want to build, emphasizing the importance of practical application for learning.', 'Demonstrates the addition of hashtags using the small tag and the placement of views using HTML tags to mimic the layout of a YouTube page.', 'Emphasizes the freedom to decide the layout of the website and the pioneering aspect of replicating early versions of popular platforms.']}, {'end': 4001.633, 'start': 3543.996, 'title': 'Basic html and css tutorial', 'summary': 'Covers the process of creating a basic website with html and css, including adding a logo, text, and styling elements, providing instructions and explanations for each step.', 'duration': 457.637, 'highlights': ['Creating a div with the Clever Programmer logo and text The speaker discusses creating a div to contain the Clever Programmer logo and text, demonstrating the process of adding an image and text within the div.', 'Using HTML tags to format text The speaker explains using strong tags to bold text and emphasizes the deprecation of the bold tag in HTML5.', 'Adding styling to elements with CSS The speaker demonstrates adding styling to elements by using CSS, including aligning text and changing font color.']}, {'end': 4222.141, 'start': 4002.273, 'title': 'Learning css basics and freelancing', 'summary': 'Covers the basics of css and html, emphasizing the importance of practical application and independent projects. additionally, it introduces a training program for freelance development, lasting over an hour and culminating in a pitch for a paid product.', 'duration': 219.868, 'highlights': ['The chapter covers the basics of CSS and HTML, emphasizing the importance of practical application and independent projects. The chapter discusses the fundamental concepts of CSS and HTML, stressing the significance of building practical projects and not getting stuck in tutorial purgatory.', "It introduces a training program for freelance development, lasting over an hour and culminating in a pitch for a paid product. The training program for freelance development is highlighted, spanning over an hour and featuring a pitch for a paid product aimed at potentially changing the trajectory of one's career."]}], 'duration': 926.527, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/FNGoExJlLQY/pics/FNGoExJlLQY3295614.jpg', 'highlights': ['The chapter discusses the process of building a simple version of a YouTube clone, including adding features like embedding videos, headers, titles, hashtags, and view counts using HTML and CSS.', 'The chapter covers the basics of CSS and HTML, emphasizing the importance of practical application and independent projects.', 'Demonstrates the addition of hashtags using the small tag and the placement of views using HTML tags to mimic the layout of a YouTube page.', 'Creating a div with the Clever Programmer logo and text The speaker discusses creating a div to contain the Clever Programmer logo and text, demonstrating the process of adding an image and text within the div.', 'Introduces a training program for freelance development, lasting over an hour and culminating in a pitch for a paid product.']}], 'highlights': ['The chapter discusses the process of building a simple version of a YouTube clone, including adding features like embedding videos, headers, titles, hashtags, and view counts using HTML and CSS.', 'The chapter emphasizes the importance of learning about HTML form elements, including gathering user input such as phone numbers, emails, names, and quizzes.', 'The chapter offers a fast-paced HTML5 crash course for beginners, covering unorder lists, order lists, header tags, and creating a basic looking webpage.', 'Visual Studio Code is recommended for HTML development as it is free and one of the best text editors available.', 'The chapter explains the process of creating tables in HTML forms, emphasizing the addition of table head, table body, and table data.']}