title
CSS Tutorial – Full Course for Beginners

description
In this in-depth course, you will learn about all the key features of CSS. This is the most comprehensive CSS course we've published to date. So if you want to become an expert in Cascading Style Sheets, this is the course for you. ✏️ Course from Dave Gray. Check out his channel: http://youtube.com/DaveGrayTeachesCode 💻 Course Resources: https://github.com/gitdagray/css_course 🎥 Dave's HTML course: https://youtu.be/kUMe1FH4CHE ⭐️ Course Contents ⭐️ (0:00:00) Intro (0:01:08) Chapter 1: Start Here (0:14:50) Chapter 2: Selectors (0:34:41) Chapter 3: Colors (0:51:13) Chapter 4: Units & Sizes (1:11:56) Chapter 5: Box Model (1:37:08) Chapter 6: Typography (2:00:29) Chapter 7: Styling Links (2:16:37) Chapter 8: List Styles (2:32:31) Chapter 9: Mini Project (2:45:04) Chapter 10: Display (3:00:21) Chapter 11: Floats (3:12:46) Chapter 12: Columns (3:34:30) Chapter 13: Position (3:57:53) Chapter 14: Flexbox (4:21:39) Chapter 15: Grid Layout (4:46:33) Chapter 16: Images (5:32:40) Chapter 17: Media Queries (5:58:59) Chapter 18: Card Project (6:33:21) Chapter 19: Pseudo (6:52:56) Chapter 20: Variables (7:20:28) Chapter 21: Functions (7:50:05) Chapter 22: Animations (8:37:33) Chapter 23: Organization (8:57:23) Chapter 24: Final Project 🎉 Thanks to our Champion and Sponsor supporters: 👾 Raymond Odero 👾 Agustín Kussrow 👾 aldo ferretti 👾 Otis Morgan 👾 DeezMaster -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news

detail
{'title': 'CSS Tutorial – Full Course for Beginners', 'heatmap': [{'end': 4409.946, 'start': 3203.766, 'weight': 0.728}, {'end': 5214.116, 'start': 4803.271, 'weight': 0.731}, {'end': 6018.54, 'start': 5606.463, 'weight': 0.801}, {'end': 10023.241, 'start': 8819.071, 'weight': 0.717}, {'end': 15239.457, 'start': 10418.807, 'weight': 0.778}, {'end': 16044.685, 'start': 15634.746, 'weight': 0.735}, {'end': 16838.231, 'start': 16436.609, 'weight': 0.771}, {'end': 18458.978, 'start': 17637.377, 'weight': 0.795}, {'end': 20449.363, 'start': 20041.612, 'weight': 0.796}, {'end': 21252.496, 'start': 20847.403, 'weight': 0.743}, {'end': 22451.657, 'start': 22048.158, 'weight': 0.835}, {'end': 23255.527, 'start': 22851.173, 'weight': 0.705}], 'summary': 'A comprehensive css tutorial for beginners, consisting of 24 chapters with over 11 hours of content, covering fundamental css principles, selectors, colors, web design, typography, layout techniques, responsive design, animation, and organization, with practical examples and resources available on github.', 'chapters': [{'end': 59.132, 'segs': [{'end': 59.132, 'src': 'embed', 'start': 0.109, 'weight': 0, 'content': [{'end': 2.891, 'text': 'If you want to learn CSS, this is the course for you.', 'start': 0.109, 'duration': 2.782}, {'end': 6.994, 'text': 'Dave Gray teaches this comprehensive CSS course for beginners.', 'start': 3.611, 'duration': 3.383}, {'end': 13.938, 'text': "We've already published a popular HTML course from Dave, and this course is a great next step after you learn HTML.", 'start': 7.274, 'duration': 6.664}, {'end': 19.222, 'text': 'Hello and welcome to over 11 hours of CSS tutorials and instruction.', 'start': 14.138, 'duration': 5.084}, {'end': 25.026, 'text': 'This video is made up of 24 tutorials that build upon each other much like the chapters of a book.', 'start': 19.702, 'duration': 5.324}, {'end': 30.39, 'text': 'Throughout the lessons in this video, I will mention links being available in the description below.', 'start': 25.666, 'duration': 4.724}, {'end': 35.675, 'text': "I've compiled all of these links into one GitHub resource that you will find in the description.", 'start': 30.791, 'duration': 4.884}, {'end': 39.998, 'text': "Hi, I'm Dave Gray, and I'm the creator of these CSS tutorials.", 'start': 36.355, 'duration': 3.643}, {'end': 43.882, 'text': 'You can subscribe to my YouTube channel for more tutorials like this one.', 'start': 40.479, 'duration': 3.403}, {'end': 49.487, 'text': "You can also follow me on Twitter, and if you're feeling generous, you can even buy me a cup of coffee.", 'start': 44.322, 'duration': 5.165}, {'end': 59.132, 'text': 'A quick thank you to Beau at FreeCodeCamp for sharing this video and to everyone at FreeCodeCamp for providing such an outstanding resource that helps people learn how to code for free.', 'start': 49.947, 'duration': 9.185}], 'summary': 'Comprehensive css course for beginners, over 11 hours of tutorials, 24 tutorials, and github resource available.', 'duration': 59.023, 'max_score': 0.109, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA109.jpg'}], 'start': 0.109, 'title': 'Comprehensive css course for beginners', 'summary': 'Introduces a comprehensive css course for beginners, consisting of 24 tutorials totaling over 11 hours, with additional resources available on github and acknowledgment of support from freecodecamp.', 'chapters': [{'end': 59.132, 'start': 0.109, 'title': 'Comprehensive css course for beginners', 'summary': 'Introduces a comprehensive css course for beginners, consisting of 24 tutorials totaling over 11 hours, with additional resources available on github, and acknowledgment of support from freecodecamp.', 'duration': 59.023, 'highlights': ['The course consists of 24 tutorials totaling over 11 hours, providing a comprehensive learning experience for beginners.', 'Additional resources, including links and GitHub repository, are available to supplement the learning process.', 'Acknowledgment is given to FreeCodeCamp for their support in sharing the video and providing free coding resources.']}], 'duration': 59.023, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA109.jpg', 'highlights': ['The course consists of 24 tutorials totaling over 11 hours, providing a comprehensive learning experience for beginners.', 'Additional resources, including links and GitHub repository, are available to supplement the learning process.', 'Acknowledgment is given to FreeCodeCamp for their support in sharing the video and providing free coding resources.']}, {'end': 1981.483, 'segs': [{'end': 140.166, 'src': 'embed', 'start': 59.572, 'weight': 0, 'content': [{'end': 62.014, 'text': "It's truly my honor to contribute this video.", 'start': 59.572, 'duration': 2.442}, {'end': 66.356, 'text': "Let's get started learning CSS with Chapter 1.", 'start': 62.194, 'duration': 4.162}, {'end': 73.646, 'text': 'What is CSS? CSS is an acronym that stands for Cascading Style Sheets.', 'start': 66.356, 'duration': 7.29}, {'end': 79.413, 'text': "So CSS is a style sheet language that's used to describe the presentation of a document.", 'start': 74.127, 'duration': 5.286}, {'end': 85.2, 'text': "It's most known for being used with HTML, although it can be applied to other media.", 'start': 79.853, 'duration': 5.347}, {'end': 95.387, 'text': "like you see here, i've got xml, svg, mathml, xhtml and other things listed here for on paper, in speech, other media.", 'start': 85.7, 'duration': 9.687}, {'end': 98.449, 'text': 'but we will be working with html.', 'start': 95.387, 'duration': 3.062}, {'end': 106.075, 'text': 'now, when we think about the difference between html and css, consider html as the foundation and structure.', 'start': 98.449, 'duration': 7.626}, {'end': 111.579, 'text': 'so if you think about a new building or house that is being built and you see that structure, go up.', 'start': 106.075, 'duration': 5.504}, {'end': 113.919, 'text': 'That is the foundation.', 'start': 112.379, 'duration': 1.54}, {'end': 115.8, 'text': "That's everything that holds it together.", 'start': 113.979, 'duration': 1.821}, {'end': 127.143, 'text': 'However, the CSS is the paint and the carpet and the wallpaper or anything, any decorations, anything that makes it look good.', 'start': 115.9, 'duration': 11.243}, {'end': 129.643, 'text': 'So the structure holds it all together.', 'start': 127.263, 'duration': 2.38}, {'end': 130.704, 'text': "It's the foundation.", 'start': 129.743, 'duration': 0.961}, {'end': 137.425, 'text': 'The CSS is really what makes the appearance, that actual presentation of the building.', 'start': 130.764, 'duration': 6.661}, {'end': 140.166, 'text': "Or in our case, we're working with documents.", 'start': 137.625, 'duration': 2.541}], 'summary': 'Css is a style sheet language used to describe document presentation, commonly applied to html.', 'duration': 80.594, 'max_score': 59.572, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA59572.jpg'}, {'end': 463.821, 'src': 'embed', 'start': 434.27, 'weight': 3, 'content': [{'end': 435.891, 'text': "And that's what Live Server does for you.", 'start': 434.27, 'duration': 1.621}, {'end': 437.451, 'text': 'So go ahead and install that.', 'start': 435.911, 'duration': 1.54}, {'end': 443.713, 'text': "Once you have that installed, and I'll click on the Explorer icon over here to look at our files again.", 'start': 438.291, 'duration': 5.422}, {'end': 446.614, 'text': "But now you'll have some options in Visual Studio Code.", 'start': 444.293, 'duration': 2.321}, {'end': 449.095, 'text': 'You could click Go Live down here at the bottom right.', 'start': 446.634, 'duration': 2.461}, {'end': 453.197, 'text': 'And it says click to run Live Server when we mouse over.', 'start': 449.855, 'duration': 3.342}, {'end': 455.758, 'text': 'Or you can right click just in the file.', 'start': 453.697, 'duration': 2.061}, {'end': 458.199, 'text': 'And you could choose Open with Live Server.', 'start': 456.278, 'duration': 1.921}, {'end': 459.84, 'text': "And I'll go ahead and do that now.", 'start': 458.359, 'duration': 1.481}, {'end': 463.821, 'text': 'And there we have our very, very basic web page.', 'start': 460.1, 'duration': 3.721}], 'summary': 'Live server allows easy web page viewing in visual studio code.', 'duration': 29.551, 'max_score': 434.27, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA434270.jpg'}, {'end': 682.377, 'src': 'embed', 'start': 653.42, 'weight': 4, 'content': [{'end': 657.902, 'text': "Now if I save this, Notice it's now blue over here.", 'start': 653.42, 'duration': 4.482}, {'end': 666.988, 'text': "This does take precedent over either type of style sheet, internal or external, because it's applied directly to the element itself.", 'start': 658.583, 'duration': 8.405}, {'end': 670.51, 'text': 'But what we want is a separation of concerns.', 'start': 667.448, 'duration': 3.062}, {'end': 676.954, 'text': 'So the best way, the way that is commonly used, is the external style sheet.', 'start': 670.79, 'duration': 6.164}, {'end': 682.377, 'text': 'It keeps your CSS code completely separate from your HTML.', 'start': 677.134, 'duration': 5.243}], 'summary': 'External style sheets commonly used for separating css from html.', 'duration': 28.957, 'max_score': 653.42, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA653420.jpg'}, {'end': 847.049, 'src': 'embed', 'start': 818.465, 'weight': 5, 'content': [{'end': 821.388, 'text': 'So if I change that back, once again, we have purple text.', 'start': 818.465, 'duration': 2.923}, {'end': 828.675, 'text': 'Now, one way we can detect problems in our CSS is to validate our CSS files.', 'start': 821.848, 'duration': 6.827}, {'end': 831.217, 'text': "So let's pull up a page that will do that.", 'start': 829.075, 'duration': 2.142}, {'end': 836.763, 'text': 'And we go to CSS validation service from W3C.', 'start': 831.798, 'duration': 4.965}, {'end': 838.685, 'text': "That's the World Wide Web Consortium.", 'start': 836.823, 'duration': 1.862}, {'end': 847.049, 'text': 'And we want to choose file by upload where we can select the CSS style.css from our folder.', 'start': 839.325, 'duration': 7.724}], 'summary': "Validating css files can help detect problems. use w3c's css validation service to upload and check the css file.", 'duration': 28.584, 'max_score': 818.465, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA818465.jpg'}, {'end': 1061.467, 'src': 'embed', 'start': 1035.42, 'weight': 7, 'content': [{'end': 1042.964, 'text': 'but if I scroll down to the second paragraph, here we have a class set equal to gray on that paragraph.', 'start': 1035.42, 'duration': 7.544}, {'end': 1048.712, 'text': 'Likewise, we have a class set equal to gray on the third paragraph as well.', 'start': 1043.484, 'duration': 5.228}, {'end': 1053.497, 'text': "So classes can be used more than once and they're very useful that way.", 'start': 1049.072, 'duration': 4.425}, {'end': 1061.467, 'text': "You're creating styles that you can apply throughout your project or throughout your page and then they can be reused with more than one element.", 'start': 1053.537, 'duration': 7.93}], 'summary': 'Classes can be reused, creating styles applicable to multiple elements.', 'duration': 26.047, 'max_score': 1035.42, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA1035420.jpg'}, {'end': 1455.557, 'src': 'embed', 'start': 1428.161, 'weight': 9, 'content': [{'end': 1432.264, 'text': 'But then, of course, the gray class overrides that on the final two.', 'start': 1428.161, 'duration': 4.103}, {'end': 1441.03, 'text': 'But if I came here and said, red instead of purple, notice how this paragraph turns red.', 'start': 1432.905, 'duration': 8.125}, {'end': 1445.312, 'text': "And that's because it read this rule set last.", 'start': 1441.21, 'duration': 4.102}, {'end': 1448.654, 'text': 'So first CSS looked at this at the top.', 'start': 1445.572, 'duration': 3.082}, {'end': 1449.674, 'text': 'It starts at the top.', 'start': 1448.714, 'duration': 0.96}, {'end': 1451.035, 'text': 'And it works its way down.', 'start': 1449.734, 'duration': 1.301}, {'end': 1453.216, 'text': 'And so it read this last.', 'start': 1451.255, 'duration': 1.961}, {'end': 1455.557, 'text': 'Essentially, this is the last rule.', 'start': 1453.356, 'duration': 2.201}], 'summary': 'Css applies rules from top to bottom, with the last rule taking precedence.', 'duration': 27.396, 'max_score': 1428.161, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA1428161.jpg'}, {'end': 1662.449, 'src': 'embed', 'start': 1636.051, 'weight': 8, 'content': [{'end': 1641.496, 'text': "and as we go to the top, let's talk about inheritance, as i got into specificity a little bit already.", 'start': 1636.051, 'duration': 5.445}, {'end': 1651.904, 'text': 'but inheritance, that is where another element inherits the settings from or the properties from its parent element.', 'start': 1641.496, 'duration': 10.408}, {'end': 1656.346, 'text': 'So the body element is parent to every other element here.', 'start': 1652.105, 'duration': 4.241}, {'end': 1662.449, 'text': 'And so when we set the font size, all of these other elements inherited that font size.', 'start': 1656.806, 'duration': 5.643}], 'summary': 'Inheritance allows elements to inherit properties from their parent, such as font size.', 'duration': 26.398, 'max_score': 1636.051, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA1636051.jpg'}, {'end': 1784.351, 'src': 'embed', 'start': 1756.002, 'weight': 11, 'content': [{'end': 1760.967, 'text': "In other words, it keeps our code dry, which is an acronym that stands for don't repeat yourself.", 'start': 1756.002, 'duration': 4.965}, {'end': 1763.89, 'text': 'So we want to write less code and be more efficient.', 'start': 1761.007, 'duration': 2.883}, {'end': 1766.213, 'text': 'And inheritance helps us do that.', 'start': 1764.451, 'duration': 1.762}, {'end': 1768.575, 'text': 'Now, some things are not inherited.', 'start': 1766.613, 'duration': 1.962}, {'end': 1770.577, 'text': 'Like I mentioned, the border would be one of those.', 'start': 1768.615, 'duration': 1.962}, {'end': 1776.903, 'text': 'Also, form elements do not inherit, say, the font size and other typography settings.', 'start': 1771.058, 'duration': 5.845}, {'end': 1784.351, 'text': "So it wouldn't be that unusual to see something like this that would take a button and, let's say, an input.", 'start': 1777.284, 'duration': 7.067}], 'summary': 'Inheritance reduces code repetition, promoting efficiency, but not all attributes are inherited.', 'duration': 28.349, 'max_score': 1756.002, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA1756002.jpg'}, {'end': 1923.68, 'src': 'embed', 'start': 1897.287, 'weight': 6, 'content': [{'end': 1903.07, 'text': 'The element selector is the least specific, and then a class selector is more specific.', 'start': 1897.287, 'duration': 5.783}, {'end': 1909.774, 'text': "And then, although we don't want to use them in our CSS, an ID selector is even more specific than that.", 'start': 1903.51, 'duration': 6.264}, {'end': 1915.517, 'text': "Sometimes something's not working out and you're wanting to figure out why it's not working out,", 'start': 1910.354, 'duration': 5.163}, {'end': 1918.058, 'text': "or you just can't figure it out and you get frustrated.", 'start': 1915.517, 'duration': 2.541}, {'end': 1923.68, 'text': "I'm going to show you something that will work, but I'm going to recommend that you do not use it.", 'start': 1918.518, 'duration': 5.162}], 'summary': "Selectors in css vary in specificity: element< class< id. it's important to avoid using the most specific id selector to prevent frustration.", 'duration': 26.393, 'max_score': 1897.287, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA1897287.jpg'}], 'start': 59.572, 'title': 'Css fundamentals and best practices', 'summary': 'Introduces css as a style sheet language used to enhance document presentation, covers setting up css tools and creating simple styles, adding live server extension, applying css in visual studio code, css selectors overview, cascade and inheritance, with practical examples and emphasizing the importance of using classes for better code organization and reusability.', 'chapters': [{'end': 140.166, 'start': 59.572, 'title': 'Introduction to css', 'summary': 'Introduces css as a style sheet language used to describe the presentation of a document, particularly in relation to html, and emphasizes its role in enhancing the appearance and presentation of content.', 'duration': 80.594, 'highlights': ['CSS defined as Cascading Style Sheets used to describe document presentation, particularly with HTML.', 'Comparison of HTML and CSS, where HTML is the foundation and structure, while CSS enhances appearance and presentation.', "Explanation of CSS using the analogy of a building's structure as HTML and the decorations as CSS."]}, {'end': 387.133, 'start': 140.646, 'title': 'Setting up css tools and creating simple styles', 'summary': 'Covers setting up the necessary tools for css, including downloading and installing chrome and visual studio code, creating a project folder, creating an html document, and setting up an external style sheet for applying css to the document.', 'duration': 246.487, 'highlights': ['Downloading Chrome and Visual Studio Code The chapter emphasizes the use of Chrome browser and Visual Studio Code for the course, with instructions to download them from the respective websites, google.com/chrome and code.visualstudio.com.', 'Creating an index.html file and using Emmet shortcut The chapter explains the process of creating an index.html file and demonstrates the use of Emmet shortcut to quickly generate a basic HTML document, including adding content and meta tags.', 'Setting up an external style sheet for CSS The chapter provides a detailed guide on creating a CSS directory, generating a style.css file, and linking it to the HTML document to apply a simple style to the paragraph element, specifying the color as purple.']}, {'end': 891.105, 'start': 387.614, 'title': 'Adding live server extension and applying css in visual studio code', 'summary': "Covers the process of adding the live server extension in visual studio code and demonstrates the use of inline, internal, and external css, as well as the importance of validating css files using w3c's css validation service.", 'duration': 503.491, 'highlights': ['Adding Live Server extension in Visual Studio Code Demonstrates the process of adding the Live Server extension in Visual Studio Code, allowing immediate reload of changes and simulating a web server environment.', 'Demonstrating the use of inline, internal, and external CSS Illustrates the usage of inline, internal, and external CSS to style elements within an HTML document, emphasizing the importance of using external style sheets for separation of concerns.', "Importance of validating CSS files using W3C's CSS validation service Highlights the significance of validating CSS files using W3C's CSS validation service to detect errors and ensure compliance with CSS standards."]}, {'end': 1404.422, 'start': 891.285, 'title': 'Css selectors overview', 'summary': 'Covers the basics of css selectors, including element, class, and id selectors, with practical examples and explanations on inheritance, specificity, grouping selectors, and the universal selector, emphasizing the importance of using classes for better code organization and reusability.', 'duration': 513.137, 'highlights': ['The chapter covers the basics of CSS selectors, including element, class, and ID selectors, with practical examples and explanations on inheritance, specificity, grouping selectors, and the universal selector. It explains the different types of selectors in CSS, such as element, class, and ID selectors, and provides practical examples and explanations on inheritance, specificity, grouping selectors, and the universal selector.', 'Emphasizes the importance of using classes for better code organization and reusability. It stresses the importance of using classes for better code organization and reusability, highlighting their usefulness for creating styles that can be applied throughout a project or page and reused with more than one element.', 'Explains the concept of inheritance in CSS and demonstrates how properties inherited from the body element affect other elements. It explains the concept of inheritance in CSS and demonstrates how properties inherited from the body element affect other elements, with a practical example of setting the font size on the body element and observing its impact on other elements.']}, {'end': 1981.483, 'start': 1404.882, 'title': 'Css cascade and inheritance', 'summary': "Discusses the cascade in css, explaining how it works from the top down, with specificity overriding the cascade, and how to use devtools to inspect and troubleshoot css. it also covers the concept of inheritance, demonstrating how elements inherit properties from their parent elements and the use of the universal selector. it further emphasizes the importance of organizing code and not abusing the 'important' flag.", 'duration': 576.601, 'highlights': ['CSS cascade works from the top down, with specificity overriding the cascade. CSS follows a top-down approach, where the last rule set in the cascade is applied, and specificity can override this order. This is demonstrated through examples of how classes override element selectors and the use of DevTools to inspect and troubleshoot CSS.', 'Demonstration of how elements inherit properties from their parent elements and the use of the universal selector. The concept of inheritance is illustrated, showing how elements inherit properties like font size, color, and alignment from their parent elements. Additionally, the use of the universal selector to select all elements and the distinction between inherited and non-inherited properties are explained.', "Emphasis on the importance of organizing code and not abusing the 'important' flag. The chapter highlights the importance of writing efficient and organized code, utilizing inheritance to avoid repetitive code. It also discourages the misuse of the 'important' flag, explaining its overriding behavior and recommending proper code organization instead."]}], 'duration': 1921.911, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA59572.jpg', 'highlights': ['CSS defined as Cascading Style Sheets used to describe document presentation, particularly with HTML.', 'Comparison of HTML and CSS, where HTML is the foundation and structure, while CSS enhances appearance and presentation.', "Explanation of CSS using the analogy of a building's structure as HTML and the decorations as CSS.", 'Demonstrates the process of adding the Live Server extension in Visual Studio Code, allowing immediate reload of changes and simulating a web server environment.', 'Illustrates the usage of inline, internal, and external CSS to style elements within an HTML document, emphasizing the importance of using external style sheets for separation of concerns.', "Highlights the significance of validating CSS files using W3C's CSS validation service to detect errors and ensure compliance with CSS standards.", 'The chapter covers the basics of CSS selectors, including element, class, and ID selectors, with practical examples and explanations on inheritance, specificity, grouping selectors, and the universal selector.', 'Stresses the importance of using classes for better code organization and reusability, highlighting their usefulness for creating styles that can be applied throughout a project or page and reused with more than one element.', 'Explains the concept of inheritance in CSS and demonstrates how properties inherited from the body element affect other elements.', 'CSS follows a top-down approach, where the last rule set in the cascade is applied, and specificity can override this order.', 'The concept of inheritance is illustrated, showing how elements inherit properties like font size, color, and alignment from their parent elements.', 'The chapter highlights the importance of writing efficient and organized code, utilizing inheritance to avoid repetitive code.']}, {'end': 3036.623, 'segs': [{'end': 2007.129, 'src': 'embed', 'start': 1981.944, 'weight': 1, 'content': [{'end': 1990.949, 'text': "And only after you've learned CSS well enough to understand when to use that important flag, that's the only time you should use it.", 'start': 1981.944, 'duration': 9.005}, {'end': 1993.29, 'text': 'You should really not give up the struggle.', 'start': 1991.029, 'duration': 2.261}, {'end': 2001.18, 'text': 'You will learn more by struggling and learning how to apply these selectors in the proper way without using that important flag.', 'start': 1993.37, 'duration': 7.81}, {'end': 2007.129, 'text': 'I do want to show you one thing that will help you learn, and that is the specificity calculator.', 'start': 2001.421, 'duration': 5.708}], 'summary': 'Struggle to learn css, avoid !important flag, use specificity calculator.', 'duration': 25.185, 'max_score': 1981.944, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA1981944.jpg'}, {'end': 2082.991, 'src': 'embed', 'start': 2052.112, 'weight': 0, 'content': [{'end': 2055.275, 'text': 'Now you could apply more than one class, for example, to an element.', 'start': 2052.112, 'duration': 3.163}, {'end': 2059.138, 'text': "So let's see what happens if we had a second class and we had our highlight class.", 'start': 2055.335, 'duration': 3.803}, {'end': 2065.882, 'text': "Now this has a score of 20, but it's still not going to be as high as a score of 100.", 'start': 2059.838, 'duration': 6.044}, {'end': 2074.068, 'text': 'So this specificity calculator will certainly help you understand why one rule is being applied or why one selector, I should say,', 'start': 2065.882, 'duration': 8.186}, {'end': 2075.668, 'text': 'is being applied over another.', 'start': 2074.068, 'duration': 1.6}, {'end': 2078.889, 'text': "Today we're learning about CSS colors.", 'start': 2076.809, 'duration': 2.08}, {'end': 2082.991, 'text': "I've got Visual Studio Code here on the left and our web page on the right.", 'start': 2079.07, 'duration': 3.921}], 'summary': 'Learning css colors with specificity calculator. highlight class has a score of 20, but not as high as 100.', 'duration': 30.879, 'max_score': 2052.112, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA2052112.jpg'}, {'end': 2188.569, 'src': 'embed', 'start': 2162.802, 'weight': 5, 'content': [{'end': 2167.907, 'text': 'And you can see Visual Studio Code also shows us a little square of blue beside the name blue.', 'start': 2162.802, 'duration': 5.105}, {'end': 2171.29, 'text': 'And now if we look at the page, it has a blue background.', 'start': 2168.608, 'duration': 2.682}, {'end': 2175.214, 'text': "Now that's not nearly as legible because we also have a dark font.", 'start': 2171.671, 'duration': 3.543}, {'end': 2183.082, 'text': 'So we also have to consider the contrast when we pick colors to make it legible and readable for our viewers.', 'start': 2175.254, 'duration': 7.828}, {'end': 2185.285, 'text': 'And it also needs to be accessible.', 'start': 2183.522, 'duration': 1.763}, {'end': 2188.569, 'text': 'And there are contrast ratios that are specified.', 'start': 2185.445, 'duration': 3.124}], 'summary': 'Consider contrast ratios for legible and accessible colors.', 'duration': 25.767, 'max_score': 2162.802, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA2162802.jpg'}, {'end': 2234.609, 'src': 'embed', 'start': 2206.769, 'weight': 4, 'content': [{'end': 2213.753, 'text': "but we can just set a color by saying background, and that's often the case because it's shorter to type than background dash color.", 'start': 2206.769, 'duration': 6.984}, {'end': 2216.534, 'text': "so you'll see this often instead of blue.", 'start': 2213.753, 'duration': 2.781}, {'end': 2219.776, 'text': "let's change our background color to an interesting color name.", 'start': 2216.534, 'duration': 3.242}, {'end': 2222.958, 'text': "I like papaya whip, so I'll save.", 'start': 2220.316, 'duration': 2.642}, {'end': 2225.841, 'text': "And that's much easier to read as well.", 'start': 2223.579, 'duration': 2.262}, {'end': 2228.864, 'text': 'So our dark text looks good on this background.', 'start': 2225.981, 'duration': 2.883}, {'end': 2234.609, 'text': "OK, now that we know how to set a background color, let's change our font color as well.", 'start': 2229.424, 'duration': 5.185}], 'summary': "Using 'background' instead of 'background-color' is often shorter and easier, like using 'papaya whip' for background color.", 'duration': 27.84, 'max_score': 2206.769, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA2206769.jpg'}, {'end': 2361.135, 'src': 'embed', 'start': 2338.078, 'weight': 8, 'content': [{'end': 2345.164, 'text': 'Now, as we previously learned about the cascade, we can go ahead and define a color of text on the body,', 'start': 2338.078, 'duration': 7.086}, {'end': 2347.987, 'text': 'but then we can override it inside of some of the elements.', 'start': 2345.164, 'duration': 2.823}, {'end': 2352.971, 'text': "So let's say our paragraphs here, and we want to override that with a different color.", 'start': 2348.027, 'duration': 4.944}, {'end': 2356.994, 'text': 'So maybe we want a blue text for the paragraphs.', 'start': 2353.031, 'duration': 3.963}, {'end': 2361.135, 'text': 'And we can put that here and style all of our paragraphs now with blue text.', 'start': 2357.154, 'duration': 3.981}], 'summary': 'Using cascading style sheets, setting blue text for paragraphs.', 'duration': 23.057, 'max_score': 2338.078, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA2338078.jpg'}, {'end': 2457.566, 'src': 'embed', 'start': 2405.483, 'weight': 2, 'content': [{'end': 2413.373, 'text': "Now that we've looked at RGB and RGBA, let's go ahead and look at hexadecimal, which is a common way to specify colors.", 'start': 2405.483, 'duration': 7.89}, {'end': 2415.436, 'text': 'Here, the color palette keeps wanting to help me.', 'start': 2413.413, 'duration': 2.023}, {'end': 2417.558, 'text': 'So we will be using that very soon.', 'start': 2415.956, 'duration': 1.602}, {'end': 2425.428, 'text': 'Hexadecimal also works like RGB and it has its own way of coding the values, though.', 'start': 2418.019, 'duration': 7.409}, {'end': 2431.895, 'text': 'It goes from 0 to 9 and then also uses letters A through F.', 'start': 2425.468, 'duration': 6.427}, {'end': 2437.981, 'text': 'And now 0, just like we learned with RGB, is the absence of color.', 'start': 2431.895, 'duration': 6.086}, {'end': 2448.843, 'text': "so six zeros is once again black, and you'll notice our paragraph text is totally black, likewise the highest value being the letter f.", 'start': 2437.981, 'duration': 10.862}, {'end': 2451.384, 'text': 'that is full red, green and blue.', 'start': 2448.843, 'duration': 2.541}, {'end': 2457.566, 'text': 'and so now we have white paragraphs, because we set those all the way to the highest value.', 'start': 2451.384, 'duration': 6.182}], 'summary': 'Learning about hexadecimal colors, 0-9 and a-f, for specifying colors.', 'duration': 52.083, 'max_score': 2405.483, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA2405483.jpg'}, {'end': 2506.648, 'src': 'embed', 'start': 2484.364, 'weight': 6, 'content': [{'end': 2492.826, 'text': 'Now, if you noticed earlier, when I was typing color names like dark blue and everything else here, that starts with dark,', 'start': 2484.364, 'duration': 8.462}, {'end': 2494.766, 'text': 'look at the hex codes over here to the right.', 'start': 2492.826, 'duration': 1.94}, {'end': 2499.807, 'text': 'Visual Studio Code is already helping show you all the different hexadecimal codes for these.', 'start': 2494.866, 'duration': 4.941}, {'end': 2506.648, 'text': 'So we can, of course, get those codes by typing color names if we want the code of a name.', 'start': 2500.447, 'duration': 6.201}], 'summary': 'Visual studio code displays hexadecimal codes for color names, aiding in coding efficiency.', 'duration': 22.284, 'max_score': 2484.364, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA2484364.jpg'}, {'end': 2701.268, 'src': 'embed', 'start': 2676.075, 'weight': 7, 'content': [{'end': 2681.899, 'text': "i'm not sure if there's enough contrast or not and we'll look at a contrast checker in just a few minutes.", 'start': 2676.075, 'duration': 5.824}, {'end': 2689.943, 'text': "let's go back to the visual studio code color palette, and as i talked about hsl here, i clicked again and we had hexadecimal.", 'start': 2681.899, 'duration': 8.044}, {'end': 2691.584, 'text': "i'm going to take this all the way up.", 'start': 2689.943, 'duration': 1.641}, {'end': 2701.268, 'text': 'hsl also has hsla, which adds the alpha channel, but hsl stands for hue, saturation and lightness.', 'start': 2691.584, 'duration': 9.684}], 'summary': 'Discussing hsl color model and its components in coding.', 'duration': 25.193, 'max_score': 2676.075, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA2676075.jpg'}], 'start': 1981.944, 'title': 'Css selectors and colors', 'summary': 'Emphasizes learning css selectors without using the important flag and introduces a specificity calculator. it also covers setting background color, choosing legible font colors, and understanding color codes and contrast, including rgba, hexadecimal, and hsl color codes.', 'chapters': [{'end': 2074.068, 'start': 1981.944, 'title': 'Css specificity calculator and importance of struggle', 'summary': 'Emphasizes the importance of struggling and learning css selectors without using the important flag, and introduces a specificity calculator to understand how selectors work and overrule each other, with examples demonstrating the scoring system.', 'duration': 92.124, 'highlights': ['The specificity calculator helps understand why one rule is being applied or why one selector overrules the other, with examples of scoring system like 001 for an element selector, 010 for a class, and 100 for an ID selector.', 'It emphasizes the importance of struggling and learning how to apply CSS selectors without using the important flag, as it leads to better learning outcomes.']}, {'end': 2361.135, 'start': 2074.068, 'title': 'Css colors basics', 'summary': 'Introduces css colors, demonstrating setting background color using color names and rgb values, choosing legible font colors, and overriding text color for specific elements.', 'duration': 287.067, 'highlights': ['Demonstrating setting background color using color names and RGB values The chapter guides on setting background color using color names and RGB values, including the demonstration of using color names like blue and papaya whip and RGB values for red, green, and blue text.', 'Choosing legible font colors The tutorial emphasizes the importance of choosing legible font colors to ensure readability, demonstrated by changing font colors to ensure legibility on different background colors like papaya whip.', 'Overriding text color for specific elements The tutorial illustrates the concept of overriding text color for specific elements, showing how to set blue text for paragraphs, overriding the color defined for the body, and demonstrating the cascade property.']}, {'end': 3036.623, 'start': 2361.295, 'title': 'Understanding color codes and contrast', 'summary': 'Explores the use of rgba, hexadecimal, and hsl color codes, including their values and how they impact transparency, with a focus on achieving optimal contrast using tools like coolers.co and webaim contrast checker.', 'duration': 675.328, 'highlights': ['The chapter covers the use of RGBA, hexadecimal, and HSL color codes, explaining their values and impact on transparency, and emphasizes the importance of achieving optimal contrast for accessibility.', 'The transcript explains how RGBA values range from 0 to 1, with 0 being completely transparent and 1 being fully opaque, impacting the transparency of elements like paragraphs.', 'It details how hexadecimal works similar to RGB, and how different combinations of values create various colors, and highlights the practical use of shorthand notations for color codes to represent specific colors.', 'The speaker demonstrates the use of the Visual Studio Code color palette, showcasing how it aids in selecting colors and generating corresponding hexadecimal codes, which can be used for specifying colors in the code.', 'The conversation introduces the HSL color model, delving into its components - hue, saturation, and lightness - and demonstrating how it can be used to pick colors and adjust their properties, emphasizing the importance of achieving optimal contrast for accessibility purposes.']}], 'duration': 1054.679, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA1981944.jpg', 'highlights': ['The specificity calculator helps understand why one rule is being applied or why one selector overrules the other, with examples of scoring system like 001 for an element selector, 010 for a class, and 100 for an ID selector.', 'It emphasizes the importance of struggling and learning how to apply CSS selectors without using the important flag, as it leads to better learning outcomes.', 'The chapter covers the use of RGBA, hexadecimal, and HSL color codes, explaining their values and impact on transparency, and emphasizes the importance of achieving optimal contrast for accessibility.', 'The transcript explains how RGBA values range from 0 to 1, with 0 being completely transparent and 1 being fully opaque, impacting the transparency of elements like paragraphs.', 'The chapter guides on setting background color using color names and RGB values, including the demonstration of using color names like blue and papaya whip and RGB values for red, green, and blue text.', 'Choosing legible font colors The tutorial emphasizes the importance of choosing legible font colors to ensure readability, demonstrated by changing font colors to ensure legibility on different background colors like papaya whip.', 'The speaker demonstrates the use of the Visual Studio Code color palette, showcasing how it aids in selecting colors and generating corresponding hexadecimal codes, which can be used for specifying colors in the code.', 'The conversation introduces the HSL color model, delving into its components - hue, saturation, and lightness - and demonstrating how it can be used to pick colors and adjust their properties, emphasizing the importance of achieving optimal contrast for accessibility purposes.', 'Overriding text color for specific elements The tutorial illustrates the concept of overriding text color for specific elements, showing how to set blue text for paragraphs, overriding the color defined for the body, and demonstrating the cascade property.']}, {'end': 4426.372, 'segs': [{'end': 3068.021, 'src': 'embed', 'start': 3037.043, 'weight': 0, 'content': [{'end': 3042.766, 'text': 'Legibility and accessibility are very important considerations as you pick colors for your web page.', 'start': 3037.043, 'duration': 5.723}, {'end': 3047.868, 'text': "Now, I'm going to give links to these resources in the description below this video as well.", 'start': 3043.146, 'duration': 4.722}, {'end': 3052.311, 'text': 'And what I suggest you do as a beginner is just play around with the different colors.', 'start': 3048.269, 'duration': 4.042}, {'end': 3056.773, 'text': 'Play around with the Visual Studio Code color picker or color palette here as well.', 'start': 3052.671, 'duration': 4.102}, {'end': 3060.936, 'text': 'and just kind of get comfortable with setting colors on your page.', 'start': 3057.373, 'duration': 3.563}, {'end': 3068.021, 'text': "And of course, always come back and check the contrast ratio and make sure you're meeting those minimum requirements for web pages.", 'start': 3061.016, 'duration': 7.005}], 'summary': 'Consider legibility and accessibility when selecting web page colors. experiment with different colors and check contrast ratio for minimum requirements.', 'duration': 30.978, 'max_score': 3037.043, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA3037043.jpg'}, {'end': 3152.321, 'src': 'embed', 'start': 3125.154, 'weight': 1, 'content': [{'end': 3131.296, 'text': "Let's just delete that and switch over to the MDN page for values and units.", 'start': 3125.154, 'duration': 6.142}, {'end': 3134.736, 'text': 'And we can see a chart here of absolute length units.', 'start': 3131.676, 'duration': 3.06}, {'end': 3140.358, 'text': 'And really, the only absolute length unit we will use commonly is pixels.', 'start': 3135.317, 'duration': 5.041}, {'end': 3142.838, 'text': 'And you can see here is the equivalency.', 'start': 3140.778, 'duration': 2.06}, {'end': 3145.899, 'text': "It's one pixel is equal to 1 96th of an inch.", 'start': 3142.918, 'duration': 2.981}, {'end': 3150.02, 'text': 'And really, one pixel, as you might guess, means one pixel on your screen.', 'start': 3146.439, 'duration': 3.581}, {'end': 3152.321, 'text': 'We abbreviate that with px.', 'start': 3150.58, 'duration': 1.741}], 'summary': 'Commonly, one pixel equals 1/96th of an inch, abbreviated as px.', 'duration': 27.167, 'max_score': 3125.154, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA3125154.jpg'}, {'end': 4409.946, 'src': 'heatmap', 'start': 3203.766, 'weight': 0.728, 'content': [{'end': 3211.449, 'text': "however, if i set that on the root element font size 16 pixels, we don't see a change here.", 'start': 3203.766, 'duration': 7.683}, {'end': 3218.332, 'text': 'but if i go into my settings in chrome, which you can do with the three dots, and then choose settings, once you launch that,', 'start': 3211.449, 'duration': 6.883}, {'end': 3221.593, 'text': "you'll be on a settings page and then you can choose appearance.", 'start': 3218.332, 'duration': 3.261}, {'end': 3224.006, 'text': 'You go to a font size.', 'start': 3222.605, 'duration': 1.401}, {'end': 3230.293, 'text': "user preference and medium is what most are on, but there's also other choices, from very small to very large.", 'start': 3224.006, 'duration': 6.287}, {'end': 3231.955, 'text': "I'll choose very large.", 'start': 3230.734, 'duration': 1.221}, {'end': 3235.479, 'text': 'We definitely see a change on the settings page right when I do that.', 'start': 3232.155, 'duration': 3.324}, {'end': 3239.502, 'text': "Back in our document, we don't see a change.", 'start': 3236.259, 'duration': 3.243}, {'end': 3241.002, 'text': "it didn't change at all.", 'start': 3239.502, 'duration': 1.5}, {'end': 3243.523, 'text': "i can refresh and it won't make any difference.", 'start': 3241.002, 'duration': 2.521}, {'end': 3249.946, 'text': "it did not change our font size with the user settings, and that's because we took that choice away when we said no,", 'start': 3243.523, 'duration': 6.423}, {'end': 3252.907, 'text': 'these absolutely must be 16 pixels here.', 'start': 3249.946, 'duration': 2.961}, {'end': 3254.547, 'text': "that's our root size.", 'start': 3252.907, 'duration': 1.64}, {'end': 3262.991, 'text': 'but if i delete this and we just let the browser handle the default size, instantly all of our font gets bigger and our user settings take over.', 'start': 3254.547, 'duration': 8.444}, {'end': 3265.792, 'text': "We don't want to take that choice away from the users.", 'start': 3263.371, 'duration': 2.421}, {'end': 3271.315, 'text': "So we don't want to use an absolute font size, such as a pixel setting.", 'start': 3266.213, 'duration': 5.102}, {'end': 3273.196, 'text': "So I'll go ahead and delete that.", 'start': 3271.695, 'duration': 1.501}, {'end': 3281.022, 'text': 'So where would we want to use pixels and absolute value? There are other settings that we might want an absolute value for.', 'start': 3273.736, 'duration': 7.286}, {'end': 3287.189, 'text': "So I'll select the H1 that I have here and I'm going to set a border on it and I'll set it to two pixels.", 'start': 3281.102, 'duration': 6.087}, {'end': 3293.116, 'text': "And then just so we can see it better, I'll set it to dashed and red so it really stands out and save.", 'start': 3287.81, 'duration': 5.306}, {'end': 3296.417, 'text': 'And now we can see this border around our H1 element.', 'start': 3293.636, 'duration': 2.781}, {'end': 3300.178, 'text': 'And we have this absolute value for the pixel width.', 'start': 3296.917, 'duration': 3.261}, {'end': 3304.979, 'text': 'And no matter what happens to the page on a small viewport large viewport,', 'start': 3300.698, 'duration': 4.281}, {'end': 3311.101, 'text': "whether it's a mobile device or a large desktop screen this will remain as two pixels.", 'start': 3304.979, 'duration': 6.122}, {'end': 3312.761, 'text': "And that's OK in this instance.", 'start': 3311.281, 'duration': 1.48}, {'end': 3314.702, 'text': "Let's go back to our MDN page.", 'start': 3312.981, 'duration': 1.721}, {'end': 3321.204, 'text': "And now that we've covered the only pixel size that we were going to cover, and that was down here on our pixel chart,", 'start': 3315.382, 'duration': 5.822}, {'end': 3323.785, 'text': "we're going to now cover percentage.", 'start': 3321.204, 'duration': 2.581}, {'end': 3326.186, 'text': 'And we see that up here in a different chart.', 'start': 3324.085, 'duration': 2.101}, {'end': 3329.067, 'text': 'This is a numbers, lengths, and percentages chart here.', 'start': 3326.226, 'duration': 2.841}, {'end': 3331.508, 'text': "So we're going to use percentage.", 'start': 3329.768, 'duration': 1.74}, {'end': 3337.01, 'text': 'And it says it represents a fraction of some other value, so 50% of something else.', 'start': 3331.608, 'duration': 5.402}, {'end': 3341.112, 'text': 'Percentages are always relative to another quantity.', 'start': 3337.47, 'duration': 3.642}, {'end': 3343.473, 'text': "So that's a consideration as well.", 'start': 3341.632, 'duration': 1.841}, {'end': 3348.976, 'text': "Now, when we set percentages, we wouldn't normally do that with a font size either.", 'start': 3344.133, 'duration': 4.843}, {'end': 3353.078, 'text': "So let's set a percentage for a width on our H1.", 'start': 3349.096, 'duration': 3.982}, {'end': 3357.281, 'text': 'And now by default, an H1 is a block level element.', 'start': 3353.319, 'duration': 3.962}, {'end': 3360.023, 'text': 'And so by default, it has a width of 100%.', 'start': 3357.401, 'duration': 2.622}, {'end': 3363.285, 'text': "So if we do that, we're not really changing anything.", 'start': 3360.023, 'duration': 3.262}, {'end': 3366.667, 'text': "And now it's just 100% as expected.", 'start': 3363.765, 'duration': 2.902}, {'end': 3368.408, 'text': "So let's go ahead and change that.", 'start': 3366.767, 'duration': 1.641}, {'end': 3370.029, 'text': 'It looks at the parent though.', 'start': 3368.588, 'duration': 1.441}, {'end': 3374.991, 'text': "It's taking up 100% of the parent's width or whatever was given to it.", 'start': 3370.049, 'duration': 4.942}, {'end': 3379.273, 'text': 'So whatever it has available to it, it took up 100%.', 'start': 3375.552, 'duration': 3.721}, {'end': 3382.655, 'text': 'And now this is only taking up 50%.', 'start': 3379.273, 'duration': 3.382}, {'end': 3385.236, 'text': "So let's look at the parent for the H1.", 'start': 3382.655, 'duration': 2.581}, {'end': 3387.257, 'text': 'It is inside of a header element.', 'start': 3385.256, 'duration': 2.001}, {'end': 3395.32, 'text': 'So if we take this header element and we set it to a width of 50%, then we should see a difference.', 'start': 3387.877, 'duration': 7.443}, {'end': 3397.601, 'text': "And yes, it's even smaller.", 'start': 3395.7, 'duration': 1.901}, {'end': 3403.823, 'text': "So we're taking up only 50% of the header element, which is taking up 50% of the page.", 'start': 3397.761, 'duration': 6.062}, {'end': 3407.624, 'text': 'So really, this H1 would be 25% of the page.', 'start': 3403.923, 'duration': 3.701}, {'end': 3414.406, 'text': "Likewise, if we change this to 100 for the header, then we'll see our H1 takes up 50% of the page.", 'start': 3408.084, 'duration': 6.322}, {'end': 3423.611, 'text': "So that's the thing to remember about setting a percentage for the width, is that you are putting it relative to the parent.", 'start': 3415.626, 'duration': 7.985}, {'end': 3425.972, 'text': "It's only using what it has available to it.", 'start': 3423.751, 'duration': 2.221}, {'end': 3433.076, 'text': 'If the header is 100%, then the H1, that is the child, has 100% of the page available to it.', 'start': 3426.532, 'duration': 6.544}, {'end': 3442.787, 'text': "However, if the header is smaller, let's put it at 80%, Then we're only using up 50% of 80% of the page.", 'start': 3433.156, 'duration': 9.631}, {'end': 3450.597, 'text': "And once again, if you want an element that is a block level element to take up 100% of the width of the page, you don't really need to set it,", 'start': 3443.068, 'duration': 7.529}, {'end': 3452.96, 'text': 'because that is the default value already.', 'start': 3450.597, 'duration': 2.363}, {'end': 3462.748, 'text': "So now we're taking up half of the page by setting the H1 to 50% because it is 50% of the full 100% width.", 'start': 3453.401, 'duration': 9.347}, {'end': 3466.53, 'text': 'And you may see other uses for percentages as well,', 'start': 3462.948, 'duration': 3.582}, {'end': 3474.875, 'text': 'but you commonly see them to set the sizing of different elements as far as the width of the page or sometimes the height.', 'start': 3466.53, 'duration': 8.345}, {'end': 3480.397, 'text': "But also we don't need to set the height because it will grow as the content grows.", 'start': 3474.975, 'duration': 5.422}, {'end': 3488.119, 'text': "I'm going to go back to my settings and set it from very large back to medium, which is where most have their browser default to.", 'start': 3480.617, 'duration': 7.502}, {'end': 3490.94, 'text': 'And now when we look at our page, the font is smaller.', 'start': 3488.139, 'duration': 2.801}, {'end': 3500.305, 'text': "But let's talk about another relative unit, and this one does show on the mdn page in the chart down here under relative length units,", 'start': 3491.44, 'duration': 8.865}, {'end': 3501.706, 'text': "and it's the rem.", 'start': 3500.305, 'duration': 1.401}, {'end': 3508.37, 'text': 'this is the unit that will typically use for font size and it relates to the font size of the root element.', 'start': 3501.706, 'duration': 6.664}, {'end': 3513.633, 'text': "now i already suggested we shouldn't set a font size on the root element,", 'start': 3508.37, 'duration': 5.263}, {'end': 3523.966, 'text': "so for our html element we typically wouldn't set a font size in here because we want to let the browser handle that and set the default font size.", 'start': 3513.633, 'duration': 10.333}, {'end': 3527.291, 'text': "So let's not do this for the HTML element.", 'start': 3524.407, 'duration': 2.884}, {'end': 3529.114, 'text': "I'll just go ahead and cut this.", 'start': 3527.391, 'duration': 1.723}, {'end': 3530.596, 'text': "I'm going to put it below the H1.", 'start': 3529.274, 'duration': 1.322}, {'end': 3535.44, 'text': "And I'm going to set a font size for our paragraphs instead.", 'start': 3531.437, 'duration': 4.003}, {'end': 3540.565, 'text': "And this font size, if we set it to one rem, that's already the default.", 'start': 3535.461, 'duration': 5.104}, {'end': 3542.266, 'text': "So it shouldn't change anything.", 'start': 3540.625, 'duration': 1.641}, {'end': 3544.228, 'text': 'And we see the size is the same.', 'start': 3542.406, 'duration': 1.822}, {'end': 3550.894, 'text': 'So it says one root element, which the root element is the default font size set by the browser.', 'start': 3544.368, 'duration': 6.526}, {'end': 3553.136, 'text': "The EM doesn't stand for element, by the way.", 'start': 3551.114, 'duration': 2.022}, {'end': 3554.197, 'text': "That's M.", 'start': 3553.176, 'duration': 1.021}, {'end': 3557.88, 'text': 'So we have one root EM or one root M.', 'start': 3554.197, 'duration': 3.683}, {'end': 3561.922, 'text': 'but that means the root size that is defined.', 'start': 3558.4, 'duration': 3.522}, {'end': 3565.585, 'text': "And in our case, when we don't set it, then it's set by the browser.", 'start': 3562.103, 'duration': 3.482}, {'end': 3567.846, 'text': 'So hopefully that clears up some confusion.', 'start': 3565.845, 'duration': 2.001}, {'end': 3572.169, 'text': "But if we put in two Ms, then it's going to double the default size.", 'start': 3568.307, 'duration': 3.862}, {'end': 3579.014, 'text': "And now we're probably at 36 pixels right here because most browsers default to that 16 pixel size.", 'start': 3572.65, 'duration': 6.364}, {'end': 3582.136, 'text': 'So you can see how this relates back to the root.', 'start': 3579.634, 'duration': 2.502}, {'end': 3587.54, 'text': 'Now if we set a font size on the parent, because our paragraph is in a main element.', 'start': 3582.676, 'duration': 4.864}, {'end': 3596.621, 'text': "If we set this font size to 2rem also, it doesn't change the paragraph font size at all,", 'start': 3588.558, 'duration': 8.063}, {'end': 3601.522, 'text': 'because the font set here is not relative to the main element.', 'start': 3596.621, 'duration': 4.901}, {'end': 3603.083, 'text': "It's not relative to the parent.", 'start': 3601.562, 'duration': 1.521}, {'end': 3606.624, 'text': "It's relative to the root, which is defined by the browser.", 'start': 3603.183, 'duration': 3.441}, {'end': 3610.345, 'text': "So it's always going to look back to that default root size.", 'start': 3607.144, 'duration': 3.201}, {'end': 3615.527, 'text': 'If we had set a font size in the HTML element, it would be looking at that.', 'start': 3610.565, 'duration': 4.962}, {'end': 3618.27, 'text': "But without setting it, it's the default size.", 'start': 3616.147, 'duration': 2.123}, {'end': 3627.064, 'text': "So what happens, though, if we switch these units? If we're not using REM, if we're using M, just E-M.", 'start': 3618.851, 'duration': 8.213}, {'end': 3631.49, 'text': "So now I'll delete the R there and save.", 'start': 3627.324, 'duration': 4.166}, {'end': 3633.512, 'text': 'Oh boy, that got a lot bigger.', 'start': 3632.151, 'duration': 1.361}, {'end': 3638.895, 'text': "Well, here's the problem that we would have if we were using M's for our font size.", 'start': 3633.792, 'duration': 5.103}, {'end': 3640.175, 'text': 'It gets amplified.', 'start': 3639.055, 'duration': 1.12}, {'end': 3645.818, 'text': 'So our main element was looking at the root, so it doubled that to 32 pixels.', 'start': 3640.736, 'duration': 5.082}, {'end': 3653.865, 'text': 'And then using two Ms is looking at the main element, which is the parent of the paragraph.', 'start': 3647.279, 'duration': 6.586}, {'end': 3655.506, 'text': 'And so then it doubled that.', 'start': 3654.325, 'duration': 1.181}, {'end': 3657.328, 'text': "So now we're at 64 pixels.", 'start': 3655.566, 'duration': 1.762}, {'end': 3659.329, 'text': "So that's what happens.", 'start': 3657.948, 'duration': 1.381}, {'end': 3667.576, 'text': "And you can get unintended consequences if you just use Ms. And that's why using the rim and always looking at the root definitely helps.", 'start': 3659.449, 'duration': 8.127}, {'end': 3673.961, 'text': 'Because the way we can get confused, for example, is if I remove this setting on the main and I save.', 'start': 3667.676, 'duration': 6.285}, {'end': 3681.866, 'text': "Well, now this is also looking at the root, because there's no other font size saved, and so we think, okay, we're good to use just ems,", 'start': 3674.622, 'duration': 7.244}, {'end': 3691.39, 'text': "but the problem is if somewhere along the way in our project and we have many elements we're styling, we set another font size on a parent element,", 'start': 3681.866, 'duration': 9.524}, {'end': 3693.911, 'text': "suddenly it's amplified when we use ems.", 'start': 3691.39, 'duration': 2.521}, {'end': 3700.497, 'text': "So I'm going to switch this back to two rims and get closer to the size we'd want, and it's going to look at the root.", 'start': 3694.132, 'duration': 6.365}, {'end': 3706.324, 'text': 'So when would we use ems instead of rems? We know we want to use rems on font size.', 'start': 3700.977, 'duration': 5.347}, {'end': 3711.249, 'text': "Well, when we set the font size on an element, em doesn't look at the parent.", 'start': 3706.884, 'duration': 4.365}, {'end': 3713.191, 'text': 'It looks at the element itself.', 'start': 3711.329, 'duration': 1.862}, {'end': 3718.255, 'text': "And so we could use it for something like margin or padding, which I know we haven't covered,", 'start': 3713.832, 'duration': 4.423}, {'end': 3722.038, 'text': 'and we will in more detail when we look at the CSS box model.', 'start': 3718.255, 'duration': 3.783}, {'end': 3724.68, 'text': "But I'm going to go ahead and do that here for the H1.", 'start': 3722.378, 'duration': 2.302}, {'end': 3729.444, 'text': "So if I set a font size for the H1, and let's make it bigger.", 'start': 3724.86, 'duration': 4.584}, {'end': 3731.846, 'text': "Let's make it 3rem here.", 'start': 3729.484, 'duration': 2.362}, {'end': 3732.946, 'text': 'And we save.', 'start': 3732.326, 'duration': 0.62}, {'end': 3737.149, 'text': 'We instantly have a bigger font size on the H1.', 'start': 3733.407, 'duration': 3.742}, {'end': 3740.272, 'text': 'But now I could set the padding.', 'start': 3737.65, 'duration': 2.622}, {'end': 3748.603, 'text': 'to 1m, which is the equivalent of the font size of that element.', 'start': 3741.536, 'duration': 7.067}, {'end': 3750.826, 'text': 'So now this would also be three rims.', 'start': 3748.703, 'duration': 2.123}, {'end': 3753.208, 'text': 'So it should be a pretty good size padding.', 'start': 3750.866, 'duration': 2.342}, {'end': 3754.59, 'text': 'Yes, we have a lot of padding.', 'start': 3753.228, 'duration': 1.362}, {'end': 3756.031, 'text': "So I probably don't want that much.", 'start': 3754.63, 'duration': 1.401}, {'end': 3760.055, 'text': 'Maybe I want to drop it to 0.5.', 'start': 3756.111, 'duration': 3.944}, {'end': 3761.837, 'text': "And now that's more reasonable.", 'start': 3760.055, 'duration': 1.782}, {'end': 3763.418, 'text': 'That looks pretty good for a heading there.', 'start': 3761.857, 'duration': 1.561}, {'end': 3767.261, 'text': 'So we added that padding, which is inside this border.', 'start': 3763.498, 'duration': 3.763}, {'end': 3769.162, 'text': 'It added extra padding.', 'start': 3767.741, 'duration': 1.421}, {'end': 3774.847, 'text': 'And that is essentially half of three rims, which would be one and a half.', 'start': 3769.723, 'duration': 5.124}, {'end': 3783.874, 'text': 'And if we relate all this back to the default 16 pixel size, one and a half of those would be 24 pixels, whereas three rims would be 48 pixels.', 'start': 3775.067, 'duration': 8.807}, {'end': 3794.699, 'text': 'Another instance where we may use Ms instead of Rems would be for the padding or margin setting on, say, a button.', 'start': 3787.737, 'duration': 6.962}, {'end': 3797.92, 'text': 'If we created a button, we would have text in the button.', 'start': 3794.919, 'duration': 3.001}, {'end': 3806.923, 'text': 'We could set the font size for that button with Rem, but then we could go ahead and set the padding and or margin with the M units.', 'start': 3797.98, 'duration': 8.943}, {'end': 3810.385, 'text': "Let's go back to the MDN page and look at our chart.", 'start': 3807.243, 'duration': 3.142}, {'end': 3815.008, 'text': "One other relative unit I'd like to look at today is the CH.", 'start': 3810.785, 'duration': 4.223}, {'end': 3816.509, 'text': 'That stands for character.', 'start': 3815.108, 'duration': 1.401}, {'end': 3824.533, 'text': 'And we have the advanced measure width of the glyph 0, which essentially means the character 0 of the elements font.', 'start': 3817.009, 'duration': 7.524}, {'end': 3829.016, 'text': "So whatever font we're using, it's the measurement of 0.", 'start': 3824.573, 'duration': 4.443}, {'end': 3831.397, 'text': 'And that helps us determine the character width.', 'start': 3829.016, 'duration': 2.381}, {'end': 3833.679, 'text': 'And that kind of comes from print.', 'start': 3831.778, 'duration': 1.901}, {'end': 3842.069, 'text': 'uh, magazine, newspaper layout and those sort of things where you only want to have a certain width based on the character size.', 'start': 3834.299, 'duration': 7.77}, {'end': 3846.914, 'text': 'so in this example we have a font size here for our paragraph.', 'start': 3842.069, 'duration': 4.845}, {'end': 3857.626, 'text': "i'm going to go ahead and set the width of the paragraph and let's say we don't want any more than an estimated 40 characters per line before the line wraps in the paragraph.", 'start': 3846.914, 'duration': 10.712}, {'end': 3858.767, 'text': 'if we set that width,', 'start': 3857.626, 'duration': 1.141}, {'end': 3868.878, 'text': "notice it now has approximately 40 characters before the line wraps and that kind of helps us define columns if we're doing that in some type of layout.", 'start': 3858.767, 'duration': 10.111}, {'end': 3876.842, 'text': "now we've acknowledged that the browser sets a default font size, but it actually sets a lot of different default styles as well.", 'start': 3868.878, 'duration': 7.964}, {'end': 3882.683, 'text': "So let's go ahead and right click on this H1 heading and choose Inspect.", 'start': 3877.282, 'duration': 5.401}, {'end': 3886.324, 'text': 'Or you could press Control Shift and the letter I.', 'start': 3882.883, 'duration': 3.441}, {'end': 3889.505, 'text': "Either way, what we're doing is opening up the DevTools.", 'start': 3886.324, 'duration': 3.181}, {'end': 3892.186, 'text': "It may scrunch our page here a little bit, but that's OK.", 'start': 3889.605, 'duration': 2.581}, {'end': 3897.447, 'text': 'If I highlight this H1, now it is showing several things about the page.', 'start': 3892.206, 'duration': 5.241}, {'end': 3900.048, 'text': "It's showing that there's a large margin.", 'start': 3898.047, 'duration': 2.001}, {'end': 3902.53, 'text': "That's going to be the orange when I highlight over.", 'start': 3900.308, 'duration': 2.222}, {'end': 3906.772, 'text': "It's showing the green area, and that's padding that we set.", 'start': 3903.25, 'duration': 3.522}, {'end': 3910.875, 'text': 'And then the blue area is the H1 itself right here.', 'start': 3907.373, 'duration': 3.502}, {'end': 3915.658, 'text': 'So we see all of those things in DevTools when we hover over these elements.', 'start': 3911.015, 'duration': 4.643}, {'end': 3918.54, 'text': "And by the way, I'm on the Elements tab of DevTools.", 'start': 3915.778, 'duration': 2.762}, {'end': 3923.183, 'text': "And then if you don't have your DevTools on the right, you can click the three dots here.", 'start': 3919.18, 'duration': 4.003}, {'end': 3925.065, 'text': "And there's a dock side setting.", 'start': 3923.584, 'duration': 1.481}, {'end': 3926.606, 'text': "Maybe it's on the bottom for you.", 'start': 3925.225, 'duration': 1.381}, {'end': 3931.129, 'text': 'But if you want it on the right, you can choose dock to the right just like I have here.', 'start': 3926.686, 'duration': 4.443}, {'end': 3934.811, 'text': 'So we can really see more about all of these elements in DevTools.', 'start': 3931.569, 'duration': 3.242}, {'end': 3939.255, 'text': 'What we can also see as we come down here are the styles.', 'start': 3935.292, 'duration': 3.963}, {'end': 3944.976, 'text': 'And then we see the H1 and the styles that I have set on the H1 element.', 'start': 3939.975, 'duration': 5.001}, {'end': 3947.696, 'text': 'But underneath that, we see some others as well.', 'start': 3945.356, 'duration': 2.34}, {'end': 3949.877, 'text': 'And it says user agent style sheet.', 'start': 3947.736, 'duration': 2.141}, {'end': 3955.518, 'text': "This is what the browser is setting on the H1 element by default that we don't have to.", 'start': 3950.237, 'duration': 5.281}, {'end': 3958.739, 'text': 'And you can see we have put in a different font size.', 'start': 3956.058, 'duration': 2.681}, {'end': 3962.199, 'text': 'So we have overridden the font size for the H1 element.', 'start': 3958.779, 'duration': 3.42}, {'end': 3963.539, 'text': 'So it has crossed that out.', 'start': 3962.239, 'duration': 1.3}, {'end': 3970.921, 'text': 'Everything else here, the display block, and the different margins and even the font weight are applied from that user style sheet.', 'start': 3963.96, 'duration': 6.961}, {'end': 3976.022, 'text': 'So those are default styles and we can override them just like I did with the font size.', 'start': 3971.001, 'duration': 5.021}, {'end': 3981.543, 'text': 'And before we get into these next two relative units, we are going to override some of these.', 'start': 3976.382, 'duration': 5.161}, {'end': 3990.905, 'text': "So what I want to do is start a CSS reset, which I'll talk about more in the tutorial of the CSS box model as well.", 'start': 3981.823, 'duration': 9.082}, {'end': 4000.511, 'text': "But I'm going to use the selector that selects all elements again our wildcard selector, and here I'm going to set the margin to zero,", 'start': 3991.065, 'duration': 9.446}, {'end': 4008.237, 'text': "the padding to zero, and one other setting that says box sizing, and I'm going to set that to border box.", 'start': 4000.511, 'duration': 7.726}, {'end': 4012.68, 'text': 'And when I save, Notice all the padding and margin is gone.', 'start': 4008.337, 'duration': 4.343}, {'end': 4016.102, 'text': 'Now our H1 is right up in the left corner.', 'start': 4012.76, 'duration': 3.342}, {'end': 4019.764, 'text': "We don't have any space between the paragraph and the H1.", 'start': 4016.422, 'duration': 3.342}, {'end': 4024.828, 'text': 'We got rid of all of those default margins and paddings that were creating that extra space.', 'start': 4019.804, 'duration': 5.024}, {'end': 4030.751, 'text': "But that's important when we go back to the MDN page and we look at these next two relative units.", 'start': 4025.208, 'duration': 5.543}, {'end': 4034.414, 'text': "We have viewport width, which is 1% of the viewport's width.", 'start': 4030.831, 'duration': 3.583}, {'end': 4038.097, 'text': "and viewport height, which is 1% of the viewport's height.", 'start': 4035.134, 'duration': 2.963}, {'end': 4040.498, 'text': "So let's look at how we can apply those.", 'start': 4038.517, 'duration': 1.981}, {'end': 4046.023, 'text': "But if we had that extra margin and padding there, we wouldn't be able to see the detail that I want to show.", 'start': 4040.999, 'duration': 5.024}, {'end': 4056.792, 'text': "OK, I'm going to take our main element here and set a width on it with our viewport width units just so we can see what it is capable of.", 'start': 4046.043, 'duration': 10.749}, {'end': 4057.853, 'text': "And so I'll do that.", 'start': 4056.972, 'duration': 0.881}, {'end': 4061.435, 'text': "I also need to set a background color just so we can see what we're doing better.", 'start': 4057.973, 'duration': 3.462}, {'end': 4066.358, 'text': "And I'll set this to, let's say sky blue and save.", 'start': 4062.717, 'duration': 3.641}, {'end': 4073.381, 'text': 'So now we can see the width of our paragraph is actually wider than the width of our main element.', 'start': 4066.859, 'duration': 6.522}, {'end': 4082.284, 'text': 'And so it is overflowing that main element, but we have actually set the main element to 50% of the width of the full page.', 'start': 4073.521, 'duration': 8.763}, {'end': 4090.227, 'text': "And you can see that's matching the 50% width that we have up here, but I'm using the viewport width units right here.", 'start': 4082.624, 'duration': 7.603}, {'end': 4099.591, 'text': 'There may be times when you want to use the viewport width, but most of the time I find myself using the percentage and getting the same result.', 'start': 4090.387, 'duration': 9.204}, {'end': 4103.255, 'text': "And I'll give an example where the percentage is actually a better choice.", 'start': 4099.671, 'duration': 3.584}, {'end': 4108.917, 'text': "So let me remove that 50% and I'll remove this background color that's making our page look bad.", 'start': 4103.495, 'duration': 5.422}, {'end': 4116.425, 'text': "And we'll come back up to the top and underneath our select all, I'm going to choose the body element here.", 'start': 4108.938, 'duration': 7.487}, {'end': 4119.569, 'text': "And, as I'd said before, we don't need to set a width of 100%,", 'start': 4116.444, 'duration': 3.125}, {'end': 4128.537, 'text': "but I'll put this in and I'm going to set this to 100 viewport width units instead and save.", 'start': 4119.569, 'duration': 8.968}, {'end': 4130.56, 'text': "Now we don't really notice a change.", 'start': 4128.939, 'duration': 1.621}, {'end': 4133.863, 'text': "And I have seen this on pages, and I've even done it myself.", 'start': 4131.18, 'duration': 2.683}, {'end': 4135.665, 'text': 'But I figured out the problem.', 'start': 4133.984, 'duration': 1.681}, {'end': 4144.894, 'text': 'If we have a width of 100 viewport width units, we do have a problem when the content, the vertical content, outgrows the page.', 'start': 4136.145, 'duration': 8.749}, {'end': 4146.036, 'text': "And I'll show you why.", 'start': 4144.995, 'duration': 1.041}, {'end': 4147.937, 'text': 'So I need to go back to the HTML.', 'start': 4146.136, 'duration': 1.801}, {'end': 4152.381, 'text': "And in the HTML, I'm going to quickly add some more content.", 'start': 4148.698, 'duration': 3.683}, {'end': 4156.184, 'text': "So I'll say paragraph times 10.", 'start': 4152.481, 'duration': 3.703}, {'end': 4159.527, 'text': "And we'll do this with some just sample lorem text.", 'start': 4156.184, 'duration': 3.343}, {'end': 4160.888, 'text': "That's an eminent abbreviation.", 'start': 4159.567, 'duration': 1.321}, {'end': 4164.191, 'text': 'So when I press Tab, it adds all those extra paragraphs.', 'start': 4161.389, 'duration': 2.802}, {'end': 4165.392, 'text': 'And Save.', 'start': 4164.812, 'duration': 0.58}, {'end': 4167.314, 'text': "Now we've got lots of content here.", 'start': 4165.452, 'duration': 1.862}, {'end': 4169.095, 'text': 'And now we have a problem.', 'start': 4167.934, 'duration': 1.161}, {'end': 4170.636, 'text': "And here's the problem.", 'start': 4169.475, 'duration': 1.161}, {'end': 4175.158, 'text': 'our scroll bar showed up on the right, which is good.', 'start': 4171.617, 'duration': 3.541}, {'end': 4177.399, 'text': 'We need that to see all of this content.', 'start': 4175.359, 'duration': 2.04}, {'end': 4182.182, 'text': 'But what also happened is we had a scroll bar show up down here on the bottom.', 'start': 4177.92, 'duration': 4.262}, {'end': 4191.506, 'text': 'And that is because our viewport width, when we set it to 100, as we did on the body right here, does not account for this scroll bar on the right.', 'start': 4182.863, 'duration': 8.643}, {'end': 4198.03, 'text': 'So as soon as this scroll bar on the right shows up, and it shows up when our content outgrows our height.', 'start': 4191.807, 'duration': 6.223}, {'end': 4202.553, 'text': 'So when we need to scroll to see the content is when this shows up as it should.', 'start': 4198.63, 'duration': 3.923}, {'end': 4209.258, 'text': "But then that little extra bit that we can't see creates this scroll bar so we can see it.", 'start': 4203.113, 'duration': 6.145}, {'end': 4210.198, 'text': "And that's annoying.", 'start': 4209.418, 'duration': 0.78}, {'end': 4213.741, 'text': "And most developers don't like that horizontal scroll bar showing up.", 'start': 4210.238, 'duration': 3.503}, {'end': 4219.523, 'text': 'So if you were to set the width, 100% would be much more desirable,', 'start': 4214.401, 'duration': 5.122}, {'end': 4224.005, 'text': 'because now we still get the scroll bar here where we can scroll up and down vertically.', 'start': 4219.523, 'duration': 4.482}, {'end': 4228.127, 'text': "We do not have a scroll bar on the bottom, and we don't usually want that.", 'start': 4224.585, 'duration': 3.542}, {'end': 4236.03, 'text': "But overall, as I'd mentioned before, we don't even need to set 100% width on the body as it should default to that anyway.", 'start': 4228.527, 'duration': 7.503}, {'end': 4242.113, 'text': "I'm going to jump back to the HTML and go ahead and undo all of that extra content we added.", 'start': 4236.15, 'duration': 5.963}, {'end': 4243.474, 'text': 'and save.', 'start': 4242.893, 'duration': 0.581}, {'end': 4245.936, 'text': "So we're back to our normal content for the page.", 'start': 4243.514, 'duration': 2.422}, {'end': 4248.438, 'text': "Let's go back to style as well.", 'start': 4246.556, 'duration': 1.882}, {'end': 4251.541, 'text': "And let's right click once again on the page.", 'start': 4249.159, 'duration': 2.382}, {'end': 4254.243, 'text': 'And I just kind of, I think I selected the paragraph here.', 'start': 4251.701, 'duration': 2.542}, {'end': 4258.027, 'text': 'So when DevTools opens up, it should be on the paragraph.', 'start': 4254.283, 'duration': 3.744}, {'end': 4260.028, 'text': "And we'll see that here in just a second.", 'start': 4258.347, 'duration': 1.681}, {'end': 4261.81, 'text': "yep, i'm on the paragraph.", 'start': 4260.689, 'duration': 1.121}, {'end': 4263.631, 'text': "now let's highlight the body.", 'start': 4261.81, 'duration': 1.821}, {'end': 4266.653, 'text': 'notice the body is not the full height of the page.', 'start': 4263.631, 'duration': 3.022}, {'end': 4269.275, 'text': 'it only grows with the content.', 'start': 4266.653, 'duration': 2.622}, {'end': 4277.761, 'text': "but sometimes we want a body element that is the full height of the page, even if we don't have enough content to do that.", 'start': 4269.275, 'duration': 8.486}, {'end': 4283.924, 'text': "and we can do that with the viewport height unit and i'm going to do that over here in our code.", 'start': 4277.761, 'duration': 6.163}, {'end': 4285.845, 'text': "i'll choose the body element,", 'start': 4283.924, 'duration': 1.921}, {'end': 4294.047, 'text': "but i don't want to set height because that would also limit it to 100 vh and then we could outgrow that if our content were to outgrow.", 'start': 4285.845, 'duration': 8.202}, {'end': 4300.068, 'text': 'what i want to do is set the min height to 100 vh and save,', 'start': 4294.047, 'duration': 6.021}, {'end': 4305.37, 'text': 'and now that will still allow the body to grow with the content if it outgrows the viewport.', 'start': 4300.068, 'duration': 5.302}, {'end': 4310.411, 'text': "but at the same time it's now the full page and there could be instances where you want that.", 'start': 4305.37, 'duration': 5.041}, {'end': 4313.672, 'text': "Let's move on to the CSS box model.", 'start': 4311.57, 'duration': 2.102}, {'end': 4316.955, 'text': "Today, you'll learn that everything in CSS is a box.", 'start': 4314.032, 'duration': 2.923}, {'end': 4321.158, 'text': "But before we finish, I'll show you how to turn a box into a circle if you want to.", 'start': 4317.175, 'duration': 3.983}, {'end': 4322.519, 'text': "So let's get started.", 'start': 4321.618, 'duration': 0.901}, {'end': 4324.901, 'text': 'On the left, I have Visual Studio Code.', 'start': 4322.96, 'duration': 1.941}, {'end': 4327.483, 'text': 'And I have the code from the last tutorial.', 'start': 4325.301, 'duration': 2.182}, {'end': 4329.205, 'text': "We'll modify that in just a second.", 'start': 4327.523, 'duration': 1.682}, {'end': 4335.446, 'text': 'On the right, I have a basic web page, once again, with an H1 header and a paragraph.', 'start': 4329.725, 'duration': 5.721}, {'end': 4338.687, 'text': "And I'm using the live server extension.", 'start': 4336.067, 'duration': 2.62}, {'end': 4345.509, 'text': 'So any changes I make in the CSS and when I save the file will immediately show then in the web page.', 'start': 4338.727, 'duration': 6.782}, {'end': 4349.93, 'text': 'OK, so everything we have over here except the H1 has got to go.', 'start': 4346.009, 'duration': 3.921}, {'end': 4353.151, 'text': "So I'm going to delete everything above and below.", 'start': 4350.03, 'duration': 3.121}, {'end': 4355.812, 'text': 'and leave the styles for the H1.', 'start': 4353.991, 'duration': 1.821}, {'end': 4357.013, 'text': 'And we can now save.', 'start': 4355.852, 'duration': 1.161}, {'end': 4358.414, 'text': 'And we see those changes.', 'start': 4357.233, 'duration': 1.181}, {'end': 4361.597, 'text': 'So our paragraph text has gotten smaller.', 'start': 4358.514, 'duration': 3.083}, {'end': 4368.882, 'text': 'And everything else is pretty much the same, except we do now have the default styles from the browser again.', 'start': 4362.377, 'duration': 6.505}, {'end': 4371.944, 'text': "And we'll get back to that CSS reset in just a bit.", 'start': 4368.922, 'duration': 3.022}, {'end': 4374.566, 'text': 'But right now, we want to look at this box model.', 'start': 4372.365, 'duration': 2.201}, {'end': 4379.55, 'text': "And we've already drawn a box by putting a border around our H1 element.", 'start': 4374.866, 'duration': 4.684}, {'end': 4382.272, 'text': 'We can see this border here defined with shorthand.', 'start': 4379.59, 'duration': 2.682}, {'end': 4386.094, 'text': "And we'll get into what all of that means in just a second, too.", 'start': 4382.472, 'duration': 3.622}, {'end': 4394.578, 'text': 'But what I want to do first is drag our Visual Studio Code over as far as I possibly can and give us some more room in the browser,', 'start': 4386.694, 'duration': 7.884}, {'end': 4396.299, 'text': "because we're going to open up DevTools.", 'start': 4394.578, 'duration': 1.721}, {'end': 4401.882, 'text': "So once we do that, you can press Shift-Alt, or I'm sorry, not Shift-Alt.", 'start': 4396.84, 'duration': 5.042}, {'end': 4406.345, 'text': 'It is Control-Shift, I believe, and the letter I to open DevTools.', 'start': 4402.042, 'duration': 4.303}, {'end': 4409.946, 'text': "And if that's not working, then you should be able to.", 'start': 4407.445, 'duration': 2.501}], 'summary': 'The transcript covers the usage of different css units such as pixels, percentages, rems, ems, viewport width, viewport height, and character units to control font size, width, and layout. it also discusses the css box model and how to turn a box into a circle.', 'duration': 1206.18, 'max_score': 3203.766, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA3203766.jpg'}, {'end': 3718.255, 'src': 'embed', 'start': 3694.132, 'weight': 2, 'content': [{'end': 3700.497, 'text': "So I'm going to switch this back to two rims and get closer to the size we'd want, and it's going to look at the root.", 'start': 3694.132, 'duration': 6.365}, {'end': 3706.324, 'text': 'So when would we use ems instead of rems? We know we want to use rems on font size.', 'start': 3700.977, 'duration': 5.347}, {'end': 3711.249, 'text': "Well, when we set the font size on an element, em doesn't look at the parent.", 'start': 3706.884, 'duration': 4.365}, {'end': 3713.191, 'text': 'It looks at the element itself.', 'start': 3711.329, 'duration': 1.862}, {'end': 3718.255, 'text': "And so we could use it for something like margin or padding, which I know we haven't covered,", 'start': 3713.832, 'duration': 4.423}], 'summary': 'Switch to two rims, use ems for margin or padding.', 'duration': 24.123, 'max_score': 3694.132, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA3694132.jpg'}, {'end': 4386.094, 'src': 'embed', 'start': 4362.377, 'weight': 3, 'content': [{'end': 4368.882, 'text': 'And everything else is pretty much the same, except we do now have the default styles from the browser again.', 'start': 4362.377, 'duration': 6.505}, {'end': 4371.944, 'text': "And we'll get back to that CSS reset in just a bit.", 'start': 4368.922, 'duration': 3.022}, {'end': 4374.566, 'text': 'But right now, we want to look at this box model.', 'start': 4372.365, 'duration': 2.201}, {'end': 4379.55, 'text': "And we've already drawn a box by putting a border around our H1 element.", 'start': 4374.866, 'duration': 4.684}, {'end': 4382.272, 'text': 'We can see this border here defined with shorthand.', 'start': 4379.59, 'duration': 2.682}, {'end': 4386.094, 'text': "And we'll get into what all of that means in just a second, too.", 'start': 4382.472, 'duration': 3.622}], 'summary': 'Introduction to box model with default browser styles and h1 border.', 'duration': 23.717, 'max_score': 4362.377, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA4362377.jpg'}], 'start': 3037.043, 'title': 'Web design fundamentals', 'summary': 'Covers web page color selection, css units like pixels and percentages, font sizing units including rem and em, and css box model and layout, emphasizing practical examples and insights for effective web design.', 'chapters': [{'end': 3102.642, 'start': 3037.043, 'title': 'Web page color selection and css units', 'summary': 'Emphasizes the importance of legibility and accessibility in web page color selection, encourages beginners to experiment with different colors and css units, and highlights the use of visual studio code for live css editing and previewing.', 'duration': 65.599, 'highlights': ['The chapter emphasizes the importance of legibility and accessibility in web page color selection.', 'Beginners are encouraged to experiment with different colors and CSS units to get comfortable with setting colors on a web page.', 'Visual Studio Code is used for live editing of CSS and previewing changes in the Chrome browser, ensuring real-time feedback during development.']}, {'end': 3480.397, 'start': 3103.442, 'title': 'Css units: pixels and percentages', 'summary': "Covers the usage of pixels and percentages as css units, emphasizing that pixels are commonly used for absolute length units, specifically for elements like h1 with a width of 100% and percentages are relative to the parent element's width and can be used to set the sizing of different elements.", 'duration': 376.955, 'highlights': ['Pixels are commonly used for absolute length units, specifically for elements like H1 with a width of 100% Pixels are highlighted as the commonly used absolute length unit, particularly for elements like H1 with a width of 100%, demonstrating their usage in setting specific element sizes.', "Percentages are relative to the parent element's width and can be used to set the sizing of different elements The usage of percentages as CSS units is explained, emphasizing their relative nature to the parent element's width and their role in setting the sizing of different elements."]}, {'end': 3842.069, 'start': 3480.617, 'title': 'Understanding font sizing units', 'summary': 'Discusses the use of rem and em units for font sizing, explaining their relationship to the root element and parent elements, and their implications on font size amplification. it also highlights the usage of em for margin and padding, and introduces the ch unit for character width measurement.', 'duration': 361.452, 'highlights': ['The chapter discusses the use of REM and EM units for font sizing It explains the relationship of REM to the root element and EM to the element itself for font sizing.', 'Explaining the implications of font size amplification when using EM units It highlights the unintended consequences of using EM units for font size amplification and emphasizes the benefits of using REM units.', 'Introducing the usage of EM for margin and padding It mentions the use of EM units for margin and padding, providing an example of setting padding based on the font size of the element.', 'Introduction of the CH unit for character width measurement It introduces the CH unit for measuring character width, derived from print and layout design principles.']}, {'end': 4426.372, 'start': 3842.069, 'title': 'Css box model and layout', 'summary': 'Explores the css box model and layout, including setting paragraph width, overriding default styles, using viewport width and height units, and leveraging css to create a circular box, providing practical examples and insights for effective web design.', 'duration': 584.303, 'highlights': ['The chapter explores the CSS box model and layout It covers setting paragraph width, overriding default styles, using viewport width and height units, and leveraging CSS to create a circular box, providing practical examples and insights for effective web design.', 'Setting paragraph width and defining columns The transcript demonstrates setting paragraph width to ensure an estimated 40 characters per line before line wraps, aiding in defining columns in layout.', 'Overriding default styles with DevTools The use of DevTools to inspect and override default styles, such as font size, margin, padding, and font weight, is illustrated, showcasing the ability to manipulate default browser styles.', "Usage of viewport width and height units The chapter provides insights into using viewport width and height units, such as 1% of the viewport's width and height, and compares their usage with percentage, offering practical examples for effective implementation.", 'Creating a circular box with CSS A demonstration of turning a box into a circle using CSS is presented, offering a practical example of leveraging CSS for creative and visually appealing web design.']}], 'duration': 1389.329, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA3037043.jpg', 'highlights': ['The chapter emphasizes the importance of legibility and accessibility in web page color selection.', 'Pixels are commonly used for absolute length units, specifically for elements like H1 with a width of 100%.', 'The chapter discusses the use of REM and EM units for font sizing, explaining the relationship of REM to the root element and EM to the element itself.', 'The chapter explores the CSS box model and layout, covering setting paragraph width, overriding default styles, using viewport width and height units, and leveraging CSS to create a circular box.']}, {'end': 6349.449, 'segs': [{'end': 4601.042, 'src': 'embed', 'start': 4560.037, 'weight': 0, 'content': [{'end': 4564.76, 'text': "And you always want to be able to bring up the box model to see exactly what's going on with your elements.", 'start': 4560.037, 'duration': 4.723}, {'end': 4570.824, 'text': "After that, it's also important to just memorize the different layers of the CSS box model.", 'start': 4565.3, 'duration': 5.524}, {'end': 4573.426, 'text': 'So starting on the inside, we have content.', 'start': 4570.904, 'duration': 2.522}, {'end': 4574.947, 'text': 'Then we have padding.', 'start': 4573.946, 'duration': 1.001}, {'end': 4576.428, 'text': 'Then we have border.', 'start': 4575.487, 'duration': 0.941}, {'end': 4579.33, 'text': 'And finally, we have margin on the outside.', 'start': 4576.908, 'duration': 2.422}, {'end': 4587.094, 'text': "And now concerning our H1 and the margin that I have highlighted, notice it's 32 pixels, actually 32.16 pixels.", 'start': 4579.75, 'duration': 7.344}, {'end': 4588.875, 'text': "And we didn't set that.", 'start': 4587.654, 'duration': 1.221}, {'end': 4591.597, 'text': "So that's a default style on the H1.", 'start': 4588.975, 'duration': 2.622}, {'end': 4593.217, 'text': "We've got the H1 selected.", 'start': 4591.757, 'duration': 1.46}, {'end': 4597.14, 'text': "Let's go back to the Styles tab instead of the Computed tab.", 'start': 4593.698, 'duration': 3.442}, {'end': 4598.46, 'text': 'And we can see this.', 'start': 4597.54, 'duration': 0.92}, {'end': 4601.042, 'text': "If we scroll just a little bit, there's the styles we set.", 'start': 4598.54, 'duration': 2.502}], 'summary': 'Understanding the css box model layers and default margin size for h1 element.', 'duration': 41.005, 'max_score': 4560.037, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA4560037.jpg'}, {'end': 4706.154, 'src': 'embed', 'start': 4681.488, 'weight': 2, 'content': [{'end': 4690.67, 'text': "And so that's why sometimes we just want to reset the browser settings for all the margins and all the padding and just take control of them ourselves.", 'start': 4681.488, 'duration': 9.182}, {'end': 4693.671, 'text': "And that's why we use a CSS reset.", 'start': 4691.15, 'duration': 2.521}, {'end': 4698.592, 'text': 'And a very basic CSS restart starts with the wildcard at the top.', 'start': 4694.031, 'duration': 4.561}, {'end': 4704.313, 'text': 'And then we set margin for all elements, because remember, this wildcard selects all elements.', 'start': 4699.072, 'duration': 5.241}, {'end': 4706.154, 'text': 'So we set the margin to zero.', 'start': 4704.393, 'duration': 1.761}], 'summary': 'Using a css reset to set all margins to zero for all elements.', 'duration': 24.666, 'max_score': 4681.488, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA4681488.jpg'}, {'end': 5214.116, 'src': 'heatmap', 'start': 4803.271, 'weight': 0.731, 'content': [{'end': 4814.68, 'text': 'and then we can add in 24 pixels of padding on each side and two pixels of border on each side and then we can get our total of 400.', 'start': 4803.271, 'duration': 11.409}, {'end': 4816.281, 'text': 'so what border box does?', 'start': 4814.68, 'duration': 1.601}, {'end': 4820.585, 'text': 'is it really helps us calculate the sizes that we are assigning?', 'start': 4816.281, 'duration': 4.304}, {'end': 4823.888, 'text': 'because it goes ahead and includes the border and the padding?', 'start': 4820.585, 'duration': 3.303}, {'end': 4825.669, 'text': 'it does not include the margin.', 'start': 4823.888, 'duration': 1.781}, {'end': 4833.075, 'text': "the margin is on the outside of our CSS boxes that we create, whichever elements that we're styling.", 'start': 4825.669, 'duration': 7.406}, {'end': 4835.817, 'text': 'So the margin is not included in that calculation.', 'start': 4833.135, 'duration': 2.682}, {'end': 4837.759, 'text': 'However, the rest is.', 'start': 4836.218, 'duration': 1.541}, {'end': 4843.264, 'text': 'So the border and the padding and the content all add up to that 400 pixels that I set right here.', 'start': 4837.819, 'duration': 5.445}, {'end': 4852.033, 'text': "OK, now that we've broken down how the border box setting works and looked at the CSS box model, let's go ahead and close DevTools.", 'start': 4843.684, 'duration': 8.349}, {'end': 4855.677, 'text': "And let's just style our page a little bit with some of these properties.", 'start': 4852.454, 'duration': 3.223}, {'end': 4860.622, 'text': "I'm going to resize the page a little bit so we have some more room for Visual Studio Code over here on the left.", 'start': 4855.737, 'duration': 4.885}, {'end': 4861.683, 'text': "I'll pull this over.", 'start': 4860.782, 'duration': 0.901}, {'end': 4862.925, 'text': 'There we go.', 'start': 4862.384, 'duration': 0.541}, {'end': 4865.186, 'text': "And now let's make some changes.", 'start': 4863.485, 'duration': 1.701}, {'end': 4872.231, 'text': "So one thing I have thought about is our H1 right here has some settings I normally probably wouldn't put on an H1.", 'start': 4865.607, 'duration': 6.624}, {'end': 4874.953, 'text': "I'm just more concerned with the font there.", 'start': 4872.292, 'duration': 2.661}, {'end': 4879.037, 'text': 'But the font size that would be assigned by default is OK, too.', 'start': 4875.014, 'duration': 4.023}, {'end': 4880.498, 'text': "So I'm going to get rid of that.", 'start': 4879.117, 'duration': 1.381}, {'end': 4888.882, 'text': 'now these other settings i would actually be more likely to put on the container than i would on the h1 itself,', 'start': 4881.158, 'duration': 7.724}, {'end': 4891.543, 'text': 'and the h1 is inside of a header element.', 'start': 4888.882, 'duration': 2.661}, {'end': 4896.905, 'text': "so let's go ahead and save that, and it changed just a little bit, but that's okay.", 'start': 4891.543, 'duration': 5.362}, {'end': 4906.05, 'text': "i'm going to change these ems back to rems because now i'm not setting a font size on the header, so i'm going to use 1.5 rem here and save.", 'start': 4896.905, 'duration': 9.145}, {'end': 4908.951, 'text': "And now we've got our padding back to about where it was.", 'start': 4906.55, 'duration': 2.401}, {'end': 4915.935, 'text': "But now what if I wanted to assign these same settings to the container that our paragraph is in? And that's in the main element.", 'start': 4909.171, 'duration': 6.764}, {'end': 4918.297, 'text': "So maybe I don't want this on the header.", 'start': 4916.355, 'duration': 1.942}, {'end': 4924.88, 'text': 'Maybe I want to assign a container class so I can provide these same settings for more than one container.', 'start': 4918.717, 'duration': 6.163}, {'end': 4927.202, 'text': "So I'm going to quickly go over to the HTML.", 'start': 4925.04, 'duration': 2.162}, {'end': 4932.905, 'text': "And in the HTML, we'll set a class called container on each of these elements.", 'start': 4927.982, 'duration': 4.923}, {'end': 4934.386, 'text': 'So we have the header element.', 'start': 4933.105, 'duration': 1.281}, {'end': 4938.114, 'text': "And we'll set the class equal to container.", 'start': 4935.512, 'duration': 2.602}, {'end': 4943.018, 'text': "And I've got one extra quote there.", 'start': 4938.134, 'duration': 4.884}, {'end': 4943.579, 'text': 'There we go.', 'start': 4943.058, 'duration': 0.521}, {'end': 4945.58, 'text': "And now I'm just going to copy this.", 'start': 4944.079, 'duration': 1.501}, {'end': 4949.404, 'text': "And I'll paste it into our main element as well.", 'start': 4946.061, 'duration': 3.343}, {'end': 4952.628, 'text': 'And save that.', 'start': 4951.787, 'duration': 0.841}, {'end': 4953.829, 'text': 'And there we go.', 'start': 4952.648, 'duration': 1.181}, {'end': 4957.011, 'text': "So now we've got dashes around both of these boxes here.", 'start': 4953.929, 'duration': 3.082}, {'end': 4962.376, 'text': "Let's go back to the CSS and make these bigger so we can see them better on the page.", 'start': 4957.392, 'duration': 4.984}, {'end': 4966.559, 'text': "Right now, I'm going to get rid of this 100 pixel or 400 pixel width.", 'start': 4962.696, 'duration': 3.863}, {'end': 4970.963, 'text': "Let's go ahead and let them take up the full 100% for now.", 'start': 4966.659, 'duration': 4.304}, {'end': 4974.446, 'text': "OK, let's go ahead and add a font size to the container.", 'start': 4971.323, 'duration': 3.123}, {'end': 4976.628, 'text': 'And it will apply to both of these differently.', 'start': 4974.666, 'duration': 1.962}, {'end': 4978.409, 'text': "But we'll set it to 1.5 rem and save.", 'start': 4976.688, 'duration': 1.721}, {'end': 4986.436, 'text': "Now our font's a little bit bigger, but notice how the edges of the border are right up against the page.", 'start': 4980.951, 'duration': 5.485}, {'end': 4993.522, 'text': 'So on the outside of our box, we can set a margin and also set that to 1.5 rem and save.', 'start': 4986.796, 'duration': 6.726}, {'end': 4998.646, 'text': 'And now we have our two boxes and the margin has pushed them away from the edge.', 'start': 4994.102, 'duration': 4.544}, {'end': 5002.55, 'text': 'The margin has also provided space between the two boxes here.', 'start': 4999.067, 'duration': 3.483}, {'end': 5008.214, 'text': 'And now that we have a font size on our container, we could go ahead and switch this back to ems.', 'start': 5002.89, 'duration': 5.324}, {'end': 5013.678, 'text': 'And remember, 1em would be the same as the font size.', 'start': 5008.354, 'duration': 5.324}, {'end': 5016.2, 'text': 'So it would be equal to the 1.5 rem.', 'start': 5013.738, 'duration': 2.462}, {'end': 5022.524, 'text': 'So if we make this change, we just change it to 1em, and our sizing should stay the same.', 'start': 5016.3, 'duration': 6.224}, {'end': 5023.285, 'text': 'And it does.', 'start': 5022.644, 'duration': 0.641}, {'end': 5025.867, 'text': 'If we change this to 1.5, it will get bigger.', 'start': 5023.825, 'duration': 2.042}, {'end': 5029.857, 'text': 'Yes, and now we have more padding.', 'start': 5028.055, 'duration': 1.802}, {'end': 5032.799, 'text': 'We could add more margin by doing the same if we want to.', 'start': 5030.097, 'duration': 2.702}, {'end': 5034.181, 'text': "So let's go ahead and do that.", 'start': 5032.9, 'duration': 1.281}, {'end': 5043.489, 'text': "And now let's go ahead and experiment with the margin and the padding, because we don't have to have the same setting on the top, right,", 'start': 5034.901, 'duration': 8.588}, {'end': 5044.69, 'text': 'bottom and left.', 'start': 5043.489, 'duration': 1.201}, {'end': 5052.657, 'text': 'And I did say that order specifically for a reason, because for the margin we could just say margin top.', 'start': 5045.231, 'duration': 7.426}, {'end': 5059.299, 'text': "and here let's go ahead and say 1.5, em and save, and look what happens to our other margins.", 'start': 5052.657, 'duration': 6.642}, {'end': 5064.42, 'text': "the left and right margins are gone and you can't really see that we lost the margin on the bottom,", 'start': 5059.299, 'duration': 5.121}, {'end': 5067.381, 'text': 'but we did the only thing separating these containers.', 'start': 5064.42, 'duration': 2.961}, {'end': 5069.921, 'text': 'now is the margin on the top.', 'start': 5067.381, 'duration': 2.54}, {'end': 5076.949, 'text': "so now let's go ahead and add some margin on the right, And here we'll set this to 2em and save.", 'start': 5069.921, 'duration': 7.028}, {'end': 5077.99, 'text': "So it's just a little bigger.", 'start': 5076.989, 'duration': 1.001}, {'end': 5083.717, 'text': 'And now we do have margin on the right, but still no margin on the bottom and no margin on the left.', 'start': 5078.531, 'duration': 5.186}, {'end': 5085.879, 'text': "I'm going to press Shift-Alt and the down arrow.", 'start': 5083.797, 'duration': 2.082}, {'end': 5091.125, 'text': "And now instead of the right, I'm going to switch this one to bottom.", 'start': 5086.76, 'duration': 4.365}, {'end': 5092.769, 'text': 'And save.', 'start': 5092.108, 'duration': 0.661}, {'end': 5095.851, 'text': 'And now we have some more margin here on the bottom.', 'start': 5093.129, 'duration': 2.722}, {'end': 5098.834, 'text': 'So the separation between these two boxes got bigger.', 'start': 5095.891, 'duration': 2.943}, {'end': 5101.175, 'text': "That's the only thing you could really see right there.", 'start': 5098.994, 'duration': 2.181}, {'end': 5104.738, 'text': "And now on the right, let's go ahead and switch.", 'start': 5101.756, 'duration': 2.982}, {'end': 5108.601, 'text': "I mean, on the left, let's go ahead and switch this to 2EMs as well.", 'start': 5104.858, 'duration': 3.743}, {'end': 5117.028, 'text': 'And you can see we got the same thing as if we just said margin 2EM, except we wanted a margin on top of 1.5EM.', 'start': 5109.002, 'duration': 8.026}, {'end': 5119.77, 'text': 'So there is shorthand for this.', 'start': 5118.109, 'duration': 1.661}, {'end': 5122.591, 'text': "So I'm going to comment all four of these out.", 'start': 5120.15, 'duration': 2.441}, {'end': 5126.372, 'text': "And I'll press Shift-Alt and the letter A to do that.", 'start': 5123.191, 'duration': 3.181}, {'end': 5128.833, 'text': 'There you can see a CSS comment.', 'start': 5126.992, 'duration': 1.841}, {'end': 5130.053, 'text': 'So it commented those out.', 'start': 5128.913, 'duration': 1.14}, {'end': 5132.274, 'text': 'So right now there will be no margin once again.', 'start': 5130.073, 'duration': 2.201}, {'end': 5134.415, 'text': 'Now the boxes are next to each other.', 'start': 5132.354, 'duration': 2.061}, {'end': 5136.336, 'text': 'No margin on the left and right.', 'start': 5134.975, 'duration': 1.361}, {'end': 5139.117, 'text': 'But our shorthand is just saying margin.', 'start': 5136.816, 'duration': 2.301}, {'end': 5140.377, 'text': 'And when I say this 1.5.', 'start': 5139.257, 'duration': 1.12}, {'end': 5150.548, 'text': 'EM, that applies it to top, bottom, left and right, and it actually goes in the order top, right, bottom, left.', 'start': 5140.377, 'duration': 10.171}, {'end': 5154.511, 'text': 'so now we could put in different settings with this shorthand if we wanted to.', 'start': 5150.548, 'duration': 3.963}, {'end': 5164.819, 'text': "so 1.5 on top and then two m's on the right and the left and then two m's on the bottom, and i can save,", 'start': 5154.511, 'duration': 10.308}, {'end': 5170.043, 'text': 'And that is the same thing as when we had all four of these right here.', 'start': 5165.64, 'duration': 4.403}, {'end': 5180.13, 'text': 'Now, if I just wanted to have 1.5 on the top and the bottom and two on the left and the right, I could delete this third setting right here.', 'start': 5170.624, 'duration': 9.506}, {'end': 5181.992, 'text': "And that's what we get.", 'start': 5180.851, 'duration': 1.141}, {'end': 5190.097, 'text': 'So now it will take 1.5 and apply it to the top and the bottom and two and apply it to the right and the left.', 'start': 5182.112, 'duration': 7.985}, {'end': 5193.4, 'text': 'However, you can provide all four settings.', 'start': 5190.518, 'duration': 2.882}, {'end': 5194.56, 'text': 'So we could go three.', 'start': 5193.52, 'duration': 1.04}, {'end': 5196.322, 'text': 'and four.', 'start': 5195.721, 'duration': 0.601}, {'end': 5199.204, 'text': 'And then we would have the shorthand.', 'start': 5197.283, 'duration': 1.921}, {'end': 5205.99, 'text': 'Notice the left margin, the final value here is much larger, twice as large actually as the right margin.', 'start': 5199.364, 'duration': 6.626}, {'end': 5214.116, 'text': 'And then the bottom is definitely larger than the top margin because here you can see only the top margin as it applies to the first container.', 'start': 5206.63, 'duration': 7.486}], 'summary': 'The transcript discusses css box model, border box calculation, and applying styles to containers using margin and padding.', 'duration': 410.845, 'max_score': 4803.271, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA4803271.jpg'}, {'end': 6018.54, 'src': 'heatmap', 'start': 5606.463, 'weight': 0.801, 'content': [{'end': 5615.887, 'text': 'i need to go back to the file tree and find our index html and hide the file tree with control b, and i just want to put a div down here.', 'start': 5606.463, 'duration': 9.424}, {'end': 5627.917, 'text': "i'm going to keep it in the side of the main element, so i'll just type div and then i want to give this div a class and set this equal to.", 'start': 5615.887, 'duration': 12.03}, {'end': 5629.838, 'text': 'there we go to circle.', 'start': 5627.917, 'duration': 1.921}, {'end': 5631.199, 'text': "i still didn't spell circle right.", 'start': 5629.838, 'duration': 1.361}, {'end': 5632.82, 'text': "i'm having a rough time today.", 'start': 5631.199, 'duration': 1.621}, {'end': 5636.102, 'text': "save there we've got a div with the class of circle.", 'start': 5632.82, 'duration': 3.282}, {'end': 5641.565, 'text': "okay, we can close the html and now let's style our circle class.", 'start': 5636.102, 'duration': 5.463}, {'end': 5654.373, 'text': "so we'll start with circle definition here for the class and let's give the circle a background color of gold, but we haven't given it any size yet.", 'start': 5641.565, 'duration': 12.808}, {'end': 5661.274, 'text': "so let's say a width of 100 pixels and a height of 100 pixels.", 'start': 5654.373, 'duration': 6.901}, {'end': 5665.375, 'text': "And that doesn't look like much of a circle yet, but it will.", 'start': 5662.814, 'duration': 2.561}, {'end': 5668.257, 'text': "Let's go ahead and add a border now of two pixels.", 'start': 5665.656, 'duration': 2.601}, {'end': 5670.397, 'text': "We'll make this solid black.", 'start': 5668.857, 'duration': 1.54}, {'end': 5674.379, 'text': 'And now we see our border applied to our square.', 'start': 5671.938, 'duration': 2.441}, {'end': 5676.76, 'text': "And let's add an outline as well.", 'start': 5675.139, 'duration': 1.621}, {'end': 5678.941, 'text': 'Well, we need a new line for that outline.', 'start': 5676.9, 'duration': 2.041}, {'end': 5683.036, 'text': 'the outline can be two pixels.', 'start': 5680.994, 'duration': 2.042}, {'end': 5689.061, 'text': "let's say solid and let's go with red for now, so it'll match everything else a little bit and stand out.", 'start': 5683.036, 'duration': 6.025}, {'end': 5696.507, 'text': "now let's give it an offset also and we'll make this 0.25 rem and save.", 'start': 5689.061, 'duration': 7.446}, {'end': 5698.649, 'text': "so yeah, we've got just a little space there.", 'start': 5696.507, 'duration': 2.142}, {'end': 5703.754, 'text': "now let's create some separation from the other content, and so i'll just leave this at the top.", 'start': 5698.649, 'duration': 5.105}, {'end': 5709.792, 'text': "i'll make the margin 3rem and save and now it's pushed itself away.", 'start': 5703.754, 'duration': 6.038}, {'end': 5712.634, 'text': "But something we didn't cover with the margin.", 'start': 5710.372, 'duration': 2.262}, {'end': 5720.78, 'text': "if you set the margin, this doesn't work for top and bottom, but if you set it for left and right, notice, we've got 3rem for top and bottom.", 'start': 5712.634, 'duration': 8.146}, {'end': 5728.124, 'text': 'now we can use the keyword auto for left and right and this will center it horizontally.', 'start': 5720.78, 'duration': 7.344}, {'end': 5730.485, 'text': 'that means in the middle, left and right.', 'start': 5728.124, 'duration': 2.361}, {'end': 5740.369, 'text': "so now we put what will be a circle, our gold square, inside of our main element, and it's at the center, horizontally, not vertically,", 'start': 5730.485, 'duration': 9.884}, {'end': 5742.19, 'text': 'but at least it is horizontally.', 'start': 5740.369, 'duration': 1.821}, {'end': 5743.83, 'text': 'and now, to calculate our circle,', 'start': 5742.19, 'duration': 1.64}, {'end': 5752.382, 'text': 'we essentially just need to set one other border property And we set it to half the value of the width and the height.', 'start': 5743.83, 'duration': 8.552}, {'end': 5755.309, 'text': 'So this border property is called border radius.', 'start': 5752.883, 'duration': 2.426}, {'end': 5756.591, 'text': "I'll put it right under border.", 'start': 5755.489, 'duration': 1.102}, {'end': 5762.06, 'text': "And we'll set it first, just so you can see how it works.", 'start': 5759.219, 'duration': 2.841}, {'end': 5763.521, 'text': "Let's set it to 20 pixels.", 'start': 5762.1, 'duration': 1.421}, {'end': 5765.602, 'text': "And you'll see what border radius does.", 'start': 5764.001, 'duration': 1.601}, {'end': 5769.603, 'text': 'Look how it rounded the corners of our square.', 'start': 5766.082, 'duration': 3.521}, {'end': 5773.525, 'text': 'So now we have more like a cool button, kind of like you would see there.', 'start': 5769.783, 'duration': 3.742}, {'end': 5775.326, 'text': 'And we can continue to round that.', 'start': 5773.745, 'duration': 1.581}, {'end': 5784.709, 'text': "But if we set it to 50 pixels, which is half of the width and half of the height, and save, We've now got a circle.", 'start': 5775.386, 'duration': 9.323}, {'end': 5789.932, 'text': "Now, there's always more than one way to do things in CSS and typically in programming in general.", 'start': 5785.05, 'duration': 4.882}, {'end': 5795.594, 'text': "So if you've got other ways you like to make circles in CSS, go ahead and leave those in the comments below.", 'start': 5789.992, 'duration': 5.602}, {'end': 5799.036, 'text': 'But I hope this has helped you learn about the box model today.', 'start': 5795.974, 'duration': 3.062}, {'end': 5801.196, 'text': 'So we have the content on the inside.', 'start': 5799.136, 'duration': 2.06}, {'end': 5802.717, 'text': 'Then we have the padding.', 'start': 5801.657, 'duration': 1.06}, {'end': 5804.198, 'text': 'Then we have the border.', 'start': 5803.197, 'duration': 1.001}, {'end': 5806.939, 'text': 'And finally, on the outside, we have the margin.', 'start': 5804.558, 'duration': 2.381}, {'end': 5819.232, 'text': 'And when we apply our basic CSS reset and we set the box-sizing to border-box, then the calculation includes the content,', 'start': 5807.279, 'duration': 11.953}, {'end': 5823.036, 'text': 'the padding and the border instead of just the content.', 'start': 5819.232, 'duration': 3.804}, {'end': 5826.525, 'text': "Let's move on to CSS typography.", 'start': 5824.264, 'duration': 2.261}, {'end': 5828.925, 'text': "And I'm going to paste a definition here.", 'start': 5827.065, 'duration': 1.86}, {'end': 5833.726, 'text': 'Typography is the way that text is arranged and presented.', 'start': 5829.545, 'duration': 4.181}, {'end': 5837.867, 'text': "So today we'll be working with text and font in our CSS.", 'start': 5833.826, 'duration': 4.041}, {'end': 5842.768, 'text': "And you can see I've got a CSS folder with a style.css file.", 'start': 5838.227, 'duration': 4.541}, {'end': 5845.569, 'text': 'And I have an index.html file today.', 'start': 5843.268, 'duration': 2.301}, {'end': 5848.91, 'text': "I'll save the style.css file.", 'start': 5846.269, 'duration': 2.641}, {'end': 5852.351, 'text': "And for the index.html file, let's just take a quick look.", 'start': 5849.27, 'duration': 3.081}, {'end': 5855.032, 'text': "We've got a basic web page here.", 'start': 5852.831, 'duration': 2.201}, {'end': 5861.813, 'text': 'And inside the body of the web page, we have a header element and we have a main element.', 'start': 5855.572, 'duration': 6.241}, {'end': 5864.634, 'text': 'Inside the header element, we have an h1.', 'start': 5862.334, 'duration': 2.3}, {'end': 5866.875, 'text': 'And inside the main, we have a paragraph.', 'start': 5864.874, 'duration': 2.001}, {'end': 5869.396, 'text': 'And then we have a simple form.', 'start': 5867.515, 'duration': 1.881}, {'end': 5872.558, 'text': 'And our form has a label, input, and button.', 'start': 5869.876, 'duration': 2.682}, {'end': 5874.519, 'text': "We'll be working with all of those today.", 'start': 5872.738, 'duration': 1.781}, {'end': 5876.36, 'text': "Let's go back to the style.", 'start': 5874.979, 'duration': 1.381}, {'end': 5879.822, 'text': "I'm also going to press Control-B to hide the file tree.", 'start': 5876.821, 'duration': 3.001}, {'end': 5884.985, 'text': "And now I'm going to resize VS Code here so it's only on the left of our screen.", 'start': 5880.283, 'duration': 4.702}, {'end': 5887.167, 'text': "And on the right, we'll have our web page.", 'start': 5885.386, 'duration': 1.781}, {'end': 5889.788, 'text': "And I'm using the live server extension.", 'start': 5887.647, 'duration': 2.141}, {'end': 5893.991, 'text': 'So any changes we make in the CSS will show immediately over here in the web page.', 'start': 5889.848, 'duration': 4.143}, {'end': 5897.774, 'text': 'You can see the simple web page that we just went over in VS Code.', 'start': 5894.511, 'duration': 3.263}, {'end': 5898.895, 'text': "It's got our H1.", 'start': 5897.814, 'duration': 1.081}, {'end': 5901.818, 'text': "It's got our paragraph with some lorem ipsum text.", 'start': 5899.035, 'duration': 2.783}, {'end': 5906.382, 'text': "And it's got our simple form here with the label, input, and button.", 'start': 5902.378, 'duration': 4.004}, {'end': 5909.424, 'text': "I'm going to start our CSS by selecting the body.", 'start': 5906.622, 'duration': 2.802}, {'end': 5915.267, 'text': "And inside the body, I'm just going to set a padding of 25%.", 'start': 5910.345, 'duration': 4.922}, {'end': 5923.211, 'text': 'And if you remember the CSS box model, setting padding of 25% sets that on all sides, top, right, bottom, and left.', 'start': 5915.267, 'duration': 7.944}, {'end': 5924.172, 'text': 'So you can see it.', 'start': 5923.251, 'duration': 0.921}, {'end': 5930.715, 'text': 'put our text right here, kind of in the middle of the page, not exactly centered, but it lets us work with it and see it in that regard.', 'start': 5924.172, 'duration': 6.543}, {'end': 5938.323, 'text': "Now, we've covered a few things about text and font already in this series, and one of those was setting the font size.", 'start': 5931.295, 'duration': 7.028}, {'end': 5939.304, 'text': 'And we already know.', 'start': 5938.443, 'duration': 0.861}, {'end': 5946.752, 'text': 'we want to let the browser set the default font size so that enables the user to make a choice as far as their settings,', 'start': 5939.304, 'duration': 7.448}, {'end': 5948.414, 'text': 'and it also helps accessibility.', 'start': 5946.752, 'duration': 1.662}, {'end': 5955.621, 'text': "And then when we do set a font size, like I'm about to here on the body, we want to use root ENs.", 'start': 5948.954, 'duration': 6.667}, {'end': 5964.25, 'text': 'That is referencing the root font size or that default font size that the browser sets, which usually defaults to 16 pixels.', 'start': 5955.981, 'duration': 8.269}, {'end': 5974.174, 'text': 'So if I say 2, root ems here, rem, this will probably set it to about 32 pixels and there you can see we have a much larger font size.', 'start': 5964.31, 'duration': 9.864}, {'end': 5977.415, 'text': "and now i can see the padding's a little too large for what i want to do.", 'start': 5974.174, 'duration': 3.241}, {'end': 5979.956, 'text': "so i'll put this back to 10 in there.", 'start': 5977.415, 'duration': 2.541}, {'end': 5988.258, 'text': "it's kind of in the part of the page where we'll see it the best and we'll be able to reference the different things we're going to do to the text and font today.", 'start': 5979.956, 'duration': 8.302}, {'end': 5996.922, 'text': 'now also notice and we learned this as well in the past that through inheritance font and text settings are usually inherited.', 'start': 5988.258, 'duration': 8.664}, {'end': 6006.051, 'text': 'So the children of this body element would inherit the font size of two rems, unless we set a specific one on those child elements.', 'start': 5997.042, 'duration': 9.009}, {'end': 6011.416, 'text': 'However, they do not inherit the size here inside of a form.', 'start': 6006.131, 'duration': 5.285}, {'end': 6018.54, 'text': 'So notice the label has that font size inherited, but it did not get inherited in the input or the button.', 'start': 6011.556, 'duration': 6.984}], 'summary': 'Creating a gold circle using css with 100x100 dimensions and 50px border radius.', 'duration': 412.077, 'max_score': 5606.463, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA5606463.jpg'}, {'end': 5861.813, 'src': 'embed', 'start': 5829.545, 'weight': 4, 'content': [{'end': 5833.726, 'text': 'Typography is the way that text is arranged and presented.', 'start': 5829.545, 'duration': 4.181}, {'end': 5837.867, 'text': "So today we'll be working with text and font in our CSS.", 'start': 5833.826, 'duration': 4.041}, {'end': 5842.768, 'text': "And you can see I've got a CSS folder with a style.css file.", 'start': 5838.227, 'duration': 4.541}, {'end': 5845.569, 'text': 'And I have an index.html file today.', 'start': 5843.268, 'duration': 2.301}, {'end': 5848.91, 'text': "I'll save the style.css file.", 'start': 5846.269, 'duration': 2.641}, {'end': 5852.351, 'text': "And for the index.html file, let's just take a quick look.", 'start': 5849.27, 'duration': 3.081}, {'end': 5855.032, 'text': "We've got a basic web page here.", 'start': 5852.831, 'duration': 2.201}, {'end': 5861.813, 'text': 'And inside the body of the web page, we have a header element and we have a main element.', 'start': 5855.572, 'duration': 6.241}], 'summary': 'Introduction to working with text and font in css, creating a basic web page with a header and a main element.', 'duration': 32.268, 'max_score': 5829.545, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA5829545.jpg'}], 'start': 4426.813, 'title': 'Understanding css box model and devtools', 'summary': 'Explains the css box model and devtools, covering box model layers, default margin settings, impact of font size on margin, css reset, and box-sizing property, emphasizing the importance of controlling element styles for web development. it also delves into css margin and padding adjustments, box model properties visualization, creating a circle from a box in css, and text settings in html and css.', 'chapters': [{'end': 4945.58, 'start': 4426.813, 'title': 'Understanding css box model and devtools', 'summary': 'Explains the css box model and devtools, highlighting the box model layers, default margin settings, impact of font size on margin, css reset, and box-sizing property, emphasizing the importance of understanding and controlling element styles for web development.', 'duration': 518.767, 'highlights': ["The box model layers include content, padding, border, and margin, providing a visual representation of the element's structure and spacing.", "Default margin settings for H1 element show a 32.16 pixels margin due to the browser's user agent style sheet, influenced by the font size set to 3 rem (48 pixels), clarifying the impact of font size on default styles.", 'Applying a font size change to 2 rem (smaller than the previous 3 rem) results in a reduced margin size of 21.44 pixels, demonstrating the correlation between font size adjustments and element styles.', 'Explaining the significance of CSS reset by setting margin and padding to zero for all elements, and introducing the box-sizing property to control the calculation of element sizes, emphasizing the need for taking control of element styles for precise web development.', "Demonstrating the difference between 'content box' and 'border box' settings within the box-sizing property, showcasing the impact on calculating element sizes, and the importance of considering padding and border in size calculations, emphasizing the precision in layout and design.", 'Discussing the application of element styles by modifying the H1 and considering the usage of class container to apply consistent settings across multiple elements, highlighting the importance of efficient and organized application of styles for web development.']}, {'end': 5249.214, 'start': 4946.061, 'title': 'Css margin and padding', 'summary': 'Explains how to adjust margin and padding using css, demonstrating the effects of different settings and shorthand notations, with values changing the spacing between boxes.', 'duration': 303.153, 'highlights': ['The chapter demonstrates adjusting margin and padding using CSS, with specific values and shorthand notation. Demonstration of adjusting margin and padding; explanation of specific values and shorthand notation.', 'The chapter explains how different settings and values affect the spacing between boxes, showing the impact of various margin and padding adjustments. Explanation of how different settings and values affect spacing between boxes; demonstration of the impact of margin and padding adjustments.', 'The chapter highlights the use of specific values to create different margins and padding, showcasing visual differences in spacing and size. Highlighting the use of specific values for margins and padding; showcasing visual differences in spacing and size.']}, {'end': 5599.36, 'start': 5249.214, 'title': 'Understanding box model properties', 'summary': "Covers the application and visualization of padding, border, and outline properties, showcasing different values and their impact, with specific examples such as specifying individual settings for borders and using outline dash offset to manipulate the outline's position and appearance.", 'duration': 350.146, 'highlights': ['The chapter covers the application and visualization of padding, border, and outline properties The chapter discusses the application and visualization of padding, border, and outline properties for better understanding and manipulation.', 'showcasing different values and their impact, with specific examples such as specifying individual settings for borders The chapter showcases the impact of different values and provides specific examples of specifying individual settings for borders.', "using outline dash offset to manipulate the outline's position and appearance The chapter demonstrates the use of outline dash offset to manipulate the outline's position and appearance, including the use of negative values for the offset."]}, {'end': 6051.614, 'start': 5599.6, 'title': 'Creating a circle from a box in css', 'summary': 'Demonstrates how to transform a box into a circle using css, achieving this by setting a div element with the specified class and applying various styling properties such as width, height, border, outline, and margin, culminating in the use of border radius to create a circle with a radius of 50 pixels. additionally, the chapter briefly covers css typography and inheritance.', 'duration': 452.014, 'highlights': ['The chapter demonstrates creating a circle from a box using CSS by setting a div element with the specified class and applying various styling properties such as width, height, border, outline, and margin. The demonstration includes setting a div element with a class, applying styling properties such as width, height, border, outline, and margin, and culminates in the use of border radius to create a circle.', 'The use of border radius to create a circle with a radius of 50 pixels is showcased, providing a visual demonstration of the transformation from a box to a circle. The specific use of border radius to set the radius to 50 pixels is highlighted, demonstrating the transformation of the square into a circle.', 'CSS typography and inheritance are briefly mentioned, specifically addressing the inheritance of font size to child elements and the change of text color using the color property. The chapter briefly covers CSS typography and inheritance, including the inheritance of font size to child elements and the change of text color using the color property.']}, {'end': 6349.449, 'start': 6052.075, 'title': 'Text settings in html and css', 'summary': 'Covers how to remove form elements from html and css, change text decorations, transform text, and align text in different ways for better visual presentation.', 'duration': 297.374, 'highlights': ['The chapter covers how to remove form elements from HTML and CSS The tutorial explains how to remove a form from an HTML page using VS Code shortcuts.', 'Change text decorations, transform text, and align text in different ways It covers different text decorations such as underline, overline, and line-through, as well as text transformations like capitalize, lowercase, and uppercase.', 'Setting text alignment for better visual presentation It explains text alignment options including left, justify, and right, as well as how to use text-indent to indent the first line of a paragraph.']}], 'duration': 1922.636, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA4426813.jpg', 'highlights': ["The box model layers include content, padding, border, and margin, providing a visual representation of the element's structure and spacing.", "Default margin settings for H1 element show a 32.16 pixels margin due to the browser's user agent style sheet, influenced by the font size set to 3 rem (48 pixels), clarifying the impact of font size on default styles.", 'Explaining the significance of CSS reset by setting margin and padding to zero for all elements, and introducing the box-sizing property to control the calculation of element sizes, emphasizing the need for taking control of element styles for precise web development.', 'The chapter demonstrates creating a circle from a box using CSS by setting a div element with the specified class and applying various styling properties such as width, height, border, outline, and margin.', 'The chapter covers how to remove form elements from HTML and CSS The tutorial explains how to remove a form from an HTML page using VS Code shortcuts.']}, {'end': 9130.862, 'segs': [{'end': 6472.303, 'src': 'embed', 'start': 6446.901, 'weight': 8, 'content': [{'end': 6453.83, 'text': "It really spaces those letters out, doesn't it? We probably don't want to stick with that unless we're going for some kind of special effect.", 'start': 6446.901, 'duration': 6.929}, {'end': 6457.415, 'text': 'Maybe down to 0.25.', 'start': 6454.872, 'duration': 2.543}, {'end': 6460.96, 'text': "Well, it's definitely more readable, but it looks kind of weird to me still.", 'start': 6457.415, 'duration': 3.545}, {'end': 6464.841, 'text': 'Maybe 0.1.', 'start': 6461.08, 'duration': 3.761}, {'end': 6470.742, 'text': 'And you may see text like that somewhere, sometime in a heading or something to draw attention to.', 'start': 6464.841, 'duration': 5.901}, {'end': 6472.303, 'text': 'That looks like it may work,', 'start': 6471.002, 'duration': 1.301}], 'summary': 'Experimenting with letter spacing for better readability and visual impact, possibly down to 0.1 or 0.25.', 'duration': 25.402, 'max_score': 6446.901, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA6446901.jpg'}, {'end': 6613.712, 'src': 'embed', 'start': 6563.758, 'weight': 5, 'content': [{'end': 6571.984, 'text': 'and yeah, maybe normal was more like 300 for this particular font, but overall, for 300 to 400 is kind of normal.', 'start': 6563.758, 'duration': 8.226}, {'end': 6576.847, 'text': "let's go back and see what visual studio code offers for values that we could choose from.", 'start': 6571.984, 'duration': 4.863}, {'end': 6585.953, 'text': "so now you see, we've got 100 through 900, 900 being very bold and 100 being not bold at all.", 'start': 6576.847, 'duration': 9.106}, {'end': 6587.754, 'text': "and then there's also just some words.", 'start': 6585.953, 'duration': 1.801}, {'end': 6591.877, 'text': 'we could choose bold, bolder, lighter and then, of course, normal.', 'start': 6587.754, 'duration': 4.123}, {'end': 6595.199, 'text': "so let's go with normal and see what that looks like.", 'start': 6591.877, 'duration': 3.322}, {'end': 6597.801, 'text': 'well, normal looks more like what we had at 400.', 'start': 6595.199, 'duration': 2.602}, {'end': 6607.808, 'text': "there let's go with lighter and save, and it's not too light, but it's noticeably lighter than it was.", 'start': 6597.801, 'duration': 10.007}, {'end': 6611.991, 'text': "let's go with bolder and that's very bold.", 'start': 6607.808, 'duration': 4.183}, {'end': 6613.712, 'text': 'we can definitely see the difference there.', 'start': 6611.991, 'duration': 1.721}], 'summary': 'Font weight ranges from 100 to 900. bolder is very bold, lighter is noticeably lighter, and normal is around 300 to 400.', 'duration': 49.954, 'max_score': 6563.758, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA6563758.jpg'}, {'end': 7118.886, 'src': 'embed', 'start': 7090.673, 'weight': 2, 'content': [{'end': 7095.754, 'text': 'And now Google is also saying we need to apply this line in our CSS to use it.', 'start': 7090.673, 'duration': 5.081}, {'end': 7099.115, 'text': 'Notice Roboto has a sans serif fallback.', 'start': 7095.854, 'duration': 3.261}, {'end': 7100.816, 'text': "So it's part of that font family.", 'start': 7099.155, 'duration': 1.661}, {'end': 7108.82, 'text': "I'll copy that go to the CSS and where I had Arial Helvetica and Sans Serif here,", 'start': 7101.596, 'duration': 7.224}, {'end': 7114.424, 'text': 'I will replace it with what Google suggested and provide Roboto and Sans Serif.', 'start': 7108.82, 'duration': 5.604}, {'end': 7118.886, 'text': "And note, they put quotes around Roboto, and that won't hurt anything either.", 'start': 7114.824, 'duration': 4.062}], 'summary': "Google suggests using 'roboto' font with sans serif fallback in css.", 'duration': 28.213, 'max_score': 7090.673, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA7090673.jpg'}, {'end': 7563.387, 'src': 'embed', 'start': 7535.511, 'weight': 0, 'content': [{'end': 7538.413, 'text': "So we'll once again select the anchor element,", 'start': 7535.511, 'duration': 2.902}, {'end': 7547.015, 'text': 'but now we put a colon and now I can put a definition after here that defines which pseudo class that I want to select.', 'start': 7538.413, 'duration': 8.602}, {'end': 7551.538, 'text': 'And right now, I want to select the visited pseudo class.', 'start': 7547.536, 'duration': 4.002}, {'end': 7558.724, 'text': 'And pseudo classes represent the current state of the element, because a state of an anchor element can change.', 'start': 7551.699, 'duration': 7.025}, {'end': 7561.325, 'text': "It has either been visited or it hasn't.", 'start': 7559.304, 'duration': 2.021}, {'end': 7563.387, 'text': "And there are some others that we'll cover as well.", 'start': 7561.445, 'duration': 1.942}], 'summary': 'Select the visited pseudo class for anchor elements to represent their current state.', 'duration': 27.876, 'max_score': 7535.511, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA7535511.jpg'}, {'end': 7615.897, 'src': 'embed', 'start': 7583.053, 'weight': 1, 'content': [{'end': 7585.834, 'text': "When we hover over the link, it doesn't have a default value.", 'start': 7583.053, 'duration': 2.781}, {'end': 7591.316, 'text': "Right now, if we hover over a link, it doesn't change at all, either the visited or the not visited link.", 'start': 7585.914, 'duration': 5.402}, {'end': 7593.517, 'text': 'Both of them still just stay the same.', 'start': 7591.856, 'duration': 1.661}, {'end': 7595.498, 'text': "So let's go ahead and change this.", 'start': 7593.957, 'duration': 1.541}, {'end': 7598.982, 'text': "And for now, let's just choose a different blue.", 'start': 7596.298, 'duration': 2.684}, {'end': 7607.072, 'text': "And I'm going to show you a trick or two where you can choose something kind of in the same range of the color you have selected for your link.", 'start': 7599.262, 'duration': 7.81}, {'end': 7610.196, 'text': "But first let's just choose a blue randomly here.", 'start': 7607.112, 'duration': 3.084}, {'end': 7615.897, 'text': 'So now when we hover, Notice JavaScript is changing colors when I hover over it.', 'start': 7610.276, 'duration': 5.621}], 'summary': 'Links do not change color on hover, change to a different blue, javascript changes color on hover.', 'duration': 32.844, 'max_score': 7583.053, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA7583053.jpg'}, {'end': 9130.862, 'src': 'embed', 'start': 9102.509, 'weight': 3, 'content': [{'end': 9104.252, 'text': 'So if these were numbers, it would be 543.', 'start': 9102.509, 'duration': 1.743}, {'end': 9106.655, 'text': 'It corresponds to the letters.', 'start': 9104.252, 'duration': 2.403}, {'end': 9110.16, 'text': 'But we can also specify a value.', 'start': 9107.116, 'duration': 3.044}, {'end': 9117.47, 'text': 'So if we say value here and we put in 26, this will definitely make a difference.', 'start': 9110.28, 'duration': 7.19}, {'end': 9121.775, 'text': 'Now notice, Z is the 26th letter of the alphabet.', 'start': 9117.53, 'duration': 4.245}, {'end': 9125.698, 'text': 'So the number corresponds still to whatever the order is.', 'start': 9121.915, 'duration': 3.783}, {'end': 9127.099, 'text': "And we're going in reverse order.", 'start': 9125.778, 'duration': 1.321}, {'end': 9130.862, 'text': 'So instead of X, Y, Z, it went Z, Y right here.', 'start': 9127.139, 'duration': 3.723}], 'summary': 'Transcript explains letter-number correspondence with value 26, resulting in reverse zyx order.', 'duration': 28.353, 'max_score': 9102.509, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA9102509.jpg'}], 'start': 6349.509, 'title': 'Typography and font styling in css', 'summary': 'Discusses the impact of typography properties on readability, covers font properties and families, explains the use of google fonts in css, and explores styling hypertext links and ordered and unordered lists, with emphasis on recommended adjustments and visual impact.', 'chapters': [{'end': 6520.616, 'start': 6349.509, 'title': 'Typography properties impacting readability', 'summary': 'Discusses the impact of line height, letter spacing, and word spacing on typography, highlighting the default values and the recommended adjustments for improved readability.', 'duration': 171.107, 'highlights': ['The default line height is usually around 1.2, but a setting of 1.4 or 1.5 significantly improves readability, as observed in the paragraph.', 'Increasing the line height to 1.5 notably enhances the readability of the text, particularly on screens and at a distance.', 'Adjusting letter spacing and word spacing can create special effects or draw attention, but may not significantly improve readability compared to the default settings.', 'The chapter emphasizes the impact of typography properties like line height, letter spacing, and word spacing on readability, providing specific examples and recommended adjustments.']}, {'end': 7068.582, 'start': 6520.616, 'title': 'Font properties and families', 'summary': 'Covers font properties including font size, weight, style, and family, with examples of values and their visual impact, as well as a detailed exploration of generic and specific font families, and the process of linking external fonts from google fonts.', 'duration': 547.966, 'highlights': ['The chapter covers font properties including font size, weight, style, and family, with examples of values and their visual impact. The transcript delves into various font properties such as font size, weight (ranging from 100 to 900), and style (including italic, oblique, and normal), providing examples and visual demonstrations of their impact.', 'Detailed exploration of generic and specific font families. The transcript provides an in-depth overview of generic font families like serif, sans serif, monospace, cursive, and fantasy, and specific font families like Courier New, Arial, Verdana, Geneva, Tahoma, and Times New Roman, along with visual demonstrations of their appearances and usage.', 'Process of linking external fonts from Google Fonts. The transcript explains the process of linking external fonts from Google Fonts, including choosing different styles and obtaining the link or import code to integrate the selected font into the HTML document.']}, {'end': 7310.21, 'start': 7068.582, 'title': 'Using google fonts in css', 'summary': 'Explains how to use google fonts in css, including loading fonts, applying them in css, and using @import in css instead of the link in html, with emphasis on the impact of loading multiple fonts from google on page load time.', 'duration': 241.628, 'highlights': ['Explaining how to use @import in CSS instead of the link in HTML The tutorial demonstrates the use of @import in CSS, highlighting its shorter code and placement directly in the CSS file.', 'Impact of loading multiple fonts from Google on page load time It emphasizes the trade-off between loading more fonts from Google and the resulting increase in page load time, advising to limit the number of fonts to what is necessary.', 'Applying Google Fonts in CSS The process of applying Google Fonts in CSS is explained, with a specific example of replacing the font stack with the suggested Google font and its sans-serif fallback.']}, {'end': 8275.874, 'start': 7310.511, 'title': 'Styling hypertext links', 'summary': 'Discusses the default styles of hypertext links in html, covering the underline, colors for visited and unvisited links, cursor styles, pseudo classes like visited, hover, active, and focus, and techniques to change link colors using hsl, rgba, and opacity. it also discusses applying styles to ordered and unordered lists in html.', 'duration': 965.363, 'highlights': ['The default styles of hypertext links are discussed, including underlined, blue for unvisited links, purple for visited links, and pointer cursor. The default styles of hypertext links, such as underlined format, blue color for unvisited links, purple color for visited links, and the pointer cursor, are explained.', 'Explanation of pseudo classes in HTML, covering visited, hover, active, and focus, with examples of changing link colors for each state. The chapter explains pseudo classes in HTML like visited, hover, active, and focus, with demonstrations of changing link colors for each state.', 'Techniques for changing link colors using HSL, RGBA, and opacity, including altering colors with HSL and adding transparency with opacity and RGBA. Methods for changing link colors using HSL, RGBA, and opacity are discussed, showcasing the approach to alter colors with HSL and add transparency with opacity and RGBA.', 'Applying styles to ordered and unordered lists in HTML is covered, highlighting the differences between the two types of lists and their HTML representation. The chapter discusses applying styles to ordered and unordered lists in HTML, emphasizing the distinctions between the two types of lists and their HTML representation.']}, {'end': 9130.862, 'start': 8276.093, 'title': 'Styling ordered and unordered lists', 'summary': 'Covers the styling of ordered and unordered lists using css, including properties like list-style-type, list-style-position, and list-style-image, as well as html attributes like start and reversed, with examples of changing markers using pseudo-elements and pseudo-classes.', 'duration': 854.769, 'highlights': ['The live server extension allows immediate updates of CSS changes in the browser. The live server extension enables automatic updates of CSS changes in the browser, providing real-time feedback.', 'The list-style-type property in CSS allows customization of the appearance of ordered and unordered lists, including options like lower alpha, decimal, and symbols. The list-style-type property in CSS offers various customization options for ordered and unordered lists, such as lower alpha, decimal, and symbols.', 'The list-style-position property affects the alignment of bullet points in unordered lists and can be set to inside or outside. The list-style-position property impacts the alignment of bullet points in unordered lists, offering options like inside or outside alignment.', 'Applying the color property to list items changes both the bullet points and text color. The color property applied to list items modifies both the bullet points and text color simultaneously.', 'The list style image property allows for using custom images as bullet points in lists. The list-style-image property permits the use of custom images as bullet points within lists, offering a personalized touch.', 'The shorthand list style property allows setting the type, image, and position of list items efficiently. The shorthand list-style property provides a convenient way to specify the type, image, and position of list items in a concise manner.', 'Pseudo-classes and pseudo-elements, such as nth-child and marker, enable targeted styling of individual list items and marker content. Pseudo-classes and pseudo-elements, like nth-child and marker, facilitate precise styling of individual list items and marker content for enhanced customization.', 'The content property within a pseudo-element allows for the addition of custom content, such as text or icons, beside list markers. The content property in a pseudo-element offers the capability to include custom content, like text or icons, alongside list markers, enhancing visual appeal.']}], 'duration': 2781.353, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA6349509.jpg', 'highlights': ['The live server extension enables automatic updates of CSS changes in the browser, providing real-time feedback.', 'The default line height is usually around 1.2, but a setting of 1.4 or 1.5 significantly improves readability, as observed in the paragraph.', 'The chapter emphasizes the impact of typography properties like line height, letter spacing, and word spacing on readability, providing specific examples and recommended adjustments.', 'The chapter covers font properties including font size, weight, style, and family, with examples of values and their visual impact.', 'The process of linking external fonts from Google Fonts is explained, including choosing different styles and obtaining the link or import code to integrate the selected font into the HTML document.', 'The list-style-type property in CSS offers various customization options for ordered and unordered lists, such as lower alpha, decimal, and symbols.', 'The list-style-position property impacts the alignment of bullet points in unordered lists, offering options like inside or outside alignment.', 'The shorthand list-style property provides a convenient way to specify the type, image, and position of list items in a concise manner.', 'Pseudo-classes and pseudo-elements, like nth-child and marker, facilitate precise styling of individual list items and marker content for enhanced customization.']}, {'end': 10811.509, 'segs': [{'end': 9204.361, 'src': 'embed', 'start': 9177.375, 'weight': 0, 'content': [{'end': 9182.496, 'text': 'And this unordered list has several list items, all have their own anchor links.', 'start': 9177.375, 'duration': 5.121}, {'end': 9184.837, 'text': "And it doesn't really matter where they're linking to today.", 'start': 9182.656, 'duration': 2.181}, {'end': 9191.218, 'text': 'I just have it linking to our other pages one and two that were there just to link to in previous tutorials.', 'start': 9184.897, 'duration': 6.321}, {'end': 9198.22, 'text': 'But what we have is a list of appetizers, entrees, desserts, beverages, and then it just says about.', 'start': 9191.818, 'duration': 6.402}, {'end': 9204.361, 'text': "Things you might actually find on a menu in a restaurant as well as a menu on a restaurant's website.", 'start': 9198.6, 'duration': 5.761}], 'summary': 'The transcript discusses an unordered list with anchor links to appetizers, entrees, desserts, beverages, and other pages.', 'duration': 26.986, 'max_score': 9177.375, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA9177375.jpg'}, {'end': 9829.486, 'src': 'embed', 'start': 9800.195, 'weight': 1, 'content': [{'end': 9805.117, 'text': "So everything works there as expected, but there's still one change we need to make.", 'start': 9800.195, 'duration': 4.922}, {'end': 9807.578, 'text': "Can you guess what it is? Here's a hint.", 'start': 9805.357, 'duration': 2.221}, {'end': 9808.858, 'text': "It's right here.", 'start': 9808.118, 'duration': 0.74}, {'end': 9810.679, 'text': 'Look at those bottom corners.', 'start': 9809.399, 'duration': 1.28}, {'end': 9812.64, 'text': "They're not rounding either.", 'start': 9811.139, 'duration': 1.501}, {'end': 9816.141, 'text': "They're not respecting that border radius that we set on the nav.", 'start': 9813.06, 'duration': 3.081}, {'end': 9819.222, 'text': 'So we need to make a change to help enforce that as well.', 'start': 9816.201, 'duration': 3.021}, {'end': 9820.263, 'text': "I'm going to scroll up.", 'start': 9819.362, 'duration': 0.901}, {'end': 9822.524, 'text': 'So this will be the last thing we put in our file.', 'start': 9820.343, 'duration': 2.181}, {'end': 9829.486, 'text': 'This is a little more difficult than when we rounded the corners for the H2 because the H2 is easy to select.', 'start': 9823.004, 'duration': 6.482}], 'summary': 'Adjusting bottom corners to respect border radius on nav', 'duration': 29.291, 'max_score': 9800.195, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA9800195.jpg'}, {'end': 10087.092, 'src': 'embed', 'start': 10057.315, 'weight': 4, 'content': [{'end': 10057.976, 'text': 'we set that.', 'start': 10057.315, 'duration': 0.661}, {'end': 10066.641, 'text': 'you can see we are covering part of the main element with the paragraphs, but the part that you can see where there is margin, it turned aqua.', 'start': 10057.976, 'duration': 8.665}, {'end': 10071.424, 'text': 'so now we could take away this background color and you can see aqua across the whole thing.', 'start': 10066.641, 'duration': 4.783}, {'end': 10077.827, 'text': "so now that we've done that, let's also go ahead and change the width of the main element.", 'start': 10071.424, 'duration': 6.403}, {'end': 10082.05, 'text': "So let's set it to a width of 50%.", 'start': 10077.927, 'duration': 4.123}, {'end': 10087.092, 'text': 'And now you can see the paragraphs do not extend all the way across our page.', 'start': 10082.05, 'duration': 5.042}], 'summary': 'Modifying main element: removed background color, set width to 50%.', 'duration': 29.777, 'max_score': 10057.315, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA10057315.jpg'}, {'end': 10231.06, 'src': 'embed', 'start': 10201.705, 'weight': 8, 'content': [{'end': 10204.766, 'text': 'So our span element has a class of opposite.', 'start': 10201.705, 'duration': 3.061}, {'end': 10208.168, 'text': 'And we changed the color for the background and the text.', 'start': 10205.326, 'duration': 2.842}, {'end': 10212.51, 'text': "But let's see what we can and can't do with an inline element.", 'start': 10208.568, 'duration': 3.942}, {'end': 10218.913, 'text': "And so now let's go ahead and try to put a margin on the top of 100 pixels.", 'start': 10213.05, 'duration': 5.863}, {'end': 10222.675, 'text': 'And you can see nothing changes.', 'start': 10220.934, 'duration': 1.741}, {'end': 10228.118, 'text': "We can't apply a top or bottom margin to a inline element.", 'start': 10223.155, 'duration': 4.963}, {'end': 10231.06, 'text': "Likewise, we'll try a different one.", 'start': 10228.418, 'duration': 2.642}], 'summary': 'Changed background & text color for span element. unable to add top or bottom margin to inline element.', 'duration': 29.355, 'max_score': 10201.705, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA10201705.jpg'}, {'end': 10765.924, 'src': 'embed', 'start': 10686.578, 'weight': 2, 'content': [{'end': 10687.939, 'text': "And now we'll say color.", 'start': 10686.578, 'duration': 1.361}, {'end': 10690.12, 'text': "We'll make them white.", 'start': 10689.199, 'duration': 0.921}, {'end': 10695.083, 'text': "And then we'll have a text decoration of none.", 'start': 10690.66, 'duration': 4.423}, {'end': 10699.586, 'text': 'And when we save, we now see the words in white with no underlines.', 'start': 10695.684, 'duration': 3.902}, {'end': 10702.188, 'text': "After that, let's scroll for a little more room.", 'start': 10700.367, 'duration': 1.821}, {'end': 10708.011, 'text': "And we'll say list item anchor tag hover pseudo class.", 'start': 10702.908, 'duration': 5.103}, {'end': 10713.195, 'text': 'And once again, list item anchor tag focus pseudo class.', 'start': 10708.152, 'duration': 5.043}, {'end': 10717.809, 'text': "And for that, let's just change the text decoration.", 'start': 10714.946, 'duration': 2.863}, {'end': 10721.833, 'text': "Instead of the color, let's just go back to the underline style.", 'start': 10717.929, 'duration': 3.904}, {'end': 10725.216, 'text': 'So when we hover over, they now show as links.', 'start': 10721.913, 'duration': 3.303}, {'end': 10728.92, 'text': 'Now, there are other display values that we could use.', 'start': 10725.717, 'duration': 3.203}, {'end': 10735.226, 'text': "And we're going to have separate modules on the display type of flex and the display type of grid.", 'start': 10729, 'duration': 6.226}, {'end': 10741.956, 'text': "And when we do that, we'll learn how to complete our menu bar that might have something over here on the left as well.", 'start': 10735.726, 'duration': 6.23}, {'end': 10745.942, 'text': "But before we go, there's one other value I do want to cover.", 'start': 10742.397, 'duration': 3.545}, {'end': 10752.831, 'text': 'And instead of inline, block, block or just inline, you might have a value of none.', 'start': 10746.062, 'duration': 6.769}, {'end': 10756.575, 'text': 'and look what happens all the list items just disappeared.', 'start': 10752.831, 'duration': 3.744}, {'end': 10758.517, 'text': "so let's go ahead and change that back.", 'start': 10756.575, 'duration': 1.942}, {'end': 10763.261, 'text': 'so they show up and maybe we want our entire bar to disappear.', 'start': 10758.517, 'duration': 4.744}, {'end': 10765.924, 'text': 'and right now that is an unordered list.', 'start': 10763.261, 'duration': 2.663}], 'summary': 'Styling changes made to text, anchor tag, and display types with examples of pseudo classes and quantifiable data', 'duration': 79.346, 'max_score': 10686.578, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA10686578.jpg'}], 'start': 9130.922, 'title': 'Css styling techniques', 'summary': 'Covers styling lists in css and encourages building a mini project, demonstrates styling html using css, explains the css display property with practical applications, and covers styling horizontal lists in css.', 'chapters': [{'end': 9221.464, 'start': 9130.922, 'title': 'Styling lists and building a mini project', 'summary': "Covers styling lists in css and encourages building a mini project to apply the learned concepts, including creating a nav element with an unordered list and anchor links for appetizers, entrees, desserts, beverages, and a separate link for 'learn more about amazing foods'.", 'duration': 90.542, 'highlights': ['The chapter emphasizes the importance of styling lists in CSS and encourages applying the learned concepts by building a mini project, bringing together different pieces of knowledge (relevance: 5)', "The chapter demonstrates creating a nav element with an unordered list containing anchor links for appetizers, entrees, desserts, beverages, and a separate link for 'learn more about amazing foods' (relevance: 4)", 'The chapter also mentions having Visual Studio Code open and working with an index.html file for the mini project (relevance: 3)']}, {'end': 9724.009, 'start': 9221.764, 'title': 'Styling html and css', 'summary': 'Demonstrates styling html using css, covering concepts such as css reset, font import, text alignment, border styling, typography, and pseudo-classes, with specific details on values and visual changes.', 'duration': 502.245, 'highlights': ['The chapter demonstrates applying a CSS reset by setting margin and padding to zero and box sizing to border box, resulting in the elimination of default styles and visual changes in the layout. CSS reset applied to eliminate default styles; Margin and padding set to zero; Box sizing set to border box.', 'The chapter covers the application of font family, specifically using the Roboto font with a fallback of Sans Serif, resulting in an instant change in font displayed on the page. Application of font family with a fallback; Instant change in font displayed on the page.', 'The chapter explains the process of setting text alignment for the entire page to center, resulting in the visual center alignment of all text on the page. Text alignment set to center for the entire page; Visual center alignment of all text on the page.', 'The chapter demonstrates the application of border and border radius to the nav element, resulting in the addition of a border and rounded corners to the element, with specific values and visual changes. Application of border and border radius to the nav element; Addition of a border and rounded corners to the element.', 'The chapter covers the removal of default bullet points from the list items and the application of styling to the links within the list, including pseudo-classes for visited, hover, and focus, resulting in visual changes to the list items and links. Removal of default bullet points from list items; Application of styling to links within the list; Pseudo-classes for visited, hover, and focus applied.']}, {'end': 10401.876, 'start': 9724.369, 'title': 'Understanding css display property', 'summary': 'Explains the css display property, highlighting the differences between block and inline elements, demonstrating the use of display block to change anchor tags, and introducing the inline-block property for hybrid styling, culminating in a practical application for turning a link into a button.', 'duration': 677.507, 'highlights': ['Block level elements have 100% width by default, and stack on top of each other, creating a new line, while inline elements only take up the width of their content. Block level elements automatically have a 100% width of whatever they are given, and they stack on top of each other to create a new line. Inline elements only take up the width of their content.', 'Demonstrated the use of display block to change anchor tags to block level elements, allowing them to have 100% width and fill the entire space of list items when mouse over. By using display block, the anchor tags were changed to block level elements, enabling them to have 100% width and fill the entire space of list items when moused over.', 'Introduced the inline-block property as a hybrid option, allowing inline elements to respect top and bottom margins and other properties typically applicable only to block level elements. The chapter introduced the inline-block property as a hybrid option, enabling inline elements to respect top and bottom margins and other properties that are typically applicable only to block level elements.', 'Highlighted a practical application for using inline-block by turning a link into a button, demonstrating the versatility of the display property for styling elements. The chapter demonstrated a practical application for using inline-block by turning a link into a button, showcasing the versatility of the display property for styling elements.']}, {'end': 10811.509, 'start': 10402.036, 'title': 'Styling horizontal lists in css', 'summary': 'Covers the process of styling a horizontal list in css, including removing default list styles, aligning list items, applying margins and padding, changing link styles, and altering the display property.', 'duration': 409.473, 'highlights': ['The chapter covers the process of styling a horizontal list in CSS The chapter discusses the process of styling a horizontal list in CSS, demonstrating the steps to achieve a horizontal layout for a list of links.', 'including removing default list styles, aligning list items, applying margins and padding, changing link styles, and altering the display property The transcript details the steps involved in removing default list styles, aligning list items, applying margins and padding, changing link styles, and altering the display property to create a customized horizontal list layout in CSS.']}], 'duration': 1680.587, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA9130922.jpg', 'highlights': ['The chapter emphasizes the importance of styling lists in CSS and encourages applying the learned concepts by building a mini project, bringing together different pieces of knowledge (relevance: 5)', "The chapter demonstrates creating a nav element with an unordered list containing anchor links for appetizers, entrees, desserts, beverages, and a separate link for 'learn more about amazing foods' (relevance: 4)", 'The chapter demonstrates applying a CSS reset by setting margin and padding to zero and box sizing to border box, resulting in the elimination of default styles and visual changes in the layout. CSS reset applied to eliminate default styles; Margin and padding set to zero; Box sizing set to border box.', 'The chapter covers the application of font family, specifically using the Roboto font with a fallback of Sans Serif, resulting in an instant change in font displayed on the page. Application of font family with a fallback; Instant change in font displayed on the page.', 'The chapter explains the process of setting text alignment for the entire page to center, resulting in the visual center alignment of all text on the page. Text alignment set to center for the entire page; Visual center alignment of all text on the page.', 'The chapter demonstrates the application of border and border radius to the nav element, resulting in the addition of a border and rounded corners to the element, with specific values and visual changes. Application of border and border radius to the nav element; Addition of a border and rounded corners to the element.', 'Block level elements have 100% width by default, and stack on top of each other, creating a new line, while inline elements only take up the width of their content. Block level elements automatically have a 100% width of whatever they are given, and they stack on top of each other to create a new line. Inline elements only take up the width of their content.', 'The chapter covers the process of styling a horizontal list in CSS The chapter discusses the process of styling a horizontal list in CSS, demonstrating the steps to achieve a horizontal layout for a list of links.', 'Introduced the inline-block property as a hybrid option, allowing inline elements to respect top and bottom margins and other properties typically applicable only to block level elements. The chapter introduced the inline-block property as a hybrid option, enabling inline elements to respect top and bottom margins and other properties that are typically applicable only to block level elements.']}, {'end': 12290.661, 'segs': [{'end': 11239.919, 'src': 'embed', 'start': 11220.167, 'weight': 6, 'content': [{'end': 11232.715, 'text': "Maybe we want to wrap this first paragraph and this div that I've floated to the left in a container and kind of highlight that at the top and then have the second paragraph start afterwards.", 'start': 11220.167, 'duration': 12.548}, {'end': 11234.776, 'text': 'We might have to handle that differently.', 'start': 11233.095, 'duration': 1.681}, {'end': 11239.919, 'text': "Or let's say we didn't even have the container, But we didn't want this second paragraph to wrap.", 'start': 11234.977, 'duration': 4.942}], 'summary': 'Suggests wrapping first paragraph and div in container, addressing second paragraph differently.', 'duration': 19.752, 'max_score': 11220.167, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA11220167.jpg'}, {'end': 11297.187, 'src': 'embed', 'start': 11268.357, 'weight': 0, 'content': [{'end': 11270.62, 'text': "But it's very easy to just say both.", 'start': 11268.357, 'duration': 2.263}, {'end': 11272.342, 'text': 'And then it will clear both.', 'start': 11270.8, 'duration': 1.542}, {'end': 11275.545, 'text': "And you'll see what this does in just a moment here.", 'start': 11272.822, 'duration': 2.723}, {'end': 11277.968, 'text': 'So what I need to do is come back.', 'start': 11275.585, 'duration': 2.383}, {'end': 11288.34, 'text': 'And then after the first paragraph, if I wanted to clear that, the old way would be to apply another div to the page and give it this class of clear.', 'start': 11278.669, 'duration': 9.671}, {'end': 11289.481, 'text': 'And just leave it empty.', 'start': 11288.44, 'duration': 1.041}, {'end': 11290.682, 'text': 'And we would save.', 'start': 11289.841, 'duration': 0.841}, {'end': 11297.187, 'text': "And then you can see the second paragraph doesn't start until after this div.", 'start': 11291.443, 'duration': 5.744}], 'summary': "Demonstrates clearing paragraphs using div class 'clear'.", 'duration': 28.83, 'max_score': 11268.357, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA11268357.jpg'}, {'end': 11600.304, 'src': 'embed', 'start': 11575.926, 'weight': 1, 'content': [{'end': 11583.694, 'text': "And if we look at the style.css, you can see I'm once again importing in the Roboto font from the Google fonts.", 'start': 11575.926, 'duration': 7.768}, {'end': 11587.397, 'text': 'And then I also have a couple of styles on the body.', 'start': 11584.395, 'duration': 3.002}, {'end': 11590.379, 'text': "We're applying the Roboto font with the font family.", 'start': 11587.557, 'duration': 2.822}, {'end': 11593.42, 'text': "And we've set the font size to 1.5 rem.", 'start': 11590.719, 'duration': 2.701}, {'end': 11595.121, 'text': "And that's it so far.", 'start': 11593.841, 'duration': 1.28}, {'end': 11597.083, 'text': "So let's go back to the HTML.", 'start': 11595.241, 'duration': 1.842}, {'end': 11600.304, 'text': 'And the first thing I want to do is create five paragraphs.', 'start': 11597.403, 'duration': 2.901}], 'summary': 'The style.css imports roboto font, applies it to body with a font size of 1.5 rem. html will include five paragraphs.', 'duration': 24.378, 'max_score': 11575.926, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA11575926.jpg'}, {'end': 11701.774, 'src': 'embed', 'start': 11622.679, 'weight': 5, 'content': [{'end': 11624.12, 'text': "I don't need to do that right now.", 'start': 11622.679, 'duration': 1.441}, {'end': 11631.084, 'text': 'What I do want to do now is add a section that will be a container for the first four paragraphs.', 'start': 11624.52, 'duration': 6.564}, {'end': 11638.668, 'text': "So we'll take this section And after the fourth paragraph, we'll put the closing element right there, the closing tag.", 'start': 11631.605, 'duration': 7.063}, {'end': 11639.609, 'text': 'And we can save.', 'start': 11638.749, 'duration': 0.86}, {'end': 11644.731, 'text': "It didn't auto format for me, so I'm going to select these and press Tab so it comes over.", 'start': 11640.009, 'duration': 4.722}, {'end': 11650.354, 'text': "And now I've got the first four paragraphs inside of this section element as a container.", 'start': 11645.252, 'duration': 5.102}, {'end': 11654.476, 'text': 'And then the final paragraph is outside of the section element.', 'start': 11650.514, 'duration': 3.962}, {'end': 11656.837, 'text': "And I'm also going to apply a class here.", 'start': 11654.816, 'duration': 2.021}, {'end': 11660.079, 'text': "Let's call this class Columns.", 'start': 11657.098, 'duration': 2.981}, {'end': 11661.64, 'text': 'I want it inside the quotes.', 'start': 11660.299, 'duration': 1.341}, {'end': 11666.97, 'text': "And now we're finished with the basic HTML so far.", 'start': 11663.228, 'duration': 3.742}, {'end': 11669.692, 'text': "So now let's move on to the CSS.", 'start': 11667.17, 'duration': 2.522}, {'end': 11673.754, 'text': "I'll click the file tree again, go to style.css.", 'start': 11669.912, 'duration': 3.842}, {'end': 11678.577, 'text': 'Now, with all of this saved, I guess we could quickly look at it in the browser.', 'start': 11674.195, 'duration': 4.382}, {'end': 11681.199, 'text': 'And we just see our five paragraphs over here.', 'start': 11678.717, 'duration': 2.482}, {'end': 11683.22, 'text': "So we're going to make some changes now.", 'start': 11681.279, 'duration': 1.941}, {'end': 11689.224, 'text': "And I'll drag VS Code back over to fill the full screen as we apply the columns.", 'start': 11683.82, 'duration': 5.404}, {'end': 11701.774, 'text': "OK, let's create our columns class so dot columns, and inside this class I'm going to set a column dash count, and let's set it to four columns.", 'start': 11689.624, 'duration': 12.15}], 'summary': "Adding a container for the first four paragraphs, then applying a class 'columns' and setting it to four columns in css.", 'duration': 79.095, 'max_score': 11622.679, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA11622679.jpg'}, {'end': 12040.492, 'src': 'embed', 'start': 12011.862, 'weight': 2, 'content': [{'end': 12015.967, 'text': 'We need to remove that top margin from the first paragraph.', 'start': 12011.862, 'duration': 4.105}, {'end': 12020.592, 'text': "But let's see if we can just remove it from all of the paragraphs and what happens.", 'start': 12016.528, 'duration': 4.064}, {'end': 12027.16, 'text': 'Notice our margin spacing between the paragraphs, as we see between the first and the second, for example.', 'start': 12020.813, 'duration': 6.347}, {'end': 12031.524, 'text': 'just is the spacing for that one margin, essentially.', 'start': 12028.001, 'duration': 3.523}, {'end': 12033.006, 'text': 'So here we see it again.', 'start': 12031.644, 'duration': 1.362}, {'end': 12037.61, 'text': 'Between the third and the second, we just see that top spacing.', 'start': 12033.486, 'duration': 4.124}, {'end': 12040.492, 'text': 'But if I highlight the second, we just see the bottom spacing.', 'start': 12037.73, 'duration': 2.762}], 'summary': 'Identify and remove top margin from paragraphs, assess impact on spacing. observe spacing between paragraphs.', 'duration': 28.63, 'max_score': 12011.862, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA12011862.jpg'}, {'end': 12147.915, 'src': 'embed', 'start': 12126.409, 'weight': 11, 'content': [{'end': 12135.631, 'text': "now let's add an h2 and inside the h2 let's just say next topic just some kind of generic header here and we can save that.", 'start': 12126.409, 'duration': 9.222}, {'end': 12143.213, 'text': "now let's go to our style css and let's go ahead and style that header as well will once again be specific.", 'start': 12135.631, 'duration': 7.582}, {'end': 12147.915, 'text': "So we'll say columns and then any H2 inside of our columns container.", 'start': 12143.313, 'duration': 4.602}], 'summary': "Adding an h2 with the text 'next topic' and styling it in the style.css file.", 'duration': 21.506, 'max_score': 12126.409, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA12126409.jpg'}], 'start': 10811.589, 'title': 'Css floats, display, and styling columns', 'summary': 'Covers css floats, including practical examples and text wrapping, the use of margin, positioning with float classes, handling floating elements with clear class, resolving issues with overflow and display, creating flexible columns with css, and styling columns, providing comprehensive coverage on modern css techniques and design principles.', 'chapters': [{'end': 11053.206, 'start': 10811.589, 'title': 'Css floats and display none', 'summary': "Discusses the application of css floats, demonstrated with a practical example of creating a square using 30 viewport width units, and the concept of text wrapping around floated elements is explained using a class called 'left'.", 'duration': 241.617, 'highlights': ['The chapter discusses the application of CSS floats This is the main topic of the transcript and forms the core concept of the summary.', 'Practical example of creating a square using 30 viewport width units Demonstrates a specific application of CSS using quantifiable data, adding practical value to the discussion.', "Concept of text wrapping around floated elements is explained using a class called 'left' Provides a clear understanding of a fundamental concept in CSS with a specific example, contributing to the comprehensive nature of the discussion."]}, {'end': 11374.763, 'start': 11053.666, 'title': 'Css floating and clearing', 'summary': 'Discusses the application of margin to floated elements, the use of float left and float right classes to position elements, and the use of the clear class to handle floating elements within a container.', 'duration': 321.097, 'highlights': ['The use of margin to adjust the position of floated elements is ineffective as it does not affect the expected positioning of the text. Applying margin to the paragraph does not correctly adjust the position of the text in relation to the floated element.', "Applying margin directly to the block itself, using specific classes like 'left' and 'right', effectively adjusts the positioning of the text in relation to the floated elements. Applying margin to the block using specific classes like 'left' or 'right' effectively adjusts the position of the text in relation to the floated elements.", "The clear class is used to handle situations where a floated element needs to be cleared within a container, ensuring that subsequent content is positioned correctly. The 'clear' class is used to ensure that subsequent content is positioned correctly after floated elements within a container."]}, {'end': 11575.426, 'start': 11375.244, 'title': 'Float and display in css', 'summary': 'Explores the issues related to floating elements in css and demonstrates the use of overflow auto and modern approach like display flow-root to resolve the problems, emphasizing the shift from legacy code to current methods.', 'duration': 200.182, 'highlights': ['The current modern way to fix this problem is to use display flow-root, as noted by mdn, which ensures the container element extends all the way down and contains the full floated element. The modern approach to fix the problem is to use display flow-root, ensuring the container extends to contain the full floated element.', 'Overflow auto is a possibility in legacy code to extend the container element to contain the full floated element, although the correct current way is to use display flow-root as per mdn. Overflow auto can be used in legacy code to extend the container to contain the full floated element, but the correct current way is to use display flow-root.', 'Floats were historically used to create columns on a page because there were no other methods available, but modern CSS offers alternative methods such as display flex and display grid. Historically, floats were used to create columns due to the unavailability of other methods, whereas modern CSS provides alternatives like display flex and display grid.']}, {'end': 11854.589, 'start': 11575.926, 'title': 'Creating columns with css', 'summary': 'Demonstrates creating columns with css using the column-count and column-width properties, resulting in a flexible design that automatically adjusts the number of columns based on the screen size, with examples of 4, 3, 2, and 1 column layouts.', 'duration': 278.663, 'highlights': ['Using CSS to create columns with the column-count and column-width properties, providing flexibility in the design based on the screen size, demonstrated with examples of 4, 3, 2, and 1 column layouts.', "Applying the column-count property to create four columns with a class called 'columns', resulting in the first four paragraphs being split into four columns, and the fifth paragraph remaining unaffected.", 'Adjusting the column-width property to ensure that the columns never go below 250 pixels per column, showcasing the flexibility in column layout as the screen size changes, supporting layouts of 4, 3, 2, and 1 column based on available space.', "Utilizing the shorthand 'columns' property to specify both the column count and width, providing a more concise way to define column layouts in CSS."]}, {'end': 12290.661, 'start': 11856.229, 'title': 'Styling columns in css', 'summary': 'Explains how to style columns in css, including setting column rules, providing spacing, addressing margin collapsing, and handling headers to achieve the desired layout and appearance of the webpage.', 'duration': 434.432, 'highlights': ['The chapter explains how to set column rules and provide spacing between columns in CSS. It covers setting column rules with specified properties such as size, type, and color, as well as providing spacing between columns using the column-gap property.', 'The chapter discusses margin collapsing and the impact of removing top margins from paragraphs. It addresses the issue of margin collapsing and demonstrates the impact of removing top margins from paragraphs, highlighting how it affects spacing and alignment within columns.', 'The chapter covers styling headers to achieve the desired appearance and layout, including addressing issues with padding and column breaks. It explains how to style headers within columns, addressing issues with padding, layout, and column breaks to ensure the desired appearance and alignment.']}], 'duration': 1479.072, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA10811589.jpg', 'highlights': ['Covers css floats, including practical examples and text wrapping, the use of margin, positioning with float classes, handling floating elements with clear class, resolving issues with overflow and display, creating flexible columns with css, and styling columns, providing comprehensive coverage on modern css techniques and design principles.', 'The chapter discusses the application of CSS floats This is the main topic of the transcript and forms the core concept of the summary.', 'Practical example of creating a square using 30 viewport width units Demonstrates a specific application of CSS using quantifiable data, adding practical value to the discussion.', "Concept of text wrapping around floated elements is explained using a class called 'left' Provides a clear understanding of a fundamental concept in CSS with a specific example, contributing to the comprehensive nature of the discussion.", "Applying margin directly to the block itself, using specific classes like 'left' and 'right', effectively adjusts the positioning of the text in relation to the floated elements. Applying margin to the block using specific classes like 'left' or 'right' effectively adjusts the position of the text in relation to the floated elements.", "The clear class is used to handle situations where a floated element needs to be cleared within a container, ensuring that subsequent content is positioned correctly. The 'clear' class is used to ensure that subsequent content is positioned correctly after floated elements within a container.", 'Using CSS to create columns with the column-count and column-width properties, providing flexibility in the design based on the screen size, demonstrated with examples of 4, 3, 2, and 1 column layouts.', "Applying the column-count property to create four columns with a class called 'columns', resulting in the first four paragraphs being split into four columns, and the fifth paragraph remaining unaffected.", 'Adjusting the column-width property to ensure that the columns never go below 250 pixels per column, showcasing the flexibility in column layout as the screen size changes, supporting layouts of 4, 3, 2, and 1 column based on available space.', "Utilizing the shorthand 'columns' property to specify both the column count and width, providing a more concise way to define column layouts in CSS.", 'The chapter explains how to set column rules and provide spacing between columns in CSS. It covers setting column rules with specified properties such as size, type, and color, as well as providing spacing between columns using the column-gap property.', 'The chapter covers styling headers to achieve the desired appearance and layout, including addressing issues with padding and column breaks. It explains how to style headers within columns, addressing issues with padding, layout, and column breaks to ensure the desired appearance and alignment.']}, {'end': 14255.212, 'segs': [{'end': 14227.699, 'src': 'embed', 'start': 14137.676, 'weight': 0, 'content': [{'end': 14144.599, 'text': "now this looks more like a social button and maybe you're used to seeing several buttons over here for different social media,", 'start': 14137.676, 'duration': 6.923}, {'end': 14146.42, 'text': 'but it should stay in place as we scroll.', 'start': 14144.599, 'duration': 1.821}, {'end': 14153.065, 'text': "so let's check it out and and it sure is it's staying right there as we scroll past each one of our pages.", 'start': 14146.42, 'duration': 6.645}, {'end': 14155.326, 'text': 'so we have header one, two and three.', 'start': 14153.065, 'duration': 2.261}, {'end': 14164.313, 'text': 'now, if we wanted it always on top, we could go ahead and set that z index and set that to one, And now, when we scroll,', 'start': 14155.326, 'duration': 8.987}, {'end': 14167.636, 'text': 'we should see it on top of each header as it goes by.', 'start': 14164.313, 'duration': 3.323}, {'end': 14168.617, 'text': 'And we do.', 'start': 14168.116, 'duration': 0.501}, {'end': 14178.324, 'text': 'So an ugly example, but an example nonetheless, where each page section say this is a single page application, or a SPA if you will.', 'start': 14169.077, 'duration': 9.247}, {'end': 14188.488, 'text': 'Each page section has its own header and Sticky allows those to scroll up and then stay in place until the content for that particular section is gone.', 'start': 14179.085, 'duration': 9.403}, {'end': 14193.25, 'text': 'And then we have our social media button over here with the rocket to the left.', 'start': 14189.209, 'duration': 4.041}, {'end': 14200.153, 'text': "And at the bottom, I showed you how to use Fixed or Sticky, and you've got links to each section.", 'start': 14193.81, 'duration': 6.343}, {'end': 14202.253, 'text': "OK, now let's check out these links.", 'start': 14200.373, 'duration': 1.88}, {'end': 14206.855, 'text': 'So if I click 3, it instantly shows 3.', 'start': 14202.513, 'duration': 4.342}, {'end': 14208.675, 'text': "Two, we're at section two.", 'start': 14206.855, 'duration': 1.82}, {'end': 14210.576, 'text': "One, we're at section one.", 'start': 14209.335, 'duration': 1.241}, {'end': 14216.297, 'text': "There's one more thing we can do that will make that look just a little cooler, if we want to,", 'start': 14210.916, 'duration': 5.381}, {'end': 14221.518, 'text': 'when we are choosing those different sections of our single page application.', 'start': 14216.297, 'duration': 5.221}, {'end': 14223.238, 'text': 'And we need to put this back up here.', 'start': 14221.558, 'duration': 1.68}, {'end': 14225.418, 'text': "I'll put it at the top of this new example.", 'start': 14223.278, 'duration': 2.14}, {'end': 14227.699, 'text': 'But it needs to go in the root element.', 'start': 14225.998, 'duration': 1.701}], 'summary': 'Demonstration of using fixed or sticky for social media buttons and section links in single page application.', 'duration': 90.023, 'max_score': 14137.676, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA14137676.jpg'}], 'start': 12291.101, 'title': 'Css styling techniques', 'summary': 'Covers styling html content with columns and css, css position property and its usage, examples of css positioning, making elements disappear for accessibility, and styling headers and footers with various properties and demonstrations.', 'chapters': [{'end': 12864.065, 'start': 12291.101, 'title': 'Styling html content with columns and css', 'summary': 'Discusses applying columns to html content, using css properties like column-span, and handling specificity issues, demonstrating how to style a quote and prevent line breaks for the author.', 'duration': 572.964, 'highlights': ['Applying Columns to HTML Content Demonstrated the use of the column-span property to span all columns on a web page, achieving a visually appealing layout.', 'Styling a Quote with Fancy Symbols Showed the incorporation of HTML entities and Unicode characters to create visually appealing quote symbols, enhancing the aesthetics of the content.', 'Handling Specificity Issues with CSS Explained the concept of specificity in CSS and resolved margin-top issues by adjusting the specificity of CSS selectors, providing a valuable learning experience.', "Preventing Line Breaks for the Author Name Illustrated the use of the white-space property to prevent line breaks for the author's name within a quote, ensuring consistent display across different screen sizes."]}, {'end': 13371.45, 'start': 12865.307, 'title': 'Css position property', 'summary': 'Discusses the css position property, demonstrating the usage of absolute, relative, and fixed positioning with detailed examples and visual representations.', 'duration': 506.143, 'highlights': ['The chapter provides visual demonstrations of the usage of absolute, relative, and fixed positioning in CSS. The transcript provides detailed examples and visual representations of how the absolute, relative, and fixed positioning in CSS can be used.', 'The usage of div elements and their positioning is explained, emphasizing the importance of semantic elements and accessibility. The transcript explains the usage of div elements and their positioning, highlighting the importance of semantic elements and accessibility in web development.', 'The impact of setting position values such as top, left, right, and bottom on element positioning is demonstrated with specific pixel values. The transcript demonstrates the impact of setting position values such as top, left, right, and bottom on element positioning with specific pixel values, providing a clear understanding of their influence.']}, {'end': 13612.313, 'start': 13371.45, 'title': 'Css positioning examples', 'summary': 'Introduces and explains the concepts of fixed, absolute, and sticky positioning in css, demonstrating their behavior and differences with practical examples, including the effect of z-index on layering and the behavior of sticky positioning when scrolling.', 'duration': 240.863, 'highlights': ['The fixed block is out of the flow of the page and remains in a fixed position, unaffected by scrolling, demonstrated by its behavior when the viewport is scrolled. The fixed block stays in a fixed position, 100 pixels from the top, and remains unaffected by scrolling, serving as a practical example of its behavior.', 'The behavior of absolute and fixed positioning in relation to the flow of the page and the layering of elements is explained, with practical demonstrations of their behavior and the effect of z-index on layering. The chapter explains the behavior of absolute and fixed positioning in relation to the flow of the page, demonstrating how the position of elements can be altered using z-index to control layering.', 'The behavior of sticky positioning is demonstrated, showing how it remains in its normal flow until reaching a defined spot and then scrolls off the page when the container ends. The concept of sticky positioning is explained and demonstrated, showing how it remains in its normal flow until reaching a defined spot and then scrolls off the page when the container ends, with practical examples of its behavior.']}, {'end': 13893.729, 'start': 13612.813, 'title': 'Making elements disappear for accessibility', 'summary': 'Discusses how to make elements disappear from a webpage while ensuring accessibility, such as using position absolute to keep items in the document for screen readers, and applying new styles to html elements with css.', 'duration': 280.916, 'highlights': ['Using position absolute to hide elements while keeping them accessible for screen readers. Position absolute can be used to keep elements in the document for accessibility, ensuring that they are still read by screen readers even when visually removed.', 'Applying new styles to HTML elements with CSS, including setting the height of sections and defining different background colors. The speaker demonstrates applying new styles to HTML elements using CSS, such as setting the height of sections and defining background colors for different classes.', 'Demonstrating how to comment out and uncomment HTML and CSS code in Visual Studio Code. The speaker shows the process of commenting out and uncommenting HTML and CSS code using Shift Alt+A in Visual Studio Code.']}, {'end': 14255.212, 'start': 13894.329, 'title': 'Styling headers and footers', 'summary': 'Covers the process of styling headers and footers, including setting colors, text alignment, height, font size, position, and background color. it also demonstrates the use of position fixed and sticky, as well as creating a social media button and implementing smooth scrolling behavior.', 'duration': 360.883, 'highlights': ['The chapter covers the process of styling headers and footers The chapter includes instructions on setting colors, text alignment, height, font size, position, and background color for headers and footers.', 'Demonstrates the use of position fixed and sticky The chapter explains the difference between position fixed and sticky for headers and footers, demonstrating their effects on scrolling behavior.', 'Creating a social media button and implementing smooth scrolling behavior The chapter shows how to create a social media button and implement smooth scrolling behavior using the scroll-behavior property.']}], 'duration': 1964.111, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA12291101.jpg', 'highlights': ['Applying Columns to HTML Content Demonstrated the use of the column-span property to span all columns on a web page, achieving a visually appealing layout.', 'Styling a Quote with Fancy Symbols Showed the incorporation of HTML entities and Unicode characters to create visually appealing quote symbols, enhancing the aesthetics of the content.', 'The chapter provides visual demonstrations of the usage of absolute, relative, and fixed positioning in CSS. The transcript provides detailed examples and visual representations of how the absolute, relative, and fixed positioning in CSS can be used.', 'The fixed block is out of the flow of the page and remains in a fixed position, unaffected by scrolling, demonstrated by its behavior when the viewport is scrolled. The fixed block stays in a fixed position, 100 pixels from the top, and remains unaffected by scrolling, serving as a practical example of its behavior.', 'Using position absolute to hide elements while keeping them accessible for screen readers. Position absolute can be used to keep elements in the document for accessibility, ensuring that they are still read by screen readers even when visually removed.', 'The chapter covers the process of styling headers and footers The chapter includes instructions on setting colors, text alignment, height, font size, position, and background color for headers and footers.']}, {'end': 15634.746, 'segs': [{'end': 14281.924, 'src': 'embed', 'start': 14255.633, 'weight': 3, 'content': [{'end': 14261.438, 'text': 'So I hope this example has showed you how you can apply the position property with CSS.', 'start': 14255.633, 'duration': 5.805}, {'end': 14267.865, 'text': 'And I hope the previous example gave you some pretty good differences between all the different values that you can use.', 'start': 14261.779, 'duration': 6.086}, {'end': 14271.8, 'text': "Let's move on to CSS Flexbox fundamentals.", 'start': 14269.079, 'duration': 2.721}, {'end': 14277.222, 'text': "We'll be learning the CSS properties that you'll use most frequently when working with Flexbox.", 'start': 14272.22, 'duration': 5.002}, {'end': 14281.924, 'text': "You can see I've got Visual Studio Code here on the left, and it's in a smaller window today.", 'start': 14277.782, 'duration': 4.142}], 'summary': 'Learned how to apply position property in css and css flexbox fundamentals.', 'duration': 26.291, 'max_score': 14255.633, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA14255633.jpg'}, {'end': 14525.37, 'src': 'embed', 'start': 14497.478, 'weight': 4, 'content': [{'end': 14500.4, 'text': 'So that helps us see each individual one just a little bit better.', 'start': 14497.478, 'duration': 2.922}, {'end': 14505.864, 'text': 'Now continuing with the justify content, there are some other good values worth looking into.', 'start': 14500.981, 'duration': 4.883}, {'end': 14509.907, 'text': "Center is often used, but there's also space around.", 'start': 14506.024, 'duration': 3.883}, {'end': 14512.361, 'text': 'And now look at that.', 'start': 14511.28, 'duration': 1.081}, {'end': 14515.323, 'text': "Now, this isn't used as often, and maybe you can see why.", 'start': 14512.461, 'duration': 2.862}, {'end': 14518.785, 'text': "We've got some space between each one.", 'start': 14515.403, 'duration': 3.382}, {'end': 14525.37, 'text': "But look, the space at the edges before the end and beginning of the container aren't quite as big.", 'start': 14519.446, 'duration': 5.924}], 'summary': 'Analyzing justify content values for spacing and alignment.', 'duration': 27.892, 'max_score': 14497.478, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA14497478.jpg'}, {'end': 14643.454, 'src': 'embed', 'start': 14619.615, 'weight': 1, 'content': [{'end': 14626.04, 'text': "Now we don't have the other options with align items like space around, space between, because, if you think about it,", 'start': 14619.615, 'duration': 6.425}, {'end': 14629.663, 'text': "it's only one item at a time when we're aligning the items.", 'start': 14626.04, 'duration': 3.623}, {'end': 14631.565, 'text': 'horizontally here.', 'start': 14630.504, 'duration': 1.061}, {'end': 14638.05, 'text': "we had six items in this row, but if we look vertically, we've just got one item for each alignment.", 'start': 14631.565, 'duration': 6.485}, {'end': 14640.511, 'text': "so that's why we don't have the space options.", 'start': 14638.05, 'duration': 2.461}, {'end': 14643.454, 'text': 'now we can change the direction as well.', 'start': 14640.511, 'duration': 2.943}], 'summary': 'Options for aligning items are limited due to single item alignment at a time.', 'duration': 23.839, 'max_score': 14619.615, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA14619615.jpg'}, {'end': 15122.272, 'src': 'embed', 'start': 15089.174, 'weight': 0, 'content': [{'end': 15093.797, 'text': 'Again, these three properties made each item a flex container of its own.', 'start': 15089.174, 'duration': 4.623}, {'end': 15099.38, 'text': 'But they are still flex items inside of the larger flex container as well.', 'start': 15094.177, 'duration': 5.203}, {'end': 15104.203, 'text': 'So what I want to do besides create some extra space here is go back to the HTML.', 'start': 15099.781, 'duration': 4.422}, {'end': 15109.466, 'text': "I'm going to select the last four divs there that have the class box.", 'start': 15104.643, 'duration': 4.823}, {'end': 15113.789, 'text': "And I'm going to comment them out for now by pressing Shift-Alt and the letter A.", 'start': 15109.947, 'duration': 3.842}, {'end': 15122.272, 'text': "and then saving, and now we'll just have two divs with number one and number two that we can work with in the css.", 'start': 15114.609, 'duration': 7.663}], 'summary': 'Three properties made each item a flex container, with last four divs commented out, leaving two divs to work with in css.', 'duration': 33.098, 'max_score': 15089.174, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA15089174.jpg'}], 'start': 14255.633, 'title': 'Css flexbox fundamentals and properties', 'summary': 'Covers fundamental css flexbox properties and their effects, including aligning and controlling the layout of elements. it includes examples of using justify content, align items, flex-wrap, and flex-flow, with various values such as flex start, flex end, center, space between, and space evenly.', 'chapters': [{'end': 14564.968, 'start': 14255.633, 'title': 'Css flexbox fundamentals', 'summary': 'Covers the fundamentals of css flexbox, including properties and their effects, with examples of applying flex to a container and using justify content values to align flex items horizontally and create spacing between them.', 'duration': 309.335, 'highlights': ['The divs are now considered to be flex items and they default to the position flex start, aligning them all to the left. The divs, now flex items, default to the position flex start, aligning all to the left.', 'Applying justify content values such as flex end, flex center, space around, and space between to align the flex items horizontally and create different spacing between them. justify content values like flex end, flex center, space around, and space between are used to align flex items horizontally and create different spacing.', "Introduction of the newer value 'space evenly' that evenly spaces the items throughout the container, including at the beginning and the end. The newer value 'space evenly' is introduced to evenly space the items throughout the container, including at the beginning and the end."]}, {'end': 14791.486, 'start': 14565.268, 'title': 'Flexbox alignment and direction', 'summary': 'Covers the use of justify content and align items properties to align items horizontally and vertically, and the impact of flex direction property on the layout, with examples of how different values such as flex start, flex end, and center affect the alignment.', 'duration': 226.218, 'highlights': ['The impact of flex direction property on the layout and the examples of different values such as flex start, flex end, and center affecting the alignment. The chapter explains the use of flex direction property to change the layout from row to column, and demonstrates how values like flex start, flex end, and center affect the alignment.', 'Demonstration of using justify content for horizontal alignment and its impact on the layout. It explains the use of justify content for horizontal alignment and demonstrates its impact on the layout.', 'Explanation of align items property and its impact on vertical alignment, with examples of values like flex start, flex end, and center. It provides an explanation of align items property and its impact on vertical alignment, along with examples of values like flex start, flex end, and center.']}, {'end': 15009.824, 'start': 14792.026, 'title': 'Flexbox properties and alignment in css', 'summary': 'Explains the usage of flexbox properties like flex-wrap and flex-flow to control the layout of elements, demonstrating how they impact the arrangement of items in the container and the alignment of rows, with examples of different values such as wrap, row, flex start, flex end, center, space between, and space evenly.', 'duration': 217.798, 'highlights': ["Flex-wrap property is used to control the arrangement of items in the container, and setting it to 'wrap' results in the items wrapping into multiple rows.", 'Using the flex-flow shorthand allows setting both flex direction and flex wrap in one property, providing a more concise way to control the layout.', 'The align-content property is utilized to align the rows within the container, with values like flex start, flex end, center, space between, and space evenly impacting the alignment of rows.']}, {'end': 15634.746, 'start': 15009.844, 'title': 'Flexbox properties and layout', 'summary': 'Covers using flexbox properties to manipulate the layout, including centering items, setting minimum width, controlling item growth and shrinkage, and changing the order of elements within the flex container.', 'duration': 624.902, 'highlights': ["Using flex properties to center items Applying 'display: flex', 'justify-content: center', and 'align-items: center' to flex items centers the content within each box.", "Controlling item growth and minimum width Setting 'flex-basis' and 'flex-grow' properties allows for controlling item growth and minimum width, ensuring items fill out the container.", "Understanding flex shrink and preventing overflow Explaining the concept of 'flex-shrink' and its impact on preventing overflow, demonstrated by adjusting the size of items based on the 'flex-shrink' value.", "Manipulating the order of elements within the flex container Using the 'order' property to change the order of elements within the flex container, and understanding its interaction with other layout properties like 'flex-direction' and 'flex-wrap'."]}], 'duration': 1379.113, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA14255633.jpg', 'highlights': ["Introduction of the newer value 'space evenly' that evenly spaces the items throughout the container, including at the beginning and the end.", 'Demonstration of using justify content for horizontal alignment and its impact on the layout.', 'The align-content property is utilized to align the rows within the container, with values like flex start, flex end, center, space between, and space evenly impacting the alignment of rows.', "Understanding flex shrink and preventing overflow Explaining the concept of 'flex-shrink' and its impact on preventing overflow, demonstrated by adjusting the size of items based on the 'flex-shrink' value.", 'Using the flex-flow shorthand allows setting both flex direction and flex wrap in one property, providing a more concise way to control the layout.']}, {'end': 17231.576, 'segs': [{'end': 16044.685, 'src': 'heatmap', 'start': 15634.746, 'weight': 0.735, 'content': [{'end': 15639.709, 'text': 'So that 1 makes it a larger value than all of the rest of them.', 'start': 15634.746, 'duration': 4.963}, {'end': 15649.875, 'text': 'So we would give it 0 to put it back in place, a higher number above 0 to put it at the end, and a number like minus one, something lower than zero,', 'start': 15639.829, 'duration': 10.046}, {'end': 15650.916, 'text': 'to put it at the beginning.', 'start': 15649.875, 'duration': 1.041}, {'end': 15657.32, 'text': "We've covered a lot of Flexbox properties today, and we will be building some things with it in the future.", 'start': 15651.156, 'duration': 6.164}, {'end': 15665.726, 'text': 'But right now I think the best way for you to get some practice with it, besides just playing around with it in your own HTML and CSS,', 'start': 15657.761, 'duration': 7.965}, {'end': 15673.011, 'text': "is to go to this website called Flexbox Froggy, and it's got 24 challenges to help you learn Flexbox.", 'start': 15665.726, 'duration': 7.285}, {'end': 15676.493, 'text': 'And if I expand it out, I think it looks a little bit better in the full screen.', 'start': 15673.051, 'duration': 3.442}, {'end': 15678.054, 'text': 'There we go.', 'start': 15677.594, 'duration': 0.46}, {'end': 15685.317, 'text': 'And you can work through these 24 challenges and learn how to place the frog on the lily pad with Flexbox.', 'start': 15678.674, 'duration': 6.643}, {'end': 15687.298, 'text': "And there's some good challenges in there,", 'start': 15685.757, 'duration': 1.541}, {'end': 15693.181, 'text': "and it will get you thinking about the different ways to use the different properties that we've just reviewed for Flexbox.", 'start': 15687.298, 'duration': 5.883}, {'end': 15697.224, 'text': "Let's learn about CSS grid layout fundamentals.", 'start': 15694.522, 'duration': 2.702}, {'end': 15702.006, 'text': "We'll be learning the CSS properties that you will use most frequently when working with grids.", 'start': 15697.484, 'duration': 4.522}, {'end': 15705.388, 'text': "So for starter code, we've got HTML here.", 'start': 15702.787, 'duration': 2.601}, {'end': 15709.591, 'text': 'And inside the body, we have a main element with the class of container.', 'start': 15705.609, 'duration': 3.982}, {'end': 15715.714, 'text': 'And we have six divs labeled box 1, 2, 3, 4, 5, and 6 by their content.', 'start': 15710.211, 'duration': 5.503}, {'end': 15717.776, 'text': 'They all have the same class box.', 'start': 15715.754, 'duration': 2.022}, {'end': 15724.941, 'text': "If we look at the style that is currently applied, you can see we're importing in the Roboto font from Google Fonts.", 'start': 15718.476, 'duration': 6.465}, {'end': 15728.004, 'text': 'We have a basic CSS reset.', 'start': 15725.542, 'duration': 2.462}, {'end': 15734.789, 'text': 'Inside the body, we are just setting the Roboto font and setting the body to a min height of 100 viewport units.', 'start': 15728.604, 'duration': 6.185}, {'end': 15739.013, 'text': 'And then we have the box class for those divs, background color of black.', 'start': 15735.31, 'duration': 3.703}, {'end': 15744.922, 'text': 'a white font color and font size 2 ram padding of 0.5 ram.', 'start': 15739.773, 'duration': 5.149}, {'end': 15746.464, 'text': "and that's all we have to start.", 'start': 15744.922, 'duration': 1.542}, {'end': 15752.744, 'text': "so i'll drag vs code over to the left And we're using the live server Visual Studio Code extension.", 'start': 15746.464, 'duration': 6.28}, {'end': 15758.588, 'text': 'So any changes we make to the CSS, we should see immediately here in Chrome on the web page.', 'start': 15752.764, 'duration': 5.824}, {'end': 15760.709, 'text': 'So here are our six divs.', 'start': 15758.948, 'duration': 1.761}, {'end': 15762.95, 'text': "Now we haven't set any size.", 'start': 15761.189, 'duration': 1.761}, {'end': 15765.152, 'text': 'The main element is a block element.', 'start': 15763.09, 'duration': 2.062}, {'end': 15767.633, 'text': 'So it automatically has 100% width.', 'start': 15765.232, 'duration': 2.401}, {'end': 15769.474, 'text': 'And then so are the divs.', 'start': 15768.133, 'duration': 1.341}, {'end': 15771.315, 'text': "So they're stacked on top of each other.", 'start': 15769.654, 'duration': 1.661}, {'end': 15774.958, 'text': 'And all six of them have a width of 100%.', 'start': 15771.876, 'duration': 3.082}, {'end': 15777.079, 'text': "So they're filling up that main element.", 'start': 15774.958, 'duration': 2.121}, {'end': 15782.362, 'text': "We're going to cover several different ways to apply grid to our page and to these divs.", 'start': 15777.379, 'duration': 4.983}, {'end': 15787.446, 'text': "So let's start out by styling that container class that we have on the main element.", 'start': 15782.763, 'duration': 4.683}, {'end': 15789.407, 'text': "And we'll say display grid.", 'start': 15787.946, 'duration': 1.461}, {'end': 15792.809, 'text': "Now instantly when we do this and save, we don't see a change.", 'start': 15789.787, 'duration': 3.022}, {'end': 15798.093, 'text': 'But all of these divs instantly become grid items now within the grid.', 'start': 15793.27, 'duration': 4.823}, {'end': 15802.356, 'text': 'After that, the quickest way to apply a grid is to use grid-auto-flow.', 'start': 15798.633, 'duration': 3.723}, {'end': 15812.781, 'text': "essentially leaves it as it is because they're stacked on top of each other, which now makes six rows.", 'start': 15807.779, 'duration': 5.002}, {'end': 15821.283, 'text': 'Or we could change this to column and we will have six columns, one for each of the six divs.', 'start': 15813.601, 'duration': 7.682}, {'end': 15829.526, 'text': 'Now, many times we want more control than just setting the auto flow to column and letting all the columns be defined just automatically like that.', 'start': 15821.483, 'duration': 8.043}, {'end': 15831.827, 'text': 'So let me go ahead and remove grid auto flow.', 'start': 15829.606, 'duration': 2.221}, {'end': 15839.411, 'text': "And in this place, I'm going to put grid dash template dash, whoops, there we go, dash columns.", 'start': 15832.287, 'duration': 7.124}, {'end': 15840.252, 'text': "That's what I want.", 'start': 15839.491, 'duration': 0.761}, {'end': 15843.454, 'text': 'And now we can set the columns and the width of each.', 'start': 15840.712, 'duration': 2.742}, {'end': 15848.519, 'text': "Now notice I'm wrapping the code, so it will wrap to the next line, but I'll say 200 pixels.", 'start': 15843.515, 'duration': 5.004}, {'end': 15854.224, 'text': 'Then I could say 100 pixels, and then I can say 200 pixels.', 'start': 15849.08, 'duration': 5.144}, {'end': 15859.409, 'text': 'And when I save, we now have three columns and you can see the first column is 200 pixels.', 'start': 15854.445, 'duration': 4.964}, {'end': 15862.051, 'text': 'The The second is 100.', 'start': 15859.429, 'duration': 2.622}, {'end': 15864.193, 'text': 'And the third is, again, 200.', 'start': 15862.051, 'duration': 2.142}, {'end': 15867.275, 'text': "But we don't have to use absolute values like pixels.", 'start': 15864.193, 'duration': 3.082}, {'end': 15873.76, 'text': "We can use fraction units, which is a unit that's specifically used with CSS grids.", 'start': 15867.635, 'duration': 6.125}, {'end': 15881.906, 'text': "So let's say we've got two fractions for the first column and then one fraction for the second and one fraction for the third.", 'start': 15873.86, 'duration': 8.046}, {'end': 15893.474, 'text': 'Now, when we save, you can see it used all of the available space, but it made the first column twice as big as it did the second or the third column,', 'start': 15882.146, 'duration': 11.328}, {'end': 15895.076, 'text': 'and we can also mix.', 'start': 15893.474, 'duration': 1.602}, {'end': 15902.141, 'text': "so we could say 200 pixels and then one fraction, one fraction, and you see our first column's 200 pixels.", 'start': 15895.076, 'duration': 7.065}, {'end': 15906.344, 'text': "then the next two columns, since they're equal, both have one fraction a piece.", 'start': 15902.141, 'duration': 4.203}, {'end': 15911.728, 'text': "they're splitting the available width that is remaining and so they're eating up all of that.", 'start': 15906.344, 'duration': 5.384}, {'end': 15922.473, 'text': 'so it still has a 100 width for the row, but the 5 and 6 here or the 2 and 3 are much wider than what we see for the 1 and the 4..', 'start': 15911.728, 'duration': 10.745}, {'end': 15923.774, 'text': 'And now something very useful.', 'start': 15922.473, 'duration': 1.301}, {'end': 15932.297, 'text': 'Instead of specifying every column, especially if many of the columns have the same value, you can use a shortcut for that.', 'start': 15923.914, 'duration': 8.383}, {'end': 15940.721, 'text': "And so here we're going to say Repeat, I can spell repeat and let's say we have four columns and each one is one Fraction.", 'start': 15932.437, 'duration': 8.284}, {'end': 15945.883, 'text': 'and now, when we save, you can see, we have four equal columns, each being one fraction.', 'start': 15940.721, 'duration': 5.162}, {'end': 15955.667, 'text': "and then, when we get to the second row, that is Automatically created by grid, we've got two columns here because we only had six total grid items.", 'start': 15945.883, 'duration': 9.784}, {'end': 15959.328, 'text': "so a grid can have empty space, and that's what we have here to the right.", 'start': 15955.667, 'duration': 3.661}, {'end': 15963.249, 'text': 'and Now, while this value does not always have to be equal, it does have to be a pattern.', 'start': 15959.328, 'duration': 3.921}, {'end': 15972.072, 'text': "So we could say instead of just one fraction, let's say we start with one fraction, and then the next column is two fractions.", 'start': 15963.409, 'duration': 8.663}, {'end': 15977.174, 'text': "And instead of repeating four, let's just repeat this twice because it's going to repeat this pattern.", 'start': 15972.252, 'duration': 4.922}, {'end': 15983.576, 'text': "So with this pattern, we're going to have four columns because we've defined two different columns here with the pattern.", 'start': 15977.254, 'duration': 6.322}, {'end': 15987.197, 'text': 'So when I save, you can see the first column is one fraction.', 'start': 15983.636, 'duration': 3.561}, {'end': 15990.179, 'text': 'The second column is twice as big, two fractions.', 'start': 15987.657, 'duration': 2.522}, {'end': 15992.2, 'text': 'The third column, again, one fraction.', 'start': 15990.379, 'duration': 1.821}, {'end': 15996.783, 'text': 'And the fourth column, following that pattern, is twice as big with two fractions.', 'start': 15992.4, 'duration': 4.383}, {'end': 16001.246, 'text': "Now, while we've defined our columns here, we really haven't applied anything to the rows.", 'start': 15997.043, 'duration': 4.203}, {'end': 16007.43, 'text': 'So everything about the rows is currently implicitly created by CSS Grid.', 'start': 16001.446, 'duration': 5.984}, {'end': 16011.173, 'text': "We haven't explicitly defined anything for those rows.", 'start': 16007.49, 'duration': 3.683}, {'end': 16012.714, 'text': "But let's go ahead and do that.", 'start': 16011.253, 'duration': 1.461}, {'end': 16015.356, 'text': "And to do that, we'll use grid-auto-rows.", 'start': 16013.234, 'duration': 2.122}, {'end': 16024.845, 'text': "and let's say 200 pixels to start out, and you can see now each row became 200 pixels tall.", 'start': 16017.757, 'duration': 7.088}, {'end': 16033.495, 'text': "but once again we're not locked into just using 200 pixels here with grid, auto rows, so we could say min max, which is a function,", 'start': 16024.845, 'duration': 8.65}, {'end': 16035.918, 'text': 'and this lets us say the minimum first.', 'start': 16033.495, 'duration': 2.423}, {'end': 16044.685, 'text': "so we'll say a minimum of, let's say 150 pixels tall, and then we'll say auto for the max, so it could allow it to be taller.", 'start': 16035.918, 'duration': 8.767}], 'summary': 'Learned flexbox properties and practiced with 24 challenges. explored css grid layout fundamentals and applied grid to divs with different column and row configurations.', 'duration': 409.939, 'max_score': 15634.746, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA15634746.jpg'}, {'end': 16838.231, 'src': 'heatmap', 'start': 16436.609, 'weight': 0.771, 'content': [{'end': 16444.035, 'text': 'Likewise, I can do that with grid dash row and say start at the first line, end at the third line and save.', 'start': 16436.609, 'duration': 7.426}, {'end': 16447.136, 'text': "And we're back to where we were with fewer properties.", 'start': 16444.134, 'duration': 3.002}, {'end': 16455.704, 'text': 'As long as you understand that these are shorthand, and this essentially is the starting number and the ending number for both of these properties.', 'start': 16447.318, 'duration': 8.386}, {'end': 16459.426, 'text': "let's go ahead and select one more of these grid items.", 'start': 16455.704, 'duration': 3.722}, {'end': 16467.752, 'text': "so once again use the box class and now i'll use nth dash child and we'll select the second item.", 'start': 16459.426, 'duration': 8.326}, {'end': 16474.557, 'text': "now for the second item, we'll change the background color once again and i'll make this one purple so it stands out and we save.", 'start': 16467.752, 'duration': 6.805}, {'end': 16476.878, 'text': 'we can see that it is now up in the top.', 'start': 16474.557, 'duration': 2.321}, {'end': 16488.187, 'text': "right after that we'll come down to the next line and let's put our grid dash column and let's say it starts at the first line but ends at the fifth,", 'start': 16476.878, 'duration': 11.309}, {'end': 16494.151, 'text': 'and that should make it span the entire row or the entire container if you will.', 'start': 16488.187, 'duration': 5.964}, {'end': 16498.135, 'text': 'so when i save that made a big change right there.', 'start': 16494.151, 'duration': 3.984}, {'end': 16501.679, 'text': "then let's use grid row, say grid dash row.", 'start': 16498.135, 'duration': 3.544}, {'end': 16507.342, 'text': "let's have it start at the third line and end at the fourth line.", 'start': 16501.679, 'duration': 5.663}, {'end': 16510.783, 'text': 'And when I save, you can see that made some changes too.', 'start': 16507.581, 'duration': 3.202}, {'end': 16516.845, 'text': 'Now, instead of three and four being below it, they came back up here by default in the grid.', 'start': 16510.883, 'duration': 5.962}, {'end': 16518.365, 'text': "So again, that's implicit.", 'start': 16516.884, 'duration': 1.481}, {'end': 16523.187, 'text': 'The grid is calculating where to put everything that we do not explicitly tell it to.', 'start': 16518.446, 'duration': 4.741}, {'end': 16531.51, 'text': 'And now, just like flexbox, where something that was a flex item could also be a flex container, We can do that with grid too.', 'start': 16523.447, 'duration': 8.063}, {'end': 16535.036, 'text': 'So we can nest a grid inside of a grid item.', 'start': 16531.571, 'duration': 3.465}, {'end': 16540.524, 'text': "So I'm going to take this first child and put display and set that to grid.", 'start': 16535.096, 'duration': 5.428}, {'end': 16546.659, 'text': "And now inside of that, I'm going to say Align-Content.", 'start': 16541.265, 'duration': 5.394}, {'end': 16551.524, 'text': "And just to change it up here, I'm going to say End to begin with.", 'start': 16547.72, 'duration': 3.804}, {'end': 16552.485, 'text': 'And we save.', 'start': 16551.684, 'duration': 0.801}, {'end': 16553.946, 'text': 'And look what it did.', 'start': 16553.205, 'duration': 0.741}, {'end': 16556.729, 'text': 'It took the number 1 down here to the bottom.', 'start': 16554.067, 'duration': 2.662}, {'end': 16558.69, 'text': 'So it aligned the content to the end.', 'start': 16556.83, 'duration': 1.86}, {'end': 16561.855, 'text': 'As you might guess, you could choose Center.', 'start': 16559.052, 'duration': 2.803}, {'end': 16565.117, 'text': 'And you could have Start as well.', 'start': 16562.815, 'duration': 2.302}, {'end': 16568.42, 'text': "So what I'm going to do is say center.", 'start': 16565.979, 'duration': 2.441}, {'end': 16574.447, 'text': "And then after center, I'm also going to say justify content.", 'start': 16569.282, 'duration': 5.165}, {'end': 16577.63, 'text': 'And we could say for that, it could be start.', 'start': 16574.987, 'duration': 2.643}, {'end': 16580.872, 'text': "And if we save, you can see that's to the left.", 'start': 16578.529, 'duration': 2.343}, {'end': 16584.095, 'text': 'and end all the way to the right.', 'start': 16581.773, 'duration': 2.322}, {'end': 16587.719, 'text': 'And if we say center, it should be right in the middle.', 'start': 16584.655, 'duration': 3.064}, {'end': 16591.261, 'text': 'So now we have centered both vertically and horizontally.', 'start': 16587.839, 'duration': 3.422}, {'end': 16593.062, 'text': "So that's how you can center with grid.", 'start': 16591.342, 'duration': 1.72}, {'end': 16598.268, 'text': 'But we can shorten this up by using the place content shorthand.', 'start': 16593.484, 'duration': 4.784}, {'end': 16601.151, 'text': 'And then we could say both properties.', 'start': 16598.868, 'duration': 2.283}, {'end': 16604.734, 'text': 'So we could say end and center.', 'start': 16601.391, 'duration': 3.343}, {'end': 16606.395, 'text': "And I'll get rid of these other two.", 'start': 16605.054, 'duration': 1.341}, {'end': 16608.456, 'text': "And you'll see what happens.", 'start': 16607.315, 'duration': 1.141}, {'end': 16610.918, 'text': 'The first one is the align content.', 'start': 16609.077, 'duration': 1.841}, {'end': 16612.159, 'text': "So it's at the bottom.", 'start': 16611.158, 'duration': 1.001}, {'end': 16617.201, 'text': "But then horizontally, it's centered because that is the justify content.", 'start': 16612.719, 'duration': 4.482}, {'end': 16619.363, 'text': 'And this is the align content.', 'start': 16617.562, 'duration': 1.801}, {'end': 16623.525, 'text': 'But if we just put one value, it takes that value for both.', 'start': 16619.742, 'duration': 3.783}, {'end': 16629.231, 'text': 'So we can just say place content center and center anything we want to inside of a grid.', 'start': 16624.005, 'duration': 5.226}, {'end': 16643.748, 'text': "So now we've looked at how you can quickly use auto flow to create a grid or how you can place grid template columns and rows and then assign different starting and ending points to put the grid items basically anywhere you want them in the grid.", 'start': 16629.53, 'duration': 14.218}, {'end': 16647.349, 'text': 'But there is another way to set up grids too.', 'start': 16644.108, 'duration': 3.241}, {'end': 16651.611, 'text': 'And that is with named grid items and grid template areas.', 'start': 16647.47, 'duration': 4.141}, {'end': 16652.932, 'text': "So let's do that now.", 'start': 16651.69, 'duration': 1.242}, {'end': 16656.734, 'text': "But we'll continue to keep this on our page as part of the page.", 'start': 16653.052, 'duration': 3.682}, {'end': 16658.814, 'text': "So I'm going to go back to the HTML.", 'start': 16657.034, 'duration': 1.78}, {'end': 16663.636, 'text': "And I'm going to drag Visual Studio Code back over to the full window to start out.", 'start': 16659.195, 'duration': 4.441}, {'end': 16666.398, 'text': 'OK, we want to add a header element first.', 'start': 16663.857, 'duration': 2.541}, {'end': 16668.598, 'text': "And it's going to have two classes.", 'start': 16666.898, 'duration': 1.7}, {'end': 16672.341, 'text': "We'll give it a header class and then just an EL class for element.", 'start': 16668.659, 'duration': 3.682}, {'end': 16677.822, 'text': "I'll put an H1 element inside the header, and I'll just say header for that.", 'start': 16672.92, 'duration': 4.902}, {'end': 16680.922, 'text': "After that, we'll have our main element.", 'start': 16678.502, 'duration': 2.42}, {'end': 16690.846, 'text': "Then we'll have an aside element that is going to have a sidebar class and also the EL class inside the aside element.", 'start': 16681.883, 'duration': 8.963}, {'end': 16694.967, 'text': "I'm going to use an H2, and we'll just say sidebar inside this H2.", 'start': 16690.866, 'duration': 4.101}, {'end': 16698.008, 'text': "We'll do much the same for the footer.", 'start': 16696.247, 'duration': 1.761}, {'end': 16703.814, 'text': 'So a footer element with a class of footer and a class of EL for element.', 'start': 16698.069, 'duration': 5.745}, {'end': 16708.54, 'text': "And then inside of that, we'll use H2 and we'll say footer as well.", 'start': 16704.416, 'duration': 4.124}, {'end': 16710.081, 'text': "So let's save our HTML.", 'start': 16708.681, 'duration': 1.4}, {'end': 16717.57, 'text': "And you can see we've now outlined more of a traditional page with a header a main area and a side and a footer.", 'start': 16710.101, 'duration': 7.469}, {'end': 16722.714, 'text': "I'm going to jump back to this style page and drag Visual Studio Code back over to the left.", 'start': 16717.59, 'duration': 5.124}, {'end': 16725.776, 'text': 'And now you can see this on the page.', 'start': 16723.415, 'duration': 2.361}, {'end': 16728.319, 'text': "We've got a header at the top, a sidebar and a footer.", 'start': 16725.817, 'duration': 2.502}, {'end': 16729.521, 'text': "They're not much to look at.", 'start': 16728.38, 'duration': 1.141}, {'end': 16732.784, 'text': 'You can just see the text, not really an outline of the elements at all.', 'start': 16729.721, 'duration': 3.063}, {'end': 16736.567, 'text': 'They are block elements, so they are expanding 100% across the page right now.', 'start': 16733.243, 'duration': 3.324}, {'end': 16744.592, 'text': "I'm going to scroll all the way back up and we're going to make the body element of the page a grid container.", 'start': 16737.908, 'duration': 6.684}, {'end': 16757.809, 'text': "So we'll start out by saying display grid and then we'll say grid, dash template, dash columns, And let's set this to repeat.", 'start': 16744.592, 'duration': 13.217}, {'end': 16759.611, 'text': "And we'll have nine columns.", 'start': 16758.189, 'duration': 1.422}, {'end': 16762.593, 'text': 'And we use one fraction for each column.', 'start': 16760.051, 'duration': 2.542}, {'end': 16764.034, 'text': "So let's save that.", 'start': 16763.094, 'duration': 0.94}, {'end': 16766.576, 'text': 'And boy, did we see some changes on the page.', 'start': 16764.234, 'duration': 2.342}, {'end': 16769.299, 'text': 'This is going to drastically change from here, though, as well.', 'start': 16766.776, 'duration': 2.523}, {'end': 16771.259, 'text': "So now let's say grid-auto-rows.", 'start': 16769.359, 'duration': 1.9}, {'end': 16785.129, 'text': "and we'll say 75 pixels, and then we'll say auto and then we'll say 75 pixels again, and let's save, and that didn't change too much.", 'start': 16773.542, 'duration': 11.587}, {'end': 16792.055, 'text': "but it will here in the near future, because we're going to say grid, dash, template-areas.", 'start': 16785.129, 'duration': 6.926}, {'end': 16797.902, 'text': 'Now, this is where we can define names of our items on the page.', 'start': 16792.716, 'duration': 5.186}, {'end': 16800.486, 'text': "But we're also going to have to apply these to each item.", 'start': 16797.982, 'duration': 2.504}, {'end': 16803.189, 'text': "But we're going to call our header HD.", 'start': 16800.846, 'duration': 2.343}, {'end': 16806.773, 'text': "So I'm going to tab in just a little bit And this would be HD.", 'start': 16803.229, 'duration': 3.544}, {'end': 16811.036, 'text': 'Now we have nine columns and this is where we can really visualize our grid.', 'start': 16806.953, 'duration': 4.083}, {'end': 16818.903, 'text': "And I may need to pull visual studio code back over to get some more room, but I'm going to type HD nine times once for each column.", 'start': 16811.136, 'duration': 7.767}, {'end': 16823.286, 'text': "So there's two, three, four, six, seven, eight, nine.", 'start': 16818.943, 'duration': 4.343}, {'end': 16826.589, 'text': "Yep I'm going to go ahead and bring visual studio code back over.", 'start': 16823.446, 'duration': 3.143}, {'end': 16831.908, 'text': "And then once we have the full page, we'll be able to visualize this better.", 'start': 16828.647, 'duration': 3.261}, {'end': 16835.15, 'text': "And then we'll come back and look at our browser afterwards.", 'start': 16832.649, 'duration': 2.501}, {'end': 16838.231, 'text': "So now we've got main, which will be named mn.", 'start': 16835.63, 'duration': 2.601}], 'summary': 'The transcript covers css grid properties, including grid-template-areas and auto-flow.', 'duration': 401.622, 'max_score': 16436.609, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA16436609.jpg'}, {'end': 16928.116, 'src': 'embed', 'start': 16875.797, 'weight': 0, 'content': [{'end': 16878.138, 'text': "We haven't really named them on the items yet.", 'start': 16875.797, 'duration': 2.341}, {'end': 16882.839, 'text': "I'm going to save this much and now let's scroll down and define the rest of this.", 'start': 16878.198, 'duration': 4.641}, {'end': 16885.74, 'text': 'So after the body definition.', 'start': 16883.06, 'duration': 2.68}, {'end': 16888.642, 'text': "Let's go ahead and define that EL that we applied,", 'start': 16885.78, 'duration': 2.862}, {'end': 16896.805, 'text': "the class that we applied to these new elements and we'll give them a background color of Rebecca purple.", 'start': 16888.642, 'duration': 8.163}, {'end': 16899.126, 'text': "It's just a little bit different than the other purple we used.", 'start': 16896.825, 'duration': 2.301}, {'end': 16902.007, 'text': 'A color of white.', 'start': 16899.986, 'duration': 2.021}, {'end': 16910.53, 'text': "We'll set each one of these to a display that's grid, and we'll just center the content that we put in, which were essentially the labels.", 'start': 16903.227, 'duration': 7.303}, {'end': 16916.476, 'text': 'Okay, after that, we need to go ahead and identify each class that we applied.', 'start': 16911.744, 'duration': 4.732}, {'end': 16920.974, 'text': "So we'll have our header, And this is where we can define our name.", 'start': 16916.556, 'duration': 4.418}, {'end': 16922.974, 'text': "So we'll just say grid-area.", 'start': 16921.074, 'duration': 1.9}, {'end': 16928.116, 'text': 'Set that to HD is what we have in our template for the header.', 'start': 16923.635, 'duration': 4.481}], 'summary': 'Defining new elements with el class, applying rebecca purple background color, and setting display to grid for each element.', 'duration': 52.319, 'max_score': 16875.797, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA16875797.jpg'}], 'start': 15634.746, 'title': 'Css grid layout principles and applications', 'summary': 'Covers fundamental css grid layout properties and techniques, including display grid, grid-auto-flow, grid-template-columns, and pseudo-selectors. it also explains the process of applying css grid to design a webpage with specific areas and a recommendation for mastering css grid using grid garden.', 'chapters': [{'end': 15996.783, 'start': 15634.746, 'title': 'Css grid layout fundamentals', 'summary': 'Covers css grid layout fundamentals, including properties like display grid, grid-auto-flow, and grid-template-columns, with examples demonstrating the use of absolute values, fraction units, and repeat function for defining grid columns.', 'duration': 362.037, 'highlights': ['The chapter covers CSS grid layout fundamentals The transcript mainly focuses on teaching the fundamental concepts of CSS grid layout.', 'The website Flexbox Froggy provides 24 challenges to help learn Flexbox Flexbox Froggy is recommended as a resource to practice and learn Flexbox with 24 challenges.', 'The main element is styled with display grid to make the divs grid items Styling the main element with display grid instantly turns the divs into grid items within the grid.', 'The usage of fraction units for defining column widths is demonstrated The use of fraction units for defining column widths is introduced, showcasing the flexibility and responsiveness they provide in CSS grids.', 'The repeat function is used to create a specified number of columns with a specified width pattern The utilization of the repeat function for creating a specified number of columns with a defined width pattern is explained.']}, {'end': 16410.045, 'start': 15997.043, 'title': 'Css grid layout', 'summary': 'Explains how to define rows and columns using css grid, including setting heights, gaps, and using pseudo-selectors to define the layout of grid items.', 'duration': 413.002, 'highlights': ['The chapter explains how to define rows and columns using CSS Grid. The transcript provides a detailed explanation of how to define rows and columns using CSS Grid, emphasizing the importance of explicitly defining row and column structures.', 'Setting heights for rows using grid-auto-rows, including using minmax and auto functions. The transcript demonstrates how to set heights for rows using grid-auto-rows, showcasing the use of the minmax and auto functions to control the height of rows.', 'Defining gaps between rows and columns using row-gap and column-gap. The chapter illustrates how to define gaps between rows and columns using the row-gap and column-gap properties in CSS Grid.', 'Using pseudo-selectors to define the layout of grid items, including setting background colors and spanning multiple columns and rows. The transcript showcases the use of pseudo-selectors to define the layout of grid items, demonstrating how to set background colors and span multiple columns and rows for grid items.']}, {'end': 16652.932, 'start': 16410.225, 'title': 'Grid layout shorthand and nesting', 'summary': 'Demonstrates shorthand properties for grid layout, including using grid dash column and grid dash row, nesting grids, and using place content shorthand, to efficiently create and position grid items, as well as setting up grids with named grid items and grid template areas.', 'duration': 242.707, 'highlights': ['The chapter demonstrates shorthand properties for grid layout, including using grid dash column and grid dash row, to efficiently create and position grid items. The instructor showcases using shorthand properties like grid dash column and grid dash row to specify the starting and ending points for grid items, reducing the number of properties needed for positioning.', 'The chapter illustrates nesting grids, allowing a grid to be nested inside a grid item, and showcases aligning content using properties like Align-Content and Justify Content. The tutorial shows how to nest a grid inside a grid item and demonstrates aligning content using properties like Align-Content and Justify Content to position items within the grid.', 'The tutorial explains using place content shorthand to efficiently center items within a grid using a single value for both horizontal and vertical alignment. The instructor explains using place content shorthand to easily center items within a grid using a single value for both horizontal and vertical alignment, providing a more concise way to position items.', 'The chapter introduces setting up grids with named grid items and grid template areas as an alternative way to create grid layouts. The chapter introduces setting up grids with named grid items and grid template areas as an alternative way to create grid layouts, offering additional flexibility in defining the layout of grid items.']}, {'end': 17231.576, 'start': 16653.052, 'title': 'Applying css grid in web design', 'summary': 'Covers the process of using css grid to design a webpage with a header, main area, sidebar, and footer, applying grid layout properties, defining grid areas, and nesting grids, with a recommendation to use grid garden to master css grid.', 'duration': 578.524, 'highlights': ['Applying CSS Grid properties to create a webpage layout with a header, main area, sidebar, and footer. The speaker explains the process of structuring a webpage using CSS Grid and adding a header, main area, sidebar, and footer.', 'Defining grid layout properties and naming grid areas to visually structure the webpage. The speaker demonstrates defining grid layout properties, naming grid areas, and visually structuring the webpage with the header, main area, sidebar, and footer.', 'Nesting grids to create a grid within a grid and centering content using CSS Grid. The speaker explains the process of nesting grids within a grid, creating a grid item, and centering content using CSS Grid, resulting in a nested grid layout.', 'Recommendation to use Grid Garden for mastering CSS Grid with 28 challenges for learning. The speaker recommends using Grid Garden, a game with 28 challenges, to master CSS Grid and provides a link to the website.']}], 'duration': 1596.83, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA15634746.jpg', 'highlights': ['The chapter covers CSS grid layout fundamentals The transcript mainly focuses on teaching the fundamental concepts of CSS grid layout.', 'The chapter explains how to define rows and columns using CSS Grid. The transcript provides a detailed explanation of how to define rows and columns using CSS Grid, emphasizing the importance of explicitly defining row and column structures.', 'The chapter demonstrates shorthand properties for grid layout, including using grid dash column and grid dash row, to efficiently create and position grid items. The instructor showcases using shorthand properties like grid dash column and grid dash row to specify the starting and ending points for grid items, reducing the number of properties needed for positioning.', 'Applying CSS Grid properties to create a webpage layout with a header, main area, sidebar, and footer. The speaker explains the process of structuring a webpage using CSS Grid and adding a header, main area, sidebar, and footer.']}, {'end': 18727.456, 'segs': [{'end': 17627.609, 'src': 'embed', 'start': 17602.019, 'weight': 0, 'content': [{'end': 17609.902, 'text': 'And it allows that space because it was originally envisioned as being used with paragraphs or with text overall.', 'start': 17602.019, 'duration': 7.883}, {'end': 17614.904, 'text': "So you get this space you don't want here, even though you don't provide a margin or padding.", 'start': 17610.002, 'duration': 4.902}, {'end': 17617.125, 'text': "I'm going to show you how to remove that first.", 'start': 17614.924, 'duration': 2.201}, {'end': 17619.486, 'text': "So let's go back to our CSS.", 'start': 17617.545, 'duration': 1.941}, {'end': 17623.147, 'text': 'And this is part of a reset that you can just typically do.', 'start': 17619.886, 'duration': 3.261}, {'end': 17627.609, 'text': "Now it doesn't go inside of the asterisk because that selects all elements.", 'start': 17623.408, 'duration': 4.201}], 'summary': 'The transcript explains how to remove unwanted space in css.', 'duration': 25.59, 'max_score': 17602.019, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA17602019.jpg'}, {'end': 18458.978, 'src': 'heatmap', 'start': 17637.377, 'weight': 0.795, 'content': [{'end': 17645.663, 'text': "and now let's go back and we can look, and with a block element, of course it wraps down to the next line, because you know,", 'start': 17637.377, 'duration': 8.286}, {'end': 17649.146, 'text': 'a block element takes up the full width of the page.', 'start': 17645.663, 'duration': 3.483}, {'end': 17656.772, 'text': "so let's go ahead and go back to our html, and i guess i need this full page once again so we can see what we're doing.", 'start': 17649.146, 'duration': 7.626}, {'end': 17664.318, 'text': "but i want to remove this text right here and even though it's inside the paragraph, And we could remove the paragraph if we want to.", 'start': 17656.772, 'duration': 7.546}, {'end': 17665.919, 'text': "I guess I'll go ahead and do that too.", 'start': 17664.558, 'duration': 1.361}, {'end': 17670.562, 'text': "But just inside this section, I'll save and bring this back over.", 'start': 17666.659, 'duration': 3.903}, {'end': 17674.345, 'text': 'You can see there is now no space underneath.', 'start': 17671.182, 'duration': 3.163}, {'end': 17676.386, 'text': "And I'll switch back to the style here.", 'start': 17674.765, 'duration': 1.621}, {'end': 17685.287, 'text': "If we did not have this and I'll comment this out with Shift-Alt and the letter A and save, Even without the paragraph,", 'start': 17676.826, 'duration': 8.461}, {'end': 17687.508, 'text': 'we have this space underneath the image.', 'start': 17685.287, 'duration': 2.221}, {'end': 17691.55, 'text': "So you want to set those to block because they're originally in line.", 'start': 17687.988, 'duration': 3.562}, {'end': 17694.852, 'text': "And then you remove that space that you weren't expecting.", 'start': 17692.251, 'duration': 2.601}, {'end': 17697.134, 'text': "Now let's move on to our next example.", 'start': 17695.092, 'duration': 2.042}, {'end': 17706.48, 'text': "So I'm going to pull Visual Studio Code back over to full screen, go to the HTML, And I'm going to comment out what we put in for our first section.", 'start': 17697.234, 'duration': 9.246}, {'end': 17710.964, 'text': "I'll leave it in there for you so if you download the code, though, you can see that example.", 'start': 17706.58, 'duration': 4.384}, {'end': 17715.027, 'text': 'So now the next thing we want to do is create another section.', 'start': 17711.544, 'duration': 3.483}, {'end': 17717.309, 'text': "I'm going to give this a class.", 'start': 17715.047, 'duration': 2.262}, {'end': 17720.031, 'text': "And I'll set this class, well, not class.", 'start': 17717.97, 'duration': 2.061}, {'end': 17720.852, 'text': 'I typed class.', 'start': 17720.112, 'duration': 0.74}, {'end': 17722.514, 'text': 'I should have typed hero.', 'start': 17720.932, 'duration': 1.582}, {'end': 17723.074, 'text': 'There we go.', 'start': 17722.574, 'duration': 0.5}, {'end': 17724.555, 'text': "So I'll give it a class of hero.", 'start': 17723.114, 'duration': 1.441}, {'end': 17733.425, 'text': "And now inside this, instead of just an image, I'm going to put a figure element because that's what we usually put images in.", 'start': 17725.516, 'duration': 7.909}, {'end': 17742.655, 'text': "And I'll give this a class of profile-pic-figure so we know exactly what we're talking about there.", 'start': 17733.885, 'duration': 8.77}, {'end': 17747.036, 'text': "Now inside the figure, I'm going to put the image element.", 'start': 17742.995, 'duration': 4.041}, {'end': 17750.217, 'text': "And then we don't really need to apply a class there.", 'start': 17747.517, 'duration': 2.7}, {'end': 17754.559, 'text': "We'll just use that profile pic figure to reference the image inside of it.", 'start': 17750.257, 'duration': 4.302}, {'end': 17755.799, 'text': "And you'll see how I do that.", 'start': 17754.659, 'duration': 1.14}, {'end': 17762.361, 'text': 'Now we once again want to look inside of our image folder for the source and then pick one of our images.', 'start': 17756.359, 'duration': 6.002}, {'end': 17767.043, 'text': "And you can see I've got a profile dash 800 by 800.", 'start': 17762.422, 'duration': 4.621}, {'end': 17773.007, 'text': 'And if we look at that image in Visual Studio Code, you can see the image here and you can see the dimensions below.', 'start': 17767.043, 'duration': 5.964}, {'end': 17774.689, 'text': "That's 800 by 800.", 'start': 17773.068, 'duration': 1.621}, {'end': 17776.93, 'text': "I'll go ahead and close that out.", 'start': 17774.689, 'duration': 2.241}, {'end': 17781.574, 'text': "Let's give it an alt and I'll just say profile picture.", 'start': 17777.391, 'duration': 4.183}, {'end': 17785.498, 'text': 'And then we need to apply the width and height again.', 'start': 17783.095, 'duration': 2.403}, {'end': 17789.923, 'text': 'We could also apply a title, if you remember that attribute from HTML.', 'start': 17785.858, 'duration': 4.065}, {'end': 17793.006, 'text': "And there we'll just say my profile picture.", 'start': 17790.443, 'duration': 2.563}, {'end': 17795.93, 'text': 'And that shows up when we mouse over the image.', 'start': 17793.026, 'duration': 2.904}, {'end': 17798.993, 'text': "OK, after that, let's apply the width.", 'start': 17796.69, 'duration': 2.303}, {'end': 17801.736, 'text': 'And that would be 800.', 'start': 17799.514, 'duration': 2.222}, {'end': 17803.777, 'text': "And then let's apply the height.", 'start': 17801.736, 'duration': 2.041}, {'end': 17805.637, 'text': "And that's also going to be 800.", 'start': 17804.097, 'duration': 1.54}, {'end': 17808.538, 'text': "I'm going to press Alt-Z to wrap the code.", 'start': 17805.637, 'duration': 2.901}, {'end': 17811.499, 'text': 'That way we see it without scrolling over to the right like it was.', 'start': 17808.718, 'duration': 2.781}, {'end': 17817.1, 'text': 'Now, if you remember the figure element, we also need a fig caption element.', 'start': 17812.099, 'duration': 5.001}, {'end': 17818.121, 'text': "So let's add that.", 'start': 17817.18, 'duration': 0.941}, {'end': 17829.871, 'text': "And inside the fig caption I'm just going to say Jane Doe, so the name of the page that this image belongs to, or the name of the person in the image,", 'start': 17819.381, 'duration': 10.49}, {'end': 17830.372, 'text': 'if you will.', 'start': 17829.871, 'duration': 0.501}, {'end': 17831.873, 'text': 'So we want to add that.', 'start': 17830.472, 'duration': 1.401}, {'end': 17833.235, 'text': 'It helps accessibility.', 'start': 17831.993, 'duration': 1.242}, {'end': 17836.838, 'text': "And I'll show you how to hide it if we don't want it on the screen.", 'start': 17833.675, 'duration': 3.163}, {'end': 17838.72, 'text': "So let's save that much.", 'start': 17837.379, 'duration': 1.341}, {'end': 17842.444, 'text': "And now we can look at our page and see what we've got so far.", 'start': 17839.281, 'duration': 3.163}, {'end': 17843.825, 'text': "It's pretty big.", 'start': 17843.104, 'duration': 0.721}, {'end': 17848.568, 'text': "It's filling up the whole page, isn't it? So we can definitely change that with CSS.", 'start': 17843.885, 'duration': 4.683}, {'end': 17853.712, 'text': "I'm going to hide the file tree by pressing Control-B, and we can make our changes here.", 'start': 17848.668, 'duration': 5.044}, {'end': 17857.775, 'text': "I'll make them below the body but above the previous example.", 'start': 17853.812, 'duration': 3.963}, {'end': 17862.918, 'text': "Let's start with the profile-pic-figure class.", 'start': 17857.895, 'duration': 5.023}, {'end': 17866.521, 'text': "And there, we'll just say a width of 35%.", 'start': 17864.039, 'duration': 2.482}, {'end': 17874.227, 'text': "And that would be the width of the page it's referring to, because that is currently the container.", 'start': 17866.521, 'duration': 7.706}, {'end': 17878.871, 'text': "Actually, it's that hero that we created, so that section.", 'start': 17874.407, 'duration': 4.464}, {'end': 17881.213, 'text': 'And it should be the width of the page.', 'start': 17878.891, 'duration': 2.322}, {'end': 17888.939, 'text': "So after that, let's go ahead and apply the next to the profile pic figure and then the image within.", 'start': 17881.313, 'duration': 7.626}, {'end': 17894.382, 'text': "And here, let's give the image a width of 100% because it's in a container.", 'start': 17888.959, 'duration': 5.423}, {'end': 17896.904, 'text': 'And the height, once again, auto.', 'start': 17895.063, 'duration': 1.841}, {'end': 17899.385, 'text': 'And this does make it responsive.', 'start': 17897.544, 'duration': 1.841}, {'end': 17902.888, 'text': "We've got a percentage for the width and the height set to auto.", 'start': 17899.446, 'duration': 3.442}, {'end': 17907.831, 'text': 'Remember, we set the width and height once again in the HTML to avoid that content layout shift.', 'start': 17902.948, 'duration': 4.883}, {'end': 17910.972, 'text': "OK, now we've got min width.", 'start': 17908.571, 'duration': 2.401}, {'end': 17913.333, 'text': "Let's set that to 100 pixels.", 'start': 17911.672, 'duration': 1.661}, {'end': 17917.034, 'text': "We just don't want the image to get any smaller than that when it does shrink.", 'start': 17913.413, 'duration': 3.621}, {'end': 17919.675, 'text': "And then let's put a border around it.", 'start': 17917.674, 'duration': 2.001}, {'end': 17924.837, 'text': "So let's say border 5 pixels double gray.", 'start': 17919.755, 'duration': 5.082}, {'end': 17926.497, 'text': "So it's not just one solid line.", 'start': 17924.957, 'duration': 1.54}, {'end': 17927.478, 'text': 'It should be two.', 'start': 17926.517, 'duration': 0.961}, {'end': 17930.719, 'text': "And now let's go ahead and save first.", 'start': 17928.338, 'duration': 2.381}, {'end': 17932.719, 'text': "And you can see what we've got.", 'start': 17931.499, 'duration': 1.22}, {'end': 17934.14, 'text': 'Here is our fig caption.', 'start': 17932.839, 'duration': 1.301}, {'end': 17942.081, 'text': "We're only taking up 35% of the width of the full page right now because that section container element is 100%.", 'start': 17934.46, 'duration': 7.621}, {'end': 17944.622, 'text': 'And so the figure is 35.', 'start': 17942.081, 'duration': 2.541}, {'end': 17950.743, 'text': 'And then the image fills out 100% of that figure that is 35% of the page.', 'start': 17944.622, 'duration': 6.121}, {'end': 17953.223, 'text': "Then we've got this double line around the image.", 'start': 17951.223, 'duration': 2}, {'end': 17955.024, 'text': 'And you can see the fig caption underneath.', 'start': 17953.283, 'duration': 1.741}, {'end': 17959.245, 'text': 'One more thing I want to do to our image, though, is make it round.', 'start': 17955.524, 'duration': 3.721}, {'end': 17966.21, 'text': "And since we have a square image, This wouldn't work if we had a rectangle, but with a square, we can do this.", 'start': 17959.465, 'duration': 6.745}, {'end': 17971.696, 'text': "And let's say border radius, say 50%.", 'start': 17966.39, 'duration': 5.306}, {'end': 17975.58, 'text': 'And when we save, we now have our profile image in a circle.', 'start': 17971.696, 'duration': 3.884}, {'end': 17982.107, 'text': "Let's go back to the HTML and add just a little bit more inside of our hero section that we have right here.", 'start': 17975.8, 'duration': 6.307}, {'end': 17986.171, 'text': 'So after the figure, I want to add an H1 to the page.', 'start': 17982.207, 'duration': 3.964}, {'end': 17989.514, 'text': "I'm going to give this a class of H1 as well.", 'start': 17986.191, 'duration': 3.323}, {'end': 18001.064, 'text': "Inside the H1, I'm going to go ahead and give a span element and give a class of no wrap because I won't want what's inside the span to wrap.", 'start': 17990.094, 'duration': 10.97}, {'end': 18003.806, 'text': 'If you remember, a span element is an inline element.', 'start': 18001.124, 'duration': 2.682}, {'end': 18008.931, 'text': "I'm going to say hello, and then I'm going to paste in a little wave emoji here.", 'start': 18004.327, 'duration': 4.604}, {'end': 18010.772, 'text': "So I'll just paste this over.", 'start': 18009.011, 'duration': 1.761}, {'end': 18014.695, 'text': 'And you can get those wave emojis from different places.', 'start': 18012.153, 'duration': 2.542}, {'end': 18018.219, 'text': 'I use emojipedia.com, I believe, to get that one.', 'start': 18014.715, 'duration': 3.504}, {'end': 18022.002, 'text': "After that, I'm going to provide another span element.", 'start': 18018.799, 'duration': 3.203}, {'end': 18024.845, 'text': 'And once again, give the no wrap class.', 'start': 18022.162, 'duration': 2.683}, {'end': 18028.668, 'text': "And here, I'm just going to say, I'm Jane.", 'start': 18025.546, 'duration': 3.122}, {'end': 18030.794, 'text': "as that's who's in our picture.", 'start': 18029.713, 'duration': 1.081}, {'end': 18033.598, 'text': 'And now we can instantly see that on the page as well.', 'start': 18030.894, 'duration': 2.704}, {'end': 18034.739, 'text': "So we've got our H1.", 'start': 18033.918, 'duration': 0.821}, {'end': 18037.522, 'text': "We've got a couple of no wrap classes here.", 'start': 18035.019, 'duration': 2.503}, {'end': 18041.066, 'text': "And we've got the H1 class on the H1 element.", 'start': 18038.063, 'duration': 3.003}, {'end': 18043.289, 'text': "Let's go back to the CSS now.", 'start': 18041.166, 'duration': 2.123}, {'end': 18047.734, 'text': "OK, let's start below the body but above our profile pic figure class.", 'start': 18043.629, 'duration': 4.105}, {'end': 18050.036, 'text': 'And if you remember, we have a hero class.', 'start': 18047.774, 'duration': 2.262}, {'end': 18051.918, 'text': 'And that is the container.', 'start': 18050.717, 'duration': 1.201}, {'end': 18053.4, 'text': 'That is that section element.', 'start': 18051.958, 'duration': 1.442}, {'end': 18057.043, 'text': "Let's put a border on the bottom only so we can see it.", 'start': 18053.48, 'duration': 3.563}, {'end': 18059.325, 'text': "We'll say two pixels solid.", 'start': 18057.103, 'duration': 2.222}, {'end': 18061.127, 'text': "We'll give that a color of black.", 'start': 18059.466, 'duration': 1.661}, {'end': 18063.63, 'text': 'When we save, we can see that change instantly.', 'start': 18061.307, 'duration': 2.323}, {'end': 18066.312, 'text': "Let's add a few more styles to our hero.", 'start': 18064.25, 'duration': 2.062}, {'end': 18071.597, 'text': "Let's give some padding here of 20 pixels to push everything a little bit away from the edges.", 'start': 18066.332, 'duration': 5.265}, {'end': 18072.658, 'text': 'There we go.', 'start': 18072.218, 'duration': 0.44}, {'end': 18083.105, 'text': "and now let's give this a display of flex and by default flex is a row, so we'll already have our content in a row.", 'start': 18073.439, 'duration': 9.666}, {'end': 18085.406, 'text': 'then, instead of stacked on top of each other.', 'start': 18083.105, 'duration': 2.301}, {'end': 18097.794, 'text': "now let's say justify dash content and let's say flex start here, and then, after we put that at the start, let's align the items to center,", 'start': 18085.406, 'duration': 12.388}, {'end': 18105.783, 'text': "And after we align the items to center, let's apply a gap between the items of about 30 pixels and save.", 'start': 18099.159, 'duration': 6.624}, {'end': 18107.704, 'text': "And that's what we've got now.", 'start': 18106.543, 'duration': 1.161}, {'end': 18113.167, 'text': "We've got our image over here on the left, and we've got the hello, I'm Jane on the right.", 'start': 18107.744, 'duration': 5.423}, {'end': 18117.249, 'text': "Now let's go below the hero section and add our H1 class.", 'start': 18113.267, 'duration': 3.982}, {'end': 18121.212, 'text': "And inside the H1 class, let's make this font a lot larger.", 'start': 18117.93, 'duration': 3.282}, {'end': 18123.947, 'text': "Let's say font-size, 500%.", 'start': 18121.252, 'duration': 2.695}, {'end': 18127.911, 'text': "And we'll save and see how big that gets.", 'start': 18123.947, 'duration': 3.964}, {'end': 18128.952, 'text': 'Nice and big.', 'start': 18128.151, 'duration': 0.801}, {'end': 18129.652, 'text': 'That works.', 'start': 18129.032, 'duration': 0.62}, {'end': 18138.3, 'text': "Okay What I'd like to do, though, is make the page full screen once again and look at dev tools so we can resize the page and see some things.", 'start': 18129.853, 'duration': 8.447}, {'end': 18142.363, 'text': "Right now, even though we put those classes on, we haven't defined those yet.", 'start': 18138.38, 'duration': 3.983}, {'end': 18147.528, 'text': "So we're getting the text to wrap in some strange ways that aren't always the way we want.", 'start': 18142.424, 'duration': 5.104}, {'end': 18154.893, 'text': 'here But notice our image is shrinking nicely, but it stops at the 100 pixel minimum width that we left it.', 'start': 18147.588, 'duration': 7.305}, {'end': 18158.976, 'text': "And we still have that fig caption on there that we'll want to remove as well.", 'start': 18155.293, 'duration': 3.683}, {'end': 18162.899, 'text': 'So just checking out the resize ability of everything at this point.', 'start': 18159.056, 'duration': 3.843}, {'end': 18169.523, 'text': "Let's close DevTools, move Chrome back over to the right, and let's define those utility classes.", 'start': 18163.339, 'duration': 6.184}, {'end': 18172.626, 'text': 'So if we come up to the top, we can put some notes in here.', 'start': 18169.904, 'duration': 2.722}, {'end': 18177.428, 'text': 'And we can say begin reset with our comments.', 'start': 18173.266, 'duration': 4.162}, {'end': 18182.27, 'text': 'And then after our image, we can say end reset.', 'start': 18177.748, 'duration': 4.522}, {'end': 18184.891, 'text': 'And there we go.', 'start': 18184.251, 'duration': 0.64}, {'end': 18193.555, 'text': "And now let's go ahead and put utility classes, just organizing the CSS a little bit.", 'start': 18184.911, 'duration': 8.644}, {'end': 18199.158, 'text': "And then we'll say end utility classes.", 'start': 18193.675, 'duration': 5.483}, {'end': 18203.694, 'text': 'Okay, so we can define these utility classes right in here.', 'start': 18200.552, 'duration': 3.142}, {'end': 18206.415, 'text': 'The first one will be no wrap.', 'start': 18204.134, 'duration': 2.281}, {'end': 18210.037, 'text': "Now these are things we've covered in previous lessons, but it's a good review.", 'start': 18206.555, 'duration': 3.482}, {'end': 18213.439, 'text': "So we'll set white space to no wrap.", 'start': 18210.137, 'duration': 3.302}, {'end': 18217.301, 'text': 'Now when we save, notice what instantly happened on the page.', 'start': 18214.58, 'duration': 2.721}, {'end': 18223.504, 'text': "I'm was over here, but we've got it to where I'm Jane should not split.", 'start': 18217.802, 'duration': 5.702}, {'end': 18224.525, 'text': 'That should not wrap.', 'start': 18223.644, 'duration': 0.881}, {'end': 18226.406, 'text': 'The same with the hello and the wave.', 'start': 18224.585, 'duration': 1.821}, {'end': 18236.03, 'text': "So now they're on the lines that they should be on and we don't want to see the word I'm and the word Jane break and we don't want to see the hello and the wave break.", 'start': 18226.546, 'duration': 9.484}, {'end': 18239.813, 'text': "And that's why we applied those Classes of no wrap the way we did.", 'start': 18236.05, 'duration': 3.763}, {'end': 18243.836, 'text': "now let's go ahead and apply an off-screen class also.", 'start': 18239.813, 'duration': 4.023}, {'end': 18252.162, 'text': 'So this off-screen class will still allow the fig caption to be read for accessibility, But it will hide it from the visible page.', 'start': 18243.836, 'duration': 8.326}, {'end': 18264.572, 'text': "So we'll say position set this to absolute and then let's just send it left minus 10,000 pixels and save and And it looks like it's still on the page.", 'start': 18252.262, 'duration': 12.31}, {'end': 18267.254, 'text': "Maybe we don't have that on our fig caption yet.", 'start': 18264.912, 'duration': 2.342}, {'end': 18267.955, 'text': "And we don't.", 'start': 18267.374, 'duration': 0.581}, {'end': 18269.096, 'text': 'I forgot to put it on there.', 'start': 18268.035, 'duration': 1.061}, {'end': 18275.922, 'text': "So let's give it a class equal to off screen and save.", 'start': 18269.116, 'duration': 6.806}, {'end': 18279.825, 'text': 'And now our fig caption is gone as I expected it to be.', 'start': 18276.302, 'duration': 3.523}, {'end': 18284.189, 'text': "We've got the basics of a hero section here, a header for our page.", 'start': 18280.105, 'duration': 4.084}, {'end': 18286.01, 'text': "But it's pretty plain right now.", 'start': 18284.349, 'duration': 1.661}, {'end': 18288.473, 'text': "So let's start working with background images.", 'start': 18286.091, 'duration': 2.382}, {'end': 18296.058, 'text': "So now that we have put our utility classes here, let's scroll back down below the body and back to the hero section.", 'start': 18289.113, 'duration': 6.945}, {'end': 18303.963, 'text': "Now, after this gap for our flexbox display, I'll put an extra line so we can see these new properties we're going to work with.", 'start': 18296.558, 'duration': 7.405}, {'end': 18309.647, 'text': 'The first one is a property you have seen before, and that is background-color.', 'start': 18304.403, 'duration': 5.244}, {'end': 18317.152, 'text': "We want to put a fallback, and that is if the background image doesn't load, we at least want to have a color behind it.", 'start': 18310.127, 'duration': 7.025}, {'end': 18325.415, 'text': "So let's put RGB and I'm going to go with the color I discovered that I think I like and just put these three values in there.", 'start': 18317.652, 'duration': 7.763}, {'end': 18327.795, 'text': "You can see it's kind of a peach or gold.", 'start': 18325.435, 'duration': 2.36}, {'end': 18328.856, 'text': "I'll save this.", 'start': 18327.955, 'duration': 0.901}, {'end': 18334.017, 'text': 'And there you can see the background color that we now have for the hero section.', 'start': 18329.496, 'duration': 4.521}, {'end': 18335.758, 'text': "But that's a fallback.", 'start': 18334.378, 'duration': 1.38}, {'end': 18338.479, 'text': "So let's go ahead and put in a background image.", 'start': 18335.838, 'duration': 2.641}, {'end': 18341.419, 'text': 'That is background-image.', 'start': 18339.938, 'duration': 1.481}, {'end': 18346.461, 'text': 'Now you would think we might specify image here, but actually we need URL.', 'start': 18341.839, 'duration': 4.622}, {'end': 18351.002, 'text': 'And inside of the parentheses then, we put quotes.', 'start': 18347.261, 'duration': 3.741}, {'end': 18355.444, 'text': 'And now we need to go inside of the image folder again.', 'start': 18351.623, 'duration': 3.821}, {'end': 18359.766, 'text': 'But remember, we were doing that in HTML simply by typing image.', 'start': 18355.484, 'duration': 4.282}, {'end': 18362.007, 'text': "But we're not in that folder now.", 'start': 18360.246, 'duration': 1.761}, {'end': 18363.487, 'text': "We're in the CSS folder.", 'start': 18362.147, 'duration': 1.34}, {'end': 18365.768, 'text': 'So we need to go up out of the folder.', 'start': 18363.567, 'duration': 2.201}, {'end': 18367.429, 'text': "And that's two dots to go up.", 'start': 18365.788, 'duration': 1.641}, {'end': 18372.638, 'text': 'then a slash, and now you can see Visual Studio Code says our image folder is there.', 'start': 18368.109, 'duration': 4.529}, {'end': 18376.707, 'text': "And now let's pick this PAT1 that we looked at before.", 'start': 18373.24, 'duration': 3.467}, {'end': 18378.31, 'text': 'It has a pattern on it.', 'start': 18376.847, 'duration': 1.463}, {'end': 18382.175, 'text': 'And I guess I need to put a semicolon there where that ends.', 'start': 18379.213, 'duration': 2.962}, {'end': 18383.716, 'text': 'That was right at the end of the line.', 'start': 18382.215, 'duration': 1.501}, {'end': 18385.276, 'text': "And now let's save.", 'start': 18384.236, 'duration': 1.04}, {'end': 18389.979, 'text': "And of course, our text is black, so that doesn't look too good there.", 'start': 18386.357, 'duration': 3.622}, {'end': 18394.902, 'text': 'But otherwise, you can see this pattern behind everything.', 'start': 18390.099, 'duration': 4.803}, {'end': 18397.043, 'text': "And it's a repeating pattern.", 'start': 18395.242, 'duration': 1.801}, {'end': 18398.423, 'text': "And we'll talk about that too.", 'start': 18397.123, 'duration': 1.3}, {'end': 18401.965, 'text': "Let's go ahead and quickly add a color to our H1.", 'start': 18398.483, 'duration': 3.482}, {'end': 18404.766, 'text': 'so we can see our text again.', 'start': 18403.346, 'duration': 1.42}, {'end': 18406.207, 'text': "so now we've got hello.", 'start': 18404.766, 'duration': 1.441}, {'end': 18419.071, 'text': "i'm jane in white, but what is happening by default is our 200 by 200 image is repeating both on the x-axis and the y-axis, in both directions,", 'start': 18406.207, 'duration': 12.864}, {'end': 18421.492, 'text': "and it's filling this out and the pattern looks pretty good.", 'start': 18419.071, 'duration': 2.421}, {'end': 18424.592, 'text': "you can't see where it starts or ends really.", 'start': 18421.492, 'duration': 3.1}, {'end': 18432.775, 'text': 'so what we can do to control that is the background, dash, repeat property and we can just say no, repeat.', 'start': 18424.592, 'duration': 8.183}, {'end': 18434.476, 'text': "And now let's look at what happens.", 'start': 18433.195, 'duration': 1.281}, {'end': 18440.241, 'text': 'Now we just have our 200 by 200 image up here in the top left by default.', 'start': 18435.497, 'duration': 4.744}, {'end': 18447.368, 'text': "Likewise, we've already seen what happens with the default repeat value, and it repeats everywhere.", 'start': 18441.002, 'duration': 6.366}, {'end': 18458.978, 'text': "But we can just say repeat y for the y-axis and it just stays all on the up and down, essentially the y-axis. or repeat x and it's all on the x-axis.", 'start': 18447.708, 'duration': 11.27}], 'summary': 'The transcript discusses html and css coding, including elements, classes, and properties, with practical examples and visual representations.', 'duration': 821.601, 'max_score': 17637.377, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA17637377.jpg'}, {'end': 17838.72, 'src': 'embed', 'start': 17812.099, 'weight': 2, 'content': [{'end': 17817.1, 'text': 'Now, if you remember the figure element, we also need a fig caption element.', 'start': 17812.099, 'duration': 5.001}, {'end': 17818.121, 'text': "So let's add that.", 'start': 17817.18, 'duration': 0.941}, {'end': 17829.871, 'text': "And inside the fig caption I'm just going to say Jane Doe, so the name of the page that this image belongs to, or the name of the person in the image,", 'start': 17819.381, 'duration': 10.49}, {'end': 17830.372, 'text': 'if you will.', 'start': 17829.871, 'duration': 0.501}, {'end': 17831.873, 'text': 'So we want to add that.', 'start': 17830.472, 'duration': 1.401}, {'end': 17833.235, 'text': 'It helps accessibility.', 'start': 17831.993, 'duration': 1.242}, {'end': 17836.838, 'text': "And I'll show you how to hide it if we don't want it on the screen.", 'start': 17833.675, 'duration': 3.163}, {'end': 17838.72, 'text': "So let's save that much.", 'start': 17837.379, 'duration': 1.341}], 'summary': "Adding fig caption element with 'jane doe' for image accessibility.", 'duration': 26.621, 'max_score': 17812.099, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA17812099.jpg'}, {'end': 17894.382, 'src': 'embed', 'start': 17864.039, 'weight': 4, 'content': [{'end': 17866.521, 'text': "And there, we'll just say a width of 35%.", 'start': 17864.039, 'duration': 2.482}, {'end': 17874.227, 'text': "And that would be the width of the page it's referring to, because that is currently the container.", 'start': 17866.521, 'duration': 7.706}, {'end': 17878.871, 'text': "Actually, it's that hero that we created, so that section.", 'start': 17874.407, 'duration': 4.464}, {'end': 17881.213, 'text': 'And it should be the width of the page.', 'start': 17878.891, 'duration': 2.322}, {'end': 17888.939, 'text': "So after that, let's go ahead and apply the next to the profile pic figure and then the image within.", 'start': 17881.313, 'duration': 7.626}, {'end': 17894.382, 'text': "And here, let's give the image a width of 100% because it's in a container.", 'start': 17888.959, 'duration': 5.423}], 'summary': 'Setting width to 35% for page, 100% for image in a container', 'duration': 30.343, 'max_score': 17864.039, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA17864039.jpg'}, {'end': 18382.175, 'src': 'embed', 'start': 18355.484, 'weight': 1, 'content': [{'end': 18359.766, 'text': 'But remember, we were doing that in HTML simply by typing image.', 'start': 18355.484, 'duration': 4.282}, {'end': 18362.007, 'text': "But we're not in that folder now.", 'start': 18360.246, 'duration': 1.761}, {'end': 18363.487, 'text': "We're in the CSS folder.", 'start': 18362.147, 'duration': 1.34}, {'end': 18365.768, 'text': 'So we need to go up out of the folder.', 'start': 18363.567, 'duration': 2.201}, {'end': 18367.429, 'text': "And that's two dots to go up.", 'start': 18365.788, 'duration': 1.641}, {'end': 18372.638, 'text': 'then a slash, and now you can see Visual Studio Code says our image folder is there.', 'start': 18368.109, 'duration': 4.529}, {'end': 18376.707, 'text': "And now let's pick this PAT1 that we looked at before.", 'start': 18373.24, 'duration': 3.467}, {'end': 18378.31, 'text': 'It has a pattern on it.', 'start': 18376.847, 'duration': 1.463}, {'end': 18382.175, 'text': 'And I guess I need to put a semicolon there where that ends.', 'start': 18379.213, 'duration': 2.962}], 'summary': 'Transition from html to css, navigating folders, and selecting pat1 with a pattern.', 'duration': 26.691, 'max_score': 18355.484, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA18355484.jpg'}], 'start': 17231.636, 'title': 'Html and css styling', 'summary': "Covers styling images and text, creating a hero section with an image, adding classes for styling, and implementing background images and colors in a hero section, emphasizing making text visible and using 'cover' for background-size.", 'chapters': [{'end': 17694.852, 'start': 17231.636, 'title': 'Styling images and text', 'summary': 'Covers styling images and text in html and css, including setting dimensions and making images responsive, applying styles to sections and images, and removing unwanted space below images.', 'duration': 463.216, 'highlights': ['The chapter covers making images responsive by setting dimensions and applying height of auto in CSS to respond to the percentage of width set in HTML. The chapter explains the process of making images responsive by setting dimensions and applying a height of auto in CSS to respond to the percentage of width set in HTML.', 'Applying styles to sections and images, including setting margins, padding, and borders for design purposes. The chapter discusses applying styles to sections and images, including setting margins, padding, and borders for design purposes.', "Removing unwanted space below images by setting the 'display' property of images to 'block' in CSS. The chapter demonstrates removing unwanted space below images by setting the 'display' property of images to 'block' in CSS."]}, {'end': 17986.171, 'start': 17695.092, 'title': 'Html page design example', 'summary': 'Demonstrates creating a hero section with an image, setting class attributes, applying css for responsiveness, and making the image round, with the final output being a profile image in a circle.', 'duration': 291.079, 'highlights': ['Creating a hero section with an image The transcript explains the process of creating a hero section with a profile image and adding a fig caption for accessibility.', "Applying CSS for responsiveness and making the image round The speaker demonstrates applying CSS to make the image responsive by setting width to 100% and height to auto, and then making the square image round using 'border-radius: 50%'.", "Setting class attributes The speaker sets the class attribute for the hero section and the figure element to 'hero' and 'profile-pic-figure' respectively to style and reference them in the CSS."]}, {'end': 18279.825, 'start': 17986.191, 'title': 'Html and css styling', 'summary': 'Covers adding classes to html elements for styling, including applying no-wrap and off-screen classes to prevent text wrapping and hide elements from the visible page, all while using emojipedia.com to source an emoji.', 'duration': 293.634, 'highlights': ["Applying no-wrap and off-screen classes to prevent text wrapping and hide elements from the visible page The transcript explains the process of applying no-wrap and off-screen classes to prevent text wrapping and hide elements from the visible page, ensuring that specific content, such as 'I'm Jane' and 'hello' with a wave emoji, remains on the intended lines without breaking.", 'Using emojipedia.com to source a wave emoji The speaker mentions using emojipedia.com to source a wave emoji, providing insight into the resource used to incorporate emojis into the HTML content.', 'Adjusting font size using CSS The chapter demonstrates increasing the font size for the H1 element to 500%, showcasing a method for adjusting text appearance through CSS.']}, {'end': 18727.456, 'start': 18280.105, 'title': 'Css hero section background', 'summary': "Covers the implementation of background images and colors in a hero section using css, including setting fallback colors, specifying background images with urls, controlling image repetition, adjusting font visibility, and optimizing image size, emphasizing the importance of making text visible and the use of 'cover' for background-size.", 'duration': 447.351, 'highlights': ['The importance of making text visible on the background image is emphasized, with a demonstration of using transparent images and adjusting text color for better visibility.', "The concept of background-size is introduced, specifically the 'cover' setting, to ensure a larger portion of the background image is displayed, with a caution about text readability and a brief mention of the 'contains' setting.", 'The consideration of image optimization is discussed, highlighting the importance of using images twice as large as intended for display to avoid blurriness on devices with varying pixel densities.', 'The process of specifying background colors and setting fallback options is explained, including the use of RGB values and the demonstration of a peach/gold color as a fallback.', 'The method of specifying background images using URLs and navigating folders within the CSS directory is detailed, showcasing the selection of images and the use of semicolons to end lines.']}], 'duration': 1495.82, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA17231636.jpg', 'highlights': ['The consideration of image optimization is discussed, highlighting the importance of using images twice as large as intended for display to avoid blurriness on devices with varying pixel densities.', "The concept of background-size is introduced, specifically the 'cover' setting, to ensure a larger portion of the background image is displayed, with a caution about text readability and a brief mention of the 'contains' setting.", 'The chapter covers making images responsive by setting dimensions and applying a height of auto in CSS to respond to the percentage of width set in HTML.', 'Applying styles to sections and images, including setting margins, padding, and borders for design purposes.', 'The process of specifying background colors and setting fallback options is explained, including the use of RGB values and the demonstration of a peach/gold color as a fallback.']}, {'end': 20519.584, 'segs': [{'end': 19311.13, 'src': 'embed', 'start': 19283.35, 'weight': 0, 'content': [{'end': 19287.133, 'text': 'And now when we look, it goes from steel blue to purple to white.', 'start': 19283.35, 'duration': 3.783}, {'end': 19297.521, 'text': 'So you can use pretty much as many colors as you want to and you could have a veritable rainbow, I should say, going from top to bottom or,', 'start': 19287.393, 'duration': 10.128}, {'end': 19299.963, 'text': "as we'll find out here, any direction you want.", 'start': 19297.521, 'duration': 2.442}, {'end': 19308.869, 'text': "So I'm going to say to left and save, and you can see it's white on the left and it's blue on the right.", 'start': 19300.163, 'duration': 8.706}, {'end': 19311.13, 'text': 'so it starts at the right and it goes to left.', 'start': 19308.869, 'duration': 2.261}], 'summary': 'The colors transition from steel blue to purple to white, allowing for a customizable rainbow effect.', 'duration': 27.78, 'max_score': 19283.35, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA19283350.jpg'}, {'end': 19362.748, 'src': 'embed', 'start': 19333.676, 'weight': 1, 'content': [{'end': 19340.597, 'text': 'and imagine we were typing paragraphs over here on the left and we stop somewhere and it gets darker over here on the right,', 'start': 19333.676, 'duration': 6.921}, {'end': 19341.737, 'text': 'and that would work for us.', 'start': 19340.597, 'duration': 1.14}, {'end': 19348.679, 'text': "Now let's look at how we can apply a second background image, and you can apply more than two if you want to,", 'start': 19342.317, 'duration': 6.362}, {'end': 19350.579, 'text': "but I'm just going to do an example with two.", 'start': 19348.679, 'duration': 1.9}, {'end': 19356.343, 'text': "So now I'll say URL, provide the parentheses here, a comma after that.", 'start': 19351.259, 'duration': 5.084}, {'end': 19362.748, 'text': 'So we clearly have our two images defined and I want to go ahead and space this over if it will.', 'start': 19356.483, 'duration': 6.265}], 'summary': 'Demonstrating application of two background images in web development.', 'duration': 29.072, 'max_score': 19333.676, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA19333676.jpg'}, {'end': 19676.09, 'src': 'embed', 'start': 19650.01, 'weight': 4, 'content': [{'end': 19654.434, 'text': "we haven't changed the position or anything else of the image, but we'll do some of that here.", 'start': 19650.01, 'duration': 4.424}, {'end': 19656.255, 'text': "let's at least change the size.", 'start': 19654.434, 'duration': 1.821}, {'end': 19665.002, 'text': "so background size is going to be 100 percent And now we can see that full image behind Jane's name.", 'start': 19656.255, 'duration': 8.747}, {'end': 19673.228, 'text': "So now let's go ahead and text dash transform, set Jane's name to uppercase.", 'start': 19665.582, 'duration': 7.646}, {'end': 19676.09, 'text': "And it's really filling out the page now.", 'start': 19674.008, 'duration': 2.082}], 'summary': "Image size set to 100%, jane's name transformed to uppercase, filling out the page.", 'duration': 26.08, 'max_score': 19650.01, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA19650010.jpg'}, {'end': 19730.817, 'src': 'embed', 'start': 19703.454, 'weight': 3, 'content': [{'end': 19706.657, 'text': 'But there is a prefix that we need to use with this.', 'start': 19703.454, 'duration': 3.203}, {'end': 19709.86, 'text': 'So we can see the support for Edge, not Explorer.', 'start': 19706.697, 'duration': 3.163}, {'end': 19712.902, 'text': "And we're not really going to worry about Explorer ever, probably.", 'start': 19710.02, 'duration': 2.882}, {'end': 19716.425, 'text': 'But for Chrome, you see the little yellow here.', 'start': 19713.443, 'duration': 2.982}, {'end': 19719.848, 'text': 'And it says supported with prefix WebKit.', 'start': 19716.465, 'duration': 3.383}, {'end': 19721.73, 'text': "Firefox doesn't need that.", 'start': 19720.188, 'duration': 1.542}, {'end': 19724.752, 'text': 'But just about everybody else does.', 'start': 19722.41, 'duration': 2.342}, {'end': 19729.696, 'text': 'So we need to use that prefix when we apply this property.', 'start': 19725.213, 'duration': 4.483}, {'end': 19730.817, 'text': "So what we're going to do..", 'start': 19729.837, 'duration': 0.98}], 'summary': 'Use the webkit prefix for chrome, not needed for firefox, and needed for most other browsers.', 'duration': 27.363, 'max_score': 19703.454, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA19703454.jpg'}, {'end': 20449.363, 'src': 'heatmap', 'start': 20041.612, 'weight': 0.796, 'content': [{'end': 20046.894, 'text': 'Now, do you have to memorize how to type that out? Not really, because VS Code helps us a lot.', 'start': 20041.612, 'duration': 5.282}, {'end': 20054.357, 'text': "I'm going to just select everything quickly with Control-A, cut it out of the page with Control-X, so I have a blank HTML page.", 'start': 20046.994, 'duration': 7.363}, {'end': 20060.038, 'text': 'Now in VS Code, if I type an exclamation mark, you can see it says emit abbreviation.', 'start': 20055.177, 'duration': 4.861}, {'end': 20065.88, 'text': 'When I press tab, it fills out the basic skeleton of an HTML page.', 'start': 20060.478, 'duration': 5.402}, {'end': 20076.922, 'text': 'You can see it includes this meta tag with the name viewport, the content with width equal to device width, and the initial scale set to 1.0.', 'start': 20066.34, 'duration': 10.582}, {'end': 20082.644, 'text': "It's very important to have that as we work with responsive design and Visual Studio Code helps you do that.", 'start': 20076.922, 'duration': 5.722}, {'end': 20095.712, 'text': "i'm going to press ctrl a now to select all of this and then ctrl v to paste over and just go back to the page outline that i already had with the header nav main and footer ctrl s to save,", 'start': 20083.084, 'duration': 12.628}, {'end': 20097.933, 'text': "and we're ready to move on to the css.", 'start': 20095.712, 'duration': 2.221}, {'end': 20104.337, 'text': "okay, before we add any actual css to what we already have, let's just talk about the syntax of a media query first.", 'start': 20097.933, 'duration': 6.404}, {'end': 20107.719, 'text': "so i'm going to paste this in and look at the syntax.", 'start': 20104.337, 'duration': 3.382}, {'end': 20108.82, 'text': 'that is how we write it.', 'start': 20107.719, 'duration': 1.101}, {'end': 20113.042, 'text': 'so we start out with app media and And then we give the media type.', 'start': 20108.82, 'duration': 4.222}, {'end': 20120.405, 'text': 'And then we specify a condition or conditions, as we can link those with logical operators, and, and, or.', 'start': 20113.642, 'duration': 6.763}, {'end': 20123.646, 'text': 'And then we specify a breakpoint.', 'start': 20121.225, 'duration': 2.421}, {'end': 20127.507, 'text': "And that depends on the condition as what type of breakpoint we'll use.", 'start': 20123.786, 'duration': 3.721}, {'end': 20131.589, 'text': "There's lots of different types of breakpoints and conditions we can apply.", 'start': 20127.547, 'duration': 4.042}, {'end': 20137.092, 'text': 'And then just like we do with anything else, we put the CSS rules between the curly braces.', 'start': 20132.049, 'duration': 5.043}, {'end': 20143.635, 'text': "So now that we've looked at that syntax, let's go ahead and write a media query and see how that applies.", 'start': 20137.632, 'duration': 6.003}, {'end': 20150.419, 'text': 'So we can start out with at media, and instead of media type here, we can say, Screen.', 'start': 20143.755, 'duration': 6.664}, {'end': 20152.3, 'text': "That is the most common one you'll see.", 'start': 20150.579, 'duration': 1.721}, {'end': 20159.907, 'text': 'You might also see all or print or even speech for screen readers and devices that read the screen back to you.', 'start': 20152.48, 'duration': 7.427}, {'end': 20166.453, 'text': 'And then after condition or as the condition, I should say, you often see min-width.', 'start': 20160.407, 'duration': 6.046}, {'end': 20170.076, 'text': 'And you should read min-width as starting from.', 'start': 20167.013, 'duration': 3.063}, {'end': 20177.621, 'text': 'So whatever the width we specify is, these styles will start from that width when we say min-width.', 'start': 20170.356, 'duration': 7.265}, {'end': 20180.864, 'text': 'Likewise, max-width would be up to.', 'start': 20178.142, 'duration': 2.722}, {'end': 20186.288, 'text': 'So the styles would apply up to the width we would provide if we said max-width there.', 'start': 20181.104, 'duration': 5.184}, {'end': 20188.65, 'text': 'We usually do this with min-width.', 'start': 20186.748, 'duration': 1.902}, {'end': 20198.138, 'text': 'And that is because we design from the smallest to the largest, and that is what is called mobile first design and responsive design.', 'start': 20188.81, 'duration': 9.328}, {'end': 20200.8, 'text': 'and the reason we do that is well, think about it this way.', 'start': 20198.138, 'duration': 2.662}, {'end': 20204.844, 'text': 'as an analogy when you get a box, you unpack something.', 'start': 20200.8, 'duration': 4.044}, {'end': 20209.569, 'text': "it's often hard to put everything back in the box the way it was packed and get the lid to close.", 'start': 20204.844, 'duration': 4.725}, {'end': 20212.051, 'text': "It's kind of like that when we design a page.", 'start': 20209.989, 'duration': 2.062}, {'end': 20216.674, 'text': "It's easier to start with the smallest and work our way towards the largest,", 'start': 20212.151, 'duration': 4.523}, {'end': 20222.499, 'text': 'rather than start with the largest and then try to squeeze everything into a smaller and smaller box, if you will.', 'start': 20216.674, 'duration': 5.825}, {'end': 20225.241, 'text': "So that's kind of the analogy I use to explain that.", 'start': 20222.619, 'duration': 2.622}, {'end': 20227.683, 'text': "So we'll start out with a mobile device screen.", 'start': 20225.642, 'duration': 2.041}, {'end': 20232.487, 'text': "Usually that's a one column design, and we can spread things out as we go.", 'start': 20228.144, 'duration': 4.343}, {'end': 20240.575, 'text': "So for this first min width For the breakpoint, let's say I would put and remember, this is starting from.", 'start': 20232.687, 'duration': 7.888}, {'end': 20246.181, 'text': "so I would put something like oh, let's go with 481 pixels.", 'start': 20240.575, 'duration': 5.606}, {'end': 20254.709, 'text': 'So all of our styles before this media query would be applied until we got to 481 pixels.', 'start': 20246.702, 'duration': 8.007}, {'end': 20261.573, 'text': 'And then they would still be applied unless we were to overwrite them because the cascade still works.', 'start': 20255.169, 'duration': 6.404}, {'end': 20267.477, 'text': 'So here we could change something maybe about the body, maybe the font, maybe a background color.', 'start': 20262.074, 'duration': 5.403}, {'end': 20272.261, 'text': "And that's what we'll experiment with today because it's so easy to see those background color changes.", 'start': 20267.858, 'duration': 4.403}, {'end': 20276.744, 'text': 'And then we can overwrite the previous style we had.', 'start': 20273.041, 'duration': 3.703}, {'end': 20282.588, 'text': 'Other styles, if we do not overwrite those, they will still apply if they were applied before the media query.', 'start': 20276.924, 'duration': 5.664}, {'end': 20287.611, 'text': "Now, as always, I'll give a link to the MDN references in the description below.", 'start': 20282.788, 'duration': 4.823}, {'end': 20291.674, 'text': "But let's talk about some of the other conditions and breakpoints we could have.", 'start': 20288.032, 'duration': 3.642}, {'end': 20297.278, 'text': "Although, as I've said, min width and max width with pixels as a breakpoint is very common.", 'start': 20291.834, 'duration': 5.444}, {'end': 20301.121, 'text': 'But you could also have something like orientation.', 'start': 20297.698, 'duration': 3.423}, {'end': 20311.812, 'text': 'And then you would set that to possibly landscape, which would be kind of turning your phone to the horizontal instead of the vertical orientation,', 'start': 20301.702, 'duration': 10.11}, {'end': 20312.553, 'text': 'something like that.', 'start': 20311.812, 'duration': 0.741}, {'end': 20324.992, 'text': "There's also something like min-aspect dash ratio and there you can actually set a ratio and there are many different sizes of phones.", 'start': 20312.913, 'duration': 12.079}, {'end': 20334.679, 'text': 'so while landscape would actually apply to anything that was wider than it was tall, here we could set something more like specific,', 'start': 20324.992, 'duration': 9.687}, {'end': 20344.207, 'text': 'like 16 by 9 or say 7 by 4, something like that then, when the aspect ratio reached that size,', 'start': 20334.679, 'duration': 9.528}, {'end': 20353.555, 'text': 'so the width would be 7 and the height would be four in that ratio, or 16 by nine, or whatever we put.', 'start': 20344.207, 'duration': 9.348}, {'end': 20355.276, 'text': 'that is when that would apply.', 'start': 20353.555, 'duration': 1.721}, {'end': 20360.641, 'text': "now. remember, we can also put more than one rule here and we'll look at that very soon as well.", 'start': 20355.276, 'duration': 5.365}, {'end': 20365.545, 'text': 'so how do we decide what breakpoints to apply and what values to use?', 'start': 20360.641, 'duration': 4.904}, {'end': 20372.592, 'text': 'well, there are some common ones and we can also look at some css frameworks and see what they have applied,', 'start': 20365.545, 'duration': 7.047}, {'end': 20376.995, 'text': 'because they have probably researched that and worked with it a little bit more than we have.', 'start': 20372.592, 'duration': 4.403}, {'end': 20378.956, 'text': "So let's look at what some others have done.", 'start': 20377.095, 'duration': 1.861}, {'end': 20381.078, 'text': "I'm going to open up the file tree here.", 'start': 20379.076, 'duration': 2.002}, {'end': 20385.982, 'text': "You can see I have a notes.md that I'm going to include in this repository.", 'start': 20381.558, 'duration': 4.424}, {'end': 20387.803, 'text': '.md means markdown.', 'start': 20386.482, 'duration': 1.321}, {'end': 20389.304, 'text': "So it's a markdown file.", 'start': 20387.943, 'duration': 1.361}, {'end': 20391.926, 'text': "When I click on this, you'll see the outline here.", 'start': 20389.884, 'duration': 2.042}, {'end': 20393.427, 'text': "But I'm using an extension.", 'start': 20391.986, 'duration': 1.441}, {'end': 20397.33, 'text': "And if you want to get that extension, it's called markdown all in one.", 'start': 20393.607, 'duration': 3.723}, {'end': 20401.173, 'text': 'You can search for that in the Visual Studio Code extensions area.', 'start': 20397.53, 'duration': 3.643}, {'end': 20404.134, 'text': 'And then you can install it if you want to use that as well.', 'start': 20401.693, 'duration': 2.441}, {'end': 20410.318, 'text': 'So when you have Markdown all in one, then you can go ahead and preview the Markdown.', 'start': 20404.235, 'duration': 6.083}, {'end': 20414.18, 'text': "And that's what I'm going to do with Control Shift in the letter V.", 'start': 20410.358, 'duration': 3.822}, {'end': 20415.721, 'text': "And now I've got a Markdown preview.", 'start': 20414.18, 'duration': 1.541}, {'end': 20418.783, 'text': 'And this is how GitHub would read our Markdown.', 'start': 20416.282, 'duration': 2.501}, {'end': 20420.464, 'text': "So I've provided a table here.", 'start': 20418.903, 'duration': 1.561}, {'end': 20422.705, 'text': 'So some common media query breakpoints.', 'start': 20420.584, 'duration': 2.121}, {'end': 20426.988, 'text': 'You can see mobile devices are often considered to be 481 pixels width or less.', 'start': 20422.746, 'duration': 4.242}, {'end': 20432.171, 'text': 'And then from 481 to 768, usually iPads, tablets.', 'start': 20430.49, 'duration': 1.681}, {'end': 20433.172, 'text': '769 to 1024, small screens and laptops.', 'start': 20432.191, 'duration': 0.981}, {'end': 20434.793, 'text': '1025 to 1200, desktops and large screens.', 'start': 20433.192, 'duration': 1.601}, {'end': 20449.363, 'text': 'and 1201 and greater extra large screens and TVs.', 'start': 20445.72, 'duration': 3.643}], 'summary': 'Using vs code to create an html page, and explaining media query syntax and breakpoints for responsive design.', 'duration': 407.751, 'max_score': 20041.612, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA20041612.jpg'}], 'start': 18727.576, 'title': 'Optimizing image and text presentation in css', 'summary': 'Discusses optimizing image and text presentation in css, including adjusting font color, applying text shadow, adding background color, and creating a container for better legibility. it also explores css background properties such as background position, linear gradients, layering background images, and the use of background clip property to clip a background image to foreground text. additionally, it covers using the css webkit property to create transparent text over an image and the importance of css media queries for responsive design, including syntax, breakpoints, and values commonly used in frameworks such as bootstrap and tailwind css.', 'chapters': [{'end': 19080.495, 'start': 18727.576, 'title': 'Optimizing image and text presentation in css', 'summary': 'Discusses optimizing image and text presentation in css, including adjusting font color, applying text shadow, adding background color, and creating a container for better legibility, with specific instructions and examples on color manipulation and filter application for better visual appeal.', 'duration': 352.919, 'highlights': ['Applying text shadow to make the text pop off the page By applying a text shadow with an x-axis and y-axis value of 2 pixels, a blur value of 5 pixels, and a black color, the text is enhanced to stand out more on the page.', 'Using transparent background color and adjusting transparency for better visual appeal Utilizing a transparent background color with a 40% transparency level creates a visually appealing effect, enhancing the visibility of the image while adding a sense of depth to the presentation.', 'Creating a container for better legibility and separation between background and text By adding a container around the hero section and styling it in CSS, a workaround is achieved to improve legibility and provide more control over the background and text separation.']}, {'end': 19729.696, 'start': 19081.015, 'title': 'Css background properties', 'summary': 'Explores css background properties including background position, linear gradients, layering background images, and the use of background clip property to clip a background image to foreground text, providing insights and practical examples for implementation.', 'duration': 648.681, 'highlights': ['The chapter explains the usage of background-position property to adjust the position of an image with x and y coordinates, demonstrating how it affects the display of the image.', 'It illustrates the application of linear gradients to create color transitions, showcasing the ability to use multiple colors and specify various directions for the gradient.', 'The section on layering background images demonstrates the process of adding multiple background images and controlling their repetition and position.', 'It provides a practical example of using the background-clip property to clip a background image to foreground text, highlighting its compatibility and the need to use prefixes for certain browsers.']}, {'end': 20082.644, 'start': 19729.837, 'title': 'Css webkit property and media queries', 'summary': 'Explores using the css webkit property to create transparent text over an image, with a focus on adjusting hsl values and making the text totally transparent, and also delves into the importance of css media queries for responsive design and how to enable responsive design in web pages using the meta tag viewport with width equals device width and initial scale set to 1.0.', 'duration': 352.807, 'highlights': ['The chapter demonstrates using the CSS Webkit property to create transparent text over an image, with a focus on adjusting HSL values and making the text totally transparent.', 'It discusses the importance of CSS media queries for responsive design and how to enable responsive design in web pages using the meta tag viewport with width equals device width and initial scale set to 1.0.', 'The chapter also covers the background shorthand property in CSS and the use of font shorthand property to set both the font size and the font family.', 'The transcript explains the use of VS Code to quickly generate the basic skeleton of an HTML page, including the meta tag with the name viewport and the content with width equal to device width and the initial scale set to 1.0.']}, {'end': 20519.584, 'start': 20083.084, 'title': 'Css media queries syntax and breakpoints', 'summary': 'Discusses the syntax and application of media queries, emphasizing the use of min-width for mobile-first and responsive design. common breakpoints and values are explored, including those used by bootstrap and tailwind css frameworks.', 'duration': 436.5, 'highlights': ['The chapter emphasizes the use of min-width for mobile-first and responsive design, explaining its significance in starting from the smallest to the largest, with common breakpoints for mobile devices being 481 pixels or less, and for larger screens such as extra large screens and TVs being 1201 pixels and greater.', 'The different types of breakpoints and conditions for media queries are explored, including orientation and min-aspect-ratio, with specific examples provided such as landscape orientation and aspect ratios like 16 by 9 or 7 by 4, demonstrating the flexibility of media queries for various device sizes and orientations.', 'The chapter also compares common media query breakpoints used by CSS frameworks such as Bootstrap and Tailwind, highlighting the variations in breakpoint values, such as Bootstrap considering 576 pixels as extra small and Tailwind considering less than 640 as extra small, providing insights into industry standards and considerations for responsive design.', 'The process of writing a media query and applying CSS rules within it is demonstrated, with an emphasis on the usage of min-width for defining the starting point of styles and the ability to overwrite previous styles within the media query, showcasing practical experimentation with background color changes and the cascade of styles.', "The syntax of a media query is explained, starting with @media followed by the media type, condition or conditions, logical operators, and specifying a breakpoint, with an example of using 'Screen' as the media type and 'min-width' as the condition, providing a comprehensive overview of the structure and components of media queries."]}], 'duration': 1792.008, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA18727576.jpg', 'highlights': ['The chapter emphasizes the use of min-width for mobile-first and responsive design, explaining its significance in starting from the smallest to the largest, with common breakpoints for mobile devices being 481 pixels or less, and for larger screens such as extra large screens and TVs being 1201 pixels and greater.', 'The different types of breakpoints and conditions for media queries are explored, including orientation and min-aspect-ratio, with specific examples provided such as landscape orientation and aspect ratios like 16 by 9 or 7 by 4, demonstrating the flexibility of media queries for various device sizes and orientations.', 'The chapter also compares common media query breakpoints used by CSS frameworks such as Bootstrap and Tailwind, highlighting the variations in breakpoint values, such as Bootstrap considering 576 pixels as extra small and Tailwind considering less than 640 as extra small, providing insights into industry standards and considerations for responsive design.', 'The process of writing a media query and applying CSS rules within it is demonstrated, with an emphasis on the usage of min-width for defining the starting point of styles and the ability to overwrite previous styles within the media query, showcasing practical experimentation with background color changes and the cascade of styles.', "The syntax of a media query is explained, starting with @media followed by the media type, condition or conditions, logical operators, and specifying a breakpoint, with an example of using 'Screen' as the media type and 'min-width' as the condition, providing a comprehensive overview of the structure and components of media queries."]}, {'end': 22014.583, 'segs': [{'end': 21252.496, 'src': 'heatmap', 'start': 20847.403, 'weight': 0.743, 'content': [{'end': 20850.784, 'text': "Well, that looks good, except we don't quite have the width we want yet.", 'start': 20847.403, 'duration': 3.381}, {'end': 20859.006, 'text': 'We can easily solve this by going back to where we placed the grid on each of these elements, the header, nav, main, and footer.', 'start': 20850.904, 'duration': 8.102}, {'end': 20865.768, 'text': "We've got it centered, but we don't have block elements at this point that are 100% width.", 'start': 20859.586, 'duration': 6.182}, {'end': 20870.249, 'text': "So let's add grid-template columns and set that to 100%.", 'start': 20866.288, 'duration': 3.961}, {'end': 20880.574, 'text': "Now, when we center, those are actually give them 100 width and we've centered them and you can see main is centered here vertically,", 'start': 20870.249, 'duration': 10.325}, {'end': 20882.916, 'text': "but it's not horizontally now.", 'start': 20880.574, 'duration': 2.342}, {'end': 20887.759, 'text': 'but the elements do have 100 width and this is text content.', 'start': 20882.916, 'duration': 4.843}, {'end': 20892.041, 'text': 'text content, pardon me, So we just need to say text align center.', 'start': 20887.759, 'duration': 4.282}, {'end': 20900.285, 'text': 'And now we get everything where we want it, but we actually have 100% width for each of those elements once again.', 'start': 20892.621, 'duration': 7.664}, {'end': 20902.666, 'text': 'And now we have our basic page layout.', 'start': 20900.565, 'duration': 2.101}, {'end': 20907.087, 'text': "So let's go ahead and add a media query now that will change things up a little bit.", 'start': 20902.746, 'duration': 4.341}, {'end': 20911.789, 'text': "So underneath our footer, we first want to indicate that's what we're doing.", 'start': 20907.848, 'duration': 3.941}, {'end': 20913.05, 'text': "So I'll put a comment.", 'start': 20911.869, 'duration': 1.181}, {'end': 20914.891, 'text': "And here, let's say..", 'start': 20913.75, 'duration': 1.141}, {'end': 20918.573, 'text': "small That's where we'll start out with our media query.", 'start': 20915.911, 'duration': 2.662}, {'end': 20920.354, 'text': "I'll say at media.", 'start': 20919.153, 'duration': 1.201}, {'end': 20922.235, 'text': "And then we'll use screen.", 'start': 20921.054, 'duration': 1.181}, {'end': 20924.956, 'text': "And I'll say min width.", 'start': 20923.015, 'duration': 1.941}, {'end': 20929.119, 'text': "And here we'll say 576 pixels.", 'start': 20925.717, 'duration': 3.402}, {'end': 20935.202, 'text': 'So the styles we have put in are valid up to 576 pixels.', 'start': 20929.579, 'duration': 5.623}, {'end': 20938.564, 'text': 'And they will still be valid if we do not overwrite them here.', 'start': 20935.322, 'duration': 3.242}, {'end': 20941.546, 'text': "So now let's go ahead and style the body here.", 'start': 20939.144, 'duration': 2.402}, {'end': 20946.348, 'text': "And the first thing we'll do is set a background dash color.", 'start': 20942.566, 'duration': 3.782}, {'end': 20948.389, 'text': "Let's just set it to green.", 'start': 20947.049, 'duration': 1.34}, {'end': 20950.391, 'text': "Something we'll definitely notice a change on.", 'start': 20948.55, 'duration': 1.841}, {'end': 20957.415, 'text': "And then we can go ahead and use that same background image style that we're using with a radial gradient.", 'start': 20950.411, 'duration': 7.004}, {'end': 20960.957, 'text': "And inside there, we'll start out with white smoke once again.", 'start': 20958.115, 'duration': 2.842}, {'end': 20963.198, 'text': "And then we'll just switch to green.", 'start': 20961.537, 'duration': 1.661}, {'end': 20966.88, 'text': "OK, besides the body, let's do one other thing.", 'start': 20963.878, 'duration': 3.002}, {'end': 20968.081, 'text': "Let's take the nav.", 'start': 20966.94, 'duration': 1.141}, {'end': 20973.313, 'text': "And let's just set the display to none so it will disappear.", 'start': 20969.349, 'duration': 3.964}, {'end': 20975.335, 'text': 'And now look what happened.', 'start': 20974.314, 'duration': 1.021}, {'end': 20981.281, 'text': "We're already past that 576 width, so we see those changes instantly.", 'start': 20975.375, 'duration': 5.906}, {'end': 20987.268, 'text': 'We no longer have a nav on the page, and now our background for the body is main.', 'start': 20981.782, 'duration': 5.486}, {'end': 20995.213, 'text': 'Now, we still have our background color on the header and footer that we set because we did not overwrite those with a new style here.', 'start': 20987.888, 'duration': 7.325}, {'end': 20998.495, 'text': 'So that is what has changed based on that width.', 'start': 20995.833, 'duration': 2.662}, {'end': 21003.498, 'text': 'Now, how can we go back and forth? This is interesting and something you should learn how to do.', 'start': 20998.915, 'duration': 4.583}, {'end': 21005.779, 'text': "So I'll drag this over till it's full screen.", 'start': 21003.598, 'duration': 2.181}, {'end': 21008.061, 'text': 'You want to go to DevTools.', 'start': 21006.4, 'duration': 1.661}, {'end': 21010.442, 'text': "And there's certain ways to do that.", 'start': 21008.561, 'duration': 1.881}, {'end': 21014.845, 'text': 'One is to right-click and choose Inspect at the bottom of the pop-up menu.', 'start': 21010.762, 'duration': 4.083}, {'end': 21019.928, 'text': 'Another is to press control shift and the letter I, which is what I tend to do.', 'start': 21015.485, 'duration': 4.443}, {'end': 21022.87, 'text': 'And now DevTools opened here on the right.', 'start': 21020.529, 'duration': 2.341}, {'end': 21028.114, 'text': "It's fairly small and I have got the console here for JavaScript right now,", 'start': 21022.99, 'duration': 5.124}, {'end': 21032.257, 'text': 'but yours may open to elements and you can see and highlight these elements here.', 'start': 21028.114, 'duration': 4.143}, {'end': 21036.218, 'text': "And that's really what we want as we style things and you can see layout.", 'start': 21032.837, 'duration': 3.381}, {'end': 21041.54, 'text': "But now let's look at some details about this layout and how we can adjust that.", 'start': 21036.678, 'duration': 4.862}, {'end': 21044.661, 'text': 'Notice the little mobile devices icon up here.', 'start': 21042.08, 'duration': 2.581}, {'end': 21046.461, 'text': "Let's go ahead and click that.", 'start': 21045.041, 'duration': 1.42}, {'end': 21048.522, 'text': 'It says toggle device toolbar.', 'start': 21046.481, 'duration': 2.041}, {'end': 21050.582, 'text': 'That gives us more tools.', 'start': 21049.122, 'duration': 1.46}, {'end': 21054.043, 'text': 'Now we can choose dimensions and we see the dimensions here.', 'start': 21050.702, 'duration': 3.341}, {'end': 21056.004, 'text': "We see the percentage that's showing.", 'start': 21054.243, 'duration': 1.761}, {'end': 21058.304, 'text': "So I'm going to set this to 100% and now I can see that.", 'start': 21056.104, 'duration': 2.2}, {'end': 21064.047, 'text': 'These are the dimensions for an iPhone 6, 7, and 8.', 'start': 21060.445, 'duration': 3.602}, {'end': 21068.149, 'text': 'We can change this to a responsive screen or choose different devices.', 'start': 21064.047, 'duration': 4.102}, {'end': 21075.313, 'text': "So I'm using the responsive screen now and I can drag it to make it narrower or wider.", 'start': 21068.67, 'duration': 6.643}, {'end': 21076.674, 'text': 'And you saw that change.', 'start': 21075.353, 'duration': 1.321}, {'end': 21080.295, 'text': 'And there we went past our 576.', 'start': 21077.194, 'duration': 3.101}, {'end': 21084.256, 'text': "We're now at 602 pixels wide, and we can see the change.", 'start': 21080.295, 'duration': 3.961}, {'end': 21088.277, 'text': 'Likewise, we can look at devices like I was talking about before.', 'start': 21084.696, 'duration': 3.581}, {'end': 21092.659, 'text': "So I'll choose iPhone 5 slash SE, one of the smaller devices.", 'start': 21088.337, 'duration': 4.322}, {'end': 21096.94, 'text': 'Now, not every device has this available, but some do.', 'start': 21093.419, 'duration': 3.521}, {'end': 21099.121, 'text': 'You can go to the three dots here.', 'start': 21097.36, 'duration': 1.761}, {'end': 21107.467, 'text': 'in our new responsive menu bar that popped up and here we can say show device frame.', 'start': 21100.001, 'duration': 7.466}, {'end': 21113.912, 'text': 'and now I have a frame that looks like a phone around my page and now we can once again change that.', 'start': 21107.467, 'duration': 6.445}, {'end': 21116.334, 'text': 'I want to make it so I can see the whole phone.', 'start': 21113.912, 'duration': 2.422}, {'end': 21119.497, 'text': 'so there we go and now we see how it looks on the phone.', 'start': 21116.334, 'duration': 3.163}, {'end': 21127.08, 'text': 'you can even change to the horizontal display, as you would turn your phone or back to the normal display here,', 'start': 21119.497, 'duration': 7.583}, {'end': 21129.18, 'text': 'and we can do that for several different phones.', 'start': 21127.08, 'duration': 2.1}, {'end': 21137.623, 'text': "i'll choose the iphone 6, 7 and 8, for example, or we can just go back to responsive and drag the page around, which is what we'll do now.", 'start': 21129.18, 'duration': 8.443}, {'end': 21146.565, 'text': "because now, up until 576 and we can even type in here, i can say 576, we're going to switch over.", 'start': 21137.623, 'duration': 8.942}, {'end': 21152.374, 'text': "so if i said 575, Yep, we're back to the original background color.", 'start': 21146.565, 'duration': 5.809}, {'end': 21154.876, 'text': 'So we can check our breakpoints right there.', 'start': 21152.794, 'duration': 2.082}, {'end': 21164.325, 'text': 'Also, there are breakpoints here that are suggested by Chrome, and you can click on these to change your width as well and see how it displays.', 'start': 21155.356, 'duration': 8.969}, {'end': 21169.37, 'text': 'And these are a little bit different than what we reviewed in our notes markdown file as well.', 'start': 21164.485, 'duration': 4.885}, {'end': 21170.651, 'text': 'So you might check those out.', 'start': 21169.45, 'duration': 1.201}, {'end': 21176.654, 'text': "Let's drag this back over to the right, and then let's take Visual Studio Code and fill up the page.", 'start': 21171.071, 'duration': 5.583}, {'end': 21180.696, 'text': "Let's put in some more breakpoints, and then we'll come back and check all of those out.", 'start': 21176.754, 'duration': 3.942}, {'end': 21187.339, 'text': "What I'm going to do now is highlight all of this code, then press Shift-Alt and the down arrow to copy it down.", 'start': 21181.116, 'duration': 6.223}, {'end': 21196.502, 'text': "Now let's make our next breakpoint and we'll label this one and we're not going to change the nav anymore.", 'start': 21187.359, 'duration': 9.143}, {'end': 21197.603, 'text': 'It is gone for now.', 'start': 21196.522, 'duration': 1.081}, {'end': 21198.903, 'text': "So we'll just leave it gone.", 'start': 21197.643, 'duration': 1.26}, {'end': 21203.224, 'text': 'So all we really want to do is change the color here for our next breakpoint.', 'start': 21199.323, 'duration': 3.901}, {'end': 21205.845, 'text': 'And of course the breakpoint value itself.', 'start': 21203.324, 'duration': 2.521}, {'end': 21208.006, 'text': "So here I'll switch this to gold.", 'start': 21205.965, 'duration': 2.041}, {'end': 21210.206, 'text': 'I could have changed those both at the same time.', 'start': 21208.206, 'duration': 2}, {'end': 21212.107, 'text': "I'll try to remember to do that next time.", 'start': 21210.447, 'duration': 1.66}, {'end': 21215.808, 'text': 'So min width instead of 576, this is our medium.', 'start': 21212.747, 'duration': 3.061}, {'end': 21217.829, 'text': "Let's set it to 768.", 'start': 21215.848, 'duration': 1.981}, {'end': 21220.91, 'text': 'We want the pixels behind that to indicate that.', 'start': 21217.829, 'duration': 3.081}, {'end': 21224.453, 'text': "After that, let's copy this down again.", 'start': 21221.85, 'duration': 2.603}, {'end': 21226.956, 'text': 'So Shift Alt and the down arrow.', 'start': 21224.834, 'duration': 2.122}, {'end': 21229.84, 'text': 'And now this would be our large breakpoint.', 'start': 21227.597, 'duration': 2.243}, {'end': 21231.682, 'text': "We'll relabel that.", 'start': 21230.701, 'duration': 0.981}, {'end': 21236.245, 'text': "I'll highlight gold and press control D to select the other gold.", 'start': 21232.682, 'duration': 3.563}, {'end': 21238.846, 'text': "I'm going to change this to fire brick.", 'start': 21236.785, 'duration': 2.061}, {'end': 21242.129, 'text': 'And so that will give us a nice color change as well.', 'start': 21239.627, 'duration': 2.502}, {'end': 21247.532, 'text': "We'll set this to 992 pixels, much like the bootstrap framework does.", 'start': 21242.649, 'duration': 4.883}, {'end': 21252.496, 'text': "Now let's select our large, shift alt and the down arrow.", 'start': 21248.413, 'duration': 4.083}], 'summary': 'Adjusting layout with media query and breakpoints, changing styles based on screen width.', 'duration': 405.093, 'max_score': 20847.403, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA20847403.jpg'}, {'end': 21527.946, 'src': 'embed', 'start': 21502.875, 'weight': 0, 'content': [{'end': 21508.576, 'text': 'And we can change the page based on what the device is, the viewing orientation.', 'start': 21502.875, 'duration': 5.701}, {'end': 21516.68, 'text': "And of course, you're not going to have someone that typically changes their screen size as they're working with your application.", 'start': 21509.136, 'duration': 7.544}, {'end': 21522.403, 'text': "so you don't really need to worry about these smooth transitions in between changes,", 'start': 21516.68, 'duration': 5.723}, {'end': 21527.946, 'text': "and that's because nobody will be changing their device or really their screen size as they use the application.", 'start': 21522.403, 'duration': 5.543}], 'summary': 'Adapt page based on device and viewing orientation, no need for smooth transitions due to stable screen size.', 'duration': 25.071, 'max_score': 21502.875, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA21502875.jpg'}], 'start': 20520.125, 'title': 'Responsive web design', 'summary': 'Covers setting breakpoints, using media queries, and css styling for responsive design. it also explains using devtools to visualize and adjust responsive elements for various devices, including specific pixel widths. additionally, it demonstrates css media queries and provides a tutorial on creating a responsive web page for mobile devices.', 'chapters': [{'end': 20995.213, 'start': 20520.125, 'title': 'Media queries and css styling', 'summary': 'Discusses setting breakpoints for responsive design, applying media queries for different screen sizes, and using css to style the layout and elements of a web page.', 'duration': 475.088, 'highlights': ['The chapter discusses setting breakpoints for responsive design and applying media queries for different screen sizes. The chapter highlights the importance of setting breakpoints for responsive design and using media queries for different screen sizes.', 'Using CSS to style the layout and elements of a web page. The chapter emphasizes the use of CSS to style the layout and elements of a web page, including setting background colors, gradients, and positioning elements.', 'Demonstrating the use of media queries to change styles based on screen width, such as changing background colors and hiding elements. The transcript demonstrates the practical application of media queries to change styles based on screen width, such as altering background colors and hiding elements like nav based on screen size.']}, {'end': 21279.543, 'start': 20995.833, 'title': 'Using devtools for responsive design', 'summary': 'Explains how to use devtools to adjust and visualize responsive design elements, including changing dimensions, setting breakpoints, and modifying colors, for various devices such as iphone 6, 7, 8, 5/se, and responsive screens, with specific pixel widths mentioned.', 'duration': 283.71, 'highlights': ['DevTools can be used to visualize and adjust responsive design elements for various devices such as iPhone 6, 7, 8, 5/SE, and responsive screens, with specific pixel widths mentioned, including 602 pixels wide and 576 pixels for breakpoints.', 'The process involves using DevTools to change dimensions, set breakpoints, and modify colors for different screen sizes, such as switching to a responsive screen, adjusting the width, and visualizing the changes on devices, like iPhone 6, 7, 8, and 5/SE.', 'Demonstration of using DevTools to set breakpoints and modify colors for different screen sizes, including specific pixel values such as 576, 768, 992 pixels, and color changes to gold, fire brick, and Rebecca Purple for medium, large, and XL breakpoints.', 'The speaker also highlights using shortcuts like right-click and choose Inspect, or pressing control shift and the letter I to open DevTools, and demonstrates the process of visualizing responsive design changes by dragging the page around and utilizing the device frame feature.']}, {'end': 21573.5, 'start': 21279.843, 'title': 'Css media queries for responsive design', 'summary': 'Demonstrates the application of css media queries to create responsive web design for different devices and orientations, and the importance of ensuring the appearance at separate breakpoints, with a focus on creating profile cards for a small company staff.', 'duration': 293.657, 'highlights': ['Demonstration of applying CSS media queries for responsive web design for different devices and orientations The chapter provides a hands-on demonstration of using CSS media queries to create responsive web design for various devices and viewing orientations, showcasing the importance of adapting the page layout based on specific conditions.', 'Importance of ensuring the appearance at separate breakpoints for responsive design The importance of ensuring the appearance at separate breakpoints for responsive design is emphasized, highlighting the need to cater to specific conditions for different devices and orientations to achieve the desired layout and appearance.', 'Focus on creating profile cards for a small company staff using CSS for Beginners tutorial series concepts The chapter focuses on applying the concepts from the CSS for Beginners tutorial series to create profile cards for the staff of a small company, showcasing the practical application of CSS for responsive web design.']}, {'end': 22014.583, 'start': 21573.5, 'title': 'Responsive design tutorial', 'summary': 'Demonstrates the design of a responsive web page for a mobile device with 320x568 pixels and emphasizes adapting to different screen sizes, covering html and css modifications.', 'duration': 441.083, 'highlights': ['The tutorial focuses on creating a responsive web page for a mobile device with 320x568 pixels. The tutorial mentions the specific screen size of the mobile device, providing quantifiable data for the design focus.', 'Emphasis is placed on demonstrating how the page adapts to different screen sizes, from 320 pixels to 1920 pixels wide. The tutorial highlights the importance of adapting to various screen sizes, showcasing the range from 320 pixels to 1920 pixels wide.', 'The chapter covers HTML and CSS modifications, including changes to the title, content, and addition of image elements. The tutorial discusses specific HTML and CSS modifications, such as changing the title, modifying content, and adding image elements.']}], 'duration': 1494.458, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA20520125.jpg', 'highlights': ['DevTools can be used to visualize and adjust responsive design elements for various devices with specific pixel widths mentioned, including 602 pixels wide and 576 pixels for breakpoints.', 'The tutorial focuses on creating a responsive web page for a mobile device with 320x568 pixels, providing quantifiable data for the design focus.', 'The chapter discusses setting breakpoints for responsive design and applying media queries for different screen sizes, emphasizing the importance of setting breakpoints for responsive design and using media queries for different screen sizes.', 'Demonstration of applying CSS media queries for responsive web design for different devices and orientations, showcasing the importance of adapting the page layout based on specific conditions.']}, {'end': 23527.296, 'segs': [{'end': 22041.596, 'src': 'embed', 'start': 22014.623, 'weight': 0, 'content': [{'end': 22018.206, 'text': 'It put each one of these attributes on a separate line, which is fine too.', 'start': 22014.623, 'duration': 3.583}, {'end': 22019.887, 'text': 'It still works out the same.', 'start': 22018.266, 'duration': 1.621}, {'end': 22022.208, 'text': "OK, we're finished with our main content.", 'start': 22020.107, 'duration': 2.101}, {'end': 22025.811, 'text': "Let's just move down to the footer, where we're not going to say footer here.", 'start': 22022.248, 'duration': 3.563}, {'end': 22027.652, 'text': "And we're not going to have an H2.", 'start': 22026.091, 'duration': 1.561}, {'end': 22029.273, 'text': "So let's just put a paragraph.", 'start': 22027.832, 'duration': 1.441}, {'end': 22033.114, 'text': "And inside this paragraph, now we'll use an HTML entity.", 'start': 22029.813, 'duration': 3.301}, {'end': 22034.574, 'text': "We'll put and copy.", 'start': 22033.134, 'duration': 1.44}, {'end': 22038.135, 'text': "It's an ampersand, the word copy, and then a semicolon.", 'start': 22034.714, 'duration': 3.421}, {'end': 22039.496, 'text': "And that's the copyright symbol.", 'start': 22038.175, 'duration': 1.321}, {'end': 22041.596, 'text': "And then we'll just say Acme Co.", 'start': 22039.936, 'duration': 1.66}], 'summary': 'Transcript: html content formatting without footer and h2. using copyright symbol © for acme co.', 'duration': 26.973, 'max_score': 22014.623, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA22014623.jpg'}, {'end': 22451.657, 'src': 'heatmap', 'start': 22048.158, 'weight': 0.835, 'content': [{'end': 22050.019, 'text': "And now we've completed our HTML.", 'start': 22048.158, 'duration': 1.861}, {'end': 22052.42, 'text': "So let's shift over to the CSS.", 'start': 22050.159, 'duration': 2.261}, {'end': 22055.602, 'text': "And then I'm going to press Control B to hide the file tree.", 'start': 22052.56, 'duration': 3.042}, {'end': 22060.144, 'text': "And then I'm going to drag VS Code over to the left half of the page.", 'start': 22056.162, 'duration': 3.982}, {'end': 22063.045, 'text': "And we'll look at our page here on the right.", 'start': 22060.744, 'duration': 2.301}, {'end': 22069.728, 'text': "Now we can see we've added some content, but it is not conforming at all to the size of the screen we have.", 'start': 22063.485, 'duration': 6.243}, {'end': 22074.871, 'text': 'We need to make some changes in the CSS to apply this correctly to our page.', 'start': 22069.869, 'duration': 5.002}, {'end': 22079.833, 'text': "i'm going to press alt z to wrap the code so we can see it all on the window.", 'start': 22075.171, 'duration': 4.662}, {'end': 22087.975, 'text': 'so if the line is too long, it wraps down to the next line, such as this import from google fonts where we have the nanito font.', 'start': 22079.833, 'duration': 8.142}, {'end': 22095.297, 'text': 'here we have our basic reset with a margin of zero, padding of zero and box sizing, border box,', 'start': 22087.975, 'duration': 7.322}, {'end': 22098.358, 'text': "and now i'm going to add to this reset something that we covered.", 'start': 22095.297, 'duration': 3.061}, {'end': 22105.583, 'text': 'covered in the image lesson was adding an image reset where we need it, to say display block.', 'start': 22098.358, 'duration': 7.225}, {'end': 22111.668, 'text': 'And that removes the little space that is by default under images because they are inline elements.', 'start': 22105.763, 'duration': 5.905}, {'end': 22118.714, 'text': 'But then instead of width 100%, which you would often see here, I just want to say max width of 100%.', 'start': 22112.349, 'duration': 6.365}, {'end': 22123.999, 'text': 'And that means it will not overflow its container.', 'start': 22118.714, 'duration': 5.285}, {'end': 22128.943, 'text': 'And at the same time we need to add a height of auto.', 'start': 22124.619, 'duration': 4.324}, {'end': 22133.026, 'text': "now. you'll see, many say do not add a height to images.", 'start': 22128.943, 'duration': 4.083}, {'end': 22141.612, 'text': "however, we're doing this because we added a height in the html to prevent that content layout shift, and that is the new approach.", 'start': 22133.026, 'duration': 8.586}, {'end': 22144.214, 'text': 'so i recommend following that at this point.', 'start': 22141.612, 'duration': 2.602}, {'end': 22150.558, 'text': "and if you don't add the height, it will stick with the height assigned in the html, which would be the original 500 pixels.", 'start': 22144.214, 'duration': 6.344}, {'end': 22155.322, 'text': 'so this height auto then will adjust according to the width as well.', 'start': 22150.558, 'duration': 4.764}, {'end': 22159.145, 'text': 'so if we save that, we have completed our basic reset now.', 'start': 22155.322, 'duration': 3.823}, {'end': 22164.39, 'text': 'so we have our asterisk which selects all elements and then our image selection.', 'start': 22159.145, 'duration': 5.245}, {'end': 22168.513, 'text': "here for the full reset we're applying and we can already see a change.", 'start': 22164.39, 'duration': 4.123}, {'end': 22174.478, 'text': "our images are actually now fitting into the design, even though the design isn't the way we want things.", 'start': 22168.513, 'duration': 5.965}, {'end': 22176.921, 'text': 'yet it does look a little better than it did.', 'start': 22174.478, 'duration': 2.443}, {'end': 22193.757, 'text': "okay, we'll scroll for some more room and i'm going to select this general styles comment and i want to make another comment in between and instead of general styles here i'm going to keep it all caps and i'll type utility Classes.", 'start': 22177.481, 'duration': 16.276}, {'end': 22196.978, 'text': "And after that, I'm going to add a utility class.", 'start': 22194.357, 'duration': 2.621}, {'end': 22198.959, 'text': "And it's going to be called NoWrap.", 'start': 22197.038, 'duration': 1.921}, {'end': 22204.801, 'text': "And then inside the NoWrap class, we'll choose the white space property.", 'start': 22199.599, 'duration': 5.202}, {'end': 22206.041, 'text': "It's white dash space.", 'start': 22204.841, 'duration': 1.2}, {'end': 22207.782, 'text': "And there we'll say NoWrap.", 'start': 22206.521, 'duration': 1.261}, {'end': 22214.364, 'text': "I'm going to use this because Jane has a last name that has a space in it.", 'start': 22208.322, 'duration': 6.042}, {'end': 22218.585, 'text': "And we don't want her name to break in half if the text wraps.", 'start': 22215.004, 'duration': 3.581}, {'end': 22220.466, 'text': "So let's go back to the HTML.", 'start': 22218.625, 'duration': 1.841}, {'end': 22224.089, 'text': "And here's Jane's name in the fig caption.", 'start': 22221.346, 'duration': 2.743}, {'end': 22229.175, 'text': "And we'll put a span element with a class of no wrap.", 'start': 22224.109, 'duration': 5.066}, {'end': 22233.673, 'text': 'And now we still need to scroll over, or I could wrap the code.', 'start': 22230.291, 'duration': 3.382}, {'end': 22235.814, 'text': "But since we're only doing this one thing, I'll just scroll.", 'start': 22233.713, 'duration': 2.101}, {'end': 22241.978, 'text': 'Going to collect the closing span that was automatically added and put it after the end of her last name.', 'start': 22236.475, 'duration': 5.503}, {'end': 22243.479, 'text': "We'll save that.", 'start': 22242.899, 'duration': 0.58}, {'end': 22244.94, 'text': "And you won't really notice a change.", 'start': 22243.499, 'duration': 1.441}, {'end': 22249.403, 'text': 'But now if the text wraps, it will not break her last name in two.', 'start': 22245.4, 'duration': 4.003}, {'end': 22252.685, 'text': 'OK, back to the style CSS.', 'start': 22249.983, 'duration': 2.702}, {'end': 22255.827, 'text': "Now we're going to move on to the general style section.", 'start': 22253.005, 'duration': 2.822}, {'end': 22263.634, 'text': 'and here we have the font shorthand which adds a font size and a font family, all in one.', 'start': 22256.767, 'duration': 6.867}, {'end': 22266.536, 'text': 'then we have a min height of 100 viewport units.', 'start': 22263.634, 'duration': 2.902}, {'end': 22267.577, 'text': "we'll keep all of that.", 'start': 22266.536, 'duration': 1.041}, {'end': 22270.02, 'text': "i'll get rid of this blank line.", 'start': 22267.577, 'duration': 2.443}, {'end': 22281.868, 'text': 'we have a fallback background color and then we have a background image set with a radial gradient which starts in the center at white smoke and works its way out to this darker color.', 'start': 22270.02, 'duration': 11.848}, {'end': 22290.473, 'text': 'and then we have display flex and flex direction column and that is what stacks our header on top of the main, on top of the footer,', 'start': 22281.868, 'duration': 8.605}, {'end': 22291.934, 'text': 'and keeps it in that order.', 'start': 22290.473, 'duration': 1.461}, {'end': 22298.456, 'text': 'OK, after that we have a section where we applied grid to the header, nav, main and footer.', 'start': 22292.694, 'duration': 5.762}, {'end': 22300.357, 'text': "And we're just going to delete that.", 'start': 22298.536, 'duration': 1.821}, {'end': 22305.079, 'text': 'So if you are following along with the starter code, go ahead and remove that.', 'start': 22300.817, 'duration': 4.262}, {'end': 22308.38, 'text': "If you're following along without it, well, you don't need to do anything there.", 'start': 22305.399, 'duration': 2.981}, {'end': 22314.825, 'text': 'Now we have the header and the footer positioned sticky, because we have the header at the top, the footer at the bottom,', 'start': 22308.98, 'duration': 5.845}, {'end': 22318.088, 'text': 'and we want them to stay there, especially if the page scrolls.', 'start': 22314.825, 'duration': 3.263}, {'end': 22324.333, 'text': 'And then a background color of a darker color, and then white smoke for the font color.', 'start': 22318.669, 'duration': 5.664}, {'end': 22328.517, 'text': 'But what else we would like to add here is a text-align text.', 'start': 22324.634, 'duration': 3.883}, {'end': 22331.98, 'text': 'and put center.', 'start': 22331.039, 'duration': 0.941}, {'end': 22335.505, 'text': "So we'll go ahead and add that so we can center this text.", 'start': 22332.141, 'duration': 3.364}, {'end': 22341.112, 'text': 'Okay, just below we have the header with a top of zero and that keeps the header at the top.', 'start': 22335.705, 'duration': 5.407}, {'end': 22344.376, 'text': 'Notice we also have a footer down here with a bottom of zero.', 'start': 22341.272, 'duration': 3.104}, {'end': 22347.3, 'text': 'In between we have the nav and the main.', 'start': 22345.057, 'duration': 2.243}, {'end': 22351.043, 'text': "So for the nav, we're going to keep the background color of white.", 'start': 22347.82, 'duration': 3.223}, {'end': 22355.587, 'text': 'We can remove this color of black for the font color.', 'start': 22351.504, 'duration': 4.083}, {'end': 22359.35, 'text': "The padding at one half rim, that's fine.", 'start': 22355.607, 'duration': 3.743}, {'end': 22362.533, 'text': 'And we still want the two pixel border on the bottom.', 'start': 22359.831, 'duration': 2.702}, {'end': 22364.775, 'text': "But now let's add some new styles here.", 'start': 22362.854, 'duration': 1.921}, {'end': 22368.619, 'text': "Let's put the font dash weight and make that bolder.", 'start': 22364.815, 'duration': 3.804}, {'end': 22371.049, 'text': 'There we go, bolder.', 'start': 22370.049, 'duration': 1}, {'end': 22374.891, 'text': "And then I'm going to put display flex here.", 'start': 22371.63, 'duration': 3.261}, {'end': 22385.116, 'text': "And then we'll say justify content and we'll space dash evenly to spread out the employee names in this nav menu.", 'start': 22375.671, 'duration': 9.445}, {'end': 22390.198, 'text': 'And now you can see they are in bold and they are spaced out evenly here in our nav menu.', 'start': 22385.216, 'duration': 4.982}, {'end': 22392.639, 'text': "I'm going to scroll up just a little bit more.", 'start': 22390.498, 'duration': 2.141}, {'end': 22396.98, 'text': "And after the nav and before the main, we're going to style these links.", 'start': 22392.979, 'duration': 4.001}, {'end': 22407.943, 'text': "So let's add nav and then a for the anchor element, and also nav and then a with the visited pseudo class for after a link has been visited.", 'start': 22397.2, 'duration': 10.743}, {'end': 22412.164, 'text': "And let's just shift that color back to the black color that we had before.", 'start': 22407.963, 'duration': 4.201}, {'end': 22415.185, 'text': 'So when we save, we should see those change to black now.', 'start': 22412.244, 'duration': 2.941}, {'end': 22427.189, 'text': 'Now, after the nav anchor and the anchor visited, we also want to style nav anchor with a hover and nav anchor with a focus.', 'start': 22415.785, 'duration': 11.404}, {'end': 22435.232, 'text': 'And you might even want to add an active in there, or you might like to see it flash a different color, which is another pseudo class you could do.', 'start': 22428.229, 'duration': 7.003}, {'end': 22436.632, 'text': "I'm not doing that one right now.", 'start': 22435.372, 'duration': 1.26}, {'end': 22437.913, 'text': "But let's put a color here.", 'start': 22436.712, 'duration': 1.201}, {'end': 22446.375, 'text': "And I'll go with HSLA, which you can also, of course, pick by navigating through the Visual Studio Code color picker.", 'start': 22438.693, 'duration': 7.682}, {'end': 22447.776, 'text': "But I've already got this picked out.", 'start': 22446.415, 'duration': 1.361}, {'end': 22450.116, 'text': "It's 0% here, 20% in the last one.", 'start': 22447.796, 'duration': 2.32}, {'end': 22451.657, 'text': "That's easy to remember.", 'start': 22450.137, 'duration': 1.52}], 'summary': 'A css tutorial with specific code changes and explanations.', 'duration': 403.499, 'max_score': 22048.158, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA22048158.jpg'}, {'end': 22133.026, 'src': 'embed', 'start': 22105.763, 'weight': 3, 'content': [{'end': 22111.668, 'text': 'And that removes the little space that is by default under images because they are inline elements.', 'start': 22105.763, 'duration': 5.905}, {'end': 22118.714, 'text': 'But then instead of width 100%, which you would often see here, I just want to say max width of 100%.', 'start': 22112.349, 'duration': 6.365}, {'end': 22123.999, 'text': 'And that means it will not overflow its container.', 'start': 22118.714, 'duration': 5.285}, {'end': 22128.943, 'text': 'And at the same time we need to add a height of auto.', 'start': 22124.619, 'duration': 4.324}, {'end': 22133.026, 'text': "now. you'll see, many say do not add a height to images.", 'start': 22128.943, 'duration': 4.083}], 'summary': 'Using max-width: 100% and height: auto removes default space under images and prevents overflow.', 'duration': 27.263, 'max_score': 22105.763, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA22105763.jpg'}, {'end': 22263.634, 'src': 'embed', 'start': 22233.713, 'weight': 1, 'content': [{'end': 22235.814, 'text': "But since we're only doing this one thing, I'll just scroll.", 'start': 22233.713, 'duration': 2.101}, {'end': 22241.978, 'text': 'Going to collect the closing span that was automatically added and put it after the end of her last name.', 'start': 22236.475, 'duration': 5.503}, {'end': 22243.479, 'text': "We'll save that.", 'start': 22242.899, 'duration': 0.58}, {'end': 22244.94, 'text': "And you won't really notice a change.", 'start': 22243.499, 'duration': 1.441}, {'end': 22249.403, 'text': 'But now if the text wraps, it will not break her last name in two.', 'start': 22245.4, 'duration': 4.003}, {'end': 22252.685, 'text': 'OK, back to the style CSS.', 'start': 22249.983, 'duration': 2.702}, {'end': 22255.827, 'text': "Now we're going to move on to the general style section.", 'start': 22253.005, 'duration': 2.822}, {'end': 22263.634, 'text': 'and here we have the font shorthand which adds a font size and a font family, all in one.', 'start': 22256.767, 'duration': 6.867}], 'summary': 'Making a minor adjustment to prevent last name from breaking when text wraps.', 'duration': 29.921, 'max_score': 22233.713, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA22233713.jpg'}, {'end': 22654.221, 'src': 'embed', 'start': 22624.433, 'weight': 2, 'content': [{'end': 22630.936, 'text': "after that let's go ahead and put another background color for this area of the page, which will be the cards.", 'start': 22624.433, 'duration': 6.503}, {'end': 22638.459, 'text': "I'm going to go with CBD5E1 that I'd previously picked out, more of a gray or a lighter gray.", 'start': 22631.376, 'duration': 7.083}, {'end': 22644.761, 'text': "And then we can go ahead and put a border, and I'll go two pixels, solid black.", 'start': 22639.139, 'duration': 5.622}, {'end': 22649.077, 'text': "And then let's add a border dash radius.", 'start': 22645.834, 'duration': 3.243}, {'end': 22651.719, 'text': "And we'll go 15 pixels here.", 'start': 22649.637, 'duration': 2.082}, {'end': 22654.221, 'text': "Let's save that much and see the change.", 'start': 22652.199, 'duration': 2.022}], 'summary': 'Added background color cbd5e1 and 2px solid black border with 15px border radius.', 'duration': 29.788, 'max_score': 22624.433, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA22624433.jpg'}, {'end': 23255.527, 'src': 'heatmap', 'start': 22851.173, 'weight': 0.705, 'content': [{'end': 22859.034, 'text': "Now we're ready to go to our first media query, which is at 576 pixels for the small media query that we have here.", 'start': 22851.173, 'duration': 7.861}, {'end': 22865.316, 'text': "Let's go ahead and delete the styles we were using before in the previous lesson that just displayed the changes for us.", 'start': 22859.455, 'duration': 5.861}, {'end': 22867.838, 'text': "And let's apply what we're actually going to change.", 'start': 22865.876, 'duration': 1.962}, {'end': 22870.001, 'text': "So we'll select the main element.", 'start': 22867.898, 'duration': 2.103}, {'end': 22873.284, 'text': "And here we're going to change the justify content.", 'start': 22870.541, 'duration': 2.743}, {'end': 22875.853, 'text': "And it's going to be center.", 'start': 22874.372, 'duration': 1.481}, {'end': 22881.416, 'text': 'And before, if we look at the main element and what we had before, this will overwrite that property.', 'start': 22876.053, 'duration': 5.363}, {'end': 22884.897, 'text': "And we didn't have justify content here before.", 'start': 22881.976, 'duration': 2.921}, {'end': 22886.538, 'text': "So that's OK.", 'start': 22885.398, 'duration': 1.14}, {'end': 22889.32, 'text': 'It will be set now when we get to this size.', 'start': 22886.558, 'duration': 2.762}, {'end': 22894.182, 'text': "After justify content, we're going to set the flex flow.", 'start': 22889.98, 'duration': 4.202}, {'end': 22895.122, 'text': 'And it would be row.', 'start': 22894.582, 'duration': 0.54}, {'end': 22897.344, 'text': 'and wrap.', 'start': 22896.603, 'duration': 0.741}, {'end': 22900.085, 'text': 'so now we do want them to wrap.', 'start': 22897.344, 'duration': 2.741}, {'end': 22909.851, 'text': "if they will take up more than the width that they have, we'll have two rows of profile and finally let's switch the padding to one rem and then,", 'start': 22900.085, 'duration': 9.766}, {'end': 22918.237, 'text': "after the main element, we're going to adjust something about the card class as well, and this will be the width, And the min will still set at 100%,", 'start': 22909.851, 'duration': 8.386}, {'end': 22922.581, 'text': 'but the max will now let go up to 400 pixels.', 'start': 22918.237, 'duration': 4.344}, {'end': 22926.724, 'text': "And then let's rearrange the order so it'll be easier to see our breakpoint.", 'start': 22923.161, 'duration': 3.563}, {'end': 22936.513, 'text': "So here we'll take the card and the last child, which would be Jane, and we'll make her first by setting the order to minus 1.", 'start': 22927.205, 'duration': 9.308}, {'end': 22937.914, 'text': "So now let's grab Chrome.", 'start': 22936.513, 'duration': 1.401}, {'end': 22941.778, 'text': "I'll make it full screen, and we'll switch over to responsive.", 'start': 22938.014, 'duration': 3.764}, {'end': 22947.802, 'text': "And if we do that, we'll drag this down to where we're at 576.", 'start': 22942.358, 'duration': 5.444}, {'end': 22950.323, 'text': "Right now, we're still not at that breakpoint.", 'start': 22947.802, 'duration': 2.521}, {'end': 22953.045, 'text': 'So this was our mobile phone that we had.', 'start': 22950.404, 'duration': 2.641}, {'end': 22957.488, 'text': "And now we just passed 576 and you can see Jane's at the top.", 'start': 22953.205, 'duration': 4.283}, {'end': 22959.25, 'text': 'So it just got a little wider.', 'start': 22957.909, 'duration': 1.341}, {'end': 22962.972, 'text': "It doesn't change much, but it changes a little bit.", 'start': 22959.37, 'duration': 3.602}, {'end': 22968.316, 'text': "We can make the cards a little bit bigger just because of where they're at.", 'start': 22963.312, 'duration': 5.004}, {'end': 22972.438, 'text': 'And then if we get bigger before the next breakpoint, well, we hit it there.', 'start': 22968.456, 'duration': 3.982}, {'end': 22980.804, 'text': "So it didn't wrap yet, but changing the width might allow them to wrap because we did switch that to allow wrap at this size.", 'start': 22972.799, 'duration': 8.005}, {'end': 22983.525, 'text': "Okay, I'll bring Chrome back to the right.", 'start': 22981.084, 'duration': 2.441}, {'end': 22989.829, 'text': "And now this switched because our width once again switched, but we'll go ahead and tackle the rest of the media queries.", 'start': 22983.786, 'duration': 6.043}, {'end': 22992.811, 'text': "And then we'll see the changes at each breakpoint as we go.", 'start': 22989.93, 'duration': 2.881}, {'end': 22996.274, 'text': "So now for medium, let's go ahead and remove these styles as well.", 'start': 22993.232, 'duration': 3.042}, {'end': 22999.036, 'text': "And here we'll put the nav.", 'start': 22997.014, 'duration': 2.022}, {'end': 23003.982, 'text': "And the first thing we'll do is set it to display of none at this point,", 'start': 22999.897, 'duration': 4.085}, {'end': 23008.307, 'text': "because we're at iPad size and they should all fit on the screen now without scrolling.", 'start': 23003.982, 'duration': 4.325}, {'end': 23010.449, 'text': 'The next would be a card.', 'start': 23008.847, 'duration': 1.602}, {'end': 23015.954, 'text': "Once again, we'll put a width And as you might guess, we'll use the min function.", 'start': 23010.569, 'duration': 5.385}, {'end': 23019.516, 'text': "We'll say 100% again, but now we'll make them smaller.", 'start': 23015.974, 'duration': 3.542}, {'end': 23023.999, 'text': 'So we definitely fit a couple side by side, and they all fit on the page.', 'start': 23020.016, 'duration': 3.983}, {'end': 23028.081, 'text': "So after that, let's select the card figure element.", 'start': 23024.619, 'duration': 3.462}, {'end': 23030.863, 'text': "And there we'll set flex flow.", 'start': 23028.902, 'duration': 1.961}, {'end': 23035.105, 'text': "And we'll say column dash reverse.", 'start': 23031.563, 'duration': 3.542}, {'end': 23037.327, 'text': "So we'll notice a change there as well.", 'start': 23035.385, 'duration': 1.942}, {'end': 23039.728, 'text': 'in the order that would appear.', 'start': 23038.127, 'duration': 1.601}, {'end': 23043.27, 'text': "And then we'll set the card figcaption.", 'start': 23039.928, 'duration': 3.342}, {'end': 23050.455, 'text': "And now let's set the margin to very, very small here.", 'start': 23045.412, 'duration': 5.043}, {'end': 23053.857, 'text': '0.1em and then just 0.', 'start': 23050.915, 'duration': 2.942}, {'end': 23055.318, 'text': "And maybe we'll want to keep that.", 'start': 23053.857, 'duration': 1.461}, {'end': 23056.038, 'text': "Maybe we won't.", 'start': 23055.418, 'duration': 0.62}, {'end': 23057.259, 'text': 'We can play around with that.', 'start': 23056.098, 'duration': 1.161}, {'end': 23060.621, 'text': 'Then card and the paragraph for the card.', 'start': 23057.719, 'duration': 2.902}, {'end': 23062.022, 'text': "I'll leave that a lowercase.", 'start': 23060.641, 'duration': 1.381}, {'end': 23064.383, 'text': "And now I'll set that to margin-top 1rem.", 'start': 23062.682, 'duration': 1.701}, {'end': 23068.545, 'text': 'and save.', 'start': 23068.064, 'duration': 0.481}, {'end': 23071.148, 'text': "Let's see if we can make this any larger here.", 'start': 23068.625, 'duration': 2.523}, {'end': 23072.73, 'text': "So we're at 594.", 'start': 23071.268, 'duration': 1.462}, {'end': 23079.218, 'text': "We made our first breakpoint, but we're not making it to the next one unless we make VS Code a little bit bigger again.", 'start': 23072.73, 'duration': 6.488}, {'end': 23080.48, 'text': "So we'll drag this over.", 'start': 23079.319, 'duration': 1.161}, {'end': 23084.767, 'text': 'And now as we get a little larger, There we go.', 'start': 23081.361, 'duration': 3.406}, {'end': 23088.569, 'text': "Now let's switch this to the iPad size itself.", 'start': 23084.987, 'duration': 3.582}, {'end': 23092.431, 'text': 'And you can see they all fit on the page for the iPad.', 'start': 23089.049, 'duration': 3.382}, {'end': 23097.673, 'text': "And if we get smaller than that, we're somewhere in between, maybe a Surface Duo there.", 'start': 23093.011, 'duration': 4.662}, {'end': 23100.695, 'text': "We're at 540, so we didn't hit the first break point yet.", 'start': 23097.713, 'duration': 2.982}, {'end': 23105.637, 'text': "So it's just kind of a weird spot in between where we are there, but it does work.", 'start': 23100.815, 'duration': 4.822}, {'end': 23107.398, 'text': "It's just a little bit larger view.", 'start': 23105.717, 'duration': 1.681}, {'end': 23111.461, 'text': 'of the mobile view as we look at it that way.', 'start': 23108.218, 'duration': 3.243}, {'end': 23115.604, 'text': "so now we've covered our first two break points as well as our starting point.", 'start': 23111.461, 'duration': 4.143}, {'end': 23122.249, 'text': "let's go ahead and add the third at the large stop, and that's 992 pixels.", 'start': 23115.604, 'duration': 6.645}, {'end': 23127.993, 'text': "let's delete what we had here for the body from the last tutorial and once again select the card class.", 'start': 23122.249, 'duration': 5.744}, {'end': 23132.096, 'text': "We'll select the width again and we'll use the min function.", 'start': 23128.973, 'duration': 3.123}, {'end': 23136.06, 'text': "We'll say 100% and then 400 pixels here.", 'start': 23132.136, 'duration': 3.924}, {'end': 23140.404, 'text': 'And if you remember, we made it smaller so it would all fit on an iPad.', 'start': 23136.58, 'duration': 3.824}, {'end': 23142.526, 'text': 'We were at 325 pixels.', 'start': 23140.424, 'duration': 2.102}, {'end': 23150.633, 'text': 'So even though previously before that we were at 400 pixels, we need to switch it back because it hits that breakpoint in between.', 'start': 23142.926, 'duration': 7.707}, {'end': 23155.556, 'text': "Okay, after the card selection there, let's switch the order around again.", 'start': 23151.394, 'duration': 4.162}, {'end': 23157.757, 'text': 'So we once again know this has changed.', 'start': 23155.596, 'duration': 2.161}, {'end': 23168.782, 'text': "So we'll say card and now we'll say nth child and we'll select the second child element and we'll give that an order of minus one and it should switch the order for us again.", 'start': 23157.797, 'duration': 10.985}, {'end': 23171.383, 'text': "Those are the only changes we're going to make there.", 'start': 23169.162, 'duration': 2.221}, {'end': 23178.806, 'text': "So let's go on to the XL size as well and we'll select what we have there and delete it from the previous tutorial.", 'start': 23171.463, 'duration': 7.343}, {'end': 23181.443, 'text': "We'll select the card class.", 'start': 23179.963, 'duration': 1.48}, {'end': 23184.904, 'text': "Now we'll set width again, use the min function.", 'start': 23182.123, 'duration': 2.781}, {'end': 23190.165, 'text': "But now I'm going to use a function inside of the min function, and that is the calc function.", 'start': 23185.064, 'duration': 5.101}, {'end': 23198.227, 'text': 'Calc function is great because it lets us mix other units together or different units together, I should say.', 'start': 23190.945, 'duration': 7.282}, {'end': 23203.897, 'text': "So I'm going to set the width of each card to 33%.", 'start': 23198.287, 'duration': 5.61}, {'end': 23212.004, 'text': "minus one rim, and then we'll have a max of 500 pixels, because that is the size the images are,", 'start': 23203.897, 'duration': 8.107}, {'end': 23217.489, 'text': "and we don't want the images to get any larger than their original size, or they'll start to get blurry.", 'start': 23212.004, 'duration': 5.485}, {'end': 23219.551, 'text': "so we'll leave that as the max.", 'start': 23217.489, 'duration': 2.062}, {'end': 23224.035, 'text': 'but this will allow them to grow dynamically with a percentage value.', 'start': 23219.551, 'duration': 4.484}, {'end': 23226.577, 'text': "so let's stop there and save our file.", 'start': 23224.035, 'duration': 2.542}, {'end': 23229.779, 'text': "i'll once again take this to the larger screen.", 'start': 23226.577, 'duration': 3.202}, {'end': 23234.601, 'text': 'Now, something else we can do is click the three dots here and say Show Media Queries.', 'start': 23230.24, 'duration': 4.361}, {'end': 23236.882, 'text': 'So now we can see our media queries here.', 'start': 23234.681, 'duration': 2.201}, {'end': 23241.082, 'text': "So there's 576, 768.", 'start': 23236.962, 'duration': 4.12}, {'end': 23242.103, 'text': "We're only seeing the width.", 'start': 23241.083, 'duration': 1.02}, {'end': 23245.204, 'text': "We're not seeing a good height.", 'start': 23242.143, 'duration': 3.061}, {'end': 23248.065, 'text': '992, and finally, 1200.', 'start': 23245.224, 'duration': 2.841}, {'end': 23255.527, 'text': "So now let's switch this to some sizes we might normally see, such as 1920 by 1080.", 'start': 23248.065, 'duration': 7.462}], 'summary': 'Media queries applied at 576, 768, 992, and 1200 pixels to adjust styles and layout for different screen sizes.', 'duration': 404.354, 'max_score': 22851.173, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA22851173.jpg'}], 'start': 22014.623, 'title': 'Styling responsive web design', 'summary': 'Covers html and css basics, utility classes, and responsive design for various screen sizes, including the use of calc function and media queries. it includes adjustments for copyright symbol, image sizes, utility classes, main element and profile cards styling, and specific styles for different devices.', 'chapters': [{'end': 22176.921, 'start': 22014.623, 'title': 'Html and css basics', 'summary': 'Explains the completion of html content and the adjustments made in the css to ensure proper display, including adding a copyright symbol and making adjustments to image sizes.', 'duration': 162.298, 'highlights': ['The completion of HTML content and the addition of a copyright symbol for Acme Co.', 'Explanation of CSS adjustments including setting max width and height for images.', 'Adding a basic reset in CSS for all elements and image selection.']}, {'end': 22461.1, 'start': 22177.481, 'title': 'Styling css with utility classes', 'summary': "Covers adding utility classes for specific styling needs, such as 'nowrap' for preventing text wrapping, modifying font and layout properties, and applying styles to navigation links.", 'duration': 283.619, 'highlights': ["Adding NoWrap utility class to prevent text wrapping of specific content Demonstrates the use of the 'NoWrap' utility class to prevent Jane's last name from breaking in half if the text wraps.", 'Applying font shorthand and layout properties such as flex direction and grid to structure the page layout Involves applying font shorthand, flex direction, and grid to structure the page layout effectively.', 'Styling the navigation menu with bold font weight and evenly spaced employee names Involves styling the navigation menu with bold font weight and evenly spaced employee names for improved visual appearance.', 'Applying styles to navigation links for hover and focus effects using HSLA color values Demonstrates the application of styles to navigation links for hover and focus effects using HSLA color values to enhance user interaction.']}, {'end': 23181.443, 'start': 22461.36, 'title': 'Styling the main element and profile cards', 'summary': 'Covers styling the main element and profile cards for various screen sizes, including setting widths, flex properties, background colors, and border styles, with specific details on styling for small, medium, and large screens.', 'duration': 720.083, 'highlights': ['The chapter covers styling the main element and profile cards for various screen sizes, including setting widths, flex properties, background colors, and border styles, with specific details on styling for small, medium, and large screens.', "Setting a scroll-margin-top property of 8rem to ensure the content doesn't scroll underneath the header.", 'Using the min function to set the width of the card to a minimum of 100% and a maximum of 350 pixels, specifying all of that in one line for the width.', 'Applying a border color of CBD5E1 and a border width of 2 pixels with a solid black color for the card, resulting in a noticeable change in appearance.', 'Setting the flex direction of the card to column and aligning items to center, ensuring proper alignment of elements within the card.']}, {'end': 23527.296, 'start': 23182.123, 'title': 'Using calc function for responsive design', 'summary': 'Explains how to use the calc function and media queries to create responsive design, setting the width of each card to 33% minus one rim and a max of 500 pixels, adjusting for various screen sizes, and using specific styles for different devices.', 'duration': 345.173, 'highlights': ['Using calc function to set the width of each card to 33% minus one rim and a max of 500 pixels The chapter demonstrates the use of the calc function to dynamically set the width of each card, allowing for responsive design with a specific max size of 500 pixels.', 'Applying media queries to adjust for various screen sizes The transcript illustrates the use of media queries for specific screen sizes such as 576, 768, 992, and 1200, ensuring the design adjusts to different device dimensions.', 'Implementing specific styles for different devices The chapter discusses the application of specific styles for different devices, such as setting a max width of 200 pixels for any card and adjusting font sizes for various screen orientations.']}], 'duration': 1512.673, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA22014623.jpg', 'highlights': ['Demonstrates the use of the calc function to dynamically set the width of each card, allowing for responsive design with a specific max size of 500 pixels.', 'The chapter covers styling the main element and profile cards for various screen sizes, including setting widths, flex properties, background colors, and border styles, with specific details on styling for small, medium, and large screens.', 'Applying media queries to adjust for various screen sizes, ensuring the design adjusts to different device dimensions.', 'Adding a basic reset in CSS for all elements and image selection.']}, {'end': 25747.274, 'segs': [{'end': 24283.087, 'src': 'embed', 'start': 24257.453, 'weight': 0, 'content': [{'end': 24261.836, 'text': "Remember, it's going to select whatever does not have what you specify.", 'start': 24257.453, 'duration': 4.383}, {'end': 24268.6, 'text': "And now let's look at the int child selector, which we have used a little bit in previous tutorials.", 'start': 24262.116, 'duration': 6.484}, {'end': 24270.622, 'text': "So we'll say card and then no space.", 'start': 24268.661, 'duration': 1.961}, {'end': 24272.003, 'text': "And we'll say int dash child.", 'start': 24270.642, 'duration': 1.361}, {'end': 24277.545, 'text': "Now, this can be confusing, and it's somewhat because of the way it's worded.", 'start': 24273.483, 'duration': 4.062}, {'end': 24283.087, 'text': "You would think we were looking for the child of the card class, but that's not really true.", 'start': 24277.825, 'duration': 5.262}], 'summary': "Discusses the int child selector, used with 'card' class. it can be confusing due to the way it's worded.", 'duration': 25.634, 'max_score': 24257.453, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA24257453.jpg'}, {'end': 24573.066, 'src': 'embed', 'start': 24545.845, 'weight': 4, 'content': [{'end': 24550.788, 'text': "And now they've turned into double quotes and they're wrapping around the single quotes that we already had.", 'start': 24545.845, 'duration': 4.943}, {'end': 24558.875, 'text': "But we've added quotes here without having that quote element that we were relying on here inside of our HTML.", 'start': 24551.269, 'duration': 7.606}, {'end': 24565.06, 'text': 'Notice inside of each paragraph, we have the Q element, which is a quote that we were using for quotes.', 'start': 24558.915, 'duration': 6.145}, {'end': 24570.785, 'text': 'So we could remove those because one handy thing here is we can style these however we want to.', 'start': 24565.12, 'duration': 5.665}, {'end': 24573.066, 'text': "So let's look at an example of that.", 'start': 24571.265, 'duration': 1.801}], 'summary': 'The html document contains q elements for quotes, which can be styled freely.', 'duration': 27.221, 'max_score': 24545.845, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA24545845.jpg'}, {'end': 24682.337, 'src': 'embed', 'start': 24650.891, 'weight': 3, 'content': [{'end': 24653.833, 'text': 'And now we have matching closing quotes on the right.', 'start': 24650.891, 'duration': 2.942}, {'end': 24656.495, 'text': "Again, we're adding these as pseudo elements.", 'start': 24654.013, 'duration': 2.482}, {'end': 24661.139, 'text': "So let's go back to our HTML quickly and remove those other quotes that we had.", 'start': 24657.036, 'duration': 4.103}, {'end': 24668.625, 'text': "So that would be the Q element, I'll highlight that press control D twice to get the other two hit backspace.", 'start': 24661.239, 'duration': 7.386}, {'end': 24676.072, 'text': "And now I'll select the closing Q control D twice to get the other two backspace and save.", 'start': 24668.846, 'duration': 7.226}, {'end': 24682.337, 'text': 'So we remove those other quotes that we had, and now we have our big quotes in place of those.', 'start': 24676.592, 'duration': 5.745}], 'summary': 'Learned how to replace quotes in html, removed 4 quotes.', 'duration': 31.446, 'max_score': 24650.891, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA24650891.jpg'}, {'end': 25574.582, 'src': 'embed', 'start': 25530.692, 'weight': 1, 'content': [{'end': 25537.378, 'text': 'Okay, after supplying that, then we also need to have a color and we already have a dark color.', 'start': 25530.692, 'duration': 6.686}, {'end': 25542.123, 'text': "So let's put in the var and dash dash dark dash color.", 'start': 25537.539, 'duration': 4.584}, {'end': 25544.77, 'text': 'And save.', 'start': 25544.15, 'duration': 0.62}, {'end': 25550.572, 'text': 'And if we look at our nav now, it has a nice little shadow right underneath the bottom line.', 'start': 25545.05, 'duration': 5.522}, {'end': 25553.293, 'text': 'I could try to make this bigger so it stands out.', 'start': 25551.012, 'duration': 2.281}, {'end': 25555.034, 'text': 'Let me put it like 15 pixels.', 'start': 25553.333, 'duration': 1.701}, {'end': 25558.115, 'text': 'And there we see the big shadow underneath.', 'start': 25555.734, 'duration': 2.381}, {'end': 25559.375, 'text': "But that's not what we want.", 'start': 25558.215, 'duration': 1.16}, {'end': 25561.016, 'text': 'We want just a subtle shadow.', 'start': 25559.415, 'duration': 1.601}, {'end': 25562.496, 'text': 'And we can save that.', 'start': 25561.536, 'duration': 0.96}, {'end': 25567.278, 'text': 'But what if we wanted to use this shadow in other parts of the project also?', 'start': 25562.836, 'duration': 4.442}, {'end': 25574.582, 'text': "So maybe we should just highlight that, or we could highlight all of this, and that's what I'm going to do,", 'start': 25567.678, 'duration': 6.904}], 'summary': 'Adjusting shadow size to 15 pixels, aiming for a subtle effect, considering reusability in the project.', 'duration': 43.89, 'max_score': 25530.692, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA25530692.jpg'}, {'end': 25722.765, 'src': 'embed', 'start': 25696.118, 'weight': 5, 'content': [{'end': 25700.122, 'text': "And I want to put in 12 divs, so I'm going to type div.", 'start': 25696.118, 'duration': 4.004}, {'end': 25703.085, 'text': 'I want lowercase here, div, and then dot.', 'start': 25700.382, 'duration': 2.703}, {'end': 25707.889, 'text': "And I'm going to name the class that applies to all 12 divs square.", 'start': 25703.225, 'duration': 4.664}, {'end': 25719.023, 'text': 'So now we have div.square and then with an emit abbreviation, I can type times 12 and press tab and instantly have 12 divs.', 'start': 25708.999, 'duration': 10.024}, {'end': 25722.765, 'text': 'Now that I have that, I have no content inside the divs.', 'start': 25719.824, 'duration': 2.941}], 'summary': "Creating 12 divs with class 'square' using emit abbreviation.", 'duration': 26.647, 'max_score': 25696.118, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA25696118.jpg'}], 'start': 23527.456, 'title': 'Css pseudo selectors and variables', 'summary': 'Covers re-evaluating code margins, explaining pseudo classes and elements, refactoring css with pseudo classes, using pseudo elements, and styling with css variables, resulting in code optimization, reduced repetition, improved specificity, and simplified color changes.', 'chapters': [{'end': 23576.996, 'start': 23527.456, 'title': 'Code margin adjustment', 'summary': 'Discusses re-evaluating a small margin setting in the code for ipad size, resulting in the decision to remove it.', 'duration': 49.54, 'highlights': ['The code contains a very small margin setting for iPad size that the speaker wants to re-evaluate.', 'After commenting out the code, it is observed that the display looks good without the small margin setting.', 'The decision is made to remove the small margin setting from the code.']}, {'end': 23748.406, 'start': 23578.962, 'title': 'Css pseudo selectors explained', 'summary': 'Explains the difference between pseudo classes and pseudo elements, and provides examples of using pseudo classes in css, with a focus on different states of links and the active state, using a mini project as a reference.', 'duration': 169.444, 'highlights': ['The chapter explains the difference between pseudo classes and pseudo elements It distinguishes between pseudo classes and pseudo elements, providing clarity on their respective functions in CSS.', 'Provides examples of using pseudo classes in CSS It offers examples of pseudo classes applied to links, such as focus, hover, visited, and active states, illustrating their usage in CSS styling.', 'Uses a mini project as a reference It utilizes a mini project, a small staff page with profile cards, to demonstrate the application of pseudo classes in CSS.']}, {'end': 24381.236, 'start': 23748.966, 'title': 'Refactoring with pseudo classes', 'summary': 'Demonstrates how to use pseudo classes like :is, :where, :not, and :nth-child to optimize css code, reducing repetition and improving specificity, with examples showing code reduction and improved targeting of elements.', 'duration': 632.27, 'highlights': ['Using :is pseudo class to reduce repetition and improve code efficiency By using the :is pseudo class, the code is optimized by reducing repetition, making it more efficient and maintaining the same result.', 'Utilizing :not pseudo class to check and handle missing attributes The :not pseudo class is employed to check for and handle missing attributes, with examples showing how it can be used to ensure all images have alt attributes.', 'Understanding the specificity impact of :is and :where pseudo classes The impact of specificity when using :is and :where pseudo classes is explained, highlighting how these classes affect the CSS specificity, with a demonstration of how they can impact style overrides.', 'Exploring the usage of :nth-child selector to target specific elements The :nth-child selector is explored, showcasing how it can be used to target specific elements, including odd and even selections, with a demonstration of its behavior in relation to reordering and media queries.']}, {'end': 24565.06, 'start': 24381.596, 'title': 'Pseudo elements in css', 'summary': 'Explains the use of pseudo elements in css including ::after and ::before selectors to add content, emojis, and quotes to specific elements, resulting in visual changes on the webpage.', 'duration': 183.464, 'highlights': ['The chapter covers the use of ::after and ::before selectors to add content, emojis, and quotes to specific elements, resulting in visual changes on the webpage.', "The pseudo elements are utilized to place content after or before specified elements, with examples including adding 'hello' and emojis following names, and quotes around text.", 'The usage of pseudo elements like ::after and ::before allows for the addition of visual elements without altering the HTML structure, enhancing the design and layout of the webpage.']}, {'end': 25175.207, 'start': 24565.12, 'title': 'Styling with css variables & pseudo elements', 'summary': 'Demonstrates the usage of css variables and pseudo elements to style elements, such as creating quotes, applying variables for colors, and using the var function to apply the variables, ultimately simplifying the process of changing colors in a large project.', 'duration': 610.087, 'highlights': ['Demonstrating the usage of CSS variables and pseudo elements to apply styles to elements, such as creating quotes and applying variables for colors. The chapter showcases the usage of CSS variables and pseudo elements to style elements, like creating quotes and applying variables for colors, which simplifies the process of changing colors in a large project.', 'Explaining the application of the var function to apply CSS variables, simplifying the process of changing colors in a large project. The var function is explained as a tool to apply CSS variables, simplifying the process of changing colors in a large project.', 'Showing the creation of variables for colors and the usage of the var function to apply these variables, including the fallback options. The creation of variables for colors and the usage of the var function to apply these variables, including the fallback options, are demonstrated.']}, {'end': 25747.274, 'start': 25175.247, 'title': 'Css variables and refactoring', 'summary': 'Covers the process of using css variables to refactor the code by replacing specific color and font values, demonstrating the use of variables for colors, font families, font sizes, padding, shadows, and borders, ultimately enhancing the design and maintainability of the project.', 'duration': 572.027, 'highlights': ['The chapter demonstrates the process of replacing specific color values with variables, such as white smoke and black, resulting in improved maintainability and uniformity in the project. Demonstrates the process of replacing specific color values with variables, such as white smoke and black', 'The use of CSS variables extends beyond colors to include font families and font sizes, contributing to enhanced flexibility and consistency in design implementation. Demonstrates the use of CSS variables for font families and font sizes', 'The application of CSS variables for padding, shadows, and borders is showcased, illustrating their versatility in styling elements and improving project maintainability. Showcases the application of CSS variables for padding, shadows, and borders', 'The chapter concludes by exemplifying the use of CSS variables in creating and managing multiple div elements, thereby streamlining the process of adding and modifying content. Exemplifies the use of CSS variables in creating and managing multiple div elements']}], 'duration': 2219.818, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA23527456.jpg', 'highlights': ['The usage of pseudo elements like ::after and ::before allows for the addition of visual elements without altering the HTML structure, enhancing the design and layout of the webpage.', 'Using :is pseudo class to reduce repetition and improve code efficiency By using the :is pseudo class, the code is optimized by reducing repetition, making it more efficient and maintaining the same result.', 'Explaining the application of the var function to apply CSS variables, simplifying the process of changing colors in a large project. The var function is explained as a tool to apply CSS variables, simplifying the process of changing colors in a large project.', 'The chapter demonstrates the process of replacing specific color values with variables, such as white smoke and black, resulting in improved maintainability and uniformity in the project. Demonstrates the process of replacing specific color values with variables, such as white smoke and black', 'The chapter explains the difference between pseudo classes and pseudo elements It distinguishes between pseudo classes and pseudo elements, providing clarity on their respective functions in CSS.', 'The chapter covers the use of ::after and ::before selectors to add content, emojis, and quotes to specific elements, resulting in visual changes on the webpage.']}, {'end': 27641.542, 'segs': [{'end': 26464.085, 'src': 'embed', 'start': 26431.933, 'weight': 3, 'content': [{'end': 26434.095, 'text': "However, let's quickly look at the HTML.", 'start': 26431.933, 'duration': 2.162}, {'end': 26445.045, 'text': 'And as you can see our page over here on the right, I have added an H2 heading, a paragraph and then a link inside of a section element.', 'start': 26434.275, 'duration': 10.77}, {'end': 26447.608, 'text': 'that is inside of the main element.', 'start': 26445.045, 'duration': 2.563}, {'end': 26455.055, 'text': 'And I have commented out the divs we previously had in the last lesson, but we will come back to those, so I wanted to leave those in.', 'start': 26448.048, 'duration': 7.007}, {'end': 26464.085, 'text': 'Our CSS remains the same from the last lesson and we can look at some functions we have already used in previous lessons.', 'start': 26455.396, 'duration': 8.689}], 'summary': 'Html page includes h2 heading, paragraph, and link within section element, with css remaining unchanged.', 'duration': 32.152, 'max_score': 26431.933, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA26431933.jpg'}, {'end': 26804.126, 'src': 'embed', 'start': 26770.622, 'weight': 2, 'content': [{'end': 26771.603, 'text': 'Yes, 2.25 rem, and then 3 pixels.', 'start': 26770.622, 'duration': 0.981}, {'end': 26776.146, 'text': 'viewport units of height.', 'start': 26774.745, 'duration': 1.401}, {'end': 26782.05, 'text': "I'm going to quickly scroll down to the main element because having this centered is just bothering me a little bit.", 'start': 26776.366, 'duration': 5.684}, {'end': 26784.832, 'text': "So I'll scroll down and make some changes here.", 'start': 26782.13, 'duration': 2.702}, {'end': 26787.874, 'text': "So we won't keep what we have right here.", 'start': 26785.393, 'duration': 2.481}, {'end': 26792.958, 'text': "Let's comment all of this out that we were using previously in the last lesson with those divs.", 'start': 26787.914, 'duration': 5.044}, {'end': 26804.126, 'text': "And now instead let's say display flex and then we'll say flex flow and we'll make it a column and say no wrap.", 'start': 26793.638, 'duration': 10.488}], 'summary': 'Making changes to achieve 2.25rem and 3 pixels, using viewport units and flexbox.', 'duration': 33.504, 'max_score': 26770.622, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA26770622.jpg'}, {'end': 26901.102, 'src': 'embed', 'start': 26874.678, 'weight': 4, 'content': [{'end': 26878.803, 'text': 'But because of that, there are some things to consider when we provide the values.', 'start': 26874.678, 'duration': 4.125}, {'end': 26884.009, 'text': 'One, you should only provide one absolute value, or you know which one it will always choose.', 'start': 26879.103, 'duration': 4.906}, {'end': 26885.631, 'text': 'So the other one should be relative.', 'start': 26884.069, 'duration': 1.562}, {'end': 26892.356, 'text': "And it's better to choose viewport height units for fonts than it is viewport width.", 'start': 26886.251, 'duration': 6.105}, {'end': 26901.102, 'text': "So we're keeping a certain size in there and you can play around with it, but I think you'll see why I lean towards choosing viewport height units.", 'start': 26892.576, 'duration': 8.526}], 'summary': 'Consider providing one absolute value and one relative value, favoring viewport height units for fonts over viewport width.', 'duration': 26.424, 'max_score': 26874.678, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA26874678.jpg'}, {'end': 27429.007, 'src': 'embed', 'start': 27378.35, 'weight': 0, 'content': [{'end': 27379.831, 'text': "So we'll say main aside.", 'start': 27378.35, 'duration': 1.481}, {'end': 27381.873, 'text': "And here we'll say width.", 'start': 27380.692, 'duration': 1.181}, {'end': 27383.653, 'text': "We'll use calc once again.", 'start': 27382.253, 'duration': 1.4}, {'end': 27388.435, 'text': "And we'll say 30% minus 5 pixels.", 'start': 27383.673, 'duration': 4.762}, {'end': 27392.137, 'text': 'So what we have here is actually 10 pixels.', 'start': 27388.876, 'duration': 3.261}, {'end': 27403.406, 'text': 'that will be between the section and the aside on larger screens, anything larger than or as large as 576 pixels or greater.', 'start': 27392.137, 'duration': 11.269}, {'end': 27411.335, 'text': "I'm going to jump over to the HTML and scroll down here, and this will be in the starter code as well, or at least the finish code,", 'start': 27403.506, 'duration': 7.829}, {'end': 27414.399, 'text': "but I'm going to paste in this aside here.", 'start': 27411.335, 'duration': 3.064}, {'end': 27418.363, 'text': "So it also has an H2 and a paragraph, And that's it.", 'start': 27414.539, 'duration': 3.824}, {'end': 27419.384, 'text': 'So we save.', 'start': 27418.543, 'duration': 0.841}, {'end': 27429.007, 'text': 'And now we can see the column over here on the right, because we are larger than 576, or we are at least 576 pixels wide.', 'start': 27419.944, 'duration': 9.063}], 'summary': 'Using css calc to create a 30% width aside, resulting in 10 pixels gap on screens larger than 576 pixels.', 'duration': 50.657, 'max_score': 27378.35, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA27378350.jpg'}], 'start': 25747.874, 'title': 'Css and document editing techniques', 'summary': "Provides guidance on using css functions and variables, such as implementing dark mode with media queries, utilizing various css functions like color, image, and math functions, exploring the 'clamp' function for font sizing, and styling main section and aside elements with visual effects using css functions and flex-grow property.", 'chapters': [{'end': 25794.407, 'start': 25747.874, 'title': 'Using selection and pasting in a document', 'summary': 'Explains how to select all content and paste emojis in a document using keyboard shortcuts, with examples of pasting a laptop emoji and adding text in specific locations within the document.', 'duration': 46.533, 'highlights': ["Pasting an emoji of a laptop and adding the word 'hay' in the first paragraph, followed by 11 laptops, and then adding 'square dash dash Not important' in the eighth position.", 'Demonstrating the use of Control, Shift, and L to select all content and the left arrow key for navigation within the document.']}, {'end': 26455.055, 'start': 25794.747, 'title': 'Css functions and variables', 'summary': 'Covers the application of css variables and functions to style html elements, including the use of media queries to implement a dark mode, with a demonstration of code and its resulting visual changes.', 'duration': 660.308, 'highlights': ["Demonstrating the implementation of dark mode using media queries The chapter showcases the implementation of a dark mode using media queries, with the demonstration of the code's impact on the visual appearance of the web page.", 'Application of CSS variables and functions to style HTML elements The chapter illustrates the use of CSS variables and functions to style HTML elements, showcasing the application of variables for background color, size, padding, and font size.', 'Defining CSS functions to create a square with specific properties The chapter explains the process of defining CSS functions to create a square with specific properties, including background color, width, height, border, border-radius, display, and font-size.']}, {'end': 27019.129, 'start': 26455.396, 'title': 'Css functions: color, image, and math', 'summary': 'Covers various css functions including color functions such as rgb, hsl, and hwb, image functions like radial gradient, and reference functions like var and url. it also explores the min and max math functions, demonstrating their impact on font size based on viewport height units and absolute values.', 'duration': 563.733, 'highlights': ['The chapter covers various CSS functions including color functions such as RGB, HSL, and HWB, image functions like radial gradient, and reference functions like var and url. The lesson introduces various CSS color functions (RGB, HSL, and HWB), image functions (radial gradient), and reference functions (var and url) used in styling, providing a broad overview of their application.', 'It also explores the min and max math functions, demonstrating their impact on font size based on viewport height units and absolute values. The lesson delves into the min and max math functions, showcasing their influence on font size by combining viewport height units and absolute values, offering practical insights into their application in web design.']}, {'end': 27214.07, 'start': 27019.829, 'title': 'Using clamp for font sizing', 'summary': "Discusses the use of the css 'clamp' function for font sizing, demonstrating the application of minimum, ideal, and maximum values to control font size using viewport height units, resulting in font size adjustments between 28 to 36 pixels.", 'duration': 194.241, 'highlights': ["The 'clamp' function allows for the application of both minimum and maximum values to control font size, providing an ideal size in between when necessary, resulting in responsive font sizing.", "Demonstrates the use of 'clamp' to create a small font size by applying minimum, ideal, and maximum values using viewport units, showcasing the flexibility and responsiveness of font sizing.", "Explains the concept of using 'min' and 'max' functions for font sizing, highlighting the contrary nature of their names where 'max' provides a minimum absolute value and 'min' provides a maximum absolute value."]}, {'end': 27641.542, 'start': 27214.07, 'title': 'Styling main section and aside', 'summary': 'Covers styling the main section and aside elements, implementing flex-grow property, setting background-color using hsla function, applying media query for adjusting layout, and using css functions like calc, filter brightness, and hue rotate to enhance visual effects.', 'duration': 427.472, 'highlights': ['Implemented flex-grow property to make the section element grow within the main area. The flex-grow property was set to 1 for the section element, allowing it to expand within the layout.', 'Applied background-color using HSLA function with opacity of 0.8 for the aside element. The aside element was styled with a background-color using HSLA function and an opacity of 0.8, enhancing its visual appearance.', 'Utilized calc function to set the width of both section and aside elements with a responsive approach. The calc function was used to dynamically calculate and set the widths of the section and aside elements, ensuring a responsive design.', 'Demonstrated the use of filter brightness and hue rotate functions to create visual effects for link hover and focus states. The filter brightness and hue rotate functions were employed to enhance the visual effects of link hover and focus states, providing an interactive user experience.', 'Implemented media query to adjust layout for screens wider than 576 pixels, ensuring optimal display. A media query was added to adjust the layout for screens wider than 576 pixels, improving the overall display of the elements.']}], 'duration': 1893.668, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA25747874.jpg', 'highlights': ['Demonstrating the implementation of dark mode using media queries', "Explains the concept of using 'min' and 'max' functions for font sizing", 'Utilized calc function to set the width of both section and aside elements with a responsive approach', 'Implemented media query to adjust layout for screens wider than 576 pixels, ensuring optimal display', 'The lesson introduces various CSS color functions (RGB, HSL, and HWB), image functions (radial gradient), and reference functions (var and url) used in styling, providing a broad overview of their application']}, {'end': 29687.509, 'segs': [{'end': 27691.064, 'src': 'embed', 'start': 27662.392, 'weight': 4, 'content': [{'end': 27666.253, 'text': 'And inside of our aside, we have this lorem text.', 'start': 27662.392, 'duration': 3.861}, {'end': 27670.694, 'text': 'And notice we provided a span element that is an inline element.', 'start': 27666.373, 'duration': 4.321}, {'end': 27671.854, 'text': "And it's wrapping around it.", 'start': 27670.754, 'duration': 1.1}, {'end': 27674.475, 'text': 'And then it has a class of tooltip.', 'start': 27671.874, 'duration': 2.601}, {'end': 27679.338, 'text': 'And then it also has an attribute that is data-tooltip.', 'start': 27674.995, 'duration': 4.343}, {'end': 27686.702, 'text': 'And we can really provide custom attributes as long as they all start with data- and then we can name it whatever we want.', 'start': 27679.798, 'duration': 6.904}, {'end': 27691.064, 'text': 'So we named this data-tooltip, and it says this is Latin.', 'start': 27686.742, 'duration': 4.322}], 'summary': 'The aside contains a span element with a class of tooltip and a data-tooltip attribute, allowing for custom attributes starting with data-.', 'duration': 28.672, 'max_score': 27662.392, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA27662392.jpg'}, {'end': 27818.796, 'src': 'embed', 'start': 27787.819, 'weight': 10, 'content': [{'end': 27790.921, 'text': "Now that's not what we want but you can see how this works.", 'start': 27787.819, 'duration': 3.102}, {'end': 27793.302, 'text': "Okay let's go ahead and style the rest.", 'start': 27791.441, 'duration': 1.861}, {'end': 27797.344, 'text': "So we'll say position absolute.", 'start': 27793.382, 'duration': 3.962}, {'end': 27802.626, 'text': "Let's put the position at minus 20 pixels which should put it up on top.", 'start': 27797.724, 'duration': 4.902}, {'end': 27809.249, 'text': "If we save now and I mouse over it shows at top but now it's all scrunched and it comes down in there.", 'start': 27803.347, 'duration': 5.902}, {'end': 27818.796, 'text': 'So to get it to avoid wrapping on each of those words, we can say white dash space and then say no wrap.', 'start': 27809.409, 'duration': 9.387}], 'summary': 'Styling with position absolute and preventing word wrapping.', 'duration': 30.977, 'max_score': 27787.819, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA27787819.jpg'}, {'end': 27944.699, 'src': 'embed', 'start': 27891.501, 'weight': 7, 'content': [{'end': 27893.102, 'text': 'And now we should have those back on the page.', 'start': 27891.501, 'duration': 1.601}, {'end': 27895.404, 'text': 'When we save, we should definitely see a difference.', 'start': 27893.142, 'duration': 2.262}, {'end': 27898.706, 'text': 'But we need to make some changes to the CSS also.', 'start': 27895.724, 'duration': 2.982}, {'end': 27904.55, 'text': "Back in the CSS file, I'll need to scroll up to the main section.", 'start': 27899.606, 'duration': 4.944}, {'end': 27911.875, 'text': 'And we can comment out the display flex, flex flow, and justify content.', 'start': 27905.07, 'duration': 6.805}, {'end': 27918.1, 'text': 'And now we will uncomment what we previously had here,', 'start': 27912.956, 'duration': 5.144}, {'end': 27923.165, 'text': "but now we'll change some of this and we'll actually just delete these three middle rows as well.", 'start': 27918.1, 'duration': 5.065}, {'end': 27928.79, 'text': 'Okay, we want this to be a display grid instead of display flex.', 'start': 27923.766, 'duration': 5.024}, {'end': 27934.333, 'text': "After that, we're going to apply grid-template columns.", 'start': 27929.711, 'duration': 4.622}, {'end': 27936.935, 'text': 'And now we can use a grid function.', 'start': 27934.914, 'duration': 2.021}, {'end': 27940.076, 'text': 'And we used this when we learned about grid in a lesson.', 'start': 27937.235, 'duration': 2.841}, {'end': 27941.857, 'text': 'And that is the repeat function.', 'start': 27940.457, 'duration': 1.4}, {'end': 27944.699, 'text': "So we're going to say repeat this four times.", 'start': 27942.197, 'duration': 2.502}], 'summary': 'Changing css to display grid with repeat function four times.', 'duration': 53.198, 'max_score': 27891.501, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA27891501.jpg'}, {'end': 27993.492, 'src': 'embed', 'start': 27970.598, 'weight': 6, 'content': [{'end': 27980.244, 'text': "but four viewport width units are almost always going to be bigger than 15 pixels, so min's probably always going to select 15 pixels here.", 'start': 27970.598, 'duration': 9.646}, {'end': 27990.83, 'text': 'so i will change this to 2 and then i will also switch this to 20 pixels and it should probably adjust now based on that and after i save.', 'start': 27980.244, 'duration': 10.586}, {'end': 27993.492, 'text': 'you can see the changes on the page over here on the right.', 'start': 27990.83, 'duration': 2.662}], 'summary': 'Changing viewport width units from 4 to 2 and pixel size from 15 to 20 resulted in visible adjustments on the page.', 'duration': 22.894, 'max_score': 27970.598, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA27970598.jpg'}, {'end': 28115.086, 'src': 'embed', 'start': 28085.532, 'weight': 14, 'content': [{'end': 28087.192, 'text': "So we've got a div square highlighted.", 'start': 28085.532, 'duration': 1.66}, {'end': 28091.675, 'text': 'And we can see it has a width of 300 pixels as I mouse over that.', 'start': 28087.212, 'duration': 4.463}, {'end': 28095.997, 'text': 'But we can also go to Computed, scroll down, and see that width as well.', 'start': 28091.735, 'duration': 4.262}, {'end': 28097.578, 'text': "Now let's resize.", 'start': 28096.437, 'duration': 1.141}, {'end': 28105.882, 'text': "And as we get in here to a size where the grid items themselves aren't changing, right now it's the space between the columns.", 'start': 28098.398, 'duration': 7.484}, {'end': 28109.364, 'text': "But as we squeeze them in, now they're changing.", 'start': 28106.362, 'duration': 3.002}, {'end': 28112.645, 'text': 'And now we can see that width here is changing as well.', 'start': 28109.924, 'duration': 2.721}, {'end': 28115.086, 'text': 'So if we scroll down, it should be that same number.', 'start': 28112.745, 'duration': 2.341}], 'summary': 'A div square with a width of 300 pixels is highlighted, and its width changes as the grid items are resized.', 'duration': 29.554, 'max_score': 28085.532, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA28085532.jpg'}, {'end': 28158.865, 'src': 'embed', 'start': 28136.169, 'weight': 12, 'content': [{'end': 28145.015, 'text': "And now the page starts to shift as we'd have to put in a media query to get it to adapt after that, because they will no longer shrink in any way.", 'start': 28136.169, 'duration': 8.846}, {'end': 28149.979, 'text': 'At this point, when the page starts to break essentially is when they have stopped adjusting.', 'start': 28145.576, 'duration': 4.403}, {'end': 28152.62, 'text': 'So they are at 100 pixels right there.', 'start': 28150.039, 'duration': 2.581}, {'end': 28155.062, 'text': 'And if I bring this down, we should now see that 100 pixels.', 'start': 28152.641, 'duration': 2.421}, {'end': 28158.865, 'text': 'And if we bring it out, they begin to grow.', 'start': 28156.323, 'duration': 2.542}], 'summary': 'Page breaks at 100 pixels, no longer shrinks, adapts with media query.', 'duration': 22.696, 'max_score': 28136.169, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA28136169.jpg'}, {'end': 28212.375, 'src': 'embed', 'start': 28184.2, 'weight': 2, 'content': [{'end': 28189.404, 'text': 'because, remember, the gap property is both a grid gap and a row gap value.', 'start': 28184.2, 'duration': 5.204}, {'end': 28190.785, 'text': "it's a shorthand.", 'start': 28189.404, 'duration': 1.381}, {'end': 28192.867, 'text': 'so we can see how all of that works together.', 'start': 28190.785, 'duration': 2.082}, {'end': 28194.828, 'text': 'so we provided the min max.', 'start': 28192.867, 'duration': 1.961}, {'end': 28199.632, 'text': 'we used repeat as well and then we used min once again on the gap property.', 'start': 28194.828, 'duration': 4.804}, {'end': 28204.771, 'text': "Let's move on to CSS transforms, transitions and animations.", 'start': 28200.868, 'duration': 3.903}, {'end': 28212.375, 'text': "And before we finish today, we'll make a CSS-only animated hamburger icon and drop down nav menu, as you see here.", 'start': 28205.131, 'duration': 7.244}], 'summary': 'The transcript covers css grid gap, min max, repeat, and css transforms, transitions, and animations, including creating a css-only animated hamburger icon and dropdown nav menu.', 'duration': 28.175, 'max_score': 28184.2, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA28184200.jpg'}, {'end': 28516.753, 'src': 'embed', 'start': 28488.11, 'weight': 9, 'content': [{'end': 28490.231, 'text': 'And the positive number moves it to the right.', 'start': 28488.11, 'duration': 2.121}, {'end': 28493.454, 'text': 'A negative number would move it to the left.', 'start': 28490.812, 'duration': 2.642}, {'end': 28496.457, 'text': 'Now we can use other units besides percents.', 'start': 28493.814, 'duration': 2.643}, {'end': 28500.18, 'text': "So in the next div, I'll say transform once again.", 'start': 28496.697, 'duration': 3.483}, {'end': 28505.648, 'text': "And then I'll use translate Y, which should move it up or down.", 'start': 28501.846, 'duration': 3.802}, {'end': 28508.289, 'text': "And here, I'll use to rem.", 'start': 28506.128, 'duration': 2.161}, {'end': 28509.69, 'text': "And let's see what happens.", 'start': 28508.309, 'duration': 1.381}, {'end': 28512.271, 'text': 'It moved it down to rem.', 'start': 28510.49, 'duration': 1.781}, {'end': 28516.753, 'text': 'So likewise, if I give it a negative to rem, it should move it up.', 'start': 28512.531, 'duration': 4.222}], 'summary': 'Using positive and negative numbers to move elements horizontally and vertically, also using different units like rem.', 'duration': 28.643, 'max_score': 28488.11, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA28488110.jpg'}, {'end': 28618.406, 'src': 'embed', 'start': 28588.593, 'weight': 1, 'content': [{'end': 28590.655, 'text': "but for now let's just comment these out.", 'start': 28588.593, 'duration': 2.062}, {'end': 28598.449, 'text': "so i'll press shift alt and the letter a to comment them out after i have highlighted them and do that for the third one as well.", 'start': 28590.655, 'duration': 7.794}, {'end': 28603.473, 'text': "And we'll move on to the next value that we can use for transform, which is rotate.", 'start': 28599.009, 'duration': 4.464}, {'end': 28611.78, 'text': "So I'll once again put in transform and I'm going to leave these commented out values in here so you can play around with them from my source code if you want to.", 'start': 28603.693, 'duration': 8.087}, {'end': 28618.406, 'text': 'So this transform will be rotate and you can see once again, we have choices like X, Y, and Z.', 'start': 28612.361, 'duration': 6.045}], 'summary': 'Demonstrates commenting out and using the transform value rotate with choices for x, y, and z.', 'duration': 29.813, 'max_score': 28588.593, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA28588593.jpg'}, {'end': 28653.8, 'src': 'embed', 'start': 28627.531, 'weight': 0, 'content': [{'end': 28631.932, 'text': "and when i save these other changes will revert, because we've commented them out too.", 'start': 28627.531, 'duration': 4.401}, {'end': 28636.814, 'text': 'so there we have now rotated 180 degrees.', 'start': 28631.932, 'duration': 4.882}, {'end': 28641.075, 'text': "let's do a smaller rotation and you can see what happens as well.", 'start': 28636.814, 'duration': 4.261}, {'end': 28645.117, 'text': "so something looks a little strange about this box, doesn't it?", 'start': 28641.075, 'duration': 4.042}, {'end': 28648.458, 'text': "that's because it's rotating from the top.", 'start': 28645.117, 'duration': 3.341}, {'end': 28653.8, 'text': "So it's kind of like a pizza box, if you consider it that way.", 'start': 28650.238, 'duration': 3.562}], 'summary': 'Rotation of 180 degrees and smaller rotation demonstrated, with discussion on the visual effect of rotation from the top.', 'duration': 26.269, 'max_score': 28627.531, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA28627531.jpg'}, {'end': 29033.987, 'src': 'embed', 'start': 29004.932, 'weight': 8, 'content': [{'end': 29007.513, 'text': "And now I'll stick with minus 10 degrees here as well.", 'start': 29004.932, 'duration': 2.581}, {'end': 29010.994, 'text': 'And when we save, we can see that applies to both.', 'start': 29008.093, 'duration': 2.901}, {'end': 29015.895, 'text': "So it's leaning on the left and the right, and the lines have changed on the top and the bottom as well.", 'start': 29011.274, 'duration': 4.621}, {'end': 29025.481, 'text': "now i've touched on some of the basic uses with all of these transformations and there are many more that you can reference in mdn, and so, as always,", 'start': 29016.295, 'duration': 9.186}, {'end': 29033.987, 'text': "i'm putting the mdn link for transform and all of these different possibilities in the course description inside of the resources.", 'start': 29025.481, 'duration': 8.506}], 'summary': 'Demonstrated applying -10 degrees to both left and right, and top and bottom lines changed as well.', 'duration': 29.055, 'max_score': 29004.932, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA29004932.jpg'}, {'end': 29189.308, 'src': 'embed', 'start': 29161.107, 'weight': 13, 'content': [{'end': 29169.494, 'text': "if i want that to be a different duration, i can just say three seconds here and then, if i don't want to delay or i want the same delay,", 'start': 29161.107, 'duration': 8.387}, {'end': 29170.955, 'text': 'i could just leave it as is.', 'start': 29169.494, 'duration': 1.461}, {'end': 29173.017, 'text': "so let's just leave it as is.", 'start': 29170.955, 'duration': 2.062}, {'end': 29179.523, 'text': "so we've got background color two seconds, transform, three seconds and we'll save.", 'start': 29173.017, 'duration': 6.506}, {'end': 29189.308, 'text': 'and now, if i hover over this last one, it waits that half second and then it begins to rotate and notice it takes three seconds to rotate,', 'start': 29179.523, 'duration': 9.785}], 'summary': 'Adjusting duration for background color and transform animations, resulting in a 3-second rotation on hover.', 'duration': 28.201, 'max_score': 29161.107, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA29161107.jpg'}, {'end': 29628.359, 'src': 'embed', 'start': 29596.919, 'weight': 3, 'content': [{'end': 29598.339, 'text': "So let's get those back up here.", 'start': 29596.919, 'duration': 1.42}, {'end': 29601.481, 'text': "And there's alternate, alternate, reverse, reverse.", 'start': 29598.359, 'duration': 3.122}, {'end': 29602.842, 'text': "Let's say alternate.", 'start': 29601.861, 'duration': 0.981}, {'end': 29608.685, 'text': "So that means it's going to go forward the first time, and then it's going to reverse the next time.", 'start': 29602.982, 'duration': 5.703}, {'end': 29611.246, 'text': 'So when I save this, it will start again.', 'start': 29609.165, 'duration': 2.081}, {'end': 29613.267, 'text': 'Had that one second delay.', 'start': 29611.266, 'duration': 2.001}, {'end': 29615.509, 'text': 'It went a little to the left, a little to the right.', 'start': 29613.508, 'duration': 2.001}, {'end': 29617.09, 'text': 'And then it stops.', 'start': 29616.309, 'duration': 0.781}, {'end': 29622.054, 'text': 'Now it went to the left instead of the right first, back to the right, and stops, and so on.', 'start': 29617.17, 'duration': 4.884}, {'end': 29624.336, 'text': "So now we've seen those changes.", 'start': 29622.534, 'duration': 1.802}, {'end': 29628.359, 'text': 'The next property to look at is animation fill mode.', 'start': 29624.716, 'duration': 3.643}], 'summary': 'Demonstration of alternate animation with forward-reverse movement and a 1-second delay.', 'duration': 31.44, 'max_score': 29596.919, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA29596919.jpg'}, {'end': 29695.532, 'src': 'embed', 'start': 29665.542, 'weight': 5, 'content': [{'end': 29669.104, 'text': "But when we get to the very end, let's see if it goes back to green or not.", 'start': 29665.542, 'duration': 3.562}, {'end': 29671.105, 'text': 'Well, it did because we alternated.', 'start': 29669.324, 'duration': 1.781}, {'end': 29678.827, 'text': "So let's switch this alternation back to normal because it was the opposite when it did the alternate the second time.", 'start': 29671.525, 'duration': 7.302}, {'end': 29683.308, 'text': 'So there we end at purple, then it goes back to green and starts again.', 'start': 29678.927, 'duration': 4.381}, {'end': 29687.509, 'text': "And now we're back to purple and it stayed purple.", 'start': 29683.328, 'duration': 4.181}, {'end': 29691.03, 'text': "That's the point of this animation fill mode.", 'start': 29687.969, 'duration': 3.061}, {'end': 29695.532, 'text': 'Since we set it to forwards instead of backwards, it keeps the ending state.', 'start': 29691.09, 'duration': 4.442}], 'summary': 'Animation alternates between purple and green, ending in purple due to fill mode.', 'duration': 29.99, 'max_score': 29665.542, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA29665542.jpg'}], 'start': 27641.542, 'title': 'Css layout and animation', 'summary': 'Covers learning about css functions, grid layout, responsive design, animated hamburger icon, transform properties, and css animation and transitions. it includes creating custom tooltips, using grid layout for responsive design, css-only animated hamburger icon, and exploring css animation and transitions with timing functions, keyframe animations, and visual impact.', 'chapters': [{'end': 27918.1, 'start': 27641.542, 'title': 'Learning css functions and grid layout', 'summary': 'Covers learning about css functions and grid layout, including creating a custom tooltip with css, using position, border, background color, padding, and border-radius, and transitioning back to grid layout by modifying html and css elements.', 'duration': 276.558, 'highlights': ["Creating a custom tooltip with CSS The tutorial demonstrates creating a custom tooltip for the 'Lorem' text, using CSS properties like position, border, background color, padding, and border-radius to style the tooltip.", 'Transitioning back to grid layout The chapter explains transitioning back to grid layout by modifying HTML and CSS elements, including selecting and commenting out specific elements and making changes to the CSS file.', 'Using CSS functions and pseudo elements The tutorial covers using CSS functions and pseudo elements like before pseudo element and attribute function to create hover effects and custom styles for the tooltip.']}, {'end': 28204.771, 'start': 27918.1, 'title': 'Grid layout and responsive design', 'summary': 'Explains the process of creating a grid layout using display grid, grid-template columns, repeat function, minmax function, and adjusting the gap property to achieve a responsive design that adapts to different screen sizes.', 'duration': 286.671, 'highlights': ['The chapter explains the process of creating a grid layout using display grid, grid-template columns, repeat function, minmax function, and adjusting the gap property. It demonstrates the use of display grid, grid-template columns, repeat function, and minmax function to create a grid layout, and adjusting the gap property to achieve the desired spacing.', 'The grid layout is designed to be responsive and adapt to different screen sizes. It shows the grid layout adapting to different screen sizes, with the columns and gap adjusting dynamically as the screen size changes.', 'The minmax function is used to define the minimum and maximum size of grid items, ensuring a responsive design. The minmax function is utilized to specify the minimum and maximum size of grid items, ensuring that they adapt responsively to varying screen sizes.']}, {'end': 28436.341, 'start': 28205.131, 'title': 'Css-only animated hamburger icon', 'summary': 'Covers creating a css-only animated hamburger icon and drop down nav menu, using divs and applying transforms, transitions, and animations, and pseudo class selectors for styling.', 'duration': 231.21, 'highlights': ['Creating CSS-only animated hamburger icon and drop down nav menu The chapter covers creating a CSS-only animated hamburger icon and drop down nav menu.', 'Using divs and applying transforms, transitions, and animations The tutorial demonstrates using divs for creating squares, applying transforms, transitions, and animations for styling.', 'Applying pseudo class selectors for styling The tutorial explains the use of pseudo class selectors like first child, nth child, and last child for styling the divs.']}, {'end': 29243.43, 'start': 28436.341, 'title': 'Css transform properties', 'summary': 'Covers the usage of css transform properties including translate, rotate, scale, and skew, showcasing their effects with examples and clarifying their behavior and impact on elements. the usage of transitions is also demonstrated, providing insights into controlling the transformation duration and delay.', 'duration': 807.089, 'highlights': ['Translate X and Y values can be used to move the element left or right and up or down. The transcript illustrates the usage of translate X and Y properties with examples, demonstrating the movement of elements horizontally and vertically.', 'The rotation property can be applied along the X, Y, and Z axes, enabling the element to be rotated at various angles. The chapter explains the application of the rotation property along different axes, providing insights into the effects of rotation on the elements.', 'The scale property allows for the resizing of elements along the X and Y axes, facilitating both uniform and independent scaling. The usage of the scale property is demonstrated, showcasing the ability to resize elements uniformly or independently along the X and Y axes.', 'The skew property can be utilized to create a slanted effect on elements along the X and Y axes, with the flexibility to skew in both directions. The transcript showcases the application of the skew property, providing examples of creating slanted effects on elements along the X and Y axes.', 'Usage of transitions is demonstrated, showcasing the ability to control the duration and delay of transformations when elements are hovered over. The chapter provides insights into the usage of transitions, demonstrating how to control the duration and delay of transformations when elements are hovered over.']}, {'end': 29687.509, 'start': 29243.571, 'title': 'Css animation and transition', 'summary': 'Explores css animation and transitions, comparing timing functions like ease, linear, and ease in and out, and demonstrating keyframe animations with properties like duration, delay, iteration count, and fill mode, showcasing their visual impact and behavior.', 'duration': 443.938, 'highlights': ['The chapter covers CSS animation and transitions, including timing functions like ease, linear, and ease in and out, and keyframe animations with properties like duration, delay, iteration count, and fill mode.', 'The demonstration compares timing functions like ease, linear, and ease in and out, providing insight into their visual impact and behavior.', 'Keyframe animations are showcased with properties like duration, delay, iteration count, and fill mode, presenting their impact on the visual presentation and behavior of the elements.', 'The use of keyframes is explained, depicting the transformation and translation of elements at different percentages of the animation duration, resulting in a visual impact on the screen.', 'The impact of animation-direction property is illustrated, showing how the animation behaves when set to alternate, and how it affects the visual presentation and behavior of the element.']}], 'duration': 2045.967, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA27641542.jpg', 'highlights': ['The chapter covers CSS animation and transitions, including timing functions like ease, linear, and ease in and out, and keyframe animations with properties like duration, delay, iteration count, and fill mode.', 'The demonstration compares timing functions like ease, linear, and ease in and out, providing insight into their visual impact and behavior.', 'Keyframe animations are showcased with properties like duration, delay, iteration count, and fill mode, presenting their impact on the visual presentation and behavior of the elements.', 'The use of keyframes is explained, depicting the transformation and translation of elements at different percentages of the animation duration, resulting in a visual impact on the screen.', 'The impact of animation-direction property is illustrated, showing how the animation behaves when set to alternate, and how it affects the visual presentation and behavior of the element.', "Creating a custom tooltip with CSS The tutorial demonstrates creating a custom tooltip for the 'Lorem' text, using CSS properties like position, border, background color, padding, and border-radius to style the tooltip.", 'The chapter explains the process of creating a grid layout using display grid, grid-template columns, repeat function, minmax function, and adjusting the gap property. It demonstrates the use of display grid, grid-template columns, repeat function, and minmax function to create a grid layout, and adjusting the gap property to achieve the desired spacing.', 'The grid layout is designed to be responsive and adapt to different screen sizes. It shows the grid layout adapting to different screen sizes, with the columns and gap adjusting dynamically as the screen size changes.', 'The minmax function is used to define the minimum and maximum size of grid items, ensuring a responsive design. The minmax function is utilized to specify the minimum and maximum size of grid items, ensuring that they adapt responsively to varying screen sizes.', 'Creating CSS-only animated hamburger icon and drop down nav menu The chapter covers creating a CSS-only animated hamburger icon and drop down nav menu.', 'Using divs and applying transforms, transitions, and animations The tutorial demonstrates using divs for creating squares, applying transforms, transitions, and animations for styling.', 'Applying pseudo class selectors for styling The tutorial explains the use of pseudo class selectors like first child, nth child, and last child for styling the divs.', 'Translate X and Y values can be used to move the element left or right and up or down. The transcript illustrates the usage of translate X and Y properties with examples, demonstrating the movement of elements horizontally and vertically.', 'The rotation property can be applied along the X, Y, and Z axes, enabling the element to be rotated at various angles. The chapter explains the application of the rotation property along different axes, providing insights into the effects of rotation on the elements.', 'The scale property allows for the resizing of elements along the X and Y axes, facilitating both uniform and independent scaling. The usage of the scale property is demonstrated, showcasing the ability to resize elements uniformly or independently along the X and Y axes.', 'The skew property can be utilized to create a slanted effect on elements along the X and Y axes, with the flexibility to skew in both directions. The transcript showcases the application of the skew property, providing examples of creating slanted effects on elements along the X and Y axes.', 'Usage of transitions is demonstrated, showcasing the ability to control the duration and delay of transformations when elements are hovered over. The chapter provides insights into the usage of transitions, demonstrating how to control the duration and delay of transformations when elements are hovered over.']}, {'end': 31041.599, 'segs': [{'end': 30287.261, 'src': 'embed', 'start': 30218.419, 'weight': 0, 'content': [{'end': 30227.366, 'text': "And here we just need to set the content to a blank, basically an empty quotes here, because if we don't do that, they won't be visible.", 'start': 30218.419, 'duration': 8.947}, {'end': 30232.59, 'text': "So even though we didn't put anything in there, we need to set the content to a empty value.", 'start': 30227.486, 'duration': 5.104}, {'end': 30240.917, 'text': "And then we can go ahead and set the menu dash icon before, and we're going to need to transform it now.", 'start': 30233.111, 'duration': 7.806}, {'end': 30246.702, 'text': "So we'll say transform, and now we'll translate, and we're going to provide two values here.", 'start': 30240.997, 'duration': 5.705}, {'end': 30249.985, 'text': 'So I guess I could just do one first.', 'start': 30246.802, 'duration': 3.183}, {'end': 30254.288, 'text': "Let's do translate y, and I'll show you why we need to do two values.", 'start': 30250.045, 'duration': 4.243}, {'end': 30257.911, 'text': "So I'll say minus 12 pixels and save.", 'start': 30254.328, 'duration': 3.583}, {'end': 30261.996, 'text': "and now, look, they're not even up here at all.", 'start': 30258.732, 'duration': 3.264}, {'end': 30263.538, 'text': 'that is not what we want.', 'start': 30261.996, 'duration': 1.542}, {'end': 30270.025, 'text': 'so really, it starts in the middle, and since this is 40 pixels, we need to have translate,', 'start': 30263.538, 'duration': 6.487}, {'end': 30280.496, 'text': 'because the x value needs to be minus 20 pixels and then the y value can be the minus 12, to put it up above the actual one that was in the middle,', 'start': 30270.025, 'duration': 10.471}, {'end': 30282.277, 'text': 'defined by menu icon.', 'start': 30280.496, 'duration': 1.781}, {'end': 30287.261, 'text': 'So now when I save, it gets pulled back over and I was expecting them to be the same length.', 'start': 30282.358, 'duration': 4.903}], 'summary': 'Setting empty content, transforming menu dash icon, and adjusting values for proper alignment.', 'duration': 68.842, 'max_score': 30218.419, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA30218419.jpg'}], 'start': 29687.969, 'title': 'Css animation techniques', 'summary': 'Discusses animation shorthand, creating an animated mobile navigation menu, styling menu button and navigation, and applying css animation and transformation techniques, resulting in increased efficiency and a complete animation sequence.', 'chapters': [{'end': 29755.721, 'start': 29687.969, 'title': 'Animation shorthand in css', 'summary': 'Discusses the use of shorthand for animation properties in css, which reduces the number of lines of code required and increases efficiency, illustrated through the example of applying animation using shorthand with multiple properties.', 'duration': 67.752, 'highlights': ['The use of shorthand for animation properties in CSS Demonstrates the benefits of shorthand for animation properties, reducing the number of lines of code needed for animation.', 'Illustration of applying animation using shorthand with multiple properties Explains the use of shorthand for animation by providing an example of applying animation with multiple properties using a single shorthand line.']}, {'end': 29993.053, 'start': 29755.901, 'title': 'Animating mobile nav menu', 'summary': 'Covers the process of creating an animated mobile navigation menu, including the structure of the html file, the inclusion of css variables for colors, and the initial application of styles to the header title line.', 'duration': 237.152, 'highlights': ['The chapter covers the process of creating an animated mobile navigation menu. Focuses on creating an animated mobile navigation menu.', 'The HTML file for the mobile nav menu includes a header element with a section, an H1, a button, and a nav element with an unordered list. Describes the structure of the HTML file for the mobile nav menu.', 'CSS variables are used for defining colors in the starter code. Describes the inclusion of CSS variables for colors in the starter code.', 'Initial styles are applied to the header title line, including padding, display, flex-flow, and justification of content. Explains the initial application of styles to the header title line.']}, {'end': 30455.835, 'start': 29993.193, 'title': 'Styling menu button and navigation', 'summary': 'Covers the process of styling a menu button, including setting dimensions, colors, and positioning, and defining an animation for the navigation menu to drop down and bounce slightly, with detailed steps on css properties and their effects.', 'duration': 462.642, 'highlights': ['Setting button dimensions and styles The transcript provides detailed steps on setting the width and height of the button to 48 pixels, making it transparent, removing the border, and using flexbox for alignment, with a clear demonstration of the changes.', 'Styling menu icon The process of styling the menu icon, including setting its dimensions, background color, and border radius, is explained, with a demonstration of the transition effect and the use of pseudo-elements for creating the hamburger menu icon.', "Defining navigation menu animation The transcript provides a step-by-step guide on defining a keyframe animation called 'show menu' for the navigation menu, including transforming the scale of the menu to create a bouncing effect, enhancing the user experience."]}, {'end': 30705.33, 'start': 30455.955, 'title': 'Styling navigation menu with css', 'summary': 'Discusses styling a navigation menu using css, including setting display properties, applying animations, and transforming links with hover and focus effects.', 'duration': 249.375, 'highlights': ['The navigation menu is styled using CSS properties such as display, flex, padding, and border, resulting in a visually structured and organized menu.', 'The anchor tags within the menu are transformed into block elements with centered alignment, width adjustments, and margin settings, preparing them for animation effects.', 'The links are further styled with color, font weight, and text decoration properties to maintain consistent appearance, and a transformation is applied to animate the links on hover and focus, enhancing user interaction.']}, {'end': 31041.599, 'start': 30706.07, 'title': 'Css animation and transformation', 'summary': 'Covers the application of css animation and transformation techniques, including the use of pseudo-selectors, hover/focus effects, and detailed property adjustments, resulting in a menu icon transformation and a complete animation sequence.', 'duration': 335.529, 'highlights': ['The chapter covers the application of CSS animation and transformation techniques, including the use of pseudo-selectors, hover/focus effects, and detailed property adjustments. The transcript discusses the use of CSS animation and transformation techniques, including pseudo-selectors and property adjustments.', 'The detailed property adjustments result in a menu icon transformation and a complete animation sequence. The transcript describes the detailed property adjustments that lead to a menu icon transformation and a complete animation sequence.', 'The use of pseudo-selectors and hover/focus effects is explained in the context of creating specific transformations and animations. The transcript highlights the explanation of using pseudo-selectors and hover/focus effects to create specific transformations and animations.']}], 'duration': 1353.63, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA29687969.jpg', 'highlights': ['The use of shorthand for animation properties in CSS Demonstrates the benefits of shorthand for animation properties, reducing the number of lines of code needed for animation.', 'Illustration of applying animation using shorthand with multiple properties Explains the use of shorthand for animation by providing an example of applying animation with multiple properties using a single shorthand line.', 'The chapter covers the process of creating an animated mobile navigation menu. Focuses on creating an animated mobile navigation menu.', 'Setting button dimensions and styles The transcript provides detailed steps on setting the width and height of the button to 48 pixels, making it transparent, removing the border, and using flexbox for alignment, with a clear demonstration of the changes.', "Defining navigation menu animation The transcript provides a step-by-step guide on defining a keyframe animation called 'show menu' for the navigation menu, including transforming the scale of the menu to create a bouncing effect, enhancing the user experience.", 'The detailed property adjustments result in a menu icon transformation and a complete animation sequence. The transcript describes the detailed property adjustments that lead to a menu icon transformation and a complete animation sequence.']}, {'end': 32502.233, 'segs': [{'end': 31344.732, 'src': 'embed', 'start': 31315.442, 'weight': 4, 'content': [{'end': 31317.643, 'text': "I know it's going to be right here alphabetically.", 'start': 31315.442, 'duration': 2.201}, {'end': 31320.464, 'text': 'Likewise, this helps you find issues.', 'start': 31318.303, 'duration': 2.161}, {'end': 31326.866, 'text': 'Say you had a second gap or a second min height or display.', 'start': 31320.924, 'duration': 5.942}, {'end': 31331.707, 'text': 'just you accidentally put the property in twice and one was defeating the other due to the cascade.', 'start': 31326.866, 'duration': 4.841}, {'end': 31336.489, 'text': 'Well, you would find it when you sorted because then it would say put both displays on.', 'start': 31331.787, 'duration': 4.702}, {'end': 31338.95, 'text': 'on lines right beside each other.', 'start': 31337.049, 'duration': 1.901}, {'end': 31340.67, 'text': 'So you would find those issues.', 'start': 31339.05, 'duration': 1.62}, {'end': 31344.732, 'text': 'So sorting alphabetically, the ABCSS is a good way to go.', 'start': 31341.01, 'duration': 3.722}], 'summary': 'Sorting alphabetically in css helps to find and resolve issues, making it a good practice.', 'duration': 29.29, 'max_score': 31315.442, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA31315442.jpg'}, {'end': 31792.87, 'src': 'embed', 'start': 31759.82, 'weight': 1, 'content': [{'end': 31763.022, 'text': 'So you can see our component is the header.', 'start': 31759.82, 'duration': 3.202}, {'end': 31765.504, 'text': 'It is the important semantic element.', 'start': 31763.443, 'duration': 2.061}, {'end': 31769.946, 'text': "And now what's within it depends upon the header.", 'start': 31766.164, 'duration': 3.782}, {'end': 31774.251, 'text': 'So we have a header with two underscores, and then a title.', 'start': 31770.106, 'duration': 4.145}, {'end': 31780.098, 'text': 'This is the element, the E in BEM, the block element modifier methodology.', 'start': 31774.771, 'duration': 5.327}, {'end': 31785.784, 'text': 'And then we also have another element that is dependent on the header, and that is the nav.', 'start': 31780.819, 'duration': 4.965}, {'end': 31792.87, 'text': 'Now inside here we could say are these buttons dependent on the header or not?', 'start': 31786.465, 'duration': 6.405}], 'summary': 'The header component in the bem methodology includes a title and a dependent nav element.', 'duration': 33.05, 'max_score': 31759.82, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA31759820.jpg'}, {'end': 31831.319, 'src': 'embed', 'start': 31807.182, 'weight': 0, 'content': [{'end': 31816.089, 'text': "However, if these are buttons that we're designing a specific way, just for the header, then they would become dependent on that header.", 'start': 31807.182, 'duration': 8.907}, {'end': 31821.853, 'text': 'And if that was the case, then we would say header two underscores button.', 'start': 31816.309, 'duration': 5.544}, {'end': 31824.194, 'text': 'And of course we would change everything else here.', 'start': 31822.053, 'duration': 2.141}, {'end': 31829.938, 'text': "So I'm going to select one button and then control D to get the next and the next.", 'start': 31824.234, 'duration': 5.704}, {'end': 31831.319, 'text': "And there's one more there.", 'start': 31830.118, 'duration': 1.201}], 'summary': 'Discussing the design of buttons for the header, selecting and duplicating buttons for modification.', 'duration': 24.137, 'max_score': 31807.182, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA31807182.jpg'}, {'end': 31939.384, 'src': 'embed', 'start': 31905.8, 'weight': 2, 'content': [{'end': 31910.703, 'text': 'And we actually need to include the header itself now inside of our block.', 'start': 31905.8, 'duration': 4.903}, {'end': 31914.025, 'text': "So I'll start here under our comments and say header.", 'start': 31910.763, 'duration': 3.262}, {'end': 31925.713, 'text': "we're going to have a background color and i'm going to say var and change this to our header color or background color that was defined before.", 'start': 31915.905, 'duration': 9.808}, {'end': 31927.494, 'text': "so there's the b.", 'start': 31925.713, 'duration': 1.781}, {'end': 31929.876, 'text': 'after that we would also have a color.', 'start': 31927.494, 'duration': 2.382}, {'end': 31939.384, 'text': "there we go color and i'm going to put another var, two dashes and choose color.", 'start': 31929.876, 'duration': 9.508}], 'summary': 'Include header with background color and variable, also set text color.', 'duration': 33.584, 'max_score': 31905.8, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA31905800.jpg'}], 'start': 31041.599, 'title': 'Organizing and naming css', 'summary': 'Discusses the importance of organizing css, using comments and sorting properties, bem naming convention methodology, and applying the css bem methodology with practical examples. it emphasizes the need for following team-established patterns and provides techniques for organizing code, and the application of css concepts for a final project.', 'chapters': [{'end': 31102.855, 'start': 31041.599, 'title': 'Organizing css for beginners', 'summary': 'Discusses the importance of organizing css, emphasizing the need to follow team-established patterns and providing code examples for guidance.', 'duration': 61.256, 'highlights': ['Following team-established CSS organization patterns is crucial for junior developers, as it helps maintain consistency and avoids disrupting the workflow.', 'Using the provided code examples can offer practical guidance on organizing CSS effectively in line with team patterns.', "There are no hard and fast rules for CSS organization, and it is essential to consider the team's existing patterns and reasons behind them."]}, {'end': 31359.891, 'start': 31102.995, 'title': 'Organizing css with comments and sorting properties', 'summary': 'Discusses using comments as headers in css to organize code, suggests sorting properties alphabetically or by custom groups, and provides a technique to remember alphabetical sorting. the use of comments and sorting properties can help in easily finding sections and properties in the code and identifying issues.', 'duration': 256.896, 'highlights': ['Using comments as headers in CSS to organize code The speaker suggests using comments as headers or dividers in CSS to label different sections such as reset, variables, colors, utility classes, general styles, and blocks, to help in easily finding the section in the code.', "Suggesting sorting properties alphabetically or by custom groups The chapter discusses sorting CSS properties alphabetically or by custom groups, and provides a memory technique 'ABCSS' to remember alphabetical sorting, which can help in easily finding properties and identifying issues in the code.", "Technique to remember alphabetical sorting with 'ABCSS' A memory technique 'ABCSS' is provided to remember sorting CSS properties alphabetically, which can help in easily recalling and applying the technique while working on CSS code."]}, {'end': 31667.283, 'start': 31360.312, 'title': 'Naming convention methodology: bem for larger projects', 'summary': 'Discusses the bem naming convention methodology, with a focus on block element modifier and incremental style changes for larger projects, emphasizing the importance of semantic meaning and practical implementation in html and css.', 'duration': 306.971, 'highlights': ['The BEM naming convention methodology, specifically focusing on block element modifier and incremental style changes, is discussed for larger projects. The chapter explains the BEM naming convention methodology, particularly emphasizing the block element modifier and incremental style changes for larger projects.', 'The importance of semantic meaning is highlighted, with specific emphasis on defining the basic button style and applying modifiers for incremental changes. The chapter emphasizes the importance of semantic meaning, particularly in defining the basic button style and applying modifiers for incremental changes.', 'Practical implementation in HTML and CSS is underscored, with examples demonstrating the application of the BEM methodology for larger projects. The chapter underscores the practical implementation in HTML and CSS, providing examples that demonstrate the application of the BEM methodology for larger projects.']}, {'end': 31990.28, 'start': 31667.283, 'title': 'Css bem methodology', 'summary': 'Introduces the css bem methodology, emphasizing the application of modifiers to semantic blocks like buttons and the structuring of elements within a header using the block element modifier (bem) pattern, with practical examples and coding demonstrations.', 'duration': 322.997, 'highlights': ['The chapter introduces the CSS BEM methodology, emphasizing the application of modifiers to semantic blocks like buttons and the structuring of elements within a header using the block element modifier (BEM) pattern. Introduction of CSS BEM methodology, application of modifiers to semantic blocks, structuring elements within a header using BEM pattern', 'Practical examples and coding demonstrations are provided for applying BEM methodology to HTML elements, such as turning buttons into a header, adding classes and modifying styles. Providing practical examples and coding demonstrations for applying BEM methodology to HTML elements', 'Demonstration of applying BEM naming conventions by creating classes like header, two underscores, title, and nav, and discussing the dependency of elements on the header. Application of BEM naming conventions, discussion on element dependency']}, {'end': 32502.233, 'start': 31990.561, 'title': 'Css for beginners final project', 'summary': 'Covers the application of css concepts to transform a basic html website into a modern, responsive design, utilizing specific examples and file modifications to enhance understanding and application of the material.', 'duration': 511.672, 'highlights': ['The chapter covers the application of CSS concepts to transform a basic HTML website into a modern, responsive design. It provides a great foundation for the CSS final project by applying much of what has been learned about CSS.', 'The chapter emphasizes the modification of the starter code, including cleaning out existing CSS files and making changes to the HTML pages. Instructions are provided to delete the existing CSS content in the project and add a new page for the about section by creating a new HTML file.', 'Specific examples and file modifications are demonstrated to enhance understanding and application of the material. Examples include adding meta tags in the head section, removing unnecessary content, and making adjustments for improved project structure and functionality.']}], 'duration': 1460.634, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA31041599.jpg', 'highlights': ['Following team-established CSS organization patterns is crucial for junior developers, as it helps maintain consistency and avoids disrupting the workflow.', 'Using comments as headers in CSS to organize code The speaker suggests using comments as headers or dividers in CSS to label different sections such as reset, variables, colors, utility classes, general styles, and blocks, to help in easily finding the section in the code.', 'The BEM naming convention methodology, specifically focusing on block element modifier and incremental style changes, is discussed for larger projects. The chapter explains the BEM naming convention methodology, particularly emphasizing the block element modifier and incremental style changes for larger projects.', 'The chapter introduces the CSS BEM methodology, emphasizing the application of modifiers to semantic blocks like buttons and the structuring of elements within a header using the block element modifier (BEM) pattern. Introduction of CSS BEM methodology, application of modifiers to semantic blocks, structuring elements within a header using BEM pattern', 'The chapter covers the application of CSS concepts to transform a basic HTML website into a modern, responsive design. It provides a great foundation for the CSS final project by applying much of what has been learned about CSS.']}, {'end': 33727.527, 'segs': [{'end': 32577.631, 'src': 'embed', 'start': 32550.098, 'weight': 7, 'content': [{'end': 32557.822, 'text': "One more time in the contact.html, and we'll put it right after the UTF-8 line and save.", 'start': 32550.098, 'duration': 7.724}, {'end': 32560.483, 'text': "So, now that we've done that back here in our about,", 'start': 32558.282, 'duration': 2.201}, {'end': 32569.547, 'text': 'we could fill in all of these blank things that we have or we could just copy the pattern that we already have inside of the index.html.', 'start': 32560.483, 'duration': 9.064}, {'end': 32577.631, 'text': "So I'm just going to copy the full head section here, the entire head element with the opening and closing tags.", 'start': 32569.567, 'duration': 8.064}], 'summary': 'Insert code into contact.html and replicate from index.html', 'duration': 27.533, 'max_score': 32550.098, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA32550098.jpg'}, {'end': 32644.568, 'src': 'embed', 'start': 32620.879, 'weight': 3, 'content': [{'end': 32628.202, 'text': "And of course we see a little auto formatting now where it included the lines, the spaces that you see here, but we'll just leave it as is.", 'start': 32620.879, 'duration': 7.323}, {'end': 32636.105, 'text': 'And then we will come back and get that information or abstract that out of the index.html when we get to that point.', 'start': 32628.482, 'duration': 7.623}, {'end': 32644.568, 'text': "Now moving back to the index.html file, I'm going to scroll down and we have a header section already clearly defined,", 'start': 32636.445, 'duration': 8.123}], 'summary': 'The transcript discusses auto formatting and a header section in the index.html file.', 'duration': 23.689, 'max_score': 32620.879, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA32620879.jpg'}, {'end': 33406.148, 'src': 'embed', 'start': 33377.839, 'weight': 1, 'content': [{'end': 33382.887, 'text': 'And then about is okay, but once again, it needs to be to the about page here.', 'start': 33377.839, 'duration': 5.048}, {'end': 33391.657, 'text': "So we'll say about.html, and we're going to remove the abbreviation, alt Z to just wrap that code so we can see it all.", 'start': 33382.907, 'duration': 8.75}, {'end': 33401.705, 'text': "Remove the abbreviation so it's just an about link, which we will select with control X then and remove and put it at the bottom of the list.", 'start': 33392.559, 'duration': 9.146}, {'end': 33406.148, 'text': 'And the second one should be menu, which is where we really want customers to go.', 'start': 33402.445, 'duration': 3.703}], 'summary': "Reorganize website menu by adding 'about' and prioritizing 'menu'.", 'duration': 28.309, 'max_score': 33377.839, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA33377839.jpg'}, {'end': 33456.036, 'src': 'embed', 'start': 33426.55, 'weight': 0, 'content': [{'end': 33428.712, 'text': "I'll delete that horizontal rule element.", 'start': 33426.55, 'duration': 2.162}, {'end': 33431.634, 'text': "Then above here, we'll add the section element.", 'start': 33429.271, 'duration': 2.363}, {'end': 33434.436, 'text': "Inside, we'll go ahead and add the figure.", 'start': 33432.074, 'duration': 2.362}, {'end': 33438.059, 'text': 'The section will be a class equal to hero.', 'start': 33434.677, 'duration': 3.382}, {'end': 33441.483, 'text': 'And then here, we have tacos close up.', 'start': 33438.08, 'duration': 3.403}, {'end': 33443.364, 'text': 'So this is going to change as well.', 'start': 33441.623, 'duration': 1.741}, {'end': 33445.086, 'text': "So we'll say tacos.", 'start': 33443.663, 'duration': 1.423}, {'end': 33448.208, 'text': "Now we've got close up 1,000 by 649, which is just a little different.", 'start': 33445.165, 'duration': 3.043}, {'end': 33456.036, 'text': 'delete that and now the height here is 649.', 'start': 33451.411, 'duration': 4.625}], 'summary': "Adding a section element with class 'hero' and a figure for 'tacos close up' with dimensions 1000x649.", 'duration': 29.486, 'max_score': 33426.55, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA33426550.jpg'}, {'end': 33700.671, 'src': 'embed', 'start': 33672.807, 'weight': 2, 'content': [{'end': 33677.015, 'text': "And here I'm going to use Let me spell this correctly.", 'start': 33672.807, 'duration': 4.208}, {'end': 33682.539, 'text': 'Fugaz1 And then it has a fallback of cursive.', 'start': 33677.135, 'duration': 5.404}, {'end': 33686.641, 'text': "OK, I can add just a few more variables that I know I'm going to use right away.", 'start': 33682.999, 'duration': 3.642}, {'end': 33690.424, 'text': 'And the other one for fonts is the font size.', 'start': 33687.142, 'duration': 3.282}, {'end': 33692.025, 'text': "So I'll just call that FS.", 'start': 33690.644, 'duration': 1.381}, {'end': 33697.568, 'text': "And I'm going to use the clamp function that we learned about so the font can grow and shrink.", 'start': 33692.525, 'duration': 5.043}, {'end': 33699.59, 'text': 'And this is modern CSS.', 'start': 33697.929, 'duration': 1.661}, {'end': 33700.671, 'text': 'This helps us.', 'start': 33699.65, 'duration': 1.021}], 'summary': 'Using modern css, variables like fugaz1 and font size (fs) are implemented, with the clamp function allowing font resizing.', 'duration': 27.864, 'max_score': 33672.807, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA33672807.jpg'}], 'start': 32502.593, 'title': 'Html and css updates', 'summary': 'Covers the importance of meta tags and page restructuring for responsiveness, updating images and captions for accessibility, making website page updates while maintaining consistency, and applying css for fonts and resets.', 'chapters': [{'end': 32903.711, 'start': 32502.593, 'title': 'Html meta tag and page structure', 'summary': 'Emphasizes the importance of including a meta tag with viewport settings in all html pages for responsiveness, along with restructuring the page structure and applying bem naming convention for classes.', 'duration': 401.118, 'highlights': ['Including a meta tag with viewport settings in all HTML pages The chapter emphasizes the need for a meta tag with viewport settings, including width=device width and initial scale of 1.0, in the header of all HTML pages for responsiveness.', 'Restructuring the page structure and applying BEM naming convention for classes The transcript details the process of restructuring the HTML page structure by moving the figure into its own section, applying BEM naming convention for classes, and rearranging the menu items for better organization.']}, {'end': 33144.273, 'start': 32904.372, 'title': 'Html image and caption updates', 'summary': 'Discusses updating image dimensions, adding a class to fig caption, and structuring sections in html files, highlighting the importance of accessibility and responsive design.', 'duration': 239.901, 'highlights': ['The image dimensions have changed to 1000 by 667, addressing content layout shift and improving user experience.', 'Adding an off-screen class to the fig caption ensures accessibility for screen readers, emphasizing the importance of making content readable for all users.', 'Updating the HTML files to include structured sections provides a solid foundation before proceeding to CSS, ensuring consistency and coherence across multiple pages.']}, {'end': 33456.036, 'start': 33144.273, 'title': 'Website page updates', 'summary': 'Details the process of making updates to website pages, including applying classes, rearranging menu items, and adding figure elements, with an emphasis on maintaining a consistent structure and layout.', 'duration': 311.763, 'highlights': ['Applying classes to elements and rearranging menu items to ensure a consistent layout and structure on different website pages.', 'Making changes to figure elements, such as altering dimensions and captions, to maintain visual consistency across the website.', 'Removing unnecessary elements like figure and horizontal rule, and adding section elements to maintain a clean and organized layout.']}, {'end': 33727.527, 'start': 33456.036, 'title': 'Css fonts and resets', 'summary': 'Covers importing fonts from google, applying css reset including pseudo elements, setting styles for images and form elements, and defining css variables for font family and font size.', 'duration': 271.491, 'highlights': ['Importing fonts from Google such as Fugaz1 and Nunito for use in the project.', 'Applying a CSS reset including pseudo elements like after and before, and setting margin, padding, and box-sizing properties to reset styles.', 'Setting styles for images to make them display block, remove spacing below them, and make them responsive with max-width and height properties.', 'Defining CSS variables for font family with fallback and font size using the clamp function to allow for responsive font sizing without an abundance of media queries.']}], 'duration': 1224.934, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA32502593.jpg', 'highlights': ['Including a meta tag with viewport settings in all HTML pages for responsiveness.', 'Restructuring the page structure and applying BEM naming convention for classes.', 'Updating the HTML files to include structured sections for consistency and coherence.', 'Adding an off-screen class to the fig caption for accessibility.', 'Applying classes to elements and rearranging menu items for consistent layout.', 'Importing fonts from Google such as Fugaz1 and Nunito for use in the project.', 'Applying a CSS reset including pseudo elements like after and before.', 'Defining CSS variables for font family with fallback and font size using the clamp function.']}, {'end': 35656.114, 'segs': [{'end': 33975.687, 'src': 'embed', 'start': 33929.848, 'weight': 1, 'content': [{'end': 33932.31, 'text': 'And we can do that with the white space property.', 'start': 33929.848, 'duration': 2.462}, {'end': 33934.932, 'text': "And then we'll just set that to no wrap.", 'start': 33932.99, 'duration': 1.942}, {'end': 33937.395, 'text': "And we'll see how we apply that class later.", 'start': 33935.253, 'duration': 2.142}, {'end': 33940.458, 'text': 'And the final one is simply a center.', 'start': 33937.976, 'duration': 2.482}, {'end': 33947.326, 'text': "When I want to center text that's, say, in a paragraph or in a heading, we need the text align.", 'start': 33940.578, 'duration': 6.748}, {'end': 33949.188, 'text': 'And we can set that to center.', 'start': 33947.626, 'duration': 1.562}, {'end': 33957.173, 'text': "With the utility styles complete, we're now ready to finally start applying some styles directly to elements and classes.", 'start': 33949.508, 'duration': 7.665}, {'end': 33963.097, 'text': "So I'm going to bring VS Code to the left and go ahead and launch the project to the right.", 'start': 33957.313, 'duration': 5.784}, {'end': 33967.74, 'text': 'Now remember, we removed the few styles that did exist.', 'start': 33963.537, 'duration': 4.203}, {'end': 33975.687, 'text': "And everything we've created so far really doesn't apply to the page except for that reset at the beginning.", 'start': 33968.34, 'duration': 7.347}], 'summary': 'Introduction to using white space property and text alignment for styling elements and classes in web development.', 'duration': 45.839, 'max_score': 33929.848, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA33929848.jpg'}, {'end': 34277.572, 'src': 'embed', 'start': 34257.04, 'weight': 0, 'content': [{'end': 34268.346, 'text': 'and now we can see here was the 800 pixels and now we see the html element behind that goes ahead and expands to the full width of whatever viewport is available.', 'start': 34257.04, 'duration': 11.306}, {'end': 34272.089, 'text': 'so we see that orange, that linear gradient fade here.', 'start': 34268.346, 'duration': 3.743}, {'end': 34277.572, 'text': "we will change this so the body will be in the middle and we'll see orange to the left and the right.", 'start': 34272.089, 'duration': 5.483}], 'summary': 'Html element expands to full width, with orange linear gradient fade, body in the middle', 'duration': 20.532, 'max_score': 34257.04, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA34257040.jpg'}, {'end': 35607.012, 'src': 'embed', 'start': 35556.109, 'weight': 2, 'content': [{'end': 35561.351, 'text': "So when we scroll back down, let's apply this to that hero background color here.", 'start': 35556.109, 'duration': 5.242}, {'end': 35565.073, 'text': "So we'll say var dash dash hero.", 'start': 35561.371, 'duration': 3.702}, {'end': 35566.654, 'text': "And there's the hero color.", 'start': 35565.373, 'duration': 1.281}, {'end': 35573.397, 'text': "after this hero color and i can save and we're not seeing much of a change right now.", 'start': 35568.835, 'duration': 4.562}, {'end': 35574.837, 'text': 'but we will here in the future.', 'start': 35573.397, 'duration': 1.44}, {'end': 35580.439, 'text': "we'll say color, and actually i'm realizing i just labeled that wrong and i also need a hero color.", 'start': 35574.837, 'duration': 5.602}, {'end': 35583.02, 'text': 'but i also need a hero background color.', 'start': 35580.439, 'duration': 2.581}, {'end': 35587.282, 'text': 'so if i could label those correctly in my mind it would definitely help us out.', 'start': 35583.02, 'duration': 4.262}, {'end': 35588.783, 'text': "so let's go back up here.", 'start': 35587.282, 'duration': 1.501}, {'end': 35593.744, 'text': 'this should be the hero background color that i just created instead of the hero color.', 'start': 35588.783, 'duration': 4.961}, {'end': 35594.585, 'text': "so let's label this.", 'start': 35593.744, 'duration': 0.841}, {'end': 35596.567, 'text': 'There we go.', 'start': 35596.026, 'duration': 0.541}, {'end': 35607.012, 'text': "Underneath this, we're going to have a hero-color, and the hero color itself should just be white once again for now.", 'start': 35596.767, 'duration': 10.245}], 'summary': 'Applying hero background color, correcting labels, setting hero color to white.', 'duration': 50.903, 'max_score': 35556.109, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA35556109.jpg'}], 'start': 33727.527, 'title': 'Css styling and utility classes', 'summary': 'Discusses defining font and color variables, creating background colors and utility classes, applying various css properties such as font size, font family, background color, and demonstrating the impact of variables on web page design.', 'chapters': [{'end': 34045.042, 'start': 33727.527, 'title': 'Styling variables and utility classes', 'summary': 'Discusses defining font and color variables, creating background colors and utility classes, along with setting general styles for elements and classes.', 'duration': 317.515, 'highlights': ['Defining font and color variables The chapter starts with defining font and color variables to control font sizes and colors throughout the project.', 'Creating background colors and gradients The author discusses creating background colors and gradients using variables and linear gradients, such as a faded orange color with RGB values 252, 220, 160.', 'Creating utility classes for styling elements The chapter outlines the creation of utility classes like off screen, no wrap, and center, each serving specific styling purposes.', 'Setting general styles for elements and classes The author introduces setting general styles for elements and classes, including scroll behavior for smooth transitions and different background colors for the html and body elements.']}, {'end': 34297.72, 'start': 34045.342, 'title': 'Styling web page properties', 'summary': 'Demonstrates the live application of various css properties such as font size, font family, background color, background image, font color, min height, and max width, using variables and their impact on the web page design.', 'duration': 252.378, 'highlights': ['Demonstrates live application of CSS properties such as font size, font family, background color, background image, font color, min height, and max width using variables. The speaker illustrates the real-time impact of applying CSS properties such as font size, font family, background color, background image, font color, min height, and max width using variables.', 'Correction of errors in the linear gradient and application of background color using a variable. The speaker corrects an error in the linear gradient and demonstrates the application of background color using a variable, showcasing the real-time visual changes on the web page.', 'Demonstrates the centering of the body using the margin property with zero values on top and bottom, and auto values on the left and right. The speaker showcases the method of centering the body of the web page using the margin property with specific values and demonstrates the visual change by dragging the web page.']}, {'end': 34620.744, 'start': 34298.32, 'title': 'Css styling and color variables', 'summary': 'Covers the creation of border and color variables, application of borders and box shadow, and styling of h1, h2, and h3 headings with font family, letter spacing, margin, and highlight color.', 'duration': 322.424, 'highlights': ['Creation of border and color variables The speaker sets a border color variable to a flat black and a borders variable to one pixel solid, which will be used more than once in the project.', 'Application of borders and box shadow The speaker applies the border variables to the body element to create left and right borders, and then sets a box shadow with a blur of 10 pixels using the border color.', 'Styling of H1, H2, and H3 headings The speaker changes the font family for headings, applies letter spacing using ems, sets margin-bottom for H2 and H3, and defines a highlight color for H2 and H3 headings, which will change the color on the page.']}, {'end': 35320.288, 'start': 34620.844, 'title': 'Styling website links and header', 'summary': 'Details the process of styling website links and the header section, including adjusting line height, setting link colors, applying padding, and creating variables for colors and padding.', 'duration': 699.444, 'highlights': ['The chapter details the process of styling website links and the header section The chapter provides a detailed explanation of the process of styling website links and the header section using various techniques and CSS properties.', 'adjusting line height The speaker adjusts the line height of paragraphs on the page to improve the overall visual appearance, setting it to a value of 1.5.', 'setting link colors The process involves setting link colors, including hover and active states, using CSS variables and pseudo class selectors to create consistent and visually appealing link styles.', 'applying padding The speaker applies padding to the header and unordered list using shorthand CSS properties and variables, creating consistent and visually pleasing spacing.', 'creating variables for colors and padding The speaker creates variables for colors and padding, providing flexibility and control over the design elements, as well as preparing for potential future changes such as implementing a dark mode.']}, {'end': 35656.114, 'start': 35322.21, 'title': 'Mobile header and hero section styling', 'summary': 'Covers adjustments to the mobile header and styling the hero section, including creating a hero class with specific background color and applying it to the index.html page.', 'duration': 333.904, 'highlights': ['Adjusting the mobile header and opting not to apply an animated mobile header to the project The decision was made not to apply an animated mobile header to the project due to it being considered overkill, and instead, the focus was on the four links and pages of the project.', 'Modifying the header and CSS to improve readability and aesthetics The process involved removing unnecessary text from the header, adjusting code layout for improved readability, and making aesthetic changes to the hero section by defining specific background and font colors.', 'Applying the hero class with specific background color to the index.html page The application of the hero class with a specific background color was emphasized, along with the use of variables and transparency to achieve the desired color effect.']}], 'duration': 1928.587, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA33727527.jpg', 'highlights': ['Demonstrates live application of CSS properties such as font size, font family, background color, background image, font color, min height, and max width using variables. The speaker illustrates the real-time impact of applying CSS properties such as font size, font family, background color, background image, font color, min height, and max width using variables.', 'Creating variables for colors and padding The speaker creates variables for colors and padding, providing flexibility and control over the design elements, as well as preparing for potential future changes such as implementing a dark mode.', 'Setting general styles for elements and classes The author introduces setting general styles for elements and classes, including scroll behavior for smooth transitions and different background colors for the html and body elements.', 'Demonstrates the centering of the body using the margin property with zero values on top and bottom, and auto values on the left and right. The speaker showcases the method of centering the body of the web page using the margin property with specific values and demonstrates the visual change by dragging the web page.', 'Creation of border and color variables The speaker sets a border color variable to a flat black and a borders variable to one pixel solid, which will be used more than once in the project.']}, {'end': 37859.387, 'segs': [{'end': 36047.58, 'src': 'embed', 'start': 36021.092, 'weight': 2, 'content': [{'end': 36025.633, 'text': "With the animation complete, I'm going to drag VS Code back over to full screen now.", 'start': 36021.092, 'duration': 4.541}, {'end': 36033.736, 'text': 'And we need to look at a couple of sections in the HTML that are on every page before we get to specifics about each page.', 'start': 36026.154, 'duration': 7.582}, {'end': 36039.718, 'text': 'And those remaining sections are the main element and the footer element.', 'start': 36034.036, 'duration': 5.682}, {'end': 36043.899, 'text': "So let's go to the footer of the index HTML first.", 'start': 36039.798, 'duration': 4.101}, {'end': 36047.58, 'text': 'because I usually like to style that after the header.', 'start': 36044.659, 'duration': 2.921}], 'summary': 'Reviewing html sections, focusing on main and footer elements.', 'duration': 26.488, 'max_score': 36021.092, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA36021092.jpg'}, {'end': 36537.516, 'src': 'embed', 'start': 36509.148, 'weight': 8, 'content': [{'end': 36513.209, 'text': "It's our copyright with the copyright symbol and the little taco shop.", 'start': 36509.148, 'duration': 4.061}, {'end': 36516.99, 'text': "Now let's go ahead and add a background color.", 'start': 36514.069, 'duration': 2.921}, {'end': 36521.418, 'text': 'And this background color will be the variable.', 'start': 36518.394, 'duration': 3.024}, {'end': 36527.745, 'text': "And we'll just apply the header background color so it stays in sync with the header.", 'start': 36521.598, 'duration': 6.147}, {'end': 36531.149, 'text': 'And if I save, yes, it all turns black.', 'start': 36528.766, 'duration': 2.383}, {'end': 36533.651, 'text': 'So we need to, of course, apply the color.', 'start': 36531.289, 'duration': 2.362}, {'end': 36537.516, 'text': 'And this should be the header color as well.', 'start': 36534.733, 'duration': 2.783}], 'summary': 'Applying a variable background color to the copyright section for consistency with the header, resulting in a black color.', 'duration': 28.368, 'max_score': 36509.148, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA36509148.jpg'}, {'end': 36702.543, 'src': 'embed', 'start': 36677.888, 'weight': 3, 'content': [{'end': 36687.515, 'text': "But what will happen will it will prevent the menu from scrolling underneath this header if we have a taller menu or we're taking up more room.", 'start': 36677.888, 'duration': 9.627}, {'end': 36691.457, 'text': "By the time we have finished the styles, that's probably what will happen.", 'start': 36687.555, 'duration': 3.902}, {'end': 36699.822, 'text': "Okay, a couple of extra things to put now, and one of these at least we'll see differently on maybe the contact page,", 'start': 36692.057, 'duration': 7.765}, {'end': 36702.543, 'text': 'because it has some extra room here already.', 'start': 36699.822, 'duration': 2.721}], 'summary': 'Styling may prevent menu scrolling, potentially affecting layout on contact page.', 'duration': 24.655, 'max_score': 36677.888, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA36677888.jpg'}, {'end': 36991.309, 'src': 'embed', 'start': 36962.493, 'weight': 4, 'content': [{'end': 36968.457, 'text': "so i will focus on that and let's scroll up to see this content that we have on this page.", 'start': 36962.493, 'duration': 5.964}, {'end': 36971.899, 'text': 'we definitely have enough height here and we have two different articles.', 'start': 36968.457, 'duration': 3.442}, {'end': 36975.781, 'text': "working with forms can be difficult, but let's see how we can apply the styles here.", 'start': 36971.899, 'duration': 3.882}, {'end': 36982.445, 'text': "i'm going to put in a new label in our style sheet and i will put contact right here.", 'start': 36975.781, 'duration': 6.664}, {'end': 36986.166, 'text': "And then let's scroll up to make that the very top of the page.", 'start': 36982.605, 'duration': 3.561}, {'end': 36991.309, 'text': "And now let's start off with our contact two underscores and H2.", 'start': 36986.507, 'duration': 4.802}], 'summary': 'Styling two articles and adding a contact label at the top of the page.', 'duration': 28.816, 'max_score': 36962.493, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA36962493.jpg'}, {'end': 37131.787, 'src': 'embed', 'start': 37104.566, 'weight': 5, 'content': [{'end': 37115.755, 'text': 'And then we can arrow to the end, paste in our class, and then once again, arrow over, change form, and change this to contact label.', 'start': 37104.566, 'duration': 11.189}, {'end': 37118.257, 'text': "Now let's do this for the inputs.", 'start': 37116.435, 'duration': 1.822}, {'end': 37123.06, 'text': "So I'll select the first one, Control D, and there are only two inputs.", 'start': 37118.497, 'duration': 4.563}, {'end': 37124.101, 'text': "So that's all we need.", 'start': 37123.26, 'duration': 0.841}, {'end': 37131.787, 'text': 'Arrow to the right, and paste in the class, and then change the contact form once again.', 'start': 37124.722, 'duration': 7.065}], 'summary': 'Adding class and changing form for contact label and inputs.', 'duration': 27.221, 'max_score': 37104.566, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA37104566.jpg'}, {'end': 37441.305, 'src': 'embed', 'start': 37407.023, 'weight': 13, 'content': [{'end': 37407.804, 'text': 'That looks good.', 'start': 37407.023, 'duration': 0.781}, {'end': 37414.648, 'text': 'The hours page, another nice hero section, and a simple bit of information about the hours.', 'start': 37408.204, 'duration': 6.444}, {'end': 37418.71, 'text': "And let's look at the contact page.", 'start': 37415.488, 'duration': 3.222}, {'end': 37425.298, 'text': 'We scroll down, we see the, our location information after the hero and the contact form as well.', 'start': 37419.755, 'duration': 5.543}, {'end': 37426.738, 'text': 'So that all looks good.', 'start': 37425.718, 'duration': 1.02}, {'end': 37432.581, 'text': 'I think the menu is still going to need some work and we might apply another style or two.', 'start': 37426.878, 'duration': 5.703}, {'end': 37435.102, 'text': "yet that we haven't, but we're making a lot of good progress.", 'start': 37432.581, 'duration': 2.521}, {'end': 37441.305, 'text': "Let's go ahead and control shift I to see how everything's looking in a mobile device as well.", 'start': 37435.142, 'duration': 6.163}], 'summary': 'Website review: good progress made on hours and contact pages, more work needed on menu. checking mobile view next.', 'duration': 34.282, 'max_score': 37407.023, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA37407023.jpg'}, {'end': 37487.241, 'src': 'embed', 'start': 37455.651, 'weight': 11, 'content': [{'end': 37460.072, 'text': 'so yes, the menu needs some help, but how do the other pages look?', 'start': 37455.651, 'duration': 4.421}, {'end': 37467.914, 'text': 'oh, the other pages still say the little taco shop hours instead of just little taco shop or something similar.', 'start': 37460.072, 'duration': 7.842}, {'end': 37474.696, 'text': "and again we're on the smallest device that we might ever see right now, which is the iphone 5 se.", 'start': 37467.914, 'duration': 6.782}, {'end': 37478.597, 'text': "things may have changed in the future, of course, if you're viewing this at a later time.", 'start': 37474.696, 'duration': 3.901}, {'end': 37487.241, 'text': "So here it wraps the two lines on the header, but anything larger than the absolute smallest device, it looks like it won't.", 'start': 37479.197, 'duration': 8.044}], 'summary': 'The menu needs improvement, other pages have formatting issues, not optimized for small devices.', 'duration': 31.59, 'max_score': 37455.651, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA37455651.jpg'}, {'end': 37527.394, 'src': 'embed', 'start': 37500.23, 'weight': 9, 'content': [{'end': 37508.338, 'text': 'i think we want our header to be consistent and say little taco shop, no matter which page we go to.', 'start': 37500.23, 'duration': 8.108}, {'end': 37514.504, 'text': "so let's go ahead and make those changes as well in the html as we go back to the code.", 'start': 37508.338, 'duration': 6.166}, {'end': 37522.131, 'text': "so i'm going to close this back out, drag this back to the right and bring the code over to the full screen.", 'start': 37514.504, 'duration': 7.627}, {'end': 37527.394, 'text': "Quickly going to each HTML page, we'll make sure that the heading matches.", 'start': 37522.331, 'duration': 5.063}], 'summary': "Ensure consistent 'little taco shop' header on all pages.", 'duration': 27.164, 'max_score': 37500.23, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA37500230.jpg'}, {'end': 37577.767, 'src': 'embed', 'start': 37549.408, 'weight': 6, 'content': [{'end': 37560.436, 'text': 'well, we would prefer it still say little taco shop here and of course the h2s will handle the other labels on the page.', 'start': 37549.408, 'duration': 11.028}, {'end': 37567.341, 'text': 'so we had our location and below that we should also have the contact form as well.', 'start': 37560.436, 'duration': 6.905}, {'end': 37567.922, 'text': 'there we go.', 'start': 37567.341, 'duration': 0.581}, {'end': 37569.223, 'text': "let's see what was here.", 'start': 37567.922, 'duration': 1.301}, {'end': 37570.744, 'text': 'yep, our contact form.', 'start': 37569.223, 'duration': 1.521}, {'end': 37571.525, 'text': 'so that looks good.', 'start': 37570.744, 'duration': 0.781}, {'end': 37577.126, 'text': 'and and the about html should also just say little taco shop.', 'start': 37571.525, 'duration': 5.601}, {'end': 37577.767, 'text': 'and it does.', 'start': 37577.126, 'duration': 0.641}], 'summary': "Website should display 'little taco shop' prominently, including contact form and about section.", 'duration': 28.359, 'max_score': 37549.408, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA37549408.jpg'}, {'end': 37760.784, 'src': 'embed', 'start': 37735.082, 'weight': 0, 'content': [{'end': 37739.666, 'text': 'And notice how I just used divs and applied all of these classes.', 'start': 37735.082, 'duration': 4.584}, {'end': 37743.109, 'text': 'And this is what you do not want to do.', 'start': 37740.367, 'duration': 2.742}, {'end': 37750.495, 'text': 'But I guarantee you will probably see this somewhere when a grid is applied and you see a table on the page.', 'start': 37743.389, 'duration': 7.106}, {'end': 37755.279, 'text': "I'm going to press Control-Z, though, because this, once again, is not what we want to do.", 'start': 37750.936, 'duration': 4.343}, {'end': 37756.741, 'text': 'And you can tell by this markup.', 'start': 37755.339, 'duration': 1.402}, {'end': 37758.322, 'text': 'It is not flattened.', 'start': 37757.361, 'duration': 0.961}, {'end': 37760.784, 'text': 'However, there is a solution for this.', 'start': 37758.682, 'duration': 2.102}], 'summary': 'Avoid using divs with unnecessary classes for grid layout, use proper markup for a flattened structure.', 'duration': 25.702, 'max_score': 37735.082, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA37735082.jpg'}], 'start': 35656.594, 'title': 'Styling and structuring web pages', 'summary': 'Covers styling and structuring web pages, including styling html elements, applying animation effects, refactoring css classes, and converting table to grid layout, with focus on specific properties and settings. it emphasizes maintaining consistency and semantic markup, resulting in visually appealing and responsive web pages.', 'chapters': [{'end': 36144.012, 'start': 35656.594, 'title': 'Styling and animating h2 element', 'summary': 'Covers the process of adding styles to the h2 element, including padding, letter spacing, text-shadow, and position properties, followed by creating an animated drop-down effect using keyframes, with a 0.5-second duration and a 1-second delay, resulting in a visually appealing welcome animation.', 'duration': 487.418, 'highlights': ['The process of adding styles to the h2 element, including padding, letter spacing, and text-shadow, is demonstrated. Demonstrates the addition of padding, letter spacing, and text-shadow to the h2 element.', 'The creation of an animated drop-down effect using keyframes, with a 0.5-second duration and a 1-second delay, is explained. Explains the creation of an animated drop-down effect using keyframes with specific duration and delay.']}, {'end': 36441.243, 'start': 36144.012, 'title': 'Html styling and structure', 'summary': 'Covers the process of applying styles and structuring html pages, including adding classes and elements to maintain consistency across the project, and making specific changes to the contact page. it also involves removing unnecessary content and moving elements to different pages.', 'duration': 297.231, 'highlights': ["Applying consistent classes and elements across HTML pages to maintain uniformity and structure in the project. The chapter emphasizes applying standard classes and elements, such as 'main' and 'article', to ensure consistency across all HTML pages, promoting a structured and uniform project layout.", "Making specific changes to the contact page, including applying classes, switching the order of information, and adjusting elements. The chapter details specific adjustments to the contact page, such as applying the 'main' class, converting 'section' elements to 'article' elements, and rearranging the location information and contact form.", "Removing unnecessary content and adjusting elements, such as removing the horizontal rule and relocating the 'about' page content to the respective HTML files. The transcript outlines the process of removing unnecessary content, like the horizontal rule, and relocating the 'about' page content to the corresponding HTML files for improved organization and structure."]}, {'end': 36812.104, 'start': 36441.443, 'title': 'Styling html elements and classes', 'summary': 'Covers the application of styles to the main and footer elements in html, including positioning, colors, padding, and text alignment, with a focus on creating additional scrolling space for different page sections.', 'duration': 370.661, 'highlights': ['Applying position sticky and background color to footer class Styles for the footer class include position sticky with a bottom value of zero to keep it in place, a background color applied using a variable, and padding and text alignment for aesthetic improvements.', 'Adding scroll-margin-top and margin to main__article class The scroll-margin-top property is set to 6.5 rems to prevent article information from scrolling underneath the header, and a margin property is used to enhance the layout.', 'Utilizing first-child and last-child pseudo-selectors for main article The first-child pseudo-selector is applied to add spacing between the hero image and the first article, while the last-child pseudo-selector calculates a minimum height to provide extra scrolling space for the last section of the page.']}, {'end': 37381.046, 'start': 36812.264, 'title': 'Refactoring css classes for improved clarity', 'summary': "Discusses refactoring css classes for improved clarity, emphasizing the use of specific class names like 'about' and 'contact' instead of generic names like 'main', with detailed examples and code modifications.", 'duration': 568.782, 'highlights': ["Refactoring CSS classes for clear naming, defining specific classes like 'about' and 'contact' instead of 'main'. Emphasizing the use of specific class names for improved clarity, such as 'about' and 'contact', instead of generic names like 'main'.", 'Detailed examples of modifying class names and code to improve clarity in HTML and CSS. Providing detailed examples of modifying class names and code to improve clarity in HTML and CSS.', 'Demonstrating the impact of refactoring on the appearance of form elements through detailed CSS modifications. Demonstrating the impact of refactoring on the appearance of form elements through detailed CSS modifications.']}, {'end': 37859.387, 'start': 37381.347, 'title': 'Styling website pages and converting table to grid', 'summary': "Discusses the process of styling website pages and converting an html table to a grid layout using css, ensuring the correct display on various devices, and highlighting the importance of maintaining semantic markup while applying the grid layout. additionally, it emphasizes the use of the 'display: contents' setting to enable the grid layout without compromising the semantic structure of the html.", 'duration': 478.04, 'highlights': ['The chapter discusses the process of styling website pages. It covers the styling of different sections of a website, such as the about, hours, and contact pages, and mentions the need for further improvements in the menu section.', 'Converting an HTML table to a grid layout using CSS. The speaker explains the process of converting an HTML table to a grid layout using CSS, emphasizing the importance of maintaining semantic markup and avoiding the use of div elements for grid construction.', "Importance of maintaining semantic markup while applying the grid layout. The chapter highlights the significance of maintaining semantic markup when applying the grid layout, and emphasizes the use of the 'display: contents' setting to enable the grid layout without compromising the semantic structure of the HTML.", "Ensuring correct display on various devices. The chapter discusses the importance of ensuring the correct display of website elements on various devices, such as mobile phones, and demonstrates the process of checking the website's appearance on different devices."]}], 'duration': 2202.793, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA35656594.jpg', 'highlights': ['Demonstrates the addition of padding, letter spacing, and text-shadow to the h2 element.', 'Explains the creation of an animated drop-down effect using keyframes with specific duration and delay.', "The chapter emphasizes applying standard classes and elements, such as 'main' and 'article', to ensure consistency across all HTML pages, promoting a structured and uniform project layout.", "The transcript outlines the process of removing unnecessary content, like the horizontal rule, and relocating the 'about' page content to the corresponding HTML files for improved organization and structure.", 'Styles for the footer class include position sticky with a bottom value of zero to keep it in place, a background color applied using a variable, and padding and text alignment for aesthetic improvements.', 'The scroll-margin-top property is set to 6.5 rems to prevent article information from scrolling underneath the header, and a margin property is used to enhance the layout.', 'The first-child pseudo-selector is applied to add spacing between the hero image and the first article, while the last-child pseudo-selector calculates a minimum height to provide extra scrolling space for the last section of the page.', "Emphasizing the use of specific class names for improved clarity, such as 'about' and 'contact', instead of generic names like 'main'.", 'Providing detailed examples of modifying class names and code to improve clarity in HTML and CSS.', 'Demonstrating the impact of refactoring on the appearance of form elements through detailed CSS modifications.', 'The chapter discusses the process of styling website pages. It covers the styling of different sections of a website, such as the about, hours, and contact pages, and mentions the need for further improvements in the menu section.', 'The speaker explains the process of converting an HTML table to a grid layout using CSS, emphasizing the importance of maintaining semantic markup and avoiding the use of div elements for grid construction.', "The chapter highlights the significance of maintaining semantic markup when applying the grid layout, and emphasizes the use of the 'display: contents' setting to enable the grid layout without compromising the semantic structure of the HTML.", "The chapter discusses the importance of ensuring the correct display of website elements on various devices, such as mobile phones, and demonstrates the process of checking the website's appearance on different devices."]}, {'end': 40089.311, 'segs': [{'end': 38449.621, 'src': 'embed', 'start': 38419.278, 'weight': 3, 'content': [{'end': 38424.241, 'text': "now let's go ahead and apply some of this to the other areas as well.", 'start': 38419.278, 'duration': 4.963}, {'end': 38431.782, 'text': "so let's say menu two underscore CR and menu two underscores SF.", 'start': 38424.241, 'duration': 7.541}, {'end': 38440.613, 'text': "Here I'm going to take these two and maybe I should have organized this differently on my thought pattern, but I want both of those there as well.", 'start': 38433.384, 'duration': 7.229}, {'end': 38442.716, 'text': "However, there's also some other styles.", 'start': 38441.034, 'duration': 1.682}, {'end': 38449.621, 'text': 'So I want a height, of 100% as it takes up some of that extra space.', 'start': 38442.776, 'duration': 6.845}], 'summary': 'Applying styles to menu2_cr and menu2_sf with 100% height.', 'duration': 30.343, 'max_score': 38419.278, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA38419278.jpg'}, {'end': 38504.804, 'src': 'embed', 'start': 38477.331, 'weight': 4, 'content': [{'end': 38487.035, 'text': "Let's go back and look at our HTML and see if that class was applied properly to the CR section.", 'start': 38477.331, 'duration': 9.704}, {'end': 38489.095, 'text': "Oh, it's just one underscore.", 'start': 38487.595, 'duration': 1.5}, {'end': 38489.956, 'text': 'It needs to be two.', 'start': 38489.115, 'duration': 0.841}, {'end': 38496.139, 'text': 'save and now go back to style and bring this over.', 'start': 38491.176, 'duration': 4.963}, {'end': 38497.62, 'text': 'and now, crunchy and soft.', 'start': 38496.139, 'duration': 1.481}, {'end': 38500.361, 'text': 'both have that same style and everything is aligned better.', 'start': 38497.62, 'duration': 2.741}, {'end': 38504.804, 'text': "that makes more sense as to why it wasn't coming together quite as quickly as i expected.", 'start': 38500.361, 'duration': 4.443}], 'summary': 'Corrected html class from one to two underscores, resulting in improved alignment and better understanding.', 'duration': 27.473, 'max_score': 38477.331, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA38477331.jpg'}, {'end': 38593.057, 'src': 'embed', 'start': 38550.517, 'weight': 2, 'content': [{'end': 38557.182, 'text': "So we'll say var and bring in our borders variable that we have created and save.", 'start': 38550.517, 'duration': 6.665}, {'end': 38560.704, 'text': 'So now we have a border across each one of those headings.', 'start': 38557.262, 'duration': 3.442}, {'end': 38562.645, 'text': "Now let's scroll for some more room.", 'start': 38561.044, 'duration': 1.601}, {'end': 38565.967, 'text': "And we're going to select that menu header again.", 'start': 38562.965, 'duration': 3.002}, {'end': 38568.449, 'text': 'I could spell menu, two underscores header.', 'start': 38565.987, 'duration': 2.462}, {'end': 38571.851, 'text': 'And then we also want menu two underscores item.', 'start': 38569.009, 'duration': 2.842}, {'end': 38593.057, 'text': "Now, for both of these we want a width of 100% and then we'll set a padding to 1em and let's put a border and then let's set medium ridge and we'll set the var equal to border color.", 'start': 38573.228, 'duration': 19.829}], 'summary': 'Adding 100% width, 1em padding, and medium ridge border to menu header and item.', 'duration': 42.54, 'max_score': 38550.517, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA38550517.jpg'}, {'end': 39601.827, 'src': 'embed', 'start': 39567.491, 'weight': 1, 'content': [{'end': 39570.772, 'text': "i'm going to drag this over to full screen for this discussion.", 'start': 39567.491, 'duration': 3.281}, {'end': 39572.793, 'text': "let's say, the colors we have here there's.", 'start': 39570.772, 'duration': 2.021}, {'end': 39578.616, 'text': "there's probably the largest list that we have of anything in this project is the colors.", 'start': 39572.793, 'duration': 5.823}, {'end': 39584.658, 'text': 'it might help to just use the ABCSS technique here to organize these.', 'start': 39578.616, 'duration': 6.042}, {'end': 39594.163, 'text': 'so if we highlight all of those, press ctrl P and then the greater than symbol and now we might choose sort lines ascending.', 'start': 39584.658, 'duration': 9.505}, {'end': 39601.827, 'text': "so now all of our colors are ordered alphabetically and I could find them probably much faster now that I've done this.", 'start': 39594.163, 'duration': 7.664}], 'summary': 'Organized colors using abcss technique, making them easier to find.', 'duration': 34.336, 'max_score': 39567.491, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA39567491.jpg'}, {'end': 39982.876, 'src': 'embed', 'start': 39954.873, 'weight': 0, 'content': [{'end': 39959.437, 'text': 'And I previously forgot to put in an H2 for this page.', 'start': 39954.873, 'duration': 4.564}, {'end': 39962.46, 'text': "So I'm going to do that here on line 48.", 'start': 39959.497, 'duration': 2.963}, {'end': 39965.103, 'text': "And I'm just going to put hours in there and save.", 'start': 39962.46, 'duration': 2.643}, {'end': 39971.749, 'text': "Something else that's been bothering me about this page the whole time was the back to the top link that we really don't need anymore.", 'start': 39965.503, 'duration': 6.246}, {'end': 39975.572, 'text': "There's not enough content on this page for it really to even be there.", 'start': 39971.789, 'duration': 3.783}, {'end': 39979.995, 'text': "So I'm going to remove that back to the top link on the Hours page.", 'start': 39975.612, 'duration': 4.383}, {'end': 39982.876, 'text': "Other than that, I'm happy with how this page turned out.", 'start': 39980.435, 'duration': 2.441}], 'summary': 'Added h2 tag, removed back to top link on hours page. satisfied with the page.', 'duration': 28.003, 'max_score': 39954.873, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA39954873.jpg'}], 'start': 37859.768, 'title': 'Css for beginners course', 'summary': 'Covers html table structure, css grid for styling menu, grid layout for menu table, media query for taco emoji addition, dark mode styling implementation, and javascript for updating the year in the completion of the css for beginners course.', 'chapters': [{'end': 38038.874, 'start': 37859.768, 'title': 'Html table structure', 'summary': 'Discusses the html table structure and its elements, including the use of classes for menu, headers, and items, and the application of bem notation, with a focus on accessibility and screen readers.', 'duration': 179.106, 'highlights': ['The chapter discusses the application of classes for menu, headers, and items, and the use of BEM notation, emphasizing the importance of accessibility and screen readers.', 'The table head, table body, and table foot elements are set to display contents, and the content for the grid and screen readers is placed inside the TH and TD elements.', 'The author demonstrates the process of applying specific classes, such as menu, header, and item, to the HTML table structure for accessibility and organization.', "The author highlights the importance of retaining the caption for accessibility while ensuring it remains off-screen, and also addresses the use of the 'scope' attribute and the removal of abbreviation for improved accessibility."]}, {'end': 38254.973, 'start': 38039.014, 'title': 'Styling menu with css grid', 'summary': 'Explains how to style a menu using css grid, including applying classes to elements, setting grid templates and mapping out grid template areas, with an emphasis on the changes made and the use of display grid and repeat function.', 'duration': 215.959, 'highlights': ["The chapter demonstrates setting classes for menu items like crunchy and soft by using 'menu two underscores item' and additional specific classes like 'CR' for crunchy and 'SF' for soft.", 'The instructor explains the use of display grid and how applying it changes the view of the table, followed by the use of grid-template-columns with the repeat function to create three columns, each with one fragment.', 'The chapter emphasizes the need to assign labels to elements that will take up more than one grid square when mapping out grid template areas, without necessarily assigning them to specific classes.']}, {'end': 38903.422, 'start': 38255.633, 'title': 'Grid layout for menu table', 'summary': 'Details the process of creating a grid layout for a menu table, including applying styles to different sections, using variables for consistency, and ensuring responsiveness across various device views.', 'duration': 647.789, 'highlights': ['The process of creating a grid layout for a menu table is detailed, including applying specific styles to different sections such as crunchy, soft, and chips and salsa rows. The chapter covers the step-by-step process of creating a grid layout for a menu table, including applying specific styles to different sections such as crunchy, soft, and chips and salsa rows.', 'Variables are used for consistency, such as setting a margin bottom of 1em and a border-radius variable of 15 pixels. The use of variables for maintaining consistency is emphasized, including setting a margin bottom of 1em and a border-radius variable of 15 pixels.', 'The responsiveness of the grid layout across various device views is demonstrated, showcasing the adaptability without needing media queries. The chapter showcases the responsiveness of the grid layout across different device views, highlighting its adaptability without the need for media queries.']}, {'end': 39106.474, 'start': 38903.663, 'title': 'Media query and taco emoji addition', 'summary': 'Discusses the addition of a media query for screen sizes larger than 576 pixels and the insertion of taco emojis in the headings, impacting the display on different screen sizes, with a 125% font size increase for specific headings.', 'duration': 202.811, 'highlights': ['The addition of a media query for screen sizes larger than 576 pixels, impacting the display and font size of specific headings by 125%.', 'The insertion of taco emojis in the headings, displaying on screen sizes larger than 576 pixels and disappearing on smaller screens.']}, {'end': 39614.015, 'start': 39108.795, 'title': 'Implementing dark mode styling', 'summary': "Discusses the implementation of dark mode styling through media queries, including changes to various color variables on the website to cater to user preferences, emphasizing the use of 'white smoke' and 'flat black' colors throughout the design.", 'duration': 505.22, 'highlights': ["The chapter discusses the implementation of dark mode styling through media queries, including changes to various color variables on the website to cater to user preferences, emphasizing the use of 'white smoke' and 'flat black' colors throughout the design.", 'The media query for dark mode styling is based on the preference of light and dark mode, with an emphasis on accommodating user preferences, particularly the preference for dark mode.', 'The variables for colors on the site are directly changed through the media query for dark mode, including overwriting background colors, header colors, font colors, link colors, and more.', 'Specific color changes are made for different elements on the webpage, such as the background color for the nav menu, hero color for the animated part, body background color, font color, highlight color, border color, and link colors.', "The use of 'white smoke' and 'flat black' colors is prioritized throughout the design to improve visibility and user experience, with consideration for accessibility in dark mode.", "The chapter emphasizes the importance of user preferences for dark mode and the need to make adjustments to the website's color scheme accordingly, ensuring a visually appealing and accessible design for all users."]}, {'end': 40089.311, 'start': 39614.395, 'title': 'Adding javascript to update year', 'summary': 'Discusses adding a touch of javascript to update the year on a website, eliminating the need to manually update the copyright year, and making it consistent across all pages, contributing to the completion of the css for beginners course.', 'duration': 474.916, 'highlights': ['Adding JavaScript to update the year on the website, ensuring it always displays the current year without the need for manual updates. The JavaScript code adds a time element to the page, dynamically updating the year without manual intervention.', 'Implementing JavaScript to display the updated year on all pages, ensuring consistency across the entire website. The JavaScript code is added to all pages, ensuring that the updated year is consistently displayed on the footer of each page.', 'Making design adjustments and personalizing choices in the project, encouraging experimentation and individual design preferences. The instructor encourages making personal design choices, experimenting, and reevaluating the code to learn and improve.']}], 'duration': 2229.543, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OXGznpKZ_sA/pics/OXGznpKZ_sA37859768.jpg', 'highlights': ['The chapter covers html table structure, css grid for styling menu, grid layout for menu table, media query for taco emoji addition, dark mode styling implementation, and javascript for updating the year in the completion of the css for beginners course.', 'The responsiveness of the grid layout across various device views is demonstrated, showcasing the adaptability without needing media queries.', 'The process of creating a grid layout for a menu table is detailed, including applying specific styles to different sections such as crunchy, soft, and chips and salsa rows.', "The chapter discusses the implementation of dark mode styling through media queries, including changes to various color variables on the website to cater to user preferences, emphasizing the use of 'white smoke' and 'flat black' colors throughout the design.", 'Adding JavaScript to update the year on the website, ensuring it always displays the current year without the need for manual updates.']}], 'highlights': ['The course consists of 24 tutorials totaling over 11 hours, providing a comprehensive learning experience for beginners.', 'Additional resources, including links and GitHub repository, are available to supplement the learning process.', 'Acknowledgment is given to FreeCodeCamp for their support in sharing the video and providing free coding resources.', 'CSS defined as Cascading Style Sheets used to describe document presentation, particularly with HTML.', 'Comparison of HTML and CSS, where HTML is the foundation and structure, while CSS enhances appearance and presentation.', 'Demonstrates the process of adding the Live Server extension in Visual Studio Code, allowing immediate reload of changes and simulating a web server environment.', 'Illustrates the usage of inline, internal, and external CSS to style elements within an HTML document, emphasizing the importance of using external style sheets for separation of concerns.', 'The chapter covers the basics of CSS selectors, including element, class, and ID selectors, with practical examples and explanations on inheritance, specificity, grouping selectors, and the universal selector.', 'The specificity calculator helps understand why one rule is being applied or why one selector overrules the other, with examples of scoring system like 001 for an element selector, 010 for a class, and 100 for an ID selector.', 'The chapter covers the use of RGBA, hexadecimal, and HSL color codes, explaining their values and impact on transparency, and emphasizes the importance of achieving optimal contrast for accessibility.', 'The chapter guides on setting background color using color names and RGB values, including the demonstration of using color names like blue and papaya whip and RGB values for red, green, and blue text.', "The box model layers include content, padding, border, and margin, providing a visual representation of the element's structure and spacing.", "Default margin settings for H1 element show a 32.16 pixels margin due to the browser's user agent style sheet, influenced by the font size set to 3 rem (48 pixels), clarifying the impact of font size on default styles.", 'The live server extension enables automatic updates of CSS changes in the browser, providing real-time feedback.', 'The default line height is usually around 1.2, but a setting of 1.4 or 1.5 significantly improves readability, as observed in the paragraph.', 'Covers css floats, including practical examples and text wrapping, the use of margin, positioning with float classes, handling floating elements with clear class, resolving issues with overflow and display, creating flexible columns with css, and styling columns, providing comprehensive coverage on modern css techniques and design principles.', 'Applying Columns to HTML Content Demonstrated the use of the column-span property to span all columns on a web page, achieving a visually appealing layout.', 'Styling a Quote with Fancy Symbols Showed the incorporation of HTML entities and Unicode characters to create visually appealing quote symbols, enhancing the aesthetics of the content.', 'The chapter provides visual demonstrations of the usage of absolute, relative, and fixed positioning in CSS. The transcript provides detailed examples and visual representations of how the absolute, relative, and fixed positioning in CSS can be used.', 'The chapter covers making images responsive by setting dimensions and applying a height of auto in CSS to respond to the percentage of width set in HTML.', 'The chapter emphasizes the use of min-width for mobile-first and responsive design, explaining its significance in starting from the smallest to the largest, with common breakpoints for mobile devices being 481 pixels or less, and for larger screens such as extra large screens and TVs being 1201 pixels and greater.', 'The different types of breakpoints and conditions for media queries are explored, including orientation and min-aspect-ratio, with specific examples provided such as landscape orientation and aspect ratios like 16 by 9 or 7 by 4, demonstrating the flexibility of media queries for various device sizes and orientations.', 'DevTools can be used to visualize and adjust responsive design elements for various devices with specific pixel widths mentioned, including 602 pixels wide and 576 pixels for breakpoints.', 'The chapter covers CSS animation and transitions, including timing functions like ease, linear, and ease in and out, and keyframe animations with properties like duration, delay, iteration count, and fill mode.', 'The chapter covers html table structure, css grid for styling menu, grid layout for menu table, media query for taco emoji addition, dark mode styling implementation, and javascript for updating the year in the completion of the css for beginners course.']}