title
HTML Tutorial - Website Crash Course for Beginners

description
Learn the basics of HTML in this crash course. ✏️ This course was developed by Beau Carnes. 🐈 cats.jpg: https://cdn.freecodecamp.org/youtube/html-course/cats.jpg 🍝 lasagna.jpg: https://cdn.freecodecamp.org/youtube/html-course/lasagna.jpg 💻 Code: https://github.com/freeCodeCamp/cdn/blob/main/build/youtube/html-course/index.html 🔗 Sign up for Hostinger here: https://www.hostinger.com/getstarted 🎉 Thanks to Hostinger for providing a grant that made this course possible. ⭐️ Course Contents ⭐️ ⌨️ (00:00) Introduction ⌨️ (01:38) Choosing a code editor ⌨️ (04:27) Basic HTML file ⌨️ (05:02) Elements and Tags ⌨️ (07:05) Headers ⌨️ (08:34) Paragraphs ⌨️ (09:55) Comments ⌨️ (10:45) Content Area Tags ⌨️ (13:10) Images ⌨️ (16:00) Links ⌨️ (19:54) Unordered Lists ⌨️ (22:08) Ordered Lists ⌨️ (24:24) Forms and Input Elements ⌨️ (36:45) Div Elements ⌨️ (38:57) Footer Section ⌨️ (41:06) Head Section ⌨️ (41:27) Website Title ⌨️ (42:23) Deploying Website with Hostinger 🎉 Thanks to our Champion and Sponsor supporters: 👾 Wong Voon jinq 👾 hexploitation 👾 Katia Moran 👾 BlckPhantom 👾 Nick Raker 👾 Otis Morgan 👾 DeezMaster 👾 Treehouse 👾 AppWrite -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news

detail
{'title': 'HTML Tutorial - Website Crash Course for Beginners', 'heatmap': [{'end': 247.411, 'start': 212.623, 'weight': 0.733}, {'end': 684.855, 'start': 628.055, 'weight': 0.72}, {'end': 979.797, 'start': 947.974, 'weight': 0.823}, {'end': 1119.305, 'start': 1034.287, 'weight': 0.86}, {'end': 1472.336, 'start': 1441.24, 'weight': 0.716}, {'end': 1850.462, 'start': 1820.841, 'weight': 0.82}, {'end': 1942.218, 'start': 1896.11, 'weight': 0.725}], 'summary': 'This html crash course covers basic html elements, creating a website with images, lists, and a form, and deploying the website using hostinger, emphasizing the ease and speed of the process. it also discusses using codepen and visual studio code for writing and viewing html and recommends further learning css and javascript.', 'chapters': [{'end': 220.608, 'segs': [{'end': 55.219, 'src': 'embed', 'start': 0.309, 'weight': 4, 'content': [{'end': 2.371, 'text': 'This is an HTML crash course.', 'start': 0.309, 'duration': 2.062}, {'end': 5.975, 'text': "I'm Beau Carnes and I'm going to teach you the basics of HTML.", 'start': 2.832, 'duration': 3.143}, {'end': 7.797, 'text': "Let's jump right into it.", 'start': 6.696, 'duration': 1.101}, {'end': 12.101, 'text': 'You probably already know that HTML is used to create web pages.', 'start': 8.237, 'duration': 3.864}, {'end': 15.285, 'text': 'It stands for Hyper Text Markup Language.', 'start': 12.562, 'duration': 2.723}, {'end': 19.629, 'text': 'Every website on the internet uses HTML and CSS.', 'start': 16.106, 'duration': 3.523}, {'end': 22.052, 'text': 'Most also use JavaScript.', 'start': 20.31, 'duration': 1.742}, {'end': 29.634, 'text': 'In a website HTML is the structure CSS is the style and JavaScript is the functionality.', 'start': 23.171, 'duration': 6.463}, {'end': 33.976, 'text': "Here's a great interactive diagram from code analogies.com.", 'start': 30.114, 'duration': 3.862}, {'end': 38.619, 'text': 'You can see we have the page, the structure, styling and functionality.', 'start': 34.657, 'duration': 3.962}, {'end': 44.797, 'text': "And if we move this slider, So it's like the house the page is like the house.", 'start': 38.859, 'duration': 5.938}, {'end': 53.338, 'text': 'So the structure or the HTML is like how many bedrooms are how many rooms, the CSS, the styling is like the color, the color of the brick here.', 'start': 45.097, 'duration': 8.241}, {'end': 55.219, 'text': 'And then the functionality.', 'start': 53.918, 'duration': 1.301}], 'summary': 'Beau carnes introduces the basics of html, css, and javascript, emphasizing their roles in web development.', 'duration': 54.91, 'max_score': 0.309, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/916GWv2Qs08/pics/916GWv2Qs08309.jpg'}, {'end': 103.654, 'src': 'embed', 'start': 80.765, 'weight': 3, 'content': [{'end': 88.447, 'text': "At the end of this course, I'll also show you how to get your HTML page online using hosting or.com to host the website.", 'start': 80.765, 'duration': 7.682}, {'end': 91.668, 'text': 'Hostinger provided a grant that made this course possible.', 'start': 88.947, 'duration': 2.721}, {'end': 97.69, 'text': 'Hostinger provides web hosting, databases, domains and other services.', 'start': 92.148, 'duration': 5.542}, {'end': 103.654, 'text': 'Before you learn how to write HTML, you have to make sure you have a place to write the HTML.', 'start': 98.49, 'duration': 5.164}], 'summary': 'Hostinger provided a grant for the course, offering web hosting, databases, and domains.', 'duration': 22.889, 'max_score': 80.765, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/916GWv2Qs08/pics/916GWv2Qs0880765.jpg'}, {'end': 220.608, 'src': 'embed', 'start': 153.867, 'weight': 0, 'content': [{'end': 156.549, 'text': "But we're just going to be doing HTML in this course.", 'start': 153.867, 'duration': 2.682}, {'end': 158.05, 'text': 'So let me show you an example.', 'start': 156.829, 'duration': 1.221}, {'end': 161.453, 'text': 'If I make a paragraph and type in Hello world.', 'start': 158.39, 'duration': 3.063}, {'end': 168.232, 'text': 'you can see that it appears right down here.', 'start': 165.99, 'duration': 2.242}, {'end': 173.356, 'text': 'And then it keeps updating automatically, you can see updated with my mistake, and then I corrected it.', 'start': 169.173, 'duration': 4.183}, {'end': 175.377, 'text': 'And then it went back to the correct way Hello world.', 'start': 173.456, 'duration': 1.921}, {'end': 181.362, 'text': 'So you can also just change move these stuff around, change the view.', 'start': 176.058, 'duration': 5.304}, {'end': 187.307, 'text': 'And this could make it a little easier to write the HTML on this side and then see the result on this side.', 'start': 182.143, 'duration': 5.164}, {'end': 190.049, 'text': "Now I'll show you Visual Studio code.", 'start': 188.188, 'duration': 1.861}, {'end': 198.014, 'text': 'If you just do a search for Visual Studio code, go right in here.', 'start': 190.089, 'duration': 7.925}, {'end': 200.895, 'text': 'And then I will click download.', 'start': 199.014, 'duration': 1.881}, {'end': 206.879, 'text': "And the button will automatically download Visual Studio code for whatever operating system you're using.", 'start': 201.296, 'duration': 5.583}, {'end': 212.102, 'text': "I'm not going to show the full download and install process that should be pretty self explanatory.", 'start': 207.439, 'duration': 4.663}, {'end': 218.706, 'text': "Once you get Visual Studio code opened, it should look something like this, you won't have these recent files here.", 'start': 212.623, 'duration': 6.083}, {'end': 220.608, 'text': 'And also I zoomed in a little bit.', 'start': 219.047, 'duration': 1.561}], 'summary': 'The course focuses on html, demonstrating coding and using visual studio code for development.', 'duration': 66.741, 'max_score': 153.867, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/916GWv2Qs08/pics/916GWv2Qs08153867.jpg'}], 'start': 0.309, 'title': 'Html basics and code editors', 'summary': 'Provides a crash course on html, emphasizing its significance and role in creating web pages, and discusses hosting html pages online, using codepen, and installing visual studio code for writing and viewing html. it also recommends further learning css and javascript.', 'chapters': [{'end': 80.125, 'start': 0.309, 'title': 'Html crash course basics', 'summary': 'Provides a crash course on html, stating its significance, usage, and its role in creating web pages, highlighting that html is the structure, css is the style, and javascript is the functionality, with a recommendation to further learn css and javascript.', 'duration': 79.816, 'highlights': ['HTML is used to create web pages, and every website on the internet uses HTML and CSS, with most also using JavaScript.', 'In a website, HTML is the structure, CSS is the style, and JavaScript is the functionality.', 'An interactive diagram from code analogies.com illustrates that the page is like a house, with HTML representing the structure, CSS the styling, and JavaScript the functionality.', "To view the HTML that makes up any element on a web page, one can right-click the element and select 'inspect'."]}, {'end': 175.377, 'start': 80.765, 'title': 'Html page online & code editors', 'summary': 'Discusses the process of hosting an html page online and the use of code editors, including a demonstration of using codepen and the installation and use of visual studio code.', 'duration': 94.612, 'highlights': ["Hostinger provides web hosting, databases, domains, and other services. Hostinger's grant made the course possible, offering web hosting, databases, domains, and other services.", 'The chapter discusses the process of hosting an HTML page online and the use of code editors, including a demonstration of using CodePen and the installation and use of Visual Studio Code. The chapter provides insights into hosting an HTML page online and the use of code editors, demonstrating the process using CodePen and Visual Studio Code.', 'CodePen.io and replit.com are online platforms where HTML can be written without requiring installation. CodePen.io and replit.com are mentioned as platforms for writing HTML online without the need for installation.']}, {'end': 220.608, 'start': 176.058, 'title': 'Introduction to visual studio code', 'summary': 'Introduces visual studio code, demonstrating how it can be used to write html and view the result simultaneously, then outlines the process of downloading and installing visual studio code for different operating systems.', 'duration': 44.55, 'highlights': ['Visual Studio Code allows simultaneous HTML writing and result viewing. Demonstrates the capability of Visual Studio Code to facilitate simultaneous HTML writing and result viewing, enhancing productivity.', 'Process of downloading and installing Visual Studio Code for different operating systems. Outlines the process of downloading and installing Visual Studio Code for different operating systems, providing a comprehensive guide for users of varying platforms.']}], 'duration': 220.299, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/916GWv2Qs08/pics/916GWv2Qs08309.jpg', 'highlights': ['HTML is used to create web pages, and every website on the internet uses HTML and CSS, with most also using JavaScript.', 'In a website, HTML is the structure, CSS is the style, and JavaScript is the functionality.', 'An interactive diagram from code analogies.com illustrates that the page is like a house, with HTML representing the structure, CSS the styling, and JavaScript the functionality.', "To view the HTML that makes up any element on a web page, one can right-click the element and select 'inspect'.", "Hostinger provides web hosting, databases, domains, and other services. Hostinger's grant made the course possible, offering web hosting, databases, domains, and other services.", 'The chapter discusses the process of hosting an HTML page online and the use of code editors, including a demonstration of using CodePen and the installation and use of Visual Studio Code. The chapter provides insights into hosting an HTML page online and the use of code editors, demonstrating the process using CodePen and Visual Studio Code.', 'CodePen.io and replit.com are online platforms where HTML can be written without requiring installation. CodePen.io and replit.com are mentioned as platforms for writing HTML online without the need for installation.', 'Visual Studio Code allows simultaneous HTML writing and result viewing. Demonstrates the capability of Visual Studio Code to facilitate simultaneous HTML writing and result viewing, enhancing productivity.', 'Process of downloading and installing Visual Studio Code for different operating systems. Outlines the process of downloading and installing Visual Studio Code for different operating systems, providing a comprehensive guide for users of varying platforms.']}, {'end': 755.59, 'segs': [{'end': 282.023, 'src': 'embed', 'start': 248.012, 'weight': 3, 'content': [{'end': 252.556, 'text': 'In fact, web browsers will often look for a file with that exact name.', 'start': 248.012, 'duration': 4.544}, {'end': 262.444, 'text': 'When your website is loading up, you can actually call your HTML file anything it could be called cats.html or new.html.', 'start': 252.936, 'duration': 9.508}, {'end': 267.489, 'text': "But it's generally good to stick with index.html for your first file.", 'start': 263.005, 'duration': 4.484}, {'end': 269.891, 'text': 'Okay, you got a place to write the HTML.', 'start': 268.189, 'duration': 1.702}, {'end': 271.973, 'text': "Let's start writing HTML.", 'start': 270.492, 'duration': 1.481}, {'end': 282.023, 'text': "In this course, you will learn HTML by creating a simple page, I recommend that you type along with me, we'll create a web page line by line.", 'start': 272.874, 'duration': 9.149}], 'summary': 'Web browsers prefer index.html for first file. creating simple html page in course.', 'duration': 34.011, 'max_score': 248.012, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/916GWv2Qs08/pics/916GWv2Qs08248012.jpg'}, {'end': 364.413, 'src': 'embed', 'start': 310.7, 'weight': 0, 'content': [{'end': 322.15, 'text': 'an element will often have an opening tag like this, and a closing tag, and it will contain everything within the opening and closing tags.', 'start': 310.7, 'duration': 11.45}, {'end': 330.957, 'text': 'You can see a closing tag often has a slash right in these angle brackets right before the name of the tag.', 'start': 322.89, 'duration': 8.067}, {'end': 334.44, 'text': 'So this is an h1 tag, this opening and closing h1 tag.', 'start': 330.977, 'duration': 3.463}, {'end': 338.624, 'text': 'Most elements are container elements.', 'start': 336.181, 'duration': 2.443}, {'end': 343.528, 'text': 'That means they hold content between the opening and closing tags.', 'start': 339.124, 'duration': 4.404}, {'end': 348.213, 'text': "For instance, it's this h1 element is holding the content.", 'start': 344.229, 'duration': 3.984}, {'end': 349.434, 'text': 'Hello world.', 'start': 348.553, 'duration': 0.881}, {'end': 353.758, 'text': 'But some elements are standalone, like this one right here.', 'start': 350.095, 'duration': 3.663}, {'end': 355.64, 'text': "And we'll talk about a few more later.", 'start': 353.999, 'duration': 1.641}, {'end': 364.413, 'text': 'this one right here, doc type, doc type HTML, this is what all HTML files are going to start with.', 'start': 356.929, 'duration': 7.484}], 'summary': 'Introduction to html elements, including container and standalone elements. example of h1 and doc type html.', 'duration': 53.713, 'max_score': 310.7, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/916GWv2Qs08/pics/916GWv2Qs08310700.jpg'}, {'end': 533.245, 'src': 'embed', 'start': 504.397, 'weight': 5, 'content': [{'end': 509.22, 'text': 'And if I save this, and then I refresh, you can see Hello World is really big.', 'start': 504.397, 'duration': 4.823}, {'end': 513.423, 'text': "And then cat photo app is a little smaller because it's an h2 element.", 'start': 509.3, 'duration': 4.123}, {'end': 517.947, 'text': 'Another common type of element is a P element.', 'start': 515.245, 'duration': 2.702}, {'end': 522.809, 'text': 'A P element is used to create paragraph text on websites.', 'start': 518.746, 'duration': 4.063}, {'end': 526.393, 'text': "So I'm going to create a P element.", 'start': 523.871, 'duration': 2.522}, {'end': 533.245, 'text': 'you may have noticed that the code editor automatically puts the ending tag.', 'start': 527.423, 'duration': 5.822}], 'summary': 'Code editor automatically creates ending tags for p elements, creating paragraph text on websites.', 'duration': 28.848, 'max_score': 504.397, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/916GWv2Qs08/pics/916GWv2Qs08504397.jpg'}, {'end': 684.855, 'src': 'heatmap', 'start': 628.055, 'weight': 0.72, 'content': [{'end': 630.677, 'text': 'now we can remove this h1 tag.', 'start': 628.055, 'duration': 2.622}, {'end': 631.937, 'text': 'This was just an example.', 'start': 630.737, 'duration': 1.2}, {'end': 636.6, 'text': 'Because this app is really this website is actually a cat photo app.', 'start': 632.278, 'duration': 4.322}, {'end': 638.461, 'text': "We don't need this Hello World here.", 'start': 637.02, 'duration': 1.441}, {'end': 643.044, 'text': "If I save that, you'll see that the Hello World is gone.", 'start': 638.481, 'duration': 4.563}, {'end': 645.465, 'text': 'And also the comment does not appear on the page.', 'start': 643.104, 'duration': 2.361}, {'end': 650.288, 'text': 'HTML five has tags that identify different content areas.', 'start': 646.526, 'duration': 3.762}, {'end': 656.852, 'text': 'These tags make your HTML easier to read and also help with search engine optimization and accessibility.', 'start': 650.908, 'duration': 5.944}, {'end': 664.581, 'text': "we're going to identify the main section of this page by adding a main element with a main opening tag and closing tag.", 'start': 657.677, 'duration': 6.904}, {'end': 674.828, 'text': "So right after the title, I'm going to put main, the code editor automatically puts the closing tag, I'm going to do Ctrl X or Command X to cut it.", 'start': 665.082, 'duration': 9.746}, {'end': 679.471, 'text': "So I'm going to cut this closing tag and paste it right here.", 'start': 674.848, 'duration': 4.623}, {'end': 684.855, 'text': 'And this is a good time to talk about nesting.', 'start': 681.913, 'duration': 2.942}], 'summary': 'The website is a cat photo app, html5 tags improve readability and seo. added main element for page section identification.', 'duration': 56.8, 'max_score': 628.055, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/916GWv2Qs08/pics/916GWv2Qs08628055.jpg'}], 'start': 220.648, 'title': 'Html basics', 'summary': 'Covers creating a basic html page, emphasizing the importance of naming the main file index.html, explaining the structure of html elements, and discussing the usage of html headings, creating paragraph text, adding comments to code, and nesting html elements.', 'chapters': [{'end': 421.994, 'start': 220.648, 'title': 'Creating a basic html page', 'summary': 'Covers the process of creating a basic html page, emphasizing the importance of naming the main file index.html, explaining the structure of html elements, and highlighting the significance of the doc type and html tags.', 'duration': 201.346, 'highlights': ['The importance of naming the main file index.html Emphasizes the significance of naming the main file index.html, as web browsers often look for a file with that exact name.', 'Explaining the structure of HTML elements Describes the structure of HTML elements, including container and standalone elements, with an example of h1 tag and its opening and closing tags.', 'Significance of the doc type and HTML tags Highlights the importance of the doc type HTML as the first element in every HTML page, specifying the browser to expect HTML and use the newest version, and the role of HTML and body tags in containing page content.']}, {'end': 755.59, 'start': 422.674, 'title': 'Html headings and elements', 'summary': 'Discusses the usage of html headings h1 to h6 to define different sizes of headings, creating paragraph text using the p element, adding comments to code, and nesting html elements for better readability and organization.', 'duration': 332.916, 'highlights': ['The biggest heading, h1, is used to define the largest heading, while h2, h3, h4, h5, and h6 define smaller headings. Quantifiable data: Provides a clear understanding of the hierarchy of heading sizes in HTML.', 'Creating a P element is used to generate paragraph text on websites. Quantifiable data: Explains the purpose and usage of the P element in HTML.', 'Comments in HTML allow leaving messages without affecting the output, and can make code inactive. Quantifiable data: Describes the functionality and purpose of comments in HTML.', 'Nesting HTML elements for better organization and readability, using indentation and spacing as a best practice. Quantifiable data: Emphasizes the importance of nesting and best practices for readability.']}], 'duration': 534.942, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/916GWv2Qs08/pics/916GWv2Qs08220648.jpg', 'highlights': ['The importance of naming the main file index.html Emphasizes the significance of naming the main file index.html, as web browsers often look for a file with that exact name.', 'Explaining the structure of HTML elements Describes the structure of HTML elements, including container and standalone elements, with an example of h1 tag and its opening and closing tags.', 'Significance of the doc type and HTML tags Highlights the importance of the doc type HTML as the first element in every HTML page, specifying the browser to expect HTML and use the newest version, and the role of HTML and body tags in containing page content.', 'Nesting HTML elements for better organization and readability, using indentation and spacing as a best practice. Quantifiable data: Emphasizes the importance of nesting and best practices for readability.', 'The biggest heading, h1, is used to define the largest heading, while h2, h3, h4, h5, and h6 define smaller headings. Quantifiable data: Provides a clear understanding of the hierarchy of heading sizes in HTML.', 'Creating a P element is used to generate paragraph text on websites. Quantifiable data: Explains the purpose and usage of the P element in HTML.', 'Comments in HTML allow leaving messages without affecting the output, and can make code inactive. Quantifiable data: Describes the functionality and purpose of comments in HTML.']}, {'end': 1310.025, 'segs': [{'end': 807.531, 'src': 'embed', 'start': 755.89, 'weight': 3, 'content': [{'end': 762.172, 'text': 'So though I just click the tab button to indent this, it just added two spaces before each line.', 'start': 755.89, 'duration': 6.282}, {'end': 765.494, 'text': 'So you could also just use the spacebar to indent those.', 'start': 762.473, 'duration': 3.021}, {'end': 768.778, 'text': 'this page is going to have a few different sections.', 'start': 766.536, 'duration': 2.242}, {'end': 776.023, 'text': "So we'll indicate the first section by adding an h3 element with the text cat photos above the comment.", 'start': 769.158, 'duration': 6.865}, {'end': 782.886, 'text': "So I'm going to put h3 cat photos.", 'start': 776.503, 'duration': 6.383}, {'end': 787.772, 'text': "And if I refresh, you'll see that we have this is the h2 heading.", 'start': 783.627, 'duration': 4.145}, {'end': 790.415, 'text': "And this is the h3 heading, it's just a little smaller.", 'start': 787.912, 'duration': 2.503}, {'end': 794.199, 'text': "Now we're going to make this look a little cooler by adding an image.", 'start': 790.835, 'duration': 3.364}, {'end': 799.285, 'text': "So right after this paragraph, I'm going to put an image tag.", 'start': 794.72, 'duration': 4.565}, {'end': 807.531, 'text': 'Now an image tag, an image element does not have a closing tag, it only has an opening tag, it just has one tag.', 'start': 800.046, 'duration': 7.485}], 'summary': 'Using html to create sections with headings and images.', 'duration': 51.641, 'max_score': 755.89, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/916GWv2Qs08/pics/916GWv2Qs08755890.jpg'}, {'end': 979.797, 'src': 'heatmap', 'start': 941.292, 'weight': 0, 'content': [{'end': 947.394, 'text': 'So an alt attribute is basically a way to describe the picture with text.', 'start': 941.292, 'duration': 6.102}, {'end': 952.276, 'text': 'The text inside an alt attribute is used for screen readers to improve accessibility.', 'start': 947.974, 'duration': 4.302}, {'end': 955.557, 'text': "And it's displayed if the image fails to load.", 'start': 952.856, 'duration': 2.701}, {'end': 959.299, 'text': 'So you should always use an alt attribute with every image.', 'start': 956.198, 'duration': 3.101}, {'end': 969.01, 'text': "Now we'll add an anchor element that will link to another website, and anchor element, or the a element can,", 'start': 960.805, 'duration': 8.205}, {'end': 972.872, 'text': 'is used to create a link that you click on to go to a different page or website.', 'start': 969.01, 'duration': 3.862}, {'end': 974.734, 'text': 'So let me show you how to do that.', 'start': 973.313, 'duration': 1.421}, {'end': 976.915, 'text': "It's just a for anchor.", 'start': 975.334, 'duration': 1.581}, {'end': 979.797, 'text': 'And then we have the opening and closing tags.', 'start': 977.735, 'duration': 2.062}], 'summary': 'Use alt attribute for image accessibility and always include anchor element for creating links.', 'duration': 27.718, 'max_score': 941.292, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/916GWv2Qs08/pics/916GWv2Qs08941292.jpg'}, {'end': 1120.826, 'src': 'heatmap', 'start': 1034.287, 'weight': 1, 'content': [{'end': 1036.108, 'text': 'This is not a real website.', 'start': 1034.287, 'duration': 1.821}, {'end': 1037.709, 'text': "It's just an example website for this.", 'start': 1036.147, 'duration': 1.562}, {'end': 1039.99, 'text': 'So it just says it cannot be reached.', 'start': 1037.769, 'duration': 2.221}, {'end': 1042.29, 'text': "But that's how you create a link.", 'start': 1040.63, 'duration': 1.66}, {'end': 1051.552, 'text': "next thing is I'm going to actually put this link into this paragraph, see how we have the word cat photos here, I want the link to be right there.", 'start': 1043.101, 'duration': 8.451}, {'end': 1056.378, 'text': "So I'm going to cut this out, Ctrl or Command X.", 'start': 1051.952, 'duration': 4.426}, {'end': 1062.893, 'text': "And now I'm going to select this text cat photos, delete that Ctrl V to paste in the link.", 'start': 1057.651, 'duration': 5.242}, {'end': 1068.536, 'text': 'If I save that and then refresh, we can now see that the link is right in that sentence.', 'start': 1063.293, 'duration': 5.243}, {'end': 1069.656, 'text': "It's right in that paragraph.", 'start': 1068.576, 'duration': 1.08}, {'end': 1073.718, 'text': 'Now you saw when I clicked on this, it just opens right in the same tab.', 'start': 1070.436, 'duration': 3.282}, {'end': 1078.32, 'text': 'But what if I want to open up into a new tab? Well, we need another attribute.', 'start': 1073.998, 'duration': 4.322}, {'end': 1082.701, 'text': "So, right in this anchor tag I'm going to.", 'start': 1078.82, 'duration': 3.881}, {'end': 1087.382, 'text': "right after the href attribute, I'm going to space and then add another attribute.", 'start': 1082.701, 'duration': 4.681}, {'end': 1089.802, 'text': "it's going to be the target attribute.", 'start': 1087.382, 'duration': 2.42}, {'end': 1093.143, 'text': 'target equals, underscore blank.', 'start': 1089.802, 'duration': 3.341}, {'end': 1101.585, 'text': "Now, if I refresh this, I click here opens up a new tab, the website still doesn't exist, though.", 'start': 1094.843, 'duration': 6.742}, {'end': 1106.839, 'text': "Since this isn't a real website, we're not actually going to use it here.", 'start': 1102.737, 'duration': 4.102}, {'end': 1114.463, 'text': "I'm going to erase this URL here and just put a hash sign or pound or a number sign here.", 'start': 1106.839, 'duration': 7.624}, {'end': 1119.305, 'text': 'This will keep the text as a link, but it will no longer link to anything.', 'start': 1115.103, 'duration': 4.202}, {'end': 1120.826, 'text': "It's just a placeholder.", 'start': 1119.645, 'duration': 1.181}], 'summary': 'Demonstrating link creation and attributes in a website example.', 'duration': 52.25, 'max_score': 1034.287, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/916GWv2Qs08/pics/916GWv2Qs081034287.jpg'}, {'end': 1178.154, 'src': 'embed', 'start': 1149.452, 'weight': 7, 'content': [{'end': 1151.794, 'text': "And now I'm going to put href.", 'start': 1149.452, 'duration': 2.342}, {'end': 1156.517, 'text': "And I'm just going to put it a placeholder link in here.", 'start': 1152.454, 'duration': 4.063}, {'end': 1164.864, 'text': "So if I refresh here, if I move my mouse over the the cat photo, you can see it turns into a pointer because it's a link.", 'start': 1156.958, 'duration': 7.906}, {'end': 1171.969, 'text': "Now, if I click here, you can see nothing really happens, because it's just the placeholder and it's not opening into a new.", 'start': 1164.944, 'duration': 7.025}, {'end': 1173.29, 'text': "it's not opening into a new tab.", 'start': 1171.969, 'duration': 1.321}, {'end': 1178.154, 'text': 'So it just basically refreshes the page or really does nothing when I click there.', 'start': 1173.69, 'duration': 4.464}], 'summary': 'Creating a placeholder link that refreshes the page and does not open in a new tab.', 'duration': 28.702, 'max_score': 1149.452, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/916GWv2Qs08/pics/916GWv2Qs081149452.jpg'}], 'start': 755.89, 'title': 'Html basics and attributes', 'summary': 'Covers using h3 elements, image attributes with html to control behavior, adding images, creating links, and making lists in html. it includes using attributes like src, alt, href, target, ul, and li elements.', 'chapters': [{'end': 833.37, 'start': 755.89, 'title': 'Html elements and attributes', 'summary': 'Demonstrates using h3 elements for section headers and adding image elements with html attributes to control element behavior.', 'duration': 77.48, 'highlights': ['The chapter demonstrates using h3 elements for section headers, which appear a little smaller than h2 headings.', "An image element in HTML does not have a closing tag, and HTML attributes are used inside the opening tag to control the element's behavior.", "HTML attributes are special words used inside the opening tag of an element to control the element's behavior."]}, {'end': 1310.025, 'start': 834.051, 'title': 'Html basics: image, link, and lists', 'summary': 'Covers adding images, creating links, and making lists in html, including using attributes like src and alt, creating anchor elements with href and target attributes, and using ul and li elements for lists.', 'duration': 475.974, 'highlights': ['The image element in HTML can be used to display an image from a URL, with the source of the image specified using the SRC attribute preceded by a space before the closing bracket. The image element is used to display an image from a URL, with the source specified using the SRC attribute.', 'Attributes in HTML are always paired with values, with the value always enclosed in quotation marks, and specific attributes are selected from a predefined set depending on the element. Attributes in HTML are always paired with values enclosed in quotation marks, with specific attributes selected from a predefined set depending on the element.', 'The alt attribute in HTML is used to describe an image with text, improving accessibility for screen readers and displaying if the image fails to load, and it should always be used with every image. The alt attribute in HTML is used to describe an image with text, improving accessibility and displaying if the image fails to load, and it should always be used with every image.', 'The anchor element in HTML, denoted by the a tag, is used to create links to different pages or websites, and the link text is specified between the opening and closing tags. The anchor element in HTML is used to create links to different pages or websites, with the link text specified between the opening and closing tags.', "The href attribute in the anchor element specifies the website being linked to, and the target attribute can be used to open the link in a new tab by setting it to '_blank'. The href attribute in the anchor element specifies the website being linked to, and the target attribute can be used to open the link in a new tab by setting it to '_blank'.", 'Lists in HTML can be created using ul and li elements, with ul representing an unordered list and li representing individual list items. Lists in HTML can be created using ul and li elements, with ul representing an unordered list and li representing individual list items.']}], 'duration': 554.135, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/916GWv2Qs08/pics/916GWv2Qs08755890.jpg', 'highlights': ['The chapter demonstrates using h3 elements for section headers, which appear a little smaller than h2 headings.', "An image element in HTML does not have a closing tag, and HTML attributes are used inside the opening tag to control the element's behavior.", "HTML attributes are special words used inside the opening tag of an element to control the element's behavior.", 'The image element in HTML can be used to display an image from a URL, with the source of the image specified using the SRC attribute preceded by a space before the closing bracket.', 'Attributes in HTML are always paired with values, with the value always enclosed in quotation marks, and specific attributes are selected from a predefined set depending on the element.', 'The alt attribute in HTML is used to describe an image with text, improving accessibility for screen readers and displaying if the image fails to load, and it should always be used with every image.', 'The anchor element in HTML, denoted by the a tag, is used to create links to different pages or websites, and the link text is specified between the opening and closing tags.', "The href attribute in the anchor element specifies the website being linked to, and the target attribute can be used to open the link in a new tab by setting it to '_blank'.", 'Lists in HTML can be created using ul and li elements, with ul representing an unordered list and li representing individual list items.']}, {'end': 2167.21, 'segs': [{'end': 1367.742, 'src': 'embed', 'start': 1310.365, 'weight': 2, 'content': [{'end': 1313.406, 'text': 'And we just have to make sure that images are on the right folder here.', 'start': 1310.365, 'duration': 3.041}, {'end': 1320.788, 'text': 'So if I refresh my page, we should see a picture of lasagna, one of the things that cats love.', 'start': 1314.086, 'duration': 6.702}, {'end': 1327.691, 'text': 'In the description of this video, I have a link so you can download the picture yourself to put it into your website.', 'start': 1321.529, 'duration': 6.162}, {'end': 1330.746, 'text': "Now we're ready for another list.", 'start': 1328.706, 'duration': 2.04}, {'end': 1336.288, 'text': "And this time, it's going to be things cats hate.", 'start': 1331.247, 'duration': 5.041}, {'end': 1343.029, 'text': "So this time, instead of using an unordered list, I'm going to put in an ordered list ol.", 'start': 1337.588, 'duration': 5.441}, {'end': 1345.37, 'text': 'And there are going to be three list items.', 'start': 1343.629, 'duration': 1.741}, {'end': 1349.011, 'text': 'The first item is flea treatment.', 'start': 1347.01, 'duration': 2.001}, {'end': 1355.332, 'text': 'Second list item is thunder.', 'start': 1351.291, 'duration': 4.041}, {'end': 1359.627, 'text': 'And the third list item is other cats.', 'start': 1356.761, 'duration': 2.866}, {'end': 1364.176, 'text': 'Oops Oh, I other cats.', 'start': 1360.388, 'duration': 3.788}, {'end': 1367.742, 'text': "Let's see what that looks like.", 'start': 1366.5, 'duration': 1.242}], 'summary': 'Demonstrating adding images and creating lists for things cats love and hate.', 'duration': 57.377, 'max_score': 1310.365, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/916GWv2Qs08/pics/916GWv2Qs081310365.jpg'}, {'end': 1425.183, 'src': 'embed', 'start': 1400.907, 'weight': 7, 'content': [{'end': 1407.433, 'text': 'So if I refresh here, we see three cute cats, which are things that cats hate.', 'start': 1400.907, 'duration': 6.526}, {'end': 1411.093, 'text': 'well at least according to this website on the internet.', 'start': 1408.291, 'duration': 2.802}, {'end': 1414.415, 'text': 'And as you know, you can believe most things on the internet.', 'start': 1411.613, 'duration': 2.802}, {'end': 1417.738, 'text': "But cats don't just kind of hate these things.", 'start': 1415.356, 'duration': 2.382}, {'end': 1419.559, 'text': 'They really hate these things.', 'start': 1417.958, 'duration': 1.601}, {'end': 1425.183, 'text': "So around the word hate, I'm going to surround it in a strong element.", 'start': 1420.139, 'duration': 5.044}], 'summary': 'Cats really hate three things, according to a website on the internet.', 'duration': 24.276, 'max_score': 1400.907, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/916GWv2Qs08/pics/916GWv2Qs081400907.jpg'}, {'end': 1472.336, 'src': 'heatmap', 'start': 1441.24, 'weight': 0.716, 'content': [{'end': 1444.022, 'text': "And we're going to do something similar for things cats love.", 'start': 1441.24, 'duration': 2.782}, {'end': 1452.446, 'text': "I'm going to surround this in an E m tag to emphasize the word love, which is also the same as italicize.", 'start': 1444.562, 'duration': 7.884}, {'end': 1459.029, 'text': 'So if I save this and refresh, we can see things cats love, and we have italicized here.', 'start': 1452.966, 'duration': 6.063}, {'end': 1463.952, 'text': "Now we're going to add another common thing on websites, which is a form.", 'start': 1459.71, 'duration': 4.242}, {'end': 1472.336, 'text': 'So we are going to add a form element with an opening with an opening and closing form tag.', 'start': 1465.495, 'duration': 6.841}], 'summary': "Adding emphasis to 'love' and including a form element on a website.", 'duration': 31.096, 'max_score': 1441.24, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/916GWv2Qs08/pics/916GWv2Qs081441240.jpg'}, {'end': 1560.771, 'src': 'embed', 'start': 1533.414, 'weight': 8, 'content': [{'end': 1537.937, 'text': 'the first thing in this form is going to be a text input element.', 'start': 1533.414, 'duration': 4.523}, {'end': 1545.221, 'text': "So right here, I'm going to put an input element, and I'm going to add a type.", 'start': 1538.597, 'duration': 6.624}, {'end': 1551.365, 'text': 'And the type is going to be text, this is going to make a text box.', 'start': 1545.822, 'duration': 5.543}, {'end': 1560.771, 'text': 'So if I save this and refresh over here, we can see at the very end, this text box, which I can put all these any any text in this text box down here.', 'start': 1551.665, 'duration': 9.106}], 'summary': "Creating a text input element with type 'text' to make a text box.", 'duration': 27.357, 'max_score': 1533.414, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/916GWv2Qs08/pics/916GWv2Qs081533414.jpg'}, {'end': 1673.252, 'src': 'embed', 'start': 1648.159, 'weight': 1, 'content': [{'end': 1655.024, 'text': 'Clicking the button will send the data from the form to the URL we specified in this action attribute up here.', 'start': 1648.159, 'duration': 6.865}, {'end': 1660.602, 'text': "Let's make it so it's required to put in a URL before you can click the Submit button.", 'start': 1656.098, 'duration': 4.504}, {'end': 1662.003, 'text': "That's pretty simple.", 'start': 1661.122, 'duration': 0.881}, {'end': 1667.767, 'text': "Just in this input to make that input required, I'm going to put an attribute required.", 'start': 1662.503, 'duration': 5.264}, {'end': 1671.01, 'text': 'Most attributes have values.', 'start': 1669.348, 'duration': 1.662}, {'end': 1673.252, 'text': 'But in this case, this does not have a value.', 'start': 1671.13, 'duration': 2.122}], 'summary': 'Making the form input required to submit data to a specified url.', 'duration': 25.093, 'max_score': 1648.159, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/916GWv2Qs08/pics/916GWv2Qs081648159.jpg'}, {'end': 1787.861, 'src': 'embed', 'start': 1753.733, 'weight': 0, 'content': [{'end': 1755.634, 'text': "So I'm going to put label.", 'start': 1753.733, 'duration': 1.901}, {'end': 1762.097, 'text': "And then this closing tag, I'm going to cut that and put it at the end here.", 'start': 1757.135, 'duration': 4.962}, {'end': 1767.2, 'text': 'And you can see it does go to the next line.', 'start': 1762.117, 'duration': 5.083}, {'end': 1768.881, 'text': "And then I'll put a label here.", 'start': 1767.64, 'duration': 1.241}, {'end': 1776.805, 'text': "And then I'll cut this label, and then put it here.", 'start': 1771.798, 'duration': 5.007}, {'end': 1780.11, 'text': "And I'm going to save and refresh.", 'start': 1776.825, 'duration': 3.285}, {'end': 1787.861, 'text': 'And now if I click the text outdoor, the radio button clicks to click the text indoor, the indoor button clicks.', 'start': 1780.651, 'duration': 7.21}], 'summary': 'Adjustments made to labels and radio buttons, enabling outdoor and indoor button clicks.', 'duration': 34.128, 'max_score': 1753.733, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/916GWv2Qs08/pics/916GWv2Qs081753733.jpg'}, {'end': 1850.462, 'src': 'heatmap', 'start': 1820.841, 'weight': 0.82, 'content': [{'end': 1824.945, 'text': "And since I'm adding the same one to every radio button, I'm just going to copy this.", 'start': 1820.841, 'duration': 4.104}, {'end': 1829.871, 'text': "And I'm going to paste it.", 'start': 1826.867, 'duration': 3.004}, {'end': 1835.016, 'text': 'Now if I refresh, we have indoor.', 'start': 1832.293, 'duration': 2.723}, {'end': 1839.761, 'text': 'So when I click one, the other one deselects.', 'start': 1836.578, 'duration': 3.183}, {'end': 1843.918, 'text': "Next up, I'm going to add an ID attribute to these buttons.", 'start': 1840.976, 'duration': 2.942}, {'end': 1850.462, 'text': 'An ID attribute is used to identify specific elements in other sections of HTML, CSS and JavaScript.', 'start': 1844.398, 'duration': 6.064}], 'summary': 'Adding id attribute to radio buttons for element identification.', 'duration': 29.621, 'max_score': 1820.841, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/916GWv2Qs08/pics/916GWv2Qs081820841.jpg'}, {'end': 1942.218, 'src': 'heatmap', 'start': 1896.11, 'weight': 0.725, 'content': [{'end': 1905.343, 'text': "So it's as long as you have a space in between each element, or each attribute, it's going to all all work.", 'start': 1896.11, 'duration': 9.233}, {'end': 1916.087, 'text': "it's considered best practice to set a four attribute on the label element with a value that matches the value of the ID element of the input element.", 'start': 1906.124, 'duration': 9.963}, {'end': 1922.57, 'text': 'This allows assisting technologies to create a linked relationship between the label and the child input element.', 'start': 1916.588, 'duration': 5.982}, {'end': 1924.23, 'text': 'So let me show you how you would do that.', 'start': 1922.97, 'duration': 1.26}, {'end': 1925.091, 'text': "It's very simple.", 'start': 1924.29, 'duration': 0.801}, {'end': 1931.793, 'text': "So for this label, I'm going to put four, and that's going to be set to the same thing as ID, which is indoor.", 'start': 1925.431, 'duration': 6.362}, {'end': 1942.218, 'text': 'So now we know that this label is for this input, because it has the same the for indoor, or by door indoor.', 'start': 1932.153, 'duration': 10.065}], 'summary': "Use 'for' attribute to link label and input element for accessibility.", 'duration': 46.108, 'max_score': 1896.11, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/916GWv2Qs08/pics/916GWv2Qs081896110.jpg'}], 'start': 1310.365, 'title': 'Creating html website and form elements', 'summary': 'Demonstrates creating a basic html website with images, lists, and a form for submitting cat photos. it also explains creating user-friendly form elements like text input, buttons, radio buttons, and checkboxes with their attributes.', 'chapters': [{'end': 1532.145, 'start': 1310.365, 'title': 'Creating a basic html website', 'summary': 'Demonstrates creating a basic html website, including adding images, ordered and unordered lists, and a form element with an action attribute for submitting cat photos.', 'duration': 221.78, 'highlights': ['Adding images and lists to the website The chapter demonstrates adding images of lasagna and cats to the website, and creating an ordered list of things that cats hate, including flea treatment, thunder, and other cats.', "Styling text with strong and emphasis tags The chapter shows how to use the strong tag to bold the word 'hate' and the emphasis tag to italicize the word 'love' on the website.", 'Creating a form element for submitting cat photos The chapter explains adding a form element with an action attribute for submitting cat photos, and mentions that handling form data is beyond the scope of the tutorial.']}, {'end': 2167.21, 'start': 1533.414, 'title': 'Html form elements', 'summary': 'Explains how to create text input, submit button, radio buttons, checkboxes, and their attributes, such as placeholder, required, name, id, and for, leading to the creation of a user-friendly form.', 'duration': 633.796, 'highlights': ["Input element with placeholder text 'cat photo URL' is added to create a text box, allowing users to input data.", "Adding 'required' attribute to the input element makes it mandatory to fill out before submitting, resulting in the prompt 'Please fill out this field' when not filled.", "Creating radio buttons for 'indoor' and 'outdoor' cats, and nesting them within label elements allows users to select one option at a time, enhancing user interaction and experience.", "Setting the 'name' attribute for radio buttons creates a radio button group, ensuring only one answer is provided by the user.", "The 'ID' attribute is added to identify specific elements, enhancing accessibility and linking elements to other sections of HTML, CSS, and JavaScript.", "Utilizing the 'for' attribute on label elements with a value matching the value of the 'ID' element of the input element allows creating a linked relationship between the label and the child input element, improving accessibility."]}], 'duration': 856.845, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/916GWv2Qs08/pics/916GWv2Qs081310365.jpg', 'highlights': ['Adding images and lists to the website The chapter demonstrates adding images of lasagna and cats to the website, and creating an ordered list of things that cats hate, including flea treatment, thunder, and other cats.', "Input element with placeholder text 'cat photo URL' is added to create a text box, allowing users to input data.", "Creating radio buttons for 'indoor' and 'outdoor' cats, and nesting them within label elements allows users to select one option at a time, enhancing user interaction and experience.", "Styling text with strong and emphasis tags The chapter shows how to use the strong tag to bold the word 'hate' and the emphasis tag to italicize the word 'love' on the website.", "Adding 'required' attribute to the input element makes it mandatory to fill out before submitting, resulting in the prompt 'Please fill out this field' when not filled.", "Setting the 'name' attribute for radio buttons creates a radio button group, ensuring only one answer is provided by the user.", "The 'ID' attribute is added to identify specific elements, enhancing accessibility and linking elements to other sections of HTML, CSS, and JavaScript.", "Utilizing the 'for' attribute on label elements with a value matching the value of the 'ID' element of the input element allows creating a linked relationship between the label and the child input element, improving accessibility.", 'Creating a form element for submitting cat photos The chapter explains adding a form element with an action attribute for submitting cat photos, and mentions that handling form data is beyond the scope of the tutorial.']}, {'end': 2718.204, 'segs': [{'end': 2297.098, 'src': 'embed', 'start': 2270.741, 'weight': 2, 'content': [{'end': 2276.545, 'text': 'So now we can see that inside this div, we have the things cats love and the things cats hate.', 'start': 2270.741, 'duration': 5.804}, {'end': 2285.05, 'text': 'So the way that you would often style something like this with CSS, is to add a class attribute.', 'start': 2277.105, 'duration': 7.945}, {'end': 2289.012, 'text': "So I'm gonna put class equals lists.", 'start': 2285.61, 'duration': 3.402}, {'end': 2297.098, 'text': 'Class attributes are very commonly used in HTML, specifically to style with CSS.', 'start': 2290.273, 'duration': 6.825}], 'summary': 'Using class attributes in html to style with css.', 'duration': 26.357, 'max_score': 2270.741, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/916GWv2Qs08/pics/916GWv2Qs082270741.jpg'}, {'end': 2374.002, 'src': 'embed', 'start': 2340.884, 'weight': 0, 'content': [{'end': 2347.027, 'text': "So we have the main section we here's the closing main tag, I'm going to add a footer element.", 'start': 2340.884, 'duration': 6.143}, {'end': 2352.751, 'text': 'Now the stuff inside a footer element is not going to look any different on your page.', 'start': 2347.628, 'duration': 5.123}, {'end': 2356.353, 'text': 'This is mainly for screen readers and SEO purposes.', 'start': 2353.151, 'duration': 3.202}, {'end': 2361.296, 'text': 'So So the different sections of your web page can be identified.', 'start': 2356.753, 'duration': 4.543}, {'end': 2374.002, 'text': "And inside this footer, we're going to put a paragraph tag, it's going to say no copyright, free code, camp.org.", 'start': 2362.236, 'duration': 11.766}], 'summary': "Adding a footer element for accessibility and seo, containing 'no copyright, free code, camp.org'.", 'duration': 33.118, 'max_score': 2340.884, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/916GWv2Qs08/pics/916GWv2Qs082340884.jpg'}, {'end': 2602.875, 'src': 'embed', 'start': 2573.072, 'weight': 1, 'content': [{'end': 2575.192, 'text': 'And then you just put in your payment information.', 'start': 2573.072, 'duration': 2.12}, {'end': 2579.314, 'text': "I'm not going to show you the full account creation process.", 'start': 2576.433, 'duration': 2.881}, {'end': 2582.195, 'text': "But after you get your account created, you'll get logged in.", 'start': 2579.674, 'duration': 2.521}, {'end': 2587.898, 'text': "It's possible during the account creation process, you will have chosen a domain name.", 'start': 2582.675, 'duration': 5.223}, {'end': 2593.14, 'text': "If you haven't, there could be a button on this screen to create a domain name.", 'start': 2588.638, 'duration': 4.502}, {'end': 2602.875, 'text': 'So if I scroll down, I can see at the very bottom amazing cat photos.com, the domain name I got for our awesome website that we just created.', 'start': 2593.868, 'duration': 9.007}], 'summary': "After creating an account, a domain name 'amazing cat photos.com' was obtained for the website.", 'duration': 29.803, 'max_score': 2573.072, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/916GWv2Qs08/pics/916GWv2Qs082573072.jpg'}, {'end': 2679.796, 'src': 'embed', 'start': 2622.242, 'weight': 3, 'content': [{'end': 2624.746, 'text': 'And I go to file manager.', 'start': 2622.242, 'duration': 2.504}, {'end': 2631.751, 'text': "So now I'm going to make sure to go into the public HTML directory.", 'start': 2628.669, 'duration': 3.082}, {'end': 2637.235, 'text': 'And there may be something in this folder, if there is just delete it, so you have nothing in the folder.', 'start': 2632.392, 'duration': 4.843}, {'end': 2645.2, 'text': "And now I'm just going to add my files, I can either drag them in from a folder on my computer, or I can click upload files.", 'start': 2638.075, 'duration': 7.125}, {'end': 2647.242, 'text': "And I'll just go and select the files.", 'start': 2645.881, 'duration': 1.361}, {'end': 2655.267, 'text': 'So here are the three files index.html cat.jpg and lasagna.jpg and open and upload.', 'start': 2647.562, 'duration': 7.705}, {'end': 2663.421, 'text': "And it's as simple as that the website should now work.", 'start': 2658.957, 'duration': 4.464}, {'end': 2668.285, 'text': 'You may have to wait a few hours if you just created your website.', 'start': 2664.102, 'duration': 4.183}, {'end': 2677.674, 'text': "Sometimes it can take a few hours from from after you buy your website until when you can actually go to the URL and we'll go to these files.", 'start': 2668.626, 'duration': 9.048}, {'end': 2679.796, 'text': 'Sometimes it can even take a day.', 'start': 2678.054, 'duration': 1.742}], 'summary': 'Uploading files to website directory, including index.html, cat.jpg, and lasagna.jpg, may require waiting hours or even a day for website to go live.', 'duration': 57.554, 'max_score': 2622.242, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/916GWv2Qs08/pics/916GWv2Qs082622242.jpg'}], 'start': 2167.59, 'title': 'Html elements, styling, and website deployment', 'summary': 'Covers usage of html elements like input, div, class, footer, and metadata elements, focusing on styling through css and adding functionality through external css and javascript files. it also covers deploying a website using hostinger, including selecting hosting options, uploading website files, and accessing the website via a url, highlighting the ease and speed of the process.', 'chapters': [{'end': 2526.072, 'start': 2167.59, 'title': 'Html elements and styling', 'summary': 'Covers the usage of html elements such as input, div, class, footer, and metadata elements like title, with a focus on styling through css and adding functionality through external css and javascript files.', 'duration': 358.482, 'highlights': ['The div element is a general purpose container for other elements and is often used to target with CSS, allowing for easy styling of a whole section of a web page (quantifiable data: usage of div elements in HTML).', 'The class attribute is commonly used in HTML to style elements with CSS, enabling the targeting of all elements with the same class to have consistent styling (quantifiable data: usage of class attribute in HTML for CSS styling).', 'The footer element is mainly for screen readers and SEO purposes, allowing different sections of a web page to be identified, and can include a paragraph tag and a link (quantifiable data: purpose and usage of footer element in HTML).', 'The head section of a website contains metadata elements like title, and links to external CSS and JavaScript files for styling and adding functionality to the page (quantifiable data: purpose and usage of head section for metadata and external files).', "Setting a checkbox or radio button to be checked by default in HTML involves adding the word 'checked' inside the input element, which automatically checks the input (quantifiable data: method for setting default checked status of input elements in HTML)."]}, {'end': 2718.204, 'start': 2526.752, 'title': 'Deploying a website with hostinger', 'summary': 'Covers deploying a website using hostinger, including selecting hosting options, uploading website files, and accessing the website via a url, highlighting the ease and speed of the process.', 'duration': 191.452, 'highlights': ['The website deployment process with Hostinger is outlined, emphasizing the ease and speed of the process, potentially saving time and stress.', 'Instructions on selecting the cheapest hosting option, the single shared hosting, and the recommendation to choose the 12-month option during the checkout process are provided.', 'Step-by-step guidance on uploading website files to the hosting platform is detailed, including accessing the file manager, deleting existing files, and uploading new website files.', 'The timeline for the website to become accessible after creation is explained, indicating that it may take a few hours or even a day for the URL to become functional.', 'The process of accessing the newly deployed website via the URL is demonstrated, showcasing the successful deployment using Hostinger and the created domain name.']}], 'duration': 550.614, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/916GWv2Qs08/pics/916GWv2Qs082167590.jpg', 'highlights': ['The process of accessing the newly deployed website via the URL is demonstrated, showcasing the successful deployment using Hostinger and the created domain name.', 'The div element is a general purpose container for other elements and is often used to target with CSS, allowing for easy styling of a whole section of a web page (quantifiable data: usage of div elements in HTML).', 'The class attribute is commonly used in HTML to style elements with CSS, enabling the targeting of all elements with the same class to have consistent styling (quantifiable data: usage of class attribute in HTML for CSS styling).', 'The footer element is mainly for screen readers and SEO purposes, allowing different sections of a web page to be identified, and can include a paragraph tag and a link (quantifiable data: purpose and usage of footer element in HTML).', 'The head section of a website contains metadata elements like title, and links to external CSS and JavaScript files for styling and adding functionality to the page (quantifiable data: purpose and usage of head section for metadata and external files).', 'The website deployment process with Hostinger is outlined, emphasizing the ease and speed of the process, potentially saving time and stress.']}], 'highlights': ['HTML is used to create web pages, and every website on the internet uses HTML and CSS, with most also using JavaScript.', 'In a website, HTML is the structure, CSS is the style, and JavaScript is the functionality.', 'The process of hosting an HTML page online and the use of code editors, demonstrating the process using CodePen and Visual Studio Code.', 'The importance of naming the main file index.html, as web browsers often look for a file with that exact name.', 'Explaining the structure of HTML elements, including container and standalone elements, with an example of h1 tag and its opening and closing tags.', 'The biggest heading, h1, is used to define the largest heading, while h2, h3, h4, h5, and h6 define smaller headings.', 'Creating a P element is used to generate paragraph text on websites.', 'The chapter demonstrates using h3 elements for section headers, which appear a little smaller than h2 headings.', "An image element in HTML does not have a closing tag, and HTML attributes are used inside the opening tag to control the element's behavior.", "HTML attributes are special words used inside the opening tag of an element to control the element's behavior.", 'The image element in HTML can be used to display an image from a URL, with the source of the image specified using the SRC attribute preceded by a space before the closing bracket.', 'The alt attribute in HTML is used to describe an image with text, improving accessibility for screen readers and displaying if the image fails to load, and it should always be used with every image.', 'The anchor element in HTML, denoted by the a tag, is used to create links to different pages or websites, and the link text is specified between the opening and closing tags.', "The href attribute in the anchor element specifies the website being linked to, and the target attribute can be used to open the link in a new tab by setting it to '_blank'.", 'Lists in HTML can be created using ul and li elements, with ul representing an unordered list and li representing individual list items.', 'Adding images and lists to the website, and creating an ordered list of things that cats hate, including flea treatment, thunder, and other cats.', "Input element with placeholder text 'cat photo URL' is added to create a text box, allowing users to input data.", "Creating radio buttons for 'indoor' and 'outdoor' cats, and nesting them within label elements allows users to select one option at a time, enhancing user interaction and experience.", 'Styling text with strong and emphasis tags.', "Adding 'required' attribute to the input element makes it mandatory to fill out before submitting, resulting in the prompt 'Please fill out this field' when not filled.", "Setting the 'name' attribute for radio buttons creates a radio button group, ensuring only one answer is provided by the user.", "The 'ID' attribute is added to identify specific elements, enhancing accessibility and linking elements to other sections of HTML, CSS, and JavaScript.", "Utilizing the 'for' attribute on label elements with a value matching the value of the 'ID' element of the input element allows creating a linked relationship between the label and the child input element, improving accessibility.", 'The process of accessing the newly deployed website via the URL is demonstrated, showcasing the successful deployment using Hostinger and the created domain name.', 'The div element is a general purpose container for other elements and is often used to target with CSS, allowing for easy styling of a whole section of a web page.', 'The class attribute is commonly used in HTML to style elements with CSS, enabling the targeting of all elements with the same class to have consistent styling.', 'The footer element is mainly for screen readers and SEO purposes, allowing different sections of a web page to be identified, and can include a paragraph tag and a link.', 'The head section of a website contains metadata elements like title, and links to external CSS and JavaScript files for styling and adding functionality to the page.', 'The website deployment process with Hostinger is outlined, emphasizing the ease and speed of the process, potentially saving time and stress.']}