title
HTML & CSS Full Course for free 🌎 (2023)

description
#HTML #CSS #course ⭐ TIME STAMPS ⭐ #1 00:00:00 Introduction to HTML 🌎 00:01:56 VSCode download 00:02:38 project folder setup 00:02:57 index.html 00:03:16 live server extension 00:03:35 html basics #2 00:11:07 hyperlinks 👈 #3 00:15:15 images 🖼️ #4 00:21:33 audio 🔊 #5 00:26:49 video 🎥 #6 00:31:20 favicons 🗿 #7 00:34:19 text formatting 💬 #8 00:38:10 span & div 🏁 #9 00:42:57 lists 📄 #10 00:49:31 tables 📊 #11 00:54:13 buttons 🔘 #12 00:59:28 forms 📝 #13 01:17:22 headers & footers 🤯 #14 01:23:10 Introduction to CSS 🎨 #15 01:31:10 colors 🖌️ #16 01:35:22 fonts 🔤 #17 01:42:42 borders 🖼 #18 01:47:09 shadows 👥 #19 01:50:27 margins ↔️ #20 01:55:41 float 🎈 #21 02:00:08 overflow 🌊 #22 02:03:31 display property 🧱 #23 02:07:43 height and width 📏 #24 02:14:37 positions 🎯 #25 02:21:00 background images 🏙️ #26 02:24:15 combinators ➕ #27 02:29:12 pseudo-classes ☟ #28 02:36:50 pseudo-elements ✔ #29 02:42:46 pagination 🕮 #30 02:51:44 dropdown menus 🔻 #31 02:58:19 navigation bar 🧭 #32 03:04:46 website layout 🗺️ #33 03:14:13 image gallery 📷 #34 03:19:50 icons 🐤 #35 03:28:23 flexbox 💪 #36 03:38:23 transformations 🔄 #37 03:47:23 animations 🎬 Copyright Disclaimer: This video is the intellectual property of Bro Code. All rights reserved. No part of this video may be reproduced, distributed, or transmitted in any form or by any means, including but not limited to recording, uploading, or other electronic or mechanical methods, without my written permission, except in the case of brief quotations embodied in critical reviews and certain other noncommercial uses permitted by copyright law.

detail
{'title': 'HTML & CSS Full Course for free 🌎 (2023)', 'heatmap': [{'end': 875.652, 'start': 722.128, 'weight': 0.816}, {'end': 3641.298, 'start': 3494.339, 'weight': 0.739}, {'end': 6703.138, 'start': 6406.921, 'weight': 0.795}, {'end': 7284.662, 'start': 7133.963, 'weight': 0.724}, {'end': 11067.983, 'start': 10924.926, 'weight': 1}, {'end': 11650.649, 'start': 11497.566, 'weight': 0.737}], 'summary': 'Course covers the significance of html and css, practical exercises for creating webpages, adding media, text formatting, tables, forms, css properties and selectors, pseudo-elements, dropdown menus, website layout design, image gallery creation, and using font awesome icons, flexbox, css transform, and animations.', 'chapters': [{'end': 156.736, 'segs': [{'end': 126.569, 'src': 'embed', 'start': 40.036, 'weight': 0, 'content': [{'end': 46.383, 'text': "Even if you're not interested in web development as a career, almost every business has some sort of online presence.", 'start': 40.036, 'duration': 6.347}, {'end': 53.59, 'text': 'Knowing how to manage that online presence could convince a potential employer to hire you over somebody else.', 'start': 46.723, 'duration': 6.867}, {'end': 57.932, 'text': 'So why not? HTML is an acronym for hypertext markup language.', 'start': 53.85, 'duration': 4.082}, {'end': 66.996, 'text': 'The general idea is that certain types of tags, also known as markup, is used to convey to a web browser how some content should be displayed.', 'start': 58.273, 'duration': 8.723}, {'end': 71.839, 'text': 'Usually tags are in pairs, with some content sandwiched between them.', 'start': 67.457, 'duration': 4.382}, {'end': 74.56, 'text': 'Header tags are typically used for titles.', 'start': 72.139, 'duration': 2.421}, {'end': 77.383, 'text': 'P tags are used for paragraphs of text.', 'start': 75.02, 'duration': 2.363}, {'end': 79.505, 'text': 'A tags are used for hyperlinks.', 'start': 77.743, 'duration': 1.762}, {'end': 81.747, 'text': 'HTML adds structure to a webpage.', 'start': 79.945, 'duration': 1.802}, {'end': 90.436, 'text': 'If we were building a house, you could say that HTML is the foundation, the skeletal structure to support all content on a website.', 'start': 82.228, 'duration': 8.208}, {'end': 91.838, 'text': "Then there's CSS.", 'start': 90.777, 'duration': 1.061}, {'end': 94.641, 'text': 'CSS means Cascading Style Sheets.', 'start': 92.158, 'duration': 2.483}, {'end': 97.524, 'text': "It's a language that adds style to a webpage.", 'start': 95.001, 'duration': 2.523}, {'end': 104.925, 'text': 'In our house analogy, CSS would be equivalent to the decorations, design, and colors of the interior.', 'start': 97.924, 'duration': 7.001}, {'end': 109.986, 'text': "To begin working with HTML and CSS, you'll need a modern web browser.", 'start': 105.205, 'duration': 4.781}, {'end': 113.827, 'text': 'You can use Google Chrome, Firefox, Microsoft Edge, Safari.', 'start': 110.186, 'duration': 3.641}, {'end': 114.967, 'text': 'Those are all fine.', 'start': 114.167, 'duration': 0.8}, {'end': 118.848, 'text': "You'll also need a text editor as well, such as VS Code.", 'start': 115.207, 'duration': 3.641}, {'end': 122.748, 'text': "It's free software that functions as a workbench for us to write code.", 'start': 119.168, 'duration': 3.58}, {'end': 126.569, 'text': "In this next part, I'll show you how we can download and install VS Code.", 'start': 123.108, 'duration': 3.461}], 'summary': 'Knowing html and css can enhance job prospects by managing online presence.', 'duration': 86.533, 'max_score': 40.036, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw40036.jpg'}], 'start': 0.109, 'title': 'Importance of html and css', 'summary': 'Discusses the significance of learning html and css, their role in structuring and styling webpages, and the tools needed. it emphasizes their relevance in the modern age, potential career benefits, online business presence, and impact on employability.', 'chapters': [{'end': 156.736, 'start': 0.109, 'title': 'Getting started with html and css', 'summary': 'Discusses the importance of learning html and css, how it adds structure and style to a webpage, and the tools required for working with them, emphasizing their relevance in the modern age and the potential benefits for career development. it also highlights the significance of online presence for businesses and the impact of these skills on employability.', 'duration': 156.627, 'highlights': ['HTML and CSS are essential for creating and managing a website, with HTML providing the foundation and structure, while CSS adds style and design, making them valuable skills for career development and potential employment advantages. Understanding HTML and CSS is crucial for creating and managing websites, with HTML serving as the foundational structure and CSS adding style and design elements. This knowledge can provide valuable skills for career development and potentially offer advantages in employability.', 'Online presence is crucial for businesses, making knowledge of managing websites and online content beneficial for potential employment opportunities. The chapter emphasizes the importance of online presence for businesses and highlights the potential benefits of having knowledge in managing websites and online content for enhancing employability.', 'The chapter explains the role of HTML in adding structure to a webpage, using tags to convey content display instructions to web browsers, such as header tags for titles and paragraph tags for text. The role of HTML in structuring webpages is explained, with a focus on using tags to convey content display instructions, such as header tags for titles and paragraph tags for text.', "CSS is described as a language that adds style to a webpage, akin to the decorations, design, and colors of the interior in an analogy to a house's interior design. The function of CSS as a language that adds style to webpages is described, with an analogy comparing it to the decorations, design, and colors of a house's interior.", 'The tools required for working with HTML and CSS, including modern web browsers like Google Chrome, Firefox, and text editors like VS Code, are highlighted as essential for getting started with web development. The chapter emphasizes the essential tools required for working with HTML and CSS, including modern web browsers like Google Chrome and Firefox, as well as text editors like VS Code, for getting started with web development.']}], 'duration': 156.627, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw109.jpg', 'highlights': ['Understanding HTML and CSS is crucial for creating and managing websites, providing valuable skills for career development and potential employment advantages.', 'Online presence is crucial for businesses, making knowledge of managing websites and online content beneficial for potential employment opportunities.', 'The role of HTML in structuring webpages is explained, with a focus on using tags to convey content display instructions.', "CSS is described as a language that adds style to a webpage, akin to the decorations, design, and colors of the interior in an analogy to a house's interior design.", 'The chapter emphasizes the essential tools required for working with HTML and CSS, including modern web browsers like Google Chrome and Firefox, as well as text editors like VS Code, for getting started with web development.']}, {'end': 865.948, 'segs': [{'end': 214.064, 'src': 'embed', 'start': 158.587, 'weight': 3, 'content': [{'end': 162.268, 'text': 'We need a folder to hold all of the documents related to our website.', 'start': 158.587, 'duration': 3.681}, {'end': 163.669, 'text': 'Go to open folder.', 'start': 162.568, 'duration': 1.101}, {'end': 165.929, 'text': "I'll place this folder on my desktop.", 'start': 164.289, 'duration': 1.64}, {'end': 168.13, 'text': 'New folder.', 'start': 166.85, 'duration': 1.28}, {'end': 170.611, 'text': "I'll name this folder website.", 'start': 168.75, 'duration': 1.861}, {'end': 172.271, 'text': 'Select folder.', 'start': 171.611, 'duration': 0.66}, {'end': 173.652, 'text': 'There we go.', 'start': 173.212, 'duration': 0.44}, {'end': 176.333, 'text': 'We are now within our website folder.', 'start': 174.432, 'duration': 1.901}, {'end': 178.373, 'text': "I'm going to create a new file.", 'start': 177.133, 'duration': 1.24}, {'end': 181.554, 'text': 'I will name this file index.html.', 'start': 179.554, 'duration': 2}, {'end': 188.508, 'text': 'Whatever your homepage is going to be, I would recommend naming it index.html.', 'start': 184.144, 'duration': 4.364}, {'end': 192.031, 'text': 'Most servers return the index file as the homepage.', 'start': 189.009, 'duration': 3.022}, {'end': 195.795, 'text': 'So it would be good practice for us to name the homepage index.', 'start': 192.592, 'duration': 3.203}, {'end': 199.358, 'text': "Now what we're going to do is install the Live Server extension.", 'start': 196.616, 'duration': 2.742}, {'end': 201.34, 'text': 'Go to Extensions.', 'start': 200.479, 'duration': 0.861}, {'end': 203.062, 'text': 'Look up Live Server.', 'start': 201.921, 'duration': 1.141}, {'end': 205.311, 'text': 'and install.', 'start': 204.75, 'duration': 0.561}, {'end': 212.923, 'text': "Basically what this does is that when you update your HTML file, if you have a web browser open, it's going to update automatically.", 'start': 206.272, 'duration': 6.651}, {'end': 214.064, 'text': "It'll save you some time.", 'start': 213.183, 'duration': 0.881}], 'summary': "Created 'website' folder, named index.html, installed live server for automatic updates.", 'duration': 55.477, 'max_score': 158.587, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw158587.jpg'}, {'end': 458.075, 'src': 'embed', 'start': 427.681, 'weight': 2, 'content': [{'end': 430.622, 'text': 'So add as many line breaks as you need, wherever you need them.', 'start': 427.681, 'duration': 2.941}, {'end': 432.003, 'text': "So that's a line break.", 'start': 431.163, 'duration': 0.84}, {'end': 436.119, 'text': "There's also horizontal rule, which is HR.", 'start': 433.237, 'duration': 2.882}, {'end': 438.461, 'text': 'Think human resources, HR.', 'start': 436.76, 'duration': 1.701}, {'end': 441.343, 'text': 'That would add a horizontal line across your page.', 'start': 439.001, 'duration': 2.342}, {'end': 443.845, 'text': 'That might look pretty good after a title.', 'start': 441.903, 'duration': 1.942}, {'end': 448.108, 'text': "Paragraph tags don't care about any spaces or new lines.", 'start': 444.926, 'duration': 3.182}, {'end': 452.271, 'text': "I'm going to put all of this on separate lines, just so it's more legible.", 'start': 448.909, 'duration': 3.362}, {'end': 458.075, 'text': 'So when I save, nothing appears to happen.', 'start': 455.934, 'duration': 2.141}], 'summary': 'Explanation of line breaks, hr, and paragraph tags for web pages.', 'duration': 30.394, 'max_score': 427.681, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw427681.jpg'}, {'end': 722.128, 'src': 'embed', 'start': 691.312, 'weight': 0, 'content': [{'end': 696.196, 'text': "What we'll need within the opening A tag is an attribute, an href attribute.", 'start': 691.312, 'duration': 4.884}, {'end': 703.066, 'text': 'An attribute is typically a name-value pair that modifies the behavior of an element.', 'start': 697.304, 'duration': 5.762}, {'end': 705.847, 'text': 'href means hypertext reference.', 'start': 703.806, 'duration': 2.041}, {'end': 707.408, 'text': "We're referencing something.", 'start': 706.347, 'duration': 1.061}, {'end': 712.31, 'text': 'Within the set of quotes, we can list a web page or a file to link to.', 'start': 708.088, 'duration': 4.222}, {'end': 715.971, 'text': "Let's begin by linking an external website like Google.", 'start': 712.87, 'duration': 3.101}, {'end': 722.128, 'text': "Let's paste the URL within the href attribute save.", 'start': 717.54, 'duration': 4.588}], 'summary': "The opening a tag needs an href attribute to link to a web page or file, such as google's url.", 'duration': 30.816, 'max_score': 691.312, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw691312.jpg'}, {'end': 868.489, 'src': 'embed', 'start': 842.486, 'weight': 1, 'content': [{'end': 847.871, 'text': 'When I click on this link, we begin the process of sending an email to this email address.', 'start': 842.486, 'duration': 5.385}, {'end': 851.674, 'text': "However, I'm not signed in, so this is as far as it'll take me currently.", 'start': 848.231, 'duration': 3.443}, {'end': 853.736, 'text': 'Okay, now for an exercise.', 'start': 851.694, 'duration': 2.042}, {'end': 856.618, 'text': "Let's go to our lyrics HTML file.", 'start': 853.936, 'duration': 2.682}, {'end': 858.76, 'text': 'Open with Live Server.', 'start': 857.779, 'duration': 0.981}, {'end': 860.402, 'text': 'Let me zoom out.', 'start': 859.521, 'duration': 0.881}, {'end': 865.948, 'text': 'Based on the last project, you should have a webpage with some song lyrics that you like.', 'start': 861.906, 'duration': 4.042}, {'end': 868.489, 'text': "We'll create a hyperlink to the original video.", 'start': 866.328, 'duration': 2.161}], 'summary': 'Demonstrated sending email process, opened lyrics html file, and created hyperlink.', 'duration': 26.003, 'max_score': 842.486, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw842486.jpg'}], 'start': 158.587, 'title': 'Setting up website folder and html basics', 'summary': 'Explains setting up a website folder and installing live server, along with html basics like creating hyperlinks, headings, paragraphs, and a practical exercise for creating a webpage with song lyrics.', 'chapters': [{'end': 214.064, 'start': 158.587, 'title': 'Setting up website folder and live server', 'summary': 'Explains the process of creating a website folder, naming the homepage file as index.html and installing the live server extension, which automatically updates the web browser when the html file is modified, saving time.', 'duration': 55.477, 'highlights': ['The chapter explains the process of creating a website folder and naming the homepage file as index.html.', 'Installing the Live Server extension is demonstrated, which automatically updates the web browser when the HTML file is modified, saving time.']}, {'end': 865.948, 'start': 215.236, 'title': 'Html basics and creating hyperlinks', 'summary': 'Covers the basics of html, including creating a webpage, adding headings, paragraphs, line breaks, and horizontal rules, as well as detailed instructions for creating hyperlinks with attributes like href, target, and title, and a practical exercise to create a webpage with song lyrics.', 'duration': 650.712, 'highlights': ['Instructions for creating hyperlinks with attributes like href, target, and title The chapter provides detailed instructions on creating hyperlinks in HTML, including the use of attributes like href, target, and title to modify the behavior and display of the link.', 'Creating a webpage with song lyrics as a practical exercise The practical exercise involves creating a separate HTML file to display the lyrics of a preferred song, including adding headings, paragraphs, line breaks, and pre-formatted text to retain spacing.', 'Explanation and demonstration of creating basic HTML elements like headings, paragraphs, line breaks, and horizontal rules The chapter explains and demonstrates the creation of basic HTML elements such as headings, paragraphs, line breaks, and horizontal rules, providing clear instructions and examples for each element.']}], 'duration': 707.361, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw158587.jpg', 'highlights': ['Instructions for creating hyperlinks with attributes like href, target, and title', 'Creating a webpage with song lyrics as a practical exercise', 'Explanation and demonstration of creating basic HTML elements like headings, paragraphs, line breaks, and horizontal rules', 'Installing the Live Server extension is demonstrated, which automatically updates the web browser when the HTML file is modified, saving time.', 'The chapter explains the process of creating a website folder and naming the homepage file as index.html.']}, {'end': 2035.504, 'segs': [{'end': 1180.728, 'src': 'embed', 'start': 1153.475, 'weight': 1, 'content': [{'end': 1156.735, 'text': "like this, i'll go to new folder.", 'start': 1153.475, 'duration': 3.26}, {'end': 1158.616, 'text': "i'll create a folder named images.", 'start': 1156.735, 'duration': 1.881}, {'end': 1165.437, 'text': 'then i will move my images to the images folder, so my images are no longer being displayed.', 'start': 1158.616, 'duration': 6.821}, {'end': 1167.537, 'text': 'we have our alternative text.', 'start': 1165.437, 'duration': 2.1}, {'end': 1170.478, 'text': 'this is a picture of a dog and smiling dog gif.', 'start': 1167.537, 'duration': 2.941}, {'end': 1175.241, 'text': "With your source attribute, we're using a relative file path.", 'start': 1171.556, 'duration': 3.685}, {'end': 1180.728, 'text': 'We need to navigate to the Images folder, then find the appropriate image files.', 'start': 1176.182, 'duration': 4.546}], 'summary': 'Creating and moving images to a new folder, updating source attribute with relative file path.', 'duration': 27.253, 'max_score': 1153.475, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw1153475.jpg'}, {'end': 1329.533, 'src': 'embed', 'start': 1274.082, 'weight': 0, 'content': [{'end': 1278.324, 'text': 'So href equals the YouTube video that I linked before.', 'start': 1274.082, 'duration': 4.242}, {'end': 1280.566, 'text': 'So this should take me to YouTube.', 'start': 1279.105, 'duration': 1.461}, {'end': 1284.167, 'text': 'There we are.', 'start': 1283.707, 'duration': 0.46}, {'end': 1286.429, 'text': 'All right, everybody.', 'start': 1284.187, 'duration': 2.242}, {'end': 1290.371, 'text': "Well, that's how to include an image on a web page using HTML.", 'start': 1286.509, 'duration': 3.862}, {'end': 1299.182, 'text': "Hey, how's it going, everybody? In today's video, I'm going to show you how we can include audio in a web page using HTML.", 'start': 1293.496, 'duration': 5.686}, {'end': 1301.504, 'text': "You'll need some audio files to work with.", 'start': 1299.702, 'duration': 1.802}, {'end': 1306.429, 'text': 'One place you can download some MP3 files is the YouTube Audio Library.', 'start': 1302.125, 'duration': 4.304}, {'end': 1309.412, 'text': 'Find some songs that you like and then you can download them.', 'start': 1307.13, 'duration': 2.282}, {'end': 1312.055, 'text': "Let's download three for this lesson.", 'start': 1309.973, 'duration': 2.082}, {'end': 1316.5, 'text': "Once you have your three songs, let's move them to our website folder.", 'start': 1313.016, 'duration': 3.484}, {'end': 1319.285, 'text': 'All right, we are ready to begin.', 'start': 1318.024, 'duration': 1.261}, {'end': 1323.408, 'text': 'So to include some audio, we need a pair of audio tags.', 'start': 1319.845, 'duration': 3.563}, {'end': 1329.533, 'text': "Then between the audio tags, let's include a source element.", 'start': 1325.65, 'duration': 3.883}], 'summary': 'Demonstration of including audio in a web page using html, with instructions for downloading and incorporating mp3 files.', 'duration': 55.451, 'max_score': 1274.082, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw1274082.jpg'}, {'end': 1708.405, 'src': 'embed', 'start': 1679.119, 'weight': 3, 'content': [{'end': 1681.519, 'text': 'The height will adjust accordingly, or vice versa.', 'start': 1679.119, 'duration': 2.4}, {'end': 1686.44, 'text': 'If I were to change the height to be 500, then the width is going to adjust accordingly.', 'start': 1681.959, 'duration': 4.481}, {'end': 1689.875, 'text': "But let's keep it as 500.", 'start': 1687.281, 'duration': 2.594}, {'end': 1691.936, 'text': "Here's our video, but there's no way to play it.", 'start': 1689.875, 'duration': 2.061}, {'end': 1695.358, 'text': "We'll need to add a set of controls with the controls attribute.", 'start': 1692.496, 'duration': 2.862}, {'end': 1697.439, 'text': 'Now we can play the video.', 'start': 1696.398, 'duration': 1.041}, {'end': 1705.723, 'text': 'To have this video autoplay when the page loads, you can set the autoplay property.', 'start': 1700.301, 'duration': 5.422}, {'end': 1708.405, 'text': 'It should play automatically.', 'start': 1705.743, 'duration': 2.662}], 'summary': 'Adjusting height affects width; adding controls allows video playback; autoplay feature enables automatic play.', 'duration': 29.286, 'max_score': 1679.119, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw1679119.jpg'}, {'end': 1897.599, 'src': 'embed', 'start': 1871.513, 'weight': 2, 'content': [{'end': 1877.516, 'text': "All right, everybody, so that's how to include a video in your web page using HTML.", 'start': 1871.513, 'duration': 6.003}, {'end': 1884.456, 'text': "Hey everybody, today I'm going to show you how we can create a favicon for your web page.", 'start': 1880.555, 'duration': 3.901}, {'end': 1887.697, 'text': "To create a favicon, you'll need an image to work with.", 'start': 1885.136, 'duration': 2.561}, {'end': 1888.497, 'text': "Here's mine.", 'start': 1887.977, 'duration': 0.52}, {'end': 1894.118, 'text': "I would recommend an image that's at least 96 by 96 pixels in width and height.", 'start': 1889.037, 'duration': 5.081}, {'end': 1897.599, 'text': "Once you have your image, we'll save the image to our website folder.", 'start': 1894.579, 'duration': 3.02}], 'summary': 'Creating a favicon for a web page using html, using an image of at least 96x96 pixels.', 'duration': 26.086, 'max_score': 1871.513, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw1871513.jpg'}], 'start': 866.328, 'title': 'Adding media in html', 'summary': 'Covers adding images, hyperlinks, gifs, audio, video, and favicons in html. it includes setting attributes, dimensions, alternative text, turning images into hyperlinks, and creating video with autoplay and loop, along with creating favicons and link tags.', 'chapters': [{'end': 998.145, 'start': 866.328, 'title': 'Adding images and hyperlinks in html', 'summary': 'Demonstrates how to add hyperlinks and images to a web page using html, including setting the href attribute for a youtube video and adjusting image dimensions.', 'duration': 131.817, 'highlights': ['Demonstrating how to add an image to a web page using HTML The chapter explains the process of adding an image to a web page using the self-closing image tag, setting the source attribute to the image name, and adjusting the dimensions with the height and width attributes.', 'Explaining the process of creating a hyperlink to the original video The chapter illustrates the process of creating a hyperlink to the original video by setting the href attribute to the URL of the video and defines a hyperlink as a digital reference to data that a user can follow by clicking or tapping.']}, {'end': 1626.817, 'start': 998.766, 'title': 'Including images, gifs, and audio in html', 'summary': 'Demonstrates how to include alternative text, turn images into hyperlinks, include gifs, and add audio files in a webpage using html, with examples and explanations.', 'duration': 628.051, 'highlights': ['The chapter explains the importance of using the Alt attribute for images to provide alternative text for visually impaired users, emphasizing that screen readers will read this alt description. Emphasizes the importance of Alt attribute for visually impaired users.', 'It demonstrates how to turn images into hyperlinks by surrounding the image element with anchor tags and setting the href attribute to a URL, providing a practical example by linking an image to a Wikipedia page. Practical demonstration of turning images into hyperlinks.', 'The chapter also covers the inclusion of GIFs in webpages, explaining the process of adding a self-closing image tag with the source attribute, file extension, height attribute, and alternative text, with a focus on maintaining images in a separate folder. Demonstrates the process of including GIFs and organizing images in a separate folder.', 'It further delves into adding audio files in a webpage using HTML, detailing the inclusion of audio tags, source elements, controls, autoplay, fallbacks, and creating a separate folder for organizing audio files, with practical examples and explanations. Comprehensive explanation and practical examples of adding audio files.', 'The chapter concludes with a demonstration of including video in a webpage using HTML, providing an overview of the required video file formats and the process of including video files with practical examples and instructions. Overview and practical demonstration of including video in a webpage using HTML.']}, {'end': 2035.504, 'start': 1627.298, 'title': 'Including video and favicon in html', 'summary': 'Demonstrates how to include a video with autoplay, loop, and backup options, and also create a favicon, using html and css, with key steps such as setting video attributes and creating link tags.', 'duration': 408.206, 'highlights': ['The chapter demonstrates how to include a video with autoplay, loop, and backup options. It explains the process of adding a video to a web page using HTML, with details on setting autoplay, loop, and backup options for the video.', 'Creating a favicon for a web page using HTML and CSS. It provides a step-by-step guide on creating a favicon, including details on image requirements, saving the image to the website folder, and creating a link tag for the favicon.', 'Explaining the process of setting video attributes such as width, height, autoplay, and loop. It elaborates on adjusting the dimensions of the video, setting autoplay, muting the video, and adding a loop attribute to the video.']}], 'duration': 1169.176, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw866328.jpg', 'highlights': ['Comprehensive explanation and practical examples of adding audio files.', 'Demonstrates the process of including GIFs and organizing images in a separate folder.', 'Creating a favicon for a web page using HTML and CSS.', 'Explaining the process of setting video attributes such as width, height, autoplay, and loop.', 'The chapter concludes with a demonstration of including video in a webpage using HTML.']}, {'end': 2906.722, 'segs': [{'end': 2124.285, 'src': 'embed', 'start': 2092.911, 'weight': 1, 'content': [{'end': 2097.152, 'text': 'Whatever text you would like to add emphasis to, you surround that with a pair of tags.', 'start': 2092.911, 'duration': 4.241}, {'end': 2099.873, 'text': "But there's different pairs of tags that have different effects.", 'start': 2097.393, 'duration': 2.48}, {'end': 2103.434, 'text': 'For a bold effect, we use a pair of B tags.', 'start': 2100.473, 'duration': 2.961}, {'end': 2107.395, 'text': "Let's surround normal in the second line with B.", 'start': 2103.994, 'duration': 3.401}, {'end': 2109.796, 'text': 'Then change normal to the word bold.', 'start': 2107.395, 'duration': 2.401}, {'end': 2112.736, 'text': 'This is bold text.', 'start': 2111.256, 'duration': 1.48}, {'end': 2115.377, 'text': 'I is for italic.', 'start': 2114.417, 'duration': 0.96}, {'end': 2118.538, 'text': "So let's surround the next line with I.", 'start': 2116.637, 'duration': 1.901}, {'end': 2124.285, 'text': 'This is italic text.', 'start': 2121.744, 'duration': 2.541}], 'summary': 'Use tags for emphasis: b for bold and i for italic.', 'duration': 31.374, 'max_score': 2092.911, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw2092911.jpg'}, {'end': 2301.585, 'src': 'embed', 'start': 2271.577, 'weight': 0, 'content': [{'end': 2273.139, 'text': 'All right, everybody.', 'start': 2271.577, 'duration': 1.562}, {'end': 2274.88, 'text': 'So that is text formatting.', 'start': 2273.199, 'duration': 1.681}, {'end': 2278.203, 'text': 'Text formatting gives text special emphasis.', 'start': 2275.381, 'duration': 2.822}, {'end': 2284.83, 'text': 'You can create text that is bold, italic, underlined, deleted, big, small, subscript, superscript, monospace, and highlighted text.', 'start': 2278.724, 'duration': 6.106}, {'end': 2288.073, 'text': 'And well, that is text formatting in HTML.', 'start': 2285.27, 'duration': 2.803}, {'end': 2296.304, 'text': "Hey, how's it going everybody? Today I need to explain the span and div tags in HTML.", 'start': 2290.822, 'duration': 5.482}, {'end': 2301.585, 'text': 'The span tag is an inline container to group elements for styling purposes.', 'start': 2296.624, 'duration': 4.961}], 'summary': 'Html text formatting includes bold, italic, underlined, and more. span tag groups elements for styling.', 'duration': 30.008, 'max_score': 2271.577, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw2271577.jpg'}, {'end': 2606.694, 'src': 'embed', 'start': 2558.158, 'weight': 2, 'content': [{'end': 2563.261, 'text': 'Basically speaking, we can use the span and div tags to group together HTML for styling purposes.', 'start': 2558.158, 'duration': 5.103}, {'end': 2565.702, 'text': 'Span is an inline container.', 'start': 2563.901, 'duration': 1.801}, {'end': 2568.243, 'text': 'Div is a block level container.', 'start': 2566.362, 'duration': 1.881}, {'end': 2570.944, 'text': "We'll be using these more when we reach CSS.", 'start': 2568.883, 'duration': 2.061}, {'end': 2574.606, 'text': 'And well everybody, those are the span and div tags in HTML.', 'start': 2571.484, 'duration': 3.122}, {'end': 2581.609, 'text': "Hey everybody, today I'm going to explain how we can create different lists in HTML.", 'start': 2577.128, 'duration': 4.481}, {'end': 2584.31, 'text': "There's three different types of lists that we'll discuss today.", 'start': 2581.889, 'duration': 2.421}, {'end': 2587.01, 'text': 'Unordered, ordered, and description lists.', 'start': 2584.65, 'duration': 2.36}, {'end': 2590.831, 'text': 'For an unordered list, think of maybe a grocery list.', 'start': 2587.49, 'duration': 3.341}, {'end': 2592.771, 'text': "The order of items doesn't matter.", 'start': 2591.291, 'duration': 1.48}, {'end': 2596.512, 'text': 'To create an unordered list, you need a pair of ul tags.', 'start': 2593.371, 'duration': 3.141}, {'end': 2600.433, 'text': 'ul meaning unordered list.', 'start': 2598.293, 'duration': 2.14}, {'end': 2604.394, 'text': 'Then between the pair of ul tags, you need to list items.', 'start': 2601.093, 'duration': 3.301}, {'end': 2606.694, 'text': 'Li means a list item.', 'start': 2605.553, 'duration': 1.141}], 'summary': 'Html uses span and div tags for styling. three types of lists: unordered, ordered, and description.', 'duration': 48.536, 'max_score': 2558.158, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw2558158.jpg'}], 'start': 2036.164, 'title': 'Html text formatting and list creation', 'summary': 'Covers html text formatting, including creating bold, italic, underlined, deleted, big, small, subscript, superscript, and monospaced text, alongside span and div tag usage for styling and creation of unordered, ordered, and description lists, with practical examples and clear instructions.', 'chapters': [{'end': 2218.614, 'start': 2036.164, 'title': 'Html text formatting', 'summary': 'Explains html text formatting, demonstrating how to create bold, italic, underlined, deleted, big, small, subscript, superscript, and monospaced text in html, with practical examples and clear instructions.', 'duration': 182.45, 'highlights': ['The chapter provides a step-by-step demonstration of creating bold, italic, underlined, deleted, big, small, subscript, superscript, and monospaced text in HTML, emphasizing the use of different tag pairs for each effect.', 'The transcript includes practical examples and clear instructions on how to create various text formatting effects in HTML.', 'The speaker showcases the process of changing the relative file path of the favicon, providing practical guidance for including it within a separate folder in HTML.', 'The speaker demonstrates the creation of a favicon for a webpage using HTML, highlighting the process with clear instructions.', 'The chapter includes a practical example of creating bold text in HTML using the pair of B tags, showcasing the effect with a before-and-after demonstration.']}, {'end': 2906.722, 'start': 2219.254, 'title': 'Html text formatting and list creation', 'summary': 'Covers text formatting in html, including the usage of span and div tags for styling, and the creation of unordered, ordered, and description lists, with examples and explanations of each.', 'duration': 687.468, 'highlights': ['The chapter explains the usage of span and div tags in HTML for text formatting, including examples of applying inline CSS styling and creating block-level containers, with clear explanations of their differences and purposes. The chapter provides detailed explanations and examples of using the span and div tags in HTML for text formatting, including the application of inline CSS styling and creating block-level containers for styling purposes.', 'The section illustrates the creation of unordered, ordered, and description lists in HTML, with practical examples of grocery lists, to-do lists, and mythological creature definitions, demonstrating the implementation of each list type. Practical examples of creating unordered, ordered, and description lists in HTML are provided, including grocery lists, to-do lists, and mythological creature definitions, showcasing the implementation of each list type.']}], 'duration': 870.558, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw2036164.jpg', 'highlights': ['The chapter provides a step-by-step demonstration of creating bold, italic, underlined, deleted, big, small, subscript, superscript, and monospaced text in HTML, emphasizing the use of different tag pairs for each effect.', 'The chapter includes a practical example of creating bold text in HTML using the pair of B tags, showcasing the effect with a before-and-after demonstration.', 'The chapter explains the usage of span and div tags in HTML for text formatting, including examples of applying inline CSS styling and creating block-level containers, with clear explanations of their differences and purposes.', 'The section illustrates the creation of unordered, ordered, and description lists in HTML, with practical examples of grocery lists, to-do lists, and mythological creature definitions, demonstrating the implementation of each list type.', 'The transcript includes practical examples and clear instructions on how to create various text formatting effects in HTML.']}, {'end': 4115.469, 'segs': [{'end': 3015.639, 'src': 'embed', 'start': 2987.364, 'weight': 0, 'content': [{'end': 2992.667, 'text': 'What are the hours of operation for our store? To create a table, we need a pair of table tags.', 'start': 2987.364, 'duration': 5.303}, {'end': 2999.97, 'text': 'For the first row, we need a pair of tr tags, meaning table row.', 'start': 2995.388, 'duration': 4.582}, {'end': 3004.974, 'text': 'So the first row is going to be filled with table headers.', 'start': 3001.792, 'duration': 3.182}, {'end': 3006.915, 'text': 'How many columns do we have.', 'start': 3005.714, 'duration': 1.201}, {'end': 3015.639, 'text': 'Well if we have a table of store hours there seven days in a week we will need seven pairs of table header tags.', 'start': 3007.475, 'duration': 8.164}], 'summary': 'Store hours table requires 7 pairs of table header tags', 'duration': 28.275, 'max_score': 2987.364, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw2987364.jpg'}, {'end': 3287.505, 'src': 'embed', 'start': 3259.694, 'weight': 1, 'content': [{'end': 3262.655, 'text': 'To create a button, we need a pair of button tags.', 'start': 3259.694, 'duration': 2.961}, {'end': 3266.516, 'text': "And here's our button.", 'start': 3265.575, 'duration': 0.941}, {'end': 3268.436, 'text': "It's really small and it doesn't do anything.", 'start': 3266.776, 'duration': 1.66}, {'end': 3270.157, 'text': "Let's add some text.", 'start': 3269.157, 'duration': 1}, {'end': 3273.719, 'text': "Between the button tags, let's add some text, like click me.", 'start': 3270.497, 'duration': 3.222}, {'end': 3277.481, 'text': "So here's our button, but it's fairly small.", 'start': 3275.48, 'duration': 2.001}, {'end': 3281.062, 'text': 'We can change the size of this button by changing the font size.', 'start': 3277.881, 'duration': 3.181}, {'end': 3287.505, 'text': 'We will need to access the style attribute, then set the font size property to a larger font size.', 'start': 3281.863, 'duration': 5.642}], 'summary': "Creating a button with text 'click me', adjusting its size using font size property.", 'duration': 27.811, 'max_score': 3259.694, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw3259694.jpg'}, {'end': 3459.2, 'src': 'embed', 'start': 3433.439, 'weight': 3, 'content': [{'end': 3438.904, 'text': 'If you would like to execute some JavaScript code using a button, we need a pair of script tags for JavaScript.', 'start': 3433.439, 'duration': 5.465}, {'end': 3444.737, 'text': "Within this pair of script tags, I'm going to define a function.", 'start': 3441.656, 'duration': 3.081}, {'end': 3447.937, 'text': 'Function, you can come up with some function name.', 'start': 3445.437, 'duration': 2.5}, {'end': 3451.558, 'text': 'This function will do something.', 'start': 3448.998, 'duration': 2.56}, {'end': 3454.839, 'text': 'Then you need a set of parentheses, then a set of curly braces.', 'start': 3452.098, 'duration': 2.741}, {'end': 3459.2, 'text': 'Buttons have an onClick attribute.', 'start': 3456.78, 'duration': 2.42}], 'summary': 'Using script tags, define a javascript function for button onclick attribute.', 'duration': 25.761, 'max_score': 3433.439, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw3433439.jpg'}, {'end': 3641.298, 'src': 'heatmap', 'start': 3494.339, 'weight': 0.739, 'content': [{'end': 3495.82, 'text': "There's an ID attribute.", 'start': 3494.339, 'duration': 1.481}, {'end': 3499.122, 'text': "I'll name this text maybe greeting.", 'start': 3496.82, 'duration': 2.302}, {'end': 3505.866, 'text': 'So when we click on this function, I would like to change the text of my greeting.', 'start': 3501.023, 'duration': 4.843}, {'end': 3514.311, 'text': 'Within the function, we can do that with document.getElementById.', 'start': 3507.087, 'duration': 7.224}, {'end': 3520.332, 'text': 'Within the set of parentheses, the ID is greeting.', 'start': 3516.55, 'duration': 3.782}, {'end': 3525.315, 'text': 'Follow this with dot inner HTML.', 'start': 3521.533, 'duration': 3.782}, {'end': 3527.777, 'text': 'Then we can set the SQL to some new value.', 'start': 3525.796, 'duration': 1.981}, {'end': 3532.14, 'text': "Let's set the new value to be goodbye.", 'start': 3528.617, 'duration': 3.523}, {'end': 3537.323, 'text': 'Now, when I click on the button, it changes our text.', 'start': 3534.181, 'duration': 3.142}, {'end': 3539.684, 'text': "So that's a button, everybody.", 'start': 3538.504, 'duration': 1.18}, {'end': 3541.746, 'text': 'You need a pair of button tags.', 'start': 3540.405, 'duration': 1.341}, {'end': 3544.489, 'text': 'You can apply some CSS styling.', 'start': 3542.608, 'duration': 1.881}, {'end': 3548.851, 'text': "I haven't really discussed CSS yet, so we did inline CSS.", 'start': 3545.189, 'duration': 3.662}, {'end': 3553.894, 'text': "But if you have these many properties, I would recommend a style sheet, which we'll cover later.", 'start': 3549.612, 'duration': 4.282}, {'end': 3556.835, 'text': 'To make your button bigger, you can change the font size.', 'start': 3554.514, 'duration': 2.321}, {'end': 3562.218, 'text': 'You could have your button bring you to another HTML page, or even execute some JavaScript code.', 'start': 3557.396, 'duration': 4.822}, {'end': 3565.88, 'text': "And well everybody, that's how to create a button using HTML.", 'start': 3562.698, 'duration': 3.182}, {'end': 3569.659, 'text': 'Hello again, friends.', 'start': 3568.496, 'duration': 1.163}, {'end': 3573.588, 'text': "Today I'm going to explain how we can create a form using HTML.", 'start': 3569.839, 'duration': 3.749}, {'end': 3576.795, 'text': "To create a form, we'll need a pair of form tags.", 'start': 3574.109, 'duration': 2.686}, {'end': 3581.511, 'text': 'The opening form tag has a few attributes we need to fill in.', 'start': 3578.649, 'duration': 2.862}, {'end': 3583.893, 'text': 'First is an action attribute.', 'start': 3582.332, 'duration': 1.561}, {'end': 3592.401, 'text': 'After submitting our form, to what location do we want to send our form to? Form submission is done with a backend language such as PHP.', 'start': 3584.434, 'duration': 7.967}, {'end': 3599.707, 'text': 'You might see a file name such as index.php or action page or something of that nature within your action attribute.', 'start': 3592.801, 'duration': 6.906}, {'end': 3606.853, 'text': "We're not actually going to do a form submission, but just be aware that the action attribute sends data to this location, to this file.", 'start': 3599.947, 'duration': 6.906}, {'end': 3611.496, 'text': "The file listed really can be anything, but that's outside the scope of this lesson.", 'start': 3607.253, 'duration': 4.243}, {'end': 3613.178, 'text': "You'll also see a method.", 'start': 3611.857, 'duration': 1.321}, {'end': 3618.542, 'text': 'The method attribute specifies if this is a GET request or a POST request.', 'start': 3613.698, 'duration': 4.844}, {'end': 3623.286, 'text': 'POST is used for confidential information, such as a username and a password.', 'start': 3619.023, 'duration': 4.263}, {'end': 3626.068, 'text': 'GET is for insensitive data, basically.', 'start': 3623.927, 'duration': 2.141}, {'end': 3629.531, 'text': 'Again, this is outside the scope of HTML at this point in time.', 'start': 3626.429, 'duration': 3.102}, {'end': 3633.695, 'text': "If we have a form and we're sending sensitive data, we should use POST.", 'start': 3630.032, 'duration': 3.663}, {'end': 3636.256, 'text': "Now let's create some elements within our form.", 'start': 3634.395, 'duration': 1.861}, {'end': 3638.537, 'text': "The first thing we'll create is a text box.", 'start': 3636.656, 'duration': 1.881}, {'end': 3641.298, 'text': 'We need a self-closing input tag.', 'start': 3639.017, 'duration': 2.281}], 'summary': 'The transcript explains creating buttons and forms in html, covering attributes and functionality.', 'duration': 146.959, 'max_score': 3494.339, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw3494339.jpg'}, {'end': 3599.707, 'src': 'embed', 'start': 3569.839, 'weight': 2, 'content': [{'end': 3573.588, 'text': "Today I'm going to explain how we can create a form using HTML.", 'start': 3569.839, 'duration': 3.749}, {'end': 3576.795, 'text': "To create a form, we'll need a pair of form tags.", 'start': 3574.109, 'duration': 2.686}, {'end': 3581.511, 'text': 'The opening form tag has a few attributes we need to fill in.', 'start': 3578.649, 'duration': 2.862}, {'end': 3583.893, 'text': 'First is an action attribute.', 'start': 3582.332, 'duration': 1.561}, {'end': 3592.401, 'text': 'After submitting our form, to what location do we want to send our form to? Form submission is done with a backend language such as PHP.', 'start': 3584.434, 'duration': 7.967}, {'end': 3599.707, 'text': 'You might see a file name such as index.php or action page or something of that nature within your action attribute.', 'start': 3592.801, 'duration': 6.906}], 'summary': 'Creating a form in html requires a pair of form tags with attributes such as action for form submission to a backend language like php.', 'duration': 29.868, 'max_score': 3569.839, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw3569839.jpg'}, {'end': 3861.284, 'src': 'embed', 'start': 3832.329, 'weight': 6, 'content': [{'end': 3836.612, 'text': "I'm going to add a placeholder attribute.", 'start': 3832.329, 'duration': 4.283}, {'end': 3843.373, 'text': "What do we want our placeholder to be? I don't know, Spongebob Squarepants or maybe just Spongebob.", 'start': 3838.43, 'duration': 4.943}, {'end': 3845.394, 'text': 'So the placeholder is faded.', 'start': 3843.793, 'duration': 1.601}, {'end': 3849.937, 'text': 'It gives a hint to the user as to the format in which they should enter in information.', 'start': 3845.695, 'duration': 4.242}, {'end': 3854.3, 'text': 'If I were to click on this text box, the hint is still there until we type in something.', 'start': 3850.177, 'duration': 4.123}, {'end': 3856.861, 'text': "OK, let's cover passwords.", 'start': 3855.661, 'duration': 1.2}, {'end': 3861.284, 'text': "To create a password, we'll use an input tag.", 'start': 3858.562, 'duration': 2.722}], 'summary': 'Adding a placeholder attribute with hints for user input and creating a password using an input tag.', 'duration': 28.955, 'max_score': 3832.329, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw3832329.jpg'}, {'end': 3940.619, 'src': 'embed', 'start': 3913.654, 'weight': 5, 'content': [{'end': 3918.238, 'text': "So I'll copy those and paste them within the input tag for my password.", 'start': 3913.654, 'duration': 4.584}, {'end': 3920.27, 'text': 'I can type in a username.', 'start': 3919.15, 'duration': 1.12}, {'end': 3926.693, 'text': 'If I attempt to submit this form data without a password, we have that prompt, please fill out this field.', 'start': 3920.671, 'duration': 6.022}, {'end': 3929.174, 'text': "That's because we have the required attribute set.", 'start': 3927.053, 'duration': 2.121}, {'end': 3932.435, 'text': "There's also a minimum length and a maximum length set too.", 'start': 3929.814, 'duration': 2.621}, {'end': 3936.477, 'text': "I'm required to type in a password that's at least six characters long.", 'start': 3932.816, 'duration': 3.661}, {'end': 3938.058, 'text': 'Right now this is only five.', 'start': 3936.917, 'duration': 1.141}, {'end': 3940.619, 'text': 'Anything between six and 15 is okay.', 'start': 3938.518, 'duration': 2.101}], 'summary': 'Form requires a password of at least 6 characters, with a maximum of 15.', 'duration': 26.965, 'max_score': 3913.654, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw3913654.jpg'}, {'end': 4088.309, 'src': 'embed', 'start': 4056.737, 'weight': 7, 'content': [{'end': 4058.579, 'text': 'We would need a pattern attribute.', 'start': 4056.737, 'duration': 1.842}, {'end': 4065.234, 'text': 'For the digits 0 through 9, within a set of straight brackets, you would type 0-9.', 'start': 4059.431, 'duration': 5.803}, {'end': 4069.676, 'text': 'Then how many digits do you allow afterwards? Three.', 'start': 4066.374, 'duration': 3.302}, {'end': 4071.196, 'text': "Then we'll need a dash.", 'start': 4070.256, 'duration': 0.94}, {'end': 4071.997, 'text': "That's required.", 'start': 4071.276, 'duration': 0.721}, {'end': 4072.857, 'text': 'Add a dash.', 'start': 4072.277, 'duration': 0.58}, {'end': 4077.279, 'text': 'Then another three digits, 0 through 9, 0-9.', 'start': 4073.937, 'duration': 3.342}, {'end': 4084.722, 'text': 'Then another three digits, dash, number 0 through 9.', 'start': 4078.96, 'duration': 5.762}, {'end': 4086.223, 'text': 'Let me move this in a little bit.', 'start': 4084.722, 'duration': 1.501}, {'end': 4088.309, 'text': 'Then I would like 4 digits.', 'start': 4087.048, 'duration': 1.261}], 'summary': 'Pattern attribute for 10 digits with specific format: 3-3-4.', 'duration': 31.572, 'max_score': 4056.737, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw4056737.jpg'}], 'start': 2907.182, 'title': 'Creating html tables, buttons, and forms', 'summary': 'Covers creating a table of store hours with 7 days, open and closed hours, creating buttons with text, size, background color, font color, and hyperlink functionality, creating buttons using html and executing javascript code, and creating forms with html covering various input types and their corresponding attributes.', 'chapters': [{'end': 3416.123, 'start': 2907.182, 'title': 'Creating tables and buttons in html', 'summary': 'Demonstrates how to create a table of store hours with 7 days, open and closed hours, and how to create a button with text, size, background color, font color, and hyperlink functionality.', 'duration': 508.941, 'highlights': ['highlight The chapter demonstrates how to create a table of store hours with 7 days, open and closed hours.', 'highlight The chapter also shows how to create a button with text, size, background color, font color, and hyperlink functionality.', 'highlight For the table, it explains adding table headers, aligning the table data, setting border attributes, and changing background color.', 'highlight In creating the button, it covers changing font size, background color, font color, border radius, and hyperlink functionality.']}, {'end': 3569.659, 'start': 3417.084, 'title': 'Creating a button with javascript', 'summary': 'Explains how to create a button using html and execute javascript code when interacting with the button, highlighting the process of defining a function, using onclick attribute, and changing text on the screen.', 'duration': 152.575, 'highlights': ['The process of defining a function and using onClick attribute to execute JavaScript code when interacting with the button is explained. The chapter focuses on defining a function and using onClick attribute to execute the JavaScript code, providing a practical example of changing text on the screen when the button is clicked.', 'The use of script tags for JavaScript and the creation of a function to change text on the screen is described. The speaker explains the use of script tags and the creation of a function to change the text on the screen, emphasizing the practical application of JavaScript in altering the content upon button interaction.', 'The recommendation to use a style sheet for CSS styling and the potential to change font size to make the button bigger are mentioned. The chapter briefly mentions the recommendation to use a style sheet for CSS styling and the potential to change font size to make the button bigger, providing insights into further CSS and styling topics.']}, {'end': 4115.469, 'start': 3569.839, 'title': 'Creating forms with html', 'summary': 'Explains how to create a form using html, covering attributes like action and method, input types such as text, password, email, and telephone, and their corresponding attributes like required, min length, max length, and placeholder.', 'duration': 545.63, 'highlights': ['The chapter explains how to create a form using HTML, covering attributes like action and method, input types such as text, password, email, and telephone, and their corresponding attributes like required, min length, max length, and placeholder. Covering attributes like action and method, input types such as text, password, email, and telephone, and their corresponding attributes like required, min length, max length, and placeholder.', 'The method attribute specifies if this is a GET request or a POST request. POST is used for confidential information, such as a username and a password. GET is for insensitive data. The method attribute specifies if this is a GET request or a POST request. POST is used for confidential information, such as a username and a password. GET is for insensitive data.', 'Attributes like required, min length, and max length can be used to enforce input validation for text boxes and password fields. Attributes like required, min length, and max length can be used to enforce input validation for text boxes and password fields.', 'The placeholder attribute can be used to provide a hint or example of the expected input format for text boxes and email fields. The placeholder attribute can be used to provide a hint or example of the expected input format for text boxes and email fields.', 'The pattern attribute can be used to enforce a specific format for input fields, such as telephone numbers, using regular expressions. The pattern attribute can be used to enforce a specific format for input fields, such as telephone numbers, using regular expressions.']}], 'duration': 1208.287, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw2907182.jpg', 'highlights': ['The chapter demonstrates how to create a table of store hours with 7 days, open and closed hours.', 'The chapter also shows how to create a button with text, size, background color, font color, and hyperlink functionality.', 'The chapter explains how to create a form using HTML, covering attributes like action and method, input types such as text, password, email, and telephone, and their corresponding attributes like required, min length, max length, and placeholder.', 'The process of defining a function and using onClick attribute to execute JavaScript code when interacting with the button is explained.', 'The use of script tags for JavaScript and the creation of a function to change text on the screen is described.', 'Attributes like required, min length, and max length can be used to enforce input validation for text boxes and password fields.', 'The placeholder attribute can be used to provide a hint or example of the expected input format for text boxes and email fields.', 'The pattern attribute can be used to enforce a specific format for input fields, such as telephone numbers, using regular expressions.']}, {'end': 6035.4, 'segs': [{'end': 4380.679, 'src': 'embed', 'start': 4347.318, 'weight': 0, 'content': [{'end': 4353.242, 'text': "Instead of an input element, we're going to be using a pair of select tags for a select element.", 'start': 4347.318, 'duration': 5.924}, {'end': 4357.245, 'text': 'Then add a break afterwards.', 'start': 4355.564, 'duration': 1.681}, {'end': 4360.885, 'text': "So we have a dropdown menu, but there's no options.", 'start': 4358.663, 'duration': 2.222}, {'end': 4364.507, 'text': 'We will add option elements within our select element.', 'start': 4361.725, 'duration': 2.782}, {'end': 4368.43, 'text': 'So these have opening and closing tags.', 'start': 4366.609, 'duration': 1.821}, {'end': 4371.272, 'text': "Let's create three options.", 'start': 4370.031, 'duration': 1.241}, {'end': 4375.816, 'text': 'An option for Visa, MasterCard, then gift card.', 'start': 4373.174, 'duration': 2.642}, {'end': 4380.679, 'text': 'For option one, the value will be Visa.', 'start': 4376.456, 'duration': 4.223}], 'summary': 'Using select tags to create a dropdown menu with three options: visa, mastercard, and gift card.', 'duration': 33.361, 'max_score': 4347.318, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw4347318.jpg'}, {'end': 4452.392, 'src': 'embed', 'start': 4418.736, 'weight': 2, 'content': [{'end': 4421.378, 'text': 'Within the select tags, you can create option tags.', 'start': 4418.736, 'duration': 2.642}, {'end': 4423.079, 'text': 'Then we have a checkbox.', 'start': 4422.038, 'duration': 1.041}, {'end': 4424.94, 'text': "Again, let's create a label.", 'start': 4423.799, 'duration': 1.141}, {'end': 4427.382, 'text': 'This will be for a checkbox.', 'start': 4425.421, 'duration': 1.961}, {'end': 4431.285, 'text': 'I think a good use of a checkbox will be a subscribe button.', 'start': 4428.363, 'duration': 2.922}, {'end': 4433.526, 'text': 'The for attribute will be subscribe.', 'start': 4431.825, 'duration': 1.701}, {'end': 4438.11, 'text': 'The text will be subscribe.', 'start': 4435.568, 'duration': 2.542}, {'end': 4442.205, 'text': "We'll need an input element.", 'start': 4441.084, 'duration': 1.121}, {'end': 4447.668, 'text': 'Input type equals checkbox.', 'start': 4442.825, 'duration': 4.843}, {'end': 4452.392, 'text': 'The ID will match the for attribute of the label.', 'start': 4449.47, 'duration': 2.922}], 'summary': 'Creating option and checkbox tags, with a subscribe button for a checkbox.', 'duration': 33.656, 'max_score': 4418.736, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw4418736.jpg'}, {'end': 5003.484, 'src': 'embed', 'start': 4972.928, 'weight': 4, 'content': [{'end': 4975.809, 'text': 'Alright everybody, so those are headers and footers.', 'start': 4972.928, 'duration': 2.881}, {'end': 4980.892, 'text': 'They help organize your content, as well as make applying CSS a little bit easier.', 'start': 4976.37, 'duration': 4.522}, {'end': 4984.433, 'text': 'Because you can target everything within the header or footer elements.', 'start': 4981.272, 'duration': 3.161}, {'end': 4987.655, 'text': 'And those are headers and footers in HTML.', 'start': 4984.974, 'duration': 2.681}, {'end': 4991.626, 'text': 'Hey, hello again, friends.', 'start': 4990.384, 'duration': 1.242}, {'end': 4994.99, 'text': "Today I'm going to explain how we can get started working with CSS.", 'start': 4991.706, 'duration': 3.284}, {'end': 4997.894, 'text': 'So sit back, relax, and enjoy the show.', 'start': 4995.43, 'duration': 2.464}, {'end': 5003.484, 'text': 'CSS is an acronym for Cascading Style Sheets.', 'start': 5000.563, 'duration': 2.921}], 'summary': 'Html headers and footers aid in organizing content; css simplifies styling.', 'duration': 30.556, 'max_score': 4972.928, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw4972928.jpg'}, {'end': 5491.009, 'src': 'embed', 'start': 5447.012, 'weight': 1, 'content': [{'end': 5450.153, 'text': "External style sheets are reusable, so they're pretty nice and convenient.", 'start': 5447.012, 'duration': 3.141}, {'end': 5453.594, 'text': 'Alright everybody, so that is an introduction to CSS.', 'start': 5450.693, 'duration': 2.901}, {'end': 5457.736, 'text': 'With CSS, you can change the font, the color, add decorations.', 'start': 5454.194, 'duration': 3.542}, {'end': 5459.396, 'text': "We'll get more into that soon.", 'start': 5458.256, 'duration': 1.14}, {'end': 5464.838, 'text': 'You can apply CSS inline with an internal style sheet or external style sheet.', 'start': 5460.076, 'duration': 4.762}, {'end': 5467.139, 'text': 'And that is an introduction to CSS.', 'start': 5465.398, 'duration': 1.741}, {'end': 5475.394, 'text': "Hey everybody, in today's video I'm going to show you how we can apply CSS colors to our website.", 'start': 5470.609, 'duration': 4.785}, {'end': 5478.016, 'text': 'So sit back, relax, and enjoy the show.', 'start': 5475.794, 'duration': 2.222}, {'end': 5480.559, 'text': "We'll need four paragraphs to begin with.", 'start': 5478.657, 'duration': 1.902}, {'end': 5486.785, 'text': "I'll name the first paragraph p1, the second will be p2, followed by p3, then p4.", 'start': 5480.959, 'duration': 5.826}, {'end': 5491.009, 'text': 'We can change the background color of an element or the font color.', 'start': 5487.806, 'duration': 3.203}], 'summary': 'Introduction to css, including applying colors, fonts, and decorations. external style sheets are reusable and convenient.', 'duration': 43.997, 'max_score': 5447.012, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw5447012.jpg'}], 'start': 4115.889, 'title': 'Html form elements, attributes, and css styling', 'summary': 'Discusses form input elements and their attributes, creating basic html forms, headers, footers, and css usage, including applying colors and fonts. it emphasizes specific attributes, organization, and advantages of css, providing detailed examples for practical application.', 'chapters': [{'end': 4214.375, 'start': 4115.889, 'title': 'Form input elements and attributes', 'summary': 'Discusses the usage of input elements such as date and number, with details on their attributes including type, id, min, max, and value.', 'duration': 98.486, 'highlights': ['Usage of date input element Describes the process of using a date input element, specifying the type, ID, and interactive calendar functionality.', 'Usage of number input element Explains the process of using a number input element, including setting the type, ID, and attributes like min, max, and value.']}, {'end': 4632.643, 'start': 4215.45, 'title': 'Creating basic html form', 'summary': 'Covers creating a basic html form involving radio buttons, dropdown menu, checkbox, text area, file submission, and changing encryption type, emphasizing the need for specific attributes and their functionality.', 'duration': 417.193, 'highlights': ['Creating radio buttons with labels and attributes like for, ID, and value to ensure proper functionality. Explaining the process of creating radio buttons and the importance of attributes like for, ID, and value.', 'Demonstrating the creation of a dropdown menu using select tags and option elements with specific values and texts. Explaining the creation of a dropdown menu using select tags and option elements with specific values and texts.', 'Explaining the creation and functionality of a checkbox with labels and input element, and the ability to subscribe via checkbox or label click. Detailing the creation and functionality of a checkbox with the ability to subscribe via checkbox or label click.', 'Guidance on creating a text area with specific dimensions using rows and columns attributes. Providing guidance on creating a text area with specific dimensions using rows and columns attributes.', 'Detailing the creation of a file submission with specific attributes and the capability to limit file types with the accept attribute. Detailing the creation of a file submission with the capability to limit file types using the accept attribute.', 'Explaining the importance of changing the encryption type to multi-part/form data when sending large files. Explaining the importance of changing the encryption type to multi-part/form data when sending large files.']}, {'end': 4971.928, 'start': 4632.723, 'title': 'Creating header and footer in html', 'summary': 'Covers creating header and footer elements in html, including the use of semantic tags, organization of content, and application of css properties, with a focus on creating a basic navigation bar within the header.', 'duration': 339.205, 'highlights': ['Headers and footers are semantic tags that help organize content and make CSS styling easier. Headers and footers serve as containers for introductory and concluding content, aiding in the organization of web pages and simplifying the application of CSS properties.', 'Creating a basic navigation bar within the header involves adding hyperlinks and using a horizontal rule for styling. Demonstrates the process of adding hyperlinks for a basic navigation bar within the header, along with the inclusion of a horizontal rule for visual styling.', 'Applying inline CSS to the header element for background-color and other style attributes. Illustrates the usage of inline CSS to change the background color and other style attributes within the header element, providing customization options for content.']}, {'end': 5420.819, 'start': 4972.928, 'title': 'Working with css', 'summary': 'Explains the use of headers and footers in html, the three ways to apply css (inline, internal, and external), and how to create and link an external style sheet, emphasizing the advantages of using an external style sheet and demonstrating the application of css properties using ids and classes.', 'duration': 447.891, 'highlights': ['Headers and footers in HTML help organize content and make applying CSS easier. Headers and footers are essential for organizing content and simplifying the application of CSS.', 'The three ways to apply CSS are inline, internal, and external. The chapter introduces the three methods of applying CSS: inline, internal, and external.', 'Creating an external style sheet is the most popular method and allows for reusability. External style sheets are highlighted as the most popular method due to their reusability.', 'Demonstrated the application of CSS properties using IDs and classes, showing how to change the color of specific paragraphs based on IDs and classes. The chapter demonstrates how to apply CSS properties using IDs and classes, showcasing the ability to change the color of specific paragraphs based on their IDs and classes.']}, {'end': 6035.4, 'start': 5420.819, 'title': 'Applying css colors and fonts', 'summary': 'Covers applying css colors using named colors, rgb values, hexadecimal values, and hsl values, and introduces working with fonts in css, including using google fonts and font properties such as family, size, weight, and style.', 'duration': 614.581, 'highlights': ['External style sheets are reusable and convenient. External style sheets can be linked to web pages using the link tag, allowing for the application of CSS styles to multiple pages, increasing reusability and convenience.', 'Applying CSS colors using named colors, RGB values, hexadecimal values, and HSL values. The chapter demonstrates applying different types of CSS colors, such as named colors, RGB values, hexadecimal values, and HSL values, providing flexibility in color choices for web elements.', 'Introducing working with fonts in CSS and using Google Fonts. The chapter introduces working with fonts in CSS, including selecting and applying fonts using Google Fonts, and emphasizes the importance of using web-safe fonts as fallbacks.']}], 'duration': 1919.511, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw4115889.jpg', 'highlights': ['Demonstrating the creation of a dropdown menu using select tags and option elements with specific values and texts.', 'Demonstrating the application of CSS properties using IDs and classes, showing how to change the color of specific paragraphs based on IDs and classes.', 'Explaining the creation and functionality of a checkbox with labels and input element, and the ability to subscribe via checkbox or label click.', 'External style sheets are reusable and convenient. External style sheets can be linked to web pages using the link tag, allowing for the application of CSS styles to multiple pages, increasing reusability and convenience.', 'Headers and footers are semantic tags that help organize content and make CSS styling easier. Headers and footers serve as containers for introductory and concluding content, aiding in the organization of web pages and simplifying the application of CSS properties.']}, {'end': 7006.116, 'segs': [{'end': 6073.803, 'src': 'embed', 'start': 6040.407, 'weight': 4, 'content': [{'end': 6041.467, 'text': 'I forgot which one I used.', 'start': 6040.407, 'duration': 1.06}, {'end': 6043.648, 'text': 'I think it was RobotoLite.', 'start': 6041.487, 'duration': 2.161}, {'end': 6051.61, 'text': 'These fonts are available locally.', 'start': 6049.969, 'duration': 1.641}, {'end': 6054.71, 'text': 'We no longer need to link to the Google Fonts API.', 'start': 6051.89, 'duration': 2.82}, {'end': 6056.451, 'text': 'We can delete that link.', 'start': 6055.43, 'duration': 1.021}, {'end': 6061.632, 'text': 'So now what we need to do is go to our style sheet.', 'start': 6059.051, 'duration': 2.581}, {'end': 6064.577, 'text': 'and create a font-face rule.', 'start': 6062.515, 'duration': 2.062}, {'end': 6066.618, 'text': "We'll begin with the first font.", 'start': 6065.377, 'duration': 1.241}, {'end': 6073.803, 'text': 'At the top of our style sheet, type at font-face curly braces.', 'start': 6067.258, 'duration': 6.545}], 'summary': 'Robotolite is available locally, no need for google fonts api. create font-face rule in the style sheet.', 'duration': 33.396, 'max_score': 6040.407, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw6040407.jpg'}, {'end': 6168.231, 'src': 'embed', 'start': 6136.957, 'weight': 0, 'content': [{'end': 6140.48, 'text': 'Fonts slash whatever the heck is listed here.', 'start': 6136.957, 'duration': 3.523}, {'end': 6142.381, 'text': "I'm going to rename this.", 'start': 6141.5, 'duration': 0.881}, {'end': 6145.083, 'text': 'This font shall be known as Open..', 'start': 6143.302, 'duration': 1.781}, {'end': 6153.024, 'text': 'Sans So we need to change the font for our paragraph to that new font.', 'start': 6147.862, 'duration': 5.162}, {'end': 6154.865, 'text': 'There we are.', 'start': 6154.405, 'duration': 0.46}, {'end': 6160.207, 'text': "Alright everybody, so that's a few different ways in which you can work with fonts in CSS.", 'start': 6155.766, 'duration': 4.441}, {'end': 6168.231, 'text': "Hey, how's it going everybody? In today's video I'm going to explain borders in CSS.", 'start': 6163.029, 'duration': 5.202}], 'summary': 'Demonstrating the use of fonts and borders in css.', 'duration': 31.274, 'max_score': 6136.957, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw6136957.jpg'}, {'end': 6351.559, 'src': 'embed', 'start': 6320.269, 'weight': 3, 'content': [{'end': 6321.891, 'text': 'Yeah, that is the shorthand syntax.', 'start': 6320.269, 'duration': 1.622}, {'end': 6327.306, 'text': 'You type border, the border width, the border style, then the border color.', 'start': 6322.844, 'duration': 4.462}, {'end': 6329.948, 'text': 'But border radius is still a separate property.', 'start': 6327.787, 'duration': 2.161}, {'end': 6332.609, 'text': "Let's add a border to our paragraph now.", 'start': 6330.748, 'duration': 1.861}, {'end': 6334.79, 'text': 'We will select the p tag.', 'start': 6332.969, 'duration': 1.821}, {'end': 6339.853, 'text': 'There is directional shorthand syntax if you want just one of the borders.', 'start': 6335.631, 'duration': 4.222}, {'end': 6341.313, 'text': "Let's begin with the bottom.", 'start': 6340.333, 'duration': 0.98}, {'end': 6344.115, 'text': 'Border dash bottom.', 'start': 6341.834, 'duration': 2.281}, {'end': 6348.117, 'text': 'Then we can list a border width, border style, then a color.', 'start': 6345.115, 'duration': 3.002}, {'end': 6351.559, 'text': 'And this would only apply to the bottom border of our paragraph.', 'start': 6348.517, 'duration': 3.042}], 'summary': 'Using shorthand syntax for borders, with specific syntax for bottom border, can be applied to paragraph tags.', 'duration': 31.29, 'max_score': 6320.269, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw6320269.jpg'}, {'end': 6703.138, 'src': 'heatmap', 'start': 6406.921, 'weight': 0.795, 'content': [{'end': 6408.582, 'text': 'Then I will pick green.', 'start': 6406.921, 'duration': 1.661}, {'end': 6411.805, 'text': 'Maybe like a light green.', 'start': 6410.744, 'duration': 1.061}, {'end': 6413.227, 'text': 'There we are.', 'start': 6412.827, 'duration': 0.4}, {'end': 6415.788, 'text': "Then we'll set the border radius as well.", 'start': 6414.067, 'duration': 1.721}, {'end': 6419.569, 'text': 'This would apply for all of the borders.', 'start': 6417.708, 'duration': 1.861}, {'end': 6422.569, 'text': "Let's try 10.", 'start': 6420.769, 'duration': 1.8}, {'end': 6422.949, 'text': 'Not bad.', 'start': 6422.569, 'duration': 0.38}, {'end': 6426.53, 'text': 'Alright everybody, that is how to create CSS borders.', 'start': 6423.47, 'duration': 3.06}, {'end': 6433.772, 'text': "Hey everybody, today I'm going to show you how we can create text shadows and box shadows.", 'start': 6429.331, 'duration': 4.441}, {'end': 6436.253, 'text': "We'll need some sample text to work with.", 'start': 6434.372, 'duration': 1.881}, {'end': 6439.253, 'text': "I'll use an element, type in your name.", 'start': 6436.393, 'duration': 2.86}, {'end': 6442.254, 'text': 'And we will need a element.', 'start': 6440.554, 'duration': 1.7}, {'end': 6446.081, 'text': 'We will eventually create a box.', 'start': 6444.42, 'duration': 1.661}, {'end': 6450.143, 'text': "I'll give this div an id of box1.", 'start': 6446.301, 'duration': 3.842}, {'end': 6451.444, 'text': 'Good enough.', 'start': 6451.024, 'duration': 0.42}, {'end': 6454.306, 'text': 'I would like to give this h1 element a shadow.', 'start': 6451.984, 'duration': 2.322}, {'end': 6456.727, 'text': 'I will select my h1 element.', 'start': 6454.786, 'duration': 1.941}, {'end': 6461.73, 'text': 'I will set the text shadow property to be..', 'start': 6457.447, 'duration': 4.283}, {'end': 6462.69, 'text': 'We need two numbers.', 'start': 6461.73, 'duration': 0.96}, {'end': 6465.732, 'text': 'A horizontal offset and a vertical offset.', 'start': 6463.271, 'duration': 2.461}, {'end': 6468.854, 'text': "Let's do one pixel and one pixel.", 'start': 6466.572, 'duration': 2.282}, {'end': 6474.064, 'text': 'We have an offset to the right of 1 and down by 1.', 'start': 6470.08, 'duration': 3.984}, {'end': 6481.211, 'text': "If I were to increase the horizontal offset, let's change this to 2, well the shadow is moving more to the right.", 'start': 6474.064, 'duration': 7.147}, {'end': 6486.774, 'text': "Let's try 5, 10, 50.", 'start': 6481.891, 'duration': 4.883}, {'end': 6490.279, 'text': 'The first number is for the horizontal offset.', 'start': 6486.776, 'duration': 3.503}, {'end': 6493.991, 'text': "Let's change that to 3.", 'start': 6490.84, 'duration': 3.151}, {'end': 6495.973, 'text': 'The second number is for the vertical offset.', 'start': 6493.991, 'duration': 1.982}, {'end': 6502.579, 'text': 'If I change that to five, well, the text is going more downwards.', 'start': 6496.674, 'duration': 5.905}, {'end': 6503.56, 'text': '50 would be this.', 'start': 6502.599, 'duration': 0.961}, {'end': 6506.203, 'text': "All right, let's keep that at three though.", 'start': 6504.742, 'duration': 1.461}, {'end': 6509.146, 'text': 'You could add a third number for a blur.', 'start': 6507.344, 'duration': 1.802}, {'end': 6512.489, 'text': "Here's a one pixel blur.", 'start': 6511.368, 'duration': 1.121}, {'end': 6520.701, 'text': 'Two, three, four, 5.', 'start': 6512.509, 'duration': 8.192}, {'end': 6524.102, 'text': "If this is a really large number like 100, you can't even see the shadow anymore.", 'start': 6520.701, 'duration': 3.401}, {'end': 6525.863, 'text': "Let's stick with 5.", 'start': 6524.762, 'duration': 1.101}, {'end': 6526.703, 'text': "That's a decent amount.", 'start': 6525.863, 'duration': 0.84}, {'end': 6529.043, 'text': 'You can even change the color too.', 'start': 6527.623, 'duration': 1.42}, {'end': 6530.404, 'text': "Let's pick a red color.", 'start': 6529.283, 'duration': 1.121}, {'end': 6534.685, 'text': "That's good.", 'start': 6534.245, 'duration': 0.44}, {'end': 6536.825, 'text': 'You can add more than one shadow.', 'start': 6535.285, 'duration': 1.54}, {'end': 6542.527, 'text': 'Within the text shadow property, for more than one shadow effect, each shadow is comma separated.', 'start': 6537.325, 'duration': 5.202}, {'end': 6544.407, 'text': 'So add a comma afterwards.', 'start': 6543.167, 'duration': 1.24}, {'end': 6547.348, 'text': "Let's copy what we have, paste it again.", 'start': 6545.327, 'duration': 2.021}, {'end': 6553.264, 'text': "I'm going to give the second shadow a negative offset so it's up and to the left.", 'start': 6549.261, 'duration': 4.003}, {'end': 6556.106, 'text': "I'll change the color so it's more distinct.", 'start': 6554.405, 'duration': 1.701}, {'end': 6557.987, 'text': "Let's go with the blue color.", 'start': 6556.866, 'duration': 1.121}, {'end': 6560.048, 'text': "Yeah, I don't like that one.", 'start': 6558.007, 'duration': 2.041}, {'end': 6561.73, 'text': "Yeah, that's fine.", 'start': 6561.129, 'duration': 0.601}, {'end': 6564.692, 'text': "All right, now let's cover box shadows.", 'start': 6562.95, 'duration': 1.742}, {'end': 6568.494, 'text': "Let's select our ID of box one.", 'start': 6565.452, 'duration': 3.042}, {'end': 6573.558, 'text': "I'll give this box a width of 100 and a height of 100.", 'start': 6569.535, 'duration': 4.023}, {'end': 6574.138, 'text': "Let's pick a color too.", 'start': 6573.558, 'duration': 0.58}, {'end': 6587.117, 'text': "background-color Let's go with a whitish color so it's just barely visible.", 'start': 6579.994, 'duration': 7.123}, {'end': 6589.738, 'text': "Something like that's fine.", 'start': 6588.778, 'duration': 0.96}, {'end': 6593.56, 'text': 'For other elements besides text, we have box shadow.', 'start': 6590.559, 'duration': 3.001}, {'end': 6597.382, 'text': "And really it's the same process as before.", 'start': 6595.601, 'duration': 1.781}, {'end': 6599.403, 'text': 'We have a horizontal offset.', 'start': 6597.522, 'duration': 1.881}, {'end': 6601.664, 'text': "Let's do three pixels.", 'start': 6600.383, 'duration': 1.281}, {'end': 6603.465, 'text': 'A vertical offset.', 'start': 6602.684, 'duration': 0.781}, {'end': 6604.685, 'text': "Let's do three pixels again.", 'start': 6603.505, 'duration': 1.18}, {'end': 6606.126, 'text': 'A blur.', 'start': 6604.705, 'duration': 1.421}, {'end': 6608.167, 'text': "Let's do five pixels.", 'start': 6607.026, 'duration': 1.141}, {'end': 6612.111, 'text': "and a color if we so choose, but I'll keep that the same.", 'start': 6609.73, 'duration': 2.381}, {'end': 6616.172, 'text': 'Now our box has a 3D pop effect, which is pretty sweet.', 'start': 6612.771, 'duration': 3.401}, {'end': 6621.894, 'text': 'All right, everybody, so we have text shadows for text and box shadows for other elements.', 'start': 6616.752, 'duration': 5.142}, {'end': 6625.275, 'text': 'And well, everybody, those are shadows in CSS.', 'start': 6622.334, 'duration': 2.941}, {'end': 6631.818, 'text': "Hey, how's it going, people? Today I'm going to explain margins in CSS.", 'start': 6627.836, 'duration': 3.982}, {'end': 6634.739, 'text': 'Margins are the space around an element.', 'start': 6632.158, 'duration': 2.581}, {'end': 6642.237, 'text': "I'll create an H1 element, type in your name, or something that's kind of short, and we'll need a paragraph.", 'start': 6634.959, 'duration': 7.278}, {'end': 6645.458, 'text': "I'll generate some text by typing lorem then hitting tab.", 'start': 6642.657, 'duration': 2.801}, {'end': 6647.579, 'text': 'Let me just zoom in a little bit.', 'start': 6646.218, 'duration': 1.361}, {'end': 6653.541, 'text': "To give you a diagram of margins, I'm going to right click our H1 element and go to inspect.", 'start': 6648.199, 'duration': 5.342}, {'end': 6657.382, 'text': 'At the bottom of my elements window, we have this diagram.', 'start': 6654.441, 'duration': 2.941}, {'end': 6659.863, 'text': 'It kind of resembles an onion because it has layers.', 'start': 6657.762, 'duration': 2.101}, {'end': 6665.765, 'text': 'We have the element itself and its dimensions, padding, border, then margins.', 'start': 6660.463, 'duration': 5.302}, {'end': 6669.688, 'text': 'Padding is between the element itself and any borders.', 'start': 6666.505, 'duration': 3.183}, {'end': 6673.111, 'text': 'Margins are the area outside of any borders.', 'start': 6670.288, 'duration': 2.823}, {'end': 6677.014, 'text': "Today we'll be working with margins, the area outside of any elements.", 'start': 6673.591, 'duration': 3.423}, {'end': 6678.816, 'text': "Let's close this window.", 'start': 6677.795, 'duration': 1.021}, {'end': 6683.08, 'text': "Naturally, there's a few pixels of margin around our body.", 'start': 6679.757, 'duration': 3.323}, {'end': 6688.765, 'text': "The letters in our element and our paragraph aren't directly next to the border of our window.", 'start': 6683.52, 'duration': 5.245}, {'end': 6690.627, 'text': 'So we can eliminate that.', 'start': 6689.606, 'duration': 1.021}, {'end': 6695.136, 'text': 'We will select the body element within our CSS style sheet.', 'start': 6691.755, 'duration': 3.381}, {'end': 6698.437, 'text': 'We will set the margin to be 0 pixels.', 'start': 6695.696, 'duration': 2.741}, {'end': 6703.138, 'text': 'So now the letters are directly next to the edge of the web browser.', 'start': 6699.597, 'duration': 3.541}], 'summary': 'Demonstration of creating css borders, text shadows, box shadows, and explaining margins in css.', 'duration': 296.217, 'max_score': 6406.921, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw6406921.jpg'}, {'end': 6481.211, 'src': 'embed', 'start': 6451.984, 'weight': 2, 'content': [{'end': 6454.306, 'text': 'I would like to give this h1 element a shadow.', 'start': 6451.984, 'duration': 2.322}, {'end': 6456.727, 'text': 'I will select my h1 element.', 'start': 6454.786, 'duration': 1.941}, {'end': 6461.73, 'text': 'I will set the text shadow property to be..', 'start': 6457.447, 'duration': 4.283}, {'end': 6462.69, 'text': 'We need two numbers.', 'start': 6461.73, 'duration': 0.96}, {'end': 6465.732, 'text': 'A horizontal offset and a vertical offset.', 'start': 6463.271, 'duration': 2.461}, {'end': 6468.854, 'text': "Let's do one pixel and one pixel.", 'start': 6466.572, 'duration': 2.282}, {'end': 6474.064, 'text': 'We have an offset to the right of 1 and down by 1.', 'start': 6470.08, 'duration': 3.984}, {'end': 6481.211, 'text': "If I were to increase the horizontal offset, let's change this to 2, well the shadow is moving more to the right.", 'start': 6474.064, 'duration': 7.147}], 'summary': 'Adding a shadow to the h1 element with a 1px horizontal and vertical offset, and observing the effect of changing the horizontal offset.', 'duration': 29.227, 'max_score': 6451.984, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw6451984.jpg'}], 'start': 6040.407, 'title': 'Css properties and usage', 'summary': 'Covers working with local fonts, creating borders with options for style, width, color, and corner radius, shorthand syntax for borders, text and box shadows properties, margins in css, setting margins for elements, and the usage of the float property.', 'chapters': [{'end': 6295.8, 'start': 6040.407, 'title': 'Working with fonts and borders in css', 'summary': 'Demonstrates working with local fonts by creating font-face rules to set up robotolite and open sans, and explains how to add borders in css with options for style, width, color, and corner radius.', 'duration': 255.393, 'highlights': ['The chapter demonstrates creating font-face rules to set up local fonts RobotoLite and Open Sans, eliminating the need to link to the Google Fonts API.', 'Explanation on how to add borders in CSS is provided with options for style, width, color, and corner radius, with examples and visual demonstrations.', 'Demonstration of changing font for elements in CSS, including using the font-family property and applying the font to specific elements like H1 and paragraph tags.']}, {'end': 6657.382, 'start': 6296.501, 'title': 'Css borders, shadows, and margins', 'summary': 'Covers shorthand syntax for css borders, creating text and box shadows with various properties, and explaining margins in css.', 'duration': 360.881, 'highlights': ['The chapter covers shorthand syntax for CSS borders Explains how to use shorthand syntax for setting border properties with specific examples like border-width, border-style, and border-color.', 'Creating text and box shadows with various properties Detailed explanation on creating text shadows with properties like horizontal and vertical offset, blur, and color, as well as creating box shadows with similar properties.', 'Explaining margins in CSS Demonstrates the concept of margins in CSS and provides a visual example using the inspect tool to illustrate the space around an element.']}, {'end': 7006.116, 'start': 6657.762, 'title': 'Css margins and float property', 'summary': "Covers the concept of margins in css, demonstrating how to set margins for elements and explaining the float property's usage to allow other elements to wrap around a specified element.", 'duration': 348.354, 'highlights': ['Margins in CSS The concept of margins in CSS is explained, demonstrating how to set margins for elements and the impact of different margin properties such as top, bottom, left, right, and auto.', 'Float Property Usage The usage of the float property is highlighted, showcasing how it allows other elements to wrap around a specified element, particularly useful for images and block-level elements like div sections.']}], 'duration': 965.709, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw6040407.jpg', 'highlights': ['Demonstration of changing font for elements in CSS, including using the font-family property and applying the font to specific elements like H1 and paragraph tags.', 'Demonstration of changing font for elements in CSS, including using the font-family property and applying the font to specific elements like H1 and paragraph tags.', 'Creating text and box shadows with various properties Detailed explanation on creating text shadows with properties like horizontal and vertical offset, blur, and color, as well as creating box shadows with similar properties.', 'The chapter covers shorthand syntax for CSS borders Explains how to use shorthand syntax for setting border properties with specific examples like border-width, border-style, and border-color.', 'The chapter demonstrates creating font-face rules to set up local fonts RobotoLite and Open Sans, eliminating the need to link to the Google Fonts API.']}, {'end': 9293.779, 'segs': [{'end': 7284.662, 'src': 'heatmap', 'start': 7125.999, 'weight': 0, 'content': [{'end': 7128.52, 'text': 'Again, the text is not wrapping around the image.', 'start': 7125.999, 'duration': 2.521}, {'end': 7131.122, 'text': "Let's take image2.", 'start': 7129.721, 'duration': 1.401}, {'end': 7136.765, 'text': 'We will float this image to the right.', 'start': 7133.963, 'duration': 2.802}, {'end': 7140.856, 'text': "I'll add some margin to the left as well.", 'start': 7139.175, 'duration': 1.681}, {'end': 7142.917, 'text': 'Margin dash left.', 'start': 7141.336, 'duration': 1.581}, {'end': 7144.859, 'text': "Let's do 10 pixels.", 'start': 7143.758, 'duration': 1.101}, {'end': 7146.92, 'text': 'Yeah, there we go.', 'start': 7146.2, 'duration': 0.72}, {'end': 7147.761, 'text': 'That looks pretty good.', 'start': 7147.04, 'duration': 0.721}, {'end': 7152.424, 'text': 'Basically speaking, the float property allows other elements to flow around it.', 'start': 7148.401, 'duration': 4.023}, {'end': 7154.605, 'text': 'Now there is one thing I want to show you.', 'start': 7153.024, 'duration': 1.581}, {'end': 7158.047, 'text': "I'll add a border around the body of our document.", 'start': 7155.366, 'duration': 2.681}, {'end': 7160.869, 'text': "Let's select our body element.", 'start': 7159.248, 'duration': 1.621}, {'end': 7166.193, 'text': 'I will create a border that is 3 pixels solid.', 'start': 7162.791, 'duration': 3.402}, {'end': 7169.23, 'text': 'Now check this out.', 'start': 7168.49, 'duration': 0.74}, {'end': 7178.096, 'text': "With my second image, it's overflowing outside of the container that it's in, the body of my document.", 'start': 7171.652, 'duration': 6.444}, {'end': 7182.178, 'text': 'There is one change we can make to our container, our body.', 'start': 7178.656, 'duration': 3.522}, {'end': 7189.303, 'text': 'With our container, I will set the display property to be flow-root.', 'start': 7182.899, 'duration': 6.404}, {'end': 7193.405, 'text': "Now anything that's floating will stay within the container.", 'start': 7190.503, 'duration': 2.902}, {'end': 7195.066, 'text': "It's not going to overflow.", 'start': 7193.565, 'duration': 1.501}, {'end': 7197.588, 'text': 'Pikachu is still within the box.', 'start': 7196.247, 'duration': 1.341}, {'end': 7199.307, 'text': 'All right, everybody.', 'start': 7198.607, 'duration': 0.7}, {'end': 7203.288, 'text': 'In conclusion, the float property allows other elements to flow around it.', 'start': 7199.387, 'duration': 3.901}, {'end': 7206.129, 'text': 'And that is the float property in CSS.', 'start': 7203.528, 'duration': 2.601}, {'end': 7213.31, 'text': "Hey, what's going on, everybody? Today I'm going to explain the overflow property in CSS.", 'start': 7208.749, 'duration': 4.561}, {'end': 7223.272, 'text': 'The overflow property sets the defined behavior when content does not fit in the parent element box, meaning it overflows.', 'start': 7213.75, 'duration': 9.522}, {'end': 7224.632, 'text': "There's five states.", 'start': 7223.732, 'duration': 0.9}, {'end': 7227.853, 'text': 'Visible, hidden, clip, scroll, and auto.', 'start': 7225.372, 'duration': 2.481}, {'end': 7229.469, 'text': "Here's an example.", 'start': 7228.749, 'duration': 0.72}, {'end': 7231.891, 'text': "Let's create a div element.", 'start': 7230.63, 'duration': 1.261}, {'end': 7236.793, 'text': "Then within this div element, I'll create a paragraph.", 'start': 7233.832, 'duration': 2.961}, {'end': 7241.596, 'text': "I'll generate some text.", 'start': 7240.375, 'duration': 1.221}, {'end': 7252.101, 'text': "Then going to our style sheet, I'll take our div, then give this div a border of two pixels solid.", 'start': 7243.177, 'duration': 8.924}, {'end': 7255.023, 'text': "I'll also limit the height.", 'start': 7253.762, 'duration': 1.261}, {'end': 7258.572, 'text': 'height 75 pixels.', 'start': 7256.331, 'duration': 2.241}, {'end': 7261.012, 'text': 'Now we have a problem.', 'start': 7260.072, 'duration': 0.94}, {'end': 7266.434, 'text': 'The content of our paragraph is overflowing out of our div.', 'start': 7261.613, 'duration': 4.821}, {'end': 7271.716, 'text': 'We have a couple different ways of handling this with the overflow property.', 'start': 7268.215, 'duration': 3.501}, {'end': 7276.557, 'text': 'By default, overflow is set to visible.', 'start': 7273.676, 'duration': 2.881}, {'end': 7278.518, 'text': "There's going to be no apparent change.", 'start': 7277.077, 'duration': 1.441}, {'end': 7284.662, 'text': "Basically we're stating if any inner elements will overflow, allow it to do so.", 'start': 7279.4, 'duration': 5.262}], 'summary': 'Explains float and overflow properties in css, with examples and practical demonstrations.', 'duration': 28.606, 'max_score': 7125.999, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw7125999.jpg'}, {'end': 7241.596, 'src': 'embed', 'start': 7213.75, 'weight': 1, 'content': [{'end': 7223.272, 'text': 'The overflow property sets the defined behavior when content does not fit in the parent element box, meaning it overflows.', 'start': 7213.75, 'duration': 9.522}, {'end': 7224.632, 'text': "There's five states.", 'start': 7223.732, 'duration': 0.9}, {'end': 7227.853, 'text': 'Visible, hidden, clip, scroll, and auto.', 'start': 7225.372, 'duration': 2.481}, {'end': 7229.469, 'text': "Here's an example.", 'start': 7228.749, 'duration': 0.72}, {'end': 7231.891, 'text': "Let's create a div element.", 'start': 7230.63, 'duration': 1.261}, {'end': 7236.793, 'text': "Then within this div element, I'll create a paragraph.", 'start': 7233.832, 'duration': 2.961}, {'end': 7241.596, 'text': "I'll generate some text.", 'start': 7240.375, 'duration': 1.221}], 'summary': 'The overflow property has 5 states: visible, hidden, clip, scroll, and auto.', 'duration': 27.846, 'max_score': 7213.75, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw7213750.jpg'}, {'end': 7450.231, 'src': 'embed', 'start': 7420.466, 'weight': 2, 'content': [{'end': 7422.688, 'text': "They're either block level or inline.", 'start': 7420.466, 'duration': 2.222}, {'end': 7428.334, 'text': 'An element that is block level starts on a new line and takes up the entire width available.', 'start': 7422.989, 'duration': 5.345}, {'end': 7430.797, 'text': 'Inline elements do not start on a new line.', 'start': 7428.575, 'duration': 2.222}, {'end': 7433.58, 'text': 'The width of that element is limited to what is needed.', 'start': 7431.057, 'duration': 2.523}, {'end': 7441.645, 'text': 'A few examples of block level elements would include, but are not limited to, header elements, div elements, paragraph elements, form elements,', 'start': 7433.94, 'duration': 7.705}, {'end': 7443.506, 'text': 'header elements and footer elements.', 'start': 7441.645, 'duration': 1.861}, {'end': 7450.231, 'text': 'Inline elements include, but yet again are not limited to, span elements, anchor elements, and image elements.', 'start': 7443.987, 'duration': 6.244}], 'summary': 'Block level and inline elements differ in layout and width. examples provided.', 'duration': 29.765, 'max_score': 7420.466, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw7420466.jpg'}, {'end': 7549.037, 'src': 'embed', 'start': 7521.318, 'weight': 3, 'content': [{'end': 7524.44, 'text': "However, for an inline element, the width and height wouldn't apply.", 'start': 7521.318, 'duration': 3.122}, {'end': 7527.302, 'text': 'You can see that our span element stays the same size.', 'start': 7524.981, 'duration': 2.321}, {'end': 7533.506, 'text': "By utilizing the display property, we can change the behavior of these elements, how they're displayed.", 'start': 7528.063, 'duration': 5.443}, {'end': 7538.89, 'text': 'If I set my div element to be block, well, it already is a block level element.', 'start': 7533.887, 'duration': 5.003}, {'end': 7539.951, 'text': "There's no change.", 'start': 7539.23, 'duration': 0.721}, {'end': 7546.735, 'text': 'If I set my span element to display as a block level element, well, then we can apply a width and a height.', 'start': 7540.591, 'duration': 6.144}, {'end': 7549.037, 'text': 'These two elements are displayed as a block.', 'start': 7547.215, 'duration': 1.822}], 'summary': 'Display property can change behavior of elements, allowing width and height to be applied. setting span element to display as block enables width and height.', 'duration': 27.719, 'max_score': 7521.318, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw7521318.jpg'}, {'end': 7858.124, 'src': 'embed', 'start': 7831.541, 'weight': 5, 'content': [{'end': 7840.324, 'text': 'I mean it looks nice, right?. When calculating the height or the width we can disregard any padding or any borders, but we have to add this property.', 'start': 7831.541, 'duration': 8.783}, {'end': 7847.547, 'text': "We'll add box dash sizing border dash box.", 'start': 7841.185, 'duration': 6.362}, {'end': 7854.722, 'text': "When we calculate the height or the width we're allocating, disregard any padding or any borders.", 'start': 7849.298, 'duration': 5.424}, {'end': 7858.124, 'text': 'The box sizing property will take that into consideration.', 'start': 7855.402, 'duration': 2.722}], 'summary': 'Box sizing property accounts for padding and borders when calculating height or width.', 'duration': 26.583, 'max_score': 7831.541, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw7831541.jpg'}, {'end': 8081.567, 'src': 'embed', 'start': 8051.966, 'weight': 4, 'content': [{'end': 8057.812, 'text': "Even though we set max height to be 50%, we don't necessarily need all this space because there's not enough content.", 'start': 8051.966, 'duration': 5.846}, {'end': 8067.061, 'text': 'If I absolutely need these boxes to take up at least 50% of the height of my window, I would use minimum height instead of maximum height.', 'start': 8058.352, 'duration': 8.709}, {'end': 8068.943, 'text': "So really, it's up to you.", 'start': 8068.022, 'duration': 0.921}, {'end': 8070.084, 'text': 'All right, everybody.', 'start': 8068.963, 'duration': 1.121}, {'end': 8073.887, 'text': 'So that is an introduction to the height and width properties in CSS.', 'start': 8070.124, 'duration': 3.763}, {'end': 8081.567, 'text': "Hey everybody, so today I'm going to explain the position property in CSS.", 'start': 8077.145, 'duration': 4.422}], 'summary': 'Css properties like max height and position were explained in the transcript.', 'duration': 29.601, 'max_score': 8051.966, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw8051966.jpg'}, {'end': 8170.902, 'src': 'embed', 'start': 8140.057, 'weight': 6, 'content': [{'end': 8142.658, 'text': 'We do have the properties of top, bottom, left, right.', 'start': 8140.057, 'duration': 2.601}, {'end': 8148.72, 'text': 'To push this element down relative to where it normally is, I can set top to some value.', 'start': 8143.158, 'duration': 5.562}, {'end': 8150.541, 'text': 'We can do that in pixels.', 'start': 8149.58, 'duration': 0.961}, {'end': 8161.532, 'text': 'If I set top to be 100 pixels, this element will be pushed downwards by 100 pixels relative to where it normally is, in the top left corner.', 'start': 8151.182, 'duration': 10.35}, {'end': 8163.575, 'text': 'Another property is left.', 'start': 8162.053, 'duration': 1.522}, {'end': 8170.902, 'text': 'I will push this element to the right by 100 pixels by setting left to be 100.', 'start': 8164.355, 'duration': 6.547}], 'summary': 'Using top and left properties, elements can be positioned in pixels relative to their normal position.', 'duration': 30.845, 'max_score': 8140.057, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw8140057.jpg'}, {'end': 8949.503, 'src': 'embed', 'start': 8919.781, 'weight': 7, 'content': [{'end': 8921.322, 'text': 'Four is selected, but not five.', 'start': 8919.781, 'duration': 1.541}, {'end': 8927.292, 'text': 'The adjacent sibling is the next direct sibling, but not all siblings.', 'start': 8922.27, 'duration': 5.022}, {'end': 8930.614, 'text': "That's why 4 is selected and not 5.", 'start': 8928.313, 'duration': 2.301}, {'end': 8935.816, 'text': 'But if I change their positions around, 5 is now selected.', 'start': 8930.614, 'duration': 5.202}, {'end': 8939.458, 'text': 'Alright everybody, so those are combinators.', 'start': 8935.836, 'duration': 3.622}, {'end': 8942.7, 'text': 'They explain the relationship between listed selectors.', 'start': 8940.018, 'duration': 2.682}, {'end': 8947.262, 'text': 'You have descendant, child, general sibling, and adjacent sibling.', 'start': 8943.32, 'duration': 3.942}, {'end': 8949.503, 'text': 'And those are combinators in CSS.', 'start': 8947.602, 'duration': 1.901}], 'summary': 'Combinators in css explain relationships between selectors, including descendant, child, general sibling, and adjacent sibling.', 'duration': 29.722, 'max_score': 8919.781, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw8919781.jpg'}, {'end': 9265.54, 'src': 'embed', 'start': 9202.221, 'weight': 8, 'content': [{'end': 9203.562, 'text': 'Not kind of does the opposite.', 'start': 9202.221, 'duration': 1.341}, {'end': 9208.266, 'text': "Anything that is not in this state, anything that's not being hovered over.", 'start': 9204.183, 'duration': 4.083}, {'end': 9211.809, 'text': "Let's set the color to be like a gray color.", 'start': 9209.127, 'duration': 2.682}, {'end': 9215.779, 'text': "Anything that's not currently being hovered over is gray.", 'start': 9212.978, 'duration': 2.801}, {'end': 9218.519, 'text': "But when it is hovered over, it's yellow.", 'start': 9216.399, 'duration': 2.12}, {'end': 9221.78, 'text': 'So that is the not pseudoclass.', 'start': 9219.98, 'duration': 1.8}, {'end': 9226.921, 'text': 'Anything that is not in this state will have these CSS properties.', 'start': 9222.32, 'duration': 4.601}, {'end': 9230.082, 'text': 'Then we have the nth child pseudoclass.', 'start': 9228.161, 'duration': 1.921}, {'end': 9236.783, 'text': 'List item colon nth child parentheses.', 'start': 9231.482, 'duration': 5.301}, {'end': 9240.664, 'text': "Anything that's selected, let's set to be yellow.", 'start': 9238.043, 'duration': 2.621}, {'end': 9251.315, 'text': 'Depending on what value you put within the parentheses, that element will be selected.', 'start': 9247.213, 'duration': 4.102}, {'end': 9253.716, 'text': '1 corresponds to the first element.', 'start': 9251.335, 'duration': 2.381}, {'end': 9255.857, 'text': '2 is for the second.', 'start': 9253.736, 'duration': 2.121}, {'end': 9257.557, 'text': '3 is for the third.', 'start': 9255.877, 'duration': 1.68}, {'end': 9260.378, 'text': '9 is for the ninth element.', 'start': 9257.577, 'duration': 2.801}, {'end': 9262.979, 'text': 'For all odd number elements, type odd.', 'start': 9260.779, 'duration': 2.2}, {'end': 9265.54, 'text': 'For all even elements, type even.', 'start': 9263.62, 'duration': 1.92}], 'summary': 'Css not pseudoclass sets gray color, nth child sets yellow for selected elements with specific positions.', 'duration': 63.319, 'max_score': 9202.221, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw9202221.jpg'}], 'start': 7006.136, 'title': 'Css properties and selectors', 'summary': 'Covers css float, overflow, display, width, height, and position properties, along with combinators and pseudo classes, demonstrating their applications and behaviors with examples and covering five possible values for the position property.', 'chapters': [{'end': 7420.266, 'start': 7006.136, 'title': 'Css float and overflow property', 'summary': 'Demonstrates the float property in css, showcasing how it wraps text around images and the overflow property, explaining its defined behaviors when content overflows, with examples and states including visible, hidden, clip, scroll, and auto.', 'duration': 414.13, 'highlights': ['The float property in CSS allows text to wrap around images, demonstrated by floating images left and right, with the text flowing around them as the window size is adjusted. The chapter explains how the float property in CSS allows text to wrap around images, demonstrated by floating images left and right, with the text flowing around them as the window size is adjusted.', 'The overflow property in CSS sets the defined behavior when content overflows, featuring five states including visible, hidden, clip, scroll, and auto, with detailed examples and explanations for each state. The chapter explains the overflow property in CSS, showcasing its defined behaviors when content overflows, featuring five states including visible, hidden, clip, scroll, and auto, with detailed examples and explanations for each state.', 'The chapter also covers the display property in HTML and CSS, highlighting the default display value of HTML elements. The chapter also covers the display property in HTML and CSS, highlighting the default display value of HTML elements.']}, {'end': 7661.404, 'start': 7420.466, 'title': 'Introduction to display property', 'summary': 'Introduces the display property in css, explaining the differences between block level and inline elements, their behavior, and the impact of using the display property, with examples of how it affects the width, height, and visibility of elements.', 'duration': 240.938, 'highlights': ['Block level elements take up the entire width, while inline elements only take up necessary space. Block level elements, such as header, div, and paragraph elements, take up the entire width available, while inline elements, like span, anchor, and image elements, only take up the necessary space needed to display the element.', 'Impact of the display property on element behavior and appearance. The display property can specify if an element is displayed as block level, inline, inline block, or not displayed at all, affecting the width, height, and visibility of the elements.', 'Demonstrating the effect of setting background colors and adjusting width and height for block and inline elements. The example of setting background colors for div and span elements showcases the difference in behavior, where the div element, being block level, takes up the entire width, while the span element, being inline, only takes up necessary space. Additionally, the impact of applying width and height to block level and inline elements is demonstrated.']}, {'end': 8073.887, 'start': 7664.133, 'title': 'Introduction to css width and height properties', 'summary': 'Introduces the concepts of width and height properties in css, explaining how to set explicit height and width for elements, use box-sizing property to calculate dimensions, and manipulate height and width using min/max properties and container elements.', 'duration': 409.754, 'highlights': ['The chapter explains setting explicit height and width for elements, showcasing examples of setting fixed height and width in pixels, and demonstrating the effect of auto, percentage, and viewport height values. (e.g. setting explicit height and width for elements, such as 100 pixels, auto, 50%, and 100 VH)', 'The concept of box-sizing property is introduced, emphasizing its role in disregarding padding and borders when calculating height or width, and demonstrating its usage to fit elements next to each other. (e.g. explaining the box-sizing property and demonstrating its usage to fit elements next to each other)', 'The chapter discusses the use of min/max height and width properties, showing how to manipulate the size of elements using percentage values and the impact of containing elements on height properties. (e.g. demonstrating the use of min/max height and width properties and the effect of containing elements on height properties)']}, {'end': 8644.256, 'start': 8077.145, 'title': 'Css position property explained', 'summary': 'Explains the position property in css, covering five possible values: relative, fixed, absolute, sticky, and static, with detailed demonstrations and examples for each type.', 'duration': 567.111, 'highlights': ['relative With a position set to relative, elements can be moved to the right, left, upwards, or downwards using properties like top, bottom, left, and right, providing flexibility in positioning elements.', 'fixed Fixed positioning allows elements to be positioned relative to the viewport, demonstrating how elements can be fixed in different corners of the viewport using properties like top, bottom, left, and right.', 'absolute Absolute positioning demonstrates how elements can be positioned relative to their nearest ancestor, such as a containing class, and maintains its position within the container even when the container is moved.', 'sticky Sticky positioning is shown to be based on the current scroll position, similar to fixed positioning but with the element staying in place until scrolled past.', 'static Explained that static is the default position for an element, providing an overview of the five position types and hinting at further practice in the future.']}, {'end': 9293.779, 'start': 8647.259, 'title': 'Css combinators & pseudo classes', 'summary': 'Explains css combinators including descendants, children, general siblings, and adjacent siblings, with illustrative examples and pseudo classes such as hover, active, visited, not, and nth child, demonstrating their applications and selection criteria.', 'duration': 646.52, 'highlights': ['CSS combinators - Descendants, Children, General Siblings, and Adjacent Siblings Explains the different types of CSS combinators: descendants, children, general siblings, and adjacent siblings.', 'Illustrative examples of CSS combinators and their applications Demonstrates the application of CSS combinators through examples, clarifying their functionality.', 'Explanation of pseudo classes - hover, active, visited, not, and nth child Clarifies the functionality of pseudo classes like hover, active, visited, not, and nth child, and how they modify the behavior of elements.', 'Selection criteria for nth child pseudo class Describes the selection criteria for the nth child pseudo class, including examples of odd, even, and custom selection patterns.']}], 'duration': 2287.643, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw7006136.jpg', 'highlights': ['The float property in CSS allows text to wrap around images, demonstrated by floating images left and right, with the text flowing around them as the window size is adjusted.', 'The overflow property in CSS sets the defined behavior when content overflows, featuring five states including visible, hidden, clip, scroll, and auto, with detailed examples and explanations for each state.', 'Block level elements take up the entire width, while inline elements only take up necessary space.', 'The display property can specify if an element is displayed as block level, inline, inline block, or not displayed at all, affecting the width, height, and visibility of the elements.', 'The chapter explains setting explicit height and width for elements, showcasing examples of setting fixed height and width in pixels, and demonstrating the effect of auto, percentage, and viewport height values.', 'The concept of box-sizing property is introduced, emphasizing its role in disregarding padding and borders when calculating height or width, and demonstrating its usage to fit elements next to each other.', 'relative With a position set to relative, elements can be moved to the right, left, upwards, or downwards using properties like top, bottom, left, and right, providing flexibility in positioning elements.', 'CSS combinators - Descendants, Children, General Siblings, and Adjacent Siblings Explains the different types of CSS combinators: descendants, children, general siblings, and adjacent siblings.', 'Explanation of pseudo classes - hover, active, visited, not, and nth child Clarifies the functionality of pseudo classes like hover, active, visited, not, and nth child, and how they modify the behavior of elements.', 'Selection criteria for nth child pseudo class Describes the selection criteria for the nth child pseudo class, including examples of odd, even, and custom selection patterns.']}, {'end': 10286.946, 'segs': [{'end': 9440.913, 'src': 'embed', 'start': 9371.134, 'weight': 1, 'content': [{'end': 9380.556, 'text': 'Then when we hover over it, I want the P element of this div section to have the display property of block.', 'start': 9371.134, 'duration': 9.422}, {'end': 9382.757, 'text': 'Display it as a block level element.', 'start': 9381.156, 'duration': 1.601}, {'end': 9388.658, 'text': 'When we hover over this element, it displays the P element within our div section.', 'start': 9384.037, 'duration': 4.621}, {'end': 9392.583, 'text': 'This will come really handy when we create dropdown menus.', 'start': 9389.761, 'duration': 2.822}, {'end': 9394.445, 'text': 'Those are pseudoclasses.', 'start': 9393.244, 'duration': 1.201}, {'end': 9399.208, 'text': "Elements can have special states, like when they're being hovered over or you click on them.", 'start': 9394.845, 'duration': 4.363}, {'end': 9404.753, 'text': 'Using these pseudoclasses, we can apply CSS properties to those elements when we interact with them.', 'start': 9399.749, 'duration': 5.004}, {'end': 9407.575, 'text': 'And those are pseudoclasses in CSS.', 'start': 9405.173, 'duration': 2.402}, {'end': 9414.533, 'text': "Hey, what's going on everybody? Today I'm going to explain pseudo-elements in CSS.", 'start': 9410.188, 'duration': 4.345}, {'end': 9421.34, 'text': 'Pseudo-elements are keywords added after a selector that are used to style a specific part of an element.', 'start': 9414.913, 'duration': 6.427}, {'end': 9426.887, 'text': 'You have a selector, for example, h1, then two colons, then a pseudo-element.', 'start': 9421.821, 'duration': 5.066}, {'end': 9430.27, 'text': 'One you might see is first-letter.', 'start': 9427.267, 'duration': 3.003}, {'end': 9435.95, 'text': 'We can add some CSS properties and style the first letter of our H1 element.', 'start': 9431.328, 'duration': 4.622}, {'end': 9437.271, 'text': "That's the formula.", 'start': 9436.491, 'duration': 0.78}, {'end': 9439.993, 'text': 'Selector, two colons, pseudo element.', 'start': 9437.571, 'duration': 2.422}, {'end': 9440.913, 'text': "Let's begin.", 'start': 9440.453, 'duration': 0.46}], 'summary': 'Css pseudoclasses and pseudo-elements explained for styling specific parts of elements.', 'duration': 69.779, 'max_score': 9371.134, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw9371134.jpg'}, {'end': 9846.677, 'src': 'embed', 'start': 9817.085, 'weight': 0, 'content': [{'end': 9818.546, 'text': "So that's a good place for it right here.", 'start': 9817.085, 'duration': 1.461}, {'end': 9826.349, 'text': "There's many different ways in which we can create pagination, but using only what we know so far that I've covered in this series, here's one way.", 'start': 9819.426, 'duration': 6.923}, {'end': 9831.592, 'text': "We'll create a div element with a class of pagination.", 'start': 9826.99, 'duration': 4.602}, {'end': 9834.373, 'text': 'Then be sure to close it.', 'start': 9832.833, 'duration': 1.54}, {'end': 9839.416, 'text': "Within this div element, we'll create several hyperlinks.", 'start': 9835.934, 'duration': 3.482}, {'end': 9841.537, 'text': "We'll need an A tag.", 'start': 9840.676, 'duration': 0.861}, {'end': 9846.677, 'text': "I'll set the href attribute just to be empty for now, and then we'll close it.", 'start': 9842.233, 'duration': 4.444}], 'summary': 'Creating pagination with div element and hyperlinks.', 'duration': 29.592, 'max_score': 9817.085, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw9817085.jpg'}], 'start': 9294.079, 'title': 'Css pseudo-elements and html pagination', 'summary': 'Explains the practical application of pseudoclasses and pseudo-elements for creating dropdown menus, styling elements like first letter, first line, and selection, and creating pagination in html and css, with a focus on navigation and functionality.', 'chapters': [{'end': 9440.913, 'start': 9294.079, 'title': 'Css pseudo-elements explained', 'summary': 'Explains how to create hidden elements and use pseudoclasses in css to change the display property and style specific parts of elements, demonstrating the practical application of pseudoclasses and pseudo-elements for creating dropdown menus.', 'duration': 146.834, 'highlights': ['The chapter explains how to create hidden elements and use pseudoclasses in CSS to change the display property and style specific parts of elements.', 'Demonstrates the practical application of pseudoclasses and pseudo-elements for creating dropdown menus.', 'Pseudo-elements are keywords added after a selector that are used to style a specific part of an element.', "Elements can have special states, like when they're being hovered over or you click on them.", 'Using these pseudoclasses, we can apply CSS properties to those elements when we interact with them.']}, {'end': 9737.699, 'start': 9441.974, 'title': 'Css pseudo elements', 'summary': 'Covers the usage of h1 element, paragraph, and list with pseudo elements to style the first letter, first line, selection, before, and after items, including changing font size, color, and adding emojis, with a focus on practical implementation of css pseudo elements.', 'duration': 295.725, 'highlights': ['The chapter covers the usage of H1 element, paragraph, and list with pseudo elements to style the first letter, first line, selection, before, and after items The transcript explains the application of pseudo elements to style different elements such as H1, paragraph, and list items, indicating the breadth of coverage in the chapter.', 'including changing font size, color, and adding emojis The transcript demonstrates various CSS properties such as changing font size, color, and adding emojis, showcasing practical examples of how to modify the appearance of elements using pseudo elements.', 'with a focus on practical implementation of CSS pseudo elements The chapter emphasizes practical implementation by providing step-by-step instructions for using pseudo elements to enhance the visual presentation of web content, highlighting the hands-on approach to learning.']}, {'end': 10286.946, 'start': 9742.222, 'title': 'Css pseudo elements and html pagination', 'summary': 'Discusses the use of css pseudo elements and explains the process of creating pagination in html and css, including the method of implementation, styling, and creating multiple pages, with a focus on navigation and functionality.', 'duration': 544.724, 'highlights': ['Pagination is the method by which a document is separated into pages and numbers are given. Explanation of what pagination is and its purpose.', 'Pagination might also be useful on your webpage if you need to limit the results. Maybe you only want so many results per page. Explaining the utility of pagination for limiting results per page.', "The chapter explains the process of creating pagination in HTML and CSS, including the method of implementation, styling, and creating multiple pages, with a focus on navigation and functionality. Overview of the chapter's main topic, covering the process of creating pagination in depth.", 'The chapter also covers the styling of pagination links, including centering the links, changing the color, eliminating text decoration, adding padding, and displaying elements as inline blocks. Detailed explanation of the styling process for pagination links, covering specific CSS properties and styling techniques.', 'Exploration of creating multiple pages, setting active classes, and navigating between pages, along with the process of copying and renaming index files to create new pages. Detailed explanation of the process of creating multiple pages, setting active classes, and navigating between them, including the steps for copying and renaming index files.']}], 'duration': 992.867, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw9294079.jpg', 'highlights': ['The chapter explains the process of creating pagination in HTML and CSS, including the method of implementation, styling, and creating multiple pages, with a focus on navigation and functionality.', 'The chapter covers the usage of H1 element, paragraph, and list with pseudo elements to style the first letter, first line, selection, before, and after items The transcript explains the application of pseudo elements to style different elements such as H1, paragraph, and list items, indicating the breadth of coverage in the chapter.', 'Demonstrates the practical application of pseudoclasses and pseudo-elements for creating dropdown menus.', 'Using these pseudoclasses, we can apply CSS properties to those elements when we interact with them.', 'Pseudo-elements are keywords added after a selector that are used to style a specific part of an element.']}, {'end': 11206.013, 'segs': [{'end': 10348.574, 'src': 'embed', 'start': 10288.246, 'weight': 0, 'content': [{'end': 10289.966, 'text': '2, 3, 4, 5, 4, 3, 2, 1.', 'start': 10288.246, 'duration': 1.72}, {'end': 10295.41, 'text': "Alright everybody, so that's pagination.", 'start': 10289.967, 'duration': 5.443}, {'end': 10298.792, 'text': "It's a method by which a document is separated into pages.", 'start': 10295.73, 'duration': 3.062}, {'end': 10301.434, 'text': 'And that is simple pagination in CSS.', 'start': 10299.232, 'duration': 2.202}, {'end': 10309.626, 'text': "Hey, what's going on everybody? Today we'll create a dropdown menu only using HTML and CSS.", 'start': 10304.463, 'duration': 5.163}, {'end': 10311.186, 'text': "So let's get started.", 'start': 10309.906, 'duration': 1.28}, {'end': 10313.908, 'text': "The first thing we'll create is a div section.", 'start': 10311.767, 'duration': 2.141}, {'end': 10318.81, 'text': 'I will give this div section a class of dropdown.', 'start': 10313.928, 'duration': 4.882}, {'end': 10323.733, 'text': "Then within this div section, I'll create a button.", 'start': 10321.031, 'duration': 2.702}, {'end': 10330.116, 'text': "What kind of dropdown menu should we create? Let's create a dropdown menu for food.", 'start': 10325.654, 'duration': 4.462}, {'end': 10336.166, 'text': "Then we'll need a div section to hold all of the different content within our drop down menu.", 'start': 10331.843, 'duration': 4.323}, {'end': 10341.609, 'text': 'I will give this inner div section a class of content.', 'start': 10337.086, 'duration': 4.523}, {'end': 10348.574, 'text': "Within my content class, I'll create a few hyperlinks.", 'start': 10344.851, 'duration': 3.723}], 'summary': 'Pagination and dropdown menu creation in html and css.', 'duration': 60.328, 'max_score': 10288.246, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw10288246.jpg'}, {'end': 10442.237, 'src': 'embed', 'start': 10414.056, 'weight': 2, 'content': [{'end': 10416.378, 'text': "I'll add a little bit of padding around the text.", 'start': 10414.056, 'duration': 2.322}, {'end': 10421.381, 'text': 'Padding 10 pixels by 15 pixels is good.', 'start': 10417.799, 'duration': 3.582}, {'end': 10426.225, 'text': "I'll remove the border by setting the border property to be none.", 'start': 10422.983, 'duration': 3.242}, {'end': 10431.329, 'text': "Then I'll change our cursor to be a pointer when we hover over the button.", 'start': 10428.086, 'duration': 3.243}, {'end': 10433.51, 'text': 'Cursor, pointer.', 'start': 10432.109, 'duration': 1.401}, {'end': 10438.394, 'text': 'Now when I hover over the button, my cursor changes to a pointer.', 'start': 10434.471, 'duration': 3.923}, {'end': 10442.237, 'text': "The next elements that we'll change are the A elements.", 'start': 10439.515, 'duration': 2.722}], 'summary': 'Adding padding of 10px by 15px, removing border, and changing cursor to pointer on button hover.', 'duration': 28.181, 'max_score': 10414.056, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw10414056.jpg'}, {'end': 10548.181, 'src': 'embed', 'start': 10512.825, 'weight': 4, 'content': [{'end': 10516.667, 'text': 'I will set the position property to be absolute.', 'start': 10512.825, 'duration': 3.842}, {'end': 10520.97, 'text': "Then I'll set a minimum width for the content.", 'start': 10518.428, 'duration': 2.542}, {'end': 10526.232, 'text': "I'll stick with 100 pixels.", 'start': 10524.871, 'duration': 1.361}, {'end': 10529.454, 'text': 'But feel free to adjust this value.', 'start': 10527.893, 'duration': 1.561}, {'end': 10531.807, 'text': "Then I'll add a box shadow.", 'start': 10530.646, 'duration': 1.161}, {'end': 10534.629, 'text': 'Box shadow.', 'start': 10533.548, 'duration': 1.081}, {'end': 10538.292, 'text': 'The first value is for the horizontal positioning.', 'start': 10535.53, 'duration': 2.762}, {'end': 10542.256, 'text': 'The second number is for the vertical positioning.', 'start': 10539.534, 'duration': 2.722}, {'end': 10545.879, 'text': 'The third value is for the level of blur.', 'start': 10543.237, 'duration': 2.642}, {'end': 10548.181, 'text': 'Then select a color.', 'start': 10545.899, 'duration': 2.282}], 'summary': 'Set position to absolute, minimum content width of 100 pixels, add box shadow with horizontal and vertical positioning, blur level, and color selection.', 'duration': 35.356, 'max_score': 10512.825, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw10512825.jpg'}, {'end': 10744.427, 'src': 'embed', 'start': 10717.826, 'weight': 5, 'content': [{'end': 10722.089, 'text': "Then I'm going to use a nav element, also known as a navigation element.", 'start': 10717.826, 'duration': 4.263}, {'end': 10728.087, 'text': 'Navigation elements are typically used for a set of navigation links.', 'start': 10724.403, 'duration': 3.684}, {'end': 10732.212, 'text': 'I will give this nav element a class of navbar.', 'start': 10728.728, 'duration': 3.484}, {'end': 10736.277, 'text': "Then within this navigation element, I'll create an unordered list.", 'start': 10733.053, 'duration': 3.224}, {'end': 10744.427, 'text': 'My unordered list will contain one list item for each category in my navigation bar.', 'start': 10739.321, 'duration': 5.106}], 'summary': 'Creating a nav element with a class of navbar and an unordered list for navigation links.', 'duration': 26.601, 'max_score': 10717.826, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw10717826.jpg'}, {'end': 11067.983, 'src': 'heatmap', 'start': 10924.926, 'weight': 1, 'content': [{'end': 10928.807, 'text': "I'll turn down the lightness slightly to 10% lightness.", 'start': 10924.926, 'duration': 3.881}, {'end': 10930.447, 'text': 'There we are.', 'start': 10930.027, 'duration': 0.42}, {'end': 10934.988, 'text': "If you would like a horizontal navigation bar, here's a change we can make.", 'start': 10931.487, 'duration': 3.501}, {'end': 10943.35, 'text': 'With our navigation bar class, take any list items, then we will float left.', 'start': 10936.289, 'duration': 7.061}, {'end': 10951.532, 'text': "One change we'll make within our unordered list, set the overflow property to be hidden.", 'start': 10945.211, 'duration': 6.321}, {'end': 10955.264, 'text': "All right, that's pretty good so far.", 'start': 10953.763, 'duration': 1.501}, {'end': 10959.865, 'text': 'There is a little bit of margin around the body of my document.', 'start': 10956.764, 'duration': 3.101}, {'end': 10962.366, 'text': 'I am going to set margin to be zero.', 'start': 10960.245, 'duration': 2.121}, {'end': 10967.528, 'text': 'With our body element, set any margin to be zero pixels.', 'start': 10963.207, 'duration': 4.321}, {'end': 10979.533, 'text': "If you would like margin around the main content of your page, we will take our main element, then set margin to be, let's stick with 20 pixels.", 'start': 10968.789, 'duration': 10.744}, {'end': 10985.132, 'text': 'You also could put margin just on the left side and the right side.', 'start': 10982.11, 'duration': 3.022}, {'end': 10993.319, 'text': "You know what? I'm going to set margin left to be 20 and margin right to be 20.", 'start': 10985.753, 'duration': 7.566}, {'end': 10996.662, 'text': "All right, then lastly, let's fill in these href attributes.", 'start': 10993.319, 'duration': 3.343}, {'end': 11011.134, 'text': 'For the href attributes, I will set my home link to be index.html, about will be about.html, products.html, and contact.html.', 'start': 10997.242, 'duration': 13.892}, {'end': 11014.707, 'text': "We're going to go to our website folder.", 'start': 11013.086, 'duration': 1.621}, {'end': 11017.228, 'text': "We'll create a few copies of our index file.", 'start': 11015.287, 'duration': 1.941}, {'end': 11019.228, 'text': 'We need three more files.', 'start': 11017.748, 'duration': 1.48}, {'end': 11022.469, 'text': 'One, two, three.', 'start': 11021.129, 'duration': 1.34}, {'end': 11026.991, 'text': "Let's rename one of these as about.html.", 'start': 11023.87, 'duration': 3.121}, {'end': 11032.333, 'text': 'Then products.html.', 'start': 11030.672, 'duration': 1.661}, {'end': 11037.735, 'text': 'Then contact.html.', 'start': 11035.274, 'duration': 2.461}, {'end': 11043.226, 'text': "So let's open about.", 'start': 11042.165, 'duration': 1.061}, {'end': 11050.269, 'text': "I'll change the header element of our main element to be, this is the about page.", 'start': 11044.306, 'duration': 5.963}, {'end': 11053.13, 'text': "Let's apply that for products.", 'start': 11051.769, 'duration': 1.361}, {'end': 11055.551, 'text': 'This is the products page.', 'start': 11053.51, 'duration': 2.041}, {'end': 11058.953, 'text': 'Then contact.', 'start': 11058.192, 'duration': 0.761}, {'end': 11062.014, 'text': 'This is the contact page.', 'start': 11060.013, 'duration': 2.001}, {'end': 11064.535, 'text': 'All right, and that should be everything.', 'start': 11063.095, 'duration': 1.44}, {'end': 11065.556, 'text': "Let's see if this works.", 'start': 11064.716, 'duration': 0.84}, {'end': 11067.983, 'text': "We're currently on the Home page.", 'start': 11066.803, 'duration': 1.18}], 'summary': 'Adjusting styling and creating navigation bar with specific changes, and creating and updating files for website pages.', 'duration': 143.057, 'max_score': 10924.926, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw10924926.jpg'}, {'end': 11120.83, 'src': 'embed', 'start': 11097.147, 'weight': 1, 'content': [{'end': 11105.577, 'text': 'Semantic tags, they include but are not limited to headers, nav elements, main, section, aside, articles, and footers.', 'start': 11097.147, 'duration': 8.43}, {'end': 11109.721, 'text': "You'll want to use semantic tags because they keep your content organized,", 'start': 11106.038, 'duration': 3.683}, {'end': 11116.526, 'text': "they're better for search engine optimization and they assist with screen readers and other technology for accessibility.", 'start': 11109.721, 'duration': 6.805}, {'end': 11120.83, 'text': "So I've already written some HTML markup, I just want to describe this first.", 'start': 11116.907, 'duration': 3.923}], 'summary': 'Semantic tags like headers, nav, main, etc. help with organization, seo, and accessibility.', 'duration': 23.683, 'max_score': 11097.147, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw11097147.jpg'}, {'end': 11166.938, 'src': 'embed', 'start': 11142.144, 'weight': 3, 'content': [{'end': 11149.548, 'text': 'it can contain one of many sub-elements, such as sections aside elements, articles and generic div elements.', 'start': 11142.144, 'duration': 7.404}, {'end': 11152.91, 'text': "So sections, which is what I've created here in the middle.", 'start': 11150.208, 'duration': 2.702}, {'end': 11154.991, 'text': 'This is for dependent content.', 'start': 11153.15, 'duration': 1.841}, {'end': 11157.773, 'text': 'You would typically put anything you want within a section.', 'start': 11155.311, 'duration': 2.462}, {'end': 11160.494, 'text': "It's typically used for dependent content.", 'start': 11158.253, 'duration': 2.241}, {'end': 11166.938, 'text': 'If I were to take this section out of the web page, then put it on another web page, it might not necessarily make sense.', 'start': 11160.774, 'duration': 6.164}], 'summary': 'Sections in web pages can contain various sub-elements and are typically used for dependent content.', 'duration': 24.794, 'max_score': 11142.144, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw11142144.jpg'}], 'start': 10288.246, 'title': 'Creating dropdown menu and navigation bar in html and css', 'summary': 'Covers creating a simple dropdown menu with pagination, div sections, buttons, and hyperlinks, styling css for dropdown menu, and creating a navigation bar using semantic tags and links, resulting in a basic website layout.', 'chapters': [{'end': 10379.63, 'start': 10288.246, 'title': 'Creating dropdown menu in html and css', 'summary': 'Covers the creation of a simple dropdown menu in html and css, including the method of pagination, and the creation of div sections, buttons, and hyperlinks.', 'duration': 91.384, 'highlights': ['Creating a simple dropdown menu using HTML and CSS, including the method of pagination', 'Explanation of pagination as a method of separating a document into pages', 'Creation of a div section with a class of dropdown and a button within it', 'Creation of a div section with a class of content to hold different content within the dropdown menu', 'Creation of hyperlinks within the content class for the dropdown menu']}, {'end': 10690.558, 'start': 10380.49, 'title': 'Styling css for dropdown menu', 'summary': 'Covers styling the css for a dropdown menu, including changing button and content properties, setting hover effects, and resolving a content display issue.', 'duration': 310.068, 'highlights': ['Changing button properties like background color, font color, padding, and cursor to pointer for hover effects.', 'Setting content properties including background color, position, width, box shadow, and display property for hover effects.', 'Resolving a content display issue by setting the position of the content to be absolute and adjusting the display property for hover effects.']}, {'end': 11206.013, 'start': 10690.578, 'title': 'Creating html css navigation bar', 'summary': 'Demonstrates the creation of a navigation bar using html and css, including the use of semantic tags, and the addition of links and styles, resulting in a basic website layout.', 'duration': 515.435, 'highlights': ['Semantic tags are used for organizing content, improving SEO, and accessibility, including headers, nav elements, main, section, aside, articles, and footers. The use of semantic tags, such as headers, nav elements, main, section, aside, articles, and footers, helps in organizing content, improving SEO, and enhancing accessibility.', 'The creation of a navigation bar involves using a nav element, unordered list, and hyperlinks for categories like home, about, products, and contact, with styling using CSS properties like color, padding, and text alignment. The process of creating a navigation bar includes using a nav element, unordered list, and hyperlinks for categories like home, about, products, and contact, with styling using CSS properties like color, padding, and text alignment.', 'The main content of the webpage utilizes semantic sub-elements like sections, aside, and articles for organizing dependent and independent content. The main content of the webpage includes semantic sub-elements like sections, aside, and articles for organizing dependent and independent content.']}], 'duration': 917.767, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw10288246.jpg', 'highlights': ['Creation of a simple dropdown menu using HTML and CSS, including the method of pagination', 'Semantic tags are used for organizing content, improving SEO, and accessibility, including headers, nav elements, main, section, aside, articles, and footers', 'Changing button properties like background color, font color, padding, and cursor to pointer for hover effects', 'The main content of the webpage utilizes semantic sub-elements like sections, aside, and articles for organizing dependent and independent content', 'Setting content properties including background color, position, width, box shadow, and display property for hover effects', 'The creation of a navigation bar involves using a nav element, unordered list, and hyperlinks for categories like home, about, products, and contact, with styling using CSS properties like color, padding, and text alignment', 'Explanation of pagination as a method of separating a document into pages', 'Creation of a div section with a class of dropdown and a button within it', 'Creation of a div section with a class of content to hold different content within the dropdown menu', 'Creation of hyperlinks within the content class for the dropdown menu']}, {'end': 12044.667, 'segs': [{'end': 11261.157, 'src': 'embed', 'start': 11227.479, 'weight': 5, 'content': [{'end': 11229.819, 'text': "Now that we know the basics, let's actually design this.", 'start': 11227.479, 'duration': 2.34}, {'end': 11232.92, 'text': 'Alright, so we will create our semantic elements.', 'start': 11230.62, 'duration': 2.3}, {'end': 11241.484, 'text': 'We have a header, a nav element, a main element, and a footer element.', 'start': 11233, 'duration': 8.484}, {'end': 11250.009, 'text': "Within our header element, let's just add an h2 element that says header.", 'start': 11244.286, 'duration': 5.723}, {'end': 11253.592, 'text': "So let's go to our style sheet.", 'start': 11252.111, 'duration': 1.481}, {'end': 11255.733, 'text': "I'll take our header element.", 'start': 11254.212, 'duration': 1.521}, {'end': 11259.016, 'text': "Let's change the background color.", 'start': 11256.914, 'duration': 2.102}, {'end': 11261.157, 'text': 'Background dash color.', 'start': 11259.896, 'duration': 1.261}], 'summary': 'Designing web layout with semantic elements: header, nav, main, footer.', 'duration': 33.678, 'max_score': 11227.479, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw11227479.jpg'}, {'end': 11606.011, 'src': 'embed', 'start': 11569.679, 'weight': 0, 'content': [{'end': 11574.181, 'text': 'With a mobile device, you would want each of these elements to be on top of each other, so you can scroll down.', 'start': 11569.679, 'duration': 4.502}, {'end': 11576.702, 'text': 'We can add an at rule.', 'start': 11575.121, 'duration': 1.581}, {'end': 11589.188, 'text': 'So at media screen and max width 600 pixels.', 'start': 11578.523, 'duration': 10.665}, {'end': 11598.749, 'text': "So what we're doing here is that if the width of our screen or window is 600 pixels or below,", 'start': 11590.588, 'duration': 8.161}, {'end': 11604.19, 'text': 'we can change some CSS properties with aside section and article.', 'start': 11598.749, 'duration': 5.441}, {'end': 11606.011, 'text': "Let's select those.", 'start': 11605.191, 'duration': 0.82}], 'summary': 'Using at media rule for mobile devices with max width 600 pixels to adjust css properties for scrolling down.', 'duration': 36.332, 'max_score': 11569.679, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw11569679.jpg'}, {'end': 11661.45, 'src': 'heatmap', 'start': 11497.566, 'weight': 1, 'content': [{'end': 11507.414, 'text': "So one change we're going to make is that at the top of our CSS style sheet, we can select all elements with an asterisk, then a set of curly braces.", 'start': 11497.566, 'duration': 9.848}, {'end': 11515.841, 'text': 'We will set the box sizing property to border dash box.', 'start': 11508.475, 'duration': 7.366}, {'end': 11523.987, 'text': "What we're doing with this property is that when we calculate the width, factor in the padding, all three elements should be lined up now.", 'start': 11517.382, 'duration': 6.605}, {'end': 11526.81, 'text': 'All right, then lastly, we have our footer.', 'start': 11525.008, 'duration': 1.802}, {'end': 11533.32, 'text': "So within our footer element, I'll just add an element that says footer.", 'start': 11529.096, 'duration': 4.224}, {'end': 11535.582, 'text': 'Then I will style it.', 'start': 11534.581, 'duration': 1.001}, {'end': 11538.785, 'text': "Let's copy what we have for our header.", 'start': 11537.043, 'duration': 1.742}, {'end': 11542.629, 'text': 'Paste it, change header to be footer.', 'start': 11540.326, 'duration': 2.303}, {'end': 11546.672, 'text': 'Now what we need to do is clear our float.', 'start': 11544.27, 'duration': 2.402}, {'end': 11549.675, 'text': "Because we're still floating the elements that come after.", 'start': 11547.413, 'duration': 2.262}, {'end': 11554.339, 'text': "Let's display our footer as a block level element.", 'start': 11550.836, 'duration': 3.503}, {'end': 11558.854, 'text': 'To clear a float, you can set clear, then both.', 'start': 11555.472, 'duration': 3.382}, {'end': 11561.015, 'text': 'And that should clear that.', 'start': 11560.054, 'duration': 0.961}, {'end': 11565.577, 'text': 'Alright, so here is a basic website layout for a desktop.', 'start': 11562.275, 'duration': 3.302}, {'end': 11569.258, 'text': "This isn't a good format for a mobile device, though.", 'start': 11566.857, 'duration': 2.401}, {'end': 11574.181, 'text': 'With a mobile device, you would want each of these elements to be on top of each other, so you can scroll down.', 'start': 11569.679, 'duration': 4.502}, {'end': 11576.702, 'text': 'We can add an at rule.', 'start': 11575.121, 'duration': 1.581}, {'end': 11589.188, 'text': 'So at media screen and max width 600 pixels.', 'start': 11578.523, 'duration': 10.665}, {'end': 11598.749, 'text': "So what we're doing here is that if the width of our screen or window is 600 pixels or below,", 'start': 11590.588, 'duration': 8.161}, {'end': 11604.19, 'text': 'we can change some CSS properties with aside section and article.', 'start': 11598.749, 'duration': 5.441}, {'end': 11606.011, 'text': "Let's select those.", 'start': 11605.191, 'duration': 0.82}, {'end': 11611.672, 'text': 'Aside, comma, section, comma, article.', 'start': 11606.651, 'duration': 5.021}, {'end': 11617.8, 'text': "We'll just change the width to be 100%.", 'start': 11612.731, 'duration': 5.069}, {'end': 11627.701, 'text': "If a user is on a mobile device and or the width is 600 pixels or below, Then we'll switch to a mobile version of the webpage.", 'start': 11617.8, 'duration': 9.901}, {'end': 11634.663, 'text': 'Each of these elements, our aside, section, and article elements, are taking up 100% of the width available.', 'start': 11628.501, 'duration': 6.162}, {'end': 11640.345, 'text': "Then if we were to expand this webpage, or we're viewing on a desktop, we switch to the desktop version.", 'start': 11635.224, 'duration': 5.121}, {'end': 11643.186, 'text': 'This is also known as responsive CSS.', 'start': 11640.865, 'duration': 2.321}, {'end': 11650.649, 'text': 'Alright everybody, I know I covered a lot today, but that is a basic website layout using HTML and CSS.', 'start': 11644.347, 'duration': 6.302}, {'end': 11659.99, 'text': "Hey, what's going on everybody? Today we're going to create an interactive image gallery using HTML and CSS.", 'start': 11654.028, 'duration': 5.962}, {'end': 11661.45, 'text': "So, let's get started.", 'start': 11660.33, 'duration': 1.12}], 'summary': 'Css layout adjusted for mobile devices using media queries.', 'duration': 26.226, 'max_score': 11497.566, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw11497566.jpg'}, {'end': 11834.564, 'src': 'embed', 'start': 11793.939, 'weight': 3, 'content': [{'end': 11794.799, 'text': 'Paste it twice.', 'start': 11793.939, 'duration': 0.86}, {'end': 11799.14, 'text': "Then we just need to change the images we're using.", 'start': 11797.139, 'duration': 2.001}, {'end': 11801.241, 'text': 'My second image is soup.', 'start': 11799.68, 'duration': 1.561}, {'end': 11807.242, 'text': "I'll change the alternative text as well.", 'start': 11805.082, 'duration': 2.16}, {'end': 11809.863, 'text': 'And the description.', 'start': 11809.163, 'duration': 0.7}, {'end': 11814.181, 'text': 'soups Then my last image is pizza.', 'start': 11810.74, 'duration': 3.441}, {'end': 11822.682, 'text': 'The description will be pizzas.', 'start': 11821.062, 'duration': 1.62}, {'end': 11826.043, 'text': "All right, let's go to our style sheet.", 'start': 11824.462, 'duration': 1.581}, {'end': 11829.683, 'text': 'We are selecting our gallery class.', 'start': 11827.323, 'duration': 2.36}, {'end': 11834.564, 'text': 'I will set the display property to be an inline block.', 'start': 11830.923, 'duration': 3.641}], 'summary': 'Changing images and descriptions for soup and pizza, setting display property for gallery class.', 'duration': 40.625, 'max_score': 11793.939, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw11793939.jpg'}, {'end': 11951.514, 'src': 'embed', 'start': 11909.072, 'weight': 2, 'content': [{'end': 11911.074, 'text': "We'll apply the hover pseudo class.", 'start': 11909.072, 'duration': 2.002}, {'end': 11914.036, 'text': 'Then change the border and make it a little bit darker.', 'start': 11911.654, 'duration': 2.382}, {'end': 11920.921, 'text': "I'll set the lightness to be like 20.", 'start': 11916.558, 'duration': 4.363}, {'end': 11921.341, 'text': 'There we are.', 'start': 11920.921, 'duration': 0.42}, {'end': 11925.284, 'text': 'Now the border changes when we hover over one of these elements.', 'start': 11922.862, 'duration': 2.422}, {'end': 11929.487, 'text': "I'm going to delete these width attributes.", 'start': 11927.145, 'duration': 2.342}, {'end': 11937.566, 'text': 'Then go to our style sheet.', 'start': 11936.345, 'duration': 1.221}, {'end': 11939.847, 'text': "We'll access our gallery class.", 'start': 11938.126, 'duration': 1.721}, {'end': 11949.093, 'text': 'With any images, set the width to be 100%.', 'start': 11940.828, 'duration': 8.265}, {'end': 11951.514, 'text': 'And height will be auto.', 'start': 11949.093, 'duration': 2.421}], 'summary': 'Applying hover pseudo class, changing border, and adjusting width and height of images.', 'duration': 42.442, 'max_score': 11909.072, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw11909072.jpg'}, {'end': 12004.324, 'src': 'embed', 'start': 11974.949, 'weight': 4, 'content': [{'end': 11978.891, 'text': 'If we click on one of these images, we should see the full image in a new tab.', 'start': 11974.949, 'duration': 3.942}, {'end': 11981.232, 'text': "That's the salad image, soup.", 'start': 11979.211, 'duration': 2.021}, {'end': 11982.922, 'text': 'and pizza.', 'start': 11982.299, 'duration': 0.623}, {'end': 11984.286, 'text': 'all right, everybody.', 'start': 11982.922, 'duration': 1.364}, {'end': 11988.601, 'text': 'so that is a simple image gallery using html and css.', 'start': 11984.286, 'duration': 4.315}, {'end': 11992.113, 'text': "Hey, what's going on everybody?", 'start': 11991.072, 'duration': 1.041}, {'end': 11998.058, 'text': "In this video, I'm going to show you how we can create some Font Awesome icons using HTML and CSS.", 'start': 11992.253, 'duration': 5.805}, {'end': 12000.18, 'text': "All right, let's get started, everybody.", 'start': 11998.819, 'duration': 1.361}, {'end': 12004.324, 'text': "I'm going to direct you to this website, fontawesome.com.", 'start': 12000.821, 'duration': 3.503}], 'summary': 'Creating an image gallery and font awesome icons using html and css.', 'duration': 29.375, 'max_score': 11974.949, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw11974949.jpg'}], 'start': 11206.213, 'title': 'Designing website layout and creating image gallery using html and css', 'summary': 'Covers designing a website layout with html and css, including semantic elements like header and footer, and creating a simple image gallery with three images - salad, soup, and pizza, along with their descriptions, and hover effects for border color change.', 'chapters': [{'end': 11729.755, 'start': 11206.213, 'title': 'Basic website layout', 'summary': 'Discusses the basics of designing a website layout using html and css, covering the structure of semantic elements such as header, nav, main, and footer, along with their styling and responsiveness for desktop and mobile devices.', 'duration': 523.542, 'highlights': ['Semantic elements and their styling The chapter covers the structure and styling of semantic elements like header, nav, main, and footer, including setting background colors, text alignment, padding, and clearing floats.', 'Responsive design for desktop and mobile devices It explains the use of media queries and CSS properties to make the layout responsive for mobile devices by adjusting the width of elements to 100% when the screen width is 600 pixels or below.', 'Creating an image gallery using HTML and CSS The chapter provides instructions for creating an interactive image gallery using HTML and CSS, including the use of div elements, class assignment, and sourcing images with relative file paths.']}, {'end': 12044.667, 'start': 11730.996, 'title': 'Creating html image gallery', 'summary': 'Demonstrates creating a simple image gallery using html and css, including adding alternative attributes, setting anchor tags, styling with css, and using hover pseudo class to change border color, resulting in a gallery with three images - salad, soup, and pizza, each with descriptions, and when clicked, the images open in a new tab.', 'duration': 313.671, 'highlights': ['The chapter demonstrates creating a simple image gallery using HTML and CSS. The tutorial covers the process of creating an image gallery using HTML and CSS.', 'Adding alternative attributes, setting anchor tags, styling with CSS, and using hover pseudo class to change border color. The tutorial explains the steps for adding alternative attributes, setting anchor tags, styling with CSS, and using hover pseudo class to change border color for the image gallery.', 'The gallery consists of three images - salad, soup, and pizza, each with descriptions. The gallery contains three images - salad, soup, and pizza - each with its own description.', 'When clicked, the images open in a new tab. The tutorial demonstrates that when the images are clicked, they open in a new tab.']}], 'duration': 838.454, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw11206213.jpg', 'highlights': ['Responsive design for desktop and mobile devices It explains the use of media queries and CSS properties to make the layout responsive for mobile devices by adjusting the width of elements to 100% when the screen width is 600 pixels or below.', 'Creating an image gallery using HTML and CSS The chapter provides instructions for creating an interactive image gallery using HTML and CSS, including the use of div elements, class assignment, and sourcing images with relative file paths.', 'The tutorial explains the steps for adding alternative attributes, setting anchor tags, styling with CSS, and using hover pseudo class to change border color for the image gallery.', 'The gallery consists of three images - salad, soup, and pizza, each with descriptions. The gallery contains three images - salad, soup, and pizza - each with its own description.', 'When clicked, the images open in a new tab. The tutorial demonstrates that when the images are clicked, they open in a new tab.', 'Semantic elements and their styling The chapter covers the structure and styling of semantic elements like header, nav, main, and footer, including setting background colors, text alignment, padding, and clearing floats.', 'The chapter demonstrates creating a simple image gallery using HTML and CSS. The tutorial covers the process of creating an image gallery using HTML and CSS.']}, {'end': 14559.193, 'segs': [{'end': 12077.939, 'src': 'embed', 'start': 12045.475, 'weight': 0, 'content': [{'end': 12050.717, 'text': "Let's copy the script, then place it in the head of our HTML document right here.", 'start': 12045.475, 'duration': 5.242}, {'end': 12054.638, 'text': 'We now have access to those icons on Font Awesome.', 'start': 12052.057, 'duration': 2.581}, {'end': 12057.739, 'text': 'To browse for icons, go to the icons tab.', 'start': 12055.598, 'duration': 2.141}, {'end': 12059.619, 'text': 'Then we can perform a search.', 'start': 12058.479, 'duration': 1.14}, {'end': 12063.961, 'text': 'I would like an icon of a home or a house.', 'start': 12060.96, 'duration': 3.001}, {'end': 12068.202, 'text': "I would like this one, so I'll click on it.", 'start': 12066.262, 'duration': 1.94}, {'end': 12073.924, 'text': 'You can choose a classic style or a sharp style with sharp corners.', 'start': 12070.483, 'duration': 3.441}, {'end': 12076.798, 'text': 'This is solid.', 'start': 12076.018, 'duration': 0.78}, {'end': 12077.939, 'text': "That's regular.", 'start': 12077.158, 'duration': 0.781}], 'summary': 'Add font awesome icons to html, choose from various styles and perform searches.', 'duration': 32.464, 'max_score': 12045.475, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw12045475.jpg'}, {'end': 13117.347, 'src': 'embed', 'start': 13090.305, 'weight': 1, 'content': [{'end': 13093.848, 'text': 'Alright everybody, so that is a quick introduction to Flexbox.', 'start': 13090.305, 'duration': 3.543}, {'end': 13097.391, 'text': 'There is a lot to talk about, and that is all the time that I have for this topic.', 'start': 13093.928, 'duration': 3.463}, {'end': 13101.314, 'text': "And well, that's an introduction to Flexbox in CSS.", 'start': 13097.851, 'duration': 3.463}, {'end': 13108.199, 'text': "Hey, what's going on everybody? Today we're going to cover the transform property in CSS.", 'start': 13103.496, 'duration': 4.703}, {'end': 13114.064, 'text': 'The transform property lets you rotate, scale, skew, or otherwise translate an element.', 'start': 13108.7, 'duration': 5.364}, {'end': 13115.805, 'text': "Here's what we're going to do.", 'start': 13114.765, 'duration': 1.04}, {'end': 13117.347, 'text': "We'll create a div section.", 'start': 13116.166, 'duration': 1.181}], 'summary': 'Introduction to flexbox and transform property in css.', 'duration': 27.042, 'max_score': 13090.305, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw13090305.jpg'}, {'end': 13655.314, 'src': 'embed', 'start': 13626.735, 'weight': 2, 'content': [{'end': 13629.997, 'text': "Alright, I don't know what the point of that was, but I thought it would be a fun exercise.", 'start': 13626.735, 'duration': 3.262}, {'end': 13632.599, 'text': 'Alright everybody, so those are transformations.', 'start': 13630.437, 'duration': 2.162}, {'end': 13638.163, 'text': "It's a CSS property that lets you rotate, scale, skew, or otherwise translate an element.", 'start': 13633.019, 'duration': 5.144}, {'end': 13641.285, 'text': 'And those are a few basic CSS transformations.', 'start': 13638.543, 'duration': 2.742}, {'end': 13647.949, 'text': "Hey, what's going on everybody? Today we're going to create some animations using CSS.", 'start': 13643.946, 'duration': 4.003}, {'end': 13650.09, 'text': "Alright, let's get started everybody.", 'start': 13648.629, 'duration': 1.461}, {'end': 13655.314, 'text': 'We will create a div element with an ID of box.', 'start': 13650.11, 'duration': 5.204}], 'summary': 'Introduction to css transformations and animations, creating a div element with id of box.', 'duration': 28.579, 'max_score': 13626.735, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw13626735.jpg'}, {'end': 13724.971, 'src': 'embed', 'start': 13690.875, 'weight': 3, 'content': [{'end': 13695.956, 'text': 'To use an animation, we first need to create an animation using a keyframe rule.', 'start': 13690.875, 'duration': 5.081}, {'end': 13701.378, 'text': 'That can be done with typing at keyframes, then a unique animation name.', 'start': 13696.337, 'duration': 5.041}, {'end': 13705.7, 'text': "Let's create an animation to slide this element from the right to the left.", 'start': 13701.779, 'duration': 3.921}, {'end': 13708.601, 'text': 'The name will be slide left.', 'start': 13706.2, 'duration': 2.401}, {'end': 13710.822, 'text': 'Then add a set of curly braces.', 'start': 13709.561, 'duration': 1.261}, {'end': 13714.583, 'text': "Within our keyframe, there's a few possible values.", 'start': 13712.022, 'duration': 2.561}, {'end': 13715.704, 'text': 'You have two.', 'start': 13715.163, 'duration': 0.541}, {'end': 13724.971, 'text': 'from, or a percent, such as 0, 50, 100, really any number.', 'start': 13716.926, 'duration': 8.045}], 'summary': 'Creating a slide left animation using keyframe rules and percentages.', 'duration': 34.096, 'max_score': 13690.875, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw13690875.jpg'}, {'end': 14559.193, 'src': 'embed', 'start': 14553.129, 'weight': 4, 'content': [{'end': 14559.193, 'text': 'Pretty cool, right? All right, everybody, that is an introduction to animations using CSS.', 'start': 14553.129, 'duration': 6.064}], 'summary': 'Introduction to css animations.', 'duration': 6.064, 'max_score': 14553.129, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw14553129.jpg'}], 'start': 12045.475, 'title': 'Using font awesome icons, flexbox, css transform, and animations', 'summary': 'Demonstrates using font awesome icons in html, introducing flexbox in css with properties like flex direction, justify content, align items, flex wrap, align content, align self, and order, explaining the css transform property covering translations, rotations, scaling, skewing, and creating css animations with keyframes, animation properties, and different transformation values.', 'chapters': [{'end': 12494.622, 'start': 12045.475, 'title': 'Using font awesome icons in html', 'summary': 'Demonstrates how to use font awesome icons in html, including selecting and customizing icons, adjusting size and color, adding hyperlinks, and applying hover effects.', 'duration': 449.147, 'highlights': ['Demonstrates how to use Font Awesome icons in HTML The chapter illustrates the process of using Font Awesome icons in HTML, providing practical guidance for incorporating icons into web pages.', 'Shows selecting and customizing icons It covers the selection and customization of icons, offering insights into choosing and modifying icons to suit specific design requirements.', 'Explains adjusting size and color of icons The explanation includes how to adjust the size and color of icons, allowing for customization and visual consistency within a webpage.', 'Guidance on adding hyperlinks to icons It provides guidance on adding hyperlinks to icons, enabling users to link the icons to external webpages or resources.', 'Demonstrates applying hover effects to icons The chapter demonstrates the application of hover effects to icons, offering a practical example of enhancing user interaction with icons.']}, {'end': 13089.171, 'start': 12494.622, 'title': 'Introduction to flexbox in css', 'summary': 'Introduces using flexbox in css, covering properties like flex direction, justify content, align items, flex wrap, align content, align self, and order, with practical demonstrations and examples.', 'duration': 594.549, 'highlights': ['The chapter introduces using Flexbox in CSS, covering properties like flex direction, justify content, align items, flex wrap, align content, align self, and order. The chapter provides a practical introduction to using Flexbox in CSS, demonstrating properties such as flex direction, justify content, align items, flex wrap, align content, align self, and order.', 'The default flex direction property is set to row, and it can be changed to row reverse, column, or column reverse to arrange elements in different directions. The default flex direction property is set to row, and it can be changed to row reverse, column, or column reverse to arrange elements in different directions.', 'The justify content property can be used to align elements on the main axis using values like flex start, flex end, center, space between, space around, and space evenly. The justify content property can align elements on the main axis using values like flex start, flex end, center, space between, space around, and space evenly.', 'The align items property is used for the cross axis and can align elements using values like flex start, flex end, center, and baseline. The align items property is used for the cross axis and can align elements using values like flex start, flex end, center, and baseline.', "The flex wrap property can be set to wrap or wrap reverse to control how elements wrap when there's not enough space, and it can be used with align content to further control the spacing. The flex wrap property can be set to wrap or wrap reverse to control how elements wrap when there's not enough space, and it can be used with align content to further control the spacing.", 'The align self property can be applied to single elements within the container to individually control their alignment, and the order property can change the order of elements within the container. The align self property can be applied to single elements within the container to individually control their alignment, and the order property can change the order of elements within the container.']}, {'end': 13689.314, 'start': 13090.305, 'title': 'Css transform property', 'summary': 'Introduces the transform property in css, covering translations, rotations, scaling, and skewing, demonstrating their application with detailed examples and practical exercises.', 'duration': 599.009, 'highlights': ['Demonstrating CSS transformations including translations, rotations, scaling, and skewing with practical examples and exercises. CSS transformations: translations, rotations, scaling, and skewing.', 'Applying multiple transformations simultaneously and demonstrating their application to elements and images. Simultaneous application of multiple transformations to elements and images.', 'Creating animations using CSS, including setting the width, height, background color, and font size of a div element. Creating animations using CSS by setting properties of a div element.']}, {'end': 13967.85, 'start': 13690.875, 'title': 'Creating css animations', 'summary': 'Explains how to create css animations using keyframes, setting animation properties such as duration and speed, and using different transformation values to create sliding, rotating, and undoing animations.', 'duration': 276.975, 'highlights': ['Creating animations using keyframes and setting unique animation names like slide left, slide right, slide up, slide down, and rotate. The chapter explains the process of creating animations by defining unique animation names for different movements.', 'Setting animation duration property to control the speed of the animation, with examples of 1 second and 2 seconds. It demonstrates the use of the animation duration property to control the speed of the animation, providing examples with different time durations.', 'Using different transformation values like translateX, translateY, rotateX, rotateY, and rotateZ to create varied animations. The chapter discusses the use of different transformation values to create diverse animations, including translations and rotations.', 'Explaining the use of percentages in keyframes to control the completion and undoing of animations. It elaborates on the use of percentages in keyframes to control the completion and undoing of animations, providing examples of different time values.']}, {'end': 14559.193, 'start': 13968.471, 'title': 'Css animations introduction', 'summary': 'Introduces css animations with examples of growing, shrinking, fading, color changing, glowing effects, and applying animations to elements and images, while also discussing animation properties and pseudo classes.', 'duration': 590.722, 'highlights': ['The chapter discusses creating animations for growing, shrinking, fading, color changing, glowing effects, and applying animations to elements and images. The chapter covers creating various animations such as growing, shrinking, fading, color changing, glowing effects, and applying animations to elements and images.', 'The chapter explains the iteration count, direction, play state, timing function, and cubic bezier for CSS animations. The chapter explains the iteration count, direction, play state, timing function, and cubic bezier for CSS animations.', 'The chapter demonstrates using pseudo classes such as hover and active to trigger animations, along with setting the iteration count, animation direction, play state, and timing function for CSS animations. The chapter demonstrates using pseudo classes such as hover and active to trigger animations, along with setting the iteration count, animation direction, play state, and timing function for CSS animations.']}], 'duration': 2513.718, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HGTJBPNC-Gw/pics/HGTJBPNC-Gw12045475.jpg', 'highlights': ['Demonstrates using Font Awesome icons in HTML, providing practical guidance for incorporating icons into web pages.', 'The chapter introduces using Flexbox in CSS, demonstrating properties such as flex direction, justify content, align items, flex wrap, align content, align self, and order.', 'Demonstrating CSS transformations including translations, rotations, scaling, and skewing with practical examples and exercises.', 'The chapter explains the process of creating animations by defining unique animation names for different movements.', 'The chapter covers creating various animations such as growing, shrinking, fading, color changing, glowing effects, and applying animations to elements and images.']}], 'highlights': ['Understanding HTML and CSS is crucial for creating and managing websites, providing valuable skills for career development and potential employment advantages.', 'Online presence is crucial for businesses, making knowledge of managing websites and online content beneficial for potential employment opportunities.', 'The role of HTML in structuring webpages is explained, with a focus on using tags to convey content display instructions.', "CSS is described as a language that adds style to a webpage, akin to the decorations, design, and colors of the interior in an analogy to a house's interior design.", 'Instructions for creating hyperlinks with attributes like href, target, and title', 'Creating a webpage with song lyrics as a practical exercise', 'Comprehensive explanation and practical examples of adding audio files.', 'Demonstrates the process of including GIFs and organizing images in a separate folder.', 'Creating a favicon for a web page using HTML and CSS.', 'The chapter provides a step-by-step demonstration of creating bold, italic, underlined, deleted, big, small, subscript, superscript, and monospaced text in HTML, emphasizing the use of different tag pairs for each effect.', 'The chapter demonstrates how to create a table of store hours with 7 days, open and closed hours.', 'The chapter explains how to create a form using HTML, covering attributes like action and method, input types such as text, password, email, and telephone, and their corresponding attributes like required, min length, max length, and placeholder.', 'Demonstrating the creation of a dropdown menu using select tags and option elements with specific values and texts.', 'Demonstration of changing font for elements in CSS, including using the font-family property and applying the font to specific elements like H1 and paragraph tags.', 'The float property in CSS allows text to wrap around images, demonstrated by floating images left and right, with the text flowing around them as the window size is adjusted.', 'The overflow property in CSS sets the defined behavior when content overflows, featuring five states including visible, hidden, clip, scroll, and auto, with detailed examples and explanations for each state.', 'The chapter explains setting explicit height and width for elements, showcasing examples of setting fixed height and width in pixels, and demonstrating the effect of auto, percentage, and viewport height values.', 'The chapter covers the usage of H1 element, paragraph, and list with pseudo elements to style the first letter, first line, selection, before, and after items The transcript explains the application of pseudo elements to style different elements such as H1, paragraph, and list items, indicating the breadth of coverage in the chapter.', 'Creation of a simple dropdown menu using HTML and CSS, including the method of pagination', 'Semantic tags are used for organizing content, improving SEO, and accessibility, including headers, nav elements, main, section, aside, articles, and footers', 'Responsive design for desktop and mobile devices It explains the use of media queries and CSS properties to make the layout responsive for mobile devices by adjusting the width of elements to 100% when the screen width is 600 pixels or below.', 'Creating an image gallery using HTML and CSS The chapter provides instructions for creating an interactive image gallery using HTML and CSS, including the use of div elements, class assignment, and sourcing images with relative file paths.', 'Demonstrates using Font Awesome icons in HTML, providing practical guidance for incorporating icons into web pages.', 'The chapter introduces using Flexbox in CSS, demonstrating properties such as flex direction, justify content, align items, flex wrap, align content, align self, and order.', 'Demonstrating CSS transformations including translations, rotations, scaling, and skewing with practical examples and exercises.', 'The chapter explains the process of creating animations by defining unique animation names for different movements.', 'The chapter covers creating various animations such as growing, shrinking, fading, color changing, glowing effects, and applying animations to elements and images.']}