title
CSS Tricks : CSS Problems Solved

description
Get the Code Here : http://goo.gl/qUnMTX Best CSS3 Book : http://goo.gl/8KjgNG Use em Document Wide : 00:31 Repeating Image Background : 01:43 Fixed Background : 02:11 Gradient Background : 03:30 Scalable Background : 04:14 Fix Layout Overlap : 05:19 Multiple Background Images : 06:00 Custom Fonts : 07:38 Link Tricks : 08:58 Text Shadow : 09:32 Indent Text : 10:25 Enlarge First Letter : 10:53 Drop Shadow : 11:56 Rounded Images : 12:20 Rotate Images : 12:32 Custom List Bullets : 12:47 Table Styling Tricks : 14:04 Form Styling : 17:35 Absolute Positioning Tricks : 20:16 Image Galleries : 22:40 2 Column Layouts : 26:34 3 Column Layouts : 34:38

detail
{'title': 'CSS Tricks : CSS Problems Solved', 'heatmap': [{'end': 1605.472, 'start': 1557.225, 'weight': 1}], 'summary': 'Covers solutions to 50 common css questions, customizing web design elements, working with images, interactive table hover effect, web page discount offer, web page design basics, and website layout design in css, offering practical tips and techniques for creating visually enhanced and organized web content.', 'chapters': [{'end': 445.146, 'segs': [{'end': 30.914, 'src': 'embed', 'start': 0.129, 'weight': 0, 'content': [{'end': 1.05, 'text': 'Well hello internet.', 'start': 0.129, 'duration': 0.921}, {'end': 5.455, 'text': 'Very often I get the same cascading style sheet questions asked,', 'start': 1.27, 'duration': 4.185}, {'end': 10.42, 'text': "and in this one video I'm going to answer about 50 of the most common questions that I get asked all the time.", 'start': 5.455, 'duration': 4.965}, {'end': 15.505, 'text': "In the description you'll find a link to all of them, so you'll be able to really quickly find whatever problem you might have,", 'start': 10.5, 'duration': 5.005}, {'end': 17.107, 'text': 'click on it and find a solution.', 'start': 15.505, 'duration': 1.602}, {'end': 18.929, 'text': "So I have a lot to do, so let's get into it.", 'start': 17.227, 'duration': 1.702}, {'end': 25.431, 'text': 'Okay, so on the left side of the screen I have a basic text editor and over on the right side of the screen I have HTML,', 'start': 19.827, 'duration': 5.604}, {'end': 27.892, 'text': "and I'm going to do a whole bunch of different things here.", 'start': 25.431, 'duration': 2.461}, {'end': 30.914, 'text': "Let's just start off by editing my body tag.", 'start': 28.072, 'duration': 2.842}], 'summary': 'Addressing 50 css questions, providing solutions, and demonstrating code editing.', 'duration': 30.785, 'max_score': 0.129, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ129.jpg'}, {'end': 62.401, 'src': 'embed', 'start': 31.034, 'weight': 1, 'content': [{'end': 39.339, 'text': 'Now very often it is very useful to use the EM unit sizing for our text and just about everything else because it scales so nicely.', 'start': 31.034, 'duration': 8.305}, {'end': 43.482, 'text': "The only problem is is the EM sort of don't make sense.", 'start': 39.5, 'duration': 3.982}, {'end': 46.364, 'text': "I'm going to show you a really easy way for them to make sense.", 'start': 43.502, 'duration': 2.862}, {'end': 52.41, 'text': "What we're going to do is come in here and define our font size as 62.5%.", 'start': 46.544, 'duration': 5.866}, {'end': 62.401, 'text': "Now, if you don't remember, basically whenever we use EMs document-wide, all of your sizing is going to be based off of the root level font size.", 'start': 52.41, 'duration': 9.991}], 'summary': 'Using 62.5% font size sets root level for scalable em unit sizing.', 'duration': 31.367, 'max_score': 31.034, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ31034.jpg'}, {'end': 235.466, 'src': 'embed', 'start': 207.458, 'weight': 3, 'content': [{'end': 210.699, 'text': "Now let's get back inside of here and do a couple more styling with our body.", 'start': 207.458, 'duration': 3.241}, {'end': 213.88, 'text': "And let's say that we want to create a gradient background.", 'start': 211.059, 'duration': 2.821}, {'end': 217.581, 'text': "Well, in this situation, we're going to have to do some cross browser stuff.", 'start': 214.04, 'duration': 3.541}, {'end': 221.142, 'text': "And in this situation, I'm going to use the linear gradient layout.", 'start': 217.821, 'duration': 3.321}, {'end': 228.264, 'text': "And you can see it right there and exactly all the different ways we're going to have to use or define for this to be cross browser.", 'start': 221.282, 'duration': 6.982}, {'end': 232.245, 'text': 'And you can see I just want to start the gradient at the top of the screen, go downwards.', 'start': 228.464, 'duration': 3.781}, {'end': 235.466, 'text': "And we're going to start off with black and then fade to gray.", 'start': 232.465, 'duration': 3.001}], 'summary': 'Styling the body with a cross-browser linear gradient layout from black to gray.', 'duration': 28.008, 'max_score': 207.458, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ207458.jpg'}, {'end': 301.393, 'src': 'embed', 'start': 276.325, 'weight': 5, 'content': [{'end': 282.307, 'text': "Remember, we're trying to make a background that is going to automatically scale as the browser window scales.", 'start': 276.325, 'duration': 5.982}, {'end': 287.249, 'text': "I'm also going to come in and make a background attachment and make this fixed.", 'start': 282.327, 'duration': 4.922}, {'end': 292.21, 'text': "Then we're going to have to do another CSS3 trick here and make it cross browser.", 'start': 287.589, 'duration': 4.621}, {'end': 295.991, 'text': "And what we're going to be using is background size with the default set for cover.", 'start': 292.23, 'duration': 3.761}, {'end': 301.393, 'text': 'And now you can see as the background or the browser window scales, so does your background image.', 'start': 296.311, 'duration': 5.082}], 'summary': 'Creating a scalable background using css3 tricks for cross-browser compatibility.', 'duration': 25.068, 'max_score': 276.325, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ276325.jpg'}, {'end': 337.07, 'src': 'embed', 'start': 312.919, 'weight': 2, 'content': [{'end': 319.003, 'text': "and to do that we use star, and then we're just going to say margin and zero and padding and zero.", 'start': 312.919, 'duration': 6.084}, {'end': 330.548, 'text': 'another thing that is very useful to be able to do is to include all of your padding and your margins inside of the width and height that you define for all of your elements and to do that document wide.', 'start': 319.003, 'duration': 11.545}, {'end': 337.07, 'text': "you're also going to do that after the star, which once again is going to focus on every single element, the whole entire document wide,", 'start': 330.548, 'duration': 6.522}], 'summary': 'Using star to set margin and padding to zero, and including padding and margins inside defined width and height for every element in the document.', 'duration': 24.151, 'max_score': 312.919, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ312919.jpg'}, {'end': 387.93, 'src': 'embed', 'start': 361.115, 'weight': 4, 'content': [{'end': 366.957, 'text': "Let's say you wanted to place a non-repeating background, and we're going to do it in the wrapper in this situation.", 'start': 361.115, 'duration': 5.842}, {'end': 368.917, 'text': "So let's put two of them down.", 'start': 367.237, 'duration': 1.68}, {'end': 376.959, 'text': "So we're going to go background and image, and I'm going to do URL, flower, background, and this is a ping file as well.", 'start': 368.997, 'duration': 7.962}, {'end': 383.1, 'text': "We have to remember it's going to, by default, repeat both horizontally as well as vertically.", 'start': 377.139, 'duration': 5.961}, {'end': 387.93, 'text': "So if we wanted to do something different, we're going to have to say in this situation, we're going to say no repeat.", 'start': 383.447, 'duration': 4.483}], 'summary': "Placing a non-repeating background image in the wrapper using url 'flower_background.ping', defaulting to repeat horizontally and vertically, but can be set to no repeat.", 'duration': 26.815, 'max_score': 361.115, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ361115.jpg'}], 'start': 0.129, 'title': 'Css faqs, solutions, and styling techniques', 'summary': 'Provides solutions to 50 common css questions, including using em unit sizing, setting background images to repeat, and creating fixed backgrounds during scrolling. it also covers various css styling techniques including setting wrapper styles, creating gradient background, using scalable background image, setting default margins and paddings, and placing non-repeating background images.', 'chapters': [{'end': 153.888, 'start': 0.129, 'title': 'Css faqs and solutions', 'summary': 'Provides solutions to 50 common css questions, including using em unit sizing, setting background images to repeat, and creating fixed backgrounds during scrolling.', 'duration': 153.759, 'highlights': ['The chapter provides solutions to 50 common CSS questions, including using EM unit sizing, setting background images to repeat, and creating fixed backgrounds during scrolling.', 'The EM unit sizing is set to 62.5% to make calculations easier, allowing 1.6 EM to be equivalent to 16 pixels, a common way to style fonts.', 'The tutorial demonstrates setting margins and padding to 0 for the body, solving common problems when styling elements.', "A background image is used with the 'repeat' property to create a repeating pattern, providing a simple solution for this common query.", 'The method for creating a fixed background during scrolling is shown, allowing the background to remain static while the content scrolls.']}, {'end': 445.146, 'start': 154.028, 'title': 'Css styling techniques', 'summary': 'Covers various css styling techniques including setting wrapper styles, creating gradient background, using scalable background image, setting default margins and paddings, and placing non-repeating background images.', 'duration': 291.118, 'highlights': ['Setting default margins and paddings for all elements to zero using star and defining margins and paddings inside the width and height of elements using box sizing with border box. By setting default margins and paddings to zero and defining them inside the width and height, it helps in avoiding overloading and maintains consistency in the layout.', 'Creating a gradient background using linear gradient layout and ensuring cross-browser compatibility. Demonstrating the use of linear gradient layout to create a gradient background and ensuring cross-browser compatibility for consistent display.', 'Placing non-repeating background images in different positions within the wrapper using background image and background position properties. Illustrating the technique of placing non-repeating background images in different positions within the wrapper using background image and background position properties.', 'Using a scalable background image and ensuring it automatically scales as the browser window scales by setting background size to cover and using cross-browser compatibility. Showcasing the method of using a scalable background image that automatically scales with the browser window using background size cover and ensuring cross-browser compatibility.', 'Styling the wrapper to define fixed width, height, and non-scrollable background, and demonstrating future adjustments for a fluid layout. Demonstrating the initial styling of the wrapper with fixed width, height, and non-scrollable background, and hinting at future adjustments for a fluid layout.']}], 'duration': 445.017, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ129.jpg', 'highlights': ['The chapter provides solutions to 50 common CSS questions, including using EM unit sizing, setting background images to repeat, and creating fixed backgrounds during scrolling.', 'The EM unit sizing is set to 62.5% to make calculations easier, allowing 1.6 EM to be equivalent to 16 pixels, a common way to style fonts.', 'Setting default margins and paddings for all elements to zero using star and defining margins and paddings inside the width and height of elements using box sizing with border box.', 'Creating a gradient background using linear gradient layout and ensuring cross-browser compatibility.', 'Placing non-repeating background images in different positions within the wrapper using background image and background position properties.', 'Using a scalable background image and ensuring it automatically scales as the browser window scales by setting background size to cover and using cross-browser compatibility.']}, {'end': 763.387, 'segs': [{'end': 489.172, 'src': 'embed', 'start': 462.395, 'weight': 0, 'content': [{'end': 466.758, 'text': "now there's multiple different ones i like to use, but let's say we want to use google fonts.", 'start': 462.395, 'duration': 4.363}, {'end': 473.503, 'text': 'in this situation, you can just type in google web fonts and google has a ton of different fonts that are all free.', 'start': 466.758, 'duration': 6.745}, {'end': 477.026, 'text': 'another option is font squirrel, but you have to pay for those fonts.', 'start': 473.503, 'duration': 3.523}, {'end': 478.446, 'text': "so i I'm kind of cheap.", 'start': 477.026, 'duration': 1.42}, {'end': 482.728, 'text': "so I just like to use whatever I want to use, and let's come in here and let's first off.", 'start': 478.446, 'duration': 4.282}, {'end': 483.609, 'text': "let's specifically.", 'start': 482.728, 'duration': 0.881}, {'end': 486.07, 'text': 'one of the very popular ones is called lobster.', 'start': 483.609, 'duration': 2.461}, {'end': 489.172, 'text': "so let's just say lobster, and there's lobster right there.", 'start': 486.07, 'duration': 3.102}], 'summary': "Google fonts offers a variety of free fonts, like the popular 'lobster'.", 'duration': 26.777, 'max_score': 462.395, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ462395.jpg'}, {'end': 579.085, 'src': 'embed', 'start': 522.827, 'weight': 1, 'content': [{'end': 525.887, 'text': "You're going to use font family, lobster, or cursive.", 'start': 522.827, 'duration': 3.06}, {'end': 526.868, 'text': 'Copy that.', 'start': 526.268, 'duration': 0.6}, {'end': 528.048, 'text': 'Jump back over here.', 'start': 527.188, 'duration': 0.86}, {'end': 530.748, 'text': 'paste that in and reload it and you can see,', 'start': 528.387, 'duration': 2.361}, {'end': 535.509, 'text': "now you have a funky type of cool looking font right there that you're going to be automatically able to use,", 'start': 530.748, 'duration': 4.761}, {'end': 537.45, 'text': "and of course it's from google and it's free.", 'start': 535.509, 'duration': 1.941}, {'end': 538.57, 'text': 'so thank you, google.', 'start': 537.45, 'duration': 1.12}, {'end': 541.771, 'text': "another thing that's very common is that we want to use our links.", 'start': 538.57, 'duration': 3.201}, {'end': 550.134, 'text': "however, we want to use them, and very often we do not want underlines with our links, and i'm sure many people know how to do this a and visited,", 'start': 541.771, 'duration': 8.363}, {'end': 553.656, 'text': "and then you're just going to say text decoration, none.", 'start': 550.134, 'duration': 3.522}, {'end': 556.92, 'text': "that's going to get rid of any underlines you have in your links.", 'start': 553.656, 'duration': 3.264}, {'end': 561.285, 'text': 'another thing you might want to do, however, is highlight the links anytime somebody hovers over them,', 'start': 556.92, 'duration': 4.365}, {'end': 567.192, 'text': 'and to do that we can just go hover and background color and reload it, and you can see that line went away.', 'start': 561.285, 'duration': 5.907}, {'end': 572.459, 'text': 'but if we put our mouse over top of our link, you can see that it automatically has that different background, which is kind of cool.', 'start': 567.192, 'duration': 5.267}, {'end': 575.021, 'text': "So now let's go in here and style our header section.", 'start': 572.679, 'duration': 2.342}, {'end': 577.864, 'text': "And of course, we're going to be able to use these tags multiple times.", 'start': 575.081, 'duration': 2.783}, {'end': 579.085, 'text': 'So I have an H1 tag there.', 'start': 577.884, 'duration': 1.201}], 'summary': 'Styling web content using google font family and removing underlines from links, with an added hover effect.', 'duration': 56.258, 'max_score': 522.827, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ522827.jpg'}, {'end': 632.702, 'src': 'embed', 'start': 601.808, 'weight': 5, 'content': [{'end': 603.09, 'text': "now there's a text shadow on there.", 'start': 601.808, 'duration': 1.282}, {'end': 603.971, 'text': 'it looks kind of cool.', 'start': 603.09, 'duration': 0.881}, {'end': 611.317, 'text': "we could then come in and let's style these paragraphs a little bit and let's give them a margin of 10 pixels.", 'start': 603.971, 'duration': 7.346}, {'end': 612.938, 'text': 'you see, they spread out a little bit.', 'start': 611.317, 'duration': 1.621}, {'end': 620.219, 'text': "let's also say that i want to then come in and remove the margin for a paragraph if it follows an h1.", 'start': 612.938, 'duration': 7.281}, {'end': 628.281, 'text': "to do that, look for an h1 and a paragraph and then we could change our margin top to zero if you'd like to indent text.", 'start': 620.219, 'duration': 8.062}, {'end': 632.702, 'text': 'so the first paragraph i hear has a class of first p.', 'start': 628.281, 'duration': 4.421}], 'summary': "Styling paragraphs with 10px margin, removing margin for p after h1, and targeting specific class 'first p'.", 'duration': 30.894, 'max_score': 601.808, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ601808.jpg'}, {'end': 661.728, 'src': 'embed', 'start': 640.357, 'weight': 7, 'content': [{'end': 650.201, 'text': 'Just type in first P, like this, and padding, left, and then 4.em or 1.4em, and you can see that indented.', 'start': 640.357, 'duration': 9.844}, {'end': 653.783, 'text': "So I'm just rocketing through all the different ways of doing all these things.", 'start': 650.421, 'duration': 3.362}, {'end': 656.564, 'text': "Let's say you also want to enlarge the first letter of a paragraph.", 'start': 653.823, 'duration': 2.741}, {'end': 661.728, 'text': "Let's say in this situation I want to enlarge the first letter of my fourth paragraph.", 'start': 656.744, 'duration': 4.984}], 'summary': 'Demonstrating text formatting with css, including indentation and first letter enlargement.', 'duration': 21.371, 'max_score': 640.357, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ640357.jpg'}, {'end': 715.068, 'src': 'embed', 'start': 685.833, 'weight': 11, 'content': [{'end': 688.393, 'text': 'and the reason why it fits inside of there is because of the float.', 'start': 685.833, 'duration': 2.56}, {'end': 692.076, 'text': "now let's go in here and fix my dog pic, This little cute dog, up here.", 'start': 688.393, 'duration': 3.683}, {'end': 694.338, 'text': 'Gonna focus in on this guy again.', 'start': 692.276, 'duration': 2.062}, {'end': 695.159, 'text': 'Dog pic.', 'start': 694.639, 'duration': 0.52}, {'end': 696.941, 'text': "Let's throw a border on him.", 'start': 695.359, 'duration': 1.582}, {'end': 700.025, 'text': 'You can throw borders on pretty much anything.', 'start': 698.022, 'duration': 2.003}, {'end': 701.286, 'text': 'So solid.', 'start': 700.285, 'duration': 1.001}, {'end': 704.45, 'text': "And let's just make it black just for simplistic reasons.", 'start': 701.767, 'duration': 2.683}, {'end': 707.774, 'text': "Let's also throw a margin in there of 10 pixels.", 'start': 705.031, 'duration': 2.743}, {'end': 710.657, 'text': "And the reason why is we're gonna float that to the left.", 'start': 708.194, 'duration': 2.463}, {'end': 715.068, 'text': 'so that it works seamlessly with all the text, but also has some shape there.', 'start': 711.147, 'duration': 3.921}], 'summary': 'Applying a black border and 10-pixel margin to a dog picture for seamless integration with text.', 'duration': 29.235, 'max_score': 685.833, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ685833.jpg'}, {'end': 763.387, 'src': 'embed', 'start': 726.77, 'weight': 8, 'content': [{'end': 731.791, 'text': "And just like before, we're going to say how much we want it to move horizontally and vertically.", 'start': 726.77, 'duration': 5.021}, {'end': 733.711, 'text': 'And this is going to be the blur amount.', 'start': 732.031, 'duration': 1.68}, {'end': 735.772, 'text': 'And this is going to be the size of the shadow.', 'start': 733.911, 'duration': 1.861}, {'end': 737.832, 'text': 'And this is going to be the color of the shadow.', 'start': 736.012, 'duration': 1.82}, {'end': 741.014, 'text': "And you can see that's just how easy it is to add a little box shadow.", 'start': 738.112, 'duration': 2.902}, {'end': 744.877, 'text': 'Say we also want to come in here and round the corners of this box.', 'start': 741.395, 'duration': 3.482}, {'end': 748.26, 'text': 'Again, this is a cross browser way of changing the border radius.', 'start': 745.138, 'duration': 3.122}, {'end': 751.262, 'text': "And we're going to change that radius by 10 pixels.", 'start': 748.48, 'duration': 2.782}, {'end': 752.123, 'text': 'Reload it.', 'start': 751.643, 'duration': 0.48}, {'end': 753.324, 'text': "Now you can see it's rounded.", 'start': 752.203, 'duration': 1.121}, {'end': 756.126, 'text': "And then finally, let's say we want to rotate the image.", 'start': 753.604, 'duration': 2.522}, {'end': 757.886, 'text': 'again cross browser.', 'start': 756.486, 'duration': 1.4}, {'end': 763.387, 'text': "we're going to target using rotate and we're just going to rotate it three degrees and there you can see it's rotated three degrees.", 'start': 757.886, 'duration': 5.501}], 'summary': 'Demonstration of adding box shadow, rounding corners, and rotating images with specific pixel and degree values.', 'duration': 36.617, 'max_score': 726.77, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ726770.jpg'}], 'start': 445.146, 'title': 'Customizing web design elements', 'summary': 'Covers customizing fonts, opacity, and using google fonts and paid fonts in web design, along with css techniques for styling html elements such as links, text, margins, padding, and first letters. it also explains how to style images and elements using css, including borders, margins, drop shadows, rounded corners, rotation, and ensuring cross-browser compatibility and simplicity.', 'chapters': [{'end': 541.771, 'start': 445.146, 'title': 'Customizing fonts and opacity in web design', 'summary': 'Discusses how to easily change opacity for the wrapper and use custom fonts like google fonts in web design, alongside mentioning the option of paid fonts like font squirrel.', 'duration': 96.625, 'highlights': ['Google Fonts offers a variety of free fonts that can be easily integrated into web design. Google Fonts provides a wide range of free fonts for web design, offering users the ability to easily incorporate them into their projects.', "Demonstration of using the 'Lobster' font from Google Fonts and integrating it into the HTML and CSS code. The process of accessing and implementing the 'Lobster' font from Google Fonts into web design is demonstrated, showcasing how to incorporate it into both HTML and CSS code for a unique and visually appealing font style.", 'Mention of Font Squirrel as an alternative for custom fonts, though it requires payment. The mention of Font Squirrel as an alternative source for custom fonts is made, highlighting that while it offers a variety of options, it involves a payment for the fonts, contrasting with the freely available Google Fonts.']}, {'end': 685.833, 'start': 541.771, 'title': 'Styling html elements', 'summary': 'Demonstrates various css techniques for styling html elements, including removing underlines from links, adding hover effects, applying text shadows, adjusting margins and padding, and enlarging the first letter of a paragraph.', 'duration': 144.062, 'highlights': ["Removing underlines from links The speaker explains how to remove underlines from links using the 'text-decoration: none' property.", 'Applying hover effects to links The speaker demonstrates adding a hover effect to links by changing the background color, enhancing user experience.', 'Applying text shadows to headers The speaker illustrates the process of applying text shadows to headers, enhancing their visual appeal.', 'Adjusting margins and padding for paragraphs The speaker explains the process of adjusting margins and padding for paragraphs to control their spacing and appearance.', 'Enlarging the first letter of a paragraph The speaker demonstrates enlarging the first letter of a specific paragraph using CSS properties, improving its visual impact.']}, {'end': 763.387, 'start': 685.833, 'title': 'Styling images and elements', 'summary': 'Discusses styling images and elements using css, including adding borders, margins, drop shadows, rounded corners, and rotation to an image, emphasizing cross-browser compatibility and simplicity.', 'duration': 77.554, 'highlights': ['Adding drop shadow using box shadow with horizontal and vertical movement, blur amount, and shadow size specified, ensuring cross-browser compatibility. Box shadow used to add a drop shadow to the image, specifying the horizontal and vertical movement, blur amount, shadow size, and color.', 'Rounding the corners of the image using a cross-browser method with a radius of 10 pixels. Cross-browser method used to round the corners of the image with a specified radius of 10 pixels.', 'Rotating the image using a cross-browser method to rotate it by three degrees. Cross-browser method used to rotate the image by three degrees.', 'Adding a border to the image, specifying a black color and a margin of 10 pixels, while ensuring it seamlessly works with the text. A black border and a margin of 10 pixels added to the image to seamlessly integrate with the text.']}], 'duration': 318.241, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ445146.jpg', 'highlights': ['Google Fonts provides a wide range of free fonts for web design, offering users the ability to easily incorporate them into their projects.', "Demonstration of using the 'Lobster' font from Google Fonts and integrating it into the HTML and CSS code.", 'Mention of Font Squirrel as an alternative for custom fonts, though it requires payment.', "Removing underlines from links using the 'text-decoration: none' property.", 'Applying hover effects to links by changing the background color, enhancing user experience.', 'Applying text shadows to headers to enhance their visual appeal.', 'Adjusting margins and padding for paragraphs to control their spacing and appearance.', 'Enlarging the first letter of a paragraph using CSS properties to improve its visual impact.', 'Box shadow used to add a drop shadow to the image, specifying the horizontal and vertical movement, blur amount, shadow size, and color.', 'Cross-browser method used to round the corners of the image with a specified radius of 10 pixels.', 'Cross-browser method used to rotate the image by three degrees.', 'A black border and a margin of 10 pixels added to the image to seamlessly integrate with the text.']}, {'end': 1007.565, 'segs': [{'end': 860.643, 'src': 'embed', 'start': 797.54, 'weight': 0, 'content': [{'end': 805.245, 'text': 'And if we want to remove the list indents, which can be unsightly, we can just go list style type and change that to none.', 'start': 797.54, 'duration': 7.705}, {'end': 808.627, 'text': "And we're going to have to also change our padding left.", 'start': 805.645, 'duration': 2.982}, {'end': 812.91, 'text': "Let's make that 20 pixels and then remove the margin left.", 'start': 808.827, 'duration': 4.083}, {'end': 816.418, 'text': "automatically, and we'll change that to zero.", 'start': 813.737, 'duration': 2.681}, {'end': 820.339, 'text': 'Boink Now you have little cute little icons there instead of ugly bullets.', 'start': 816.658, 'duration': 3.681}, {'end': 823.88, 'text': "And you can play around with the margins and have that line up however you'd like.", 'start': 820.699, 'duration': 3.181}, {'end': 829.182, 'text': 'If you would then want to have all of your list items instead displayed horizontally.', 'start': 824.1, 'duration': 5.082}, {'end': 830.462, 'text': 'these are called notices.', 'start': 829.182, 'duration': 1.28}, {'end': 832.083, 'text': "that's the name of this class.", 'start': 830.462, 'duration': 1.621}, {'end': 840.148, 'text': 'we would then target list items like this and then display inline reload and now you can see they line up horizontally.', 'start': 832.083, 'duration': 8.065}, {'end': 841.669, 'text': 'it got rid of the bullets and all that.', 'start': 840.148, 'duration': 1.521}, {'end': 845.512, 'text': 'but here is the list items right there, all horizontally set up.', 'start': 841.669, 'duration': 3.843}, {'end': 847.133, 'text': "and now let's mess around with tables.", 'start': 845.512, 'duration': 1.621}, {'end': 851.296, 'text': 'so we have this table down here that has all kinds of football statistics inside of it.', 'start': 847.133, 'duration': 4.163}, {'end': 852.737, 'text': "I'm gonna style that guy up.", 'start': 851.296, 'duration': 1.441}, {'end': 857.06, 'text': "first thing I'm gonna do is target the table as a whole and I'm gonna define that.", 'start': 852.737, 'duration': 4.323}, {'end': 860.643, 'text': 'I want my caption, which by default goes at the top.', 'start': 857.06, 'duration': 3.583}], 'summary': 'Styling list items to remove indents and change display, and styling a table with football statistics.', 'duration': 63.103, 'max_score': 797.54, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ797540.jpg'}, {'end': 990.778, 'src': 'embed', 'start': 948.429, 'weight': 4, 'content': [{'end': 949.929, 'text': 'Coming together, looking a little bit nicer.', 'start': 948.429, 'duration': 1.5}, {'end': 953.851, 'text': "Now let's come in and style our table headings specifically.", 'start': 950.209, 'duration': 3.642}, {'end': 957.72, 'text': 'Change our font weight to bold so that they show up a little bit nicer.', 'start': 954.178, 'duration': 3.542}, {'end': 961.722, 'text': 'Change our padding to the same 0.3em.', 'start': 958.04, 'duration': 3.682}, {'end': 969.046, 'text': "Let's give them a different background color, a little bit darker color, and let's change our text color to white so that it shows up nice.", 'start': 961.962, 'duration': 7.084}, {'end': 970.387, 'text': 'Boom, coming together.', 'start': 969.307, 'duration': 1.08}, {'end': 973.589, 'text': "All right, so let's go in here and change a couple other different things.", 'start': 970.687, 'duration': 2.902}, {'end': 978.895, 'text': "Let's say we want to alternate the colors on our table rows, a very common thing people like to do.", 'start': 973.953, 'duration': 4.942}, {'end': 982.476, 'text': 'We can just go TR and then go nth child.', 'start': 979.175, 'duration': 3.301}, {'end': 985.437, 'text': "And let's say we want to do styling on the odds.", 'start': 983.016, 'duration': 2.421}, {'end': 988.958, 'text': 'You could also put even inside of there to get the absolute opposite results.', 'start': 985.457, 'duration': 3.501}, {'end': 990.778, 'text': 'And then you just go background color.', 'start': 989.238, 'duration': 1.54}], 'summary': 'Styling table headings with bold font, padding, background color, and text color for improved appearance.', 'duration': 42.349, 'max_score': 948.429, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ948429.jpg'}], 'start': 763.387, 'title': 'Working with images and styling football statistics table', 'summary': 'Explores using images in list items and styling a football statistics table, offering practical tips for creating visually enhanced and organized web content. it demonstrates modifying list styles, displaying list items horizontally, changing caption position, setting table dimensions, adding borders, styling table columns and headings, and alternating row colors.', 'chapters': [{'end': 841.669, 'start': 763.387, 'title': 'Working with images in lists', 'summary': 'Explores using images in list items, modifying list styles, and displaying list items horizontally, offering practical tips for creating visually enhanced and organized web content.', 'duration': 78.282, 'highlights': ["Using 'list-style-type' property to change bullets to images can enhance visual appeal and remove unsightly list indents.", 'Adjusting padding and margin properties can help customize the appearance of list items, e.g., setting padding-left to 20 pixels and margin-left to 0 can create a visually appealing layout.', "Utilizing 'display: inline' property for list items with the specified class can enable horizontal alignment and eliminate bullets, creating a visually organized content layout."]}, {'end': 1007.565, 'start': 841.669, 'title': 'Styling football statistics table', 'summary': 'Demonstrates how to style a football statistics table, including changing caption position, setting table dimensions, adding borders, styling table columns and headings, and alternating row colors.', 'duration': 165.896, 'highlights': ['Demonstrating how to style a football statistics table by changing caption position, setting table dimensions, and adding borders. Demonstrates changing caption position from top to bottom, setting table width to 600 pixels, adding a 1-pixel solid black border, and collapsing cell borders.', 'Styling table columns and headings by setting text alignment, padding, font weight, background color, and text color. Sets text alignment to center, adds padding, changes font weight to bold, sets a darker background color, and changes text color to white for table headings.', 'Demonstrating how to alternate the colors on table rows using nth child and background color. Shows how to style odd or even rows by changing the background color, and provides a source for selecting colors.']}], 'duration': 244.178, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ763387.jpg', 'highlights': ["Using 'list-style-type' property to change bullets to images can enhance visual appeal and remove unsightly list indents.", 'Adjusting padding and margin properties can help customize the appearance of list items, e.g., setting padding-left to 20 pixels and margin-left to 0 can create a visually appealing layout.', "Utilizing 'display: inline' property for list items with the specified class can enable horizontal alignment and eliminate bullets, creating a visually organized content layout.", 'Demonstrating how to style a football statistics table by changing caption position, setting table dimensions, and adding borders. Demonstrates changing caption position from top to bottom, setting table width to 600 pixels, adding a 1-pixel solid black border, and collapsing cell borders.', 'Styling table columns and headings by setting text alignment, padding, font weight, background color, and text color. Sets text alignment to center, adds padding, changes font weight to bold, sets a darker background color, and changes text color to white for table headings.', 'Demonstrating how to alternate the colors on table rows using nth child and background color. Shows how to style odd or even rows by changing the background color, and provides a source for selecting colors.']}, {'end': 1216.049, 'segs': [{'end': 1055.44, 'src': 'embed', 'start': 1025.376, 'weight': 0, 'content': [{'end': 1027.238, 'text': "And make changes only when it's hovered over.", 'start': 1025.376, 'duration': 1.862}, {'end': 1028.78, 'text': 'And background.', 'start': 1027.258, 'duration': 1.522}, {'end': 1034.265, 'text': "Color It's kind of neat to figure out what you can do and what things you can change whenever you're hovering over different things.", 'start': 1028.92, 'duration': 5.345}, {'end': 1037.209, 'text': "It's a nice little touch you don't often see on most websites.", 'start': 1034.566, 'duration': 2.643}, {'end': 1040.372, 'text': "And we can also change the color of the text if we'd like.", 'start': 1037.648, 'duration': 2.724}, {'end': 1043.874, 'text': 'and reload, and now, whenever we go over all these different rows,', 'start': 1040.672, 'duration': 3.202}, {'end': 1048.656, 'text': "we'll be able to really focus in and be able to read the information in the table a lot cooler.", 'start': 1043.874, 'duration': 4.782}, {'end': 1052.878, 'text': 'and you can see just these two little lines of text right here, and it adds a lot of functionality.', 'start': 1048.656, 'duration': 4.222}, {'end': 1055.44, 'text': "it's something you don't often see and it's really cool.", 'start': 1052.878, 'duration': 2.562}], 'summary': 'Hover changes enhance user experience. adds functionality to table.', 'duration': 30.064, 'max_score': 1025.376, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ1025376.jpg'}, {'end': 1126.442, 'src': 'embed', 'start': 1102.729, 'weight': 3, 'content': [{'end': 1109.772, 'text': "so let's add a little bit more uh width to all of our labels, so that they will all line up for themselves.", 'start': 1102.729, 'duration': 7.043}, {'end': 1115.012, 'text': "so let's go custom form And target the labels, which is the thing that's causing problems.", 'start': 1109.772, 'duration': 5.24}, {'end': 1120.356, 'text': 'You can see here the labels are butting up right next to the input fields and, you know, kind of a mess.', 'start': 1115.052, 'duration': 5.304}, {'end': 1121.157, 'text': "So let's fix that.", 'start': 1120.376, 'duration': 0.781}, {'end': 1123.059, 'text': 'Do a float left on those.', 'start': 1121.317, 'duration': 1.742}, {'end': 1124.92, 'text': 'And then define their width.', 'start': 1123.459, 'duration': 1.461}, {'end': 1126.442, 'text': "Let's make it 100 pixels.", 'start': 1125.281, 'duration': 1.161}], 'summary': 'Adjust label width to 100 pixels for alignment.', 'duration': 23.713, 'max_score': 1102.729, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ1102729.jpg'}, {'end': 1196.755, 'src': 'embed', 'start': 1170.46, 'weight': 5, 'content': [{'end': 1177.803, 'text': "Another thing that's kind of neat is to be able to really highlight the different parts of the form whenever they are accepting input and how you can do that.", 'start': 1170.46, 'duration': 7.343}, {'end': 1181.625, 'text': "Let's go to custom form, input, and use focus.", 'start': 1177.823, 'duration': 3.802}, {'end': 1185.507, 'text': "So anytime an input field has focus, we're going to change its background color.", 'start': 1181.965, 'duration': 3.542}, {'end': 1186.547, 'text': 'There, background color.', 'start': 1185.627, 'duration': 0.92}, {'end': 1190.31, 'text': 'and you can play around with this and pick a color that you think works best for you.', 'start': 1186.807, 'duration': 3.503}, {'end': 1196.755, 'text': "there we go just that one line of text and now, whenever you focus, you're going to see the background colors ever so slightly changes.", 'start': 1190.31, 'duration': 6.445}], 'summary': 'Demonstrating how to change background color of input fields when they have focus.', 'duration': 26.295, 'max_score': 1170.46, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ1170460.jpg'}, {'end': 1216.049, 'src': 'embed', 'start': 1206.522, 'weight': 4, 'content': [{'end': 1209.304, 'text': 'reload and now you can see the color change there as well.', 'start': 1206.522, 'duration': 2.782}, {'end': 1211.345, 'text': 'just little touches, little touches here and there.', 'start': 1209.304, 'duration': 2.041}, {'end': 1216.049, 'text': "that's. this whole tutorial is basically about just little tiny changes you can make that add a lot of functionality.", 'start': 1211.345, 'duration': 4.704}], 'summary': 'Tutorial focuses on making small changes for added functionality.', 'duration': 9.527, 'max_score': 1206.522, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ1206522.jpg'}], 'start': 1007.845, 'title': 'Interactive table hover effect and styling forms and tables', 'summary': 'Demonstrates an interactive hover effect on a table, enabling zoom and color change, improving user experience, as well as styling forms and tables with css properties like width, padding, and floating, resulting in a neater and more functional design.', 'chapters': [{'end': 1043.874, 'start': 1007.845, 'title': 'Interactive table hover effect', 'summary': 'Demonstrates an interactive hover effect on a table, enabling the user to zoom in and change color on hover, providing a unique user experience for data exploration.', 'duration': 36.029, 'highlights': ['Interactive zoom-in and color change on table row hover, enhancing user interaction with the data.', 'Ability to dynamically change the color of text on hover, adding visual appeal and customization to the table.', 'Experimentation with hover effects for enhanced user experience, showcasing unique design elements not commonly found on most websites.']}, {'end': 1216.049, 'start': 1043.874, 'title': 'Styling forms and tables', 'summary': 'Demonstrates how to style a form and table, improving functionality and aesthetics, with specific css properties such as width, padding, floating, and focus state, resulting in a neater and more functional design.', 'duration': 172.175, 'highlights': ['The tutorial emphasizes making small changes to add functionality, such as adjusting widths and padding, resulting in a more organized and aesthetically pleasing form.', 'Applying CSS properties like floating and defining widths to align labels and input fields enhances the visual appeal and organization of the form.', 'Utilizing the focus state to dynamically change background colors of input fields and text areas upon user interaction adds a subtle but effective visual feedback for improved user experience.']}], 'duration': 208.204, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ1007845.jpg', 'highlights': ['Interactive zoom-in and color change on table row hover, enhancing user interaction with the data.', 'Experimentation with hover effects for enhanced user experience, showcasing unique design elements not commonly found on most websites.', 'Ability to dynamically change the color of text on hover, adding visual appeal and customization to the table.', 'Applying CSS properties like floating and defining widths to align labels and input fields enhances the visual appeal and organization of the form.', 'The tutorial emphasizes making small changes to add functionality, such as adjusting widths and padding, resulting in a more organized and aesthetically pleasing form.', 'Utilizing the focus state to dynamically change background colors of input fields and text areas upon user interaction adds a subtle but effective visual feedback for improved user experience.']}, {'end': 1757.104, 'segs': [{'end': 1238.413, 'src': 'embed', 'start': 1216.297, 'weight': 1, 'content': [{'end': 1224.743, 'text': "now let's say that we want to come in here and let's just imagine this is a store or something like that and we want to float a discount offer up here on the right side of our screen.", 'start': 1216.297, 'duration': 8.446}, {'end': 1226.704, 'text': 'how might we go about doing that?', 'start': 1224.743, 'duration': 1.961}, {'end': 1229.326, 'text': 'and we can see here if we come way down there.', 'start': 1226.704, 'duration': 2.622}, {'end': 1230.707, 'text': 'it is div class.', 'start': 1229.326, 'duration': 1.381}, {'end': 1235.691, 'text': "discount is the name of the class and let's say we want to float 50 off with offer code sherlock.", 'start': 1230.707, 'duration': 4.984}, {'end': 1238.413, 'text': "okay, let's say we're selling sherlock holmes stuff here.", 'start': 1235.691, 'duration': 2.722}], 'summary': "Creating a 50% discount offer with code 'sherlock' for sherlock holmes merchandise on a website.", 'duration': 22.116, 'max_score': 1216.297, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ1216297.jpg'}, {'end': 1344.943, 'src': 'embed', 'start': 1321.265, 'weight': 0, 'content': [{'end': 1333.515, 'text': "so that means Whenever this is positioned absolutely this discount div that's inside of the wrapper it is going to be positioned absolutely relative to the wrapper that surrounds it.", 'start': 1321.265, 'duration': 12.25}, {'end': 1334.175, 'text': 'Reload it.', 'start': 1333.715, 'duration': 0.46}, {'end': 1338.899, 'text': "Boom Now you're going to see, whenever we resize it, it is not moving around.", 'start': 1334.416, 'duration': 4.483}, {'end': 1341.321, 'text': 'It is going to stay exactly where it is.', 'start': 1339.179, 'duration': 2.142}, {'end': 1342.202, 'text': 'So kind of cool.', 'start': 1341.661, 'duration': 0.541}, {'end': 1343.503, 'text': 'We could also come in here.', 'start': 1342.462, 'duration': 1.041}, {'end': 1344.943, 'text': 'Now, you would never do this.', 'start': 1343.942, 'duration': 1.001}], 'summary': 'Positioning discount div within wrapper prevents movement on resizing.', 'duration': 23.678, 'max_score': 1321.265, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ1321265.jpg'}, {'end': 1385.856, 'src': 'embed', 'start': 1360.234, 'weight': 2, 'content': [{'end': 1364.697, 'text': "You're probably wondering down here in this HTML what are all these puppy pictures and what am I going to do with them?", 'start': 1360.234, 'duration': 4.463}, {'end': 1367.339, 'text': "Well, what I'm going to do is I'm going to turn them into a gallery.", 'start': 1364.957, 'duration': 2.382}, {'end': 1371.962, 'text': 'So the name of these puppy pictures or what surrounds them is gallery.', 'start': 1367.559, 'duration': 4.403}, {'end': 1376.164, 'text': "can see right here ul class gallery and they're in an unordered list.", 'start': 1372.278, 'duration': 3.886}, {'end': 1379.61, 'text': 'so i can target them by going ul gallery like this.', 'start': 1376.164, 'duration': 3.446}, {'end': 1385.856, 'text': 'we of course want to eliminate all of our bullets, and to do that we go list style and none there are.', 'start': 1379.61, 'duration': 6.246}], 'summary': 'Converting puppy pictures into a gallery using html and ul class, eliminating bullets with list style none.', 'duration': 25.622, 'max_score': 1360.234, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ1360234.jpg'}, {'end': 1465.53, 'src': 'embed', 'start': 1439.619, 'weight': 3, 'content': [{'end': 1444.002, 'text': 'So if we want to have our elements act like inline elements,', 'start': 1439.619, 'duration': 4.383}, {'end': 1449.564, 'text': "meaning there's not going to be a new line so that we can have our gallery items all lined up right after another.", 'start': 1444.002, 'duration': 5.562}, {'end': 1454.166, 'text': 'however, we also want to come in and be able to style the margins and paddings and heights.', 'start': 1449.564, 'duration': 4.602}, {'end': 1455.647, 'text': 'what we use is inline block.', 'start': 1454.166, 'duration': 1.481}, {'end': 1457.908, 'text': 'we can then position them relative,', 'start': 1455.647, 'duration': 2.261}, {'end': 1465.53, 'text': "and what we're doing with this is we're going to set it up this way so that i can position the spans like eating stick and all these.", 'start': 1457.908, 'duration': 7.622}], 'summary': 'Using inline-block allows elements to act inline while styling margins, paddings, and heights.', 'duration': 25.911, 'max_score': 1439.619, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ1439619.jpg'}, {'end': 1605.472, 'src': 'heatmap', 'start': 1557.225, 'weight': 1, 'content': [{'end': 1565.335, 'text': 'so that means the span by default is going to be off the screen and then what we can do is go ul gallery and whenever the list items are hovered over,', 'start': 1557.225, 'duration': 8.11}, {'end': 1567.257, 'text': 'we want to target our span.', 'start': 1565.335, 'duration': 1.922}, {'end': 1572.409, 'text': 'that is there and move the margin left to zero and boom And everything lines up.', 'start': 1567.257, 'duration': 5.152}, {'end': 1573.27, 'text': 'And you can see.', 'start': 1572.669, 'duration': 0.601}, {'end': 1574.771, 'text': 'And have a little bit of a bug.', 'start': 1573.69, 'duration': 1.081}, {'end': 1576.572, 'text': 'Make sure that we spell everything right.', 'start': 1575.011, 'duration': 1.561}, {'end': 1577.533, 'text': 'There is position.', 'start': 1576.592, 'duration': 0.941}, {'end': 1578.614, 'text': 'And reload.', 'start': 1578.093, 'duration': 0.521}, {'end': 1579.595, 'text': 'And now you can see.', 'start': 1578.874, 'duration': 0.721}, {'end': 1584.839, 'text': 'Whenever we put our mouse over top of the image, the little span pops up there and gives us more information on the image.', 'start': 1579.635, 'duration': 5.204}, {'end': 1587.561, 'text': "So there's a whole bunch of different things we can do.", 'start': 1584.859, 'duration': 2.702}, {'end': 1588.862, 'text': 'Tricks with CSS.', 'start': 1587.661, 'duration': 1.201}, {'end': 1591.464, 'text': "Now what I'm going to do is focus in on layouts.", 'start': 1588.962, 'duration': 2.502}, {'end': 1594.767, 'text': 'And how to set up a two column layout as well as a three column layout.', 'start': 1591.725, 'duration': 3.042}, {'end': 1599.583, 'text': 'Okay, so you see here I have a basic little bit of HTML.', 'start': 1595.717, 'duration': 3.866}, {'end': 1605.472, 'text': "And what I'm going to do is style this into a two column layout and then show you how easy it is to transfer it into a three column layout.", 'start': 1599.623, 'duration': 5.849}], 'summary': 'Css tricks for image info display and setting up two/three column layout', 'duration': 48.247, 'max_score': 1557.225, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ1557225.jpg'}, {'end': 1614.623, 'src': 'embed', 'start': 1584.859, 'weight': 4, 'content': [{'end': 1587.561, 'text': "So there's a whole bunch of different things we can do.", 'start': 1584.859, 'duration': 2.702}, {'end': 1588.862, 'text': 'Tricks with CSS.', 'start': 1587.661, 'duration': 1.201}, {'end': 1591.464, 'text': "Now what I'm going to do is focus in on layouts.", 'start': 1588.962, 'duration': 2.502}, {'end': 1594.767, 'text': 'And how to set up a two column layout as well as a three column layout.', 'start': 1591.725, 'duration': 3.042}, {'end': 1599.583, 'text': 'Okay, so you see here I have a basic little bit of HTML.', 'start': 1595.717, 'duration': 3.866}, {'end': 1605.472, 'text': "And what I'm going to do is style this into a two column layout and then show you how easy it is to transfer it into a three column layout.", 'start': 1599.623, 'duration': 5.849}, {'end': 1607.195, 'text': "So I'm again going to come in here.", 'start': 1605.713, 'duration': 1.482}, {'end': 1614.623, 'text': "target every single thing on the screen and I'm going to set my margin to zero on that and my padding to zero on that.", 'start': 1607.78, 'duration': 6.843}], 'summary': 'Learn how to create two and three column layouts using css.', 'duration': 29.764, 'max_score': 1584.859, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ1584859.jpg'}], 'start': 1216.297, 'title': 'Web page discount offer and css gallery', 'summary': 'Demonstrates positioning discount offers on web pages using html and css and creating a css gallery for puppy pictures, covering two-column layouts and potential conversion to three-column layouts.', 'chapters': [{'end': 1359.933, 'start': 1216.297, 'title': 'Positioning discount offer on web page', 'summary': 'Demonstrates how to position a discount offer on a web page using html and css, ensuring it remains fixed and responsive to resizing.', 'duration': 143.636, 'highlights': ['Positioning the discount offer using absolute positioning relative to the viewport and fixing its position by setting the wrapper to relative positioning. The discount offer is positioned using absolute positioning relative to the viewport and its position is fixed by setting the wrapper to relative positioning, ensuring it remains fixed and responsive to resizing.', 'Styling the discount offer by changing its background color, adding a border, padding, and adjusting the font size. The discount offer is styled by changing its background color to white, adding a 4-pixel solid black border, 10 pixels padding, and adjusting the font size to 1.4 EM.']}, {'end': 1757.104, 'start': 1360.234, 'title': 'Css gallery and layouts', 'summary': 'Covers creating a css gallery for puppy pictures with inline block elements and spans, and then progresses to styling a two-column layout which can easily be converted into a three-column layout.', 'duration': 396.87, 'highlights': ["Creating a CSS gallery for puppy pictures The speaker discusses targeting and styling an unordered list to create a gallery for puppy pictures, using 'ul.gallery' and 'list-style: none' to eliminate bullets.", "Styling inline block elements and spans The speaker explains using 'display: inline-block' to line up gallery items and positioning spans absolutely on images for hover effects, setting the width to 250 pixels and height to 35 pixels.", 'Setting up a two-column layout The speaker demonstrates targeting the body, wrapper, and elements for a two-column layout, adjusting padding and font size to create a visually appealing design.']}], 'duration': 540.807, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ1216297.jpg', 'highlights': ['Positioning the discount offer using absolute positioning relative to the viewport and fixing its position by setting the wrapper to relative positioning.', 'Styling the discount offer by changing its background color, adding a border, padding, and adjusting the font size.', "Creating a CSS gallery for puppy pictures using 'ul.gallery' and 'list-style: none' to eliminate bullets.", "Styling inline block elements and spans using 'display: inline-block' to line up gallery items and positioning spans absolutely on images for hover effects.", 'Setting up a two-column layout by targeting the body, wrapper, and elements, adjusting padding and font size.']}, {'end': 1959.399, 'segs': [{'end': 1808.488, 'src': 'embed', 'start': 1778.101, 'weight': 0, 'content': [{'end': 1781.464, 'text': 'And then I have everything divided into sections for each one of these guys.', 'start': 1778.101, 'duration': 3.363}, {'end': 1783.306, 'text': "And there's going to be H2 tags.", 'start': 1781.724, 'duration': 1.582}, {'end': 1784.146, 'text': "There's going to be a picture.", 'start': 1783.326, 'duration': 0.82}, {'end': 1786.528, 'text': "There's going to be a couple paragraphs of information.", 'start': 1784.186, 'duration': 2.342}, {'end': 1788.47, 'text': "And then you can see there's another section there.", 'start': 1786.648, 'duration': 1.822}, {'end': 1792.873, 'text': 'So main is going to surround all of the actual articles on our web page.', 'start': 1788.85, 'duration': 4.023}, {'end': 1795.235, 'text': "So let's do a couple little things here.", 'start': 1793.173, 'duration': 2.062}, {'end': 1796.496, 'text': "Let's say padding.", 'start': 1795.415, 'duration': 1.081}, {'end': 1800.92, 'text': "and let's make this to em and position relative.", 'start': 1796.856, 'duration': 4.064}, {'end': 1804.203, 'text': "that means i'm going to be styling some things inside of here.", 'start': 1800.92, 'duration': 3.283}, {'end': 1808.488, 'text': "absolutely so let's save that and now you can see it fits better inside of the screen.", 'start': 1804.203, 'duration': 4.285}], 'summary': 'Web page divided into sections for each person, with h2 tags, picture, and paragraphs. styled with padding and position relative for better fit inside the screen.', 'duration': 30.387, 'max_score': 1778.101, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ1778101.jpg'}, {'end': 1901.492, 'src': 'embed', 'start': 1820.6, 'weight': 2, 'content': [{'end': 1821.941, 'text': 'I gave it two class names.', 'start': 1820.6, 'duration': 1.341}, {'end': 1824.484, 'text': 'So I have Mean Koala, so I can target it specifically.', 'start': 1821.961, 'duration': 2.523}, {'end': 1827.747, 'text': 'And then I have Art Image, so I can target all of my art images.', 'start': 1824.584, 'duration': 3.163}, {'end': 1831.03, 'text': "So I'm going to target Art Image, which is going to be both of those.", 'start': 1827.767, 'duration': 3.263}, {'end': 1834.713, 'text': "I'm going to float them to the left so that the text wraps around them.", 'start': 1831.23, 'duration': 3.483}, {'end': 1837.756, 'text': "And then I'm going to give them a margin of 10 pixels.", 'start': 1835.073, 'duration': 2.683}, {'end': 1840.478, 'text': 'You can see everything just snaps right together.', 'start': 1838.256, 'duration': 2.222}, {'end': 1842.4, 'text': "Let's go with our H2 tags.", 'start': 1840.618, 'duration': 1.782}, {'end': 1845.323, 'text': "Let's say that we want to add a little bit of a margin to those.", 'start': 1842.44, 'duration': 2.883}, {'end': 1848.435, 'text': 'that and margin bottom.', 'start': 1845.973, 'duration': 2.462}, {'end': 1858.021, 'text': "and let's go 10 pixels and let's also come in here, target that hr tag and give it a little bit more of a margin on the bottom.", 'start': 1848.435, 'duration': 9.586}, {'end': 1860.222, 'text': "let's say 10 pixels actually.", 'start': 1858.021, 'duration': 2.201}, {'end': 1864.305, 'text': "let's make this one em so that looks reload.", 'start': 1860.222, 'duration': 4.083}, {'end': 1866.426, 'text': "now i can see they're divided up a little bit better.", 'start': 1864.305, 'duration': 2.121}, {'end': 1871.289, 'text': "actually, for the hr tag i'm just going to target all the margins, so let's reload there.", 'start': 1866.426, 'duration': 4.863}, {'end': 1872.15, 'text': 'that looks a little bit nicer.', 'start': 1871.289, 'duration': 0.861}, {'end': 1874.959, 'text': "Now I'm going to target my vertical navigation.", 'start': 1872.438, 'duration': 2.521}, {'end': 1877.18, 'text': 'Bounce over into the HTML here again.', 'start': 1875.219, 'duration': 1.961}, {'end': 1879.081, 'text': 'Vertical navigation is down here.', 'start': 1877.44, 'duration': 1.641}, {'end': 1886.044, 'text': 'It is an unordered list that is in an aside, and this guy is going to go in my sidebar on the right side of the screen.', 'start': 1879.381, 'duration': 6.663}, {'end': 1887.125, 'text': "So let's target that.", 'start': 1886.265, 'duration': 0.86}, {'end': 1888.025, 'text': 'Vertical nav.', 'start': 1887.325, 'duration': 0.7}, {'end': 1890.787, 'text': "First, let's go and get list style type.", 'start': 1888.266, 'duration': 2.521}, {'end': 1894.148, 'text': "Set that to none so it doesn't have any of those ugly bullets on there.", 'start': 1890.927, 'duration': 3.221}, {'end': 1897.79, 'text': "And let's change our padding to zero pixels on all those.", 'start': 1894.569, 'duration': 3.221}, {'end': 1900.912, 'text': 'We want to target the individual list items now.', 'start': 1898.13, 'duration': 2.782}, {'end': 1901.492, 'text': 'We can go.', 'start': 1900.932, 'duration': 0.56}], 'summary': 'Styling classes mean koala and art image, adding margins, targeting h2 and hr tags, and styling vertical navigation.', 'duration': 80.892, 'max_score': 1820.6, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ1820600.jpg'}], 'start': 1757.104, 'title': 'Web page design basics and styling html elements and navigation', 'summary': 'Discusses making minor changes to web page design elements, like color and padding, resulting in dramatic visual effects, surrounded by h2 tags, pictures, and paragraphs. it also covers the process of styling html elements such as images, headers, horizontal rules, and vertical navigation, including setting classes, floating elements, adding margins, and adjusting styles for layout and presentation.', 'chapters': [{'end': 1796.496, 'start': 1757.104, 'title': 'Web page design basics', 'summary': 'Discusses making minor changes to web page design elements, like color and padding, resulting in dramatic visual effects, surrounded by h2 tags, pictures, and paragraphs.', 'duration': 39.392, 'highlights': ['The main part of the web page surrounds all of the article information, divided into sections for each content type, including H2 tags, pictures, and paragraphs.', 'Minor changes, such as adjusting color and padding, can lead to dramatic visual results on the web page.']}, {'end': 1959.399, 'start': 1796.856, 'title': 'Styling html elements and navigation', 'summary': 'Covers the process of styling html elements such as images, headers, horizontal rules, and vertical navigation, including setting classes, floating elements, adding margins, and adjusting styles for layout and presentation.', 'duration': 162.543, 'highlights': ['The process includes targeting and styling specific HTML elements such as images, headers, horizontal rules, and vertical navigation to improve layout and presentation.', "Setting specific class names to target individual elements, like giving the 'Mean Koala' image class names 'Mean Koala' and 'Art Image' for targeted styling.", 'Applying float property to elements to achieve text wrapping and adjusting margins to create a cohesive layout, such as floating images to the left and giving them a 10-pixel margin.', 'Styling headers and horizontal rules by adding margins to enhance their appearance, like adding a 10-pixel margin to H2 tags and setting a 10-pixel margin at the bottom of the hr tag.', 'Targeting and styling the vertical navigation, including setting list style type to none, adjusting padding, displaying list items as block elements, and applying borders to create a visually appealing presentation.']}], 'duration': 202.295, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ1757104.jpg', 'highlights': ['Minor changes, such as adjusting color and padding, can lead to dramatic visual results on the web page.', 'The main part of the web page surrounds all of the article information, divided into sections for each content type, including H2 tags, pictures, and paragraphs.', 'The process includes targeting and styling specific HTML elements such as images, headers, horizontal rules, and vertical navigation to improve layout and presentation.', 'Targeting and styling the vertical navigation, including setting list style type to none, adjusting padding, displaying list items as block elements, and applying borders to create a visually appealing presentation.', 'Applying float property to elements to achieve text wrapping and adjusting margins to create a cohesive layout, such as floating images to the left and giving them a 10-pixel margin.', "Setting specific class names to target individual elements, like giving the 'Mean Koala' image class names 'Mean Koala' and 'Art Image' for targeted styling.", 'Styling headers and horizontal rules by adding margins to enhance their appearance, like adding a 10-pixel margin to H2 tags and setting a 10-pixel margin at the bottom of the hr tag.']}, {'end': 2256.417, 'segs': [{'end': 1999.658, 'src': 'embed', 'start': 1975.871, 'weight': 2, 'content': [{'end': 1982.312, 'text': 'another thing we want to zero in on here is how exactly can we get the sidebar to stretch the whole way down to the bottom of the screen,', 'start': 1975.871, 'duration': 6.441}, {'end': 1983.753, 'text': "even though there's no content here?", 'start': 1982.312, 'duration': 1.441}, {'end': 1986.413, 'text': "well, there's a little trick we can do with our side.", 'start': 1983.753, 'duration': 2.66}, {'end': 1990.754, 'text': "we can go padding bottom and then pick an astronomical number that you know you won't go by.", 'start': 1986.413, 'duration': 4.341}, {'end': 1991.715, 'text': 'so 5, 000 pixels, for example.', 'start': 1990.754, 'duration': 0.961}, {'end': 1999.658, 'text': 'and and then what we do is we go margin bottom instead of the padding bottom like that and set it to negative.', 'start': 1991.715, 'duration': 7.943}], 'summary': 'To make the sidebar stretch to the bottom of the screen with no content, use a padding trick and set margin bottom to a negative value.', 'duration': 23.787, 'max_score': 1975.871, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ1975871.jpg'}, {'end': 2098.85, 'src': 'embed', 'start': 2071.735, 'weight': 0, 'content': [{'end': 2075.437, 'text': "so that it does exactly the same things as our header and there's our footer.", 'start': 2071.735, 'duration': 3.702}, {'end': 2079.159, 'text': 'so that is how we go and create a two column website.', 'start': 2075.437, 'duration': 3.722}, {'end': 2082.46, 'text': 'how hard is it to change this into a three column website?', 'start': 2079.159, 'duration': 3.301}, {'end': 2084.482, 'text': "well, it's actually going to be pretty simple.", 'start': 2082.46, 'duration': 2.022}, {'end': 2093.627, 'text': "I'm going to go into my HTML section and I'm going to come right here right after the header and if I want something to go on the left side of the screen,", 'start': 2084.482, 'duration': 9.145}, {'end': 2096.509, 'text': "so I'm going to have a left sidebar and a right sidebar, It's going to come in here.", 'start': 2093.627, 'duration': 2.882}, {'end': 2097.529, 'text': "I'm going to create a div.", 'start': 2096.748, 'duration': 0.781}, {'end': 2098.85, 'text': "I'm going to call it left nav.", 'start': 2097.549, 'duration': 1.301}], 'summary': 'Creating a three-column website is fairly simple by adding a left sidebar and right sidebar after the header in the html section.', 'duration': 27.115, 'max_score': 2071.735, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ2071735.jpg'}, {'end': 2139.806, 'src': 'embed', 'start': 2110.058, 'weight': 4, 'content': [{'end': 2114.481, 'text': 'So I just need to allow for space so that everything is going to fit in.', 'start': 2110.058, 'duration': 4.423}, {'end': 2119.025, 'text': "I'm going to target the left nav, which is the HTML that I just threw inside of there.", 'start': 2114.681, 'duration': 4.344}, {'end': 2122.167, 'text': "I'm going to define its width as 200 pixels.", 'start': 2119.285, 'duration': 2.882}, {'end': 2123.768, 'text': "So it's going to fit there on our screen.", 'start': 2122.467, 'duration': 1.301}, {'end': 2128.153, 'text': "I'm going to float it to the left side of the screen because it's going to be my left sidebar.", 'start': 2124.048, 'duration': 4.105}, {'end': 2134.3, 'text': "Let's go and give it the same background as well as list style and padding as this guy right here.", 'start': 2128.333, 'duration': 5.967}, {'end': 2139.806, 'text': 'So background color and I want this and I want the padding so that it goes the whole way down the screen.', 'start': 2134.64, 'duration': 5.166}], 'summary': 'Adjusting left nav to 200px width, floating it left, matching background and padding.', 'duration': 29.748, 'max_score': 2110.058, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ2110058.jpg'}, {'end': 2231.366, 'src': 'embed', 'start': 2202.088, 'weight': 3, 'content': [{'end': 2203.87, 'text': "0.5em, that's the bottom padding.", 'start': 2202.088, 'duration': 1.782}, {'end': 2205.152, 'text': 'And 0.5em for the left padding.', 'start': 2204.05, 'duration': 1.102}, {'end': 2215.082, 'text': "We're then going to have to target the main section and shrink it down so we have room for our left and right sidebar.", 'start': 2208.22, 'duration': 6.862}, {'end': 2223.805, 'text': "So let's just try something simple, like a width of 400 pixels, and then target the side and give it a width of 200 pixels,", 'start': 2215.302, 'duration': 8.503}, {'end': 2225.446, 'text': 'just like we did with the left side.', 'start': 2223.805, 'duration': 1.641}, {'end': 2229.423, 'text': 'And there you can see everything lines up really nice at this right sidebar.', 'start': 2225.939, 'duration': 3.484}, {'end': 2231.366, 'text': "Let's go and mess with that a little bit too.", 'start': 2229.443, 'duration': 1.923}], 'summary': 'Styling the main section to 400 pixels and the sidebar to 200 pixels for alignment.', 'duration': 29.278, 'max_score': 2202.088, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ2202088.jpg'}, {'end': 2256.417, 'src': 'embed', 'start': 2241.659, 'weight': 1, 'content': [{'end': 2247.886, 'text': 'That is how easy it is to do a two-column as well as a three-column layout in CSS.', 'start': 2241.659, 'duration': 6.227}, {'end': 2252.131, 'text': "And in the next tutorial, I'm going to show you how to create responsive website designs.", 'start': 2248.207, 'duration': 3.924}, {'end': 2254.694, 'text': 'So please leave your questions and comments below.', 'start': 2252.432, 'duration': 2.262}, {'end': 2256.417, 'text': 'Otherwise, until next time.', 'start': 2255.335, 'duration': 1.082}], 'summary': 'Demonstrated creating two-column and three-column layouts in css, and will cover responsive website designs in the next tutorial.', 'duration': 14.758, 'max_score': 2241.659, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ2241659.jpg'}], 'start': 1959.399, 'title': 'Website layout design in css', 'summary': 'Covers creating two and three-column website layouts with full-length and left sidebars in css, adjusting padding, list style, and widths for clean design. it also plans to address responsive website designs in the next tutorial.', 'chapters': [{'end': 2128.153, 'start': 1959.399, 'title': 'Creating two and three column websites', 'summary': 'Explains how to create a two-column website layout with a full-length sidebar and a footer, as well as how to easily convert it into a three-column layout by adding a left sidebar.', 'duration': 168.754, 'highlights': ['The chapter demonstrates how to create a two-column website layout with a full-length sidebar and a footer, as well as how to easily convert it into a three-column layout by adding a left sidebar.', 'The method of using padding bottom and margin bottom with an astronomical number to stretch the sidebar to the bottom of the screen, even with no content, is explained.', 'The process of creating a left sidebar for a three-column website layout by adding a div and styling it with a width of 200 pixels and floating it to the left side of the screen is detailed.']}, {'end': 2256.417, 'start': 2128.333, 'title': 'Css layout design', 'summary': 'Demonstrates the process of creating a two-column and three-column layout in css, adjusting padding, list style type, and widths, achieving a clean and aligned design, with plans to cover responsive website designs in the next tutorial.', 'duration': 128.084, 'highlights': ['The process of creating a two-column and three-column layout in CSS, including adjusting padding, list style type, and widths, is demonstrated.', 'The left and right sidebar are set to a width of 200 pixels and 400 pixels, respectively, to achieve alignment and a clean design.', 'Plans to cover responsive website designs in the next tutorial are mentioned.']}], 'duration': 297.018, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mqLI2oN6rXQ/pics/mqLI2oN6rXQ1959399.jpg', 'highlights': ['The chapter demonstrates how to create a two-column website layout with a full-length sidebar and a footer, as well as how to easily convert it into a three-column layout by adding a left sidebar.', 'The process of creating a two-column and three-column layout in CSS, including adjusting padding, list style type, and widths, is demonstrated.', 'The method of using padding bottom and margin bottom with an astronomical number to stretch the sidebar to the bottom of the screen, even with no content, is explained.', 'The left and right sidebar are set to a width of 200 pixels and 400 pixels, respectively, to achieve alignment and a clean design.', 'The process of creating a left sidebar for a three-column website layout by adding a div and styling it with a width of 200 pixels and floating it to the left side of the screen is detailed.', 'Plans to cover responsive website designs in the next tutorial are mentioned.']}], 'highlights': ['The chapter provides solutions to 50 common CSS questions, including using EM unit sizing, setting background images to repeat, and creating fixed backgrounds during scrolling.', 'Covers solutions to 50 common css questions, customizing web design elements, working with images, interactive table hover effect, web page discount offer, web page design basics, and website layout design in css, offering practical tips and techniques for creating visually enhanced and organized web content.', 'Using a scalable background image and ensuring it automatically scales as the browser window scales by setting background size to cover and using cross-browser compatibility.', "Demonstration of using the 'Lobster' font from Google Fonts and integrating it into the HTML and CSS code.", 'Applying hover effects to links by changing the background color, enhancing user experience.', 'Demonstrating how to style a football statistics table by changing caption position, setting table dimensions, and adding borders. Demonstrates changing caption position from top to bottom, setting table width to 600 pixels, adding a 1-pixel solid black border, and collapsing cell borders.', 'Interactive zoom-in and color change on table row hover, enhancing user interaction with the data.', 'Positioning the discount offer using absolute positioning relative to the viewport and fixing its position by setting the wrapper to relative positioning.', 'Minor changes, such as adjusting color and padding, can lead to dramatic visual results on the web page.', 'The process includes targeting and styling specific HTML elements such as images, headers, horizontal rules, and vertical navigation to improve layout and presentation.', 'The chapter demonstrates how to create a two-column website layout with a full-length sidebar and a footer, as well as how to easily convert it into a three-column layout by adding a left sidebar.']}