title
Learn HTML5 - full course with code samples

description
This course is the quickest way to learn the basics of HTML. Watch it here on YouTube or check out the interactive version at Scrimba, where you'll be able to play with the code as well: https://scrimba.com/g/ghtml HTML is one of the core building blocks on the web, as it's what holds the content on all the websites you visit. Thus, HTML is a must-have skill for all web developers. While HTML is a huge subject, the basics can be learned quickly. This course aims at taking you from absolute beginner to proficient in HTML in less than an hour. Throughout the lectures, you'll be building a neat-looking website from scratch together with the brilliant instructor Eric Tirado. Get the 'index.css' file from this course here: https://gist.github.com/beaucarnes/ec37029de1b774d857c50828b5c837d9 What you'll learn in this web development html crash course: - Intro to web architecture (0:00) - HTML documents (4:25) - Nesting (7:19) - Head elements and scripts (11:23) - Layout elements (17:33) - Figure and image elements (20:28) - Embedding videos (26:54) - Navbar and list items (31:12) - Headings (34:05) - Text formatting (36:04) - Tables (42:15) - Links and final touches (49:27) You can follow the creator on Twitter here: https://twitter.com/iamtirado -- Learn to code for free and get a developer job: https://www.freecodecamp.com Read hundreds of articles on programming: https://medium.freecodecamp.com

detail
{'title': 'Learn HTML5 - full course with code samples', 'heatmap': [{'end': 1242.347, 'start': 1202.954, 'weight': 0.85}, {'end': 2035.446, 'start': 1961.502, 'weight': 0.785}, {'end': 2458.7, 'start': 2412.227, 'weight': 0.721}], 'summary': 'This full course on html5 emphasizes its significance as the standard markup language for web pages, covers html basics, css essentials, web design fundamentals, embedding and styling responsive videos, video embedding, table creation, and navigation enhancement for creating realistic and functional websites.', 'chapters': [{'end': 245.748, 'segs': [{'end': 45.683, 'src': 'embed', 'start': 4.642, 'weight': 0, 'content': [{'end': 7.963, 'text': 'Welcome to this interactive screen by course on HTML.', 'start': 4.642, 'duration': 3.321}, {'end': 14.705, 'text': "In this introduction, I'm going to explain the role of HTML on the internet and why it is so important.", 'start': 8.463, 'duration': 6.242}, {'end': 21.547, 'text': 'What is HTML? It is the standard markup language for creating web pages and web applications.', 'start': 15.385, 'duration': 6.162}, {'end': 27.309, 'text': 'Along with CSS and JavaScript, it is one of the cornerstones of the World Wide Web.', 'start': 21.988, 'duration': 5.321}, {'end': 32.011, 'text': 'Every website and every web application will render HTML to the browser.', 'start': 27.669, 'duration': 4.342}, {'end': 34.613, 'text': 'Let me explain how the web works in essence.', 'start': 32.651, 'duration': 1.962}, {'end': 40.318, 'text': 'Once you have developed a website, you need to host it on a server to make it accessible to the world wide web.', 'start': 35.013, 'duration': 5.305}, {'end': 45.683, 'text': "The server says here's my number, call me maybe that is what we call an IP address,", 'start': 40.639, 'duration': 5.044}], 'summary': 'Html is a key language for web development, essential for every website and web application, along with css and javascript.', 'duration': 41.041, 'max_score': 4.642, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug4642.jpg'}, {'end': 129.542, 'src': 'embed', 'start': 85.587, 'weight': 3, 'content': [{'end': 96.39, 'text': 'html provides tags to name different types of content, or rather elements on your website, for example the header element, the links, styles, etc.', 'start': 85.587, 'duration': 10.803}, {'end': 104.873, 'text': 'this helps your browser understands what it reads to render it properly, Even though the browser only needs HTML to render a website.', 'start': 96.39, 'duration': 8.483}, {'end': 112.495, 'text': 'think of it as a skeleton with bare contents that you will then make it dynamic and more beautiful using JavaScript and CSS.', 'start': 104.873, 'duration': 7.622}, {'end': 116.917, 'text': 'You can think of JavaScript as the brains of your website or web application.', 'start': 112.996, 'duration': 3.921}, {'end': 125.86, 'text': 'It can modify the HTML and CSS and re-render elements of the page based on user input or logic or changes in data from a server.', 'start': 117.477, 'duration': 8.383}, {'end': 129.542, 'text': 'This makes your HTML dynamic rather than static.', 'start': 126.381, 'duration': 3.161}], 'summary': 'Html provides structure for web content; javascript modifies it for dynamic rendering.', 'duration': 43.955, 'max_score': 85.587, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug85587.jpg'}, {'end': 227.621, 'src': 'embed', 'start': 200.834, 'weight': 1, 'content': [{'end': 204.419, 'text': 'And hopefully after this course, you will have HTML in your pocket.', 'start': 200.834, 'duration': 3.585}, {'end': 210.328, 'text': "In this course, I'll share with you the boilerplate tags and declarations that you'll need on every project.", 'start': 205.301, 'duration': 5.027}, {'end': 213.453, 'text': "We'll practice element nesting and indentation.", 'start': 210.769, 'duration': 2.684}, {'end': 216.157, 'text': "We'll learn how to use layout elements semantically.", 'start': 213.753, 'duration': 2.404}, {'end': 220.999, 'text': 'or properly, learn how to use metadata, link scripts and style elements.', 'start': 216.457, 'duration': 4.542}, {'end': 224.74, 'text': 'We will use attributes, IDs, classes along the way.', 'start': 221.399, 'duration': 3.341}, {'end': 227.621, 'text': "We'll learn how to embed images, video and audio.", 'start': 224.78, 'duration': 2.841}], 'summary': 'Learn html basics and best practices in this course.', 'duration': 26.787, 'max_score': 200.834, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug200834.jpg'}], 'start': 4.642, 'title': "Html's role and importance in web development", 'summary': 'Explains the significance of html as the standard markup language for creating web pages, emphasizing its role as the cornerstone of the world wide web. it also highlights the foundational roles of html, css, and javascript in web development, providing a thorough explanation of their importance and relevance to building projects with best practices of html5.', 'chapters': [{'end': 60.532, 'start': 4.642, 'title': 'Html role & importance', 'summary': 'Explains the role of html as the standard markup language for creating web pages and web applications, and its importance as one of the cornerstones of the world wide web, including the process of hosting a website and rendering files to the browser.', 'duration': 55.89, 'highlights': ['HTML is the standard markup language for creating web pages and web applications, along with CSS and JavaScript.', 'Every website and web application renders HTML to the browser.', 'The server hosts the website and sends the hosted files back to the browser to be rendered.', 'The server has an IP address, often associated with a domain name for easy access.']}, {'end': 245.748, 'start': 60.992, 'title': 'Importance of html, css, and javascript in web development', 'summary': 'Explains the foundational roles of html, css, and javascript in web development, highlighting html as the skeleton, css as the skin, and javascript as the brains of a website, while also emphasizing the importance of understanding html for web developers, with a thorough explanation of the course content and its relevance to building a project with the most useful elements and best practices of html5.', 'duration': 184.756, 'highlights': ['HTML is the skeleton of a website, providing tags to name different types of content, and is essential for rendering a website.', 'JavaScript acts as the brains of a website, enabling dynamic modifications to HTML and CSS based on user input or changes in data from a server.', 'CSS serves as the skin of a website, enhancing user experience, implementing design principles, and making the site responsive for mobile and desktop viewing.', 'Understanding HTML is crucial for web developers, and the course will cover essential HTML elements, layout, metadata, scripts, styles, attributes, media embedding, text formatting, lists, forms, and tables.']}], 'duration': 241.106, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug4642.jpg', 'highlights': ['HTML is the standard markup language for creating web pages and web applications, along with CSS and JavaScript.', 'Understanding HTML is crucial for web developers, and the course will cover essential HTML elements, layout, metadata, scripts, styles, attributes, media embedding, text formatting, lists, forms, and tables.', 'Every website and web application renders HTML to the browser.', 'HTML is the skeleton of a website, providing tags to name different types of content, and is essential for rendering a website.', 'JavaScript acts as the brains of a website, enabling dynamic modifications to HTML and CSS based on user input or changes in data from a server.']}, {'end': 666.902, 'segs': [{'end': 371.176, 'src': 'embed', 'start': 345.24, 'weight': 2, 'content': [{'end': 353.025, 'text': 'All browsers will look for a file called index.html in order to render it as the homepage, also known as the landing page.', 'start': 345.24, 'duration': 7.785}, {'end': 359.85, 'text': 'For this reason, every project needs to contain an index.html file that the browser can load by default.', 'start': 353.606, 'duration': 6.244}, {'end': 366.134, 'text': "Now I'm going to go ahead and rename this to index.html and I'm going to save it.", 'start': 360.811, 'duration': 5.323}, {'end': 371.176, 'text': "and now in the browser here I'm going to type index.html and it will render Hello World.", 'start': 366.134, 'duration': 5.042}], 'summary': 'Browsers render index.html as homepage; every project needs this file.', 'duration': 25.936, 'max_score': 345.24, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug345240.jpg'}, {'end': 412.363, 'src': 'embed', 'start': 384.923, 'weight': 0, 'content': [{'end': 389.926, 'text': 'html Then drag it onto your browser and it will render whatever text you placed inside.', 'start': 384.923, 'duration': 5.003}, {'end': 397.912, 'text': 'There are more advanced and free text editors out there that you can use to edit HTML and other programming languages, such as Atom,', 'start': 390.706, 'duration': 7.206}, {'end': 403.277, 'text': 'Visual Studio Code and Sublime Text, to name a few.', 'start': 397.912, 'duration': 5.365}, {'end': 406.7, 'text': 'To create a JavaScript file, you need to use the extension of .', 'start': 403.998, 'duration': 2.702}, {'end': 412.363, 'text': 'js And to create a CSS file, we need the extension of CSS.', 'start': 406.7, 'duration': 5.663}], 'summary': 'Various text editors like atom, vs code, sublime text available for editing html and javascript files with .js extension and css files with .css extension.', 'duration': 27.44, 'max_score': 384.923, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug384923.jpg'}, {'end': 492.908, 'src': 'embed', 'start': 445.206, 'weight': 1, 'content': [{'end': 448.349, 'text': "In this lesson, we're going to be practicing nesting.", 'start': 445.206, 'duration': 3.143}, {'end': 454.314, 'text': "And I've prepared some CSS so that we can visually understand nesting and how it works.", 'start': 448.669, 'duration': 5.645}, {'end': 459.918, 'text': "And we're going to begin by connecting that CSS style sheet to our HTML document.", 'start': 454.874, 'duration': 5.044}, {'end': 461.62, 'text': "So let's go ahead and begin there.", 'start': 460.339, 'duration': 1.281}, {'end': 462.601, 'text': "Let's make a link.", 'start': 461.64, 'duration': 0.961}, {'end': 464.923, 'text': 'And you do that with the link tag.', 'start': 463.401, 'duration': 1.522}, {'end': 467.065, 'text': 'So you create link.', 'start': 464.943, 'duration': 2.122}, {'end': 471.789, 'text': "And then we're going to type REL, which stands for relationship.", 'start': 467.645, 'duration': 4.144}, {'end': 477.694, 'text': "And you're letting the browser know what relationship this style sheet has to HTML document.", 'start': 472.569, 'duration': 5.125}, {'end': 479.075, 'text': 'That would be style sheet.', 'start': 477.774, 'duration': 1.301}, {'end': 484.18, 'text': "Let's go ahead now and put the reference to the index.css.", 'start': 479.816, 'duration': 4.364}, {'end': 488.224, 'text': 'Okay, so we have named this CSS style sheet as index.css.', 'start': 484.2, 'duration': 4.024}, {'end': 491.247, 'text': 'It could be named styles.css or anything else.', 'start': 488.304, 'duration': 2.943}, {'end': 492.908, 'text': 'And just make sure it has the same name.', 'start': 491.547, 'duration': 1.361}], 'summary': 'Lesson on practicing css nesting with connecting style sheet to html document.', 'duration': 47.702, 'max_score': 445.206, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug445206.jpg'}, {'end': 571.837, 'src': 'embed', 'start': 522.886, 'weight': 6, 'content': [{'end': 529.992, 'text': "it is pretty much for any content that you want to divide from other content that you're not sure if you should use other semantic tags for.", 'start': 522.886, 'duration': 7.106}, {'end': 538.318, 'text': 'and as you can see, i created this div element with a opening tag and a closing tag wrapped by the body opening tag and the body closing tag.', 'start': 529.992, 'duration': 8.326}, {'end': 539.979, 'text': "so it's a child of the body.", 'start': 538.318, 'duration': 1.661}, {'end': 541.04, 'text': "now let's add a class.", 'start': 539.979, 'duration': 1.061}, {'end': 546.806, 'text': 'By typing class equals in quotation marks.', 'start': 542.984, 'duration': 3.822}, {'end': 547.646, 'text': "I'm going to put white.", 'start': 546.806, 'duration': 0.84}, {'end': 552.768, 'text': "And now you're going to see that this element has a white background.", 'start': 548.807, 'duration': 3.961}, {'end': 554.149, 'text': 'It has a width and a height.', 'start': 552.828, 'duration': 1.321}, {'end': 560.892, 'text': 'This is because in the CSS, I have applied a style to any element that has the class of white.', 'start': 554.349, 'duration': 6.543}, {'end': 571.837, 'text': 'So think of white or a class as a cell phone number that the CSS can call and then attribute styles to any element that has that class.', 'start': 561.252, 'duration': 10.585}], 'summary': "Using div for styling, added class 'white' with css styles for background, width, and height.", 'duration': 48.951, 'max_score': 522.886, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug522885.jpg'}, {'end': 643.444, 'src': 'embed', 'start': 597.508, 'weight': 4, 'content': [{'end': 600.708, 'text': 'Also JavaScript uses IDs and you communicate with elements.', 'start': 597.508, 'duration': 3.2}, {'end': 602.849, 'text': "So we're going to leave this as class of white.", 'start': 601.069, 'duration': 1.78}, {'end': 605.69, 'text': "Okay, I'm going to make another element here.", 'start': 602.869, 'duration': 2.821}, {'end': 610.731, 'text': "And I'm going to call it div class green.", 'start': 606.35, 'duration': 4.381}, {'end': 613.952, 'text': 'All right, so now we have two elements.', 'start': 611.871, 'duration': 2.081}, {'end': 615.832, 'text': "And as you can see, they're not inside each other.", 'start': 614.152, 'duration': 1.68}, {'end': 616.713, 'text': "They're next to each other.", 'start': 615.872, 'duration': 0.841}, {'end': 618.473, 'text': "And that's because they are siblings.", 'start': 616.753, 'duration': 1.72}, {'end': 622.374, 'text': 'Now what would happen if I grabbed this div with the class of green?', 'start': 619.053, 'duration': 3.321}, {'end': 628.814, 'text': 'and put it inside the opening and closing tags of the div with the class of white?', 'start': 623.991, 'duration': 4.823}, {'end': 630.195, 'text': "I'm gonna hit save.", 'start': 628.834, 'duration': 1.361}, {'end': 632.697, 'text': 'All right, there we go.', 'start': 631.656, 'duration': 1.041}, {'end': 636.72, 'text': 'Now that green div is visually also inside of the other element.', 'start': 632.917, 'duration': 3.803}, {'end': 637.78, 'text': 'It is wrapped by it.', 'start': 636.8, 'duration': 0.98}, {'end': 643.444, 'text': "Okay, so I'm gonna create proper indentation here so that we can visually understand what's going on.", 'start': 638.661, 'duration': 4.783}], 'summary': 'Javascript uses ids to communicate with elements. demonstrates creating and organizing elements visually.', 'duration': 45.936, 'max_score': 597.508, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug597508.jpg'}], 'start': 245.968, 'title': 'Learning html basics', 'summary': 'Covers creating an html document, the role of index.html, connecting css stylesheet, basics of html elements, classes, ids, and nesting elements.', 'chapters': [{'end': 492.908, 'start': 245.968, 'title': 'Learning html with css and javascript', 'summary': 'Explains the process of creating an html document, understanding the role of index.html as the default landing page, and connecting a css stylesheet to the html document.', 'duration': 246.94, 'highlights': ['The importance of naming an HTML document with the .html extension and creating an index.html file as the default landing page for rendering', 'Guidance on connecting a CSS stylesheet to the HTML document using the link tag and specifying the relationship as stylesheet', 'Introduction to creating JavaScript and CSS files with the required file extensions (.js for JavaScript and .css for CSS)']}, {'end': 666.902, 'start': 493.489, 'title': 'Html basics: elements and styling', 'summary': 'Introduces the basics of html elements, classes, and ids, demonstrating the application of styles through classes, the unique usage of ids, and the concept of nesting elements within each other.', 'duration': 173.413, 'highlights': ['The chapter explains the purpose of the div element in HTML, highlighting its common usage and lack of semantic meaning.', 'It elaborates on applying styles to elements using classes, comparing a class to a cell phone number through which CSS can attribute styles to any element with that class.', 'The difference between classes and IDs is detailed, emphasizing that IDs are meant for single elements, while classes can be used on multiple elements.', 'The concept of nesting elements is demonstrated, showing how placing one div inside another visually wraps the inner div within the outer div.', 'The demonstration of creating a div inside another div visually, through proper indentation, illustrates the concept of nesting elements within each other.']}], 'duration': 420.934, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug245968.jpg', 'highlights': ['Introduction to creating JavaScript and CSS files with the required file extensions (.js for JavaScript and .css for CSS)', 'Guidance on connecting a CSS stylesheet to the HTML document using the link tag and specifying the relationship as stylesheet', 'The importance of naming an HTML document with the .html extension and creating an index.html file as the default landing page for rendering', 'The concept of nesting elements is demonstrated, showing how placing one div inside another visually wraps the inner div within the outer div', 'The demonstration of creating a div inside another div visually, through proper indentation, illustrates the concept of nesting elements within each other', 'The difference between classes and IDs is detailed, emphasizing that IDs are meant for single elements, while classes can be used on multiple elements', 'It elaborates on applying styles to elements using classes, comparing a class to a cell phone number through which CSS can attribute styles to any element with that class', 'The chapter explains the purpose of the div element in HTML, highlighting its common usage and lack of semantic meaning']}, {'end': 959.538, 'segs': [{'end': 745.619, 'src': 'embed', 'start': 718.322, 'weight': 1, 'content': [{'end': 725.088, 'text': 'And that is because your browser is looking for the content of the title tag and placing that on the tab on your browser.', 'start': 718.322, 'duration': 6.766}, {'end': 731.493, 'text': 'So here we can say this HTML document is called Learning HTML.', 'start': 725.708, 'duration': 5.785}, {'end': 734.355, 'text': 'And there are other meta tags that you should add.', 'start': 731.733, 'duration': 2.622}, {'end': 739.137, 'text': 'For example, the meta char set equals UTF-8.', 'start': 734.415, 'duration': 4.722}, {'end': 745.619, 'text': 'So this is telling the browser what character set you are using to write your HTML document with.', 'start': 739.557, 'duration': 6.062}], 'summary': "Html document titled 'learning html' uses meta tags like char set=utf-8.", 'duration': 27.297, 'max_score': 718.322, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug718322.jpg'}, {'end': 805.353, 'src': 'embed', 'start': 777.909, 'weight': 0, 'content': [{'end': 784.051, 'text': "There's one meta tag that you must always have on a document, especially if you're going to be building a responsive website.", 'start': 777.909, 'duration': 6.142}, {'end': 787.071, 'text': 'And that is called the viewport meta tag.', 'start': 784.291, 'duration': 2.78}, {'end': 788.412, 'text': "So here we're going to type name.", 'start': 787.111, 'duration': 1.301}, {'end': 791.455, 'text': 'viewport and on the content.', 'start': 789.153, 'duration': 2.302}, {'end': 805.353, 'text': "we're going to specify the width of the site is always the device width comma, and let that initial scale be 100%.", 'start': 791.455, 'duration': 13.898}], 'summary': 'The viewport meta tag is essential for building a responsive website, specifying the width as the device width and the initial scale as 100%.', 'duration': 27.444, 'max_score': 777.909, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug777909.jpg'}], 'start': 666.902, 'title': 'Html and css essentials', 'summary': 'Covers html head elements, meta tags, and viewport tag, emphasizing their significance in defining content, character set, and responsive web design. it also discusses importing style sheets, embedding styles, and applying styles through different methods.', 'chapters': [{'end': 777.648, 'start': 666.902, 'title': 'Html head elements and meta tags', 'summary': 'Covers the usage of head elements and meta tags in html, emphasizing the importance of title tags, meta char set, and description meta tags in defining the content and character set of the html document.', 'duration': 110.746, 'highlights': ['The chapter emphasizes the importance of title tags in defining the title of the HTML document and its display on the browser tab.', 'The instructor demonstrates the usage of meta tags, such as meta char set equals UTF-8, to specify the character set used for the HTML document.', 'The lesson highlights the usage of the description meta tag to provide a brief description of the HTML website, showcasing the self-closing nature of meta tags and their attribute-value structure.']}, {'end': 829.279, 'start': 777.909, 'title': 'Viewport meta tag for responsive websites', 'summary': 'Emphasizes the importance of the viewport meta tag for building responsive websites, highlighting that it allows the browser to render content at a 100% scale regardless of the browser width, and must always be included for a beautiful, responsive website.', 'duration': 51.37, 'highlights': ['The viewport meta tag specifies the width of the site as the device width and allows the browser to render everything at a 100% scale, ensuring content displays properly regardless of browser width.', 'Emphasizes the necessity of including the viewport meta tag when building a responsive website for proper rendering and beautiful design.']}, {'end': 959.538, 'start': 829.439, 'title': 'Importing style sheets and applying styles', 'summary': 'Discusses importing external style sheets from the web, embedding styles in the document, using the header one element, and applying styles through inline, internal, and external methods.', 'duration': 130.099, 'highlights': ['Fontawesome.com provides fonts accessible through HTML classes, hosted on the web.', 'Header one (H1) element should be used once per page to denote the most important text, with an example of applying text alignment and color using inline styles.', 'Explanation of how styles are applied in the document, including the order of precedence between embedded, external, and inline styles.']}], 'duration': 292.636, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug666902.jpg', 'highlights': ['The viewport meta tag ensures proper rendering and beautiful design for responsive websites.', 'The importance of title tags in defining the title of the HTML document and its display on the browser tab.', 'The instructor demonstrates the usage of meta tags, such as meta char set equals UTF-8, to specify the character set used for the HTML document.', 'The lesson highlights the usage of the description meta tag to provide a brief description of the HTML website.']}, {'end': 1607.139, 'segs': [{'end': 1025.44, 'src': 'embed', 'start': 960.079, 'weight': 0, 'content': [{'end': 963.2, 'text': "So that's two ways that you can apply styles on your page.", 'start': 960.079, 'duration': 3.121}, {'end': 965.802, 'text': "Now there's another element that you can use called script.", 'start': 963.4, 'duration': 2.402}, {'end': 969.225, 'text': 'so that you can run JavaScript right on your website.', 'start': 966.602, 'duration': 2.623}, {'end': 973.789, 'text': "And I'm going to run a simple script that says, hello universe.", 'start': 969.485, 'duration': 4.304}, {'end': 975.511, 'text': 'And this is going to give an error.', 'start': 974.27, 'duration': 1.241}, {'end': 976.232, 'text': "Let's save it.", 'start': 975.671, 'duration': 0.561}, {'end': 982.178, 'text': "And that is because I don't have anything with the ID of H1 on the document.", 'start': 976.772, 'duration': 5.406}, {'end': 989.164, 'text': "So let's type ID, H1, hit save, and we still have the error.", 'start': 983.339, 'duration': 5.825}, {'end': 994.969, 'text': "And that is because we need to put script after the element that we're trying to modify with JavaScript.", 'start': 989.604, 'duration': 5.365}, {'end': 996.69, 'text': 'Hello universe, there you go.', 'start': 995.469, 'duration': 1.221}, {'end': 1000.053, 'text': 'I replaced the content of hello world with hello universe.', 'start': 996.85, 'duration': 3.203}, {'end': 1003.477, 'text': "okay. so i'm not trying to give you a lesson on javascript.", 'start': 1000.493, 'duration': 2.984}, {'end': 1010.365, 'text': "but even if you don't know javascript, you can import javascript plugins that other people have developed into your site.", 'start': 1003.477, 'duration': 6.888}, {'end': 1017.934, 'text': "so you always want to make sure that it's inside the body, but it needs to be after the rest of the content of your site.", 'start': 1010.365, 'duration': 7.569}, {'end': 1023.219, 'text': "and now let's say i want this to come from an external javascript file.", 'start': 1018.955, 'duration': 4.264}, {'end': 1025.44, 'text': "so let's go ahead and cut this out.", 'start': 1023.219, 'duration': 2.221}], 'summary': 'The transcript discusses applying styles, running javascript on a website, and importing javascript plugins.', 'duration': 65.361, 'max_score': 960.079, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug960079.jpg'}, {'end': 1089.258, 'src': 'embed', 'start': 1052.844, 'weight': 1, 'content': [{'end': 1053.185, 'text': "Let's go.", 'start': 1052.844, 'duration': 0.341}, {'end': 1065.371, 'text': "In this lesson, we're going to be building this beautiful layout using the layout elements that have been provided to us using HTML5.", 'start': 1058.007, 'duration': 7.364}, {'end': 1069.934, 'text': 'Let me tell you a little bit about how we used to do it before we had these layout elements.', 'start': 1066.192, 'duration': 3.742}, {'end': 1075.097, 'text': 'We used to use the div element to separate all kinds of different content on our page.', 'start': 1070.434, 'duration': 4.663}, {'end': 1079.96, 'text': 'And to differentiate one div from another, we would use classes.', 'start': 1076.157, 'duration': 3.803}, {'end': 1089.258, 'text': 'And you can do this today, but HTML5 has provided us tags for the most commonly used layout elements.', 'start': 1083.217, 'duration': 6.041}], 'summary': 'Building a layout using html5 layout elements, eliminating the need for excessive div and classes.', 'duration': 36.414, 'max_score': 1052.844, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug1052844.jpg'}, {'end': 1242.347, 'src': 'heatmap', 'start': 1202.954, 'weight': 0.85, 'content': [{'end': 1207.276, 'text': "I'm going to replace this header type here for the nav element.", 'start': 1202.954, 'duration': 4.322}, {'end': 1212.378, 'text': "This is also a very common element and they've given us an element for that.", 'start': 1207.936, 'duration': 4.442}, {'end': 1216.359, 'text': "And I'm just going to type here, navigation and hit save.", 'start': 1212.458, 'duration': 3.901}, {'end': 1218.657, 'text': 'All right, here we go.', 'start': 1217.816, 'duration': 0.841}, {'end': 1222.34, 'text': "We've built a basic layout using the layout elements of HTML5.", 'start': 1218.697, 'duration': 3.643}, {'end': 1225.964, 'text': "On the next lesson, we're going to embed some images and a video.", 'start': 1222.721, 'duration': 3.243}, {'end': 1227.065, 'text': 'See you there.', 'start': 1226.725, 'duration': 0.34}, {'end': 1237.503, 'text': "In this lesson, we're going to play around with the figure and image elements.", 'start': 1233.939, 'duration': 3.564}, {'end': 1240.245, 'text': "Let's go ahead and get started with the image element.", 'start': 1237.843, 'duration': 2.402}, {'end': 1242.347, 'text': 'So here is the image tag.', 'start': 1240.886, 'duration': 1.461}], 'summary': 'Lesson on html5 layout elements and embedding images and video.', 'duration': 39.393, 'max_score': 1202.954, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug1202954.jpg'}, {'end': 1285.206, 'src': 'embed', 'start': 1258.243, 'weight': 7, 'content': [{'end': 1262.247, 'text': "So you're just going to put a forward slash there at the end of the tag.", 'start': 1258.243, 'duration': 4.004}, {'end': 1267.012, 'text': 'And it has two attributes that are required.', 'start': 1263.148, 'duration': 3.864}, {'end': 1269.475, 'text': 'And one of those is source.', 'start': 1267.032, 'duration': 2.443}, {'end': 1271.577, 'text': 'And the other one.', 'start': 1270.696, 'duration': 0.881}, {'end': 1276.002, 'text': 'And the other one is alternate.', 'start': 1271.597, 'duration': 4.405}, {'end': 1277.603, 'text': 'And you type it as such.', 'start': 1276.582, 'duration': 1.021}, {'end': 1285.206, 'text': 'For the source attribute, the value is simply the name of your image or a link to the image.', 'start': 1279.383, 'duration': 5.823}], 'summary': 'Html tag requires two attributes: source and alternate.', 'duration': 26.963, 'max_score': 1258.243, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug1258243.jpg'}, {'end': 1370.153, 'src': 'embed', 'start': 1332.297, 'weight': 4, 'content': [{'end': 1339.739, 'text': 'This alternate attribute, the value that you place here.', 'start': 1332.297, 'duration': 7.442}, {'end': 1341.72, 'text': 'now for the alt attribute.', 'start': 1339.739, 'duration': 1.981}, {'end': 1351.403, 'text': "What you're telling the browser is, if you cannot load the image, what alternate information it can show?", 'start': 1345.1, 'duration': 6.303}, {'end': 1370.153, 'text': 'So here you simply type information about the image such as a laptop with a mouse on a desk and a pair of glasses.', 'start': 1351.823, 'duration': 18.33}], 'summary': 'The alt attribute provides alternate information for images if they cannot load.', 'duration': 37.856, 'max_score': 1332.297, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug1332297.jpg'}, {'end': 1512.019, 'src': 'embed', 'start': 1473.237, 'weight': 5, 'content': [{'end': 1480.02, 'text': "And what's special about the figure element is that it has a child element that goes along with it called FigCaption.", 'start': 1473.237, 'duration': 6.783}, {'end': 1488.465, 'text': 'And in here you can write a caption that is directly related to the content inside the figure element.', 'start': 1480.521, 'duration': 7.944}, {'end': 1493.847, 'text': 'This could be at the top of the figure element or at the bottom as I am placing it here.', 'start': 1489.365, 'duration': 4.482}, {'end': 1512.019, 'text': "And here I'm going to describe And here I'm going to describe the figure image.", 'start': 1493.907, 'duration': 18.112}], 'summary': 'The figure element has a related figcaption, which can be placed at the top or bottom of the figure for describing image content.', 'duration': 38.782, 'max_score': 1473.237, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug1473237.jpg'}, {'end': 1607.139, 'src': 'embed', 'start': 1580.424, 'weight': 6, 'content': [{'end': 1593.649, 'text': 'So as you can see, I have applied quite a bit of So as you can see, I have modified quite a bit the figure image, the figure element.', 'start': 1580.424, 'duration': 13.225}, {'end': 1601.475, 'text': 'So as you can see, I have modified quite a bit the figure element and the contents of the figure elements, such as the image and the caption.', 'start': 1594.489, 'duration': 6.986}, {'end': 1603.817, 'text': "So don't feel like it's going to limit you.", 'start': 1601.995, 'duration': 1.822}, {'end': 1607.139, 'text': 'It is simply more semantic to use it when you need it.', 'start': 1604.157, 'duration': 2.982}], 'summary': 'Semantic modifications made to figure element for improved usability and flexibility.', 'duration': 26.715, 'max_score': 1580.424, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug1580424.jpg'}], 'start': 960.079, 'title': 'Web design fundamentals', 'summary': 'Covers applying styles using css, running javascript, building layout with html5 elements, and using image and figure elements in html, emphasizing attributes and the importance of script placement and external file import.', 'chapters': [{'end': 1025.44, 'start': 960.079, 'title': 'Applying styles and running javascript on web pages', 'summary': 'Discusses applying styles using css and running javascript on web pages, highlighting the importance of script placement and importing external javascript files.', 'duration': 65.361, 'highlights': ['You can apply styles on your page using CSS and run JavaScript directly on your website.', "It's essential to place the script after the element you're modifying with JavaScript, as demonstrated by the 'hello universe' script.", 'Importing JavaScript plugins developed by others is possible, and they should be placed within the body of the site, after the rest of the content.']}, {'end': 1331.037, 'start': 1025.44, 'title': 'Building layout with html5', 'summary': 'Covers building a basic layout using html5 layout elements, including header, footer, section, main, article, aside, and nav, and also demonstrates how to use the image element with required attributes such as source and alternate.', 'duration': 305.597, 'highlights': ['The chapter covers building a basic layout using HTML5 layout elements', 'demonstrates how to use the image element with required attributes such as source and alternate']}, {'end': 1607.139, 'start': 1332.297, 'title': 'Html image and figure elements', 'summary': "Covers the usage of html image and figure elements, emphasizing the importance of the 'alt' attribute for providing alternate information for visually impaired users and the 'figcaption' element for adding captions to figure elements, with a demonstration of applying styles to the figure content.", 'duration': 274.842, 'highlights': ["The importance of the 'alt' attribute for visually impaired users", "Usage and significance of 'figcaption' element", 'Demonstration of applying styles to figure content']}], 'duration': 647.06, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug960079.jpg', 'highlights': ['You can apply styles on your page using CSS and run JavaScript directly on your website.', 'The chapter covers building a basic layout using HTML5 layout elements', 'Importing JavaScript plugins developed by others is possible, and they should be placed within the body of the site, after the rest of the content.', "It's essential to place the script after the element you're modifying with JavaScript, as demonstrated by the 'hello universe' script.", "The importance of the 'alt' attribute for visually impaired users", "Usage and significance of 'figcaption' element", 'Demonstration of applying styles to figure content', 'demonstrates how to use the image element with required attributes such as source and alternate']}, {'end': 1866.575, 'segs': [{'end': 1666.182, 'src': 'embed', 'start': 1607.8, 'weight': 0, 'content': [{'end': 1611.182, 'text': 'And you are completely free to make it look how you need it to.', 'start': 1607.8, 'duration': 3.382}, {'end': 1615.546, 'text': 'And you are completely free to make it look just how you need it.', 'start': 1611.743, 'duration': 3.803}, {'end': 1626.296, 'text': "Hey guys, in this lesson, we're going to learn how to embed a video using HTML.", 'start': 1621.274, 'duration': 5.022}, {'end': 1629.657, 'text': 'The first way is using the video element.', 'start': 1626.956, 'duration': 2.701}, {'end': 1638.58, 'text': "I'm going to type video and I'm going to treat it as a closing, self-closing element or a void element, just like we did with image,", 'start': 1629.677, 'duration': 8.903}, {'end': 1640.381, 'text': 'meaning it has no closing tag.', 'start': 1638.58, 'duration': 1.801}, {'end': 1644.162, 'text': 'In it, I can type source.', 'start': 1642.322, 'duration': 1.84}, {'end': 1648.944, 'text': 'And for the source, I can type the name of the video.', 'start': 1646.723, 'duration': 2.221}, {'end': 1654.831, 'text': 'If it was in my root directory, it would be the name of the video.', 'start': 1650.427, 'duration': 4.404}, {'end': 1659.676, 'text': 'If it was inside a folder, I would type the folder name and then the video name.', 'start': 1654.911, 'duration': 4.765}, {'end': 1666.182, 'text': "But because I don't have that, I'm going to go ahead and use an external video source right here.", 'start': 1660.617, 'duration': 5.565}], 'summary': 'Learn to embed video using html, with the video element and external source.', 'duration': 58.382, 'max_score': 1607.8, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug1607800.jpg'}, {'end': 1719.131, 'src': 'embed', 'start': 1691.194, 'weight': 1, 'content': [{'end': 1695.436, 'text': 'There are other attributes you can use, such as autoplay, so the video plays by itself.', 'start': 1691.194, 'duration': 4.242}, {'end': 1697.977, 'text': "There's one called muted, so that it is muted by default.", 'start': 1695.476, 'duration': 2.501}, {'end': 1701.499, 'text': 'Loop, so the video plays over and over again by itself.', 'start': 1698.517, 'duration': 2.982}, {'end': 1707.423, 'text': 'Preload So the video downloads or buffers before the user hits play.', 'start': 1702.639, 'duration': 4.784}, {'end': 1708.865, 'text': "And there's also width.", 'start': 1707.864, 'duration': 1.001}, {'end': 1713.369, 'text': "I'm going to give it 600 pixels and there's also height.", 'start': 1710.887, 'duration': 2.482}, {'end': 1719.131, 'text': 'Can I give it a height of 350 pixels? All right.', 'start': 1714.909, 'duration': 4.222}], 'summary': 'Attributes like autoplay, muted, loop, preload, width, and height can be utilized for video customization.', 'duration': 27.937, 'max_score': 1691.194, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug1691194.jpg'}, {'end': 1769.859, 'src': 'embed', 'start': 1742.239, 'weight': 3, 'content': [{'end': 1745.787, 'text': "And now you'll see that the boundaries of the video should be responsive.", 'start': 1742.239, 'duration': 3.548}, {'end': 1750.438, 'text': 'Now the video elements can take the source as a nested element.', 'start': 1746.649, 'duration': 3.789}, {'end': 1758.492, 'text': "For that I'm going to need to create a closing tag for the video element, and the nested element is going to be called source,", 'start': 1752.389, 'duration': 6.103}, {'end': 1762.274, 'text': "and in here I'm going to paste the source attribute that I had before.", 'start': 1758.492, 'duration': 3.782}, {'end': 1769.859, 'text': "Now I'm going to use the type attribute and I'm going to tell the browser this is a video of the format mp4.", 'start': 1763.015, 'duration': 6.844}], 'summary': 'Video boundaries are responsive, source as nested element, type attribute for mp4 format.', 'duration': 27.62, 'max_score': 1742.239, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug1742239.jpg'}, {'end': 1871.72, 'src': 'embed', 'start': 1845.318, 'weight': 4, 'content': [{'end': 1848.94, 'text': 'But it has put the Scrimba website within my document.', 'start': 1845.318, 'duration': 3.622}, {'end': 1855.065, 'text': 'Now, this is the method that some platforms will give you a video to be embedded on your site, such as YouTube.', 'start': 1849.621, 'duration': 5.444}, {'end': 1859.268, 'text': "If you find a video on YouTube, right below there's going to be a tab that says Embed.", 'start': 1855.185, 'duration': 4.083}, {'end': 1866.575, 'text': 'Go ahead and click that and you can copy the code there, which is an iframe and paste it.', 'start': 1859.788, 'duration': 6.787}, {'end': 1870.679, 'text': 'Those are the two ways in which you can embed videos in HTML.', 'start': 1867.315, 'duration': 3.364}, {'end': 1871.72, 'text': 'See you in the next one.', 'start': 1870.979, 'duration': 0.741}], 'summary': 'Two methods to embed videos in html: using scrimba website or youtube with iframe code.', 'duration': 26.402, 'max_score': 1845.318, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug1845318.jpg'}], 'start': 1607.8, 'title': 'Embedding video using html and creating responsive videos', 'summary': 'Explains embedding video using html, demonstrating the use of the video element and specifying source attributes, as well as discussing embedding and styling responsive videos using html attributes and css, covering controls, autoplay, muted, loop, preload, width, height, and nested source elements.', 'chapters': [{'end': 1666.182, 'start': 1607.8, 'title': 'Embedding video using html', 'summary': 'Explains how to embed a video using html, demonstrating the use of the video element and specifying source attributes for external videos.', 'duration': 58.382, 'highlights': ['The video element in HTML can be used to embed a video, and it is a self-closing element, similar to the image tag.', 'One way to specify the source of the video is by using the source attribute within the video element, mentioning the file name or the path if the video is located in a folder.', 'The lesson emphasizes using an external video source when the video is not in the root directory or a specific folder.']}, {'end': 1866.575, 'start': 1666.863, 'title': 'Embedding responsive videos', 'summary': 'Discusses how to embed and style responsive videos using html attributes like controls, autoplay, muted, loop, preload, width, and height, and also explains the use of css for creating a responsive wrapper class and the nested source element for different video formats.', 'duration': 199.712, 'highlights': ['The chapter discusses how to embed and style responsive videos using HTML attributes like controls, autoplay, muted, loop, preload, width, and height.', 'The chapter explains the use of CSS for creating a responsive wrapper class and the nested source element for different video formats.', 'The chapter also mentions the use of the iframe element for embedding videos from platforms like YouTube, demonstrating the process of embedding YouTube videos using iframe code.']}], 'duration': 258.775, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug1607800.jpg', 'highlights': ['The video element in HTML is a self-closing element, similar to the image tag.', 'The chapter discusses how to embed and style responsive videos using HTML attributes like controls, autoplay, muted, loop, preload, width, and height.', 'The lesson emphasizes using an external video source when the video is not in the root directory or a specific folder.', 'The chapter explains the use of CSS for creating a responsive wrapper class and the nested source element for different video formats.', 'The chapter also mentions the use of the iframe element for embedding videos from platforms like YouTube.']}, {'end': 2513.548, 'segs': [{'end': 2035.446, 'src': 'heatmap', 'start': 1893.093, 'weight': 0, 'content': [{'end': 1899.657, 'text': "that's because it's going to contain certain elements and those elements are li, which stands for list item,", 'start': 1893.093, 'duration': 6.564}, {'end': 1902.479, 'text': 'and those have an opening and a closing tag.', 'start': 1900.758, 'duration': 1.721}, {'end': 1905.641, 'text': 'so ul stands for unordered list.', 'start': 1902.479, 'duration': 3.162}, {'end': 1909.424, 'text': "i'm gonna type here item one hit, save.", 'start': 1905.641, 'duration': 3.783}, {'end': 1913.366, 'text': "okay, it's an unordered list, meaning it has no numbers.", 'start': 1909.424, 'duration': 3.942}, {'end': 1919.23, 'text': 'if you want one with numbers, you do an ordered list with an ol.', 'start': 1913.366, 'duration': 5.864}, {'end': 1920.811, 'text': 'there we go, it has a number.', 'start': 1919.23, 'duration': 1.581}, {'end': 1922.532, 'text': "perfect, let's go back to ul.", 'start': 1920.811, 'duration': 1.721}, {'end': 1929.498, 'text': 'Now list items behave as block elements, meaning they will stack vertically.', 'start': 1924.213, 'duration': 5.285}, {'end': 1934.262, 'text': 'They will not go in one line, but you can override that with CSS.', 'start': 1929.898, 'duration': 4.364}, {'end': 1938.806, 'text': "I'm going to go ahead and put this style sheet back and let's see what happened to that UL.", 'start': 1935.043, 'duration': 3.763}, {'end': 1940.107, 'text': 'There we go.', 'start': 1939.607, 'duration': 0.5}, {'end': 1941.388, 'text': 'We have it in a row.', 'start': 1940.127, 'duration': 1.261}, {'end': 1945.051, 'text': "I'm going to get rid of this text that I don't need anymore.", 'start': 1942.369, 'duration': 2.682}, {'end': 1949.095, 'text': "Okay I'm going to add some anchor tags.", 'start': 1945.071, 'duration': 4.024}, {'end': 1959.541, 'text': "And i'm just going to put a pound symbol there, close the opening time for the anchor and have another anchor closing tag here.", 'start': 1950.598, 'duration': 8.943}, {'end': 1961.502, 'text': 'okay, perfect.', 'start': 1959.541, 'duration': 1.961}, {'end': 1970.565, 'text': 'so now these are links inside of a list item and that should add the default link styles, perfect.', 'start': 1961.502, 'duration': 9.063}, {'end': 1977.751, 'text': "I can have this outside of my header for a different style that I've prepared.", 'start': 1973.328, 'duration': 4.423}, {'end': 1980.352, 'text': 'So these are different ways that you can have an app.', 'start': 1978.311, 'duration': 2.041}, {'end': 1982.773, 'text': 'You can have it below a header or inside a header.', 'start': 1980.372, 'duration': 2.401}, {'end': 1987.456, 'text': 'As a matter of fact, you could have it as a sidebar or off canvas.', 'start': 1982.793, 'duration': 4.663}, {'end': 1994.36, 'text': 'If you notice that all of my content is wrapped by a div that has a class of center.', 'start': 1988.236, 'duration': 6.124}, {'end': 1996.861, 'text': 'And that is because I have styles for sidebars.', 'start': 1994.42, 'duration': 2.441}, {'end': 1999.983, 'text': "I'm just going to go ahead and type those up real quick.", 'start': 1997.261, 'duration': 2.722}, {'end': 2006.323, 'text': 'as well as a bar to toggle it, triggering some JavaScript functions.', 'start': 2001.519, 'duration': 4.804}, {'end': 2008.104, 'text': "Let's take a look.", 'start': 2006.343, 'duration': 1.761}, {'end': 2011.827, 'text': "Isn't that neat? Okay.", 'start': 2009.706, 'duration': 2.121}, {'end': 2017.772, 'text': 'Now I can also copy this unordered list and put it on a sidebar, for example.', 'start': 2012.428, 'duration': 5.344}, {'end': 2021.335, 'text': "And let's see what that looks like.", 'start': 2020.274, 'duration': 1.061}, {'end': 2024.037, 'text': 'Awesome Beautiful.', 'start': 2022.476, 'duration': 1.561}, {'end': 2025.678, 'text': 'Okay, so there we go.', 'start': 2024.738, 'duration': 0.94}, {'end': 2027.84, 'text': 'We have learned how to use lists.', 'start': 2025.738, 'duration': 2.102}, {'end': 2034.245, 'text': 'Remember, if you want to see what this stuff looks like without styles, just remove the CSS.', 'start': 2028.661, 'duration': 5.584}, {'end': 2035.446, 'text': 'Take a look.', 'start': 2034.945, 'duration': 0.501}], 'summary': 'The transcript covers creating unordered and ordered lists, styling with css, adding anchor tags, and applying different layout options.', 'duration': 84.658, 'max_score': 1893.093, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug1893093.jpg'}, {'end': 2112.245, 'src': 'embed', 'start': 2079.484, 'weight': 4, 'content': [{'end': 2081.523, 'text': "And I'm going to type a little description here.", 'start': 2079.484, 'duration': 2.039}, {'end': 2084.03, 'text': 'All right.', 'start': 2083.57, 'duration': 0.46}, {'end': 2087.492, 'text': 'The browser will render these at different sizes.', 'start': 2084.731, 'duration': 2.761}, {'end': 2091.373, 'text': 'H1 is the largest and H6 as the smallest.', 'start': 2087.752, 'duration': 3.621}, {'end': 2098.738, 'text': 'Now, we may be tempted to use H1 through 6 to style our text and make them larger or smaller.', 'start': 2092.034, 'duration': 6.704}, {'end': 2106.702, 'text': 'But the browser and search engines and screen readers want to know what the most important text of your site is.', 'start': 2099.258, 'duration': 7.444}, {'end': 2112.245, 'text': 'So use H1 through 6 to determine importance, not the size.', 'start': 2107.222, 'duration': 5.023}], 'summary': 'Use h1 through 6 to determine importance, not size.', 'duration': 32.761, 'max_score': 2079.484, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug2079484.jpg'}, {'end': 2243.364, 'src': 'embed', 'start': 2210.174, 'weight': 3, 'content': [{'end': 2218.001, 'text': "I'm gonna make this bold and we're gonna use the bold element, which is simply a B and we place the opening tag there.", 'start': 2210.174, 'duration': 7.827}, {'end': 2222.586, 'text': "And I'm gonna put the closing tag over here after HTML.", 'start': 2218.061, 'duration': 4.525}, {'end': 2223.186, 'text': 'There we go.', 'start': 2222.826, 'duration': 0.36}, {'end': 2225.168, 'text': "Now that's bold.", 'start': 2224.267, 'duration': 0.901}, {'end': 2226.349, 'text': 'Pretty cool.', 'start': 2225.788, 'duration': 0.561}, {'end': 2227.99, 'text': 'We got some other ones.', 'start': 2227.149, 'duration': 0.841}, {'end': 2229.011, 'text': 'We got italics.', 'start': 2228.03, 'duration': 0.981}, {'end': 2234.635, 'text': "I'm going to turn cascading style sheets and CSS into italics.", 'start': 2229.571, 'duration': 5.064}, {'end': 2236.636, 'text': 'So that is simply the eye.', 'start': 2234.795, 'duration': 1.841}, {'end': 2240.639, 'text': "And let's hit save.", 'start': 2239.878, 'duration': 0.761}, {'end': 2243.364, 'text': "And let's take a look.", 'start': 2242.683, 'duration': 0.681}], 'summary': 'Demonstrating use of bold and italics in html and css.', 'duration': 33.19, 'max_score': 2210.174, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug2210174.jpg'}, {'end': 2458.7, 'src': 'heatmap', 'start': 2412.227, 'weight': 0.721, 'content': [{'end': 2413.048, 'text': "Let's take a look at that.", 'start': 2412.227, 'duration': 0.821}, {'end': 2414.788, 'text': 'All right, beautiful.', 'start': 2414.028, 'duration': 0.76}, {'end': 2420.49, 'text': 'By default, it is usually indented a little bit from the left of where the paragraphs are aligned.', 'start': 2415.408, 'duration': 5.082}, {'end': 2423.992, 'text': 'But I have styled it so that it looks like this.', 'start': 2421.471, 'duration': 2.521}, {'end': 2427.673, 'text': 'The block quote tag can also take the attribute of cite.', 'start': 2425.212, 'duration': 2.461}, {'end': 2431.795, 'text': 'And you can put a citation to the source of this quote.', 'start': 2428.433, 'duration': 3.362}, {'end': 2434.056, 'text': "I'm just going to say Twitter.", 'start': 2431.975, 'duration': 2.081}, {'end': 2441.503, 'text': 'and here we go perfect, awesome.', 'start': 2435.636, 'duration': 5.867}, {'end': 2450.432, 'text': "we also have a tag of code which is just letting the browser know that you're putting code inside of this element,", 'start': 2441.503, 'duration': 8.929}, {'end': 2458.7, 'text': "and i'm going to paste some css in here just to see what it looks like All right.", 'start': 2450.432, 'duration': 8.268}], 'summary': 'Styling block quotes and adding code tags in html with an example from twitter.', 'duration': 46.473, 'max_score': 2412.227, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug2412227.jpg'}, {'end': 2518.29, 'src': 'embed', 'start': 2489.3, 'weight': 5, 'content': [{'end': 2493.586, 'text': "Now, I don't want all of this indentation that I used to keep my code pretty.", 'start': 2489.3, 'duration': 4.286}, {'end': 2498.773, 'text': "So unfortunately, I'm going to have to get rid of all this indentation.", 'start': 2494.207, 'duration': 4.566}, {'end': 2503.323, 'text': "And let's take a look at it again.", 'start': 2502.182, 'duration': 1.141}, {'end': 2504.563, 'text': 'Right Perfect.', 'start': 2503.943, 'duration': 0.62}, {'end': 2505.464, 'text': 'Beautiful There we go.', 'start': 2504.743, 'duration': 0.721}, {'end': 2509.706, 'text': 'And that is how you use the code and the pre tag and the block quotes.', 'start': 2506.084, 'duration': 3.622}, {'end': 2513.548, 'text': "I'm going to teach you one more tag called the quote tag.", 'start': 2510.026, 'duration': 3.522}, {'end': 2518.29, 'text': "And for that, I'm just going to replace this mark tag for a queue.", 'start': 2514.388, 'duration': 3.902}], 'summary': 'Demonstrating usage of code, pre, blockquote, and q tags.', 'duration': 28.99, 'max_score': 2489.3, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug2489300.jpg'}], 'start': 1867.315, 'title': 'Html basics and video embedding', 'summary': 'Covers embedding videos in html, building navigation bars using list items, and emphasizing the usage of ul and ol for lists, behavior of list items, and anchor tags for links. it also includes the usage of headings, paragraphs, basic text formatting, and introduction of break, block quote, code, and pre tags.', 'chapters': [{'end': 1999.983, 'start': 1867.315, 'title': 'Html video embedding and list items', 'summary': 'Explains how to embed videos in html and build a navigation bar using list items, highlighting the usage of ul and ol for unordered and ordered lists, the behavior of list items as block elements, and the inclusion of anchor tags for links.', 'duration': 132.668, 'highlights': ['The chapter explains the usage of ul and ol for unordered and ordered lists, showcasing the creation of list items and the distinction in their display, with ul representing an unordered list and ol representing an ordered list.', 'The chapter demonstrates the behavior of list items as block elements, highlighting how they stack vertically by default and can be modified with CSS to display in a row.', 'The chapter showcases the inclusion of anchor tags within list items to create links, emphasizing the default link styles applied and the flexibility to place them inside or outside of a header.']}, {'end': 2513.548, 'start': 2001.519, 'title': 'Html basics: lists, headings, and paragraphs', 'summary': 'Covers the usage of lists, headings, and paragraphs in html, emphasizing the importance of using h1-h6 for determining text importance, demonstrating basic text formatting with bold, italics, emphasis, strong, and mark tags, and introducing the break, block quote, code, and pre tags for structuring and formatting content.', 'duration': 512.029, 'highlights': ['The importance of using H1-H6 for determining text importance', 'Demonstrating basic text formatting with bold, italics, emphasis, strong, and mark tags', 'Introducing the break, block quote, code, and pre tags for structuring and formatting content']}], 'duration': 646.233, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug1867315.jpg', 'highlights': ['The chapter explains the usage of ul and ol for unordered and ordered lists, showcasing the creation of list items and the distinction in their display, with ul representing an unordered list and ol representing an ordered list.', 'The chapter demonstrates the behavior of list items as block elements, highlighting how they stack vertically by default and can be modified with CSS to display in a row.', 'The chapter showcases the inclusion of anchor tags within list items to create links, emphasizing the default link styles applied and the flexibility to place them inside or outside of a header.', 'Demonstrating basic text formatting with bold, italics, emphasis, strong, and mark tags', 'The importance of using H1-H6 for determining text importance', 'Introducing the break, block quote, code, and pre tags for structuring and formatting content']}, {'end': 3173.699, 'segs': [{'end': 2654.211, 'src': 'embed', 'start': 2625.972, 'weight': 1, 'content': [{'end': 2629.914, 'text': 'And there is another element that a table row can nest.', 'start': 2625.972, 'duration': 3.942}, {'end': 2634.015, 'text': 'And that is the TH, which stands for table header.', 'start': 2630.174, 'duration': 3.841}, {'end': 2638.597, 'text': "I'm going to replace this with header and let's see what that looks like.", 'start': 2636.036, 'duration': 2.561}, {'end': 2646.04, 'text': 'Even though the browser applies some styling by default, this styling right here comes from CSS.', 'start': 2640.098, 'duration': 5.942}, {'end': 2650.702, 'text': 'Now the table header element, as well as the table data element can take an attribute.', 'start': 2646.56, 'duration': 4.142}, {'end': 2654.211, 'text': 'that is called col span.', 'start': 2651.67, 'duration': 2.541}], 'summary': 'Table row can nest table header (th) and apply col span attribute.', 'duration': 28.239, 'max_score': 2625.972, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug2625972.jpg'}, {'end': 2782.881, 'src': 'embed', 'start': 2753.708, 'weight': 2, 'content': [{'end': 2758.43, 'text': "In this lesson, we're going to learn how to use some of the more advanced elements for tables.", 'start': 2753.708, 'duration': 4.722}, {'end': 2761.751, 'text': 'There are three other elements.', 'start': 2759.53, 'duration': 2.221}, {'end': 2769.193, 'text': 'There are three other elements in tables that allows you to group certain.', 'start': 2765.051, 'duration': 4.142}, {'end': 2782.881, 'text': 'So we have group table data under table rose and we have all of the table rose under our table elements.', 'start': 2773.055, 'duration': 9.826}], 'summary': 'Learn advanced table elements with three additional table elements for grouping data.', 'duration': 29.173, 'max_score': 2753.708, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug2753708.jpg'}, {'end': 2857.928, 'src': 'embed', 'start': 2826.349, 'weight': 0, 'content': [{'end': 2832.134, 'text': 'The call group tag specifies a group of one or more columns in a table so that we can format it.', 'start': 2826.349, 'duration': 5.785}, {'end': 2839, 'text': 'And it is useful so that we can apply styles to entire columns instead of repeating the styles for each cell in each row.', 'start': 2832.294, 'duration': 6.706}, {'end': 2846.687, 'text': 'All right, now we can nest an element called call so that we can apply a style to that whole column.', 'start': 2839.641, 'duration': 7.046}, {'end': 2857.928, 'text': "And I'm gonna choose Background color, let's do the blue violet color that we're using on our site.", 'start': 2848.309, 'duration': 9.619}], 'summary': 'Use call group tag to format table columns with blue violet background color.', 'duration': 31.579, 'max_score': 2826.349, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug2826349.jpg'}, {'end': 3069.42, 'src': 'embed', 'start': 3035.584, 'weight': 3, 'content': [{'end': 3044.348, 'text': "And for the form that we have on the bottom of our page, I'm going to add the ID of contact.", 'start': 3035.584, 'duration': 8.764}, {'end': 3054.254, 'text': "So now, now that we have these IDs, I'm going to type them in the values for each one of these links.", 'start': 3046.624, 'duration': 7.63}, {'end': 3063.778, 'text': "So the ID of top, the ID of quote, the ID of contact, and let's try these out.", 'start': 3054.354, 'duration': 9.424}, {'end': 3065.899, 'text': "So I'm going to hit save, top.", 'start': 3063.878, 'duration': 2.021}, {'end': 3067.559, 'text': "Okay, I'm at the top already.", 'start': 3066.239, 'duration': 1.32}, {'end': 3069.42, 'text': "Let's hit quote.", 'start': 3067.579, 'duration': 1.841}], 'summary': 'Adding ids to form and links, testing functionality.', 'duration': 33.836, 'max_score': 3035.584, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug3035584.jpg'}, {'end': 3144.751, 'src': 'embed', 'start': 3097.194, 'weight': 5, 'content': [{'end': 3103.279, 'text': "Now, let's say there was a folder here on the left that said pages and the next.html document was inside the pages folder.", 'start': 3097.194, 'duration': 6.085}, {'end': 3107.603, 'text': 'I would have to put the folder name here first and then the document name.', 'start': 3103.8, 'duration': 3.803}, {'end': 3111.106, 'text': 'But we can leave it like this since next is at the root there.', 'start': 3108.123, 'duration': 2.983}, {'end': 3113.167, 'text': "I'm going to hit save.", 'start': 3111.126, 'duration': 2.041}, {'end': 3113.788, 'text': "Let's try that out.", 'start': 3113.187, 'duration': 0.601}, {'end': 3117.332, 'text': 'Awesome Next.html.', 'start': 3115.251, 'duration': 2.081}, {'end': 3119.874, 'text': 'We have linked to a separate document in the same directory.', 'start': 3117.352, 'duration': 2.522}, {'end': 3123.076, 'text': 'So we can see it has different content and different colors,', 'start': 3120.415, 'duration': 2.661}, {'end': 3127.379, 'text': 'because that document has different IDs and classes and I was able to apply different styles.', 'start': 3123.076, 'duration': 4.303}, {'end': 3130.821, 'text': "Awesome Let's go back to the homepage and let's try the sidebar here.", 'start': 3128, 'duration': 2.821}, {'end': 3133.703, 'text': 'This sidebar does not yet work.', 'start': 3130.841, 'duration': 2.862}, {'end': 3135.865, 'text': "So let's go ahead and fix that.", 'start': 3133.723, 'duration': 2.142}, {'end': 3142.89, 'text': "So now I'm just going to copy this UL over to my off canvas sidebar.", 'start': 3136.025, 'duration': 6.865}, {'end': 3144.751, 'text': 'Fix indentation.', 'start': 3143.81, 'duration': 0.941}], 'summary': 'Linked next.html with different content and styles. fixing off-canvas sidebar.', 'duration': 47.557, 'max_score': 3097.194, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug3097194.jpg'}], 'start': 2514.388, 'title': 'Html tables and navigation enhancement', 'summary': 'Covers the basics of creating tables in html and advanced elements like t head, t body, and t foot, along with enhancing website navigation and linking, resulting in a more realistic and functional website.', 'chapters': [{'end': 2967.778, 'start': 2514.388, 'title': 'Html tables basics and advanced elements', 'summary': 'Covers the basics of creating tables in html including the table, table row, and table data elements, along with advanced elements such as t head, t body, t foot, and col group, discussing their attributes and styling options.', 'duration': 453.39, 'highlights': ['The basics of creating tables in HTML include the table, table row, and table data elements, with a demonstration of applying CSS styles and attributes like col span and row span.', 'Advanced elements like T head, T body, T foot, and col group are explained, emphasizing their role in grouping and styling table content.', 'Demonstration of applying styles to entire columns using the col group and call elements, along with examples of using attributes like span to control column spans.']}, {'end': 3173.699, 'start': 2972.509, 'title': 'Enhancing website navigation and linking', 'summary': 'Covers enhancing website navigation and linking by adding ids, linking to separate documents in the same directory, and fixing the sidebar, resulting in a more realistic and functional website.', 'duration': 201.19, 'highlights': ['The chapter demonstrates adding IDs to elements such as main, block quote, and form, resulting in easier navigation and linking on the website.', 'It emphasizes creating links to actual IDs on the page, showcasing the use of IDs like top, quote, and contact, and testing their functionality, enhancing the user experience.', 'The chapter showcases linking to a separate document in the same directory, next.html, and highlights the ability to apply different styles and content, contributing to a more diverse and dynamic website.', 'It concludes by fixing the non-functional sidebar, resulting in a fully operational and user-friendly website, empowering the user to further develop their HTML skills and knowledge.']}], 'duration': 659.311, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DPnqb74Smug/pics/DPnqb74Smug2514388.jpg', 'highlights': ['Demonstration of applying styles to entire columns using the col group and call elements, along with examples of using attributes like span to control column spans.', 'The basics of creating tables in HTML include the table, table row, and table data elements, with a demonstration of applying CSS styles and attributes like col span and row span.', 'Advanced elements like T head, T body, T foot, and col group are explained, emphasizing their role in grouping and styling table content.', 'The chapter demonstrates adding IDs to elements such as main, block quote, and form, resulting in easier navigation and linking on the website.', 'It emphasizes creating links to actual IDs on the page, showcasing the use of IDs like top, quote, and contact, and testing their functionality, enhancing the user experience.', 'The chapter showcases linking to a separate document in the same directory, next.html, and highlights the ability to apply different styles and content, contributing to a more diverse and dynamic website.', 'It concludes by fixing the non-functional sidebar, resulting in a fully operational and user-friendly website, empowering the user to further develop their HTML skills and knowledge.']}], 'highlights': ['HTML is the standard markup language for creating web pages and web applications, along with CSS and JavaScript.', 'Understanding HTML is crucial for web developers, and the course will cover essential HTML elements, layout, metadata, scripts, styles, attributes, media embedding, text formatting, lists, forms, and tables.', 'Every website and web application renders HTML to the browser.', 'HTML is the skeleton of a website, providing tags to name different types of content, and is essential for rendering a website.', 'JavaScript acts as the brains of a website, enabling dynamic modifications to HTML and CSS based on user input or changes in data from a server.', 'Introduction to creating JavaScript and CSS files with the required file extensions (.js for JavaScript and .css for CSS)', 'Guidance on connecting a CSS stylesheet to the HTML document using the link tag and specifying the relationship as stylesheet', 'The importance of naming an HTML document with the .html extension and creating an index.html file as the default landing page for rendering', 'The concept of nesting elements is demonstrated, showing how placing one div inside another visually wraps the inner div within the outer div', 'The viewport meta tag ensures proper rendering and beautiful design for responsive websites.', 'The importance of title tags in defining the title of the HTML document and its display on the browser tab.', 'You can apply styles on your page using CSS and run JavaScript directly on your website.', 'The chapter covers building a basic layout using HTML5 layout elements', 'The video element in HTML is a self-closing element, similar to the image tag.', 'The chapter discusses how to embed and style responsive videos using HTML attributes like controls, autoplay, muted, loop, preload, width, and height.', 'The chapter explains the usage of ul and ol for unordered and ordered lists, showcasing the creation of list items and the distinction in their display, with ul representing an unordered list and ol representing an ordered list.', 'Demonstration of applying styles to entire columns using the col group and call elements, along with examples of using attributes like span to control column spans.', 'The basics of creating tables in HTML include the table, table row, and table data elements, with a demonstration of applying CSS styles and attributes like col span and row span.', 'Advanced elements like T head, T body, T foot, and col group are explained, emphasizing their role in grouping and styling table content.', 'The chapter demonstrates adding IDs to elements such as main, block quote, and form, resulting in easier navigation and linking on the website.', 'It emphasizes creating links to actual IDs on the page, showcasing the use of IDs like top, quote, and contact, and testing their functionality, enhancing the user experience.', 'The chapter showcases linking to a separate document in the same directory, next.html, and highlights the ability to apply different styles and content, contributing to a more diverse and dynamic website.', 'It concludes by fixing the non-functional sidebar, resulting in a fully operational and user-friendly website, empowering the user to further develop their HTML skills and knowledge.']}