title
Build a Responsive Grid CSS Website Layout From Scratch
description
In this video we will build a responsive Grid CSS layout using grid template areas. We will also be using other modern CSS features and techniques like css variables, rem units and flexbox.
CODE:
https://codepen.io/bradtraversy/pen/gvMGyB
MY CSS GRID CRASH COURSE:
https://www.youtube.com/watch?v=jV8B24rSN5o
WES BOS COURSE:
https://cssgrid.io/
💖 BECOME A PATRON: Show support & get perks!
http://www.patreon.com/traversymedia
VISIT MY WEBISTE: Check Out My Udemy Courses
http://www.traversymedia.com
FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia
http://www.twitter.com/traversymedia
http://www.instagram.com/traversymedia
https://discord.gg/traversymedia
detail
{'title': 'Build a Responsive Grid CSS Website Layout From Scratch', 'heatmap': [{'end': 1613.064, 'start': 1579.816, 'weight': 1}], 'summary': 'Learn to create a responsive grid css website, visualizing website elements, with layout changes at 700 and 500 pixels, grid area adjustments, and hands-on coding. also, build website navigation using html and css, and implement media queries for full responsiveness.', 'chapters': [{'end': 220.698, 'segs': [{'end': 119.102, 'src': 'embed', 'start': 7.56, 'weight': 0, 'content': [{'end': 8.46, 'text': "hey, what's going on, guys?", 'start': 7.56, 'duration': 0.9}, {'end': 15.984, 'text': "so in this video we're going to create a responsive grid css website or grid css theme, and it's not the prettiest thing in the world,", 'start': 8.46, 'duration': 7.524}, {'end': 23.828, 'text': "but it's going to teach you about the fundamentals of the grid in a real project, which seems to be lacking on the web and in tutorials.", 'start': 15.984, 'duration': 7.844}, {'end': 30.031, 'text': "but one great resource is westboss's new grid css course, which is where i got the idea for this project.", 'start': 23.828, 'duration': 6.203}, {'end': 32.552, 'text': 'so i will put a link to that course in the description.', 'start': 30.031, 'duration': 2.521}, {'end': 39.136, 'text': "Okay, we'll also be looking at and using CSS variables, rem units, things like that.", 'start': 33.172, 'duration': 5.964}, {'end': 41.638, 'text': 'So modern CSS techniques.', 'start': 39.256, 'duration': 2.382}, {'end': 47.201, 'text': 'So basically just to go through it real quick, we have a simple nav at the top which uses the grid.', 'start': 42.298, 'duration': 4.903}, {'end': 50.723, 'text': 'We have basically four different sections, four fractionals.', 'start': 47.241, 'duration': 3.482}, {'end': 57.408, 'text': "Then this part here is the top container and we're actually going to be using grid template areas for this part.", 'start': 51.204, 'duration': 6.204}, {'end': 63.071, 'text': 'which I actually left out of my grid CSS crash course because we ran out of time in that video.', 'start': 57.848, 'duration': 5.223}, {'end': 69.656, 'text': 'But we can basically assign named template areas to our grid, which is really cool.', 'start': 63.512, 'duration': 6.144}, {'end': 74.619, 'text': 'And I actually created some images to give you a visual representation of how that works.', 'start': 69.696, 'duration': 4.923}, {'end': 81.343, 'text': 'And then underneath that, we just have some simple boxes here using some Font Awesome icons.', 'start': 75.699, 'duration': 5.644}, {'end': 84.345, 'text': "We'll actually be using Font Awesome 5, which was just released.", 'start': 81.383, 'duration': 2.962}, {'end': 87.067, 'text': 'These are actually SVG icons.', 'start': 85.085, 'duration': 1.982}, {'end': 93.651, 'text': 'And then below that, we have the info section, which is basically just two fractionals or two grid columns.', 'start': 87.607, 'duration': 6.044}, {'end': 94.732, 'text': 'Very simple.', 'start': 94.111, 'duration': 0.621}, {'end': 99.335, 'text': 'And then some images here coming from Unsplash.', 'start': 95.192, 'duration': 4.143}, {'end': 101.556, 'text': 'These are just some gallery images.', 'start': 99.375, 'duration': 2.181}, {'end': 103.137, 'text': 'And then a very simple footer.', 'start': 101.896, 'duration': 1.241}, {'end': 105.585, 'text': "all right now we're not going to do the inner pages.", 'start': 103.663, 'duration': 1.922}, {'end': 111.172, 'text': 'if you guys want to take it upon yourself and try to create those pages on your own.', 'start': 105.585, 'duration': 5.587}, {'end': 113.876, 'text': 'that would be a really good learning experience.', 'start': 111.172, 'duration': 2.704}, {'end': 119.102, 'text': 'and just to show you the responsiveness of this website, we go bigger.', 'start': 113.876, 'duration': 5.226}], 'summary': "Creating a responsive grid css website, utilizing modern css techniques and resources like westboss's grid css course, with examples of using grid template areas, font awesome 5 svg icons, and unsplash images.", 'duration': 111.542, 'max_score': 7.56, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/moBhzSC455o/pics/moBhzSC455o7560.jpg'}], 'start': 7.56, 'title': 'Responsive web design', 'summary': 'Covers creating a responsive grid css website, visual representation of website elements, and a tutorial on responsive web design with layout changes at 700 and 500 pixels, grid template area adjustments, and hands-on coding.', 'chapters': [{'end': 69.656, 'start': 7.56, 'title': 'Creating responsive grid css website', 'summary': 'Outlines the creation of a responsive grid css website, covering fundamental concepts and modern css techniques, while referencing a grid css course by westboss for additional resources.', 'duration': 62.096, 'highlights': ['The chapter focuses on creating a responsive grid CSS website to teach about the fundamentals of the grid in a real project, which seems to be lacking on the web and in tutorials.', "Reference to Westboss's new grid CSS course is made as a great resource for the project, with a link to the course provided in the description.", 'The project also involves the use of modern CSS techniques such as CSS variables, rem units, and grid template areas for creating a simple nav at the top and four different sections.']}, {'end': 119.102, 'start': 69.696, 'title': 'Creating visual representation of website elements', 'summary': 'Demonstrates the creation of visual representations of website elements using font awesome 5 svg icons, grid columns, gallery images from unsplash, and responsive design.', 'duration': 49.406, 'highlights': ['Using Font Awesome 5 SVG icons to create visual representations of website elements.', 'Utilizing grid columns for layout design on the website.', 'Incorporating gallery images from Unsplash for visual content.', 'Demonstrating the responsiveness of the website design as it scales.']}, {'end': 220.698, 'start': 119.102, 'title': 'Responsive web design tutorial', 'summary': 'Demonstrates how the layout changes at 700 pixels and 500 pixels, with grid template area adjustments for responsiveness, and encourages hands-on coding for better learning experience.', 'duration': 101.596, 'highlights': ['The layout changes at 700 pixels, with the menu going vertical and various sections being rearranged. 700 pixels layout change, vertical menu, rearranged sections', 'At 500 pixels, the layout adjusts to a single row, suitable for small mobile devices. 500 pixels layout change, single row layout for mobile devices', 'Encourages hands-on coding for a better learning experience, suggesting creating necessary files and folders for the project. Hands-on coding for better learning, suggested files and folder structure']}], 'duration': 213.138, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/moBhzSC455o/pics/moBhzSC455o7560.jpg', 'highlights': ['The chapter focuses on creating a responsive grid CSS website to teach about the fundamentals of the grid in a real project, which seems to be lacking on the web and in tutorials.', "Reference to Westboss's new grid CSS course is made as a great resource for the project, with a link to the course provided in the description.", 'Using Font Awesome 5 SVG icons to create visual representations of website elements.', 'Incorporating gallery images from Unsplash for visual content.', 'The layout changes at 700 pixels, with the menu going vertical and various sections being rearranged. 700 pixels layout change, vertical menu, rearranged sections', 'At 500 pixels, the layout adjusts to a single row, suitable for small mobile devices. 500 pixels layout change, single row layout for mobile devices', 'Encourages hands-on coding for a better learning experience, suggesting creating necessary files and folders for the project. Hands-on coding for better learning, suggested files and folder structure']}, {'end': 419.266, 'segs': [{'end': 250.092, 'src': 'embed', 'start': 220.858, 'weight': 1, 'content': [{'end': 225.082, 'text': 'I grabbed the medium and I named it showcase dot JPEG.', 'start': 220.858, 'duration': 4.224}, {'end': 227.263, 'text': 'The other one I searched for business.', 'start': 225.442, 'duration': 1.821}, {'end': 232.63, 'text': "and it's this one right here, and I downloaded the medium version as well.", 'start': 228.124, 'duration': 4.506}, {'end': 236.555, 'text': 'but if you want, you can also get them from the code pen in the description.', 'start': 232.63, 'duration': 3.925}, {'end': 246.046, 'text': 'and if you noticed, my showcase is a little darker, because I mean I faded it out a little so that the text is a little more prominent on top of it.', 'start': 236.555, 'duration': 9.491}, {'end': 250.092, 'text': "Okay so, let's go ahead and get started now.", 'start': 246.767, 'duration': 3.325}], 'summary': 'Downloading medium and showcase jpegs for business purposes', 'duration': 29.234, 'max_score': 220.858, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/moBhzSC455o/pics/moBhzSC455o220858.jpg'}, {'end': 392.45, 'src': 'embed', 'start': 362.83, 'weight': 0, 'content': [{'end': 365.792, 'text': "I'm going to try to keep this commented for you guys.", 'start': 362.83, 'duration': 2.962}, {'end': 373.337, 'text': "So navigation, we're going to use a nav tag and give it a class of main-nav.", 'start': 367.773, 'duration': 5.564}, {'end': 379.121, 'text': "And inside here, we're going to have a ul and some li's.", 'start': 374.458, 'duration': 4.663}, {'end': 380.982, 'text': "Let's put an a tag in here.", 'start': 379.141, 'duration': 1.841}, {'end': 384.084, 'text': "These aren't actually going to go anywhere, so I'm just going to put a hash.", 'start': 381.022, 'duration': 3.062}, {'end': 389.388, 'text': "And then I want a couple more of these, so we're going to have four different navigation items.", 'start': 384.685, 'duration': 4.703}, {'end': 392.45, 'text': 'So this one will be about.', 'start': 390.148, 'duration': 2.302}], 'summary': 'Creating navigation using html: 1 nav tag, class main-nav, 4 navigation items.', 'duration': 29.62, 'max_score': 362.83, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/moBhzSC455o/pics/moBhzSC455o362830.jpg'}], 'start': 220.858, 'title': 'Creating grid biz website and building website navigation', 'summary': 'Covers creating the grid biz website using font awesome version 5, focusing on svg icons and vs code emmet feature. it also explains building website navigation using html with proper structure and formatting.', 'chapters': [{'end': 339.238, 'start': 220.858, 'title': 'Creating grid biz website with font awesome', 'summary': 'Covers the process of creating the grid biz website using font awesome version 5, with a focus on using svg icons and leveraging the vs code emmet feature for efficient html and css development.', 'duration': 118.38, 'highlights': ['Font Awesome upgraded to version 5 using SVG icons The chapter emphasizes the use of Font Awesome version 5, which utilizes SVG icons for improved scalability and resolution, enhancing the visual appeal of the website.', 'Utilizing VS Code Emmet feature for quick HTML and CSS shortcuts The speaker recommends the use of VS Code with the Emmet feature to expedite HTML and CSS development, showcasing the efficiency and time-saving benefits of this approach.', 'Demonstrating the use of live server extension for auto reload The chapter demonstrates the usage of the live server extension, highlighting its functionality to enable auto-reload, providing a seamless development experience with instant updates upon saving.']}, {'end': 419.266, 'start': 339.238, 'title': 'Building website navigation', 'summary': 'Explains how to create a website navigation using html, including using a wrapper div, a navigation tag with a class of main-nav, and multiple navigation items with a tags, with a focus on proper structure and formatting.', 'duration': 80.028, 'highlights': ['The chapter covers creating a wrapper div to contain the website content.', 'It explains using a navigation tag with a class of main-nav and structuring it with ul and li elements.', 'The chapter emphasizes the importance of proper formatting using tools like Prettier for HTML, CSS, and JavaScript.']}], 'duration': 198.408, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/moBhzSC455o/pics/moBhzSC455o220858.jpg', 'highlights': ['Font Awesome upgraded to version 5 using SVG icons for improved scalability and resolution.', 'Utilizing VS Code Emmet feature for quick HTML and CSS shortcuts to expedite development.', 'Demonstrating the use of live server extension for auto reload, providing a seamless development experience.', 'Creating a wrapper div to contain the website content.', 'Explaining the use of a navigation tag with a class of main-nav and structuring it with ul and li elements.', 'Emphasizing the importance of proper formatting using tools like Prettier for HTML, CSS, and JavaScript.']}, {'end': 964.928, 'segs': [{'end': 735.307, 'src': 'embed', 'start': 706.753, 'weight': 0, 'content': [{'end': 712.596, 'text': "So for this we're going to do section with the class of info and inside here we'll put our image.", 'start': 706.753, 'duration': 5.843}, {'end': 720.4, 'text': "The image is going to be in the IMG folder and it's going to be called pic1.jpg.", 'start': 713.276, 'duration': 7.124}, {'end': 727.904, 'text': "Underneath that we're going to have a div and inside the div we'll have an h2 and we're going to say your business.", 'start': 720.52, 'duration': 7.384}, {'end': 730.345, 'text': 'on the web.', 'start': 729.625, 'duration': 0.72}, {'end': 735.307, 'text': "Underneath that we'll have a 30 word paragraph,", 'start': 731.465, 'duration': 3.842}], 'summary': 'Creating a web page with image, heading, and 30-word paragraph.', 'duration': 28.554, 'max_score': 706.753, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/moBhzSC455o/pics/moBhzSC455o706753.jpg'}, {'end': 863.252, 'src': 'embed', 'start': 833.508, 'weight': 2, 'content': [{'end': 839.369, 'text': "And the size doesn't matter because the images are contained within the container, within their parent.", 'start': 833.508, 'duration': 5.861}, {'end': 841.449, 'text': "So that really doesn't matter.", 'start': 839.449, 'duration': 2}, {'end': 847.671, 'text': 'So 7, wait, 0, 1, I forgot 2.', 'start': 841.749, 'duration': 5.922}, {'end': 849.411, 'text': "I mean, it doesn't really matter, but I like it.", 'start': 847.671, 'duration': 1.74}, {'end': 853.7, 'text': 'one through nine or one through eight.', 'start': 851.016, 'duration': 2.684}, {'end': 857.004, 'text': 'Sorry All right.', 'start': 853.76, 'duration': 3.244}, {'end': 857.945, 'text': "So we'll save that.", 'start': 857.024, 'duration': 0.921}, {'end': 861.369, 'text': 'And now if we go down here, we have all different images.', 'start': 858.486, 'duration': 2.883}, {'end': 863.252, 'text': "Okay So that's that.", 'start': 861.389, 'duration': 1.863}], 'summary': 'Discussion about image sizes and arrangement in a container.', 'duration': 29.744, 'max_score': 833.508, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/moBhzSC455o/pics/moBhzSC455o833508.jpg'}, {'end': 920.243, 'src': 'embed', 'start': 890.275, 'weight': 4, 'content': [{'end': 901.02, 'text': "so now we're gonna go to our CSS, which is the hard part in the long part, and we're going to start off by creating some CSS variables.", 'start': 890.275, 'duration': 10.745}, {'end': 906.297, 'text': 'Why can I spell variables??', 'start': 904.716, 'duration': 1.581}, {'end': 913.48, 'text': "OK, so if you guys have never used CSS variables, don't worry about it.", 'start': 908.398, 'duration': 5.082}, {'end': 914.76, 'text': "It's not difficult at all.", 'start': 913.52, 'duration': 1.24}, {'end': 920.243, 'text': 'If you want, you can go and check out my video on CSS variables I did about a month ago or so.', 'start': 914.84, 'duration': 5.403}], 'summary': 'Introduction to creating css variables and reference to a video tutorial.', 'duration': 29.968, 'max_score': 890.275, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/moBhzSC455o/pics/moBhzSC455o890275.jpg'}, {'end': 969.791, 'src': 'embed', 'start': 940.833, 'weight': 3, 'content': [{'end': 945.476, 'text': 'Primary color is going to be DDD in hex, which is just a very light gray.', 'start': 940.833, 'duration': 4.643}, {'end': 950.459, 'text': "We're also going to have one called dark, which will be 333.", 'start': 945.496, 'duration': 4.963}, {'end': 954.762, 'text': "We'll have a light, which will be white, which is just triple F.", 'start': 950.459, 'duration': 4.303}, {'end': 964.928, 'text': 'And then also for the shadow, if you notice, if we look at the final theme here, all of these boxes, they all have this box shadow.', 'start': 955.422, 'duration': 9.506}, {'end': 969.791, 'text': 'So I want to put that in a variable so that we can easily access it.', 'start': 965.288, 'duration': 4.503}], 'summary': 'Defining primary color as #ddd, dark color as #333, light color as #fff, and creating a variable for box shadow.', 'duration': 28.958, 'max_score': 940.833, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/moBhzSC455o/pics/moBhzSC455o940833.jpg'}], 'start': 420.867, 'title': 'Website layout and html/css basics', 'summary': 'Covers creating a website layout with a showcase, top boxes, and content section using html, css, and emmet, with details on pricing and icons. it also includes creating html and css elements, using css variables, and their application throughout the stylesheet.', 'chapters': [{'end': 645.403, 'start': 420.867, 'title': 'Creating website layout', 'summary': 'Covers creating the top container with a showcase, two top boxes, and the boxes section, including the structure, content, and styling, using html, css, and emmet, with details such as pricing and icons.', 'duration': 224.536, 'highlights': ['The chapter covers creating the top container with a showcase, two top boxes, and the boxes section, including the structure, content, and styling, using HTML, CSS, and Emmet, with details such as pricing and icons.', "The top container is structured with a showcase containing an h1 and a paragraph with dummy text, and a custom button class for links, with details about the pricing and a 'buy now' button for two membership options, one being $2.99 per month.", "The boxes section includes a class of box with icons and content such as 'analytics' and 10 words of dummy text, styled using Font Awesome and CSS to adjust the icon size."]}, {'end': 964.928, 'start': 646.323, 'title': 'Html and css basics', 'summary': 'Covers the process of creating html and css elements including creating boxes, info section, portfolio section, and footer. it also explains the use of css variables and their application throughout the stylesheet.', 'duration': 318.605, 'highlights': ['Creating HTML and CSS elements The transcript covers the process of creating various HTML and CSS elements including boxes, info section, portfolio section, and footer.', 'Use of CSS variables Explanation of CSS variables and their application throughout the stylesheet, including defining primary color, dark color, light color, and shadow.']}], 'duration': 544.061, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/moBhzSC455o/pics/moBhzSC455o420867.jpg', 'highlights': ['The chapter covers creating the top container with a showcase, two top boxes, and the boxes section, including the structure, content, and styling, using HTML, CSS, and Emmet, with details such as pricing and icons.', "The top container is structured with a showcase containing an h1 and a paragraph with dummy text, and a custom button class for links, with details about the pricing and a 'buy now' button for two membership options, one being $2.99 per month.", "The boxes section includes a class of box with icons and content such as 'analytics' and 10 words of dummy text, styled using Font Awesome and CSS to adjust the icon size.", 'Explanation of CSS variables and their application throughout the stylesheet, including defining primary color, dark color, light color, and shadow.', 'Creating HTML and CSS elements The transcript covers the process of creating various HTML and CSS elements including boxes, info section, portfolio section, and footer.']}, {'end': 1215.914, 'segs': [{'end': 995.604, 'src': 'embed', 'start': 965.288, 'weight': 2, 'content': [{'end': 969.791, 'text': 'So I want to put that in a variable so that we can easily access it.', 'start': 965.288, 'duration': 4.503}, {'end': 975.714, 'text': "So it's going to be 0, 1 pixels, 5 pixels, and then RGBA.", 'start': 969.851, 'duration': 5.863}, {'end': 980.297, 'text': 'And the color we want is going to be 104 three times.', 'start': 976.535, 'duration': 3.762}, {'end': 985.16, 'text': 'And then for the alpha, the opacity is going to be 0.8.', 'start': 980.998, 'duration': 4.162}, {'end': 986.881, 'text': "All right, so that's it for our variables.", 'start': 985.16, 'duration': 1.721}, {'end': 989.882, 'text': 'So we can use these throughout our CSS now.', 'start': 987.321, 'duration': 2.561}, {'end': 995.604, 'text': "So let's go and create our HTML CSS.", 'start': 991.142, 'duration': 4.462}], 'summary': 'Defining variables for colors and opacity in css.', 'duration': 30.316, 'max_score': 965.288, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/moBhzSC455o/pics/moBhzSC455o965288.jpg'}, {'end': 1075.389, 'src': 'embed', 'start': 1018.222, 'weight': 0, 'content': [{'end': 1026.026, 'text': "And then the base color I'm going to use a variable so I need to say var and then pass in the variable I want which is going to be the dark.", 'start': 1018.222, 'duration': 7.804}, {'end': 1029.769, 'text': "Alright so now I'm going to do the body.", 'start': 1028.228, 'duration': 1.541}, {'end': 1037.452, 'text': "So for the body, I'm going to give it a background of CCC, which is a very light gray.", 'start': 1031.03, 'duration': 6.422}, {'end': 1042.893, 'text': "I didn't put that in a variable because this is the only time I'm using it, so it would be kind of redundant.", 'start': 1038.172, 'duration': 4.721}, {'end': 1044.893, 'text': "Let's add a margin.", 'start': 1043.772, 'duration': 1.121}, {'end': 1046.973, 'text': "Now, I'm not using a container.", 'start': 1045.453, 'duration': 1.52}, {'end': 1051.335, 'text': "I'm not restricting the wrapper of our website.", 'start': 1047.034, 'duration': 4.301}, {'end': 1058.477, 'text': 'I want it to be full width, but I do want to have a little margin on all sides of the website.', 'start': 1051.395, 'duration': 7.082}, {'end': 1059.237, 'text': "So we're going to do..", 'start': 1058.537, 'duration': 0.7}, {'end': 1064.619, 'text': "Let's see, we'll do 30 pixels top and bottom 50 left and right.", 'start': 1060.157, 'duration': 4.462}, {'end': 1074.588, 'text': "Okay, and then we're going to give it a line height of 1.4.", 'start': 1064.639, 'duration': 9.949}, {'end': 1074.868, 'text': 'All right.', 'start': 1074.588, 'duration': 0.28}, {'end': 1075.389, 'text': 'There we go.', 'start': 1074.888, 'duration': 0.501}], 'summary': 'Using css to set body background color to #ccc, add margin, and set line height to 1.4.', 'duration': 57.167, 'max_score': 1018.222, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/moBhzSC455o/pics/moBhzSC455o1018222.jpg'}, {'end': 1215.914, 'src': 'embed', 'start': 1103.903, 'weight': 3, 'content': [{'end': 1109.507, 'text': "Now I'm going to try to use REM units rather than pixels just because it's more responsive.", 'start': 1103.903, 'duration': 5.604}, {'end': 1124.335, 'text': "So we're going to do 0.6 REM on the top and bottom and 1.3 the left and right, and one REM is just a multiplier for the, the root HTML font size,", 'start': 1109.947, 'duration': 14.388}, {'end': 1127.117, 'text': 'which by default is 16 pixels.', 'start': 1124.335, 'duration': 2.782}, {'end': 1131.538, 'text': 'so one REM by default is going to be 16 pixels.', 'start': 1127.117, 'duration': 4.421}, {'end': 1139.782, 'text': 'okay, 1.3 is going to be whatever 16 pixels times 1.3 is, and I have a whole video on REM and M units if you want to check that out.', 'start': 1131.538, 'duration': 8.244}, {'end': 1142.457, 'text': "All right, so let's see.", 'start': 1140.936, 'duration': 1.521}, {'end': 1145.699, 'text': 'we also want to remove the underline.', 'start': 1142.457, 'duration': 3.242}, {'end': 1148.822, 'text': "So text decoration, we're going to set to none.", 'start': 1145.76, 'duration': 3.062}, {'end': 1152.805, 'text': "And then also border, we're going to set that to zero.", 'start': 1149.762, 'duration': 3.043}, {'end': 1156.127, 'text': "Okay, and there's our buttons.", 'start': 1152.825, 'duration': 3.302}, {'end': 1165.514, 'text': "And let's see, we're going to go ahead and say that all the images, we want the width, or we'll set a max width rather.", 'start': 1157.168, 'duration': 8.346}, {'end': 1173.613, 'text': 'to 100%, because we want the images to stay within their containers, within their parents.', 'start': 1167.19, 'duration': 6.423}, {'end': 1177.655, 'text': 'okay, and then for the wrapper that goes around everything.', 'start': 1173.613, 'duration': 4.042}, {'end': 1183.518, 'text': "we're going to display that as a grid and we want to give it a grid gap.", 'start': 1177.655, 'duration': 5.863}, {'end': 1185.879, 'text': 'okay, which is the spacing in between everything.', 'start': 1183.518, 'duration': 2.361}, {'end': 1189.461, 'text': "that way we don't have to manually assign all of our margins and stuff.", 'start': 1185.879, 'duration': 3.582}, {'end': 1191.182, 'text': "so we'll say 20 pixels for that.", 'start': 1189.461, 'duration': 1.721}, {'end': 1195.406, 'text': "Okay. so that's kind of the core styles.", 'start': 1192.765, 'duration': 2.641}, {'end': 1197.267, 'text': "Now we're going to work on each section.", 'start': 1195.466, 'duration': 1.801}, {'end': 1199.488, 'text': "We're going to start with the navigation up top.", 'start': 1197.347, 'duration': 2.141}, {'end': 1201.928, 'text': "So I'll put in a comment here.", 'start': 1200.508, 'duration': 1.42}, {'end': 1204.389, 'text': "We'll say navigation.", 'start': 1201.948, 'duration': 2.441}, {'end': 1207.751, 'text': 'And that has a class of main nav.', 'start': 1205.07, 'duration': 2.681}, {'end': 1209.711, 'text': 'And we want the ul.', 'start': 1208.531, 'duration': 1.18}, {'end': 1215.914, 'text': 'Okay, so this is going to be display grid.', 'start': 1213.293, 'duration': 2.621}], 'summary': 'Using rem units for responsive design, setting 0.6 rem for top/bottom and 1.3 rem for left/right, with default 16px root html font size. removing underline and border, setting max width for images, and using grid display with 20px grid gap.', 'duration': 112.011, 'max_score': 1103.903, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/moBhzSC455o/pics/moBhzSC455o1103903.jpg'}], 'start': 965.288, 'title': 'Css styling techniques', 'summary': 'Covers setting up variables for color and opacity, defining css properties for box sizing, font family, and background color, emphasizing the use of variables and their impact on element width and reusability. it also covers styling the website, global button class, and responsive images, with specific pixel and rem units for padding and line height, and applying grid display to the navigation ul.', 'chapters': [{'end': 1042.893, 'start': 965.288, 'title': 'Variable and style setup for html and css', 'summary': 'Covers setting up variables for color and opacity, as well as defining css properties for box sizing, font family, and background color, emphasizing the use of variables and their impact on element width and reusability.', 'duration': 77.605, 'highlights': ['Setting up variables for color and opacity The chapter discusses setting RGBA color and opacity variables, with the color specified as 104 three times and an opacity of 0.8.', 'Defining CSS properties for box sizing and font family It covers defining the box sizing property as border box and setting the font family to Arial, Helvetica, Sans Serif, while highlighting the impact on element width and flexibility.', 'Using variables and emphasizing reusability The chapter emphasizes the use of variables for colors and their reusability throughout CSS, while also addressing the redundancy of using variables for unique instances.']}, {'end': 1156.127, 'start': 1043.772, 'title': 'Styling website and buttons', 'summary': 'Covers adding margin to the website and styling the global button class with specific pixel and rem units for padding and line height, and removing underlines and borders.', 'duration': 112.355, 'highlights': ['Setting margin and line height Adding margin to the website with 30 pixels top and bottom and 50 pixels left and right, and setting line height to 1.4.', 'Styling the global button class Applying background color and text color to the global button class, using REM units for padding with 0.6 REM top and bottom and 1.3 REM left and right, and removing underline and border.']}, {'end': 1215.914, 'start': 1157.168, 'title': 'Css styling for responsive images and grid layout', 'summary': 'Covers setting a max width of 100% for images to stay within their containers, using grid display with a 20-pixel grid gap, and applying display grid to the navigation ul.', 'duration': 58.746, 'highlights': ['Setting a max width of 100% for images to stay within their containers', 'Using grid display with a 20-pixel grid gap', 'Applying display grid to the navigation ul']}], 'duration': 250.626, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/moBhzSC455o/pics/moBhzSC455o965288.jpg', 'highlights': ['Setting up variables for color and opacity The chapter discusses setting RGBA color and opacity variables, with the color specified as 104 three times and an opacity of 0.8.', 'Defining CSS properties for box sizing and font family It covers defining the box sizing property as border box and setting the font family to Arial, Helvetica, Sans Serif, while highlighting the impact on element width and flexibility.', 'Using variables and emphasizing reusability The chapter emphasizes the use of variables for colors and their reusability throughout CSS, while also addressing the redundancy of using variables for unique instances.', 'Setting margin and line height Adding margin to the website with 30 pixels top and bottom and 50 pixels left and right, and setting line height to 1.4.', 'Styling the global button class Applying background color and text color to the global button class, using REM units for padding with 0.6 REM top and bottom and 1.3 REM left and right, and removing underline and border.', 'Setting a max width of 100% for images to stay within their containers', 'Using grid display with a 20-pixel grid gap', 'Applying display grid to the navigation ul']}, {'end': 1747.412, 'segs': [{'end': 1288.467, 'src': 'embed', 'start': 1216.894, 'weight': 0, 'content': [{'end': 1217.934, 'text': 'Just like most things.', 'start': 1216.894, 'duration': 1.04}, {'end': 1222.056, 'text': "And we're going to say grid gap.", 'start': 1220.415, 'duration': 1.641}, {'end': 1236.117, 'text': "20 pixels, and let's set padding to 0, because by default ULs have padding and then set the list style to none.", 'start': 1225.455, 'duration': 10.662}, {'end': 1244.859, 'text': "we don't want any bullets and then we're going to set the grid template columns.", 'start': 1236.117, 'duration': 8.742}, {'end': 1257.539, 'text': "okay, now, for the columns, we have four links, right, so we can do one fractional, four times like this and save, and it'll do that.", 'start': 1244.859, 'duration': 12.68}, {'end': 1262.14, 'text': "it'll spread it apart, basically four different sections.", 'start': 1257.539, 'duration': 4.601}, {'end': 1272.984, 'text': 'a shorter way to write this, though, would be to use repeat and say repeat four times one fractional and save, and it gives us the same thing.', 'start': 1262.14, 'duration': 10.844}, {'end': 1277.346, 'text': 'okay, now we want to style each individual link.', 'start': 1272.984, 'duration': 4.362}, {'end': 1286.962, 'text': "so we're gonna go down here and say main nav a, And we want the background to be the primary color.", 'start': 1277.346, 'duration': 9.616}, {'end': 1288.467, 'text': "so we're going to use our variable of primary.", 'start': 1286.962, 'duration': 1.505}], 'summary': 'Setting grid gap to 20 pixels, padding to 0, and styling 4 links with the primary color.', 'duration': 71.573, 'max_score': 1216.894, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/moBhzSC455o/pics/moBhzSC455o1216894.jpg'}, {'end': 1351.439, 'src': 'embed', 'start': 1317.681, 'weight': 6, 'content': [{'end': 1327.386, 'text': "and for the color of the text, we're going to use the dark color, the variable we have, okay, and then let's also make them uppercase.", 'start': 1317.681, 'duration': 9.705}, {'end': 1338.873, 'text': "so we'll do text transform uppercase and let's do font size 19 pixels.", 'start': 1327.386, 'duration': 11.487}, {'end': 1340.674, 'text': "actually, let's not use, let's do one.", 'start': 1338.873, 'duration': 1.801}, {'end': 1344.876, 'text': "we'll do 1.1, rem, see what that looks like.", 'start': 1340.674, 'duration': 4.202}, {'end': 1346.117, 'text': 'and then box shadow.', 'start': 1344.876, 'duration': 1.241}, {'end': 1351.439, 'text': "we're going to use our shadow variable that we created above.", 'start': 1347.196, 'duration': 4.243}], 'summary': 'Styling the text with dark color, uppercase, 19px font size, 1.1rem, and box shadow.', 'duration': 33.758, 'max_score': 1317.681, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/moBhzSC455o/pics/moBhzSC455o1317681.jpg'}, {'end': 1421.069, 'src': 'embed', 'start': 1383.342, 'weight': 2, 'content': [{'end': 1395.826, 'text': "So we're just going to make the background dark and we hover and then the color and grab this, the color we're going to make light.", 'start': 1383.342, 'duration': 12.484}, {'end': 1402.188, 'text': 'So if we save that, we hover, there we go.', 'start': 1399.787, 'duration': 2.401}, {'end': 1403.668, 'text': 'So now we get the dark background.', 'start': 1402.208, 'duration': 1.46}, {'end': 1406.209, 'text': "So let's move on to the top container.", 'start': 1404.328, 'duration': 1.881}, {'end': 1421.069, 'text': "By the way, if you guys don't know, to make a comment like that, I just do control forward slash in VS Code.", 'start': 1413.581, 'duration': 7.488}], 'summary': 'Demonstrating how to change background color and make comments in vs code.', 'duration': 37.727, 'max_score': 1383.342, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/moBhzSC455o/pics/moBhzSC455o1383342.jpg'}, {'end': 1562.949, 'src': 'embed', 'start': 1535.291, 'weight': 3, 'content': [{'end': 1540.355, 'text': 'Okay, the grid system is two-dimensional, unlike Flexbox, which is just one-dimensional.', 'start': 1535.291, 'duration': 5.064}, {'end': 1544.878, 'text': 'So we can make this take up that we can make it go this way too.', 'start': 1540.915, 'duration': 3.963}, {'end': 1547.479, 'text': 'And then we have our top box be over here.', 'start': 1545.378, 'duration': 2.101}, {'end': 1552.102, 'text': 'So you can use these grid template areas as just that as templates.', 'start': 1547.879, 'duration': 4.223}, {'end': 1557.025, 'text': 'And you can kind of see how your content is going to look just within your CSS.', 'start': 1552.342, 'duration': 4.683}, {'end': 1557.925, 'text': 'All right.', 'start': 1557.685, 'duration': 0.24}, {'end': 1562.949, 'text': 'And I also have some images for when we change this up for the responsive versions as well.', 'start': 1558.206, 'duration': 4.743}], 'summary': 'Comparing grid system to flexbox, using grid template areas for content layout.', 'duration': 27.658, 'max_score': 1535.291, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/moBhzSC455o/pics/moBhzSC455o1535291.jpg'}, {'end': 1613.064, 'src': 'heatmap', 'start': 1579.816, 'weight': 1, 'content': [{'end': 1588.263, 'text': "We're going to say grid area and assign it to showcase because if we don't do this, it doesn't know what this means showcase.", 'start': 1579.816, 'duration': 8.447}, {'end': 1590.144, 'text': "So we're assigning it here.", 'start': 1588.723, 'duration': 1.421}, {'end': 1591.065, 'text': 'All right.', 'start': 1590.164, 'duration': 0.901}, {'end': 1601.054, 'text': "And then we're going to go down here and we're going to assign our top box a to grid area.", 'start': 1591.225, 'duration': 9.829}, {'end': 1605.521, 'text': 'top box A.', 'start': 1603.88, 'duration': 1.641}, {'end': 1607.021, 'text': 'And we want to do the same thing with B.', 'start': 1605.521, 'duration': 1.5}, {'end': 1608.922, 'text': "So I'll copy that.", 'start': 1607.021, 'duration': 1.901}, {'end': 1613.064, 'text': "We'll change this to B and also change this to B.", 'start': 1609.722, 'duration': 3.342}], 'summary': 'Assigning grid areas to showcase, top box a, and b.', 'duration': 33.248, 'max_score': 1579.816, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/moBhzSC455o/pics/moBhzSC455o1579816.jpg'}, {'end': 1705.524, 'src': 'embed', 'start': 1675.012, 'weight': 1, 'content': [{'end': 1689.536, 'text': "so i'm going to change the background size to cover and we're going to set the background position to center and save and there we go.", 'start': 1675.012, 'duration': 14.524}, {'end': 1692.497, 'text': "All right, let's see.", 'start': 1689.556, 'duration': 2.941}, {'end': 1694.278, 'text': "Let's also add some padding.", 'start': 1692.517, 'duration': 1.761}, {'end': 1701.842, 'text': "So we'll say padding 3rem, so that's 16 times 3.", 'start': 1694.298, 'duration': 7.544}, {'end': 1705.524, 'text': 'And when you use rems, you can see the pixels if you want.', 'start': 1701.842, 'duration': 3.682}], 'summary': 'Changed background size to cover, set position to center, added padding of 3rem (48px)', 'duration': 30.512, 'max_score': 1675.012, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/moBhzSC455o/pics/moBhzSC455o1675012.jpg'}], 'start': 1216.894, 'title': 'Css styling and grid layout', 'summary': 'Covers setting grid gap, padding, list style, grid template columns, styling individual links, using repeat function for a responsive layout, applying css for styling elements, setting text properties, creating hover effects, and implementing specific grid layouts for showcase and top boxes.', 'chapters': [{'end': 1315.568, 'start': 1216.894, 'title': 'Css grid layout and styling', 'summary': 'Covers setting grid gap, padding, list style, grid template columns, styling individual links, and using repeat function to create a responsive layout.', 'duration': 98.674, 'highlights': ['The chapter covers setting grid gap, padding, list style, grid template columns, styling individual links, and using repeat function to create a responsive layout.', 'Using repeat function to set the grid template columns for four links with one fractional value for each, resulting in a responsive layout.', 'Setting the background of individual links to the primary color and applying styling properties like display, text decoration, padding, and text alignment.']}, {'end': 1747.412, 'start': 1317.681, 'title': 'Css styling and grid layout', 'summary': 'Covers the application of css for styling elements, including setting text properties, creating hover effects, and implementing grid layouts for a showcase and top boxes with specific dimensions and backgrounds.', 'duration': 429.731, 'highlights': ["The chapter includes setting text properties like color, text transformation, and font size, with an example of using '1.1 rem' for font size and creating a box shadow using a previously defined variable.", 'Demonstrates creating a hover effect for main navigation links by changing background and text color properties, and explaining the process of making a comment in VS Code.', 'Explains the process of implementing a grid layout with specific areas and assigning grid area properties to showcase and top box elements, with visual representation and explanation of grid template areas.', "Illustrates setting specific dimensions, background image, background size, and position for the showcase element, including using 'padding 3rem' and its equivalent pixel value, and explaining how to check pixel values in development tools."]}], 'duration': 530.518, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/moBhzSC455o/pics/moBhzSC455o1216894.jpg', 'highlights': ['The chapter covers setting grid gap, padding, list style, grid template columns, styling individual links, and using repeat function to create a responsive layout.', "Illustrates setting specific dimensions, background image, background size, and position for the showcase element, including using 'padding 3rem' and its equivalent pixel value, and explaining how to check pixel values in development tools.", 'Demonstrates creating a hover effect for main navigation links by changing background and text color properties, and explaining the process of making a comment in VS Code.', 'Explains the process of implementing a grid layout with specific areas and assigning grid area properties to showcase and top box elements, with visual representation and explanation of grid template areas.', 'Using repeat function to set the grid template columns for four links with one fractional value for each, resulting in a responsive layout.', 'Setting the background of individual links to the primary color and applying styling properties like display, text decoration, padding, and text alignment.', "The chapter includes setting text properties like color, text transformation, and font size, with an example of using '1.1 rem' for font size and creating a box shadow using a previously defined variable."]}, {'end': 2373.402, 'segs': [{'end': 1776.645, 'src': 'embed', 'start': 1747.692, 'weight': 0, 'content': [{'end': 1754.635, 'text': "You can barely see it because we need to change the color, but the heading, the paragraph, and I'm actually going to use Flexbox to do this.", 'start': 1747.692, 'duration': 6.943}, {'end': 1760.738, 'text': "Now, one misconception is that if you use Grid, you can't use Flexbox at all.", 'start': 1755.175, 'duration': 5.563}, {'end': 1769.182, 'text': 'Now, what I like to do is use the Grid to layout the site, layout all the boxes, all the areas of the site or the UI of the application.', 'start': 1761.218, 'duration': 7.964}, {'end': 1776.645, 'text': "and then I'll use flexbox to align things inside of those elements, if that makes sense.", 'start': 1769.682, 'duration': 6.963}], 'summary': 'Using grid to layout site, then flexbox for alignment.', 'duration': 28.953, 'max_score': 1747.692, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/moBhzSC455o/pics/moBhzSC455o1747692.jpg'}, {'end': 1836.385, 'src': 'embed', 'start': 1799.077, 'weight': 1, 'content': [{'end': 1804.718, 'text': "We're going to say align items to the start.", 'start': 1799.077, 'duration': 5.641}, {'end': 1813.339, 'text': "And let's say justify content to the center, which will move it down.", 'start': 1806.758, 'duration': 6.581}, {'end': 1818.801, 'text': "And then I'm also going to add the shadow to the showcase.", 'start': 1814.86, 'duration': 3.941}, {'end': 1820.821, 'text': "So we'll say box shadow.", 'start': 1819.361, 'duration': 1.46}, {'end': 1825.622, 'text': "And we're going to use our variable that we created of shadow.", 'start': 1822.981, 'duration': 2.641}, {'end': 1832.582, 'text': "All right, so now let's do the inner elements, the H1 and the paragraph.", 'start': 1827.898, 'duration': 4.684}, {'end': 1836.385, 'text': "So we're going to go down here and say showcase H1.", 'start': 1832.642, 'duration': 3.743}], 'summary': 'Align items to start, justify content to center, add shadow to showcase.', 'duration': 37.308, 'max_score': 1799.077, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/moBhzSC455o/pics/moBhzSC455o1799077.jpg'}, {'end': 2104.269, 'src': 'embed', 'start': 2073.551, 'weight': 2, 'content': [{'end': 2081.753, 'text': "I also want to make it so that we don't have to keep changing the grid template columns when we get to a certain size,", 'start': 2073.551, 'duration': 8.202}, {'end': 2087.295, 'text': 'because obviously four across is too many when you get down to a small width.', 'start': 2081.753, 'duration': 5.542}, {'end': 2099.748, 'text': "So the solution to this is gonna be to say repeat and then we're gonna say auto fit.", 'start': 2088.396, 'duration': 11.352}, {'end': 2104.269, 'text': "And then we're going to use this min max function that comes with the grid.", 'start': 2100.548, 'duration': 3.721}], 'summary': 'Avoid changing grid template columns by using repeat and auto-fit with min max function.', 'duration': 30.718, 'max_score': 2073.551, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/moBhzSC455o/pics/moBhzSC455o2073551.jpg'}, {'end': 2167.661, 'src': 'embed', 'start': 2135.427, 'weight': 3, 'content': [{'end': 2135.807, 'text': 'All right.', 'start': 2135.427, 'duration': 0.38}, {'end': 2139.589, 'text': "So I think that that's a good way to do it.", 'start': 2137.488, 'duration': 2.101}, {'end': 2144.131, 'text': 'So now what we want to do is style each individual box.', 'start': 2140.89, 'duration': 3.241}, {'end': 2146.672, 'text': 'We want to give it a background and stuff.', 'start': 2144.992, 'duration': 1.68}, {'end': 2147.793, 'text': "So let's say box.", 'start': 2146.772, 'duration': 1.021}, {'end': 2153.453, 'text': "And it's going to have background.", 'start': 2151.252, 'duration': 2.201}, {'end': 2157.335, 'text': "And we'll use the primary variable.", 'start': 2155.474, 'duration': 1.861}, {'end': 2162.498, 'text': 'We also want to align everything to the center.', 'start': 2160.177, 'duration': 2.321}, {'end': 2167.661, 'text': "And let's add some padding.", 'start': 2162.518, 'duration': 5.143}], 'summary': 'Styling individual boxes with background, alignment, and padding.', 'duration': 32.234, 'max_score': 2135.427, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/moBhzSC455o/pics/moBhzSC455o2135427.jpg'}, {'end': 2231.571, 'src': 'embed', 'start': 2201.99, 'weight': 4, 'content': [{'end': 2203.811, 'text': "And we're also going to have the box shadow.", 'start': 2201.99, 'duration': 1.821}, {'end': 2207.132, 'text': 'Copy that.', 'start': 2206.452, 'duration': 0.68}, {'end': 2210.534, 'text': "And then we'll do display grid.", 'start': 2208.153, 'duration': 2.381}, {'end': 2214.341, 'text': "Let's add a grid gap.", 'start': 2213.12, 'duration': 1.221}, {'end': 2217.984, 'text': "I'm going to use 30 here just to push it apart a little more.", 'start': 2215.142, 'duration': 2.842}, {'end': 2220.326, 'text': "And then let's do our grid.", 'start': 2218.004, 'duration': 2.322}, {'end': 2224.969, 'text': 'template columns, and this is going to be really simple.', 'start': 2222.048, 'duration': 2.921}, {'end': 2231.571, 'text': "I just want to do two fractionals, or one fr, one fr, but I'm just going to use repeat.", 'start': 2225.409, 'duration': 6.162}], 'summary': 'Applying box shadow, grid display with gap, using repeat for layout.', 'duration': 29.581, 'max_score': 2201.99, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/moBhzSC455o/pics/moBhzSC455o2201990.jpg'}], 'start': 1747.692, 'title': 'Ui layout and responsive grid', 'summary': 'Explains using grid for layout and flexbox for alignment, with examples including setting flex direction, align items, justify content, and adding shadow and color to elements. it also covers building a responsive grid layout using css grid, including setting grid template columns, utilizing media queries for responsiveness, and styling individual boxes, info section, portfolio, and footer.', 'chapters': [{'end': 2004.07, 'start': 1747.692, 'title': 'Using grid and flexbox for ui layout', 'summary': 'Explains the use of grid for layout and flexbox for alignment, with examples including setting flex direction, align items, justify content, and adding shadow and color to elements.', 'duration': 256.378, 'highlights': ['The chapter explains the use of Grid for layout and Flexbox for alignment The speaker describes using Grid to layout the site and then using Flexbox to align things inside those elements.', 'Examples include setting flex direction, align items, justify content, and adding shadow and color to elements The speaker demonstrates setting flex direction to column, aligning items to the start, justifying content to the center, and adding shadow and color to elements.', 'Setting the font size of the heading to 4rem and the paragraph to 1.3 rem The speaker sets the font size of the heading to 4rem and the paragraph to 1.3rem to adjust their appearance.', 'Setting the price font size to 2.5 rems The speaker sets the font size of the price to 2.5 rems to make it much bigger.']}, {'end': 2373.402, 'start': 2004.07, 'title': 'Building responsive grid layout', 'summary': 'Covers building a responsive grid layout using css grid, including setting grid template columns, utilizing media queries for responsiveness, and styling individual boxes, info section, portfolio, and footer.', 'duration': 369.332, 'highlights': ["The solution to making the grid layout responsive is to use 'repeat' and 'auto fit' with 'min max' function, ensuring automatic adjustment of the grid without specifying template columns for each media query.", 'Styling individual boxes involves setting background using the primary variable, aligning to the center, adding padding, and applying box shadow.', "Setting up the info section includes defining background, box shadow, display grid with grid gap, and grid template columns using 'repeat' to split it into two columns.", "For the portfolio, display grid with grid gap is used and the same 'auto fit' technique is applied to the grid template columns, along with ensuring image width is 100% of its container and adding box shadow.", 'Creating the footer involves setting margin, background, color, text alignment, and padding for the footer tag.']}], 'duration': 625.71, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/moBhzSC455o/pics/moBhzSC455o1747692.jpg', 'highlights': ['The chapter explains the use of Grid for layout and Flexbox for alignment', 'Examples include setting flex direction, align items, justify content, and adding shadow and color to elements', "The solution to making the grid layout responsive is to use 'repeat' and 'auto fit' with 'min max' function", 'Styling individual boxes involves setting background using the primary variable, aligning to the center, adding padding, and applying box shadow', "Setting up the info section includes defining background, box shadow, display grid with grid gap, and grid template columns using 'repeat' to split it into two columns"]}, {'end': 2731.165, 'segs': [{'end': 2411.912, 'src': 'embed', 'start': 2374.303, 'weight': 0, 'content': [{'end': 2378.005, 'text': "All right, so that's just the regular website.", 'start': 2374.303, 'duration': 3.702}, {'end': 2381.987, 'text': "Now we need to work on the media queries, okay, which isn't too difficult.", 'start': 2378.065, 'duration': 3.922}, {'end': 2383.608, 'text': "So let's do that down here.", 'start': 2382.087, 'duration': 1.521}, {'end': 2392.722, 'text': "so we're going to do a 700 and a 500 media query.", 'start': 2388.92, 'duration': 3.802}, {'end': 2397.825, 'text': "so let's say media.", 'start': 2392.722, 'duration': 5.103}, {'end': 2402.187, 'text': 'so for the max width of 700 pixels.', 'start': 2397.825, 'duration': 4.362}, {'end': 2406.77, 'text': "so anything we put in here will only be in effect if we're 700 pixels or less.", 'start': 2402.187, 'duration': 4.583}, {'end': 2411.912, 'text': "so first thing we'll do is the top container.", 'start': 2406.77, 'duration': 5.142}], 'summary': 'Implementing media queries for 700 and 500 pixels max width on the website.', 'duration': 37.609, 'max_score': 2374.303, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/moBhzSC455o/pics/moBhzSC455o2374303.jpg'}, {'end': 2515.854, 'src': 'embed', 'start': 2479.079, 'weight': 1, 'content': [{'end': 2488.463, 'text': 'okay. so that should this grid template areas makes it now change to this style, this format right now.', 'start': 2479.079, 'duration': 9.384}, {'end': 2493.265, 'text': 'some other things I want to do is I want the H1 to shrink up a little.', 'start': 2488.463, 'duration': 4.802}, {'end': 2500.228, 'text': "so we're gonna say showcase H1 and we're gonna set that font size to 2.5.", 'start': 2493.265, 'duration': 6.963}, {'end': 2508.064, 'text': "rem. All right, let's also do the menu.", 'start': 2500.228, 'duration': 7.836}, {'end': 2515.854, 'text': 'I mean, I guess it looks OK here, but when it gets smaller, You can see that.', 'start': 2508.084, 'duration': 7.77}], 'summary': 'Adjusting grid template areas and font sizes for better display.', 'duration': 36.775, 'max_score': 2479.079, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/moBhzSC455o/pics/moBhzSC455o2479079.jpg'}, {'end': 2686.153, 'src': 'embed', 'start': 2658.283, 'weight': 2, 'content': [{'end': 2662.186, 'text': 'And then I want to change it to this, showcase top box A, top box B.', 'start': 2658.283, 'duration': 3.903}, {'end': 2665.108, 'text': 'So on this top one, we just want showcase.', 'start': 2662.186, 'duration': 2.922}, {'end': 2668.551, 'text': 'The second one we want just top box A.', 'start': 2665.348, 'duration': 3.203}, {'end': 2672.274, 'text': 'The last one we want top box B.', 'start': 2668.551, 'duration': 3.723}, {'end': 2676.004, 'text': "Let's save and go back and there we go.", 'start': 2673.342, 'duration': 2.662}, {'end': 2680.308, 'text': 'So now everything is in a single line.', 'start': 2677.866, 'duration': 2.442}, {'end': 2686.153, 'text': "It's all stacked and it's completely responsive even on very small mobile devices.", 'start': 2680.828, 'duration': 5.325}], 'summary': 'The changes made resulted in a single-line, stacked, and completely responsive layout, even on small mobile devices.', 'duration': 27.87, 'max_score': 2658.283, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/moBhzSC455o/pics/moBhzSC455o2658283.jpg'}, {'end': 2731.165, 'src': 'embed', 'start': 2711.169, 'weight': 3, 'content': [{'end': 2711.669, 'text': "But that's it.", 'start': 2711.169, 'duration': 0.5}, {'end': 2713.751, 'text': 'Thanks for watching and I will see you next time.', 'start': 2711.709, 'duration': 2.042}, {'end': 2720.581, 'text': 'Hey guys, if you like my style of teaching, check out my premium Udemy courses listed at TraverseyMedia.com.', 'start': 2714.758, 'duration': 5.823}, {'end': 2728.364, 'text': 'I have courses in Angular, Node.js, Bootstrap 4, PHP, and my most recent 21-hour Modern JavaScript from the beginning course.', 'start': 2720.621, 'duration': 7.743}, {'end': 2731.165, 'text': 'All links from the website are promotional with up to 90% savings.', 'start': 2728.784, 'duration': 2.381}], 'summary': 'Traverseymedia offers premium udemy courses in angular, node.js, bootstrap 4, php, and modern javascript with up to 90% savings.', 'duration': 19.996, 'max_score': 2711.169, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/moBhzSC455o/pics/moBhzSC455o2711169.jpg'}], 'start': 2374.303, 'title': 'Implementing media queries for responsive web design', 'summary': 'Focuses on utilizing media queries for 700 and 500 pixels to adjust grid template areas, font size, menu display, and button layout, achieving full responsiveness. it also includes an invitation to explore premium udemy courses and promotional offers.', 'chapters': [{'end': 2731.165, 'start': 2374.303, 'title': 'Responsive web design with media queries', 'summary': 'Discusses the implementation of media queries for 700 and 500 pixels, adjusting grid template areas, font size, menu display, and button layout, resulting in a fully responsive web design. the tutorial concludes with an invitation to explore premium udemy courses and promotional offers.', 'duration': 356.862, 'highlights': ['Implementation of media queries for 700 and 500 pixels The tutorial discusses the application of media queries for 700 and 500 pixels to ensure responsiveness, allowing elements to adapt to different screen sizes.', 'Adjusting grid template areas and font size The chapter covers the adjustment of grid template areas and font size to optimize the layout for different screen sizes, ensuring a visually appealing web design.', 'Modifying menu display and button layout The tutorial demonstrates the modification of menu display and button layout to ensure a seamless user experience across various devices, enhancing the overall web design.', 'Invitation to explore premium Udemy courses and promotional offers The tutorial concludes with an invitation to explore premium Udemy courses and promotional offers, providing an opportunity for learners to access in-depth knowledge and resources for web development.']}], 'duration': 356.862, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/moBhzSC455o/pics/moBhzSC455o2374303.jpg', 'highlights': ['Implementation of media queries for 700 and 500 pixels to ensure responsiveness.', 'Adjusting grid template areas and font size to optimize layout for different screen sizes.', 'Modifying menu display and button layout for a seamless user experience.', 'Invitation to explore premium Udemy courses and promotional offers for in-depth knowledge.']}], 'highlights': ['The chapter covers creating a responsive grid CSS website to teach about the fundamentals of the grid in a real project, which seems to be lacking on the web and in tutorials.', 'The chapter explains the use of Grid for layout and Flexbox for alignment.', 'The chapter focuses on creating a responsive grid CSS website to teach about the fundamentals of the grid in a real project, which seems to be lacking on the web and in tutorials.', 'The chapter covers setting grid gap, padding, list style, grid template columns, styling individual links, and using repeat function to create a responsive layout.', 'The chapter covers setting grid gap, padding, list style, grid template columns, styling individual links, and using repeat function to create a responsive layout.']}