title
Microsoft Homepage Clone - CSS Grid, Flex & Media Queries

description
In this project we will build our own version of the Microsoft homepage using HTML5/CSS and a bit of JS for the menu. You will learn about modern CSS including CSS grid, flexbox and responsive media queries Code (Get images from here): https://codepen.io/bradtraversy/details/ZEGGNRb 💖 Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Website & Udemy Course Links: https://www.traversymedia.com Follow Traversy Media: https://www.twitter.com/traversymedia https://www.instagram.com/traversymedia https://www.facebook.com/traversymedia

detail
{'title': 'Microsoft Homepage Clone - CSS Grid, Flex & Media Queries', 'heatmap': [{'end': 344.59, 'start': 253.897, 'weight': 1}], 'summary': 'Tutorial series involves cloning the microsoft.com homepage using html, css, css grid, flexbox, media queries, and javascript, covering building, styling, grid display, media queries, and responsive design implementation with specific details on css properties and values.', 'chapters': [{'end': 127.715, 'segs': [{'end': 131.857, 'src': 'embed', 'start': 106.896, 'weight': 0, 'content': [{'end': 114.943, 'text': "So what I'm going to do is put a link in the description for you to download this, I guess this boilerplate, with the two files and all the images,", 'start': 106.896, 'duration': 8.047}, {'end': 117.585, 'text': 'just in case you want to follow along, which I would recommend.', 'start': 114.943, 'duration': 2.642}, {'end': 123.213, 'text': "OK, so I'm also going to keep the final project open so we can reference it if we need to.", 'start': 118.191, 'duration': 5.022}, {'end': 127.715, 'text': "So let's jump into index HTML and just create a boilerplate with Emmett.", 'start': 124.034, 'duration': 3.681}, {'end': 131.857, 'text': 'So exclamation enter and just tab down to the title here.', 'start': 127.755, 'duration': 4.102}], 'summary': 'The speaker will provide a download link for boilerplate files and images, and will create a boilerplate with emmett for the final project.', 'duration': 24.961, 'max_score': 106.896, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uKgn-To1C4Q/pics/uKgn-To1C4Q106896.jpg'}], 'start': 7.045, 'title': 'Cloning microsoft.com home page', 'summary': 'Involves cloning the microsoft.com home page using html, css, css grid, flexbox, media queries, and javascript to create a fully responsive design with reference to necessary files and images for download.', 'chapters': [{'end': 127.715, 'start': 7.045, 'title': 'Cloning microsoft.com home page', 'summary': 'Involves cloning the microsoft.com home page using html, css, css grid, flexbox, media queries, and a bit of javascript to create a fully responsive design, with reference to the necessary files and images for download.', 'duration': 120.67, 'highlights': ['The chapter involves cloning the Microsoft.com home page using HTML, CSS, CSS grid, Flexbox, media queries, and a bit of JavaScript to create a fully responsive design. The project focuses on cloning the Microsoft.com home page using modern CSS techniques such as CSS grid, Flexbox, and media queries to achieve a fully responsive design.', 'Reference to the necessary files and images for download is provided in the description to follow along. A link is provided in the description for downloading the necessary files and images to follow along with the project.']}], 'duration': 120.67, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uKgn-To1C4Q/pics/uKgn-To1C4Q7045.jpg', 'highlights': ['The project involves cloning the Microsoft.com home page using modern CSS techniques such as CSS grid, Flexbox, and media queries to achieve a fully responsive design.', 'Reference to the necessary files and images for download is provided in the description to follow along.']}, {'end': 411.642, 'segs': [{'end': 344.59, 'src': 'heatmap', 'start': 197.907, 'weight': 0, 'content': [{'end': 205.99, 'text': "So we have our image and I'm going to give it a class of logo and the source is going to be in the image folder and its logo PNG.", 'start': 197.907, 'duration': 8.083}, {'end': 209.106, 'text': "And for the alt, we'll just say Microsoft.", 'start': 206.724, 'duration': 2.382}, {'end': 215.27, 'text': "And then right under that, let's put a ul, an unordered list with a class of main menu.", 'start': 210.206, 'duration': 5.064}, {'end': 222.775, 'text': "And we're going to have some list items here with a link that isn't going to go anywhere.", 'start': 217.451, 'duration': 5.324}, {'end': 224.216, 'text': "So I'll just put a number sign.", 'start': 222.795, 'duration': 1.421}, {'end': 226.338, 'text': "And then I'm just going to copy this down.", 'start': 224.677, 'duration': 1.661}, {'end': 229.56, 'text': "Let's see, one, two, three, four, five, six.", 'start': 226.358, 'duration': 3.202}, {'end': 238.652, 'text': 'So the first one is going to be Office second one Windows.', 'start': 230.881, 'duration': 7.771}, {'end': 246.314, 'text': 'Surface Xbox.', 'start': 241.933, 'duration': 4.381}, {'end': 251.316, 'text': 'Deals and support.', 'start': 248.795, 'duration': 2.521}, {'end': 261.04, 'text': "All right so that's our main menu and then right under that we're going to have the other menu which I'm going to call right menu.", 'start': 253.897, 'duration': 7.143}, {'end': 264.437, 'text': 'Now we are going to be using font awesome icons.', 'start': 262.253, 'duration': 2.184}, {'end': 267.843, 'text': "So I'm just going to jump back into Chrome and search for fonts.", 'start': 264.477, 'duration': 3.366}, {'end': 274.064, 'text': 'say font awesome, five cdn, or you can just go to fontawesome.com.', 'start': 269.179, 'duration': 4.885}, {'end': 278.788, 'text': "but if you do that, you do have to sign up and log in and create what's called a kit.", 'start': 274.064, 'duration': 4.724}, {'end': 284.293, 'text': "if we do this, we can just choose either the javascript or i'm just going to grab the css.", 'start': 278.788, 'duration': 5.505}, {'end': 286.955, 'text': 'so this right here, this all.min.', 'start': 284.293, 'duration': 2.662}, {'end': 296.48, 'text': "i'm going to just copy the link tag and put that right above, where we brought in our style css, And then down in the right menu,", 'start': 286.955, 'duration': 9.525}, {'end': 299.181, 'text': "here we're going to have a list item.", 'start': 296.48, 'duration': 2.701}, {'end': 302.282, 'text': "And inside here, we'll have an A tag.", 'start': 300.241, 'duration': 2.041}, {'end': 306.144, 'text': "And inside that, we'll have an I tag with an icon.", 'start': 302.302, 'duration': 3.842}, {'end': 310.866, 'text': "So let's do a class of FAS, Font Awesome, and then FA-Search.", 'start': 306.204, 'duration': 4.662}, {'end': 315.208, 'text': "And then what we'll do is just copy this list item down.", 'start': 312.167, 'duration': 3.041}, {'end': 318.189, 'text': 'And then this one is going to be FA-Shopping-Cart.', 'start': 315.288, 'duration': 2.901}, {'end': 329.138, 'text': 'So I want to check this out, so you can either open the HTML file on your file system or you can use the live server extension,', 'start': 322.151, 'duration': 6.987}, {'end': 330.019, 'text': "which is what I'm doing.", 'start': 329.138, 'duration': 0.881}, {'end': 331.921, 'text': "So I'm going to say open with live server.", 'start': 330.139, 'duration': 1.782}, {'end': 333.963, 'text': 'And there we go.', 'start': 333.482, 'duration': 0.481}, {'end': 335.404, 'text': 'So we can see the logo.', 'start': 333.983, 'duration': 1.421}, {'end': 338.687, 'text': 'We have all of all of our links and we have our two icons.', 'start': 335.424, 'duration': 3.263}, {'end': 344.59, 'text': "So before we add any more HTML, let's go ahead and start to style this.", 'start': 339.548, 'duration': 5.042}], 'summary': 'Creating html elements for main and right menus, including font awesome icons. adding styling next.', 'duration': 89.048, 'max_score': 197.907, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uKgn-To1C4Q/pics/uKgn-To1C4Q197907.jpg'}, {'end': 411.642, 'src': 'embed', 'start': 386.767, 'weight': 5, 'content': [{'end': 395.874, 'text': "And we're going to use this, what is it, Segoe, Segoe, I can't, I don't know how to pronounce it, Segoe UI, Tahoma, Geneva, Verdana, Sans Serif.", 'start': 386.767, 'duration': 9.107}, {'end': 397.955, 'text': "So that's the font family I'm using.", 'start': 396.394, 'duration': 1.561}, {'end': 400.357, 'text': 'And then background is going to be white.', 'start': 398.496, 'duration': 1.861}, {'end': 405.98, 'text': "And let's set the color of the text to black.", 'start': 402.478, 'duration': 3.502}, {'end': 408.16, 'text': "So I'm using hexadecimal here.", 'start': 406.68, 'duration': 1.48}, {'end': 411.642, 'text': "And then we'll set the font size to 15 pixels.", 'start': 408.2, 'duration': 3.442}], 'summary': 'Using segoe ui, tahoma, geneva, verdana, sans serif font family, white background, black text color, and 15px font size.', 'duration': 24.875, 'max_score': 386.767, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uKgn-To1C4Q/pics/uKgn-To1C4Q386767.jpg'}], 'start': 127.755, 'title': 'Building microsoft home page with css and javascript', 'summary': 'Demonstrates building the microsoft official home page with css and javascript, including linking a style sheet, adding javascript for menu functionality, and utilizing html5 tags for structuring the page.', 'chapters': [{'end': 177.247, 'start': 127.755, 'title': 'Building microsoft home page with css and javascript', 'summary': 'Demonstrates building the microsoft official home page with css and javascript, including linking a style sheet, adding javascript for menu functionality, and utilizing html5 tags for structuring the page.', 'duration': 49.492, 'highlights': ['Utilizing HTML5 tags such as nav tag for structuring the page and improving semantic markup.', 'Adding a link tag to the style CSS for linking the style sheet to the HTML page.', 'Incorporating a small amount of JavaScript to enable menu functionality, allowing the menu to slide open on smaller screens.']}, {'end': 411.642, 'start': 177.267, 'title': 'Creating main navigation and styling', 'summary': 'Covers creating main navigation with a logo, main menu, and right menu using font awesome icons, and initial styling of the navigation with a font size of 15 pixels and a white background.', 'duration': 234.375, 'highlights': ['Creating main navigation with a logo, main menu, and right menu. The main navigation includes a logo, main menu with list items, and a right menu with font awesome icons.', 'Using font awesome icons for the right menu. The right menu utilizes font awesome icons such as FA-Search and FA-Shopping-Cart.', 'Initial styling of the navigation with a font size of 15 pixels and a white background. Setting the font size to 15 pixels and the background color to white for the navigation.']}], 'duration': 283.887, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uKgn-To1C4Q/pics/uKgn-To1C4Q127755.jpg', 'highlights': ['Utilizing HTML5 tags such as nav tag for structuring the page and improving semantic markup.', 'Adding a link tag to the style CSS for linking the style sheet to the HTML page.', 'Incorporating a small amount of JavaScript to enable menu functionality, allowing the menu to slide open on smaller screens.', 'Creating main navigation with a logo, main menu, and right menu. The main navigation includes a logo, main menu with list items, and a right menu with font awesome icons.', 'Using font awesome icons for the right menu. The right menu utilizes font awesome icons such as FA-Search and FA-Shopping-Cart.', 'Initial styling of the navigation with a font size of 15 pixels and a white background. Setting the font size to 15 pixels and the background color to white for the navigation.']}, {'end': 1227.519, 'segs': [{'end': 498.116, 'src': 'embed', 'start': 440.594, 'weight': 2, 'content': [{'end': 445.857, 'text': "And then for any unordered lists I'm going to take away the bullets.", 'start': 440.594, 'duration': 5.263}, {'end': 449.799, 'text': "So we'll set lists the style to none.", 'start': 446.137, 'duration': 3.662}, {'end': 455.162, 'text': 'OK And then we have a container class which wraps around everything.', 'start': 449.819, 'duration': 5.343}, {'end': 458.334, 'text': 'So we want that to take up almost the whole screen.', 'start': 455.731, 'duration': 2.603}, {'end': 461.077, 'text': "So we'll do width 90%.", 'start': 458.454, 'duration': 2.623}, {'end': 462.659, 'text': 'But we do want to set a max width.', 'start': 461.077, 'duration': 1.582}, {'end': 464.44, 'text': "We don't want it to pass a certain width.", 'start': 462.699, 'duration': 1.741}, {'end': 469.446, 'text': "So the max width I'm going to set to 1100 pixels.", 'start': 465.021, 'duration': 4.425}, {'end': 476.954, 'text': "And let's set the margin auto, which will give it even margin on all sides, which will put it in the middle.", 'start': 469.546, 'duration': 7.408}, {'end': 481.865, 'text': 'OK. so if we take a look, you can see that it takes up.', 'start': 478.063, 'duration': 3.802}, {'end': 485.368, 'text': "it'll take up 90 percent of the screen.", 'start': 481.865, 'duration': 3.503}, {'end': 488.71, 'text': 'up until you know, eleven hundred pixels, which is the max.', 'start': 485.368, 'duration': 3.342}, {'end': 490.251, 'text': "And that's where it'll stop.", 'start': 488.75, 'duration': 1.501}, {'end': 498.116, 'text': "OK, so let's jump back in here and let's start to style the navigation.", 'start': 491.772, 'duration': 6.344}], 'summary': 'Styling includes 90% width and 1100px max-width for the container class.', 'duration': 57.522, 'max_score': 440.594, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uKgn-To1C4Q/pics/uKgn-To1C4Q440594.jpg'}, {'end': 627.488, 'src': 'embed', 'start': 598.063, 'weight': 6, 'content': [{'end': 607.27, 'text': 'i want this to be a flex box as well, because everything within it should, um, should be a row, should be aligned horizontal.', 'start': 598.063, 'duration': 9.207}, {'end': 618.001, 'text': "so let's take the main nav ul And let's also display that to flex, which will set all the list items to be in a horizontal row.", 'start': 607.27, 'duration': 10.731}, {'end': 619.602, 'text': 'All right.', 'start': 618.021, 'duration': 1.581}, {'end': 625.326, 'text': "And then let's see for the main nav which is displayed flex.", 'start': 619.803, 'duration': 5.523}, {'end': 627.488, 'text': 'See all the space over here.', 'start': 626.087, 'duration': 1.401}], 'summary': 'Styling main nav ul in flex box creates horizontal alignment.', 'duration': 29.425, 'max_score': 598.063, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uKgn-To1C4Q/pics/uKgn-To1C4Q598063.jpg'}, {'end': 742.412, 'src': 'embed', 'start': 683.307, 'weight': 4, 'content': [{'end': 688.848, 'text': 'And by the way, this my resolution on my machine is this is a five K screen.', 'start': 683.307, 'duration': 5.541}, {'end': 694.569, 'text': 'So this might look a little smaller on my screen than it looks on yours.', 'start': 690.148, 'duration': 4.421}, {'end': 697.63, 'text': "So let's deal with the logo.", 'start': 696.329, 'duration': 1.301}, {'end': 700.35, 'text': "I'm going to go right here and say main nav.", 'start': 697.65, 'duration': 2.7}, {'end': 703.911, 'text': "There's a class of logo.", 'start': 702.131, 'duration': 1.78}, {'end': 710.942, 'text': "And I'm going to set the width of that to 110 pixels, which will make it much smaller.", 'start': 705.499, 'duration': 5.443}, {'end': 713.183, 'text': 'All right.', 'start': 710.962, 'duration': 2.221}, {'end': 718.105, 'text': "And then for this, for the list items here, actually, I didn't put a link.", 'start': 713.383, 'duration': 4.722}, {'end': 719.246, 'text': 'Yeah, I did put a link.', 'start': 718.346, 'duration': 0.9}, {'end': 722.047, 'text': 'There is for the list items here.', 'start': 719.666, 'duration': 2.381}, {'end': 723.708, 'text': 'We want to separate those.', 'start': 722.067, 'duration': 1.641}, {'end': 725.369, 'text': "So let's go to.", 'start': 724.349, 'duration': 1.02}, {'end': 740.088, 'text': "Let's go right here and say main nav ul li and set the padding to zero top and bottom and then 10 pixels on the left and right,", 'start': 728.148, 'duration': 11.94}, {'end': 742.412, 'text': 'which is going to separate those out from each other.', 'start': 740.088, 'duration': 2.324}], 'summary': 'Adjusting logo size to 110 pixels and list item padding for better visibility and separation.', 'duration': 59.105, 'max_score': 683.307, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uKgn-To1C4Q/pics/uKgn-To1C4Q683307.jpg'}, {'end': 1067.035, 'src': 'embed', 'start': 1036.221, 'weight': 1, 'content': [{'end': 1037.161, 'text': "So let's save that.", 'start': 1036.221, 'duration': 0.94}, {'end': 1039.222, 'text': 'And now we have our background image.', 'start': 1037.58, 'duration': 1.642}, {'end': 1044.842, 'text': "Now for the items inside, let's display them as flex items.", 'start': 1040.579, 'duration': 4.263}, {'end': 1051.766, 'text': "And if I do that right away, it's going to align them into a horizontal row, which I don't want.", 'start': 1045.423, 'duration': 6.343}, {'end': 1054.508, 'text': 'I want them to be in a column, which is vertical.', 'start': 1052.147, 'duration': 2.361}, {'end': 1058.911, 'text': "So let's set the flex direction to column.", 'start': 1054.588, 'duration': 4.323}, {'end': 1062.913, 'text': 'As soon as I do that, it goes back to going vertical.', 'start': 1059.731, 'duration': 3.182}, {'end': 1067.035, 'text': 'Now I want to align everything to the center.', 'start': 1064.274, 'duration': 2.761}], 'summary': 'Setting flex items to display in a vertical column and aligning them to the center.', 'duration': 30.814, 'max_score': 1036.221, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uKgn-To1C4Q/pics/uKgn-To1C4Q1036221.jpg'}, {'end': 1227.519, 'src': 'embed', 'start': 1200.72, 'weight': 0, 'content': [{'end': 1205.772, 'text': "Oops And then we'll go under our showcase, which is the header right here.", 'start': 1200.72, 'duration': 5.052}, {'end': 1209.013, 'text': "And I'm just going to make this a little bigger.", 'start': 1206.832, 'duration': 2.181}, {'end': 1212.414, 'text': 'All right.', 'start': 1209.033, 'duration': 3.381}, {'end': 1216.035, 'text': "So we're actually going to have two cards sections.", 'start': 1213.414, 'duration': 2.621}, {'end': 1219.856, 'text': 'So put a comment here and say home cards one.', 'start': 1216.375, 'duration': 3.481}, {'end': 1227.519, 'text': "And let's use a section HTML five section tag here and give it a class of home cards.", 'start': 1219.876, 'duration': 7.643}], 'summary': 'Creating two card sections for the home showcase.', 'duration': 26.799, 'max_score': 1200.72, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uKgn-To1C4Q/pics/uKgn-To1C4Q1200720.jpg'}], 'start': 412.422, 'title': 'Styling web page and navigation', 'summary': 'Covers setting line height to 1.5, adjusting link colors to 2.63 times lighter than black, removing underline from links, removing bullets from unordered lists, setting container width to 90% with a max width of 1100 pixels, and styling navigation using flex display to align items in a horizontal row.', 'chapters': [{'end': 543.278, 'start': 412.422, 'title': 'Styling web page and navigation', 'summary': 'Covers setting line height to 1.5, adjusting link colors to 2.63 times lighter than black, removing underline from links, removing bullets from unordered lists, setting container width to 90% with a max width of 1100 pixels, and styling navigation using flex display to align items in a horizontal row.', 'duration': 130.856, 'highlights': ['The chapter covers setting line height to 1.5 for better readability.', 'Adjusting link colors to 2.63 times lighter than black for improved visibility.', 'Setting container width to 90% with a max width of 1100 pixels for responsive design.', 'Styling navigation using flex display to align items in a horizontal row for improved layout.']}, {'end': 1227.519, 'start': 543.278, 'title': 'Styling navigation and showcase', 'summary': 'Details the styling of the main navigation bar and showcase section, including setting dimensions, flexbox properties, and hover effects. the main navigation bar is set to a height of 60 pixels with 13 pixels font size, and the showcase section is styled with a height of 400 pixels, utilizing flexbox properties for alignment.', 'duration': 684.241, 'highlights': ['The main navigation bar is set to a height of 60 pixels with 13 pixels font size. The main navigation bar is styled with a height of 60 pixels and a font size of 13 pixels.', 'The showcase section is styled with a height of 400 pixels, utilizing flexbox properties for alignment. The showcase section is set to a height of 400 pixels and uses flexbox properties for alignment of its contents.', 'Setting the main navigation unordered list to display as flexbox, aligning the list items horizontally. The main navigation unordered list is set to display as a flexbox, aligning the list items horizontally.', 'Adding a hover effect to the main navigation links by setting a border-bottom on hover. A hover effect is added to the main navigation links by setting a border-bottom on hover.']}], 'duration': 815.097, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uKgn-To1C4Q/pics/uKgn-To1C4Q412422.jpg', 'highlights': ['Adjusting link colors to 2.63 times lighter than black for improved visibility.', 'Setting container width to 90% with a max width of 1100 pixels for responsive design.', 'Styling navigation using flex display to align items in a horizontal row for improved layout.', 'The main navigation bar is set to a height of 60 pixels with 13 pixels font size.', 'The showcase section is styled with a height of 400 pixels, utilizing flexbox properties for alignment.', 'Setting the main navigation unordered list to display as flexbox, aligning the list items horizontally.', 'Adding a hover effect to the main navigation links by setting a border-bottom on hover.', 'The chapter covers setting line height to 1.5 for better readability.']}, {'end': 1793.287, 'segs': [{'end': 1401.464, 'src': 'embed', 'start': 1377.556, 'weight': 3, 'content': [{'end': 1386.743, 'text': "And with this, we could set each one to like like we could do, I don't know, 50 pixels, 50 pixels.", 'start': 1377.556, 'duration': 9.187}, {'end': 1388.325, 'text': "If I did that, it'll give us two.", 'start': 1386.803, 'duration': 1.522}, {'end': 1393.782, 'text': 'two columns that are 50 pixels wide, which is obviously not what we want.', 'start': 1389.821, 'duration': 3.961}, {'end': 1398.423, 'text': 'If we wanted four, we would just do 50 pixels, 50 pixels.', 'start': 1394.582, 'duration': 3.841}, {'end': 1401.464, 'text': "That'll give us four that are 50 pixels wide.", 'start': 1398.783, 'duration': 2.681}], 'summary': 'Setting each column to 50 pixels width gives 2 or 4 columns, not the desired outcome.', 'duration': 23.908, 'max_score': 1377.556, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uKgn-To1C4Q/pics/uKgn-To1C4Q1377556.jpg'}, {'end': 1462.017, 'src': 'embed', 'start': 1435.56, 'weight': 0, 'content': [{'end': 1442.365, 'text': 'Now, instead of doing it like this, we have a function called repeat we can use, and we can say repeat four times one FR.', 'start': 1435.56, 'duration': 6.805}, {'end': 1445.47, 'text': 'And we get the same result.', 'start': 1444.369, 'duration': 1.101}, {'end': 1450.392, 'text': "Now, the reason that it's kind of going off the page here is because of the images.", 'start': 1445.91, 'duration': 4.482}, {'end': 1459.396, 'text': 'Images are always going to go out of their container unless we set the width to be restricted to be 100 percent of the container.', 'start': 1451.032, 'duration': 8.364}, {'end': 1462.017, 'text': "So let's say home cards image.", 'start': 1459.936, 'duration': 2.081}], 'summary': "Using the 'repeat' function 4 times, the images can be set to 100% of the container to prevent overflow.", 'duration': 26.457, 'max_score': 1435.56, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uKgn-To1C4Q/pics/uKgn-To1C4Q1435560.jpg'}, {'end': 1638.258, 'src': 'embed', 'start': 1612.6, 'weight': 1, 'content': [{'end': 1619.226, 'text': "So what we'll do is take the home cards and say when we hover over the link, when the link is in the hover state,", 'start': 1612.6, 'duration': 6.626}, {'end': 1625.331, 'text': 'then we want to take the icon and we want to just add a margin left to it of 10 pixels.', 'start': 1619.226, 'duration': 6.105}, {'end': 1630.836, 'text': 'Okay, so that way when I hover over, you can see it just kind of pushes out a little bit.', 'start': 1626.772, 'duration': 4.064}, {'end': 1635.036, 'text': 'So that takes care of the first set of home cards.', 'start': 1632.594, 'duration': 2.442}, {'end': 1638.258, 'text': 'Now we want the Xbox area, which is this.', 'start': 1635.116, 'duration': 3.142}], 'summary': 'Modify home cards to add 10px margin-left on hover, pushing out the icon.', 'duration': 25.658, 'max_score': 1612.6, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uKgn-To1C4Q/pics/uKgn-To1C4Q1612600.jpg'}], 'start': 1229.162, 'title': 'Grid display and media queries in css', 'summary': "Discusses using css grid to create a four-column grid layout with specific styling properties like 'grid-template-columns' and 'grid gap'. it also covers styling elements using css properties and setting media queries at 700 pixels.", 'chapters': [{'end': 1485.874, 'start': 1229.162, 'title': 'Grid display styling in css', 'summary': "Discusses using css grid to create a grid layout for displaying multiple card elements, utilizing 'display: grid', 'grid-template-columns', 'fractional units' (fr), and 'grid gap' for styling, with the goal of creating a four-column grid layout and ensuring images do not overflow their containers.", 'duration': 256.712, 'highlights': ["CSS grid is used to create a four-column layout, achieved by setting the 'grid-template-columns' property to 'repeat 4 times 1FR', resulting in four columns of equal width.", "Utilizing 'fractional units' (FR) allows for easily dividing the grid container into slices, with '1FR' representing one column, '2FR' representing two columns, and so on.", "Setting the width of images to '100%' of the container prevents them from overflowing their grid column, ensuring proper display within the layout.", "The 'grid gap' property is employed to create spacing between the grid items, eliminating the need to use margin for separating the items."]}, {'end': 1793.287, 'start': 1485.914, 'title': 'Styling elements and media queries', 'summary': 'Covers styling elements in a webpage using various css properties such as grid gap, margin, padding, color, text transform, and font weight, with specific pixel values for spacing and dimensions, and also mentions the plan for media queries at 700 pixels.', 'duration': 307.373, 'highlights': ['The chapter covers styling elements in a webpage using various CSS properties such as grid gap, margin, padding, color, text transform, and font weight, with specific pixel values for spacing and dimensions (e.g., 20 pixels for grid gap, margin bottom, and margin bottom for images, 5 pixels for margin bottom of H3, and 10 pixels for padding top of links) and also mentions the plan for media queries at 700 pixels.', 'The plan for media queries at 700 pixels is mentioned, indicating a change in layout, e.g., having two columns, after reaching 700 pixels in the webpage, demonstrating responsiveness to different screen sizes.', 'Specific CSS properties and values are used to style elements, such as setting a bluish color with the hexadecimal value of 0067B8, displaying links as inline block, setting text to uppercase, and making them bold, along with the visual effect of hovering over links, which pushes out a Chevron icon by adding a margin left of 10 pixels, ensuring a visually appealing user experience.']}], 'duration': 564.125, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uKgn-To1C4Q/pics/uKgn-To1C4Q1229162.jpg', 'highlights': ["CSS grid is used to create a four-column layout, achieved by setting the 'grid-template-columns' property to 'repeat 4 times 1FR', resulting in four columns of equal width.", 'The plan for media queries at 700 pixels is mentioned, indicating a change in layout, e.g., having two columns, after reaching 700 pixels in the webpage, demonstrating responsiveness to different screen sizes.', "Utilizing 'fractional units' (FR) allows for easily dividing the grid container into slices, with '1FR' representing one column, '2FR' representing two columns, and so on.", 'Specific CSS properties and values are used to style elements, such as setting a bluish color with the hexadecimal value of 0067B8, displaying links as inline block, setting text to uppercase, and making them bold, along with the visual effect of hovering over links, which pushes out a Chevron icon by adding a margin left of 10 pixels, ensuring a visually appealing user experience.']}, {'end': 2179.529, 'segs': [{'end': 1850.406, 'src': 'embed', 'start': 1794.15, 'weight': 0, 'content': [{'end': 1796.151, 'text': 'OK, so now we have our background image.', 'start': 1794.15, 'duration': 2.001}, {'end': 1799.532, 'text': 'Now we have to style the content that is within it.', 'start': 1796.211, 'duration': 3.321}, {'end': 1802.814, 'text': 'So remember, we have a class of content.', 'start': 1800.593, 'duration': 2.221}, {'end': 1806.495, 'text': 'So Xbox and then we want the content class inside of that.', 'start': 1802.834, 'duration': 3.661}, {'end': 1811.677, 'text': "And I'm just going to set a width of 40 percent because I don't want to spread all the way across.", 'start': 1807.095, 'duration': 4.582}, {'end': 1813.058, 'text': 'So that kind of contains it.', 'start': 1811.737, 'duration': 1.321}, {'end': 1825.426, 'text': "um to the left, here and then for the padding, let's do 50 on the top, 0, 0 and then 30 pixels on the left, just to push it down and out.", 'start': 1813.798, 'duration': 11.628}, {'end': 1828.488, 'text': 'okay, and then the paragraph.', 'start': 1825.426, 'duration': 3.062}, {'end': 1838.395, 'text': "let's see, let's say xbox paragraph, and i'm going to set a margin of 10.", 'start': 1828.488, 'duration': 9.907}, {'end': 1846.161, 'text': "let's do 10, 0, 20, just to kind of break this up a little bit, And then that should be it.", 'start': 1838.395, 'duration': 7.766}, {'end': 1850.406, 'text': "Yeah So the next thing, let's see what's after that.", 'start': 1846.782, 'duration': 3.624}], 'summary': 'Styling the content within the background image, setting width to 40%, padding 50px, 0, 0, 30px, and margin of 10px, 0, 20px.', 'duration': 56.256, 'max_score': 1794.15, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uKgn-To1C4Q/pics/uKgn-To1C4Q1794150.jpg'}, {'end': 2068.527, 'src': 'embed', 'start': 2017.463, 'weight': 1, 'content': [{'end': 2019.864, 'text': 'Say this is the carbon section.', 'start': 2017.463, 'duration': 2.401}, {'end': 2033.305, 'text': "Okay, so for this, for carbon, we're going to set the height to 350.", 'start': 2024.699, 'duration': 8.606}, {'end': 2038.729, 'text': "So it's basically just like the Xbox one, height and width of 100, yeah, 100%.", 'start': 2033.305, 'duration': 5.424}, {'end': 2042.231, 'text': 'And then a background image.', 'start': 2038.729, 'duration': 3.502}, {'end': 2052.478, 'text': 'So this is image slash carbon.jpg.', 'start': 2048.916, 'duration': 3.562}, {'end': 2062.063, 'text': 'No repeat center center and cover.', 'start': 2055.161, 'duration': 6.902}, {'end': 2066.806, 'text': 'OK And by the way, this is the background repeat property.', 'start': 2062.083, 'duration': 4.723}, {'end': 2068.527, 'text': 'This is the background position.', 'start': 2066.886, 'duration': 1.641}], 'summary': 'Setting the carbon section height to 350 with background image carbon.jpg and properties.', 'duration': 51.064, 'max_score': 2017.463, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uKgn-To1C4Q/pics/uKgn-To1C4Q2017463.jpg'}], 'start': 1794.15, 'title': 'Styling content and carbon section', 'summary': 'Covers styling the content within a background image, setting a width of 40 percent and adjusting padding and margins, followed by reusing the same styling for another set of cards. it also covers styling a carbon section, setting the height to 350, width to 100%, and adding a background image with no repeat. additionally, it includes setting the color and background for the text and button within the section.', 'chapters': [{'end': 1902.29, 'start': 1794.15, 'title': 'Styling content for background image', 'summary': 'Covers styling the content within a background image, setting a width of 40 percent and adjusting padding and margins, followed by reusing the same styling for another set of cards.', 'duration': 108.14, 'highlights': ['The chapter covers styling the content within a background image, setting a width of 40 percent and adjusting padding and margins, followed by reusing the same styling for another set of cards.', 'The classes and same styling can be reused for another set of cards, with the only difference being the content within the divs, such as different images and text.', 'Setting a width of 40 percent for the content inside the background image to contain it and adjusting padding and margins for proper positioning.', 'Reusing the same classes and styling for another set of cards to maintain consistency and efficiency in the design.']}, {'end': 2179.529, 'start': 1903.23, 'title': 'Styling carbon section', 'summary': 'Covers the styling of a carbon section, setting the height to 350, width to 100%, and adding a background image with no repeat. additionally, it includes setting the color and background for the text and button within the section.', 'duration': 276.299, 'highlights': ["The carbon section's height is set to 350, with a width of 100%, and a background image is added with no repeat, center, and cover.", "A utility class called 'dark' is used to set the color of the text and button within the carbon section to light and light gray background, respectively.", 'The width of the content within the carbon section is set to 55%, with padding of 100 pixels from the top and 30 pixels on the left.']}], 'duration': 385.379, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uKgn-To1C4Q/pics/uKgn-To1C4Q1794150.jpg', 'highlights': ['Reusing the same classes and styling for another set of cards to maintain consistency and efficiency in the design.', "The carbon section's height is set to 350, with a width of 100%, and a background image is added with no repeat, center, and cover.", 'Setting a width of 40 percent for the content inside the background image to contain it and adjusting padding and margins for proper positioning.', "A utility class called 'dark' is used to set the color of the text and button within the carbon section to light and light gray background, respectively."]}, {'end': 3159.98, 'segs': [{'end': 2341.975, 'src': 'embed', 'start': 2312.654, 'weight': 3, 'content': [{'end': 2316.777, 'text': 'And you can see the image here and the follow Microsoft, so we want to style this a little bit.', 'start': 2312.654, 'duration': 4.123}, {'end': 2320.72, 'text': 'We want this to we want to follow Microsoft to be in line with the rest of these.', 'start': 2316.817, 'duration': 3.903}, {'end': 2322.241, 'text': "So let's use flex for that.", 'start': 2320.78, 'duration': 1.461}, {'end': 2329.106, 'text': "So in our CSS under carbon, let's do our follow styles.", 'start': 2324.022, 'duration': 5.084}, {'end': 2336.712, 'text': "So we'll take follow and let's display flex.", 'start': 2330.709, 'duration': 6.003}, {'end': 2341.975, 'text': "And as soon as I save that, it's going to turn it into a flex row, which is what we want.", 'start': 2337.052, 'duration': 4.923}], 'summary': "Styling the 'follow microsoft' section with flex to align with rest of the content.", 'duration': 29.321, 'max_score': 2312.654, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uKgn-To1C4Q/pics/uKgn-To1C4Q2312654.jpg'}, {'end': 2700.709, 'src': 'embed', 'start': 2673.855, 'weight': 2, 'content': [{'end': 2680.496, 'text': 'And then overall padding for the links section is going to be 35 on the top and bottom.', 'start': 2673.855, 'duration': 6.641}, {'end': 2683.657, 'text': "OK, so if I save that, that's what it's going to look like.", 'start': 2680.516, 'duration': 3.141}, {'end': 2689.761, 'text': 'Now for the links inner, I want that to be a grid.', 'start': 2685.057, 'duration': 4.704}, {'end': 2700.709, 'text': 'OK. so if we look at this links inner, if we set this to display grid, every direct child will be a grid item and every direct child is a UL right?', 'start': 2689.781, 'duration': 10.928}], 'summary': 'Padding for links section: 35 on top and bottom. links inner to be a grid.', 'duration': 26.854, 'max_score': 2673.855, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uKgn-To1C4Q/pics/uKgn-To1C4Q2673855.jpg'}, {'end': 2900.737, 'src': 'embed', 'start': 2852.954, 'weight': 0, 'content': [{'end': 2855.115, 'text': "Now, let's do this footer part down here.", 'start': 2852.954, 'duration': 2.161}, {'end': 2865.378, 'text': 'So we have a class of footer and I want the background.', 'start': 2859.896, 'duration': 5.482}, {'end': 2873.761, 'text': 'Background is going to be the same gray, which is F2 and color, same color.', 'start': 2868.139, 'duration': 5.622}, {'end': 2877.834, 'text': 'as the links.', 'start': 2877.114, 'duration': 0.72}, {'end': 2891.021, 'text': 'OK good font size 12 pixels and padding 20 on the top and bottom.', 'start': 2877.854, 'duration': 13.167}, {'end': 2896.544, 'text': 'Good And then we also have a footer inner.', 'start': 2893.863, 'duration': 2.681}, {'end': 2900.737, 'text': "So let's say footer dash enter.", 'start': 2898.616, 'duration': 2.121}], 'summary': 'Styling the footer with gray background, 12px font size, and 20px padding.', 'duration': 47.783, 'max_score': 2852.954, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uKgn-To1C4Q/pics/uKgn-To1C4Q2852954.jpg'}, {'end': 3137.287, 'src': 'embed', 'start': 3099.574, 'weight': 1, 'content': [{'end': 3102.637, 'text': 'See how this icon is like right on top of the word English.', 'start': 3099.574, 'duration': 3.063}, {'end': 3104.658, 'text': "So we'll take.", 'start': 3103.897, 'duration': 0.761}, {'end': 3109.982, 'text': "Let's see here, we'll say footer.", 'start': 3107.22, 'duration': 2.762}, {'end': 3113.524, 'text': 'Div icon.', 'start': 3112.304, 'duration': 1.22}, {'end': 3119.669, 'text': "And just add a margin right of let's do 10 pixels.", 'start': 3115.626, 'duration': 4.043}, {'end': 3123.755, 'text': 'OK, so I think that looks pretty good.', 'start': 3121.693, 'duration': 2.062}, {'end': 3126.878, 'text': 'I mean, this is yeah, this looks decent on full screen.', 'start': 3123.775, 'duration': 3.103}, {'end': 3135.226, 'text': "Now, if we go down to, you know, 700, 500 pixels, 600 pixels, it doesn't look very good.", 'start': 3128.259, 'duration': 6.967}, {'end': 3137.287, 'text': 'So we do have some stuff to do here.', 'start': 3135.346, 'duration': 1.941}], 'summary': 'Adding a margin of 10 pixels to the footer div icon improved the appearance, but issues remain at smaller screen sizes.', 'duration': 37.713, 'max_score': 3099.574, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uKgn-To1C4Q/pics/uKgn-To1C4Q3099574.jpg'}], 'start': 2179.569, 'title': 'Styling website elements', 'summary': 'Covers adding a follow section with social media links and styling it using flex, aligning items with flexbox, creating sections, incorporating containers, and styling the html footer with grid layout and media queries for responsiveness.', 'chapters': [{'end': 2336.712, 'start': 2179.569, 'title': 'Adding follow section and styling', 'summary': 'Involves adding a follow section with links to social media sites such as facebook, twitter, and linkedin, and styling it using flex in the css.', 'duration': 157.143, 'highlights': ['Adding a follow section with links to social media sites like Facebook, Twitter, and LinkedIn.', 'Styling the follow section using flex in the CSS.']}, {'end': 2501.629, 'start': 2337.052, 'title': 'Styling website layout with flexbox', 'summary': 'Covers aligning items with flexbox, adding margins and spacing, creating sections and incorporating containers for background color extension.', 'duration': 164.577, 'highlights': ['The chapter covers aligning items with flexbox, adding margins and spacing, creating sections and incorporating containers for background color extension.', 'The tutorial demonstrates aligning the paragraph to the center using the flexbox and justifying content to the start, applying a 30-pixel top margin and 0 left/right margins.', 'The tutorial showcases adding spacing between elements using the asterisk selector to apply a 10-pixel margin right to the items.', "The tutorial explains creating sections for the footer with a class of 'links' and 'links inner' to ensure the background color extends all the way out.", 'The tutorial outlines the implementation of unordered lists with list items for the links, including an H3 title and subsequent link items.']}, {'end': 2819.308, 'start': 2504.167, 'title': 'Html footer styling', 'summary': 'Discusses how to style the html footer, including setting background color, text color, font size, and grid layout, with a focus on aligning ul elements in grid columns and applying media queries for responsiveness.', 'duration': 315.141, 'highlights': ['The chapter discusses how to style the HTML footer, including setting background color, text color, font size, and grid layout, with a focus on aligning UL elements in grid columns and applying media queries for responsiveness.', "The footer is implemented using the HTML5 footer tag with a class 'main-footer', and the inner content is constrained to a max width of 1100 pixels for alignment and padding.", 'Links within the footer are styled with a gray background color (F2F3F2) and lighter text color (613F3F), with a font size of 12 pixels and overall padding of 35 pixels on the top and bottom.', "The 'links inner' section is set to display as a grid, with a max width of 1100 pixels, and the UL elements are aligned in grid columns using 'grid-template-columns' and 'grid-gap' properties."]}, {'end': 3159.98, 'start': 2821.218, 'title': 'Styling footer and media queries', 'summary': 'Details the process of styling the footer by adjusting the background, color, font size, padding, and display properties, followed by the implementation of media queries for responsive design between 600 and 700 pixels.', 'duration': 338.762, 'highlights': ['The footer styling includes setting the background color to F2, font size to 12 pixels, and padding to 20 on the top and bottom, with the inner footer elements aligned using flex display and max width set to 1100. The background color for the footer is set to F2, font size is adjusted to 12 pixels, and padding is set to 20 on the top and bottom. Inner footer elements are aligned using flex display with the max width set to 1100.', 'The UL (unordered list) within the footer is configured to display as flex, allowing the list items to be shown in a row and wrap when the screen size is reduced, ensuring that the links do not go off the screen. The UL within the footer is configured to display as flex to show the list items in a row and wrap when the screen size is reduced, preventing the links from going off the screen.', "Media queries are set to be implemented for responsive design between 600 and 700 pixels, addressing the need for adjustments to ensure the website's responsiveness within this range. Media queries are planned to be implemented for responsive design between 600 and 700 pixels, aiming to ensure the website's responsiveness within this specific range."]}], 'duration': 980.411, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uKgn-To1C4Q/pics/uKgn-To1C4Q2179569.jpg', 'highlights': ['The chapter covers aligning items with flexbox, adding margins and spacing, creating sections, and incorporating containers for background color extension.', 'The tutorial demonstrates aligning the paragraph to the center using flexbox and justifying content to the start, applying a 30-pixel top margin and 0 left/right margins.', 'The tutorial outlines the implementation of unordered lists with list items for the links, including an H3 title and subsequent link items.', 'The chapter discusses how to style the HTML footer, including setting background color, text color, font size, and grid layout, with a focus on aligning UL elements in grid columns and applying media queries for responsiveness.']}, {'end': 3654.898, 'segs': [{'end': 3216.58, 'src': 'embed', 'start': 3185.016, 'weight': 3, 'content': [{'end': 3191.821, 'text': "Let's start off with the cards, the home cards, which is going to be pretty easy, because right now we have,", 'start': 3185.016, 'duration': 6.805}, {'end': 3195.084, 'text': 'if we go back up here to where we have the home cards.', 'start': 3191.821, 'duration': 3.263}, {'end': 3200.122, 'text': 'We have display grid and then our grid template columns.', 'start': 3197.179, 'duration': 2.943}, {'end': 3202.405, 'text': 'We have four columns.', 'start': 3200.523, 'duration': 1.882}, {'end': 3204.247, 'text': 'Right You can see right here four columns.', 'start': 3202.465, 'duration': 1.782}, {'end': 3207.71, 'text': 'I want to change it to two on 700 pixels and below.', 'start': 3204.587, 'duration': 3.123}, {'end': 3216.58, 'text': "So I'm going to just take this grid template columns and put that right in here and just change this to two.", 'start': 3207.73, 'duration': 8.85}], 'summary': 'The home cards layout will be adjusted to two columns on screens 700 pixels and below.', 'duration': 31.564, 'max_score': 3185.016, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uKgn-To1C4Q/pics/uKgn-To1C4Q3185016.jpg'}, {'end': 3258.59, 'src': 'embed', 'start': 3232.53, 'weight': 1, 'content': [{'end': 3239.614, 'text': "I do want just one when it's on 500 pixels or less, but we'll do that in a minute.", 'start': 3232.53, 'duration': 7.084}, {'end': 3241.556, 'text': "Let's just get this set up first.", 'start': 3239.915, 'duration': 1.641}, {'end': 3243.197, 'text': 'This is basically like a tablet view.', 'start': 3241.576, 'duration': 1.621}, {'end': 3246.299, 'text': "So the Xbox, this doesn't look too good.", 'start': 3244.237, 'duration': 2.062}, {'end': 3253.545, 'text': "I think the only thing I want to change here is make it so that there's no paragraph.", 'start': 3246.319, 'duration': 7.226}, {'end': 3256.988, 'text': "So it's just Xbox game ultimate and then the button.", 'start': 3253.946, 'duration': 3.042}, {'end': 3258.59, 'text': "So that's really easy.", 'start': 3257.549, 'duration': 1.041}], 'summary': 'Adjust layout for xbox game ultimate to improve appearance on smaller screens.', 'duration': 26.06, 'max_score': 3232.53, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uKgn-To1C4Q/pics/uKgn-To1C4Q3232530.jpg'}, {'end': 3330.832, 'src': 'embed', 'start': 3302.218, 'weight': 0, 'content': [{'end': 3309.342, 'text': "Instead of taking away the paragraph, though, I'm just going to make this this content stretch out further.", 'start': 3302.218, 'duration': 7.124}, {'end': 3315.645, 'text': "OK, I didn't want to do that here because we won't be able to read the text just the way the way this background images.", 'start': 3309.362, 'duration': 6.283}, {'end': 3317.706, 'text': 'And you could handle this many different ways.', 'start': 3315.985, 'duration': 1.721}, {'end': 3319.066, 'text': 'You could switch out the image.', 'start': 3317.746, 'duration': 1.32}, {'end': 3322.408, 'text': 'You can change images based on screen size if you want.', 'start': 3319.426, 'duration': 2.982}, {'end': 3330.832, 'text': "But I'm going to go ahead and set the carbon content, which I believe is fifty five percent with.", 'start': 3323.408, 'duration': 7.424}], 'summary': 'The content can be stretched out to accommodate background images, and the carbon content is 55%.', 'duration': 28.614, 'max_score': 3302.218, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uKgn-To1C4Q/pics/uKgn-To1C4Q3302218.jpg'}], 'start': 3160.08, 'title': 'Responsive design implementation and styling web elements', 'summary': 'Discusses implementing responsive design for screens below 700 and 500 pixels, including adjusting grid template columns, changing content display, and managing background images. it also focuses on setting carbon content, arranging columns, adding media queries, and positioning a menu button for different screen sizes, with specific details on css properties and values.', 'chapters': [{'end': 3322.408, 'start': 3160.08, 'title': 'Responsive design implementation', 'summary': 'Discusses implementing responsive design for screens below 700 and 500 pixels, including adjusting grid template columns, changing content display, and managing background images.', 'duration': 162.328, 'highlights': ['Adjusting grid template columns for home cards to display two columns on screens below 700 pixels. The grid template columns for home cards is changed to two columns on screens 700 pixels and below, optimizing the layout for smaller screens.', 'Setting Xbox content paragraph to display none on screens 500 pixels or less and adding margin to Xbox content H2. The Xbox content paragraph is set to display none on screens 500 pixels or less, and a margin of 20 pixels is added to Xbox content H2, enhancing the appearance of the content on smaller screens.', 'Adapting the content layout for screens below 500 pixels by adjusting content stretching and background images. The content layout is adapted for screens below 500 pixels by adjusting content stretching and managing background images to ensure readability and visual appeal on smaller screens.']}, {'end': 3654.898, 'start': 3323.408, 'title': 'Styling and positioning web elements', 'summary': 'Focused on setting carbon content, arranging columns, adding media queries, and positioning a menu button for different screen sizes, with specific details on css properties and values.', 'duration': 331.49, 'highlights': ['The chapter addressed setting carbon content, changing the arrangement of columns, and adding media queries for different screen sizes, including specific CSS properties and values for styling.', "It detailed the process of positioning a menu button using CSS properties such as 'position', 'z-index', and 'display', with specific pixel values for top and right positioning.", "The transcript also included the use of media queries to control the display of elements based on screen size, with specific pixel values for the media query breakpoints and the 'display' property.", "It included details on using CSS properties such as 'grid-template-columns' and 'repeat' to adjust the layout of elements based on screen size, with specific examples of column and fractional unit values.", "The chapter also covered adding margin properties to create space between elements, with a specific pixel value for the 'margin-bottom' property."]}], 'duration': 494.818, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uKgn-To1C4Q/pics/uKgn-To1C4Q3160080.jpg', 'highlights': ['The chapter addressed setting carbon content, changing the arrangement of columns, and adding media queries for different screen sizes, including specific CSS properties and values for styling.', "The transcript also included the use of media queries to control the display of elements based on screen size, with specific pixel values for the media query breakpoints and the 'display' property.", "It detailed the process of positioning a menu button using CSS properties such as 'position', 'z-index', and 'display', with specific pixel values for top and right positioning.", 'Adjusting grid template columns for home cards to display two columns on screens below 700 pixels. The grid template columns for home cards is changed to two columns on screens 700 pixels and below, optimizing the layout for smaller screens.', 'Adapting the content layout for screens below 500 pixels by adjusting content stretching and background images. The content layout is adapted for screens below 500 pixels by adjusting content stretching and managing background images to ensure readability and visual appeal on smaller screens.']}, {'end': 4257.431, 'segs': [{'end': 3900.53, 'src': 'embed', 'start': 3870.945, 'weight': 1, 'content': [{'end': 3877.413, 'text': 'so i wanted to just do this to show you guys, so i could actually style it and you could see it.', 'start': 3870.945, 'duration': 6.468}, {'end': 3885.764, 'text': "but initially this is going to be set to negative 500 where it's off the screen, and then what's going to happen is if we have a class of show.", 'start': 3877.413, 'duration': 8.351}, {'end': 3894.045, 'text': "so i'm just going to go down here and set this main nav ul dot, main menu.", 'start': 3885.764, 'duration': 8.281}, {'end': 3900.53, 'text': "And if it has a class of show then we're going to have a display like we just had it.", 'start': 3895.306, 'duration': 5.224}], 'summary': "Demonstrating styling with initial position set at -500, and conditional display based on class 'show'.", 'duration': 29.585, 'max_score': 3870.945, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uKgn-To1C4Q/pics/uKgn-To1C4Q3870945.jpg'}, {'end': 4107.366, 'src': 'embed', 'start': 4071.098, 'weight': 4, 'content': [{'end': 4073.239, 'text': 'And then we want to add an event listener.', 'start': 4071.098, 'duration': 2.141}, {'end': 4079.801, 'text': "So we'll call dot add event listener and this will take in the event we want to listen for, which is a click.", 'start': 4074.219, 'duration': 5.582}, {'end': 4081.762, 'text': 'And it also takes in a function.', 'start': 4080.241, 'duration': 1.521}, {'end': 4083.642, 'text': "I'm just going to use an arrow function here.", 'start': 4081.782, 'duration': 1.86}, {'end': 4090.044, 'text': 'And all we want to happen now is to add that show class to the main menu.', 'start': 4084.803, 'duration': 5.241}, {'end': 4092.465, 'text': "So we'll select the main menu document dot.", 'start': 4090.084, 'duration': 2.381}, {'end': 4107.366, 'text': "We'll use query selector here again, and we'll take the class of main menu, and we're going to say dot class list.", 'start': 4093.836, 'duration': 13.53}], 'summary': 'Add event listener for click event to show class in main menu', 'duration': 36.268, 'max_score': 4071.098, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uKgn-To1C4Q/pics/uKgn-To1C4Q4071098.jpg'}, {'end': 4151.718, 'src': 'embed', 'start': 4124.174, 'weight': 3, 'content': [{'end': 4129.339, 'text': 'when we hit the menu button, which is this we want to listen for a click.', 'start': 4124.174, 'duration': 5.165}, {'end': 4137.265, 'text': "okay, so as soon as we click it, it'll run this function it'll select the main menu, which is that whole menu that we just styled.", 'start': 4129.339, 'duration': 7.926}, {'end': 4142.39, 'text': "that's not showing right now, because it's off the screen and it'll add the class of show.", 'start': 4137.265, 'duration': 5.125}, {'end': 4151.718, 'text': 'and as soon as that happens, when that show class is added, it goes from translate X negative 500,, which pushes it off the screen,', 'start': 4142.39, 'duration': 9.328}], 'summary': "Clicking the menu button triggers a function to display the main menu by adding the 'show' class, transitioning from translate x negative 500.", 'duration': 27.544, 'max_score': 4124.174, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uKgn-To1C4Q/pics/uKgn-To1C4Q4124174.jpg'}, {'end': 4207.66, 'src': 'embed', 'start': 4179.979, 'weight': 2, 'content': [{'end': 4187.743, 'text': "So, right under the transform, let's add a transition, and it needs to know what property do we want to add the transition on,", 'start': 4179.979, 'duration': 7.764}, {'end': 4189.205, 'text': "and that's going to be the transform.", 'start': 4187.743, 'duration': 1.462}, {'end': 4193.707, 'text': 'Because the transform is what changes this translate X value.', 'start': 4190.064, 'duration': 3.643}, {'end': 4201.316, 'text': "And then the time it takes let's say zero point five seconds and then the effect which will use ease in out.", 'start': 4194.491, 'duration': 6.825}, {'end': 4207.66, 'text': 'So now if I go ahead and I click this now it slides in it has a transition.', 'start': 4202.116, 'duration': 5.544}], 'summary': 'Add a 0.5-second transition with ease in-out effect to the transform property for a sliding effect.', 'duration': 27.681, 'max_score': 4179.979, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uKgn-To1C4Q/pics/uKgn-To1C4Q4179979.jpg'}, {'end': 4257.431, 'src': 'embed', 'start': 4254.33, 'weight': 0, 'content': [{'end': 4255.03, 'text': 'Thanks for watching.', 'start': 4254.33, 'duration': 0.7}, {'end': 4257.431, 'text': "I really appreciate it and I'll see you in the next video.", 'start': 4255.09, 'duration': 2.341}], 'summary': 'Appreciation for viewers; commitment to future videos.', 'duration': 3.101, 'max_score': 4254.33, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uKgn-To1C4Q/pics/uKgn-To1C4Q4254330.jpg'}], 'start': 3655.819, 'title': 'Styling main menu and css menu animation', 'summary': 'Covers styling the main menu with a 50% width, 30px padding, and hover effect, and demonstrates css menu animation, responsiveness, dynamic class addition, smooth transitions, and screen-size responsiveness.', 'chapters': [{'end': 3894.045, 'start': 3655.819, 'title': 'Styling main menu and adding hover effect', 'summary': 'Covers styling the main menu by setting its display to block, positioning it absolutely with a 50% width, adding a 30px padding, and creating a hover effect with a 0.5 opacity on the menu button.', 'duration': 238.226, 'highlights': ['Styling the main menu by setting its display to block, positioning it absolutely with a 50% width, and adding a 30px padding.', 'Creating a hover effect on the menu button by setting its opacity to 0.5.', 'Positioning the main menu off-screen initially with a translate X of -500.']}, {'end': 4257.431, 'start': 3895.306, 'title': 'Css menu animation & responsiveness', 'summary': 'Demonstrates the implementation of a css menu animation and responsiveness, including adding classes dynamically with javascript, styling menu items, adding transitions for smooth animations, and achieving responsiveness for different screen sizes.', 'duration': 362.125, 'highlights': ['The chapter demonstrates the implementation of a CSS menu animation and responsiveness, including adding classes dynamically with JavaScript, styling menu items, adding transitions for smooth animations, and achieving responsiveness for different screen sizes.', "The menu animation is achieved by toggling the 'show' class, transitioning the menu from a translation of X -500 to -20 pixels, and adding a transition property with a duration of 0.5 seconds and an ease-in-out effect for smooth animation.", 'The menu items are styled by adding padding of 10 pixels, a bottom border of 1 pixel, and increasing the font size to 14, with the last item having its bottom border removed using a pseudo selector.', 'The responsiveness for different screen sizes is demonstrated, with the menu adapting to different screen sizes and the menu items stacking into a single column at smaller screen sizes.']}], 'duration': 601.612, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/uKgn-To1C4Q/pics/uKgn-To1C4Q3655819.jpg', 'highlights': ['Demonstrates CSS menu animation and responsiveness with dynamic class addition and smooth transitions.', 'Styling the main menu with a 50% width and 30px padding.', 'Positioning the main menu off-screen initially with a translate X of -500.', 'Creating a hover effect on the menu button by setting its opacity to 0.5.', 'Achieving responsiveness for different screen sizes, with the menu items stacking into a single column at smaller screen sizes.']}], 'highlights': ['The project involves cloning the Microsoft.com home page using modern CSS techniques such as CSS grid, Flexbox, and media queries to achieve a fully responsive design.', 'Utilizing HTML5 tags such as nav tag for structuring the page and improving semantic markup.', 'Adding a link tag to the style CSS for linking the style sheet to the HTML page.', 'Incorporating a small amount of JavaScript to enable menu functionality, allowing the menu to slide open on smaller screens.', 'Creating main navigation with a logo, main menu, and right menu. The main navigation includes a logo, main menu with list items, and a right menu with font awesome icons.', 'Initial styling of the navigation with a font size of 15 pixels and a white background. Setting the font size to 15 pixels and the background color to white for the navigation.', 'Adjusting link colors to 2.63 times lighter than black for improved visibility.', 'Setting container width to 90% with a max width of 1100 pixels for responsive design.', "CSS grid is used to create a four-column layout, achieved by setting the 'grid-template-columns' property to 'repeat 4 times 1FR', resulting in four columns of equal width.", 'Reusing the same classes and styling for another set of cards to maintain consistency and efficiency in the design.', 'The chapter covers aligning items with flexbox, adding margins and spacing, creating sections, and incorporating containers for background color extension.', 'Demonstrates CSS menu animation and responsiveness with dynamic class addition and smooth transitions.', 'Achieving responsiveness for different screen sizes, with the menu items stacking into a single column at smaller screen sizes.']}