title
Build a Starbucks Landing Page Clone

description
In this video, we will build the homepage of Starbucks.com from scratch with HTML, CSS and a bit of JavaScript Code: https://github.com/bradtraversy/starbucks-homepage 👇 Website & Courses: https://traversymedia.com https://freelancemastery.dev 💖 Show Support Patreon: https://www.patreon.com/traversymedia PayPal: https://paypal.me/traversymedia 👇 Follow Me On Social Media: Twitter: https://twitter.com/traversymedia Instagram: https://www.instagram.com/traversymedia Linkedin: https://www.linkedin.com/in/bradtraversy Timestamps: 0:00 - Intro 1:27 - Navbar HTML 7:05 - Base & Navbar CSS 18:41 - Button Styles 23:33 - Box A & Utility Classes 35:10 - Other Boxes & Grids 50:13 - Footer & Social Icons 55:13 - Responsive Grid Styles 58:05 - Hamburger Icon & Transition 1:03:00 - Nav Toggle JavaScript 1:07:50 - Mobile Menu

detail
{'title': 'Build a Starbucks Landing Page Clone', 'heatmap': [{'end': 481.833, 'start': 425.858, 'weight': 0.752}, {'end': 860.567, 'start': 807.121, 'weight': 0.706}, {'end': 1572.922, 'start': 1523.271, 'weight': 0.835}, {'end': 2048.842, 'start': 1998.58, 'weight': 0.917}, {'end': 2382.89, 'start': 2286.776, 'weight': 1}, {'end': 2871.034, 'start': 2807.264, 'weight': 0.825}, {'end': 3006.504, 'start': 2951.729, 'weight': 0.735}, {'end': 3104.871, 'start': 3046.188, 'weight': 0.74}], 'summary': "Tutorial series 'build a starbucks landing page clone' covers creating a starbucks website clone using html and css, including building a navigation bar, styling menu items and utility classes, implementing responsive design, grid layout, text styling, modifying website footer, and creating a responsive menu with css and javascript.", 'chapters': [{'end': 197.195, 'segs': [{'end': 197.195, 'src': 'embed', 'start': 130.945, 'weight': 0, 'content': [{'end': 137.569, 'text': "I'm just going to use a exclamation enter, use Emmett to create a boilerplate here for the title.", 'start': 130.945, 'duration': 6.624}, {'end': 140.391, 'text': "We'll say Starbucks Coffee.", 'start': 137.609, 'duration': 2.782}, {'end': 143.673, 'text': "I think it's coffee company is the title of the website.", 'start': 141.031, 'duration': 2.642}, {'end': 148.616, 'text': "And then let's add a link tag in here with a rel equal style sheet.", 'start': 144.353, 'duration': 4.263}, {'end': 152.618, 'text': 'And the href is going to point to the style dot CSS file.', 'start': 149.276, 'duration': 3.342}, {'end': 161.371, 'text': "And then down here, right above the closing body tag, we'll have our script source is going to be script.js.", 'start': 153.579, 'duration': 7.792}, {'end': 162.994, 'text': "That's the name of our JavaScript file.", 'start': 161.411, 'duration': 1.583}, {'end': 167.4, 'text': "And then just for now, I'll put an H1 in here and just say hello and save.", 'start': 163.595, 'duration': 3.805}, {'end': 173.16, 'text': 'Whoops So you can just open the HTML file within whatever browser you want to use.', 'start': 167.461, 'duration': 5.699}, {'end': 176.862, 'text': "I'm using an extension for VS Code called Live Server.", 'start': 173.66, 'duration': 3.202}, {'end': 180.044, 'text': 'So if you want that, you can just search for it and install it.', 'start': 177.162, 'duration': 2.882}, {'end': 184.487, 'text': "And it's just a local dev server that has auto reload.", 'start': 180.504, 'duration': 3.983}, {'end': 189.83, 'text': "And it's just something that I always use for for static websites and projects like this.", 'start': 185.107, 'duration': 4.723}, {'end': 197.195, 'text': 'So to use it, you can just right click an HTML file and say open with live server and it should just go ahead and open in the browser.', 'start': 190.411, 'duration': 6.784}], 'summary': 'Creating a website for starbucks coffee with html, css, and javascript, using live server for local development.', 'duration': 66.25, 'max_score': 130.945, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x_n2FGNsm0o/pics/x_n2FGNsm0o130945.jpg'}], 'start': 7.239, 'title': 'Creating a starbucks clone website', 'summary': 'Focuses on creating a starbucks website clone using html and css, employing open sans fonts, and making the menu responsive with css grid and flex blocks. it also covers setting up a basic website structure with html, css, and minimal javascript, including adding a title, linking css and javascript files, and using a local dev server for live preview.', 'chapters': [{'end': 108.228, 'start': 7.239, 'title': 'Starbucks clone project', 'summary': 'Focuses on creating a clone of the starbucks website using html and css, utilizing fonts like open sans and making the menu responsive using css grid and flex blocks.', 'duration': 100.989, 'highlights': ['Creating a clone of the Starbucks website using HTML and CSS The chapter revolves around creating a clone of the Starbucks website, including font usage and layout, with minor differences in images.', 'Utilizing fonts like Open Sans and making the menu responsive using CSS grid and flex blocks The project involves using Open Sans as a substitute font and ensuring menu responsiveness through the implementation of CSS grid and flex blocks.', "Availability of images in a folder called IMG and sharing the GitHub repository link for access The website's images are organized in a folder named IMG, with the option to access them via the GitHub repository link provided in the description."]}, {'end': 197.195, 'start': 108.889, 'title': 'Setting up a basic website structure', 'summary': 'Describes setting up the basic structure for a website, focusing on html and css with minimal javascript. it includes adding a title, linking a css file, including a javascript file, and using a local dev server for live preview.', 'duration': 88.306, 'highlights': ['Setting up basic HTML structure with title, link tag for CSS, and script tag for JavaScript.', 'Focusing mostly on CSS with minimal JavaScript, only a couple of lines for the mobile menu.', 'Using Live Server for live preview, a local dev server with auto reload.']}], 'duration': 189.956, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x_n2FGNsm0o/pics/x_n2FGNsm0o7239.jpg', 'highlights': ['Creating a clone of the Starbucks website using HTML and CSS', 'Utilizing fonts like Open Sans and making the menu responsive using CSS grid and flex blocks', 'Availability of images in a folder called IMG and sharing the GitHub repository link for access', 'Setting up basic HTML structure with title, link tag for CSS, and script tag for JavaScript', 'Focusing mostly on CSS with minimal JavaScript, only a couple of lines for the mobile menu', 'Using Live Server for live preview, a local dev server with auto reload']}, {'end': 951.516, 'segs': [{'end': 371.366, 'src': 'embed', 'start': 347.556, 'weight': 0, 'content': [{'end': 355.523, 'text': "So let's have an image tag and this is going to go to IMG slash marker and then we'll have a span and we'll say find a store.", 'start': 347.556, 'duration': 7.967}, {'end': 359.758, 'text': "Okay And then, oh, I'm sorry, this needs to go in a list item.", 'start': 356.576, 'duration': 3.182}, {'end': 364.901, 'text': 'So we need to put this link needs to go into there.', 'start': 360.919, 'duration': 3.982}, {'end': 366.663, 'text': 'All right.', 'start': 364.921, 'duration': 1.742}, {'end': 369.744, 'text': 'Then we have another list item and this is going to be the sign in button.', 'start': 366.803, 'duration': 2.941}, {'end': 371.366, 'text': "So let's say button.", 'start': 370.325, 'duration': 1.041}], 'summary': "The transcript discusses adding an image tag, a span for 'find a store,' and a sign-in button.", 'duration': 23.81, 'max_score': 347.556, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x_n2FGNsm0o/pics/x_n2FGNsm0o347556.jpg'}, {'end': 488.158, 'src': 'heatmap', 'start': 425.858, 'weight': 1, 'content': [{'end': 430.42, 'text': "But now we're going to start on our CSS so I can probably make this smaller now.", 'start': 425.858, 'duration': 4.562}, {'end': 436.463, 'text': "CSS doesn't take up as much room, so we're going to use the open sans font.", 'start': 430.901, 'duration': 5.562}, {'end': 438.124, 'text': 'So if we go to Google fonts.', 'start': 436.503, 'duration': 1.621}, {'end': 446.008, 'text': "And let's actually already have it here, but let's just start fresh, so we'll just search for open sans.", 'start': 441.286, 'duration': 4.722}, {'end': 450.942, 'text': "And we're going to select the regular 400.", 'start': 448.141, 'duration': 2.801}, {'end': 457.263, 'text': "We're going to select the semi bold 600 and the bold 700.", 'start': 450.942, 'duration': 6.321}, {'end': 461.104, 'text': "So we'll select those and we want to.", 'start': 457.263, 'duration': 3.841}, {'end': 470.906, 'text': "then you can either add a link tag in your HTML or what I'm going to do is grab the import right here and put that right in our style CSS.", 'start': 461.104, 'duration': 9.802}, {'end': 474.367, 'text': 'OK And then.', 'start': 473.087, 'duration': 1.28}, {'end': 481.833, 'text': "Let's go ahead and start to add some just like base styles.", 'start': 476.129, 'duration': 5.704}, {'end': 488.158, 'text': "But before we do that, I'm going to have a couple of variables, or what are called custom properties in CSS,", 'start': 482.314, 'duration': 5.844}], 'summary': 'Starting css with open sans font selection and custom properties in css', 'duration': 88.839, 'max_score': 425.858, 'thumbnail': ''}, {'end': 649.832, 'src': 'embed', 'start': 618.833, 'weight': 5, 'content': [{'end': 620.934, 'text': "So we're going to set list style to none.", 'start': 618.833, 'duration': 2.101}, {'end': 628.756, 'text': "And then for paragraphs we're going to set the margin, because, remember, we initially removed all the margin,", 'start': 622.394, 'duration': 6.362}, {'end': 634.258, 'text': 'but I want it to have five pixels on just the top and bottom and zero on the left and right.', 'start': 628.756, 'duration': 5.502}, {'end': 637.178, 'text': 'And also the line height on the paragraphs.', 'start': 634.858, 'duration': 2.32}, {'end': 639.379, 'text': "I'm going to increase it to one point seven.", 'start': 637.218, 'duration': 2.161}, {'end': 642.747, 'text': "All right, so now we're gonna start to work on the nav bar.", 'start': 640.646, 'duration': 2.101}, {'end': 645.229, 'text': "So I'm just gonna put a comment here, say nav bar.", 'start': 642.787, 'duration': 2.442}, {'end': 649.832, 'text': "And then let's do nav bar.", 'start': 647.29, 'duration': 2.542}], 'summary': 'Setting list style to none, adjusting paragraph margins and line height, and beginning work on the nav bar.', 'duration': 30.999, 'max_score': 618.833, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x_n2FGNsm0o/pics/x_n2FGNsm0o618833.jpg'}, {'end': 869.949, 'src': 'heatmap', 'start': 807.121, 'weight': 4, 'content': [{'end': 814.947, 'text': "Now I'm gonna use a property called justify content which lets us tell it what what do we want to do with this remaining space.", 'start': 807.121, 'duration': 7.826}, {'end': 817.789, 'text': "So let's say justify content.", 'start': 815.588, 'duration': 2.201}, {'end': 823.733, 'text': "If I do for instance flex and it's going to put all of the elements all the way to the end.", 'start': 818.229, 'duration': 5.504}, {'end': 825.374, 'text': 'OK Flex start.', 'start': 823.753, 'duration': 1.621}, {'end': 827.555, 'text': "We'll put it where where it was.", 'start': 825.654, 'duration': 1.901}, {'end': 832.018, 'text': 'What I want to do is take the remaining space and put it in the space between.', 'start': 828.036, 'duration': 3.982}, {'end': 837.362, 'text': 'So it takes the remaining space and divides it evenly between all of the items.', 'start': 832.759, 'duration': 4.603}, {'end': 838.79, 'text': 'All right.', 'start': 838.55, 'duration': 0.24}, {'end': 841.793, 'text': "And then let's also add a line items.", 'start': 838.99, 'duration': 2.803}, {'end': 847.817, 'text': "And when it's a row, a line items pertains to the vertical alignment and that I want to be center.", 'start': 842.393, 'duration': 5.424}, {'end': 849.178, 'text': "OK, so we don't.", 'start': 848.698, 'duration': 0.48}, {'end': 851.72, 'text': "For instance, we don't want the logo up here at the top.", 'start': 849.438, 'duration': 2.282}, {'end': 854.522, 'text': 'We want it to be in the center along with everything else.', 'start': 851.76, 'duration': 2.762}, {'end': 860.567, 'text': "So next, the UL's this both of these are UL's unordered lists.", 'start': 855.863, 'duration': 4.704}, {'end': 863.309, 'text': "We want those to be display flex so that they're in a row.", 'start': 860.627, 'duration': 2.682}, {'end': 869.949, 'text': "So let's take Navbar UL and let's display Flex.", 'start': 863.829, 'duration': 6.12}], 'summary': 'Using justify content to evenly divide remaining space and align elements vertically with display flex.', 'duration': 62.828, 'max_score': 807.121, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x_n2FGNsm0o/pics/x_n2FGNsm0o807121.jpg'}], 'start': 198.536, 'title': 'Building html and css nav bar', 'summary': 'Covers the process of building an html and css navigation bar, including the use of nav tag, class of nav bar, adding a logo using an image tag, a link to index.html, list items, links, and customizing styles using flexbox.', 'chapters': [{'end': 286.385, 'start': 198.536, 'title': 'Building html and css for nav bar', 'summary': 'Explains the process of building an html and css nav bar, starting with the nav tag and class of nav bar, followed by the addition of a logo using an image tag and a link to index.html.', 'duration': 87.849, 'highlights': ['The tutorial begins by outlining the process of building a nav bar in HTML and CSS, starting with the nav tag and class of nav bar.', 'The chapter includes instructions on adding a brand/logo using a div with the class of Navbar brand, containing a link to index.html and the logo image.', 'Recommendation for using the SVG directly in the HTML file is mentioned for a production site.']}, {'end': 951.516, 'start': 287.046, 'title': 'Building nav bar in html and css', 'summary': 'Covers the process of building a navigation bar in html and css, including adding list items, links, and customizing styles using flexbox, with detailed instructions on each step and relevant code snippets.', 'duration': 664.47, 'highlights': ['The chapter details the process of adding list items, links, and customizing styles in HTML and CSS, including setting up the navigation bar and adding Flexbox properties for alignment.', 'The transcript also includes instructions for using custom properties in CSS to define colors and setting up base styles for elements such as links, unordered lists, and paragraphs.', 'Detailed guidance on using Flexbox properties, such as display flex, justify content, align items, and hover effects for navigation bar items, with corresponding code examples and explanations.']}], 'duration': 752.98, 'thumbnail': '', 'highlights': ['The tutorial begins by outlining the process of building a nav bar in HTML and CSS, starting with the nav tag and class of nav bar.', 'The chapter includes instructions on adding a brand/logo using a div with the class of Navbar brand, containing a link to index.html and the logo image.', 'Recommendation for using the SVG directly in the HTML file is mentioned for a production site.', 'The chapter details the process of adding list items, links, and customizing styles in HTML and CSS, including setting up the navigation bar and adding Flexbox properties for alignment.', 'Detailed guidance on using Flexbox properties, such as display flex, justify content, align items, and hover effects for navigation bar items, with corresponding code examples and explanations.', 'The transcript also includes instructions for using custom properties in CSS to define colors and setting up base styles for elements such as links, unordered lists, and paragraphs.']}, {'end': 1397.899, 'segs': [{'end': 977.714, 'src': 'embed', 'start': 952.217, 'weight': 1, 'content': [{'end': 959.761, 'text': "So I'm going to go under the brand image here and let's say now bar dash and we want to do now left.", 'start': 952.217, 'duration': 7.544}, {'end': 965.863, 'text': "And let's do text transform uppercase.", 'start': 962.04, 'duration': 3.823}, {'end': 971.248, 'text': 'And I mean, you could in your HTML just put them type it out uppercase.', 'start': 965.884, 'duration': 5.364}, {'end': 973.55, 'text': "But and that's what Starbucks actually did.", 'start': 971.328, 'duration': 2.222}, {'end': 977.714, 'text': "But I think this is better, because if you decide you don't want this to be uppercase,", 'start': 973.63, 'duration': 4.084}], 'summary': 'Discussion on transforming text to uppercase for brand image.', 'duration': 25.497, 'max_score': 952.217, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x_n2FGNsm0o/pics/x_n2FGNsm0o952217.jpg'}, {'end': 1061.289, 'src': 'embed', 'start': 1028.076, 'weight': 0, 'content': [{'end': 1030.117, 'text': "so let's just add margin.", 'start': 1028.076, 'duration': 2.041}, {'end': 1038.859, 'text': "We'll say margin dash and we want left margin and we'll set that to 20 pixels.", 'start': 1031.897, 'duration': 6.962}, {'end': 1040.461, 'text': 'So that pushes it over a little.', 'start': 1039.119, 'duration': 1.342}, {'end': 1042.201, 'text': 'Next thing.', 'start': 1041.681, 'duration': 0.52}, {'end': 1046.541, 'text': 'So this right here, we have the marker.', 'start': 1043.281, 'duration': 3.26}, {'end': 1048.783, 'text': "It's like it's too far up.", 'start': 1046.602, 'duration': 2.181}, {'end': 1051.024, 'text': 'or the text is too far down.', 'start': 1049.543, 'duration': 1.481}, {'end': 1053.085, 'text': 'we want this to align nicely.', 'start': 1051.024, 'duration': 2.061}, {'end': 1061.289, 'text': "so what i'm going to do is, take this one li, because the li wraps around both display it flex and align item center, which will put them, you know,", 'start': 1053.085, 'duration': 8.204}], 'summary': 'Adjust left margin to 20 pixels, align marker vertically using flex and center alignment.', 'duration': 33.213, 'max_score': 1028.076, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x_n2FGNsm0o/pics/x_n2FGNsm0o1028076.jpg'}, {'end': 1181.339, 'src': 'embed', 'start': 1147.669, 'weight': 2, 'content': [{'end': 1151.452, 'text': "In the background, we're going to set that to none.", 'start': 1147.669, 'duration': 3.783}, {'end': 1154.815, 'text': "Let's set the border to one pixel.", 'start': 1152.253, 'duration': 2.562}, {'end': 1163.781, 'text': "We'll do one pixel black solid and then let's do a border radius.", 'start': 1156.856, 'duration': 6.925}, {'end': 1169.165, 'text': "So the buttons are pretty rounded on the Starbucks site, so we'll do 50 pixels.", 'start': 1165.543, 'duration': 3.622}, {'end': 1172.917, 'text': "Let's do some padding.", 'start': 1171.837, 'duration': 1.08}, {'end': 1175.738, 'text': 'So padding will do seven on the top and bottom.', 'start': 1173.177, 'duration': 2.561}, {'end': 1179.038, 'text': "And let's do 16 on the left and right.", 'start': 1176.558, 'duration': 2.48}, {'end': 1181.339, 'text': "Okay, so you can see they're coming together.", 'start': 1179.058, 'duration': 2.281}], 'summary': 'Styling includes 1px black border, 50px border radius, and 7px padding on top and bottom, 16px on left and right.', 'duration': 33.67, 'max_score': 1147.669, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x_n2FGNsm0o/pics/x_n2FGNsm0o1147669.jpg'}, {'end': 1348.852, 'src': 'embed', 'start': 1296.877, 'weight': 3, 'content': [{'end': 1298.738, 'text': 'for that, for that particular class.', 'start': 1296.877, 'duration': 1.861}, {'end': 1301.359, 'text': 'now for the hover effects.', 'start': 1298.738, 'duration': 2.621}, {'end': 1302.12, 'text': 'we look here.', 'start': 1301.359, 'duration': 0.761}, {'end': 1309.403, 'text': "if I hover over it, you can see it looks gray, it's actually black with some transparency, and then this just gets a little lighter.", 'start': 1302.12, 'duration': 7.283}, {'end': 1311.785, 'text': "so let's do the hover effects.", 'start': 1309.403, 'duration': 2.382}, {'end': 1320.353, 'text': "so for dark outline, hover, this we're going to do background color.", 'start': 1311.785, 'duration': 8.568}, {'end': 1324.035, 'text': "we're going to use rgba, red, green, blue, alpha, zero, zero.", 'start': 1320.353, 'duration': 3.682}, {'end': 1324.956, 'text': 'zero is black.', 'start': 1324.035, 'duration': 0.921}, {'end': 1331.44, 'text': "but then we're going to do 0.06 for the alpha, for the transparency, and now we get that grayish.", 'start': 1324.956, 'duration': 6.484}, {'end': 1333.661, 'text': 'and then for the dark.', 'start': 1331.44, 'duration': 2.221}, {'end': 1343.267, 'text': "let's see, let's do btn, dark cover, so that we're just going to change the background color to 333, which will lighten it up a little bit.", 'start': 1333.661, 'duration': 9.606}, {'end': 1348.852, 'text': 'Now this right here, the button, the space in between, I think is too far.', 'start': 1344.15, 'duration': 4.702}], 'summary': 'Adjusting button hover effects for color and transparency.', 'duration': 51.975, 'max_score': 1296.877, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x_n2FGNsm0o/pics/x_n2FGNsm0o1296877.jpg'}], 'start': 952.217, 'title': 'Styling menu items and utility classes for buttons', 'summary': 'Covers styling menu items using css properties, such as text-transform, margin, flex, and align-items, and creating utility classes for various button styles, underlining the importance of reusability and brand enhancement.', 'chapters': [{'end': 1123.028, 'start': 952.217, 'title': 'Styling and aligning menu items', 'summary': 'Focuses on styling the menu items by using css properties like text-transform, margin, flex, and align-items to push the menu over, align the marker and buttons, enhancing the brand image.', 'duration': 170.811, 'highlights': ['The chapter focuses on styling the menu items by using CSS properties like text-transform, margin, flex, and align-items to push the menu over, align the marker and buttons, enhancing the brand image.', 'Using CSS properties like text-transform, margin, flex, and align-items rather than directly editing the HTML allows for easier modification of the design without changing the HTML structure.', 'Setting the flex property to 1 can push the menu over, providing more space and making it visually appealing.', 'Adjusting the margin to 20 pixels can push the menu items over a little, improving the layout.', 'Using the first-child pseudo-selector to style the first list item and its link by setting display to flex and align-items to center ensures proper alignment of the menu items.']}, {'end': 1397.899, 'start': 1123.348, 'title': 'Styling utility classes for buttons', 'summary': 'Covers the process of creating utility classes to style buttons for a website including setting base styles, creating additional classes for different button styles, and applying hover effects, emphasizing the importance of breaking it up into utility classes for reusability.', 'duration': 274.551, 'highlights': ['Creating utility classes to style buttons for a website, including base class and additional classes for different button styles. N/A', 'Setting base styles for buttons, including display, background, border, border radius, padding, line height, text alignment, and text decoration. N/A', 'Creating additional classes for different button styles such as button dark outline, button dark, and BTN light outline with specific styling for each class. N/A', 'Applying hover effects for button styles using rgba color and adjusting the margin for specific list items containing buttons. N/A', 'Emphasizing the importance of breaking up styles into utility classes for reusability and maintaining a clean structure. N/A']}], 'duration': 445.682, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x_n2FGNsm0o/pics/x_n2FGNsm0o952217.jpg', 'highlights': ['The chapter focuses on styling the menu items using CSS properties like text-transform, margin, flex, and align-items to enhance the brand image.', 'Using CSS properties like text-transform, margin, flex, and align-items allows for easier modification of the design without changing the HTML structure.', 'Setting the flex property to 1 can push the menu over, providing more space and making it visually appealing.', 'Creating utility classes to style buttons for a website, including base class and additional classes for different button styles.', 'Setting base styles for buttons, including display, background, border, border radius, padding, line height, text alignment, and text decoration.']}, {'end': 1916.842, 'segs': [{'end': 1572.922, 'src': 'heatmap', 'start': 1523.271, 'weight': 0.835, 'content': [{'end': 1525.452, 'text': 'What does it say? Jingle.', 'start': 1523.271, 'duration': 2.181}, {'end': 1526.992, 'text': "I'm just going to copy that text.", 'start': 1525.492, 'duration': 1.5}, {'end': 1529.559, 'text': 'And paste it in.', 'start': 1528.698, 'duration': 0.861}, {'end': 1536.644, 'text': "And then the text under it, this paragraph, I'm going to give a class of text MD.", 'start': 1531.02, 'duration': 5.624}, {'end': 1538.305, 'text': "So that'll be text medium.", 'start': 1537.004, 'duration': 1.301}, {'end': 1543.429, 'text': "So basically just like if we had you know if we're using like tailwind or something,", 'start': 1539.466, 'duration': 3.963}, {'end': 1549.473, 'text': "and then I'm going to paste in there just some text and we have this a tag with the learn more.", 'start': 1543.429, 'duration': 6.044}, {'end': 1552.435, 'text': 'OK, so that should do it for this first box.', 'start': 1549.493, 'duration': 2.942}, {'end': 1554.256, 'text': 'And if we look at ours, it looks like this.', 'start': 1552.455, 'duration': 1.801}, {'end': 1556.418, 'text': 'So we have some styling to do here.', 'start': 1554.356, 'duration': 2.062}, {'end': 1557.695, 'text': 'All right.', 'start': 1557.475, 'duration': 0.22}, {'end': 1558.956, 'text': "So let's start off.", 'start': 1557.755, 'duration': 1.201}, {'end': 1565.859, 'text': "Let's start off with the utility classes like this BG primary tech center padding.", 'start': 1560.556, 'duration': 5.303}, {'end': 1567.82, 'text': "So I'm going to go down here.", 'start': 1566.499, 'duration': 1.321}, {'end': 1572.922, 'text': "Let's go under buttons and let's say this is going to be our background classes.", 'start': 1567.9, 'duration': 5.022}], 'summary': 'Styling and adding utility classes for a webpage design.', 'duration': 49.651, 'max_score': 1523.271, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x_n2FGNsm0o/pics/x_n2FGNsm0o1523271.jpg'}, {'end': 1747.954, 'src': 'embed', 'start': 1628.428, 'weight': 0, 'content': [{'end': 1637.14, 'text': "And then this one, even though we're not going to use this, I'm going to do a dark BG dark, and that will be a black background and All right.", 'start': 1628.428, 'duration': 8.712}, {'end': 1641.543, 'text': 'So now we have these these background utility classes that we can use all around the site.', 'start': 1637.2, 'duration': 4.343}, {'end': 1645.106, 'text': 'So next we have our text.', 'start': 1642.724, 'duration': 2.382}, {'end': 1648.208, 'text': 'What do we do? We have a text center.', 'start': 1646.247, 'duration': 1.961}, {'end': 1651.571, 'text': "So here it's a text.", 'start': 1649.369, 'duration': 2.202}, {'end': 1657.595, 'text': "I'm just going to say text styling because we're going to have our sizes as well.", 'start': 1652.512, 'duration': 5.083}, {'end': 1659.757, 'text': "So let's do text center.", 'start': 1658.216, 'duration': 1.541}, {'end': 1664.861, 'text': "And that's just going to text a line to the center.", 'start': 1660.337, 'duration': 4.524}, {'end': 1667.239, 'text': 'Okay, that puts it in the middle there.', 'start': 1665.899, 'duration': 1.34}, {'end': 1669.66, 'text': "And then let's do the text sizes.", 'start': 1667.9, 'duration': 1.76}, {'end': 1678.163, 'text': 'So first we have text dash XL, which is what I have for the main heading there.', 'start': 1670.5, 'duration': 7.663}, {'end': 1683.025, 'text': "All right, so this I'm going to have a font size of 50 pixels.", 'start': 1678.183, 'duration': 4.842}, {'end': 1684.105, 'text': "That's going to be pretty big.", 'start': 1683.065, 'duration': 1.04}, {'end': 1687.941, 'text': 'And notice that this is smaller.', 'start': 1685.66, 'duration': 2.281}, {'end': 1689.882, 'text': "That's because we have a media query.", 'start': 1687.981, 'duration': 1.901}, {'end': 1692.123, 'text': "It's really big when it's on large screens.", 'start': 1690.142, 'duration': 1.981}, {'end': 1693.624, 'text': 'But then it gets smaller.', 'start': 1692.643, 'duration': 0.981}, {'end': 1695.445, 'text': "We'll add that in a few minutes.", 'start': 1693.664, 'duration': 1.781}, {'end': 1697.205, 'text': "But let's do 50.", 'start': 1696.105, 'duration': 1.1}, {'end': 1702.128, 'text': "Let's do text dash transform and make that uppercase.", 'start': 1697.205, 'duration': 4.923}, {'end': 1707.05, 'text': "And then let's do letter dash spacing.", 'start': 1703.748, 'duration': 3.302}, {'end': 1711.352, 'text': "We'll do six pixels, which I don't really like, but that's how Starbucks has it.", 'start': 1707.09, 'duration': 4.262}, {'end': 1713.373, 'text': 'Font weight.', 'start': 1712.833, 'duration': 0.54}, {'end': 1716.304, 'text': 'We will do that 600.', 'start': 1714.982, 'duration': 1.322}, {'end': 1724.232, 'text': "And then let's do margin dash bottom 20 pixels.", 'start': 1716.304, 'duration': 7.928}, {'end': 1728.657, 'text': "Now I'm going to just copy that.", 'start': 1725.033, 'duration': 3.624}, {'end': 1733.709, 'text': "We're going to have four of these total, actually.", 'start': 1730.708, 'duration': 3.001}, {'end': 1743.032, 'text': "So we have XL, then we're going to have, oops, have LG, which is going to be 40.", 'start': 1734.289, 'duration': 8.743}, {'end': 1747.954, 'text': "And I'm just going to get rid of these two.", 'start': 1743.032, 'duration': 4.922}], 'summary': 'Creating utility classes for text styling including sizes and alignment.', 'duration': 119.526, 'max_score': 1628.428, 'thumbnail': ''}, {'end': 1916.842, 'src': 'embed', 'start': 1849.565, 'weight': 2, 'content': [{'end': 1855.427, 'text': "Actually before we do that let's add the media query to make the text a little smaller on smaller screens.", 'start': 1849.565, 'duration': 5.862}, {'end': 1867.158, 'text': "So to add a media query we just do at media and then I'm going to do a max So set a max width here of 960, 960 pixels.", 'start': 1856.568, 'duration': 10.59}, {'end': 1873.481, 'text': "What that means is anything in here will only be applied if it's 960 pixels or less.", 'start': 1867.558, 'duration': 5.923}, {'end': 1877.363, 'text': "So I'm gonna do for text XL.", 'start': 1874.361, 'duration': 3.002}, {'end': 1881.445, 'text': 'So text XL will go from 50.', 'start': 1878.784, 'duration': 2.661}, {'end': 1884.647, 'text': 'So our font size was 50.', 'start': 1881.445, 'duration': 3.202}, {'end': 1888.991, 'text': "Let's make it, actually let's do, I think it's 30.", 'start': 1884.647, 'duration': 4.344}, {'end': 1894.153, 'text': "Yep, so I'll save that and now this gets smaller because we're under 960.", 'start': 1888.991, 'duration': 5.162}, {'end': 1898.635, 'text': 'If I go above 960, then it gets bigger, goes to 50 pixels.', 'start': 1894.153, 'duration': 4.482}, {'end': 1904.697, 'text': "Okay, and then we're gonna do the same for, let's do text LG.", 'start': 1899.635, 'duration': 5.062}, {'end': 1909.9, 'text': "We're gonna do font size 25 pixels.", 'start': 1905.798, 'duration': 4.102}, {'end': 1913.481, 'text': "And then let's do text MD.", 'start': 1910.76, 'duration': 2.721}, {'end': 1916.842, 'text': "We'll do font size 19 pixels.", 'start': 1914.361, 'duration': 2.481}], 'summary': 'Added media queries for text sizes: xl (30px), lg (25px), md (19px) for screens 960px or less.', 'duration': 67.277, 'max_score': 1849.565, 'thumbnail': ''}], 'start': 1398.019, 'title': 'Styling utility classes and text', 'summary': 'Covers styling content boxes and text with utility classes like padding and text size, adding content like headings and paragraphs, as well as anchor tags, creation of background utility classes, text sizes, and padding for a website, and the addition of media queries for responsive design.', 'chapters': [{'end': 1549.473, 'start': 1398.019, 'title': 'Styling content boxes and text', 'summary': 'Covers styling content boxes and text with utility classes like padding and text size, and adding content like headings and paragraphs, as well as anchor tags, to the boxes.', 'duration': 151.454, 'highlights': ['Styling content boxes with utility classes like padding and text size The speaker uses utility classes like P Y for padding on the Y axis and text size classes like text XL for headings and text MD for paragraphs.', 'Adding content like headings and paragraphs to the boxes The speaker demonstrates adding an H2 heading with the text size class text XL and a paragraph with the text size class text MD to the content box.', "Including anchor tags in the content boxes The speaker includes an anchor tag with the text 'Learn More' inside the content box."]}, {'end': 1916.842, 'start': 1549.493, 'title': 'Styling utility classes and text sizes', 'summary': 'Discusses the creation of background utility classes, text sizes, and padding for a website, including the specified css properties and values for each class and size, as well as the addition of media queries for responsive design.', 'duration': 367.349, 'highlights': ['Creation of background utility classes The speaker creates background utility classes such as primary, secondary, and extra, with specified background colors and text colors, providing options for styling elements throughout the website.', 'Specification of text sizes and properties The speaker specifies text sizes such as XL, LG, MD, and small, with corresponding font sizes, text transformations, letter spacing, and margin properties, ensuring consistent text styling across the website.', 'Addition of media queries for responsive design The speaker adds media queries for text sizes, ensuring that the font sizes adjust based on screen width, enabling responsive design for the website to provide optimal user experience across devices.']}], 'duration': 518.823, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x_n2FGNsm0o/pics/x_n2FGNsm0o1398019.jpg', 'highlights': ['Styling content boxes with utility classes like padding and text size The speaker uses utility classes like P Y for padding on the Y axis and text size classes like text XL for headings and text MD for paragraphs.', 'Creation of background utility classes The speaker creates background utility classes such as primary, secondary, and extra, with specified background colors and text colors, providing options for styling elements throughout the website.', 'Addition of media queries for responsive design The speaker adds media queries for text sizes, ensuring that the font sizes adjust based on screen width, enabling responsive design for the website to provide optimal user experience across devices.', 'Adding content like headings and paragraphs to the boxes The speaker demonstrates adding an H2 heading with the text size class text XL and a paragraph with the text size class text MD to the content box.', "Including anchor tags in the content boxes The speaker includes an anchor tag with the text 'Learn More' inside the content box.", 'Specification of text sizes and properties The speaker specifies text sizes such as XL, LG, MD, and small, with corresponding font sizes, text transformations, letter spacing, and margin properties, ensuring consistent text styling across the website.']}, {'end': 2586.525, 'segs': [{'end': 2048.842, 'src': 'heatmap', 'start': 1998.58, 'weight': 0.917, 'content': [{'end': 2008.242, 'text': "So I'm going to explicitly set the right to auto and margin left to auto.", 'start': 1998.58, 'duration': 9.662}, {'end': 2015.627, 'text': "OK so now you can see that if it's spread out past 1440 it ends instead of going all the way across.", 'start': 2008.262, 'duration': 7.365}, {'end': 2026.213, 'text': "So now let's do some of the other box styling up here we're going to go under the nav bar and let's say box.", 'start': 2017.608, 'duration': 8.605}, {'end': 2035.658, 'text': 'Actually, all we have is a margin bottom because you can see here under each box we have some spacing.', 'start': 2029.676, 'duration': 5.982}, {'end': 2042.721, 'text': "So let's go ahead and add a margin bottom here of 30 pixels so that will separate them out.", 'start': 2036.399, 'duration': 6.322}, {'end': 2048.842, 'text': 'And then we have a class of box inner because right now this this text goes all the way over.', 'start': 2043.321, 'duration': 5.521}], 'summary': 'Setting auto right and margin, adding 30px margin bottom to separate box inner.', 'duration': 50.262, 'max_score': 1998.58, 'thumbnail': ''}, {'end': 2257.898, 'src': 'embed', 'start': 2141.191, 'weight': 1, 'content': [{'end': 2146.373, 'text': "And then, since it's going to be a grid, so it has two columns and you could use flex box, but I'm going to use the grid.", 'start': 2141.191, 'duration': 5.182}, {'end': 2152.255, 'text': "so I'm going to call this class grid, dash, call dash two, because it's a two column grid.", 'start': 2146.373, 'duration': 5.882}, {'end': 2155.113, 'text': 'and then inside.', 'start': 2152.255, 'duration': 2.858}, {'end': 2158.195, 'text': 'here we basically want to have two great items.', 'start': 2155.113, 'duration': 3.082}, {'end': 2163.3, 'text': "one is the image, one is a div, with that's wrapped around all of this.", 'start': 2158.195, 'duration': 5.105}, {'end': 2169.385, 'text': "so the image will be first and that's going to be an image slash and this is box b.", 'start': 2163.3, 'duration': 6.085}, {'end': 2179.754, 'text': "i labeled the images and then underneath that will be a div with the class of box dash text, and that's going to wrap around the all this stuff here.", 'start': 2169.385, 'duration': 10.369}, {'end': 2188.853, 'text': "so first we want the h2, which is going to have a class of text, Excel, and I'll just leave that blank for now.", 'start': 2179.754, 'duration': 9.099}, {'end': 2196.94, 'text': "Underneath that is going to be a paragraph with the class of text dash MD and I'm going to leave that blank for now.", 'start': 2189.013, 'duration': 7.927}, {'end': 2202.104, 'text': 'And underneath that is going to be an a tag with a button class.', 'start': 2198.681, 'duration': 3.423}, {'end': 2208.469, 'text': "And then we also want to do BTN light outline which we've which we've already created.", 'start': 2202.664, 'duration': 5.805}, {'end': 2213.231, 'text': "And then and that's going to say order now.", 'start': 2210.29, 'duration': 2.941}, {'end': 2222.216, 'text': "OK And what I'm going to do is just copy this whole thing here and paste it in.", 'start': 2213.251, 'duration': 8.965}, {'end': 2224.417, 'text': "That's two three four.", 'start': 2222.256, 'duration': 2.161}, {'end': 2226.778, 'text': "And then let's just change up.", 'start': 2225.397, 'duration': 1.381}, {'end': 2229.619, 'text': 'So this will be C.', 'start': 2226.858, 'duration': 2.761}, {'end': 2233.841, 'text': "And then we'll change this to see the name of the image to see.", 'start': 2229.619, 'duration': 4.222}, {'end': 2244.105, 'text': 'And then box D, change this, both of these to dash D.', 'start': 2235.751, 'duration': 8.354}, {'end': 2249.414, 'text': 'And then this is gonna be E, change these to dash E.', 'start': 2244.105, 'duration': 5.309}, {'end': 2256.417, 'text': 'OK Now the second one and the fourth one have the image on the right.', 'start': 2250.973, 'duration': 5.444}, {'end': 2257.898, 'text': "So they're reversed.", 'start': 2256.957, 'duration': 0.941}], 'summary': 'Creating a two-column grid layout with image, div, h2, paragraph, and button elements for multiple items.', 'duration': 116.707, 'max_score': 2141.191, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x_n2FGNsm0o/pics/x_n2FGNsm0o2141191.jpg'}, {'end': 2382.89, 'src': 'heatmap', 'start': 2286.776, 'weight': 1, 'content': [{'end': 2290.959, 'text': 'Now we just want to add the content that basically the heading and the.', 'start': 2286.776, 'duration': 4.183}, {'end': 2294.28, 'text': "In the paragraph so I'm just going to grab.", 'start': 2292.399, 'duration': 1.881}, {'end': 2297.062, 'text': 'Just going to paste this stuff in.', 'start': 2295.401, 'duration': 1.661}, {'end': 2299.583, 'text': "Actually that's not the right text.", 'start': 2298.163, 'duration': 1.42}, {'end': 2302.485, 'text': 'See this one here.', 'start': 2301.405, 'duration': 1.08}, {'end': 2307.248, 'text': "So that's new to the nice list and then the text.", 'start': 2304.286, 'duration': 2.962}, {'end': 2314.178, 'text': 'And then for C.', 'start': 2310.054, 'duration': 4.124}, {'end': 2317.881, 'text': 'So this is going to be Merry Moment.', 'start': 2314.178, 'duration': 3.703}, {'end': 2322.305, 'text': 'Paste that in.', 'start': 2321.425, 'duration': 0.88}, {'end': 2324.868, 'text': 'All right, so then D.', 'start': 2322.325, 'duration': 2.543}, {'end': 2330.012, 'text': "It's going to be Starbucks Thanksgiving Blend.", 'start': 2324.868, 'duration': 5.144}, {'end': 2334.637, 'text': 'Text and then finally the E.', 'start': 2332.915, 'duration': 1.722}, {'end': 2342.346, 'text': "Oh, the E actually has different size text, so we'll do that in a second.", 'start': 2338.004, 'duration': 4.342}, {'end': 2348.589, 'text': 'Yeah, so if we look at the final project, the E here, the H2 is smaller.', 'start': 2344.407, 'duration': 4.182}, {'end': 2355.573, 'text': "So we're actually gonna change this H2 to the medium and this one to the small.", 'start': 2350.01, 'duration': 5.563}, {'end': 2361.813, 'text': "All right, so let's save that, let's go to ours, and it's not going to be aligned in a grid yet,", 'start': 2356.749, 'duration': 5.064}, {'end': 2365.416, 'text': 'but we should see the image and we should see the text for each one.', 'start': 2361.813, 'duration': 3.603}, {'end': 2369.839, 'text': "Now this one Starbucks Thanksgiving blend you can see that's supposed to be green.", 'start': 2365.756, 'duration': 4.083}, {'end': 2377.886, 'text': 'So all we have to do for that one is change it from BG secondary to BG primary and then that will turn green.', 'start': 2370.38, 'duration': 7.506}, {'end': 2382.89, 'text': "So now let's add the grid so that we have the side by side.", 'start': 2379.667, 'duration': 3.223}], 'summary': 'Adding headings and text content, adjusting styles and colors for starbucks products.', 'duration': 96.114, 'max_score': 2286.776, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x_n2FGNsm0o/pics/x_n2FGNsm0o2286776.jpg'}, {'end': 2377.886, 'src': 'embed', 'start': 2344.407, 'weight': 0, 'content': [{'end': 2348.589, 'text': 'Yeah, so if we look at the final project, the E here, the H2 is smaller.', 'start': 2344.407, 'duration': 4.182}, {'end': 2355.573, 'text': "So we're actually gonna change this H2 to the medium and this one to the small.", 'start': 2350.01, 'duration': 5.563}, {'end': 2361.813, 'text': "All right, so let's save that, let's go to ours, and it's not going to be aligned in a grid yet,", 'start': 2356.749, 'duration': 5.064}, {'end': 2365.416, 'text': 'but we should see the image and we should see the text for each one.', 'start': 2361.813, 'duration': 3.603}, {'end': 2369.839, 'text': "Now this one Starbucks Thanksgiving blend you can see that's supposed to be green.", 'start': 2365.756, 'duration': 4.083}, {'end': 2377.886, 'text': 'So all we have to do for that one is change it from BG secondary to BG primary and then that will turn green.', 'start': 2370.38, 'duration': 7.506}], 'summary': 'Adjust h2 to medium, change bg to primary for green color.', 'duration': 33.479, 'max_score': 2344.407, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x_n2FGNsm0o/pics/x_n2FGNsm0o2344407.jpg'}, {'end': 2586.525, 'src': 'embed', 'start': 2557.93, 'weight': 6, 'content': [{'end': 2567.618, 'text': "so to do this we actually want to select the first child within the grid, which is going to be the image, right? That's the first child.", 'start': 2557.93, 'duration': 9.688}, {'end': 2574.881, 'text': "So let's add colon first child and then we can actually specify order.", 'start': 2568.078, 'duration': 6.803}, {'end': 2577.502, 'text': "And instead of one, we're going to set it to two.", 'start': 2575.341, 'duration': 2.161}, {'end': 2586.525, 'text': 'So if I save that now, any class or any element that has grid reversed will put the first child, which is the image as order two.', 'start': 2577.522, 'duration': 9.003}], 'summary': 'Select first child in grid, set order to two for image in grid reversed.', 'duration': 28.595, 'max_score': 2557.93, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x_n2FGNsm0o/pics/x_n2FGNsm0o2557930.jpg'}], 'start': 1918.789, 'title': 'Implementing responsive design and styling grid layout', 'summary': 'Covers implementing responsive design with max-width, margin, and centering for screens wider than 1440 pixels, and styling grid layout with two columns, utility classes, fractions and gap properties, vertical text centering, and adjusting element order.', 'chapters': [{'end': 2079.889, 'start': 1918.789, 'title': 'Responsive design implementation', 'summary': 'Covers implementing responsive design by setting max-width for content, adding margin for spacing, and centering content for screens wider than 1440 pixels.', 'duration': 161.1, 'highlights': ['Setting max-width for content to 1440 pixels and centering it using margin: Explains the concept of setting a maximum width of 1440 pixels for content and ensuring it is centered for wider screens.', 'Adding margin for spacing between boxes: Discusses the addition of a 30-pixel margin at the bottom of each box to create separation.', 'Implementing max width for box inner class to 700 pixels and centering it: Highlights the implementation of a maximum width of 700 pixels for the box inner class and centering the content within it.']}, {'end': 2586.525, 'start': 2080.35, 'title': 'Styling grid and layout', 'summary': 'Covers styling a grid layout with two columns, using utility classes for grid styles and defining the layout using fractions and gap properties, ensuring the text is vertically centered, and adjusting the order of elements within the grid.', 'duration': 506.175, 'highlights': ['Styling a grid layout with two columns The speaker explains how to create a grid layout with two columns, using utility classes for grid styles and defining the layout using fractions.', 'Defining the layout using fractions and gap properties The speaker demonstrates how to define the layout using fractions and gap properties to ensure even column widths and spacing between elements.', "Ensuring the text is vertically centered The speaker discusses aligning text vertically within the grid using the 'align-items: center' property.", "Adjusting the order of elements within the grid The speaker explains how to adjust the order of elements within the grid using the 'order' property and the 'first-child' selector."]}], 'duration': 667.736, 'thumbnail': '', 'highlights': ['Styling a grid layout with two columns using utility classes and fractions', 'Defining layout with fractions and gap properties for even column widths', 'Setting max-width for content to 1440 pixels and centering it using margin', 'Implementing max width for box inner class to 700 pixels and centering it', "Ensuring text is vertically centered within the grid using 'align-items: center'", 'Adding 30-pixel margin at the bottom of each box for separation', "Adjusting element order within the grid using 'order' property and 'first-child' selector"]}, {'end': 2972.053, 'segs': [{'end': 2652.201, 'src': 'embed', 'start': 2620.562, 'weight': 5, 'content': [{'end': 2624.724, 'text': "and we're gonna actually let me see if we make this bigger.", 'start': 2620.562, 'duration': 4.162}, {'end': 2632.747, 'text': "yeah, so we'll do max with 500 and we want to align it to the center.", 'start': 2624.724, 'duration': 8.023}, {'end': 2637.49, 'text': "so we'll do text align center.", 'start': 2632.747, 'duration': 4.743}, {'end': 2639.47, 'text': "now it's still not aligned where i want.", 'start': 2637.49, 'duration': 1.98}, {'end': 2641.671, 'text': "you'll see if i make this bigger, it's still.", 'start': 2639.47, 'duration': 2.201}, {'end': 2649.159, 'text': 'uh, if we look at this one, See how this is too far over to the left.', 'start': 2641.671, 'duration': 7.488}, {'end': 2652.201, 'text': 'We want to push it to the middle of its own block.', 'start': 2649.199, 'duration': 3.002}], 'summary': 'Adjusting max width to 500 and center-aligning text to fix layout alignment issue.', 'duration': 31.639, 'max_score': 2620.562, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x_n2FGNsm0o/pics/x_n2FGNsm0o2620562.jpg'}, {'end': 2726.15, 'src': 'embed', 'start': 2688.231, 'weight': 1, 'content': [{'end': 2698.133, 'text': "So where we have all of our box stuff, let's say box dash text and then the BTN.", 'start': 2688.231, 'duration': 9.902}, {'end': 2702.665, 'text': "So we'll just set a margin top.", 'start': 2699.904, 'duration': 2.761}, {'end': 2705.325, 'text': "We'll set that to 20 pixels.", 'start': 2703.325, 'duration': 2}, {'end': 2706.866, 'text': 'There we go.', 'start': 2706.425, 'duration': 0.441}, {'end': 2711.667, 'text': "Now, this doesn't have a hover effect.", 'start': 2710.026, 'duration': 1.641}, {'end': 2713.347, 'text': 'Let me say I think we did here.', 'start': 2711.707, 'duration': 1.64}, {'end': 2715.428, 'text': "Yeah, I see how it's very slight.", 'start': 2713.827, 'duration': 1.601}, {'end': 2722.629, 'text': 'We can actually use the same hover effect if we look at our buttons that we used on the outline dark.', 'start': 2716.188, 'duration': 6.441}, {'end': 2726.15, 'text': 'So we could just copy this.', 'start': 2724.41, 'duration': 1.74}], 'summary': 'Styling box dash text and btn with margin top set to 20 pixels, adding hover effect using a similar style from outline dark buttons.', 'duration': 37.919, 'max_score': 2688.231, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x_n2FGNsm0o/pics/x_n2FGNsm0o2688231.jpg'}, {'end': 2871.034, 'src': 'heatmap', 'start': 2790.648, 'weight': 0, 'content': [{'end': 2793.67, 'text': 'Box box F.', 'start': 2790.648, 'duration': 3.022}, {'end': 2799.092, 'text': "We're not going to need a background, but we do need the grid call to.", 'start': 2793.67, 'duration': 5.422}, {'end': 2802.794, 'text': 'And then what we can do is just copy.', 'start': 2799.112, 'duration': 3.682}, {'end': 2805.615, 'text': "Let's see in here.", 'start': 2802.814, 'duration': 2.801}, {'end': 2812.028, 'text': "from Section E or Box E, let's just grab the image in the div, copy that.", 'start': 2807.264, 'duration': 4.764}, {'end': 2817.371, 'text': "And then in this section, we'll have a div here and then a div under it.", 'start': 2812.768, 'duration': 4.603}, {'end': 2818.853, 'text': 'So those will be the columns.', 'start': 2817.692, 'duration': 1.161}, {'end': 2822.135, 'text': "And in each one, I'm going to paste in what I just copied.", 'start': 2819.453, 'duration': 2.682}, {'end': 2823.556, 'text': 'So we have that.', 'start': 2822.755, 'duration': 0.801}, {'end': 2826.358, 'text': 'And then in this div, we have that.', 'start': 2823.756, 'duration': 2.602}, {'end': 2832.142, 'text': "And we're going to change the image to I think it's F1 and then this one is F2.", 'start': 2826.498, 'duration': 5.644}, {'end': 2836.203, 'text': 'And then we just want to change up the text.', 'start': 2834.482, 'duration': 1.721}, {'end': 2845.309, 'text': "So I'm going to grab some text here and paste that in that.", 'start': 2836.463, 'duration': 8.846}, {'end': 2850.072, 'text': 'That and that.', 'start': 2847.81, 'duration': 2.262}, {'end': 2851.673, 'text': 'All right.', 'start': 2851.372, 'duration': 0.301}, {'end': 2855.095, 'text': "Now let's just save that and see what we get.", 'start': 2851.753, 'duration': 3.342}, {'end': 2871.034, 'text': "OK so not bad for the we do want to have a background for this this down here and this so let's add see for the first one.", 'start': 2857.571, 'duration': 13.463}], 'summary': 'Creating grid layout with images and text in sections f1 and f2.', 'duration': 32.908, 'max_score': 2790.648, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x_n2FGNsm0o/pics/x_n2FGNsm0o2790648.jpg'}, {'end': 2929.637, 'src': 'embed', 'start': 2857.571, 'weight': 2, 'content': [{'end': 2871.034, 'text': "OK so not bad for the we do want to have a background for this this down here and this so let's add see for the first one.", 'start': 2857.571, 'duration': 13.463}, {'end': 2878.635, 'text': 'Actually you know what we want at another div around the box text for each one.', 'start': 2873.194, 'duration': 5.441}, {'end': 2888.235, 'text': 'So sorry if this is confusing but we want another div and we want to take the box text cut that Put it in here.', 'start': 2879.976, 'duration': 8.259}, {'end': 2891.316, 'text': 'And then this div is going to have a class.', 'start': 2889.035, 'duration': 2.281}, {'end': 2895.537, 'text': 'And this is where we want to add our background.', 'start': 2893.256, 'duration': 2.281}, {'end': 2897.677, 'text': "So in this case, we'll do BG extra.", 'start': 2895.597, 'duration': 2.08}, {'end': 2902.918, 'text': "And let's do padding Y large, PY large.", 'start': 2898.977, 'duration': 3.941}, {'end': 2910.32, 'text': "And we're going to do the same thing here where the box text is going to go in a div.", 'start': 2903.478, 'duration': 6.842}, {'end': 2913.38, 'text': 'Grab that.', 'start': 2912.78, 'duration': 0.6}, {'end': 2916.541, 'text': 'Put that in there.', 'start': 2915.661, 'duration': 0.88}, {'end': 2926.475, 'text': "And then this dev class equal and that's going to be BG primary and P Y L G.", 'start': 2917.369, 'duration': 9.106}, {'end': 2926.735, 'text': 'All right.', 'start': 2926.475, 'duration': 0.26}, {'end': 2927.676, 'text': "So let's save that.", 'start': 2926.755, 'duration': 0.921}, {'end': 2929.637, 'text': 'OK So now we have.', 'start': 2927.696, 'duration': 1.941}], 'summary': 'Adding divs and classes for background and padding in the code.', 'duration': 72.066, 'max_score': 2857.571, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x_n2FGNsm0o/pics/x_n2FGNsm0o2857571.jpg'}], 'start': 2587.005, 'title': 'Text styling and grid layout', 'summary': 'Covers css techniques for aligning and styling text with specific attributes such as max width set to 500, center alignment, self-justification, 20 pixels padding, and 20 pixels top margin. additionally, it demonstrates creating box f with grid layout, utilizing grid items, columns, background, and text positioning.', 'chapters': [{'end': 2726.15, 'start': 2587.005, 'title': 'Styling and aligning text', 'summary': 'Covers aligning and styling text using css, including setting max width to 500, aligning text to center, justifying self to center, adding padding of 20 pixels, and setting margin top to 20 pixels for specific elements.', 'duration': 139.145, 'highlights': ['Setting max width to 500 The speaker mentions setting a max width of 500 for the text.', "Aligning text to center The speaker discusses aligning the text to the center using 'text-align: center' in the CSS.", "Justifying self to center The speaker explains using 'justify-self: center' to push the text to the middle of its own block.", 'Adding padding of 20 pixels The speaker mentions adding padding of 20 pixels to the top and bottom of the text.', 'Setting margin top to 20 pixels for specific elements The speaker talks about setting a margin top of 20 pixels for specific elements to push the button down.']}, {'end': 2972.053, 'start': 2728.175, 'title': 'Creating box f with grid layout', 'summary': 'Demonstrates the process of creating box f with grid layout, including the use of grid items, columns, background, and text positioning.', 'duration': 243.878, 'highlights': ['Creating Box F with grid layout The chapter revolves around creating Box F with grid layout, involving the use of grid items and columns.', 'Use of background and text positioning The process includes adding background and positioning text within the layout for Box F.']}], 'duration': 385.048, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x_n2FGNsm0o/pics/x_n2FGNsm0o2587005.jpg', 'highlights': ['Setting max width to 500 for text', "Aligning text to center using 'text-align: center'", "Justifying self to center with 'justify-self: center'", 'Adding 20 pixels padding to top and bottom of text', 'Setting 20 pixels top margin for specific elements', 'Creating Box F with grid layout', 'Utilizing background and text positioning for Box F']}, {'end': 3331.892, 'segs': [{'end': 3104.871, 'src': 'heatmap', 'start': 3046.188, 'weight': 0.74, 'content': [{'end': 3049.79, 'text': 'And in here we just have a bunch of links with around the images.', 'start': 3046.188, 'duration': 3.602}, {'end': 3052.132, 'text': "So I'm just going to grab those real quick.", 'start': 3049.89, 'duration': 2.242}, {'end': 3058.734, 'text': 'Okay, so we just have, like Spotify, link around the image,', 'start': 3055.208, 'duration': 3.526}, {'end': 3067.95, 'text': "around the Spotify SVG and then outside of the social div we'll have a paragraph and that's just going to have some text for the copyright or whatever.", 'start': 3058.734, 'duration': 9.216}, {'end': 3069.092, 'text': "So I'll paste that in.", 'start': 3067.97, 'duration': 1.122}, {'end': 3072.468, 'text': 'And then that should do it for the HTML.', 'start': 3070.407, 'duration': 2.061}, {'end': 3076.329, 'text': "So for the CSS, let's go.", 'start': 3072.528, 'duration': 3.801}, {'end': 3082.57, 'text': "We'll just go under the nav bar here above the box and we'll say footer and social.", 'start': 3076.769, 'duration': 5.801}, {'end': 3086.071, 'text': 'So for the footer.', 'start': 3083.351, 'duration': 2.72}, {'end': 3088.672, 'text': "actually the footer itself doesn't need any styling,", 'start': 3086.071, 'duration': 2.601}, {'end': 3095.374, 'text': "but we do want the footer container because that we don't want to go all the way over to the sides.", 'start': 3088.672, 'duration': 6.702}, {'end': 3098.115, 'text': "So we'll set it to we'll say with.", 'start': 3095.954, 'duration': 2.161}, {'end': 3104.871, 'text': '100%, but we want a max width of 1440 pixels.', 'start': 3098.909, 'duration': 5.962}], 'summary': 'Creating html and css for footer with max width of 1440 pixels.', 'duration': 58.683, 'max_score': 3046.188, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x_n2FGNsm0o/pics/x_n2FGNsm0o3046188.jpg'}, {'end': 3331.892, 'src': 'embed', 'start': 3173.441, 'weight': 0, 'content': [{'end': 3178.904, 'text': "So we'll take social display.", 'start': 3173.441, 'duration': 5.463}, {'end': 3194.648, 'text': "flex and we want to align items center and let's add some margin on the top and bottom of the entire div, so we'll do 20 pixels.", 'start': 3179.824, 'duration': 14.824}, {'end': 3196.108, 'text': "we didn't do the divider yet either.", 'start': 3194.648, 'duration': 1.46}, {'end': 3199.449, 'text': "we'll get to that in a second, but let's split these icons up a little bit.", 'start': 3196.108, 'duration': 3.341}, {'end': 3200.829, 'text': "so that's the link.", 'start': 3199.449, 'duration': 1.38}, {'end': 3206.969, 'text': "so we want to just add here um margin right, Let's do 20..", 'start': 3200.829, 'duration': 6.14}, {'end': 3218.078, 'text': "Yeah, we'll do 20 pixels, Okay, and then for the divider let's add that class divider.", 'start': 3206.969, 'duration': 11.109}, {'end': 3221.841, 'text': 'I Can make this smaller.', 'start': 3218.078, 'duration': 3.763}, {'end': 3222.442, 'text': 'so the divider.', 'start': 3221.841, 'duration': 0.601}, {'end': 3226.705, 'text': "we don't want it to go all the way across, like if we look here, you can see it ends.", 'start': 3222.442, 'duration': 4.263}, {'end': 3239.971, 'text': "so let's do a width of 95% And then let's do a height of one pixel background color.", 'start': 3226.705, 'duration': 13.266}, {'end': 3244.675, 'text': "We're going to do CCC, which is a gray and then margin.", 'start': 3240.051, 'duration': 4.624}, {'end': 3248.119, 'text': "Let's do 40 pixels on top and bottom.", 'start': 3244.715, 'duration': 3.404}, {'end': 3252.843, 'text': "Uh, actually, I'm sorry.", 'start': 3251.962, 'duration': 0.881}, {'end': 3255.706, 'text': "We want to do 40 pixels auto so that it's in the middle.", 'start': 3252.863, 'duration': 2.843}, {'end': 3257.047, 'text': 'There we go.', 'start': 3256.707, 'duration': 0.34}, {'end': 3261.268, 'text': "All right, and then let's see.", 'start': 3259.417, 'duration': 1.851}, {'end': 3262.474, 'text': "Let's see what this looks like.", 'start': 3261.288, 'duration': 1.186}, {'end': 3274.082, 'text': "So on larger screens, a divider, you can see it goes further than the content, which isn't a big deal, but I don't like that.", 'start': 3265.856, 'duration': 8.226}, {'end': 3278.785, 'text': "So I'm going to go to to this right here.", 'start': 3274.142, 'duration': 4.643}, {'end': 3290.034, 'text': "If we go above 1440, then for the divider, let's go ahead and set the will do max with 90 percent.", 'start': 3278.805, 'duration': 11.229}, {'end': 3296.067, 'text': "Yeah So that will just keep it, you know, It won't go past the main content.", 'start': 3290.054, 'duration': 6.013}, {'end': 3297.028, 'text': 'All right.', 'start': 3296.768, 'duration': 0.26}, {'end': 3299.412, 'text': "So I think now we're ready for responsiveness.", 'start': 3297.068, 'duration': 2.344}, {'end': 3304.42, 'text': "So if we make this smaller, the navigation we're going to do very last.", 'start': 3299.532, 'duration': 4.888}, {'end': 3306.023, 'text': "Let's just take care of the rest of this.", 'start': 3304.46, 'duration': 1.563}, {'end': 3315.977, 'text': 'So for the for these for these boxes that have the columns, we want to stack those.', 'start': 3309.27, 'duration': 6.707}, {'end': 3320.861, 'text': "So let's create we have one for nine sixty.", 'start': 3316.857, 'duration': 4.004}, {'end': 3323.884, 'text': "That's a little too big to start stacking.", 'start': 3321.682, 'duration': 2.202}, {'end': 3327.167, 'text': "So let's create another media query for seven sixty eight.", 'start': 3323.944, 'duration': 3.223}, {'end': 3331.892, 'text': "So we'll do max width of seven sixty eight.", 'start': 3327.748, 'duration': 4.144}], 'summary': 'Styling the display and divider with specific margin and width values for responsiveness.', 'duration': 158.451, 'max_score': 3173.441, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x_n2FGNsm0o/pics/x_n2FGNsm0o3173441.jpg'}], 'start': 2972.053, 'title': 'Modifying and styling website footer', 'summary': 'Involves modifying html and css for a footer section, including changing the width of a box, adjusting button classes, creating a divider, adding a footer section with social icons and copyright text, and applying css styling. it also covers styling the footer container with a max width of 1440 pixels, setting spacing and margins, and implementing responsiveness through media queries.', 'chapters': [{'end': 3086.071, 'start': 2972.053, 'title': 'Modifying html and css for a footer section', 'summary': 'Involves modifying the html and css for a footer section, including changing the width of a box, adjusting button classes, creating a divider, adding a footer section with social icons and copyright text, and applying css styling for the footer.', 'duration': 114.018, 'highlights': ['Modifying the max width of the box from 700 to 600 and adjusting the button class to dark outline.', 'Creating a divider with the class of divider for styling purposes.', 'Adding a footer section with a footer-container, social icons, and copyright text, including links around images like Spotify SVG.', 'Applying CSS styling for the footer section.']}, {'end': 3331.892, 'start': 3086.071, 'title': 'Styling footer for website', 'summary': 'Covers styling the footer container with a max width of 1440 pixels, setting spacing and margins, and implementing responsiveness through media queries.', 'duration': 245.821, 'highlights': ['Setting the footer container with a max width of 1440 pixels, margin zero auto for center alignment, and specific padding of 0 on top and 30 pixels on the sides.', 'Implementing styling for social images with a height and width of 35 pixels, removing underline with social text decoration, and using flex display with spacing in between.', 'Adding a divider with a width of 95%, height of one pixel, gray background color, and margin of 40 pixels auto for center alignment.']}], 'duration': 359.839, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x_n2FGNsm0o/pics/x_n2FGNsm0o2972053.jpg', 'highlights': ['Setting the footer container with a max width of 1440 pixels, margin zero auto for center alignment, and specific padding of 0 on top and 30 pixels on the sides.', 'Adding a footer section with a footer-container, social icons, and copyright text, including links around images like Spotify SVG.', 'Applying CSS styling for the footer section.', 'Implementing styling for social images with a height and width of 35 pixels, removing underline with social text decoration, and using flex display with spacing in between.', 'Adding a divider with a width of 95%, height of one pixel, gray background color, and margin of 40 pixels auto for center alignment.', 'Modifying the max width of the box from 700 to 600 and adjusting the button class to dark outline.', 'Creating a divider with the class of divider for styling purposes.']}, {'end': 4015.995, 'segs': [{'end': 3577.496, 'src': 'embed', 'start': 3541.035, 'weight': 0, 'content': [{'end': 3546.896, 'text': "We're going to give it an ID of menu dash BTN.", 'start': 3541.035, 'duration': 5.861}, {'end': 3553.557, 'text': "And let's give it a we'll give it a type of button as well as type.", 'start': 3548.436, 'duration': 5.121}, {'end': 3556.318, 'text': 'Set that to button.', 'start': 3555.278, 'duration': 1.04}, {'end': 3559.019, 'text': 'And yeah, that should be good.', 'start': 3557.758, 'duration': 1.261}, {'end': 3563.9, 'text': "And then inside the button, we're going to have three spans.", 'start': 3560.319, 'duration': 3.581}, {'end': 3573.814, 'text': "So the first one going to have a class of hamburger dash top, and then we'll copy these down.", 'start': 3564.6, 'duration': 9.214}, {'end': 3577.496, 'text': 'the second one is going to be middle.', 'start': 3573.814, 'duration': 3.682}], 'summary': 'Setting an id for a menu button with three spans for different classes.', 'duration': 36.461, 'max_score': 3541.035, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x_n2FGNsm0o/pics/x_n2FGNsm0o3541035.jpg'}, {'end': 3785.489, 'src': 'embed', 'start': 3607.629, 'weight': 1, 'content': [{'end': 3609.569, 'text': "And let's say hamburger class.", 'start': 3607.629, 'duration': 1.94}, {'end': 3614.15, 'text': "Okay, so first thing we'll do is cursor pointer.", 'start': 3609.589, 'duration': 4.561}, {'end': 3622.476, 'text': "Let's do a width of 24 pixels and a height of 24.", 'start': 3614.75, 'duration': 7.726}, {'end': 3626.058, 'text': "and let's do position.", 'start': 3622.476, 'duration': 3.582}, {'end': 3636.162, 'text': "we want that to be relative because we're going to position that the top, bottom, middle lines in inside of it, absolute and then background.", 'start': 3626.058, 'duration': 10.104}, {'end': 3643.445, 'text': 'we want to set that to none and we want to set border to none because buttons have these by default.', 'start': 3636.162, 'duration': 7.283}, {'end': 3651.686, 'text': "And then let's do a Z index of 10, because we want that to always be on top.", 'start': 3645.441, 'duration': 6.245}, {'end': 3658.211, 'text': 'And then when it transitions, when we have it go to an X, we want that to be smooth.', 'start': 3652.727, 'duration': 5.484}, {'end': 3664.336, 'text': "So let's add transition and we'll say transition all and we'll do 0.25 seconds.", 'start': 3658.251, 'duration': 6.085}, {'end': 3670.4, 'text': "OK so we're still not going to see anything yet.", 'start': 3668.399, 'duration': 2.001}, {'end': 3673.222, 'text': 'Now we want to do the top middle and bottom lines.', 'start': 3670.801, 'duration': 2.421}, {'end': 3687.512, 'text': "So here let's say hamburger hamburger dash top and then we also want the middle and the bottom.", 'start': 3673.462, 'duration': 14.05}, {'end': 3694.917, 'text': "OK so now we want to create the lines we're going to use position.", 'start': 3687.532, 'duration': 7.385}, {'end': 3704.6, 'text': "absolute here and let's say from top zero left zero.", 'start': 3697.253, 'duration': 7.347}, {'end': 3712.927, 'text': 'And we want the width to be 24 pixels to go all the way across its parent.', 'start': 3705.701, 'duration': 7.226}, {'end': 3720.514, 'text': "And then the height is just going to be two pixels because it's the line and the background.", 'start': 3713.428, 'duration': 7.086}, {'end': 3722.556, 'text': "We're going to make that black.", 'start': 3721.215, 'duration': 1.341}, {'end': 3730.093, 'text': "And we're going to set transform rotate and just set that to zero.", 'start': 3725.45, 'duration': 4.643}, {'end': 3732.375, 'text': 'So rotate.', 'start': 3731.675, 'duration': 0.7}, {'end': 3733.936, 'text': "It'll be zero by default.", 'start': 3732.575, 'duration': 1.361}, {'end': 3740.441, 'text': "And let's add transition all zero point five seconds.", 'start': 3734.396, 'duration': 6.045}, {'end': 3745.224, 'text': 'So if I save that now we can see we have just it looks like just one line.', 'start': 3741.361, 'duration': 3.863}, {'end': 3747.005, 'text': "It's actually three.", 'start': 3745.885, 'duration': 1.12}, {'end': 3747.966, 'text': "It's the top.", 'start': 3747.386, 'duration': 0.58}, {'end': 3749.587, 'text': "It's all those spans we have.", 'start': 3748.106, 'duration': 1.481}, {'end': 3753.05, 'text': "Right But they're all located in the same exact place.", 'start': 3749.687, 'duration': 3.363}, {'end': 3754.591, 'text': "So they're all on top of each other.", 'start': 3753.25, 'duration': 1.341}, {'end': 3765.893, 'text': "So let's specify here, let's say hamburger middle and then we'll do transform.", 'start': 3755.985, 'duration': 9.908}, {'end': 3769.496, 'text': 'We want to transform and then translate.', 'start': 3765.913, 'duration': 3.583}, {'end': 3771.478, 'text': 'We want to translate on the y axis.', 'start': 3769.556, 'duration': 1.922}, {'end': 3775.621, 'text': 'We want to move it along the y axis seven pixels.', 'start': 3771.498, 'duration': 4.123}, {'end': 3781.426, 'text': 'So if I save that, you can see now the middle one has been moved down seven pixels.', 'start': 3776.221, 'duration': 5.205}, {'end': 3785.489, 'text': "Now the bottom one, let's just copy this down.", 'start': 3783.107, 'duration': 2.382}], 'summary': 'Creating a hamburger menu button with 3 lines, each styled and positioned accordingly.', 'duration': 177.86, 'max_score': 3607.629, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x_n2FGNsm0o/pics/x_n2FGNsm0o3607629.jpg'}], 'start': 3333.737, 'title': 'Grid layout, nav bar styling, and hamburger menu in css', 'summary': "Discusses adjusting grid template columns for smaller screens, reordering grid items, and hiding elements in the nav bar. it also covers creating a hamburger menu using css, including styling the menu icon, adding functionality to transform it into an 'x' on click, with specific css transformations and toggling classes.", 'chapters': [{'end': 3476.529, 'start': 3333.737, 'title': 'Grid layout and nav bar styling', 'summary': 'Discusses adjusting the grid template columns to a single column for smaller screens, reordering the grid items, and hiding certain elements in the nav bar for small screens.', 'duration': 142.792, 'highlights': ['Adjusting the grid template columns to a single column for smaller screens and reordering the grid items to place the image first', 'Hiding certain elements in the nav bar for small screens by setting display to none', 'Making the logo in the nav bar smaller and centering the footer']}, {'end': 4015.995, 'start': 3478.177, 'title': 'Creating hamburger menu with css', 'summary': "Covers creating a hamburger menu using css, including the steps to create the menu icon, styling the menu icon and adding functionality to transform the menu icon into an 'x' on click, with specific css transformations and toggling classes.", 'duration': 537.818, 'highlights': ['Creating the hamburger menu icon with CSS The process of creating a hamburger menu icon using CSS styling, including adding a button element with three spans and applying specific classes and IDs to elements.', 'Styling the hamburger menu icon with CSS Detailed CSS styling instructions for the hamburger menu icon, including setting dimensions, positioning, background, transitions, and the appearance of the three lines.', "Adding functionality to transform the menu icon into an 'X' on click Explanation of the JavaScript function to toggle classes and apply specific CSS transformations to convert the hamburger menu icon into an 'X' on click, with detailed instructions on rotating and positioning the lines."]}], 'duration': 682.258, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x_n2FGNsm0o/pics/x_n2FGNsm0o3333737.jpg', 'highlights': ['Adjusting the grid template columns to a single column for smaller screens and reordering the grid items to place the image first', 'Creating the hamburger menu icon with CSS The process of creating a hamburger menu icon using CSS styling, including adding a button element with three spans and applying specific classes and IDs to elements.', "Adding functionality to transform the menu icon into an 'X' on click Explanation of the JavaScript function to toggle classes and apply specific CSS transformations to convert the hamburger menu icon into an 'X' on click, with detailed instructions on rotating and positioning the lines.", 'Hiding certain elements in the nav bar for small screens by setting display to none', 'Styling the hamburger menu icon with CSS Detailed CSS styling instructions for the hamburger menu icon, including setting dimensions, positioning, background, transitions, and the appearance of the three lines.', 'Making the logo in the nav bar smaller and centering the footer']}, {'end': 4762.441, 'segs': [{'end': 4300.499, 'src': 'embed', 'start': 4261.504, 'weight': 0, 'content': [{'end': 4270.15, 'text': "So I'm just going to say mobile dash menu image because it's the only image and we'll set with 20 pixels.", 'start': 4261.504, 'duration': 8.646}, {'end': 4277.406, 'text': "Height 20 pixels and let's do margin right.", 'start': 4272.805, 'duration': 4.601}, {'end': 4279.707, 'text': '10 pixels.', 'start': 4277.426, 'duration': 2.281}, {'end': 4290.409, 'text': "OK, now we do want it to take up the entire height, so let's go back up to mobile menu and let's set the height of that to be 100%.", 'start': 4279.727, 'duration': 10.682}, {'end': 4294.45, 'text': 'Oops, not that there we go.', 'start': 4290.409, 'duration': 4.041}, {'end': 4300.499, 'text': "Okay, and then let's set the, I'm gonna put the color right here.", 'start': 4295.998, 'duration': 4.501}], 'summary': 'Setting mobile dash menu image height to 20 pixels with 10 pixels margin right, and adjusting mobile menu height to 100%.', 'duration': 38.995, 'max_score': 4261.504, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x_n2FGNsm0o/pics/x_n2FGNsm0o4261504.jpg'}, {'end': 4396.19, 'src': 'embed', 'start': 4366.237, 'weight': 1, 'content': [{'end': 4370.158, 'text': "uh, that's okay.", 'start': 4366.237, 'duration': 3.921}, {'end': 4372.139, 'text': "so that's giving us this border right here.", 'start': 4370.158, 'duration': 1.981}, {'end': 4375.28, 'text': "um, and then we'll do a margin bottom.", 'start': 4372.139, 'duration': 3.141}, {'end': 4378.964, 'text': "Let's do a padding bottom to do above the border first.", 'start': 4376.243, 'duration': 2.721}, {'end': 4383.646, 'text': 'So padding bottom will do 10 pixels.', 'start': 4379.604, 'duration': 4.042}, {'end': 4386.387, 'text': 'Give us a little space there and then under the border.', 'start': 4383.726, 'duration': 2.661}, {'end': 4390.128, 'text': "So margin bottom, let's do 30 pixels.", 'start': 4386.487, 'duration': 3.641}, {'end': 4396.19, 'text': "Good And then for the links, obviously, I don't want them to have underlines.", 'start': 4391.409, 'duration': 4.781}], 'summary': 'Applying 10px padding and 30px margin bottom, removing underlines from links.', 'duration': 29.953, 'max_score': 4366.237, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x_n2FGNsm0o/pics/x_n2FGNsm0o4366237.jpg'}], 'start': 4016.015, 'title': 'Implementing and styling a responsive menu', 'summary': 'Discusses implementing a responsive menu for different screen sizes, toggling menu visibility, adding buttons and links within the mobile menu, and styling a responsive starbucks website using css and javascript.', 'chapters': [{'end': 4176.424, 'start': 4016.015, 'title': 'Responsive menu implementation', 'summary': 'Discusses implementing a responsive menu for different screen sizes, toggling the visibility of the menu, and adding buttons and links within the mobile menu.', 'duration': 160.409, 'highlights': ['The chapter discusses implementing a responsive menu for different screen sizes, toggling the visibility of the menu, and adding buttons and links within the mobile menu.', 'Setting the initial hamburger class to display none and using the seven sixty eight media query to set it as display block ensures the menu shows on mobile screens but not on larger screens.', 'Creating a separate mobile menu with a class of mobile-menu and an ID of menu, toggling a class of hidden to control visibility, and adding list items, buttons, and links within the mobile menu.']}, {'end': 4762.441, 'start': 4177.884, 'title': 'Styling mobile menu', 'summary': 'Demonstrates how to style a mobile menu, including setting its position, size, colors, and animations using css and javascript, resulting in a responsive starbucks website.', 'duration': 584.557, 'highlights': ['The chapter demonstrates how to style a mobile menu using CSS, including setting its position, size, colors, and animations. The speaker explains setting the position, background color, width, height, color, padding, box shadow, and border for the mobile menu, as well as adjusting the styling for the UL, links, and div elements.', "The chapter shows how to use JavaScript to toggle the mobile menu and prevent scrolling. The speaker demonstrates adding a class of 'hidden' to the mobile menu to start it off hidden, then using JavaScript to toggle the 'hidden' class and prevent scrolling by adding a class of 'no scroll' to the body.", 'The chapter emphasizes the practical application of CSS skills to create a responsive Starbucks website. The speaker highlights that the goal is not an exact replica but rather to provide a practical project to enhance CSS skills and encourage viewers to apply them to their own projects.']}], 'duration': 746.426, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/x_n2FGNsm0o/pics/x_n2FGNsm0o4016015.jpg', 'highlights': ['Demonstrates implementing a responsive menu for different screen sizes and toggling menu visibility.', 'Shows how to style a mobile menu using CSS, including position, size, colors, and animations.', 'Emphasizes practical application of CSS skills to create a responsive Starbucks website.']}], 'highlights': ['Creating a clone of the Starbucks website using HTML and CSS', 'Utilizing fonts like Open Sans and making the menu responsive using CSS grid and flex blocks', 'The tutorial begins by outlining the process of building a nav bar in HTML and CSS, starting with the nav tag and class of nav bar', 'The chapter focuses on styling the menu items using CSS properties like text-transform, margin, flex, and align-items to enhance the brand image', 'Styling content boxes with utility classes like padding and text size The speaker uses utility classes like P Y for padding on the Y axis and text size classes like text XL for headings and text MD for paragraphs', 'Styling a grid layout with two columns using utility classes and fractions', 'Setting the footer container with a max width of 1440 pixels, margin zero auto for center alignment, and specific padding of 0 on top and 30 pixels on the sides', 'Adjusting the grid template columns to a single column for smaller screens and reordering the grid items to place the image first', 'Demonstrates implementing a responsive menu for different screen sizes and toggling menu visibility']}