title
HTML & CSS Tutorial - Ways to code images...and how to do it well

description
Here's how to properly code images into your webpages without making them fuzzy on hi-res devices like the latest iPhone. Play with the code!!! https://codepen.io/anon/pen/wOvgde?editors=1100 View the full course!!! https://www.youtube.com/watch?v=gQojMIhELvM&list=PLoYCgNOIyGABDU532eesybur5HPBVfC1G There are 2 ways you'll add images to your website: - html background images (use this if the image is a part of the design - html content images (use this if the image is a part of the content) The method for adding html & CSS images is different for each type of image. -~-~~-~~~-~~-~- Also watch: "Tailwind CSS - why CSS utility classes save so much time" https://www.youtube.com/watch?v=oU5ar0dmQEY -~-~~-~~~-~~-~-

detail
{'title': 'HTML & CSS Tutorial - Ways to code images...and how to do it well', 'heatmap': [{'end': 269.562, 'start': 237.864, 'weight': 1}], 'summary': 'The tutorial covers adding images to a website, utilizing img tag and css for content and background images, exploring semantic text elements for accessibility, ethical considerations, styling logos with css, including sizing and positioning, and css styling for home roasted coffee images and website footer with emphasis on responsive design.', 'chapters': [{'end': 88.104, 'segs': [{'end': 37.01, 'src': 'embed', 'start': 13.135, 'weight': 2, 'content': [{'end': 21.118, 'text': "So in this video we're dealing with images and I've specifically left images and content out because so much of web development has already happened.", 'start': 13.135, 'duration': 7.983}, {'end': 22.539, 'text': 'It happens in the layout.', 'start': 21.238, 'duration': 1.301}, {'end': 30.965, 'text': 'All of web development, or all of HTML and CSS development should I say, is layout and then content that goes in those layout blocks.', 'start': 23.039, 'duration': 7.926}, {'end': 32.345, 'text': "So we've done the layout.", 'start': 31.425, 'duration': 0.92}, {'end': 37.01, 'text': "we've done a lot of the hard work already and it might not look like much, but we've gotten a lot of the website done already.", 'start': 32.345, 'duration': 4.665}], 'summary': 'Web development focuses on layout and content; progress made on website.', 'duration': 23.875, 'max_score': 13.135, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7cwRaTqR4k0/pics/7cwRaTqR4k013135.jpg'}, {'end': 88.104, 'src': 'embed', 'start': 52.566, 'weight': 0, 'content': [{'end': 57.532, 'text': "The IMG tag is used when you want to add an image that's actually considered a part of content.", 'start': 52.566, 'duration': 4.966}, {'end': 63.7, 'text': 'So instead of inserting text, I would insert an image that is considered a piece of the article, so to speak.', 'start': 57.913, 'duration': 5.787}, {'end': 70.309, 'text': 'The other main way that you actually use way more often is using CSS to add a background image to things.', 'start': 64.461, 'duration': 5.848}, {'end': 76.874, 'text': "So in this case, for this header, which is this black box here, I'd use CSS to make a background image on that whole header.", 'start': 70.669, 'duration': 6.205}, {'end': 78.876, 'text': "It's not considered a part of the content.", 'start': 76.954, 'duration': 1.922}, {'end': 86.162, 'text': "it's a part of the design, which is why you use it a whole lot more, because web pages, in terms of images, are way more design than content.", 'start': 78.876, 'duration': 7.286}, {'end': 88.104, 'text': "So those are the two ways we're going to get into.", 'start': 86.602, 'duration': 1.502}], 'summary': 'Img tag adds content images, css for design images. design images used more in web pages.', 'duration': 35.538, 'max_score': 52.566, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7cwRaTqR4k0/pics/7cwRaTqR4k052566.jpg'}], 'start': 0.129, 'title': 'Adding images to website', 'summary': "Focuses on adding images to a website using img tag for content images and css for background images, completing a significant portion of the website's layout and development.", 'chapters': [{'end': 88.104, 'start': 0.129, 'title': 'Adding images to website', 'summary': "Focuses on adding images to a website, covering the use of img tag for content images and css for background images, emphasizing the completion of a significant portion of the website's layout and development.", 'duration': 87.975, 'highlights': ['The use of IMG tag for content images is discussed, emphasizing its role in adding images that are considered a part of the content.', 'The use of CSS for adding background images to elements is highlighted, emphasizing its frequent use for design purposes.', "The chapter emphasizes the completion of a significant portion of the website's layout and development before delving into the addition of images."]}], 'duration': 87.975, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7cwRaTqR4k0/pics/7cwRaTqR4k0129.jpg', 'highlights': ['The use of IMG tag for content images is discussed, emphasizing its role in adding images that are considered a part of the content.', 'The use of CSS for adding background images to elements is highlighted, emphasizing its frequent use for design purposes.', "The chapter emphasizes the completion of a significant portion of the website's layout and development before delving into the addition of images."]}, {'end': 237.504, 'segs': [{'end': 130.657, 'src': 'embed', 'start': 106.783, 'weight': 2, 'content': [{'end': 114.067, 'text': "so we're going to snatch some images for this to use on our website, which is not legal to do, but for practicing and developing at home.", 'start': 106.783, 'duration': 7.284}, {'end': 115.067, 'text': "it's a great idea.", 'start': 114.067, 'duration': 1}, {'end': 117.309, 'text': 'basically, just right click on any image.', 'start': 115.067, 'duration': 2.242}, {'end': 118.529, 'text': 'save image as.', 'start': 117.309, 'duration': 1.22}, {'end': 120.491, 'text': 'so find any images you like.', 'start': 118.529, 'duration': 1.962}, {'end': 121.671, 'text': 'right click on an image.', 'start': 120.491, 'duration': 1.18}, {'end': 123.192, 'text': 'save image as.', 'start': 121.671, 'duration': 1.521}, {'end': 124.693, 'text': "so i've saved some images here.", 'start': 123.192, 'duration': 1.501}, {'end': 127.695, 'text': "let's go ahead, close that out And free promo for you.", 'start': 124.693, 'duration': 3.002}, {'end': 128.356, 'text': 'Artisan Bakery.', 'start': 127.695, 'duration': 0.661}, {'end': 130.657, 'text': "And so I've got an images folder now.", 'start': 129.156, 'duration': 1.501}], 'summary': 'Demonstrating how to save images for website use, not legal but for practice.', 'duration': 23.874, 'max_score': 106.783, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7cwRaTqR4k0/pics/7cwRaTqR4k0106783.jpg'}, {'end': 194.241, 'src': 'embed', 'start': 164.681, 'weight': 1, 'content': [{'end': 166.502, 'text': "Then I'm going to make a background image up here.", 'start': 164.681, 'duration': 1.821}, {'end': 170.845, 'text': 'This is going to be using our first method, which is CSS for background images.', 'start': 166.562, 'duration': 4.283}, {'end': 175.447, 'text': "so the first thing i'm going to do here is i'm going to, right in the middle, put the logo.", 'start': 171.545, 'duration': 3.902}, {'end': 182.35, 'text': "i'm going to add an li with an a tag and i'm also going to make this an a tag because i want, when you click on the logo,", 'start': 175.447, 'duration': 6.903}, {'end': 183.55, 'text': 'for it to go to the home page.', 'start': 182.35, 'duration': 1.2}, {'end': 185.411, 'text': "that's kind of a normal thing to do.", 'start': 183.55, 'duration': 1.861}, {'end': 189.133, 'text': "you want that logo to always take you home and i'm going to add a title here.", 'start': 185.411, 'duration': 3.722}, {'end': 194.241, 'text': "i'm going to say artisan bakery logo.", 'start': 189.133, 'duration': 5.108}], 'summary': 'Creating a background image using css for the artisan bakery logo.', 'duration': 29.56, 'max_score': 164.681, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7cwRaTqR4k0/pics/7cwRaTqR4k0164681.jpg'}, {'end': 233.321, 'src': 'embed', 'start': 206.046, 'weight': 0, 'content': [{'end': 211.589, 'text': "and the reason that's important is because there's a lot of people out there that are visually impaired, visually disabled,", 'start': 206.046, 'duration': 5.543}, {'end': 215.151, 'text': "and they're going to use screen readers to visit your website.", 'start': 211.589, 'duration': 3.562}, {'end': 220.914, 'text': 'and they can fully browse the internet with a screen reader as long as the web developers do it semantically correct.', 'start': 215.151, 'duration': 5.763}, {'end': 227.017, 'text': "Nobody wants to be that jerk that builds a business, a building that doesn't have a wheelchair ramp, right?", 'start': 221.714, 'duration': 5.303}, {'end': 233.321, 'text': "And you don't wanna be the jerk that builds a website that people can't view with a screen reader when they're visually disabled or impaired,", 'start': 227.498, 'duration': 5.823}], 'summary': 'Web developers need to ensure websites are accessible for visually impaired users using screen readers.', 'duration': 27.275, 'max_score': 206.046, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7cwRaTqR4k0/pics/7cwRaTqR4k0206046.jpg'}], 'start': 88.384, 'title': 'Using images in web pages', 'summary': 'Explores methods for adding background images using css, the significance of semantic text elements for accessibility, and ethical considerations when using web images for practice.', 'chapters': [{'end': 237.504, 'start': 88.384, 'title': 'Using images in web pages', 'summary': 'Focuses on using images in web pages, covering methods for adding background images using css, the importance of semantic text elements for accessibility, and the ethical considerations of using images from the web for practice purposes.', 'duration': 149.12, 'highlights': ['The importance of semantic text elements for accessibility Using semantic text elements is crucial for accessibility, as visually impaired individuals rely on screen readers to navigate websites, emphasizing the ethical responsibility of web developers to make websites accessible.', 'Adding background images using CSS The chapter demonstrates the process of adding a background image using CSS, highlighting the practical application of this method in web page design.', 'Ethical considerations of using images from the web for practice purposes The chapter addresses the ethical implications of using images from the web for practice and development, emphasizing the importance of obtaining images legally and the ethical responsibility of web developers.']}], 'duration': 149.12, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7cwRaTqR4k0/pics/7cwRaTqR4k088384.jpg', 'highlights': ['The importance of semantic text elements for accessibility Using semantic text elements is crucial for accessibility, as visually impaired individuals rely on screen readers to navigate websites, emphasizing the ethical responsibility of web developers to make websites accessible.', 'Adding background images using CSS The chapter demonstrates the process of adding a background image using CSS, highlighting the practical application of this method in web page design.', 'Ethical considerations of using images from the web for practice purposes The chapter addresses the ethical implications of using images from the web for practice and development, emphasizing the importance of obtaining images legally and the ethical responsibility of web developers.']}, {'end': 829.648, 'segs': [{'end': 263.639, 'src': 'embed', 'start': 237.864, 'weight': 0, 'content': [{'end': 243.627, 'text': "So as you can see, just by reading this, it doesn't matter how it looks, I know that this is the logo and it's gonna take me to the homepage.", 'start': 237.864, 'duration': 5.763}, {'end': 247.97, 'text': 'So now I can go over to CSS and actually turn this into a pretty logo.', 'start': 244.207, 'duration': 3.763}, {'end': 251.672, 'text': "First of all, I'm going to add a class logo.", 'start': 248.75, 'duration': 2.922}, {'end': 255.014, 'text': 'So header class logo can now be targeted.', 'start': 252.873, 'duration': 2.141}, {'end': 259.976, 'text': "There's the logo and there's the A tag inside of the logo LI.", 'start': 256.795, 'duration': 3.181}, {'end': 263.639, 'text': 'And let me give this thing a background color of red.', 'start': 260.737, 'duration': 2.902}], 'summary': 'Using css to style the logo with a red background color.', 'duration': 25.775, 'max_score': 237.864, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7cwRaTqR4k0/pics/7cwRaTqR4k0237864.jpg'}, {'end': 269.562, 'src': 'heatmap', 'start': 237.864, 'weight': 1, 'content': [{'end': 243.627, 'text': "So as you can see, just by reading this, it doesn't matter how it looks, I know that this is the logo and it's gonna take me to the homepage.", 'start': 237.864, 'duration': 5.763}, {'end': 247.97, 'text': 'So now I can go over to CSS and actually turn this into a pretty logo.', 'start': 244.207, 'duration': 3.763}, {'end': 251.672, 'text': "First of all, I'm going to add a class logo.", 'start': 248.75, 'duration': 2.922}, {'end': 255.014, 'text': 'So header class logo can now be targeted.', 'start': 252.873, 'duration': 2.141}, {'end': 259.976, 'text': "There's the logo and there's the A tag inside of the logo LI.", 'start': 256.795, 'duration': 3.181}, {'end': 263.639, 'text': 'And let me give this thing a background color of red.', 'start': 260.737, 'duration': 2.902}, {'end': 268.082, 'text': "I always like to give it a background color when I'm working with something just so I can see what that box is doing.", 'start': 263.679, 'duration': 4.403}, {'end': 269.562, 'text': "I'm going to give it a width of 300.", 'start': 268.562, 'duration': 1}], 'summary': 'Using css to style logo: added class, applied red background, and set width to 300.', 'duration': 31.698, 'max_score': 237.864, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7cwRaTqR4k0/pics/7cwRaTqR4k0237864.jpg'}, {'end': 314.53, 'src': 'embed', 'start': 283.806, 'weight': 1, 'content': [{'end': 285.207, 'text': "Let's go like 80 pixels.", 'start': 283.806, 'duration': 1.401}, {'end': 289.071, 'text': "And now that that's going, I can get rid of this text.", 'start': 286.228, 'duration': 2.843}, {'end': 292.874, 'text': 'A little trick that you can use to get rid of text is called text indent.', 'start': 289.151, 'duration': 3.723}, {'end': 298.573, 'text': "And then since it's display block, I can tell the text to just kind of go way far left.", 'start': 294.028, 'duration': 4.545}, {'end': 305.38, 'text': "So I'm going to go negative 999 pixels and that's going, boom, way off the screen to where no one will ever see it.", 'start': 298.653, 'duration': 6.727}, {'end': 308.724, 'text': "What's great about this is, again, it's semantically correct.", 'start': 306.041, 'duration': 2.683}, {'end': 314.53, 'text': "You can read that it's a link and you can read that the link text says Artisan Bakery logo, but you're never going to see it.", 'start': 308.784, 'duration': 5.746}], 'summary': 'Using text-indent: -999px to hide text off-screen, semantically correct.', 'duration': 30.724, 'max_score': 283.806, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7cwRaTqR4k0/pics/7cwRaTqR4k0283806.jpg'}, {'end': 414.112, 'src': 'embed', 'start': 386.527, 'weight': 2, 'content': [{'end': 391.99, 'text': 'Make your images double the size and then shrink them down to the size you want inside the browser.', 'start': 386.527, 'duration': 5.463}, {'end': 396.691, 'text': 'This is simply because not all devices have the same pixel resolution.', 'start': 392.47, 'duration': 4.221}, {'end': 400.513, 'text': "I don't know if you follow the tech specs on new iPhones and stuff like that.", 'start': 397.192, 'duration': 3.321}, {'end': 407.042, 'text': "But they're always trying to cram as many more pixels onto the screen as possible to make it as smooth and as detailed as it can possibly be.", 'start': 401.053, 'duration': 5.989}, {'end': 414.112, 'text': "So when the web started out, monitors used to be 72 pixels per inch, and now they're up in the hundreds, 140s, 180s.", 'start': 407.723, 'duration': 6.389}], 'summary': 'Resize images to double the size and shrink for varied pixel resolutions, with monitors now having 140-180 pixels per inch.', 'duration': 27.585, 'max_score': 386.527, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7cwRaTqR4k0/pics/7cwRaTqR4k0386527.jpg'}, {'end': 813.209, 'src': 'embed', 'start': 777.836, 'weight': 3, 'content': [{'end': 779.697, 'text': 'And then we can use CSS to move it around.', 'start': 777.836, 'duration': 1.861}, {'end': 786.642, 'text': 'But whenever you have an image and a caption that goes with it, the more technically correct way to do it is to add a figure.', 'start': 780.077, 'duration': 6.565}, {'end': 791.344, 'text': 'tag, which is an html5 semantic tag.', 'start': 787.563, 'duration': 3.781}, {'end': 793.684, 'text': "it's just like section or header or nav.", 'start': 791.344, 'duration': 2.34}, {'end': 794.905, 'text': "it doesn't do anything.", 'start': 793.684, 'duration': 1.221}, {'end': 800.306, 'text': "it basically acts like a div, but it basically tells us more semantically what's going on.", 'start': 794.905, 'duration': 5.401}, {'end': 813.209, 'text': "a figure tag expects two things to be inside of it an img tag and also what's going on, and also a fig caption, a fig caption tag right there.", 'start': 800.306, 'duration': 12.903}], 'summary': 'Use figure tag for image and caption in html5.', 'duration': 35.373, 'max_score': 777.836, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7cwRaTqR4k0/pics/7cwRaTqR4k0777836.jpg'}], 'start': 237.864, 'title': 'Styling and sizing logos in css', 'summary': 'Covers styling a logo with css, adding a class, setting background color, width, and height. it also discusses using text indent to position the logo off-screen. additionally, it covers the use of background images and image tags, emphasizing the importance of sizing images for different devices and using semantic html5 tags for captions, with examples and practical demonstrations.', 'chapters': [{'end': 305.38, 'start': 237.864, 'title': 'Styling a logo with css', 'summary': 'Covers the process of styling a logo using css, including adding a class, setting background color, width, height, and using text indent to position the logo off-screen.', 'duration': 67.516, 'highlights': ["The process begins by adding a class 'logo' to target the header, followed by setting a red background color and changing the display to inline-block for the logo, resulting in a width of 300 pixels.", "A height of 80 pixels is set for the logo, and the text is removed using the 'text indent' technique, positioning it far off-screen at negative 999 pixels."]}, {'end': 829.648, 'start': 306.041, 'title': 'Css background images and image tags', 'summary': 'Covers the use of background images and image tags in css, emphasizing the importance of sizing images for different devices and the use of semantic html5 tags for captions, with examples and practical demonstrations.', 'duration': 523.607, 'highlights': ['The importance of making images double the size and then shrinking them down for different devices is emphasized, to ensure the images look crisp and clear on various devices, with different pixel resolutions. Making images double the size and then shrinking them down ensures they look crisp and clear on devices with different pixel resolutions, such as older monitors with 72 pixels per inch and newer devices with higher resolutions.', 'The use of semantic HTML5 tags like figure and figcaption for image captions is explained, highlighting their role in providing a more semantically correct structure to the content. The use of semantic HTML5 tags like figure and figcaption for image captions is explained, emphasizing their role in providing a more semantically correct structure to the content, compared to using traditional tags like H4 or P for captions.', 'The chapter demonstrates the practical implementation of background images and explains the importance of using semantic HTML5 tags for captions, with examples of code and real-time demonstrations. The chapter demonstrates the practical implementation of background images and explains the importance of using semantic HTML5 tags for captions, with examples of code and real-time demonstrations to illustrate the concepts.']}], 'duration': 591.784, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7cwRaTqR4k0/pics/7cwRaTqR4k0237864.jpg', 'highlights': ["The process begins by adding a class 'logo' to target the header, setting a red background color, and changing the display to inline-block for the logo, resulting in a width of 300 pixels.", "A height of 80 pixels is set for the logo, and the text is removed using the 'text indent' technique, positioning it far off-screen at negative 999 pixels.", 'The importance of making images double the size and then shrinking them down for different devices is emphasized to ensure crisp and clear display on various devices with different pixel resolutions.', 'The use of semantic HTML5 tags like figure and figcaption for image captions is explained, highlighting their role in providing a more semantically correct structure to the content.', 'The chapter demonstrates the practical implementation of background images and explains the importance of using semantic HTML5 tags for captions, with examples of code and real-time demonstrations.']}, {'end': 1337.234, 'segs': [{'end': 861.625, 'src': 'embed', 'start': 831.11, 'weight': 0, 'content': [{'end': 833.012, 'text': "We'll just call it fresh baked coffee.", 'start': 831.11, 'duration': 1.902}, {'end': 835.852, 'text': 'Just be lazy for now.', 'start': 834.892, 'duration': 0.96}, {'end': 841.715, 'text': "And then we'll call this, I don't know, it's not gourmet coffee these days, right? Because that's like what they marketed to our parents.", 'start': 836.333, 'duration': 5.382}, {'end': 845.237, 'text': "What is it, like artisan coffee now? Everything's artisan.", 'start': 842.456, 'duration': 2.781}, {'end': 848.859, 'text': "Home, it's not brewed, roasted.", 'start': 846.618, 'duration': 2.241}, {'end': 852.221, 'text': "Home roasted coffee, right? That's what everybody does.", 'start': 848.899, 'duration': 3.322}, {'end': 853.381, 'text': 'They roast it in house.', 'start': 852.241, 'duration': 1.14}, {'end': 855.742, 'text': 'So we got our home roasted coffee, boom.', 'start': 853.801, 'duration': 1.941}, {'end': 856.903, 'text': "That's lovely.", 'start': 856.383, 'duration': 0.52}, {'end': 859.024, 'text': 'And then we also have goods.', 'start': 857.263, 'duration': 1.761}, {'end': 861.625, 'text': 'Market goods.', 'start': 860.765, 'duration': 0.86}], 'summary': 'Discussion about the shift from gourmet to artisan coffee, emphasizing home roasted coffee and market goods.', 'duration': 30.515, 'max_score': 831.11, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7cwRaTqR4k0/pics/7cwRaTqR4k0831110.jpg'}, {'end': 1025.578, 'src': 'embed', 'start': 988.991, 'weight': 1, 'content': [{'end': 994.512, 'text': "and you don't have to freak out like you're not some real developer when you see a CSS property you've never seen before.", 'start': 988.991, 'duration': 5.521}, {'end': 1000.934, 'text': "There's tons of CSS properties out there, some that you hardly ever use, and most of them that are your bread and butter.", 'start': 995.433, 'duration': 5.501}, {'end': 1002.214, 'text': 'you use them all day, every day.', 'start': 1000.934, 'duration': 1.28}, {'end': 1007.818, 'text': "You can see, even as I'm building out this website, keep coming back to the same things over and over again.", 'start': 1002.274, 'duration': 5.544}, {'end': 1015.407, 'text': "width and margin, and background and color and padding that's most of what you use, and every so often you'll run across a css property.", 'start': 1007.818, 'duration': 7.589}, {'end': 1018.471, 'text': "you're like what the heck is this and then you google it and you find out what it is.", 'start': 1015.407, 'duration': 3.064}, {'end': 1019.853, 'text': "that doesn't mean you're not a developer.", 'start': 1018.471, 'duration': 1.382}, {'end': 1025.578, 'text': "Oftentimes, if you haven't used a certain property for six months or a year, you're going to forget about it anyway.", 'start': 1020.513, 'duration': 5.065}], 'summary': 'Css developers use common properties like width, margin, background, color, and padding frequently, while encountering unfamiliar properties occasionally.', 'duration': 36.587, 'max_score': 988.991, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7cwRaTqR4k0/pics/7cwRaTqR4k0988991.jpg'}, {'end': 1073.616, 'src': 'embed', 'start': 1044.816, 'weight': 3, 'content': [{'end': 1049.18, 'text': "I'm going to give it a little bit of a shadow, just a really subtle shadow and also a border.", 'start': 1044.816, 'duration': 4.364}, {'end': 1051.922, 'text': "That's kind of a nice way to make images that are circles look good.", 'start': 1049.22, 'duration': 2.702}, {'end': 1057.707, 'text': 'The way you do a shadow is box shadow and box shadow takes four properties.', 'start': 1052.703, 'duration': 5.004}, {'end': 1058.508, 'text': 'It takes the color.', 'start': 1057.768, 'duration': 0.74}, {'end': 1059.829, 'text': "Let's just say black for now.", 'start': 1058.568, 'duration': 1.261}, {'end': 1067.014, 'text': "And then it takes the offset of Horizontal, let's say 10 pixels horizontally, 10 pixels vertically.", 'start': 1060.55, 'duration': 6.464}, {'end': 1068.594, 'text': 'That might be vertical and horizontal.', 'start': 1067.174, 'duration': 1.42}, {'end': 1069.875, 'text': 'I always forget which order.', 'start': 1068.774, 'duration': 1.101}, {'end': 1073.616, 'text': 'And then how wide that shadow is, a 10 pixel shadow.', 'start': 1070.355, 'duration': 3.261}], 'summary': 'Adding a subtle shadow and border to images using box shadow with 4 properties and 10 pixel width.', 'duration': 28.8, 'max_score': 1044.816, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7cwRaTqR4k0/pics/7cwRaTqR4k01044816.jpg'}, {'end': 1153.447, 'src': 'embed', 'start': 1110.684, 'weight': 4, 'content': [{'end': 1112.225, 'text': "Let's also give it just a border.", 'start': 1110.684, 'duration': 1.541}, {'end': 1116.685, 'text': 'of one pixel solid white.', 'start': 1113.883, 'duration': 2.802}, {'end': 1122.77, 'text': "So that way we're gonna have this tiny little white border that goes on with that tiny little gray shadow behind it.", 'start': 1117.366, 'duration': 5.404}, {'end': 1124.872, 'text': "I don't know, it just has a little subtle look to it.", 'start': 1123.09, 'duration': 1.782}, {'end': 1130.416, 'text': "You can tweak on this stuff forever and come up with really, really cool looks, but that's good enough for now.", 'start': 1124.912, 'duration': 5.504}, {'end': 1135.72, 'text': "I think the last thing I'm gonna do is I'm gonna make that figure caption have a little bit of text to it,", 'start': 1130.956, 'duration': 4.764}, {'end': 1138.462, 'text': 'which I can actually just apply these rules straight to the figure.', 'start': 1135.72, 'duration': 2.742}, {'end': 1141.845, 'text': "Let's see, let's do a text transform.", 'start': 1139.363, 'duration': 2.482}, {'end': 1146.961, 'text': "of uppercase, so it's all uppercase.", 'start': 1144.278, 'duration': 2.683}, {'end': 1153.447, 'text': "Ta-da!, It's better to do this in CSS than to actually do it in the HTML, because you're not shouting at people right?", 'start': 1147.461, 'duration': 5.986}], 'summary': 'Css styling for a figure caption with one pixel solid white border and uppercase text.', 'duration': 42.763, 'max_score': 1110.684, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7cwRaTqR4k0/pics/7cwRaTqR4k01110684.jpg'}, {'end': 1246.74, 'src': 'embed', 'start': 1214.135, 'weight': 6, 'content': [{'end': 1219.18, 'text': "There's our footer and let's go and maybe add some style to the footer as well.", 'start': 1214.135, 'duration': 5.045}, {'end': 1225.866, 'text': "Let's give it some color of gray and text a line of center.", 'start': 1220, 'duration': 5.866}, {'end': 1233.257, 'text': "And I don't know, that padding's a little bit, let's make it 20 pixels indeed.", 'start': 1230.472, 'duration': 2.785}, {'end': 1236.864, 'text': "Ta-da! And I'll also make this font size just a little bit smaller.", 'start': 1233.638, 'duration': 3.226}, {'end': 1241.714, 'text': '10 pixels? Yeah, a little too small, 12 pixels.', 'start': 1236.884, 'duration': 4.83}, {'end': 1244.319, 'text': 'There we go.', 'start': 1243.899, 'duration': 0.42}, {'end': 1246.74, 'text': 'So we basically got our website done.', 'start': 1244.519, 'duration': 2.221}], 'summary': 'Styled footer with gray color, centered text, 20px padding, and 12px font size.', 'duration': 32.605, 'max_score': 1214.135, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7cwRaTqR4k0/pics/7cwRaTqR4k01214135.jpg'}, {'end': 1315.941, 'src': 'embed', 'start': 1288.075, 'weight': 7, 'content': [{'end': 1291.496, 'text': 'So I can say header and then I can go down here.', 'start': 1288.075, 'duration': 3.421}, {'end': 1292.636, 'text': "That's all our header rules.", 'start': 1291.556, 'duration': 1.08}, {'end': 1294.397, 'text': 'Nice features.', 'start': 1292.716, 'duration': 1.681}, {'end': 1300.306, 'text': "This is going to help us just as we're kind of scrolling through those comments, have that green color on purpose.", 'start': 1295.762, 'duration': 4.544}, {'end': 1305.431, 'text': "So now as you're kind of looking, it's a lot easier to scroll through and see where your CSS rules are.", 'start': 1301.147, 'duration': 4.284}, {'end': 1306.572, 'text': "Man, that's about it.", 'start': 1305.831, 'duration': 0.741}, {'end': 1307.693, 'text': 'This website came together.', 'start': 1306.632, 'duration': 1.061}, {'end': 1310.776, 'text': 'How much time do we spend on this? Like maybe an hour max.', 'start': 1308.034, 'duration': 2.742}, {'end': 1315.941, 'text': 'And we kind of have a whole complete look, assuming that someone already took pictures for us and had a logo for us.', 'start': 1310.976, 'duration': 4.965}], 'summary': 'Website header rules implemented, saving time with a maximum of 1 hour spent on completion', 'duration': 27.866, 'max_score': 1288.075, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7cwRaTqR4k0/pics/7cwRaTqR4k01288075.jpg'}, {'end': 1337.234, 'src': 'embed', 'start': 1326.728, 'weight': 8, 'content': [{'end': 1330.971, 'text': 'We did a really good job with our content to where it looks good on all the other devices.', 'start': 1326.728, 'duration': 4.243}, {'end': 1332.812, 'text': "It's just not gonna look so good on mobile.", 'start': 1331.051, 'duration': 1.761}, {'end': 1333.912, 'text': "So we'll handle that.", 'start': 1332.892, 'duration': 1.02}, {'end': 1335.253, 'text': "That's called responsive design.", 'start': 1333.952, 'duration': 1.301}, {'end': 1337.234, 'text': "We'll catch you on the next video.", 'start': 1335.293, 'duration': 1.941}], 'summary': 'Content looks good on all devices except mobile. will address with responsive design.', 'duration': 10.506, 'max_score': 1326.728, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7cwRaTqR4k0/pics/7cwRaTqR4k01326728.jpg'}], 'start': 831.11, 'title': 'Css styling for home roasted coffee and images', 'summary': 'Covers the trend of home roasted coffee, css styling including shadows and borders for images, and creating a website footer with emphasis on common css properties, subtlety in design, and responsive design handling in the next video.', 'chapters': [{'end': 1044.776, 'start': 831.11, 'title': 'Home roasted coffee and css styling', 'summary': 'Discusses the trend of home roasted coffee and the process of styling with css, emphasizing the importance of familiarizing with common css properties and not feeling intimidated by unfamiliar ones.', 'duration': 213.666, 'highlights': ['The trend of home roasted coffee is discussed, emphasizing its popularity and the shift from gourmet to artisan coffee. The speaker mentions the trend of home roasted coffee and the shift from gourmet to artisan coffee, indicating the popularity of this trend.', 'The CSS styling process is detailed, focusing on the use of common properties such as width, margin, background, color, and padding, while also encouraging familiarity with unfamiliar properties. The transcript details the CSS styling process, emphasizing the frequent use of common properties like width, margin, background, color, and padding, along with the encouragement to learn and not feel intimidated by unfamiliar CSS properties.', "The speaker discusses the importance of familiarizing with common CSS properties and not feeling intimidated by unfamiliar ones, emphasizing the learning process and reassuring that it's a natural part of being a web developer. The importance of familiarizing with common CSS properties and not feeling intimidated by unfamiliar ones is highlighted, emphasizing that learning and forgetting are natural parts of being a web developer."]}, {'end': 1172.299, 'start': 1044.816, 'title': 'Styling images with shadows and borders', 'summary': 'Demonstrates how to add subtle shadows and borders to images using box shadow and border properties in css, emphasizing the importance of subtlety in design and the use of css for text formatting.', 'duration': 127.483, 'highlights': ['The chapter explains how to create a subtle shadow for images using box shadow in CSS with a 10-pixel blur, emphasizing the importance of subtlety in design. The chapter discusses using box shadow in CSS to create a subtle shadow for images, with a 10-pixel blur, highlighting the importance of subtlety in design.', 'It emphasizes the significance of using CSS for text formatting, such as applying text transform to achieve an all-uppercase caption for images. The chapter highlights the importance of using CSS for text formatting, such as applying text transform to achieve an all-uppercase caption for images, emphasizing the significance of design implications.', 'The chapter also introduces the concept of adding a subtle border to images using CSS, creating a refined and polished look while avoiding excessive design elements. The chapter introduces the concept of adding a subtle border to images using CSS to create a refined and polished look while avoiding excessive design elements.']}, {'end': 1337.234, 'start': 1172.719, 'title': 'Creating website footer and styling', 'summary': 'Covers creating a website footer and adding styling, with emphasis on adding content, images, and css rules, taking approximately an hour, with a focus on handling responsive design in the next video.', 'duration': 164.515, 'highlights': ['Creating a website footer and adding styling, focusing on adding content, images, and CSS rules, taking approximately an hour.', 'Emphasizing the importance of organizing CSS rules and comments for easier navigation and understanding.', "Planning to handle responsive design in the next video to improve the website's appearance on mobile devices."]}], 'duration': 506.124, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7cwRaTqR4k0/pics/7cwRaTqR4k0831110.jpg', 'highlights': ['The trend of home roasted coffee is discussed, emphasizing its popularity and the shift from gourmet to artisan coffee.', 'The CSS styling process is detailed, focusing on the use of common properties such as width, margin, background, color, and padding, while also encouraging familiarity with unfamiliar properties.', 'The importance of familiarizing with common CSS properties and not feeling intimidated by unfamiliar ones is highlighted, emphasizing that learning and forgetting are natural parts of being a web developer.', 'The chapter explains how to create a subtle shadow for images using box shadow in CSS with a 10-pixel blur, emphasizing the importance of subtlety in design.', 'It emphasizes the significance of using CSS for text formatting, such as applying text transform to achieve an all-uppercase caption for images.', 'The chapter also introduces the concept of adding a subtle border to images using CSS, creating a refined and polished look while avoiding excessive design elements.', 'Creating a website footer and adding styling, focusing on adding content, images, and CSS rules, taking approximately an hour.', 'Emphasizing the importance of organizing CSS rules and comments for easier navigation and understanding.', "Planning to handle responsive design in the next video to improve the website's appearance on mobile devices."]}], 'highlights': ['The importance of semantic text elements for accessibility Using semantic text elements is crucial for accessibility, as visually impaired individuals rely on screen readers to navigate websites, emphasizing the ethical responsibility of web developers to make websites accessible.', "The process begins by adding a class 'logo' to target the header, setting a red background color, and changing the display to inline-block for the logo, resulting in a width of 300 pixels.", 'The trend of home roasted coffee is discussed, emphasizing its popularity and the shift from gourmet to artisan coffee.', 'Creating a website footer and adding styling, focusing on adding content, images, and CSS rules, taking approximately an hour.']}