title
How to Build a Responsive Website From Start to Finish - Coding the Header and Footer - part 4

description
Today we get into the meat of coding out the site. We code out the header and footer of the project. It's fun! Check out the Github project here to follow along: https://github.com/DevTips/Artists-Theme Check out the whole playlist for all the previous videos: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KQZUkRjfwMmTq_f1fbxerI --- A big thank you to these creators for contributing sample projects for the "work" section: Micael Butial -https://www.behance.net/gallery/14751131/-TYPO-International-Design-Talks Petras Nargėla - https://www.behance.net/gallery/16750837/Free-80-Crispy-Icons-in-PSD-AI-SVG-Webfont Sergey Valiukh - https://www.behance.net/gallery/13745729/Timeline-Page Ayoub Elred - https://www.behance.net/gallery/15812143/Flat-Mobile-UIUX-Concept-download Anton Skvortsov - https://www.behance.net/gallery/16483395/City-IN-website-concept Nick Zoutendijk - https://www.behance.net/gallery/13870569/Stripes-Co-Free-icon-Set Jonathan Quintin - https://www.behance.net/gallery/12748107/Weather-Dashboard-Global-Outlook-UIUX Jieyu Xiong - https://www.behance.net/gallery/15063575/Fresh-It-Up-App-Design --- DevTips is a YouTube show about web design and development. HTML5 Basics Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPVV3eYzxJlWcON CSS Basics Playlist: https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh_hqODMqoeeCy ---- DevTips now has a twitter account: https://twitter.com/DevTipsShow Travis also tweets: https://twitter.com/travisneilson

detail
{'title': 'How to Build a Responsive Website From Start to Finish - Coding the Header and Footer - part 4', 'heatmap': [{'end': 323.781, 'start': 85.752, 'weight': 0.856}, {'end': 496.979, 'start': 461.771, 'weight': 0.771}, {'end': 672.12, 'start': 636.723, 'weight': 0.72}, {'end': 930.739, 'start': 901.039, 'weight': 0.796}, {'end': 1251.88, 'start': 1217.516, 'weight': 0.718}, {'end': 1454.906, 'start': 1407.974, 'weight': 0.811}, {'end': 1746.102, 'start': 1653.05, 'weight': 0.879}], 'summary': 'Covers building a responsive professional website, utilizing github repo for the artist theme project, trello board progress, mustache syntax for modular project structure, html styling with specific pixel and margin measurements, svg logo usage with optimization techniques, css background image properties for responsive design, and creating efficient code placeholders with mixins and extend for faster code.', 'chapters': [{'end': 73.953, 'segs': [{'end': 40.784, 'src': 'embed', 'start': 0.069, 'weight': 0, 'content': [{'end': 1.149, 'text': 'Welcome to DevTips everybody.', 'start': 0.069, 'duration': 1.08}, {'end': 3.711, 'text': "My name is Travis Nielsen and we'll be building stuff today.", 'start': 1.21, 'duration': 2.501}, {'end': 13.695, 'text': 'This is the fourth video in a series called how to create a responsive professional website from start to finish.', 'start': 7.932, 'duration': 5.763}, {'end': 19.437, 'text': "If this is the first time you've ever seen a DevTips video, click here for the playlist of this whole series up to this point.", 'start': 13.935, 'duration': 5.502}, {'end': 21.398, 'text': "You may want to start at the beginning, but I don't care.", 'start': 19.497, 'duration': 1.901}, {'end': 22.438, 'text': 'You be you.', 'start': 21.878, 'duration': 0.56}, {'end': 31.998, 'text': 'Sassy, Before we start, I want to point out that if you go to the GitHub page, the DevTips GitHub page here at github.com.', 'start': 23.239, 'duration': 8.759}, {'end': 35.501, 'text': "slash devtips, you'll find a new repo called Artist Theme.", 'start': 31.998, 'duration': 3.503}, {'end': 40.784, 'text': 'You can download this project at any stage in our progression and check out the code for yourself and follow along.', 'start': 35.761, 'duration': 5.023}], 'summary': 'Travis nielsen introduces a series on building a responsive website, with a github repo available for download.', 'duration': 40.715, 'max_score': 0.069, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WX0MpDuUqqw/pics/WX0MpDuUqqw69.jpg'}, {'end': 85.091, 'src': 'embed', 'start': 56.969, 'weight': 1, 'content': [{'end': 62.15, 'text': "I'll mention your name here and I'll feature your fork and I'll talk about why it's awesome here on the show.", 'start': 56.969, 'duration': 5.181}, {'end': 64.931, 'text': 'So please, by all means, take a look at the GitHub repo.', 'start': 62.471, 'duration': 2.46}, {'end': 66.771, 'text': 'The link is in the description of the video.', 'start': 64.95, 'duration': 1.821}, {'end': 73.373, 'text': "You can also subscribe on GitHub by watching it here and you'll get the updated code a few days earlier than the videos actually come out.", 'start': 66.971, 'duration': 6.402}, {'end': 73.953, 'text': "So that's cool.", 'start': 73.473, 'duration': 0.48}, {'end': 85.091, 'text': "All right, let's start this session by looking at our Trello board and we can see that all of the sections are in the design column.", 'start': 76.164, 'duration': 8.927}], 'summary': 'Promoting github repo, encouraging subscription for early access, and checking trello board for design progress.', 'duration': 28.122, 'max_score': 56.969, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WX0MpDuUqqw/pics/WX0MpDuUqqw56969.jpg'}], 'start': 0.069, 'title': 'Building responsive website', 'summary': 'Delves into creating a responsive professional website, providing a github repo for the artist theme project, and promoting contribution and subscription for early access to updated code.', 'chapters': [{'end': 73.953, 'start': 0.069, 'title': 'Building responsive website', 'summary': 'Discusses building a responsive professional website, offering a github repo with a project called artist theme, including a photoshop document, and encouraging viewers to contribute and subscribe for early access to updated code.', 'duration': 73.884, 'highlights': ['The chapter introduces the fourth video in a series on creating a responsive professional website from start to finish.', 'A GitHub repo called Artist Theme is available for download at any stage in the progression, with the included Photoshop document for free.', 'Viewers are encouraged to fork the repo, fix mistakes, and make the project more awesome, with the promise of being featured on the show for their contributions.', 'Subscribing on GitHub provides early access to updated code, a few days ahead of the release of the videos.']}], 'duration': 73.884, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WX0MpDuUqqw/pics/WX0MpDuUqqw69.jpg', 'highlights': ['A GitHub repo called Artist Theme is available for download at any stage in the progression, with the included Photoshop document for free.', 'Subscribing on GitHub provides early access to updated code, a few days ahead of the release of the videos.', 'The chapter introduces the fourth video in a series on creating a responsive professional website from start to finish.', 'Viewers are encouraged to fork the repo, fix mistakes, and make the project more awesome, with the promise of being featured on the show for their contributions.']}, {'end': 448.705, 'segs': [{'end': 323.781, 'src': 'heatmap', 'start': 76.164, 'weight': 0, 'content': [{'end': 85.091, 'text': "All right, let's start this session by looking at our Trello board and we can see that all of the sections are in the design column.", 'start': 76.164, 'duration': 8.927}, {'end': 88.214, 'text': "Now let's start from the top and we're going to work our way down.", 'start': 85.752, 'duration': 2.462}, {'end': 91.416, 'text': "We're going to be moving them into the development column as we work on them.", 'start': 88.234, 'duration': 3.182}, {'end': 94.139, 'text': 'The first card here is the asset collection.', 'start': 91.997, 'duration': 2.142}, {'end': 100.455, 'text': 'I have a little starter file that I use for all of my projects, and it includes bourbon and jQuery, so we already have those.', 'start': 94.793, 'duration': 5.662}, {'end': 109.058, 'text': 'Now for the font, I went to Google Fonts and got Open Sans, and I included the light, normal, and bold weights of Open Sans into our project.', 'start': 101.135, 'duration': 7.923}, {'end': 111.619, 'text': "So that's the general assets.", 'start': 110.038, 'duration': 1.581}, {'end': 121.702, 'text': 'Now I need to start with the header and we can see that we need that background image we need to extract from the PSD and also the logo up at the top here.', 'start': 111.719, 'duration': 9.983}, {'end': 128.529, 'text': 'I kind of wanted to get into the coding first before I start extracting those elements.', 'start': 124.145, 'duration': 4.384}, {'end': 133.352, 'text': 'So, if I run over to my rendered website as it is,', 'start': 128.989, 'duration': 4.363}, {'end': 140.177, 'text': "I just have this placeholder paragraph that I put in there just to make sure my font's showing up and that everything's rendering like it should.", 'start': 133.352, 'duration': 6.825}, {'end': 143.379, 'text': 'My CSS is working and everything like that.', 'start': 141.298, 'duration': 2.081}, {'end': 147.882, 'text': 'So the first thing that I want to do is create a section called header.', 'start': 143.519, 'duration': 4.363}, {'end': 151.964, 'text': 'Create a space so I can put in my HTML for the header.', 'start': 149.122, 'duration': 2.842}, {'end': 165.971, 'text': 'And in Jekyll, if I create a folder called underscore includes, I can then include specific files and then inject them into the HTML at a later point.', 'start': 152.684, 'duration': 13.287}, {'end': 167.032, 'text': 'And I want to call this one header.', 'start': 165.991, 'duration': 1.041}, {'end': 173.037, 'text': 'Dot HTML.', 'start': 172.116, 'duration': 0.921}, {'end': 175.64, 'text': "And I'll say header bro.", 'start': 174.138, 'duration': 1.502}, {'end': 186.801, 'text': 'Woo And then I want to take my index, and notice that I have these three lines at the top.', 'start': 179.304, 'duration': 7.497}, {'end': 193.543, 'text': 'Those three lines are requisite for my main root level template.', 'start': 186.841, 'duration': 6.702}, {'end': 196.444, 'text': 'So this tells Jekyll that this is going to be rendered.', 'start': 193.563, 'duration': 2.881}, {'end': 201.505, 'text': "And so I'm going to include that header that you saw me create.", 'start': 196.544, 'duration': 4.961}, {'end': 204.166, 'text': "And it wouldn't work if I didn't have those three lines at the top.", 'start': 201.905, 'duration': 2.261}, {'end': 205.206, 'text': "That's kind of important.", 'start': 204.206, 'duration': 1}, {'end': 207.807, 'text': "And it's also why I have it in the SAS files.", 'start': 205.466, 'duration': 2.341}, {'end': 228.132, 'text': 'So if I do mustache bracket percent sign, and then I write include header.html, and save, I can refresh my project over here and see header bro.', 'start': 208.487, 'duration': 19.645}, {'end': 234.754, 'text': 'Okay, so that HTML file here is getting pulled into my index file right here.', 'start': 228.212, 'duration': 6.542}, {'end': 239.756, 'text': 'And so my main project will just be a series of include scripts,', 'start': 234.854, 'duration': 4.902}, {'end': 249.163, 'text': 'and that way I can kind of make my project more modular and easy to find certain things and change certain things as necessary.', 'start': 239.756, 'duration': 9.407}, {'end': 257.43, 'text': 'Now I also want to create a space in my assets folder for a new section called header.', 'start': 250.364, 'duration': 7.066}, {'end': 259.611, 'text': 'So create a new file and call it header.', 'start': 257.45, 'duration': 2.161}, {'end': 262.714, 'text': "In fact I'll call it underscore header.", 'start': 259.63, 'duration': 3.084}, {'end': 271.851, 'text': 'Any file that has an underscore in front of it in Jekyll does not get directly imported into your underscore site directory.', 'start': 264.187, 'duration': 7.664}, {'end': 283.858, 'text': "Header.sas, and I'm going to go into my sections directory and write at import header.", 'start': 273.452, 'duration': 10.406}, {'end': 300.935, 'text': "Now if I write a header.sas, just make sure it's working, body, background, And refresh, background is pink.", 'start': 286.799, 'duration': 14.136}, {'end': 303.759, 'text': "Okay, so I know that that's working with that quick test.", 'start': 300.995, 'duration': 2.764}, {'end': 312.732, 'text': 'So I have a development environment now that supports a place for markup from a header.', 'start': 304.54, 'duration': 8.192}, {'end': 323.781, 'text': "And also a place to style my header, and that's really what I want to be focusing on for this section in the video.", 'start': 314.429, 'duration': 9.352}], 'summary': 'Developing website sections, including assets and header, by moving cards through trello board columns and creating modular project structure.', 'duration': 75.8, 'max_score': 76.164, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WX0MpDuUqqw/pics/WX0MpDuUqqw76164.jpg'}, {'end': 262.714, 'src': 'embed', 'start': 208.487, 'weight': 2, 'content': [{'end': 228.132, 'text': 'So if I do mustache bracket percent sign, and then I write include header.html, and save, I can refresh my project over here and see header bro.', 'start': 208.487, 'duration': 19.645}, {'end': 234.754, 'text': 'Okay, so that HTML file here is getting pulled into my index file right here.', 'start': 228.212, 'duration': 6.542}, {'end': 239.756, 'text': 'And so my main project will just be a series of include scripts,', 'start': 234.854, 'duration': 4.902}, {'end': 249.163, 'text': 'and that way I can kind of make my project more modular and easy to find certain things and change certain things as necessary.', 'start': 239.756, 'duration': 9.407}, {'end': 257.43, 'text': 'Now I also want to create a space in my assets folder for a new section called header.', 'start': 250.364, 'duration': 7.066}, {'end': 259.611, 'text': 'So create a new file and call it header.', 'start': 257.45, 'duration': 2.161}, {'end': 262.714, 'text': "In fact I'll call it underscore header.", 'start': 259.63, 'duration': 3.084}], 'summary': 'Using mustache bracket percent sign, include header.html to make project modular and easy to find/change things. creating a new section called header in assets folder.', 'duration': 54.227, 'max_score': 208.487, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WX0MpDuUqqw/pics/WX0MpDuUqqw208487.jpg'}, {'end': 448.705, 'src': 'embed', 'start': 332.211, 'weight': 1, 'content': [{'end': 336.734, 'text': "Now if you look back way in the history of dev tips, there's one of the early videos.", 'start': 332.211, 'duration': 4.523}, {'end': 341.096, 'text': 'And I talk about how to mark up a website.', 'start': 336.814, 'duration': 4.282}, {'end': 346.079, 'text': "And I talk about how you do it kind of just, you're basically describing what you see.", 'start': 341.197, 'duration': 4.882}, {'end': 347.62, 'text': "And so I'll show you that now.", 'start': 346.3, 'duration': 1.32}, {'end': 351.183, 'text': "Header, here's the header tag.", 'start': 348.301, 'duration': 2.882}, {'end': 359.47, 'text': 'And I see a space at the top for a logo of a div class logo.', 'start': 352.405, 'duration': 7.065}, {'end': 364.674, 'text': "And that doesn't need to always be a div, but I'm just talking right now.", 'start': 360.671, 'duration': 4.003}, {'end': 369.037, 'text': "I'm describing with my code what I'm seeing with my eyes.", 'start': 364.814, 'duration': 4.223}, {'end': 370.518, 'text': 'And I see a nav.', 'start': 369.557, 'duration': 0.961}, {'end': 374.08, 'text': 'And then in that nav, I see a series of links.', 'start': 371.418, 'duration': 2.662}, {'end': 380.665, 'text': 'Ahrefs I see about me.', 'start': 375.401, 'duration': 5.264}, {'end': 389.401, 'text': "I mean, is that four? There's four links here.", 'start': 387.199, 'duration': 2.202}, {'end': 401.149, 'text': 'So about me, work, clients, and contact.', 'start': 390.161, 'duration': 10.988}, {'end': 407.394, 'text': 'Cool And then after that, I see a big headline.', 'start': 402.671, 'duration': 4.723}, {'end': 409.316, 'text': "So I'm just going to call that H1.", 'start': 407.654, 'duration': 1.662}, {'end': 413.439, 'text': "And it says, artist's fame.", 'start': 410.016, 'duration': 3.423}, {'end': 425.631, 'text': "And then after that, I see a little kicker, and I'm gonna call that a P for the class of kicker, or a lead paragraph, whatever you wanna call it.", 'start': 414.844, 'duration': 10.787}, {'end': 437.798, 'text': "And it's like a subtitle, right? Thinker, fancy slashes, designer, YouTuber.", 'start': 425.851, 'duration': 11.947}, {'end': 448.705, 'text': "This is describing myself right now, but I want this to be really easy to be editable for anybody who's using this theme.", 'start': 439.939, 'duration': 8.766}], 'summary': 'Describing website markup, including header, logo, nav, links, headline, and subtitle with code.', 'duration': 116.494, 'max_score': 332.211, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WX0MpDuUqqw/pics/WX0MpDuUqqw332211.jpg'}], 'start': 76.164, 'title': 'Trello board progress and web development', 'summary': 'Covers the progress of moving tasks in trello board, using mustache syntax for modular project structure, and web development markup and styling, including tasks like asset collection and creating a structured layout.', 'chapters': [{'end': 207.807, 'start': 76.164, 'title': 'Trello board development progress', 'summary': 'Discusses the progress of moving sections from the design column to the development column in the trello board, including tasks such as asset collection, font selection, and creating the header section.', 'duration': 131.643, 'highlights': ['The chapter starts by reviewing the Trello board progress, with all sections currently in the design column.', 'The speaker discusses the asset collection, mentioning the inclusion of bourbon, jQuery, and Open Sans font with light, normal, and bold weights for the project.', 'The process of creating the header section is detailed, including the extraction of background image and logo from PSD, checking rendering on the website, and the use of Jekyll for including specific files in HTML.']}, {'end': 303.759, 'start': 208.487, 'title': 'Using mustache syntax for modular project structure', 'summary': 'Discusses using mustache syntax to include header.html, creating a modular project structure, and testing the functionality of the new header component with a quick test.', 'duration': 95.272, 'highlights': ['The HTML file is getting pulled into the index file using mustache syntax.', 'Creating a modular project structure by including scripts and organizing files in the assets folder.', "Testing the functionality of the new header component with a quick test to ensure it's working."]}, {'end': 448.705, 'start': 304.54, 'title': 'Web development: markup and styling', 'summary': "Discusses the process of marking up a website's header, including using header tags, div classes, and anchor links, to create a structured and visually descriptive layout for easy editing.", 'duration': 144.165, 'highlights': ["The process of marking up a website's header involves using header tags, div classes, and anchor links to create a structured and visually descriptive layout for easy editing.", 'Describing the visual elements observed such as the logo, navigation links, headline, and kicker, and implementing them using appropriate HTML tags.', 'Emphasizing the importance of creating editable themes for user convenience and flexibility.']}], 'duration': 372.541, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WX0MpDuUqqw/pics/WX0MpDuUqqw76164.jpg', 'highlights': ['The speaker discusses the asset collection, including bourbon, jQuery, and Open Sans font. (3)', "The process of marking up a website's header involves using header tags, div classes, and anchor links. (2)", 'Creating a modular project structure by including scripts and organizing files in the assets folder. (2)', 'The HTML file is getting pulled into the index file using mustache syntax. (2)', 'The process of creating the header section is detailed, including the extraction of background image and logo from PSD. (1)', 'The chapter starts by reviewing the Trello board progress, with all sections currently in the design column. (1)', "Testing the functionality of the new header component with a quick test to ensure it's working. (1)", 'Describing the visual elements observed such as the logo, navigation links, headline, and kicker. (1)', 'Emphasizing the importance of creating editable themes for user convenience and flexibility. (1)']}, {'end': 1251.88, 'segs': [{'end': 530.211, 'src': 'heatmap', 'start': 461.771, 'weight': 0, 'content': [{'end': 468.324, 'text': "Okay, so I think that's good right now for the markup.", 'start': 461.771, 'duration': 6.553}, {'end': 473.108, 'text': "Let's get into styling this thing and we're going to do that here.", 'start': 468.364, 'duration': 4.744}, {'end': 484.257, 'text': "So header, I'm going to make it, what is this? Looks like about 450 height.", 'start': 473.128, 'duration': 11.129}, {'end': 496.979, 'text': "I'm gonna make it a little soft gray right now just so we can see it.", 'start': 489.733, 'duration': 7.246}, {'end': 502.443, 'text': "I haven't extracted that image yet, so we need to get that background in there so we can kind of block it out.", 'start': 496.999, 'duration': 5.444}, {'end': 505.686, 'text': "And then let's just jump into the logo.", 'start': 503.244, 'duration': 2.442}, {'end': 508.008, 'text': 'I said that it was a class of logo.', 'start': 506.086, 'duration': 1.922}, {'end': 522.063, 'text': 'And the height and width on this thing is, I believe, 100.', 'start': 510.95, 'duration': 11.113}, {'end': 523.144, 'text': "It's 50, actually.", 'start': 522.063, 'duration': 1.081}, {'end': 530.211, 'text': "And I'm using a bourbon mix in, and I can say it's 50px.", 'start': 523.164, 'duration': 7.047}], 'summary': 'Styling the header with soft gray color, 450px height, and a logo of 50px.', 'duration': 81.426, 'max_score': 461.771, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WX0MpDuUqqw/pics/WX0MpDuUqqw461771.jpg'}, {'end': 618.71, 'src': 'embed', 'start': 562.045, 'weight': 2, 'content': [{'end': 574.194, 'text': "So I'm going to call them display inline block so that they can have a little bit of margin on their left side.", 'start': 562.045, 'duration': 12.149}, {'end': 584.797, 'text': 'How much margin? Looks like about 20 pixels of margin on the left side.', 'start': 579.192, 'duration': 5.605}, {'end': 589.581, 'text': 'That way, they can be separated from each other nicely.', 'start': 584.817, 'duration': 4.764}, {'end': 598.969, 'text': 'And also, just styling-wise, not structural-wise, I want them to be font-weight.', 'start': 589.601, 'duration': 9.368}, {'end': 611.484, 'text': 'Was it 800 or 700? 700.', 'start': 602.612, 'duration': 8.872}, {'end': 618.71, 'text': 'Text transform, uppercase.', 'start': 611.485, 'duration': 7.225}], 'summary': 'Styling the elements with 20px left margin and 700 font-weight.', 'duration': 56.665, 'max_score': 562.045, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WX0MpDuUqqw/pics/WX0MpDuUqqw562045.jpg'}, {'end': 672.12, 'src': 'heatmap', 'start': 636.723, 'weight': 0.72, 'content': [{'end': 639.525, 'text': "So I'm going to use an RGBA here.", 'start': 636.723, 'duration': 2.802}, {'end': 640.246, 'text': 'So color.', 'start': 639.705, 'duration': 0.541}, {'end': 652.927, 'text': "And we'll check out how that worked out.", 'start': 649.725, 'duration': 3.202}, {'end': 660.79, 'text': "Okay, so right now we have, and the hover is turning into this blue, so let's nip that in the bud right now.", 'start': 653.987, 'duration': 6.803}, {'end': 665.272, 'text': 'We wanna write and hover.', 'start': 660.81, 'duration': 4.462}, {'end': 672.12, 'text': 'Now this little character here is a keyword in SAS that means all of the selectors that have come before.', 'start': 665.292, 'duration': 6.828}], 'summary': 'Using rgba color with sas, hover turning into blue, addressing the issue', 'duration': 35.397, 'max_score': 636.723, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WX0MpDuUqqw/pics/WX0MpDuUqqw636723.jpg'}, {'end': 754.571, 'src': 'embed', 'start': 702.777, 'weight': 3, 'content': [{'end': 706.139, 'text': 'Okay, so this is the 50 pixels by 50 pixels for our logo.', 'start': 702.777, 'duration': 3.362}, {'end': 712.362, 'text': 'Here is our navigation elements, separated by 20 pixels of margin on the left.', 'start': 706.559, 'duration': 5.803}, {'end': 713.763, 'text': 'Here is our headline.', 'start': 712.882, 'duration': 0.881}, {'end': 723.92, 'text': "or I don't want to call that, it's like a hero, but I want to call that H1.", 'start': 716.835, 'duration': 7.085}, {'end': 726.942, 'text': "And that's going to be, let's describe that.", 'start': 723.94, 'duration': 3.002}, {'end': 730.465, 'text': "That's going to be 72 pixels bold.", 'start': 728.123, 'duration': 2.342}, {'end': 739.532, 'text': 'So font size 72 pixels.', 'start': 730.885, 'duration': 8.647}, {'end': 739.832, 'text': 'And wait.', 'start': 739.552, 'duration': 0.28}, {'end': 754.571, 'text': 'And color is going to be white.', 'start': 749.99, 'duration': 4.581}], 'summary': 'Logo: 50x50px, navigation with 20px margin, h1: 72px bold, white color', 'duration': 51.794, 'max_score': 702.777, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WX0MpDuUqqw/pics/WX0MpDuUqqw702777.jpg'}, {'end': 930.739, 'src': 'heatmap', 'start': 875.822, 'weight': 5, 'content': [{'end': 880.305, 'text': "And then we're going to create a nested span selector here.", 'start': 875.822, 'duration': 4.483}, {'end': 888.472, 'text': "And we're going to say display inline block.", 'start': 880.325, 'duration': 8.147}, {'end': 897.939, 'text': "And we want to give it padding of, let's say, 1m to start with.", 'start': 891.914, 'duration': 6.025}, {'end': 899.16, 'text': 'And I can just measure from there.', 'start': 898.019, 'duration': 1.141}, {'end': 919.672, 'text': "no, it's going to be 0.5 m, that's going to be really big, and then um border to be white, solid and about 10 pixels, i think.", 'start': 901.039, 'duration': 18.633}, {'end': 921.733, 'text': "let's see what we got.", 'start': 919.672, 'duration': 2.061}, {'end': 928.057, 'text': 'oh, look at that, so that that margin, or sorry, that padding, is a little heavy on the vertical.', 'start': 921.733, 'duration': 6.324}, {'end': 930.739, 'text': 'so we want to say um point.', 'start': 928.057, 'duration': 2.682}], 'summary': 'Creating a nested span selector with inline block display, 0.5m padding, and 10-pixel white solid border.', 'duration': 45.911, 'max_score': 875.822, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WX0MpDuUqqw/pics/WX0MpDuUqqw875822.jpg'}, {'end': 1251.88, 'src': 'heatmap', 'start': 1217.516, 'weight': 0.718, 'content': [{'end': 1221.42, 'text': 'um, we could do a clear fix right there, and that would fix everything.', 'start': 1217.516, 'duration': 3.904}, {'end': 1222.541, 'text': "that's the lazy man's way.", 'start': 1221.42, 'duration': 1.121}, {'end': 1229.608, 'text': 'the proper way, is to say, is to do here, uh, clear, both.', 'start': 1222.541, 'duration': 7.067}, {'end': 1238.057, 'text': 'instead of doing the clear fix hack, just do it how it should be both clear, both, and it should jump down where it should be.', 'start': 1229.608, 'duration': 8.449}, {'end': 1239.218, 'text': 'great, great, great, great, great.', 'start': 1238.057, 'duration': 1.161}, {'end': 1246.679, 'text': "And now we have to figure out the padding top of the H1, because, remember, it's the span that's given us this white border.", 'start': 1239.758, 'duration': 6.921}, {'end': 1251.88, 'text': "So the H1 will be right here, cuz that margin's still jumping up through this flow.", 'start': 1247.039, 'duration': 4.841}], 'summary': 'Suggests a clear fix for coding, emphasizing proper method and issues with padding top.', 'duration': 34.364, 'max_score': 1217.516, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WX0MpDuUqqw/pics/WX0MpDuUqqw1217516.jpg'}, {'end': 1251.88, 'src': 'embed', 'start': 1229.608, 'weight': 6, 'content': [{'end': 1238.057, 'text': 'instead of doing the clear fix hack, just do it how it should be both clear, both, and it should jump down where it should be.', 'start': 1229.608, 'duration': 8.449}, {'end': 1239.218, 'text': 'great, great, great, great, great.', 'start': 1238.057, 'duration': 1.161}, {'end': 1246.679, 'text': "And now we have to figure out the padding top of the H1, because, remember, it's the span that's given us this white border.", 'start': 1239.758, 'duration': 6.921}, {'end': 1251.88, 'text': "So the H1 will be right here, cuz that margin's still jumping up through this flow.", 'start': 1247.039, 'duration': 4.841}], 'summary': 'Discussing web design issues and figuring out padding for h1.', 'duration': 22.272, 'max_score': 1229.608, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WX0MpDuUqqw/pics/WX0MpDuUqqw1229608.jpg'}], 'start': 448.785, 'title': 'Html and web page styling', 'summary': 'Covers styling html header and navigation using 15 lines of code, and provides detailed web page styling including logo dimensions, navigation elements, headline formatting, and spacing adjustments with specific pixel and margin measurements.', 'chapters': [{'end': 702.237, 'start': 448.785, 'title': 'Styling html header and navigation', 'summary': 'Demonstrates styling of html header and navigation using 15 lines of code, including specifying dimensions, colors, and positioning of elements.', 'duration': 253.452, 'highlights': ['The chapter demonstrates styling of HTML header and navigation using 15 lines of code, including specifying dimensions, colors, and positioning of elements.', 'The header is set to a height of 450px and a soft gray color, while the logo is styled with a height and width of 50px, using bourbon mix-in and a darker background color.', 'The navigation links are set to display as inline block with 20 pixels of left margin, font-weight of 700, text transformed to uppercase, and a color of black at 70% opacity using RGBA.']}, {'end': 1251.88, 'start': 702.777, 'title': 'Web design page styling', 'summary': 'Explains the detailed styling of a web page, including logo dimensions, navigation elements, headline formatting, and spacing adjustments, with specific pixel and margin measurements provided.', 'duration': 549.103, 'highlights': ['The headline (H1) is to be 72 pixels bold with white color and uppercase text, and the kicker is to be 14 points with font weight 700 and centered text, both with text transform uppercase and specific margin measurements.', 'Detailed styling instructions are provided for the logo, navigation elements, and headline, including specific pixel dimensions and margin adjustments.', 'The process includes the use of nested elements, such as a non-semantic span for decoration and a span selector for the white border, with specific measurements provided for inline block display and padding.', 'The proper placement and styling of elements, including clearing the navigation and adjusting the padding top of H1, are explained in detail for achieving the desired layout and appearance.']}], 'duration': 803.095, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WX0MpDuUqqw/pics/WX0MpDuUqqw448785.jpg', 'highlights': ['The chapter demonstrates styling of HTML header and navigation using 15 lines of code, including specifying dimensions, colors, and positioning of elements.', 'The header is set to a height of 450px and a soft gray color, while the logo is styled with a height and width of 50px, using bourbon mix-in and a darker background color.', 'The navigation links are set to display as inline block with 20 pixels of left margin, font-weight of 700, text transformed to uppercase, and a color of black at 70% opacity using RGBA.', 'The headline (H1) is to be 72 pixels bold with white color and uppercase text, and the kicker is to be 14 points with font weight 700 and centered text, both with text transform uppercase and specific margin measurements.', 'Detailed styling instructions are provided for the logo, navigation elements, and headline, including specific pixel dimensions and margin adjustments.', 'The process includes the use of nested elements, such as a non-semantic span for decoration and a span selector for the white border, with specific measurements provided for inline block display and padding.', 'The proper placement and styling of elements, including clearing the navigation and adjusting the padding top of H1, are explained in detail for achieving the desired layout and appearance.']}, {'end': 1686.571, 'segs': [{'end': 1344.632, 'src': 'embed', 'start': 1302.377, 'weight': 6, 'content': [{'end': 1310.364, 'text': "For the logo, we notice that it's a vector shape, and I want to keep it that way.", 'start': 1302.377, 'duration': 7.987}, {'end': 1314.829, 'text': "So I'm going to grab my direct selection tool and just copy that.", 'start': 1310.384, 'duration': 4.445}, {'end': 1316.751, 'text': "I'm going to open Illustrator.", 'start': 1314.849, 'duration': 1.902}, {'end': 1322.316, 'text': "I'm going to make Illustrator small so we can fit it in this window here.", 'start': 1319.974, 'duration': 2.342}, {'end': 1344.632, 'text': "Okay, and I'm going to create a new document in Illustrator, and I'm going to make it, let's see, for web, 50 pixels, right? And paste.", 'start': 1322.376, 'duration': 22.256}], 'summary': 'Creating a new 50-pixel web document in illustrator for vector logo.', 'duration': 42.255, 'max_score': 1302.377, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WX0MpDuUqqw/pics/WX0MpDuUqqw1302377.jpg'}, {'end': 1488.818, 'src': 'heatmap', 'start': 1407.974, 'weight': 0, 'content': [{'end': 1425.302, 'text': 'i can jump over to my includes and create a folder called icons and a new document called a logo dot html.', 'start': 1407.974, 'duration': 17.328}, {'end': 1426.843, 'text': "and i'm going to.", 'start': 1425.302, 'duration': 1.541}, {'end': 1429.259, 'text': 'Where did it go??', 'start': 1428.599, 'duration': 0.66}, {'end': 1436.401, 'text': "Okay, and I'm going to copy this SVG code right there and paste it right in.", 'start': 1429.279, 'duration': 7.122}, {'end': 1439.522, 'text': 'One thing I want to get rid of is this view box thing.', 'start': 1437.381, 'duration': 2.141}, {'end': 1440.982, 'text': 'It kind of screws me up.', 'start': 1439.902, 'duration': 1.08}, {'end': 1445.723, 'text': "And then that's it, okay.", 'start': 1442.663, 'duration': 3.06}, {'end': 1454.906, 'text': 'So what this has done is now I have an HTML page with an SVG shape inside of it.', 'start': 1446.464, 'duration': 8.442}, {'end': 1467.229, 'text': 'And then I can include it into my header right here, just like we did before with a double mustache, a double percent.', 'start': 1455.706, 'duration': 11.523}, {'end': 1468.97, 'text': "Where's the percent? There we go.", 'start': 1467.829, 'duration': 1.141}, {'end': 1476.812, 'text': 'And then we wanna call it icons slash, no, we wanna say include.', 'start': 1469.59, 'duration': 7.222}, {'end': 1483.694, 'text': 'Icons slash logo.html.', 'start': 1480.213, 'duration': 3.481}, {'end': 1487.897, 'text': 'Hold on to your butts.', 'start': 1487.076, 'duration': 0.821}, {'end': 1488.818, 'text': "I'm not sure if this will work.", 'start': 1487.937, 'duration': 0.881}], 'summary': 'Creating an html page with an svg shape, to be included in the header.', 'duration': 107.431, 'max_score': 1407.974, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WX0MpDuUqqw/pics/WX0MpDuUqqw1407974.jpg'}, {'end': 1540.358, 'src': 'embed', 'start': 1509.829, 'weight': 2, 'content': [{'end': 1513.554, 'text': "If I take this off entirely, I don't even know what color it will be.", 'start': 1509.829, 'duration': 3.725}, {'end': 1514.915, 'text': 'I think it will be default to black.', 'start': 1513.574, 'duration': 1.341}, {'end': 1522.605, 'text': "Okay, so we can go into our CSS for the header and say background, don't talk about it.", 'start': 1514.975, 'duration': 7.63}, {'end': 1529.273, 'text': "And then for the SVG, again, we'll look at the logo HTML.", 'start': 1524.651, 'duration': 4.622}, {'end': 1534.695, 'text': "There's an SVG, g, g, path, and path is the one we wanna apply the color to.", 'start': 1530.053, 'duration': 4.642}, {'end': 1540.358, 'text': 'So we would say path, and then fill is the property.', 'start': 1535.335, 'duration': 5.023}], 'summary': "Css for header background and svg logo color can be modified using 'fill' property.", 'duration': 30.529, 'max_score': 1509.829, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WX0MpDuUqqw/pics/WX0MpDuUqqw1509829.jpg'}, {'end': 1644.664, 'src': 'embed', 'start': 1576.332, 'weight': 3, 'content': [{'end': 1577.753, 'text': 'Really, really cool, really classy.', 'start': 1576.332, 'duration': 1.421}, {'end': 1580.694, 'text': "We're gonna use that a lot later as well, this technique.", 'start': 1577.773, 'duration': 2.921}, {'end': 1587.157, 'text': "But I like that because it's not using another, again, those HTTP requests.", 'start': 1580.774, 'duration': 6.383}, {'end': 1593.42, 'text': "If we look at our compiled markup, it's right in there.", 'start': 1587.237, 'duration': 6.183}, {'end': 1596.051, 'text': "It's right in there.", 'start': 1595.051, 'duration': 1}, {'end': 1605.934, 'text': "So I'm not calling the server for like a icon font or anything or an external SVG or an image asset.", 'start': 1596.872, 'duration': 9.062}, {'end': 1609.075, 'text': "It's like right in the markup, so like it's super fast.", 'start': 1606.034, 'duration': 3.041}, {'end': 1613.396, 'text': 'Not waiting on any requests from the server, super cool.', 'start': 1611.056, 'duration': 2.34}, {'end': 1616.157, 'text': 'Okay, what do we need? The background image, okay.', 'start': 1613.496, 'duration': 2.661}, {'end': 1618.178, 'text': 'This is a lot lighter.', 'start': 1617.338, 'duration': 0.84}, {'end': 1621.199, 'text': 'What is this? 40%, okay.', 'start': 1620.218, 'duration': 0.981}, {'end': 1633.996, 'text': 'Stylish This header image is a really beautiful shot of the coast of California.', 'start': 1625.089, 'duration': 8.907}, {'end': 1641.202, 'text': "And it is taken by, goodness, it's from gratisography.com.", 'start': 1634.737, 'duration': 6.465}, {'end': 1644.664, 'text': "Bell's design, I don't know.", 'start': 1643.243, 'duration': 1.421}], 'summary': 'Using inline svg for faster loading, with a 40% lighter background image from gratisography.com.', 'duration': 68.332, 'max_score': 1576.332, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WX0MpDuUqqw/pics/WX0MpDuUqqw1576332.jpg'}], 'start': 1253.22, 'title': 'Svg logo usage in web design', 'summary': 'Covers the process of converting a vector logo to an svg file, adding the svg logo to an html page, and manipulating its color using css. it emphasizes maintaining vector shape, provides specific steps, and demonstrates optimization techniques for web performance.', 'chapters': [{'end': 1407.974, 'start': 1253.22, 'title': 'Web design: svg logo conversion', 'summary': 'Covers the process of converting a vector logo to an svg file for web use, emphasizing the importance of maintaining the logo as a vector shape while providing specific steps and considerations, such as using illustrator to create a 50-pixel svg and saving it onto the desktop, and exploring how svgs are represented as code in a code editor.', 'duration': 154.754, 'highlights': ['The importance of maintaining the logo as a vector shape for web use and the process of converting it into an SVG file using Illustrator, creating a 50-pixel SVG and saving it onto the desktop.', 'Demonstrating the process of opening and examining the SVG file in a code editor to understand its representation as code.']}, {'end': 1488.818, 'start': 1407.974, 'title': 'Adding svg logo to html', 'summary': "Covers adding an svg logo to an html page by creating a folder called 'icons' and a new document called 'logo.html', copying svg code, removing 'view box' attribute, and including it in the header using 'include' command.", 'duration': 80.844, 'highlights': ["Creating a folder called 'icons' and a new document called 'logo.html' to store the SVG logo code.", "Copying SVG code and pasting it into the 'logo.html' document.", "Removing the 'view box' attribute from the SVG code to avoid issues.", "Including the SVG logo in the header using the 'include' command with the path 'icons/logo.html'."]}, {'end': 1686.571, 'start': 1489.079, 'title': 'Css logo color technique', 'summary': 'Demonstrates how to manipulate the color of an svg logo using css, achieving a crisp and clear result, while also optimizing performance by avoiding additional http requests for external assets, with the background image sourced from gratisography.com.', 'duration': 197.492, 'highlights': ['The chapter demonstrates how to manipulate the color of an SVG logo using CSS.', 'Optimizing performance by avoiding additional HTTP requests for external assets.', 'Sourcing the background image from gratisography.com for free with no attribution required.']}], 'duration': 433.351, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WX0MpDuUqqw/pics/WX0MpDuUqqw1253220.jpg', 'highlights': ['Demonstrating the process of opening and examining the SVG file in a code editor to understand its representation as code.', "Creating a folder called 'icons' and a new document called 'logo.html' to store the SVG logo code.", 'The chapter demonstrates how to manipulate the color of an SVG logo using CSS.', 'Optimizing performance by avoiding additional HTTP requests for external assets.', "Removing the 'view box' attribute from the SVG code to avoid issues.", "Including the SVG logo in the header using the 'include' command with the path 'icons/logo.html'.", 'The importance of maintaining the logo as a vector shape for web use and the process of converting it into an SVG file using Illustrator, creating a 50-pixel SVG and saving it onto the desktop.', 'Sourcing the background image from gratisography.com for free with no attribution required.']}, {'end': 2283.728, 'segs': [{'end': 1736.834, 'src': 'embed', 'start': 1711.996, 'weight': 0, 'content': [{'end': 1717.222, 'text': "So I'm going to say background-size And I'm gonna say cover.", 'start': 1711.996, 'duration': 5.226}, {'end': 1723.445, 'text': 'Cover is one of the coolest CSS properties to ever, ever hit background images.', 'start': 1717.982, 'duration': 5.463}, {'end': 1725.307, 'text': 'It was awesome when it came out.', 'start': 1723.766, 'duration': 1.541}, {'end': 1730.75, 'text': "What it does, it'll stretch this image just to cover the size in proportion.", 'start': 1725.867, 'duration': 4.883}, {'end': 1734.972, 'text': "So it'll start cutting off the bottom and the top as long as the edge hits.", 'start': 1730.77, 'duration': 4.202}, {'end': 1736.834, 'text': "And when I hit refresh, you'll see what I mean.", 'start': 1735.032, 'duration': 1.802}], 'summary': "Using 'cover' as background-size property stretches image to cover size proportionally.", 'duration': 24.838, 'max_score': 1711.996, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WX0MpDuUqqw/pics/WX0MpDuUqqw1711996.jpg'}, {'end': 1805.176, 'src': 'embed', 'start': 1759.914, 'weight': 4, 'content': [{'end': 1763.076, 'text': 'Helps you can show full width images to cover the whole place.', 'start': 1759.914, 'duration': 3.162}, {'end': 1764.318, 'text': "I'm just talking too much, this is cool.", 'start': 1763.177, 'duration': 1.141}, {'end': 1769.163, 'text': 'One, two, great.', 'start': 1766.2, 'duration': 2.963}, {'end': 1772.787, 'text': 'It looks like we got a really good start on our header.', 'start': 1769.223, 'duration': 3.564}, {'end': 1778.754, 'text': 'The footer for this design also uses that image.', 'start': 1773.728, 'duration': 5.026}, {'end': 1783.639, 'text': 'Cool Yeah, okay.', 'start': 1780.396, 'duration': 3.243}, {'end': 1789.789, 'text': "I'm going to do the footer, actually, yeah.", 'start': 1786.687, 'duration': 3.102}, {'end': 1803.095, 'text': 'So assets, sections, new file, underscore footer.sas, and sections directory footer.', 'start': 1790.429, 'duration': 12.666}, {'end': 1805.176, 'text': 'There we are.', 'start': 1804.756, 'duration': 0.42}], 'summary': 'Creating full width images for header and footer design elements.', 'duration': 45.262, 'max_score': 1759.914, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WX0MpDuUqqw/pics/WX0MpDuUqqw1759914.jpg'}, {'end': 2039.974, 'src': 'embed', 'start': 1987.714, 'weight': 1, 'content': [{'end': 1990.855, 'text': "I'm gonna go over to the footer sass and say footer.", 'start': 1987.714, 'duration': 3.141}, {'end': 1998.557, 'text': "First thing I'm gonna do is do that same on the background of the header.", 'start': 1992.496, 'duration': 6.061}, {'end': 2013.817, 'text': "Okay, that's good.", 'start': 2011.716, 'duration': 2.101}, {'end': 2021.683, 'text': 'And then I have a lockup here, and then inside that logo.', 'start': 2014.078, 'duration': 7.605}, {'end': 2031.549, 'text': "So class lockup, margin is gonna be 50, no, it's gonna be 30 pixels.", 'start': 2021.723, 'duration': 9.826}, {'end': 2039.974, 'text': "And so I'm going to have 30 pixels around these things.", 'start': 2036.85, 'duration': 3.124}], 'summary': 'Styling changes made to footer and header with 30 pixel margin in lockup class.', 'duration': 52.26, 'max_score': 1987.714, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WX0MpDuUqqw/pics/WX0MpDuUqqw1987714.jpg'}, {'end': 2283.728, 'src': 'embed', 'start': 2245.188, 'weight': 5, 'content': [{'end': 2248.669, 'text': "Now we have an interesting thing that's happening here.", 'start': 2245.188, 'duration': 3.481}, {'end': 2258.851, 'text': 'This font size 14 bold uppercase happens quite a few in this design.', 'start': 2248.689, 'duration': 10.162}, {'end': 2265.773, 'text': "Here's another instance of it, 14 bold uppercase all throughout here.", 'start': 2258.911, 'duration': 6.862}, {'end': 2269.774, 'text': "There's quite a few places, 14 bold uppercase.", 'start': 2265.793, 'duration': 3.981}, {'end': 2273.585, 'text': 'not just these two places.', 'start': 2271.224, 'duration': 2.361}, {'end': 2283.728, 'text': 'So what would be a good idea to do would be to abstract that style into a more reusable pattern.', 'start': 2273.725, 'duration': 10.003}], 'summary': 'Font size 14 bold uppercase occurs frequently in the design, suggesting the need to abstract it into a reusable pattern.', 'duration': 38.54, 'max_score': 2245.188, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WX0MpDuUqqw/pics/WX0MpDuUqqw2245188.jpg'}], 'start': 1686.571, 'title': 'Css background image properties and full-width image creation', 'summary': "Explains centering and stretching background images with css, emphasizing the 'cover' property for responsive design. it also describes creating full-width header and footer images, using sass for footer styling and abstracting reusable design patterns.", 'chapters': [{'end': 1759.774, 'start': 1686.571, 'title': 'Css background image properties', 'summary': "Explains how to center and stretch a background image using css, emphasizing the use of 'cover' property for responsive design and its ability to stretch the image to cover the size in proportion, cutting off the edges as needed.", 'duration': 73.203, 'highlights': ["The 'cover' property in CSS is highlighted as one of the coolest CSS properties for background images, stretching the image to cover the size in proportion, cutting off the edges as needed for responsive design.", "Demonstrates the use of 'background-size: cover' in CSS to stretch the background image and hide or show information on the bottom or top based on the width, making it great for responsive design.", "Explains the concept of 'background-size: cover' cutting off the bottom and top of the image as long as the edge hits, and adjusting to show or hide information based on the width for responsive design.", "Describes the behavior of 'background-size: cover' in CSS, cutting off the bottom and top of the image and adjusting to show or hide information based on the width for responsive design."]}, {'end': 2283.728, 'start': 1759.914, 'title': 'Creating full-width images and styling footer', 'summary': 'Describes creating a full-width image for the header and footer, using sass to style the footer with specific classes and properties, and abstracting a reusable pattern for font size and text transformation, focusing on the design layout and styling.', 'duration': 523.814, 'highlights': ['The chapter focuses on creating a full-width image for the header and footer, emphasizing the importance of the design layout and styling.', 'Sass is used to style the footer with specific classes and properties, such as div class lockup, copyright paragraph, and content wrap, to achieve the desired layout.', 'The process involves abstracting a reusable pattern for font size and text transformation, particularly for the 14 bold uppercase style used in multiple instances throughout the design.']}], 'duration': 597.157, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WX0MpDuUqqw/pics/WX0MpDuUqqw1686571.jpg', 'highlights': ["The 'cover' property in CSS stretches background images for responsive design.", 'Sass is used to style the footer with specific classes and properties.', "Explains the concept of 'background-size: cover' for responsive design.", "Describes the behavior of 'background-size: cover' in CSS for responsive design.", 'The chapter focuses on creating a full-width image for the header and footer.', 'Abstracting a reusable pattern for font size and text transformation is emphasized.']}, {'end': 2900.95, 'segs': [{'end': 2350.527, 'src': 'embed', 'start': 2321.612, 'weight': 2, 'content': [{'end': 2332.639, 'text': "they're gonna be little snippets of code that help me to kind of organize and reuse, reuse code, similar to mix.", 'start': 2321.612, 'duration': 11.027}, {'end': 2338.102, 'text': "actually, i'm going to use them in conjunction with mixins to to make,", 'start': 2332.639, 'duration': 5.463}, {'end': 2343.644, 'text': 'to make the code more efficient and fast instead of rewriting things over and over again.', 'start': 2338.102, 'duration': 5.542}, {'end': 2348.746, 'text': "i'm just going to collect uh, collect the selectors actually around the placeholder.", 'start': 2343.644, 'duration': 5.102}, {'end': 2350.527, 'text': 'so let me show you how that works.', 'start': 2348.746, 'duration': 1.781}], 'summary': 'Using code snippets and mixins to organize and reuse code for efficiency.', 'duration': 28.915, 'max_score': 2321.612, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WX0MpDuUqqw/pics/WX0MpDuUqqw2321612.jpg'}, {'end': 2501.76, 'src': 'embed', 'start': 2448.316, 'weight': 1, 'content': [{'end': 2449.697, 'text': "I've just been reading about it last week.", 'start': 2448.316, 'duration': 1.381}, {'end': 2451.739, 'text': "Let's see if it makes a difference.", 'start': 2449.717, 'duration': 2.022}, {'end': 2455.081, 'text': "Looks like we're all right.", 'start': 2454.18, 'duration': 0.901}, {'end': 2488.31, 'text': 'Cool, so every time we did that, font-weight 700, Yeah, and we wanna do the same style to the navigation at the bottom of the footer.', 'start': 2457.822, 'duration': 30.488}, {'end': 2495.956, 'text': "So what is this gonna be called in the nav? Let's look at my footer markup.", 'start': 2489.31, 'duration': 6.646}, {'end': 2501.76, 'text': 'Footer markup says, yeah, content wrap nav a class.', 'start': 2497.977, 'duration': 3.783}], 'summary': 'Discussion on applying font-weight 700 to navigation in the footer.', 'duration': 53.444, 'max_score': 2448.316, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WX0MpDuUqqw/pics/WX0MpDuUqqw2448316.jpg'}, {'end': 2748.335, 'src': 'embed', 'start': 2718.294, 'weight': 0, 'content': [{'end': 2720.017, 'text': "Oh, I wonder why the margin's left in here.", 'start': 2718.294, 'duration': 1.723}, {'end': 2722.42, 'text': 'Content wrap.', 'start': 2721.659, 'duration': 0.761}, {'end': 2724.523, 'text': 'Oh, I put an S front.', 'start': 2723.542, 'duration': 0.981}, {'end': 2729.39, 'text': "Okay Yeah, that's a hard one.", 'start': 2724.563, 'duration': 4.827}, {'end': 2730.912, 'text': 'I was making it a little bit more opaque.', 'start': 2729.41, 'duration': 1.502}, {'end': 2731.453, 'text': "I'll call it good.", 'start': 2730.932, 'duration': 0.521}, {'end': 2732.875, 'text': "I'll say five.", 'start': 2731.473, 'duration': 1.402}, {'end': 2735.247, 'text': "Yeah, that's good.", 'start': 2734.707, 'duration': 0.54}, {'end': 2741.891, 'text': 'One last thing I wanted to do before we wrap up is take advantage of some of the templating systems that are built into Jekyll.', 'start': 2735.588, 'duration': 6.303}, {'end': 2748.335, 'text': 'So for example, in the header, I have my headline and my subline here, my kicker.', 'start': 2741.931, 'duration': 6.404}], 'summary': 'Discussion about margin, opacity, and templating systems in jekyll.', 'duration': 30.041, 'max_score': 2718.294, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WX0MpDuUqqw/pics/WX0MpDuUqqw2718294.jpg'}], 'start': 2284.488, 'title': 'Creating efficient code placeholders', 'summary': 'Discusses the process of creating and implementing code placeholders, using mixins and extend to make the code more efficient and fast, making changes to the footer markup, and leveraging templating systems in jekyll for dynamic content.', 'chapters': [{'end': 2900.95, 'start': 2284.488, 'title': 'Creating and implementing code placeholders', 'summary': 'Discusses the process of creating and implementing code placeholders, using mixins and extend small bold to make the code more efficient and fast, making changes to the footer markup, and leveraging templating systems in jekyll for dynamic content.', 'duration': 616.462, 'highlights': ['The process of creating and implementing code placeholders, using mixins and extend small bold to make the code more efficient and fast.', 'Making changes to the footer markup, including font size, color, and margin adjustments for elements like navigation links and logo.', 'Leveraging templating systems in Jekyll for dynamic content, allowing for easier customization and use for other individuals.']}], 'duration': 616.462, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/WX0MpDuUqqw/pics/WX0MpDuUqqw2284488.jpg', 'highlights': ['Leveraging templating systems in Jekyll for dynamic content, allowing for easier customization and use for other individuals.', 'Making changes to the footer markup, including font size, color, and margin adjustments for elements like navigation links and logo.', 'The process of creating and implementing code placeholders, using mixins and extend to make the code more efficient and fast.']}], 'highlights': ['A GitHub repo called Artist Theme is available for download at any stage in the progression, with the included Photoshop document for free.', 'Subscribing on GitHub provides early access to updated code, a few days ahead of the release of the videos.', 'The chapter introduces the fourth video in a series on creating a responsive professional website from start to finish.', 'Viewers are encouraged to fork the repo, fix mistakes, and make the project more awesome, with the promise of being featured on the show for their contributions.', 'The chapter demonstrates styling of HTML header and navigation using 15 lines of code, including specifying dimensions, colors, and positioning of elements.', 'Leveraging templating systems in Jekyll for dynamic content, allowing for easier customization and use for other individuals.', "The 'cover' property in CSS stretches background images for responsive design.", 'Creating a modular project structure by including scripts and organizing files in the assets folder.', 'The process of creating and implementing code placeholders, using mixins and extend to make the code more efficient and fast.', 'The process of opening and examining the SVG file in a code editor to understand its representation as code.']}