title
Grid CSS Responsive Website Layout - "Mobile First" Design

description
Add MailTag to your browser (it's free) ➜ https://goo.gl/qZf5Pj Thank you MailTag for sponsoring this video In this video we will build a "mobile first" single page website layout using the CSS Grid. We will use modern techniques including relative em units, media queries and even a little flex. CODE: Codepen https://codepen.io/bradtraversy/pen/RjpQvZ BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia ONE TIME DONATIONS: http://www.paypal.me/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': 'Grid CSS Responsive Website Layout - "Mobile First" Design', 'heatmap': [{'end': 359.04, 'start': 323.55, 'weight': 0.751}, {'end': 416.653, 'start': 380.433, 'weight': 0.734}, {'end': 680.46, 'start': 616.209, 'weight': 0.962}, {'end': 769.283, 'start': 734.806, 'weight': 0.981}, {'end': 1747.5, 'start': 1710.88, 'weight': 0.763}, {'end': 2159.655, 'start': 2122.682, 'weight': 0.872}, {'end': 2543.457, 'start': 2475.394, 'weight': 1}], 'summary': 'Tutorial covers creating responsive grid layouts, web layout markup, updating projects, css styling techniques, website styling, grid layout, responsive grid sizing, and layout adjustment, emphasizing a mobile-first approach and modern grid layouts with flexbox and css, targeting screen sizes larger than 700 pixels, with practical application and implementation details.', 'chapters': [{'end': 282.772, 'segs': [{'end': 72.439, 'src': 'embed', 'start': 27.337, 'weight': 0, 'content': [{'end': 29.939, 'text': 'so i have a really cool project for you guys today.', 'start': 27.337, 'duration': 2.602}, {'end': 39.963, 'text': "i did a grid css crash course a few months ago and i've been asked over and over to do some kind of layout or website with the grid system.", 'start': 29.939, 'duration': 10.024}, {'end': 40.104, 'text': 'uh.', 'start': 39.963, 'duration': 0.141}, {'end': 41.744, 'text': "because, honestly, there's not a lot out there.", 'start': 40.104, 'duration': 1.64}, {'end': 48.708, 'text': "there's some other crash course, type videos, but nothing where where they actually create something, especially something that's responsive.", 'start': 41.744, 'duration': 6.964}, {'end': 52.79, 'text': "so we're going to create this single page layout website, uh.", 'start': 48.708, 'duration': 4.082}, {'end': 57.452, 'text': "for a fictional company called acme web solutions And it's completely responsive.", 'start': 52.79, 'duration': 4.662}, {'end': 66.596, 'text': "You'll see if I make this smaller, once we get around 700 pixels, that kicks in and you can see everything is now stacked and looks really nice.", 'start': 57.492, 'duration': 9.104}, {'end': 72.439, 'text': "All right, so we're going to be using a four fractional layout for our grid.", 'start': 67.196, 'duration': 5.243}], 'summary': 'Creating a responsive single-page layout website using grid system for acme web solutions.', 'duration': 45.102, 'max_score': 27.337, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M3qBpPw77qo/pics/M3qBpPw77qo27337.jpg'}, {'end': 132.586, 'src': 'embed', 'start': 110.481, 'weight': 1, 'content': [{'end': 118.551, 'text': "And we're taking a mobile first approach, which means just that we're going to just we're going to create the layout for a mobile site first.", 'start': 110.481, 'duration': 8.07}, {'end': 120.753, 'text': 'So it will be basically just all stacked.', 'start': 118.711, 'duration': 2.042}, {'end': 123.296, 'text': "And then we'll apply the grid system.", 'start': 121.294, 'duration': 2.002}, {'end': 126.981, 'text': "And we'll have these these columns or fractionals.", 'start': 123.857, 'duration': 3.124}, {'end': 132.586, 'text': "Now the one part of the layout we're going to use flexbox is with these three cards right here.", 'start': 127.679, 'duration': 4.907}], 'summary': 'Mobile-first approach with flexbox for layout and grid system for columns.', 'duration': 22.105, 'max_score': 110.481, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M3qBpPw77qo/pics/M3qBpPw77qo110481.jpg'}, {'end': 211.617, 'src': 'embed', 'start': 180.196, 'weight': 2, 'content': [{'end': 186.84, 'text': 'The grid is going to go inside of a CSS media query for only on screen sizes larger than 700 pixels.', 'start': 180.196, 'duration': 6.644}, {'end': 192.004, 'text': "So we're not going to get to the grid until closer to the end.", 'start': 188.221, 'duration': 3.783}, {'end': 201.451, 'text': "But like I said, I think I said, I like to start from scratch in my videos just so people aren't lost, so they can just start fresh.", 'start': 192.564, 'duration': 8.887}, {'end': 206.274, 'text': "So let's go ahead and create two files here, index.html and style.css.", 'start': 202.171, 'duration': 4.103}, {'end': 211.617, 'text': 'All right.', 'start': 211.297, 'duration': 0.32}], 'summary': 'Creating two files, index.html and style.css, for grid implementation on screen sizes larger than 700 pixels.', 'duration': 31.421, 'max_score': 180.196, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M3qBpPw77qo/pics/M3qBpPw77qo180196.jpg'}], 'start': 7.486, 'title': 'Creating responsive grid layouts', 'summary': 'Covers creating single page layout websites using responsive fractional grid systems and modern grid layouts with flexbox, emphasizing practical application and mobile-first approach, with implementation for screen sizes larger than 700 pixels.', 'chapters': [{'end': 89.453, 'start': 7.486, 'title': 'Creating a responsive single page layout with grid css', 'summary': 'Covers creating a single page layout website for a fictional company using a responsive four fractional layout grid system, with emphasis on the lack of such tutorials and the practical application of grid css.', 'duration': 81.967, 'highlights': ['The chapter emphasizes the lack of tutorials on creating responsive layout websites using the grid system. Emphasizes the lack of practical tutorials and resources on creating responsive layout websites using the grid system.', 'The tutorial focuses on creating a single page layout website for a fictional company called Acme Web Solutions. Focuses on creating a single page layout website for a fictional company called Acme Web Solutions.', 'The chapter demonstrates the use of a responsive four fractional layout for the grid system. Demonstrates the use of a responsive four fractional layout for the grid system.']}, {'end': 158.032, 'start': 89.953, 'title': 'Modern grid layout with flexbox', 'summary': 'Covers the creation of a modern grid layout using fractionals and flexbox, taking a mobile-first approach and implementing flexbox for aligning three cards.', 'duration': 68.079, 'highlights': ['Creation of a modern grid layout using fractionals and flexbox The tutorial covers the process of creating a modern grid layout using fractionals and flexbox for a modern and unique markup.', 'Taking a mobile-first approach The tutorial emphasizes a mobile-first approach for creating the layout, ensuring that it is initially designed for mobile devices before applying the grid system.', 'Implementation of flexbox for aligning three cards The use of display flex is demonstrated for aligning three cards, which are list items with the class of card, similar to materialize or bootstrap.']}, {'end': 282.772, 'start': 158.032, 'title': 'Building css grid layout', 'summary': 'Covers the process of building a mobile-first css grid layout, starting from scratch, and initially focusing on the markup before implementing the grid within a css media query for screen sizes larger than 700 pixels.', 'duration': 124.74, 'highlights': ['The grid is implemented inside a CSS media query for screen sizes larger than 700 pixels, following a mobile-first approach.', 'The process begins with creating two files, index.html and style.css, and focusing on markup before CSS.', "Emmet is used for faster markup generation, and the title is set as 'Acme Web Solutions' with a link to style.css.", 'The use of Live Server for Visual Studio Code is recommended for auto-loading capabilities and convenient development.']}], 'duration': 275.286, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M3qBpPw77qo/pics/M3qBpPw77qo7486.jpg', 'highlights': ['The tutorial focuses on creating a single page layout website for a fictional company called Acme Web Solutions.', 'Creation of a modern grid layout using fractionals and flexbox for a modern and unique markup.', 'The grid is implemented inside a CSS media query for screen sizes larger than 700 pixels, following a mobile-first approach.', 'Taking a mobile-first approach for creating the layout, ensuring that it is initially designed for mobile devices before applying the grid system.', 'Emphasizes the lack of practical tutorials and resources on creating responsive layout websites using the grid system.', 'The chapter demonstrates the use of a responsive four fractional layout for the grid system.']}, {'end': 769.283, 'segs': [{'end': 359.04, 'src': 'heatmap', 'start': 284.21, 'weight': 0, 'content': [{'end': 285.371, 'text': "So that's it for the head.", 'start': 284.21, 'duration': 1.161}, {'end': 287.772, 'text': "Now we're going to start on the markup.", 'start': 285.531, 'duration': 2.241}, {'end': 291.694, 'text': "So basically we're going to start with the header, the showcase, which is this area here.", 'start': 287.872, 'duration': 3.822}, {'end': 294.535, 'text': "Then we'll move to section A.", 'start': 292.494, 'duration': 2.041}, {'end': 298.958, 'text': 'Section B is all of these images, these cards right here.', 'start': 294.535, 'duration': 4.423}, {'end': 304.58, 'text': 'And then section C is this right here.', 'start': 299.538, 'duration': 5.042}, {'end': 307.302, 'text': 'Section D is these two boxes.', 'start': 305.201, 'duration': 2.101}, {'end': 308.622, 'text': 'And then we have the footer.', 'start': 307.502, 'duration': 1.12}, {'end': 311.204, 'text': 'So those are the main parts of this layout.', 'start': 308.743, 'duration': 2.461}, {'end': 312.985, 'text': "So let's start with the header.", 'start': 311.864, 'duration': 1.121}, {'end': 318.287, 'text': "I'm going to put a comment in here and say header showcase.", 'start': 313.005, 'duration': 5.282}, {'end': 323.17, 'text': "So basically we're going to put in HTML5 header tag.", 'start': 319.528, 'duration': 3.642}, {'end': 325.931, 'text': "We're going to give it an ID of showcase.", 'start': 323.55, 'duration': 2.381}, {'end': 330.133, 'text': "And then we're going to give it a class of grid.", 'start': 327.572, 'duration': 2.561}, {'end': 333.743, 'text': "OK, so I'm using Emmett and that's why I'm able to do this.", 'start': 331.061, 'duration': 2.682}, {'end': 337.526, 'text': "So header, I'm giving it an idea of showcase a class of grid.", 'start': 333.903, 'duration': 3.623}, {'end': 340.189, 'text': 'I hit tab and it gives us the markup.', 'start': 337.927, 'duration': 2.262}, {'end': 340.729, 'text': 'All right.', 'start': 340.409, 'duration': 0.32}, {'end': 342.39, 'text': 'So I would suggest using Emmett.', 'start': 340.809, 'duration': 1.581}, {'end': 351.318, 'text': "If you're not using VSCode, you can easily install it as an extension for, you know, if you're using Sublime Text or Atom or something like that.", 'start': 342.811, 'duration': 8.507}, {'end': 352.439, 'text': 'All right.', 'start': 352.158, 'duration': 0.281}, {'end': 359.04, 'text': "Now, one thing that I want to mention is that for the background, it's faded, it has an opacity.", 'start': 352.599, 'duration': 6.441}], 'summary': 'Creating markup for header, section a, b, c, d, and footer with html5 tags and class/grid ids.', 'duration': 74.83, 'max_score': 284.21, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M3qBpPw77qo/pics/M3qBpPw77qo284210.jpg'}, {'end': 416.653, 'src': 'heatmap', 'start': 380.433, 'weight': 0.734, 'content': [{'end': 384.436, 'text': 'all the background properties and all that, and then we can add some opacity to it.', 'start': 380.433, 'duration': 4.003}, {'end': 395.259, 'text': "Alright, and then let's see, under that we're going to have an H1 and we're just going to say welcome to Acme Web Solutions.", 'start': 385.393, 'duration': 9.866}, {'end': 401.023, 'text': "And then we'll have a paragraph and let's see, we're going to do lorem 20.", 'start': 397.16, 'duration': 3.863}, {'end': 408.167, 'text': 'Okay, with Emmet we can say lorem 20, hit tab, and it gives us 20 sample text words or dummy text.', 'start': 401.023, 'duration': 7.144}, {'end': 416.653, 'text': "All right, and then under that, we're going to have an A tag with the class of BTN, which is a class that we'll create, or style we'll create.", 'start': 409.471, 'duration': 7.182}], 'summary': 'Creating web design elements: background, h1, paragraph, and a tag with class btn.', 'duration': 36.22, 'max_score': 380.433, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M3qBpPw77qo/pics/M3qBpPw77qo380433.jpg'}, {'end': 543.873, 'src': 'embed', 'start': 518.188, 'weight': 4, 'content': [{'end': 523.169, 'text': "All right, we're going to use this class later on with the grid to span our content.", 'start': 518.188, 'duration': 4.981}, {'end': 527.57, 'text': "It's basically going to be kind of used as a container to push things to the middle.", 'start': 523.568, 'duration': 4.002}, {'end': 534.471, 'text': "Let's see, and then inside there, we're going to have an H2 with a class of content dash title.", 'start': 528.91, 'duration': 5.561}, {'end': 543.873, 'text': "All right, and for the title, we're going to say web and application development.", 'start': 535.591, 'duration': 8.282}], 'summary': 'Using a class to center content in a grid layout with an h2 title for web and application development.', 'duration': 25.685, 'max_score': 518.188, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M3qBpPw77qo/pics/M3qBpPw77qo518188.jpg'}, {'end': 680.46, 'src': 'heatmap', 'start': 616.209, 'weight': 0.962, 'content': [{'end': 619.83, 'text': "And then inside the li, we're going to have a div with the class of card.", 'start': 616.209, 'duration': 3.621}, {'end': 624.751, 'text': "So in this card div, we'll have our image.", 'start': 621.43, 'duration': 3.321}, {'end': 627.851, 'text': 'So this is where our first inline image will go.', 'start': 625.191, 'duration': 2.66}, {'end': 636.633, 'text': "Now, to get these images, I'm going to go to pexels.com, P-E-X-E-L-S, not pixels.", 'start': 628.571, 'duration': 8.062}, {'end': 639.433, 'text': "And I'm going to search for programming.", 'start': 637.533, 'duration': 1.9}, {'end': 647.331, 'text': "Whoops, programming, and it's this one right here.", 'start': 639.453, 'duration': 7.878}, {'end': 652.634, 'text': "so this image now, if this was production, if you're going to use this, you know, live on the web,", 'start': 647.331, 'duration': 5.303}, {'end': 659.438, 'text': "you're going to want to download the image and then, you know, use it from your, your actual file structure.", 'start': 652.634, 'duration': 6.804}, {'end': 664.921, 'text': "but i want to post this on codepen, so i don't want to have any actual images downloaded.", 'start': 659.438, 'duration': 5.483}, {'end': 669.323, 'text': "so what i'm going to do is click on free download and i'm just going to grab the link.", 'start': 664.921, 'duration': 4.402}, {'end': 671.425, 'text': 'all right, so you guys can choose what you want to do.', 'start': 669.323, 'duration': 2.102}, {'end': 674.458, 'text': "We're gonna put this right in here.", 'start': 673.017, 'duration': 1.441}, {'end': 680.46, 'text': "All right, let's save that and let's take a look, and it's gonna be absolutely humongous.", 'start': 674.458, 'duration': 6.002}], 'summary': 'Adding a card with an inline image sourced from pexels, avoiding downloading for use in codepen.', 'duration': 64.251, 'max_score': 616.209, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M3qBpPw77qo/pics/M3qBpPw77qo616209.jpg'}, {'end': 769.283, 'src': 'heatmap', 'start': 734.806, 'weight': 0.981, 'content': [{'end': 739.91, 'text': 'So let me just open up my dev tools so that that moves up.', 'start': 734.806, 'duration': 5.104}, {'end': 741.211, 'text': 'All right.', 'start': 740.891, 'duration': 0.32}, {'end': 742.593, 'text': 'So we have our text here.', 'start': 741.251, 'duration': 1.342}, {'end': 747.116, 'text': 'Now what we want to do is we want a couple more of these list items.', 'start': 743.733, 'duration': 3.383}, {'end': 751.38, 'text': "So what I'll do is grab this ally, copy it.", 'start': 748.097, 'duration': 3.283}, {'end': 754.339, 'text': 'and paste it in two more times.', 'start': 752.558, 'duration': 1.781}, {'end': 756.199, 'text': "Let's format that.", 'start': 755.079, 'duration': 1.12}, {'end': 763.562, 'text': "In VS Code, you can do Alt-Shift-F, and it'll format your markup or whatever.", 'start': 758, 'duration': 5.562}, {'end': 765.562, 'text': "Let's see.", 'start': 765.262, 'duration': 0.3}, {'end': 769.283, 'text': "We're going to go to the second list item and we want to change the image.", 'start': 765.582, 'duration': 3.701}], 'summary': 'Adding two more list items using vs code for formatting.', 'duration': 34.477, 'max_score': 734.806, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M3qBpPw77qo/pics/M3qBpPw77qo734806.jpg'}], 'start': 284.21, 'title': 'Web layout and development', 'summary': 'Discusses web layout markup using html5 and css, covering sections like header, showcase, images, boxes, and footer. it also includes web development layout and styling, with a focus on using classes, ids, images, content, and grid system implementation.', 'chapters': [{'end': 380.433, 'start': 284.21, 'title': 'Web layout markup tutorial', 'summary': 'Discusses the markup for different sections of a web layout, including the header, showcase, images, boxes, and footer, emphasizing the use of html5 and css for structuring and styling.', 'duration': 96.223, 'highlights': ['The chapter covers the markup for the header, showcase, section A, section B (images), section C, section D (boxes), and footer of a web layout. The tutorial outlines the different sections of a web layout, including the header, showcase, images, boxes, and footer.', 'The use of HTML5 and CSS for structuring and styling the web layout is emphasized, with specific instructions provided for adding elements such as header tags and divs with classes. The tutorial emphasizes the use of HTML5 and CSS for structuring and styling the web layout, providing specific instructions for adding elements like header tags and divs with classes.', 'The importance of using tools like Emmet for efficient coding in editors like VSCode, Sublime Text, or Atom is highlighted. The tutorial recommends using tools like Emmet for efficient coding, especially in editors like VSCode, Sublime Text, or Atom.']}, {'end': 769.283, 'start': 380.433, 'title': 'Web development layout and styling', 'summary': 'Covers the layout and styling of a web development project, including the use of classes and ids for section organization, adding images and content, and the implementation of a grid system.', 'duration': 388.85, 'highlights': ['The chapter covers the layout and styling of a web development project It includes instructions on structuring the layout and styling for a web development project.', 'Use of classes and IDs for section organization The speaker explains the rationale behind using classes and IDs for section organization, highlighting the flexibility it offers for future content reorganization.', 'Adding images and content Instructions are provided for adding images and content, including the use of Lorem Ipsum for dummy text.', "Implementation of a grid system The chapter demonstrates the implementation of a grid system, including the use of classes like 'content-wrap' and 'grid' for layout structuring."]}], 'duration': 485.073, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M3qBpPw77qo/pics/M3qBpPw77qo284210.jpg', 'highlights': ['The tutorial outlines the different sections of a web layout, including the header, showcase, images, boxes, and footer.', 'The chapter covers the markup for the header, showcase, section A, section B (images), section C, section D (boxes), and footer of a web layout.', 'The tutorial emphasizes the use of HTML5 and CSS for structuring and styling the web layout, providing specific instructions for adding elements like header tags and divs with classes.', 'The chapter covers the layout and styling of a web development project It includes instructions on structuring the layout and styling for a web development project.', "The chapter demonstrates the implementation of a grid system, including the use of classes like 'content-wrap' and 'grid' for layout structuring.", 'The importance of using tools like Emmet for efficient coding in editors like VSCode, Sublime Text, or Atom is highlighted.']}, {'end': 1056.774, 'segs': [{'end': 862.64, 'src': 'embed', 'start': 769.283, 'weight': 0, 'content': [{'end': 776.746, 'text': "so I'm going to go back to Pexels, close that up and I'm going to search for.", 'start': 769.283, 'duration': 7.463}, {'end': 778.266, 'text': 'I think I searched for mobile.', 'start': 776.746, 'duration': 1.52}, {'end': 780.167, 'text': 'Yeah, this one right here.', 'start': 779.147, 'duration': 1.02}, {'end': 783.634, 'text': 'Click free download and grab the link.', 'start': 781.67, 'duration': 1.964}, {'end': 785.277, 'text': 'Put that in here.', 'start': 784.295, 'duration': 0.982}, {'end': 791.829, 'text': "And Yeah, and then we're going to change this to mobile.", 'start': 787.621, 'duration': 4.208}, {'end': 800.533, 'text': 'What was it? Was it mobile applications? Yeah, mobile applications.', 'start': 796.092, 'duration': 4.441}, {'end': 804.295, 'text': "And then for the last image, let's close that.", 'start': 801.234, 'duration': 3.061}, {'end': 805.455, 'text': "We'll go back to pixels.", 'start': 804.355, 'duration': 1.1}, {'end': 809.276, 'text': "We'll search for, what was it? Marketing, I think.", 'start': 805.515, 'duration': 3.761}, {'end': 812.137, 'text': "Yeah, we're going to grab this image here.", 'start': 810.577, 'duration': 1.56}, {'end': 814.218, 'text': 'And you guys can use whatever images you want.', 'start': 812.177, 'duration': 2.041}, {'end': 816.639, 'text': "So we'll grab the link.", 'start': 815.618, 'duration': 1.021}, {'end': 823.881, 'text': "That And then we'll change the title here to Tech Marketing.", 'start': 819.159, 'duration': 4.722}, {'end': 832.516, 'text': 'All right, so now if we look at our project, we have all of these images with the text underneath.', 'start': 825.171, 'duration': 7.345}, {'end': 836.8, 'text': 'Mobile applications and tech marketing.', 'start': 833.437, 'duration': 3.363}, {'end': 839.301, 'text': "All right, so that's section B.", 'start': 836.82, 'duration': 2.481}, {'end': 842.844, 'text': "Now we're going to move to section C.", 'start': 839.301, 'duration': 3.543}, {'end': 845.326, 'text': 'So you can see the markup is actually pretty simple.', 'start': 842.844, 'duration': 2.482}, {'end': 855.298, 'text': "So section C, we're going to have a section tag with an ID of section dash C and a class of grid.", 'start': 848.095, 'duration': 7.203}, {'end': 858.419, 'text': 'All right.', 'start': 858.078, 'duration': 0.341}, {'end': 859.399, 'text': "And let's see.", 'start': 858.739, 'duration': 0.66}, {'end': 860.959, 'text': 'In here, this is going to be pretty simple.', 'start': 859.439, 'duration': 1.52}, {'end': 862.64, 'text': "We're just going to have a content wrap.", 'start': 860.999, 'duration': 1.641}], 'summary': 'Adding images for mobile applications and tech marketing. simple markup for section c.', 'duration': 93.357, 'max_score': 769.283, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M3qBpPw77qo/pics/M3qBpPw77qo769283.jpg'}, {'end': 1056.774, 'src': 'embed', 'start': 1013.875, 'weight': 2, 'content': [{'end': 1017.697, 'text': "And the first one, I'm just going to say Acme Web Solutions.", 'start': 1013.875, 'duration': 3.822}, {'end': 1025.981, 'text': "And the second one, I'm going to say Project by Traverse Media.", 'start': 1019.258, 'duration': 6.723}, {'end': 1028.602, 'text': "And then I'm just going to wrap my link around that.", 'start': 1026.32, 'duration': 2.282}, {'end': 1033.023, 'text': 'HTTP Whoops.', 'start': 1030.183, 'duration': 2.84}, {'end': 1040.785, 'text': 'HTTP travestymedia.com.', 'start': 1033.424, 'duration': 7.361}, {'end': 1053.732, 'text': "check it out if you have a chance, shameless plug, and we'll also add a target to that, a tag, so that it goes off the page.", 'start': 1040.785, 'duration': 12.947}, {'end': 1056.774, 'text': 'so it opens a new tab and save all right.', 'start': 1053.732, 'duration': 3.042}], 'summary': 'Mentioned two projects, acme web solutions and project by traverse media, and shared a link to travestymedia.com for a shameless plug.', 'duration': 42.899, 'max_score': 1013.875, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M3qBpPw77qo/pics/M3qBpPw77qo1013875.jpg'}], 'start': 769.283, 'title': 'Updating project and creating website sections', 'summary': 'Details updating a project with images and titles, searching for specific images, changing titles, and customizing the project. it also covers creating website sections using markup, including section c with an id and class, section d with two boxes for contact and company information, and the addition of a footer with specific divs and a hyperlink.', 'chapters': [{'end': 836.8, 'start': 769.283, 'title': 'Updating project with images and titles', 'summary': 'Details the process of updating a project with images and titles, including searching for specific images, changing titles, and customizing the project with mobile applications and tech marketing.', 'duration': 67.517, 'highlights': ['The process of updating a project with images and titles, including searching for specific images and changing titles.', 'Customizing the project with mobile applications and tech marketing.', 'Use of Pexels for finding images for the project.']}, {'end': 1056.774, 'start': 836.82, 'title': 'Creating website sections with markup', 'summary': 'Covers the creation of website sections using markup, including section c with an id and class, section d with two boxes for contact and company information, and the addition of a footer with specific divs and a hyperlink, demonstrating the use of markup for website design.', 'duration': 219.954, 'highlights': ['The chapter presents the creation of website sections using markup, including section C with an ID of section dash C and a class of grid, and section D with an ID of section D and a class of grid.', 'Within section C, an H2 with a content dash title and a corresponding paragraph are included, while section D contains two boxes with specific content, demonstrating the use of markup for website design.', "The addition of a footer with specific divs, including 'Acme Web Solutions' and 'Project by Traverse Media,' along with a hyperlink to travestymedia.com, showcases the practical application of markup for website design.", 'The chapter also highlights the use of specific tags and classes for structuring website sections, such as div, h2, and paragraph, emphasizing the importance of structured markup in web development.']}], 'duration': 287.491, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M3qBpPw77qo/pics/M3qBpPw77qo769283.jpg', 'highlights': ['The process of updating a project with images and titles, including searching for specific images and changing titles.', 'The chapter presents the creation of website sections using markup, including section C with an ID of section dash C and a class of grid, and section D with an ID of section D and a class of grid.', "The addition of a footer with specific divs, including 'Acme Web Solutions' and 'Project by Traverse Media,' along with a hyperlink to travestymedia.com, showcases the practical application of markup for website design.", 'The chapter also highlights the use of specific tags and classes for structuring website sections, such as div, h2, and paragraph, emphasizing the importance of structured markup in web development.', 'Use of Pexels for finding images for the project.', 'Customizing the project with mobile applications and tech marketing.']}, {'end': 1614.381, 'segs': [{'end': 1174.009, 'src': 'embed', 'start': 1094.528, 'weight': 0, 'content': [{'end': 1099.292, 'text': 'So the body is going to have zero margin.', 'start': 1094.528, 'duration': 4.764}, {'end': 1105.416, 'text': "Let's give it a font family of Arial Helvetica Sans Serif.", 'start': 1100.532, 'duration': 4.884}, {'end': 1109.439, 'text': "Let's give it a background color of dark gray.", 'start': 1106.136, 'duration': 3.303}, {'end': 1117.218, 'text': "Let's give it a color of white.", 'start': 1113.817, 'duration': 3.401}, {'end': 1127.541, 'text': "What else? Font size, I'm going to say 1.1M.", 'start': 1119.079, 'duration': 8.462}, {'end': 1130.182, 'text': "Let's save that, see what it looks like.", 'start': 1128.421, 'duration': 1.761}, {'end': 1132.103, 'text': "Okay, that's fine so far.", 'start': 1130.202, 'duration': 1.901}, {'end': 1137.164, 'text': "Line height, let's do 1.5.", 'start': 1132.683, 'duration': 4.481}, {'end': 1139.845, 'text': 'And then I want to align everything to the center.', 'start': 1137.164, 'duration': 2.681}, {'end': 1143.506, 'text': 'Okay, save that, good.', 'start': 1139.865, 'duration': 3.641}, {'end': 1148.182, 'text': 'So that is the body.', 'start': 1146.92, 'duration': 1.262}, {'end': 1149.363, 'text': 'I can get rid of this.', 'start': 1148.542, 'duration': 0.821}, {'end': 1154.129, 'text': "I'll just try to keep what I'm focusing on up above myself.", 'start': 1150.064, 'duration': 4.065}, {'end': 1159.682, 'text': "So in addition to that, we're going to have some core styles for the image.", 'start': 1155.68, 'duration': 4.002}, {'end': 1163.724, 'text': 'So basically, any image is going to have a display of block.', 'start': 1160.523, 'duration': 3.201}, {'end': 1169.667, 'text': 'We also want to make the width 100% of its container.', 'start': 1165.525, 'duration': 4.142}, {'end': 1174.009, 'text': "That's going to shrink down these huge images right here once I save.", 'start': 1170.308, 'duration': 3.701}], 'summary': 'Styling the body with zero margin, dark gray background, 1.1m font size, 1.5 line height, and center alignment. images will have display block and 100% width.', 'duration': 79.481, 'max_score': 1094.528, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M3qBpPw77qo/pics/M3qBpPw77qo1094528.jpg'}, {'end': 1276.537, 'src': 'embed', 'start': 1212.455, 'weight': 2, 'content': [{'end': 1214.997, 'text': 'All right, and then we also have for paragraphs.', 'start': 1212.455, 'duration': 2.542}, {'end': 1228.449, 'text': "So paragraphs, I'm actually going to zero out the margin and set padding to one M on the top and bottom and zero on the left and right.", 'start': 1217.439, 'duration': 11.01}, {'end': 1230.831, 'text': "All right, so we'll save that.", 'start': 1228.469, 'duration': 2.362}, {'end': 1232.012, 'text': 'Not much difference there.', 'start': 1230.891, 'duration': 1.121}, {'end': 1235.815, 'text': "And that's pretty much it for as far as the core styles.", 'start': 1232.032, 'duration': 3.783}, {'end': 1237.317, 'text': 'I guess we could do the button.', 'start': 1236.196, 'duration': 1.121}, {'end': 1242.58, 'text': "because that's going to be outside of any other elements as well.", 'start': 1238.899, 'duration': 3.681}, {'end': 1244.58, 'text': "So let's do .btn.", 'start': 1242.66, 'duration': 1.92}, {'end': 1248.481, 'text': 'All right, so we want to display..', 'start': 1244.68, 'duration': 3.801}, {'end': 1255.002, 'text': "Actually, let's add a background of 333.", 'start': 1248.481, 'duration': 6.521}, {'end': 1256.962, 'text': "Let's make the color white.", 'start': 1255.002, 'duration': 1.96}, {'end': 1263.224, 'text': "Let's take away the underline, so text decoration, none.", 'start': 1258.363, 'duration': 4.861}, {'end': 1276.537, 'text': "Let's.. set the padding to, let's do 1M on the top and bottom, 2M on the left and right.", 'start': 1264.364, 'duration': 12.173}], 'summary': 'Styling adjustments made for paragraphs and buttons.', 'duration': 64.082, 'max_score': 1212.455, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M3qBpPw77qo/pics/M3qBpPw77qo1212455.jpg'}, {'end': 1455.435, 'src': 'embed', 'start': 1425.107, 'weight': 4, 'content': [{'end': 1428.408, 'text': 'It has a minimum height of 450 pixels.', 'start': 1425.107, 'duration': 3.301}, {'end': 1431.169, 'text': 'So now we want to deal with the background image.', 'start': 1429.048, 'duration': 2.121}, {'end': 1437.071, 'text': "So we're going to say showcase, and then we have a class of bg-image.", 'start': 1431.99, 'duration': 5.081}, {'end': 1441.213, 'text': 'Okay, remember that? So you need to make sure that this is positioned absolute.', 'start': 1437.091, 'duration': 4.122}, {'end': 1447.366, 'text': "because it's going to go over the showcase div.", 'start': 1443.161, 'duration': 4.205}, {'end': 1449.588, 'text': 'And we want to add the background.', 'start': 1448.147, 'duration': 1.441}, {'end': 1451.39, 'text': "So we're going to say background.", 'start': 1449.608, 'duration': 1.782}, {'end': 1455.435, 'text': "First we'll put the color of 333 and then the URL.", 'start': 1451.67, 'duration': 3.765}], 'summary': 'The background image should be positioned absolute and have a minimum height of 450 pixels, with a color of 333 and a specified url.', 'duration': 30.328, 'max_score': 1425.107, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M3qBpPw77qo/pics/M3qBpPw77qo1425107.jpg'}, {'end': 1563.736, 'src': 'embed', 'start': 1479.866, 'weight': 5, 'content': [{'end': 1488.128, 'text': "So let's say background position is going to be center.", 'start': 1479.866, 'duration': 8.262}, {'end': 1495.11, 'text': 'Okay, background repeat is gonna be no repeat.', 'start': 1488.148, 'duration': 6.962}, {'end': 1498.665, 'text': 'background size.', 'start': 1496.721, 'duration': 1.944}, {'end': 1505.437, 'text': 'What it took me shorter to type it will be cover.', 'start': 1502.451, 'duration': 2.986}, {'end': 1507.721, 'text': "So let's save that.", 'start': 1506.639, 'duration': 1.082}, {'end': 1513.694, 'text': "And we're not going to see anything yet because we haven't added the size, the dimensions.", 'start': 1509.352, 'duration': 4.342}, {'end': 1519.076, 'text': 'So we want a width of 100% of its container.', 'start': 1513.814, 'duration': 5.262}, {'end': 1523.597, 'text': 'And then for the height, we want to make sure that the height is the same as its parent.', 'start': 1519.196, 'duration': 4.401}, {'end': 1527.339, 'text': 'So the height should be the same as the showcase, which is 450.', 'start': 1523.697, 'duration': 3.642}, {'end': 1530.28, 'text': "Because what we're doing is, again, we're placing it on top of it.", 'start': 1527.339, 'duration': 2.941}, {'end': 1539.529, 'text': "okay. so if we save and you can see that now it's been placed on top of it, literally we can't even see the text anymore.", 'start': 1531.058, 'duration': 8.471}, {'end': 1544.476, 'text': 'so to fix that issue with the text is by using z index.', 'start': 1539.529, 'duration': 4.947}, {'end': 1552.405, 'text': 'and for those of you that are kind of new to css, z index is where The higher it is, the closer to you it is.', 'start': 1544.476, 'duration': 7.929}, {'end': 1559.993, 'text': 'So right now the z-index for the image is higher than the text, which is the heading and the button and all that.', 'start': 1553.086, 'duration': 6.907}, {'end': 1563.736, 'text': 'So what we want to do is set the z-index to a negative number.', 'start': 1560.433, 'duration': 3.303}], 'summary': 'Setting background position, size, and z-index for image display.', 'duration': 83.87, 'max_score': 1479.866, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M3qBpPw77qo/pics/M3qBpPw77qo1479866.jpg'}, {'end': 1617.162, 'src': 'embed', 'start': 1588.109, 'weight': 10, 'content': [{'end': 1591.791, 'text': 'Especially if you were to use a different image that could make it even worse.', 'start': 1588.109, 'duration': 3.682}, {'end': 1599.475, 'text': "So what we're going to do is set the opacity of the BG image class to 0.4 and save.", 'start': 1591.891, 'duration': 7.584}, {'end': 1601.276, 'text': "And now you can see that it's faded out.", 'start': 1599.635, 'duration': 1.641}, {'end': 1604.957, 'text': "okay. so that's that's one way to do this.", 'start': 1602.236, 'duration': 2.721}, {'end': 1609.739, 'text': 'and if you want to even more faded out, you can do like 0.2.', 'start': 1604.957, 'duration': 4.782}, {'end': 1613.701, 'text': 'if you wanted it more more prominent, you could do like 0.7.', 'start': 1609.739, 'duration': 3.962}, {'end': 1614.381, 'text': "it's all up to you.", 'start': 1613.701, 'duration': 0.68}, {'end': 1617.162, 'text': 'I think 4 looks good, alright.', 'start': 1614.381, 'duration': 2.781}], 'summary': 'Adjusting the opacity of the background image to 0.4 creates a faded effect, with options to go as low as 0.2 or as high as 0.7.', 'duration': 29.053, 'max_score': 1588.109, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M3qBpPw77qo/pics/M3qBpPw77qo1588109.jpg'}], 'start': 1056.774, 'title': 'Css styling techniques', 'summary': 'Covers adding core styles to body, images, headings, paragraphs, and buttons using css, resulting in improved visual presentation and user experience, along with styling header showcase and achieving background image effects.', 'chapters': [{'end': 1370.163, 'start': 1056.774, 'title': 'Css styling and core styles', 'summary': 'Covers the process of adding core styles to the body, images, headings, paragraphs, and buttons using css, including specific properties and their values, resulting in improved visual presentation and user experience.', 'duration': 313.389, 'highlights': ['Added core styles for body including zero margin, font family, background color, color, font size, line height, and text alignment, resulting in a visually improved website layout. zero margin, font family, background color, color, font size, line height', 'Applied core styles for images to set display to block, width to 100% of the container, and height to auto, leading to the proper display and sizing of images on the website. display set to block, width set to 100% of the container, height set to auto', 'Implemented core styles for headings and paragraphs by zeroing out the margin, setting padding, resulting in a consistent and visually appealing display of headings and paragraphs. zeroed out margin, set padding', 'Defined core styles for buttons including display, background, color, padding, border, and margin, leading to a visually enhanced and user-friendly button design. display, background, color, padding, border, margin']}, {'end': 1479.726, 'start': 1370.984, 'title': 'Styling showcase and header', 'summary': 'Outlines the process of styling the header showcase, including setting the minimum height to 450 pixels, adjusting text color to white, aligning text to center, and adding a background image with specific properties.', 'duration': 108.742, 'highlights': ['The minimum height of the showcase is set to 450 pixels.', 'The text color is specified as white for the showcase.', 'The background image is added to the showcase with specific properties.', 'The text is aligned to the center for the showcase.']}, {'end': 1614.381, 'start': 1479.866, 'title': 'Css background positioning and opacity', 'summary': 'Demonstrates setting background position, size, and opacity using css, adjusting z-index for layering, and achieving an effect of fading out the background image with specific opacity values.', 'duration': 134.515, 'highlights': ['The z-index property is used to control the stacking order of elements, with higher values bringing elements closer, demonstrated by setting a negative z-index to place the background image behind the text, resolving visibility issues.', 'Adjusting the opacity of the background image allows for controlling its prominence, shown by setting the opacity to 0.4 to fade out the image and providing flexibility for different opacity values to suit the design requirements.', 'Setting the background position to center, repeat to no repeat, and size to cover provides specific styling for the background image, ensuring it fits and displays as intended within its container.']}], 'duration': 557.607, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M3qBpPw77qo/pics/M3qBpPw77qo1056774.jpg', 'highlights': ['Added core styles for body including zero margin, font family, background color, color, font size, line height, and text alignment, resulting in a visually improved website layout.', 'Applied core styles for images to set display to block, width to 100% of the container, and height to auto, leading to the proper display and sizing of images on the website.', 'Defined core styles for buttons including display, background, color, padding, border, and margin, leading to a visually enhanced and user-friendly button design.', 'Implemented core styles for headings and paragraphs by zeroing out the margin, setting padding, resulting in a consistent and visually appealing display of headings and paragraphs.', 'The background image is added to the showcase with specific properties.', 'The z-index property is used to control the stacking order of elements, with higher values bringing elements closer, demonstrated by setting a negative z-index to place the background image behind the text, resolving visibility issues.', 'Setting the background position to center, repeat to no repeat, and size to cover provides specific styling for the background image, ensuring it fits and displays as intended within its container.', 'The text color is specified as white for the showcase.', 'The minimum height of the showcase is set to 450 pixels.', 'The text is aligned to the center for the showcase.', 'Adjusting the opacity of the background image allows for controlling its prominence, shown by setting the opacity to 0.4 to fade out the image and providing flexibility for different opacity values to suit the design requirements.']}, {'end': 2233.103, 'segs': [{'end': 1651.618, 'src': 'embed', 'start': 1614.381, 'weight': 3, 'content': [{'end': 1617.162, 'text': 'I think 4 looks good, alright.', 'start': 1614.381, 'duration': 2.781}, {'end': 1619.623, 'text': 'so now we want to move this stuff down a little.', 'start': 1617.162, 'duration': 2.461}, {'end': 1620.744, 'text': 'I want to fix this heading.', 'start': 1619.623, 'duration': 1.121}, {'end': 1628.722, 'text': "so I'm going to say showcase h1 all right.", 'start': 1620.744, 'duration': 7.978}, {'end': 1634.566, 'text': "so showcase h1, let's add padding to the top.", 'start': 1628.722, 'duration': 5.844}, {'end': 1639.95, 'text': "i'm just going to do a fixed 100 pixels and then padding bottom i want to remove.", 'start': 1634.566, 'duration': 5.384}, {'end': 1645.854, 'text': 'okay. so there we go now.', 'start': 1639.95, 'duration': 5.904}, {'end': 1651.618, 'text': 'when this is really short or short, really thin or small, whatever,', 'start': 1645.854, 'duration': 5.764}], 'summary': 'Adjusting showcase h1 with 100px padding for better display.', 'duration': 37.237, 'max_score': 1614.381, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M3qBpPw77qo/pics/M3qBpPw77qo1614381.jpg'}, {'end': 1702.818, 'src': 'embed', 'start': 1672.53, 'weight': 1, 'content': [{'end': 1680.877, 'text': "so let's say showcase, showcase dot content-wrap.", 'start': 1672.53, 'duration': 8.347}, {'end': 1689.626, 'text': "And we're going to just set padding 0 top and bottom, 1.5m on the sides.", 'start': 1681.918, 'duration': 7.708}, {'end': 1697.117, 'text': "And that didn't work, did it? All right, guys, so I got confused for a minute.", 'start': 1692.67, 'duration': 4.447}, {'end': 1702.818, 'text': "This isn't working because I didn't add the content wrap on the showcase, which I should have because we're going to need it.", 'start': 1697.157, 'duration': 5.661}], 'summary': 'Setting padding to 0 top and bottom and 1.5m on the sides for showcase dot content-wrap.', 'duration': 30.288, 'max_score': 1672.53, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M3qBpPw77qo/pics/M3qBpPw77qo1672530.jpg'}, {'end': 1747.5, 'src': 'heatmap', 'start': 1710.88, 'weight': 0.763, 'content': [{'end': 1715.181, 'text': 'We want div class content dash wrap.', 'start': 1710.88, 'duration': 4.301}, {'end': 1718.281, 'text': "And we don't want to end it right there.", 'start': 1716.821, 'duration': 1.46}, {'end': 1721.842, 'text': "We're going to end it down here right before the header.", 'start': 1718.301, 'duration': 3.541}, {'end': 1725.452, 'text': "All right, and then we'll just tab that over.", 'start': 1723.911, 'duration': 1.541}, {'end': 1726.852, 'text': 'All right, save that.', 'start': 1725.472, 'duration': 1.38}, {'end': 1731.254, 'text': "Now you can see that padding has been applied, and we're going to need that later on as well.", 'start': 1726.912, 'duration': 4.342}, {'end': 1735.816, 'text': "All right, so that's it for the header.", 'start': 1732.454, 'duration': 3.362}, {'end': 1736.356, 'text': "That's done.", 'start': 1735.856, 'duration': 0.5}, {'end': 1741.898, 'text': "Now we're going to move to Section A, which is this part right here.", 'start': 1736.796, 'duration': 5.102}, {'end': 1747.5, 'text': "So let's go down in our CSS and say Section A.", 'start': 1742.338, 'duration': 5.162}], 'summary': 'Adjust css for padding in div class; move to section a.', 'duration': 36.62, 'max_score': 1710.88, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M3qBpPw77qo/pics/M3qBpPw77qo1710880.jpg'}, {'end': 1916.638, 'src': 'embed', 'start': 1885.859, 'weight': 0, 'content': [{'end': 1891.664, 'text': 'now we want to do a couple things to the list items themselves.', 'start': 1885.859, 'duration': 5.805}, {'end': 1897.709, 'text': "so section dash B, Li, and for this we're going.", 'start': 1891.664, 'duration': 6.045}, {'end': 1904.654, 'text': "we're going to add a margin bottom of 1m.", 'start': 1897.709, 'duration': 6.945}, {'end': 1910.315, 'text': "let's add the background to be white.", 'start': 1904.654, 'duration': 5.661}, {'end': 1914.937, 'text': "let's make the color triple three, save.", 'start': 1910.315, 'duration': 4.622}, {'end': 1916.638, 'text': 'there we go.', 'start': 1914.937, 'duration': 1.701}], 'summary': 'Styling list items with margin, background, and color.', 'duration': 30.779, 'max_score': 1885.859, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M3qBpPw77qo/pics/M3qBpPw77qo1885859.jpg'}, {'end': 2162.977, 'src': 'heatmap', 'start': 2122.682, 'weight': 2, 'content': [{'end': 2125.444, 'text': 'So text decoration is going to be none.', 'start': 2122.682, 'duration': 2.762}, {'end': 2128.085, 'text': "And that's it.", 'start': 2127.465, 'duration': 0.62}, {'end': 2130.106, 'text': 'Save There we go.', 'start': 2128.325, 'duration': 1.781}, {'end': 2135.415, 'text': "So that's it, that's our mobile version of our site.", 'start': 2132.087, 'duration': 3.328}, {'end': 2145.207, 'text': "Now if I were to, let's close these up, if I were to make this bigger, That's not what we want.", 'start': 2135.455, 'duration': 9.752}, {'end': 2147.208, 'text': "We don't want that for this size.", 'start': 2145.347, 'duration': 1.861}, {'end': 2149.269, 'text': "It's great for mobile.", 'start': 2147.768, 'duration': 1.501}, {'end': 2151.89, 'text': "That's why this is a mobile first approach.", 'start': 2149.849, 'duration': 2.041}, {'end': 2159.655, 'text': 'So now we need to deal with the grid and making this look good on bigger screens.', 'start': 2153.191, 'duration': 6.464}, {'end': 2162.977, 'text': "So what we're going to need to do is add a media query.", 'start': 2160.375, 'duration': 2.602}], 'summary': 'Implement mobile-first approach and add media query for larger screens.', 'duration': 27.522, 'max_score': 2122.682, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M3qBpPw77qo/pics/M3qBpPw77qo2122682.jpg'}], 'start': 1614.381, 'title': 'Website styling', 'summary': 'Covers fixing showcase heading padding, centering content with 1.5m padding, adding css styles to website sections, including padding, background colors, and media query for larger screens.', 'chapters': [{'end': 1702.818, 'start': 1614.381, 'title': 'Fixing showcase heading and padding', 'summary': 'Discusses fixing the showcase heading by adding padding and removing bottom padding, also using the content wrap class to center everything with 1.5m padding on the sides.', 'duration': 88.437, 'highlights': ['Using the content wrap class to Center everything and add 1.5m padding on the sides for the showcase.', 'Fixing the showcase heading by adding padding to the top and removing padding from the bottom.']}, {'end': 2233.103, 'start': 1703.379, 'title': 'Css styling for website sections', 'summary': 'Covers the detailed process of adding css styles to different sections of a website, including applying padding, background colors, and removing bullet points and margins for lists, with a focus on mobile-first approach and a media query for larger screens.', 'duration': 529.724, 'highlights': ['Adding CSS styles to different sections of a website, including padding, background colors, and removing bullet points and margins for lists. ', 'Emphasizing a mobile-first approach by ensuring the styles are suitable for mobile devices before implementing a media query for larger screens. ']}], 'duration': 618.722, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M3qBpPw77qo/pics/M3qBpPw77qo1614381.jpg', 'highlights': ['Adding CSS styles to different sections of a website, including padding, background colors, and removing bullet points and margins for lists.', 'Using the content wrap class to Center everything and add 1.5m padding on the sides for the showcase.', 'Emphasizing a mobile-first approach by ensuring the styles are suitable for mobile devices before implementing a media query for larger screens.', 'Fixing the showcase heading by adding padding to the top and removing padding from the bottom.']}, {'end': 2473.715, 'segs': [{'end': 2346.126, 'src': 'embed', 'start': 2289.002, 'weight': 0, 'content': [{'end': 2293.064, 'text': "They'll take the space as a whole and divide them into fractions.", 'start': 2289.002, 'duration': 4.062}, {'end': 2301.728, 'text': 'So if we say 1fr, 1fr, 1fr, 1fr, that will give us four fractionals.', 'start': 2293.504, 'duration': 8.224}, {'end': 2303.909, 'text': "So it'll be basically a four column grid.", 'start': 2301.788, 'duration': 2.121}, {'end': 2307.19, 'text': "So if I save that, it's going to look like this.", 'start': 2304.349, 'duration': 2.841}, {'end': 2318.013, 'text': "And what it's done is it's taken everything that we applied grid to and it put everything into the first column.", 'start': 2307.69, 'duration': 10.323}, {'end': 2327.556, 'text': 'So if I open up my element selector here and I hover over the header, you can see that there are four columns or four fractionals.', 'start': 2318.073, 'duration': 9.483}, {'end': 2333.359, 'text': 'OK, so what we want to do is take the content wrap.', 'start': 2328.496, 'duration': 4.863}, {'end': 2336.46, 'text': 'See how we have a class of content wrap in all of these?', 'start': 2333.419, 'duration': 3.041}, {'end': 2342.964, 'text': 'We want to basically take that content wrap and we want to say we want to span it from two to four.', 'start': 2337.401, 'duration': 5.563}, {'end': 2346.126, 'text': 'So I wish this would stay when I go up here.', 'start': 2343.104, 'duration': 3.022}], 'summary': 'Dividing the space into four fractionals creates a four-column grid.', 'duration': 57.124, 'max_score': 2289.002, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M3qBpPw77qo/pics/M3qBpPw77qo2289002.jpg'}, {'end': 2473.715, 'src': 'embed', 'start': 2411.259, 'weight': 3, 'content': [{'end': 2413.46, 'text': 'But I want the two middle.', 'start': 2411.259, 'duration': 2.201}, {'end': 2416.202, 'text': 'This is kind of hard to explain, guys.', 'start': 2414.801, 'duration': 1.401}, {'end': 2424.948, 'text': "the two middle columns, I want those to be wider than the ones on the side, okay? Because we don't want it this, you know, we want it wider.", 'start': 2416.707, 'duration': 8.241}, {'end': 2426.229, 'text': 'We want it to come out here.', 'start': 2424.988, 'duration': 1.241}, {'end': 2440.151, 'text': "So to do that, instead of doing just four of these 1FRs, we're going to replace the middle two with a repeat, okay?", 'start': 2426.909, 'duration': 13.242}, {'end': 2451.971, 'text': "So basically, repeat will just like if we say repeat 1FR twice, save, save, that'll do.", 'start': 2440.191, 'duration': 11.78}, {'end': 2453.631, 'text': 'Actually, hold on, was that right? No.', 'start': 2451.971, 'duration': 1.66}, {'end': 2456.332, 'text': 'That just went back to normal.', 'start': 2455.132, 'duration': 1.2}, {'end': 2464.553, 'text': "If we say repeat two, one fr, and save, it's the same thing.", 'start': 2457.212, 'duration': 7.341}, {'end': 2467.194, 'text': "It's just like saying one fr four times.", 'start': 2464.593, 'duration': 2.601}, {'end': 2473.715, 'text': "But what we're gonna do is instead of just doing one fr right here, we're gonna put in a function called minmax.", 'start': 2467.594, 'duration': 6.121}], 'summary': "Adjusting column widths using 'repeat' and 'minmax' function for better layout.", 'duration': 62.456, 'max_score': 2411.259, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M3qBpPw77qo/pics/M3qBpPw77qo2411259.jpg'}], 'start': 2233.103, 'title': 'Grid layout', 'summary': 'Explains applying the grid class, setting display as grid, creating a four-column grid layout with fractions, spanning content wrap from two to four columns, adjusting column width, and using the minmax function for grid layout.', 'chapters': [{'end': 2318.013, 'start': 2233.103, 'title': 'Applying grid class', 'summary': 'Discusses applying the grid class to elements, setting the display as grid, and using the grid template column property to create a four-column grid layout with fractions.', 'duration': 84.91, 'highlights': ['Explaining the usage of grid template column property to create a four-column grid layout with fractions, such as 1fr, 1fr, 1fr, 1fr, and its visual representation.', 'Describing the concept of using fractions to divide the space and create a four-column grid layout, providing an example of 1fr, 1fr, 1fr, 1fr as an illustration.']}, {'end': 2473.715, 'start': 2318.073, 'title': 'Grid column span and width adjustment', 'summary': 'Explains how to span the content wrap from two to four columns, adjust the width of the middle two columns, and use the minmax function for grid layout.', 'duration': 155.642, 'highlights': ['Spanning content wrap from two to four columns The chapter explains how to use the grid-column property to span the content wrap class from two to four columns, adjusting the layout.', 'Adjusting the width of middle two columns It discusses the intention to widen the middle two columns compared to the side ones using the repeat function and minmax function for grid layout.', 'Utilizing the minmax function for grid layout The chapter introduces the use of the minmax function for grid layout, illustrating the concept through replacing the middle two columns with a repeat function.']}], 'duration': 240.612, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M3qBpPw77qo/pics/M3qBpPw77qo2233103.jpg', 'highlights': ['Explaining the usage of grid template column property to create a four-column grid layout with fractions, such as 1fr, 1fr, 1fr, 1fr, and its visual representation.', 'Describing the concept of using fractions to divide the space and create a four-column grid layout, providing an example of 1fr, 1fr, 1fr, 1fr as an illustration.', 'Spanning content wrap from two to four columns The chapter explains how to use the grid-column property to span the content wrap class from two to four columns, adjusting the layout.', 'Adjusting the width of middle two columns It discusses the intention to widen the middle two columns compared to the side ones using the repeat function and minmax function for grid layout.', 'Utilizing the minmax function for grid layout The chapter introduces the use of the minmax function for grid layout, illustrating the concept through replacing the middle two columns with a repeat function.']}, {'end': 2947.494, 'segs': [{'end': 2543.457, 'src': 'heatmap', 'start': 2475.394, 'weight': 1, 'content': [{'end': 2479.519, 'text': 'min-max, which it takes in a min and a max.', 'start': 2475.394, 'duration': 4.125}, {'end': 2482.442, 'text': "So we're going to say auto, which is the default.", 'start': 2479.539, 'duration': 2.903}, {'end': 2487.407, 'text': "So basically, if it's smaller than auto, then we want this to be the size 25M.", 'start': 2482.522, 'duration': 4.885}, {'end': 2493.511, 'text': 'OK, so this is going to change the sizing of the middle two.', 'start': 2490.43, 'duration': 3.081}, {'end': 2494.672, 'text': "So let's try this.", 'start': 2493.831, 'duration': 0.841}, {'end': 2495.412, 'text': "Let's save it.", 'start': 2494.712, 'duration': 0.7}, {'end': 2498.093, 'text': 'And now you can see if I hover over header.', 'start': 2495.932, 'duration': 2.161}, {'end': 2503.035, 'text': "Actually, let's make this a little bigger because you'll be able to see it a little better.", 'start': 2499.374, 'duration': 3.661}, {'end': 2512.299, 'text': "Now you can see that the middle two, when the browser is at a certain size, they're going to be 25 M wide.", 'start': 2503.635, 'duration': 8.664}, {'end': 2512.779, 'text': 'All right.', 'start': 2512.439, 'duration': 0.34}, {'end': 2516.061, 'text': 'So both of these two columns in the middle together equal 50 M.', 'start': 2512.859, 'duration': 3.202}, {'end': 2526.71, 'text': 'all right, and then you can see the sides are much smaller and this, the smaller that this gets, the smaller the side columns get.', 'start': 2518.126, 'duration': 8.584}, {'end': 2534.573, 'text': "see how small they are now until you get to a certain point where they're basically just not well.", 'start': 2526.71, 'duration': 7.863}, {'end': 2543.457, 'text': "basically, the grid isn't working anymore because we set the grid to only be in effect when it's at 700 pixels or less okay, or less than 700 pixels.", 'start': 2534.573, 'duration': 8.884}], 'summary': 'Adjusts column sizes based on browser width, with middle columns set to 25m and total middle column width at 50m.', 'duration': 68.063, 'max_score': 2475.394, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M3qBpPw77qo/pics/M3qBpPw77qo2475394.jpg'}, {'end': 2543.457, 'src': 'embed', 'start': 2499.374, 'weight': 0, 'content': [{'end': 2503.035, 'text': "Actually, let's make this a little bigger because you'll be able to see it a little better.", 'start': 2499.374, 'duration': 3.661}, {'end': 2512.299, 'text': "Now you can see that the middle two, when the browser is at a certain size, they're going to be 25 M wide.", 'start': 2503.635, 'duration': 8.664}, {'end': 2512.779, 'text': 'All right.', 'start': 2512.439, 'duration': 0.34}, {'end': 2516.061, 'text': 'So both of these two columns in the middle together equal 50 M.', 'start': 2512.859, 'duration': 3.202}, {'end': 2526.71, 'text': 'all right, and then you can see the sides are much smaller and this, the smaller that this gets, the smaller the side columns get.', 'start': 2518.126, 'duration': 8.584}, {'end': 2534.573, 'text': "see how small they are now until you get to a certain point where they're basically just not well.", 'start': 2526.71, 'duration': 7.863}, {'end': 2543.457, 'text': "basically, the grid isn't working anymore because we set the grid to only be in effect when it's at 700 pixels or less okay, or less than 700 pixels.", 'start': 2534.573, 'duration': 8.884}], 'summary': 'When the browser is at a certain size, the middle two columns will be 25 m wide, totaling 50 m. the side columns become smaller as the browser size decreases, eventually not working at 700 pixels or less.', 'duration': 44.083, 'max_score': 2499.374, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M3qBpPw77qo/pics/M3qBpPw77qo2499374.jpg'}, {'end': 2599.507, 'src': 'embed', 'start': 2573.657, 'weight': 5, 'content': [{'end': 2578.882, 'text': "i believe this is Let's see section D.", 'start': 2573.657, 'duration': 5.225}, {'end': 2582.445, 'text': "And you can see, actually I'll make it a little bigger so we can see all the columns.", 'start': 2578.882, 'duration': 3.563}, {'end': 2584.775, 'text': "Alright, so they're taking up one.", 'start': 2583.294, 'duration': 1.481}, {'end': 2586.456, 'text': 'We need these to span two.', 'start': 2584.835, 'duration': 1.621}, {'end': 2589.559, 'text': 'Okay, so contact us should come out to here.', 'start': 2586.757, 'duration': 2.802}, {'end': 2591.32, 'text': 'So it should span two.', 'start': 2590.119, 'duration': 1.201}, {'end': 2594.062, 'text': 'And then about should be from here to here.', 'start': 2591.58, 'duration': 2.482}, {'end': 2597.405, 'text': "Okay, so that's really easy to fix.", 'start': 2594.743, 'duration': 2.662}, {'end': 2599.507, 'text': 'And same thing with the footer.', 'start': 2598.346, 'duration': 1.161}], 'summary': "Adjust section d to span two columns for 'contact us' and 'about'.", 'duration': 25.85, 'max_score': 2573.657, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M3qBpPw77qo/pics/M3qBpPw77qo2573657.jpg'}, {'end': 2705.485, 'src': 'embed', 'start': 2664.849, 'weight': 3, 'content': [{'end': 2665.849, 'text': 'We want that effect.', 'start': 2664.849, 'duration': 1}, {'end': 2675.412, 'text': "So let's go right here and say, actually it's an ID, section A.", 'start': 2666.549, 'duration': 8.863}, {'end': 2678.033, 'text': 'And then we want content dash text.', 'start': 2675.412, 'duration': 2.621}, {'end': 2684.186, 'text': 'And basically for our content text, we want to set it to two columns.', 'start': 2680.442, 'duration': 3.744}, {'end': 2686.708, 'text': 'Columns two.', 'start': 2685.807, 'duration': 0.901}, {'end': 2690.271, 'text': "Save That didn't work.", 'start': 2687.529, 'duration': 2.742}, {'end': 2699.539, 'text': 'You know what? Yeah, I forgot to put in the content text class.', 'start': 2690.832, 'duration': 8.707}, {'end': 2705.485, 'text': 'So in section A, this paragraph right here should be wrapped in a div.', 'start': 2700.08, 'duration': 5.405}], 'summary': 'Setting content to two columns in section a using an id and class.', 'duration': 40.636, 'max_score': 2664.849, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M3qBpPw77qo/pics/M3qBpPw77qo2664849.jpg'}, {'end': 2838.496, 'src': 'embed', 'start': 2806.88, 'weight': 4, 'content': [{'end': 2809.162, 'text': 'Now we want to set the width of the allies.', 'start': 2806.88, 'duration': 2.282}, {'end': 2813.685, 'text': "So we're going to say section dash be ally.", 'start': 2809.182, 'duration': 4.503}, {'end': 2819.569, 'text': "I'm going to set the width of these to 31% and save.", 'start': 2813.705, 'duration': 5.864}, {'end': 2822.571, 'text': 'Okay, and now we just need to justify it.', 'start': 2820.41, 'duration': 2.161}, {'end': 2824.813, 'text': "So we're going to say justify content.", 'start': 2822.671, 'duration': 2.142}, {'end': 2827.174, 'text': 'And we want to use space around.', 'start': 2825.313, 'duration': 1.861}, {'end': 2832.074, 'text': 'Okay So space around.', 'start': 2827.194, 'duration': 4.88}, {'end': 2838.496, 'text': "And if you don't know what this is, I would suggest watching my flex box in 20 minutes.", 'start': 2832.534, 'duration': 5.962}], 'summary': "Setting allies' width to 31% and justifying with space around.", 'duration': 31.616, 'max_score': 2806.88, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M3qBpPw77qo/pics/M3qBpPw77qo2806880.jpg'}], 'start': 2475.394, 'title': 'Responsive grid sizing and layout adjustment', 'summary': 'Demonstrates using the min-max function for responsive grid sizing, achieving a total width of 50m at a specific browser size, and discusses adjusting layout using css grid and flexbox to provide a modern approach to creating layouts, including optimization for mobile view.', 'chapters': [{'end': 2543.457, 'start': 2475.394, 'title': 'Responsive grid sizing', 'summary': 'Demonstrates using the min-max function to set responsive grid sizing, with the middle columns set to 25m width, resulting in a total width of 50m when the browser size is at a certain point, while the side columns shrink as the browser size decreases, with the grid only in effect at 700 pixels or less.', 'duration': 68.063, 'highlights': ['The middle columns are set to 25M width, resulting in a total width of 50M when the browser size is at a certain point.', 'The side columns shrink as the browser size decreases.', 'The grid is set to only be in effect at 700 pixels or less.']}, {'end': 2947.494, 'start': 2544.998, 'title': 'Adjusting layout using css grid and flexbox', 'summary': 'Discusses adjusting the layout using css grid and flexbox, including fixing column spans, setting text columns, aligning elements using flexbox, and optimizing for mobile view, aiming to provide a modern approach to creating layouts.', 'duration': 402.496, 'highlights': ['Fixing column spans and aligning elements The speaker demonstrates fixing the column spans, ensuring the boxes and divs span two columns instead of one, and aligning elements in the footer and section D for a correct layout.', 'Setting text columns and optimizing for mobile view The presenter sets the text content to two columns, adjusts the column gap, and ensures scalable design for the mobile view, providing a visually appealing layout across different devices.', 'Aligning elements using Flexbox and adjusting width The chapter covers aligning elements by setting the UL to a flex item, adjusting the width of the list items, and justifying the content using space around, resulting in a visually balanced and appealing design.']}], 'duration': 472.1, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/M3qBpPw77qo/pics/M3qBpPw77qo2475394.jpg', 'highlights': ['The middle columns are set to 25M width, resulting in a total width of 50M when the browser size is at a certain point.', 'The side columns shrink as the browser size decreases.', 'The grid is set to only be in effect at 700 pixels or less.', 'Setting text columns and optimizing for mobile view The presenter sets the text content to two columns, adjusts the column gap, and ensures scalable design for the mobile view, providing a visually appealing layout across different devices.', 'Aligning elements using Flexbox and adjusting width The chapter covers aligning elements by setting the UL to a flex item, adjusting the width of the list items, and justifying the content using space around, resulting in a visually balanced and appealing design.', 'Fixing column spans and aligning elements The speaker demonstrates fixing the column spans, ensuring the boxes and divs span two columns instead of one, and aligning elements in the footer and section D for a correct layout.']}], 'highlights': ['The tutorial focuses on creating a single page layout website for a fictional company called Acme Web Solutions.', 'Creation of a modern grid layout using fractionals and flexbox for a modern and unique markup.', 'The grid is implemented inside a CSS media query for screen sizes larger than 700 pixels, following a mobile-first approach.', 'Taking a mobile-first approach for creating the layout, ensuring that it is initially designed for mobile devices before applying the grid system.', 'Emphasizes the lack of practical tutorials and resources on creating responsive layout websites using the grid system.', 'The chapter demonstrates the use of a responsive four fractional layout for the grid system.', 'The tutorial outlines the different sections of a web layout, including the header, showcase, images, boxes, and footer.', 'The chapter covers the markup for the header, showcase, section A, section B (images), section C, section D (boxes), and footer of a web layout.', 'The tutorial emphasizes the use of HTML5 and CSS for structuring and styling the web layout, providing specific instructions for adding elements like header tags and divs with classes.', 'The chapter covers the layout and styling of a web development project It includes instructions on structuring the layout and styling for a web development project.', 'The importance of using tools like Emmet for efficient coding in editors like VSCode, Sublime Text, or Atom is highlighted.', 'The process of updating a project with images and titles, including searching for specific images and changing titles.', 'The chapter presents the creation of website sections using markup, including section C with an ID of section dash C and a class of grid, and section D with an ID of section D and a class of grid.', "The addition of a footer with specific divs, including 'Acme Web Solutions' and 'Project by Traverse Media,' along with a hyperlink to travestymedia.com, showcases the practical application of markup for website design.", 'The chapter also highlights the use of specific tags and classes for structuring website sections, such as div, h2, and paragraph, emphasizing the importance of structured markup in web development.', 'Added core styles for body including zero margin, font family, background color, color, font size, line height, and text alignment, resulting in a visually improved website layout.', 'Applied core styles for images to set display to block, width to 100% of the container, and height to auto, leading to the proper display and sizing of images on the website.', 'Defined core styles for buttons including display, background, color, padding, border, and margin, leading to a visually enhanced and user-friendly button design.', 'Implemented core styles for headings and paragraphs by zeroing out the margin, setting padding, resulting in a consistent and visually appealing display of headings and paragraphs.', 'The background image is added to the showcase with specific properties.', 'The z-index property is used to control the stacking order of elements, with higher values bringing elements closer, demonstrated by setting a negative z-index to place the background image behind the text, resolving visibility issues.', 'Setting the background position to center, repeat to no repeat, and size to cover provides specific styling for the background image, ensuring it fits and displays as intended within its container.', 'The text color is specified as white for the showcase.', 'The minimum height of the showcase is set to 450 pixels.', 'The text is aligned to the center for the showcase.', 'Adjusting the opacity of the background image allows for controlling its prominence, shown by setting the opacity to 0.4 to fade out the image and providing flexibility for different opacity values to suit the design requirements.', 'Adding CSS styles to different sections of a website, including padding, background colors, and removing bullet points and margins for lists.', 'Using the content wrap class to Center everything and add 1.5m padding on the sides for the showcase.', 'Emphasizing a mobile-first approach by ensuring the styles are suitable for mobile devices before implementing a media query for larger screens.', 'Fixing the showcase heading by adding padding to the top and removing padding from the bottom.', 'Explaining the usage of grid template column property to create a four-column grid layout with fractions, such as 1fr, 1fr, 1fr, 1fr, and its visual representation.', 'Describing the concept of using fractions to divide the space and create a four-column grid layout, providing an example of 1fr, 1fr, 1fr, 1fr as an illustration.', 'Spanning content wrap from two to four columns The chapter explains how to use the grid-column property to span the content wrap class from two to four columns, adjusting the layout.', 'Adjusting the width of middle two columns It discusses the intention to widen the middle two columns compared to the side ones using the repeat function and minmax function for grid layout.', 'Utilizing the minmax function for grid layout The chapter introduces the use of the minmax function for grid layout, illustrating the concept through replacing the middle two columns with a repeat function.', 'The middle columns are set to 25M width, resulting in a total width of 50M when the browser size is at a certain point.', 'The side columns shrink as the browser size decreases.', 'The grid is set to only be in effect at 700 pixels or less.', 'Setting text columns and optimizing for mobile view The presenter sets the text content to two columns, adjusts the column gap, and ensures scalable design for the mobile view, providing a visually appealing layout across different devices.', 'Aligning elements using Flexbox and adjusting width The chapter covers aligning elements by setting the UL to a flex item, adjusting the width of the list items, and justifying the content using space around, resulting in a visually balanced and appealing design.', 'Fixing column spans and aligning elements The speaker demonstrates fixing the column spans, ensuring the boxes and divs span two columns instead of one, and aligning elements in the footer and section D for a correct layout.']}