title
How to Build a Responsive Website From Start to Finish - Profile Section - part 5

description
Let's use Flex-Box, media queries and more to make the "About" section of our site! 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 - Profile Section - part 5', 'heatmap': [{'end': 1776.827, 'start': 1691.054, 'weight': 0.845}, {'end': 2581.822, 'start': 2493.859, 'weight': 0.939}, {'end': 3182.272, 'start': 3138.113, 'weight': 0.792}, {'end': 3347.282, 'start': 3289.467, 'weight': 0.846}, {'end': 3747.252, 'start': 3700.55, 'weight': 0.725}, {'end': 3904.973, 'start': 3853.084, 'weight': 1}], 'summary': 'This tutorial series covers creating a professional responsive portfolio website using jekyll, including empathetic design, architecture mapping, visual design, and coding with code available on github for early access. it also demonstrates troubleshooting css issues, utilizing flexbox for image and icon export resulting in decreased image size, and emphasizes responsive design with media queries for audience engagement.', 'chapters': [{'end': 128.127, 'segs': [{'end': 31.427, 'src': 'embed', 'start': 0.249, 'weight': 2, 'content': [{'end': 0.97, 'text': 'Hello everybody.', 'start': 0.249, 'duration': 0.721}, {'end': 8.654, 'text': 'My name is Travis and this is Dev Tips and this is where we be learning codes at on the internet, on YouTube.', 'start': 1.01, 'duration': 7.644}, {'end': 23.242, 'text': 'This is the fifth video in the series called how to make the most awesome and professional responsive portfolio website in the planet from start to finish.', 'start': 10.695, 'duration': 12.547}, {'end': 25.123, 'text': "I think that's what it's called or something like that.", 'start': 23.262, 'duration': 1.861}, {'end': 27.804, 'text': "And we've gone through everything.", 'start': 25.982, 'duration': 1.822}, {'end': 31.427, 'text': "I mean, if you haven't watched the video series up to this point, you really should take a look at it.", 'start': 27.844, 'duration': 3.583}], 'summary': 'Travis from dev tips teaches professional web development on youtube, focusing on creating a responsive portfolio website. this is the fifth video in the series.', 'duration': 31.178, 'max_score': 0.249, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL4249.jpg'}, {'end': 107.417, 'src': 'embed', 'start': 44.537, 'weight': 0, 'content': [{'end': 51.941, 'text': "We've covered how to map the architecture of a website out in your mind and create a document for your clients.", 'start': 44.537, 'duration': 7.404}, {'end': 54.202, 'text': 'We talked about sketching and visual design.', 'start': 52.281, 'duration': 1.921}, {'end': 57.304, 'text': "We've done some setting up of our platform Jekyll.", 'start': 54.242, 'duration': 3.062}, {'end': 64.748, 'text': "We're going to be using Jekyll and if you haven't used Jekyll or don't know what Jekyll is yet, take a look at that video.", 'start': 58.204, 'duration': 6.544}, {'end': 72.453, 'text': "It's in the playlist, and the video is actually on another channel called PHP Academy that I sometimes make videos for,", 'start': 65.188, 'duration': 7.265}, {'end': 74.455, 'text': "because they're cool and Alex is really cool.", 'start': 72.453, 'duration': 2.002}, {'end': 76.736, 'text': 'So check out those videos.', 'start': 75.035, 'duration': 1.701}, {'end': 81.54, 'text': "Today is the fifth video in the series, and we're going to be coding out the about section.", 'start': 76.776, 'duration': 4.764}, {'end': 82.54, 'text': 'Okay, this is really exciting.', 'start': 81.56, 'duration': 0.98}, {'end': 85.983, 'text': "But before we do, before we get too deep into what we're doing today,", 'start': 82.56, 'duration': 3.423}, {'end': 93.668, 'text': 'I want to point out that all of the code that we have been creating and that we are making from week to week is on GitHub.', 'start': 85.983, 'duration': 7.685}, {'end': 100.993, 'text': 'So if you go to github.com slash dev tips, you can find this repository here called artist theme.', 'start': 93.708, 'duration': 7.285}, {'end': 102.434, 'text': "And that's what we're working on right now.", 'start': 101.013, 'duration': 1.421}, {'end': 107.417, 'text': "So in Artist Theme are all of the files and all the code that we'll be doing week to week.", 'start': 103.075, 'duration': 4.342}], 'summary': 'Covered website architecture, visual design, using jekyll, coding about section. code available on github.', 'duration': 62.88, 'max_score': 44.537, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL444537.jpg'}], 'start': 0.249, 'title': 'Creating professional responsive portfolio website', 'summary': 'Covers creating a professional responsive portfolio website, including empathetic design, architecture mapping, visual design, and coding using jekyll, with the code available on github for early access.', 'chapters': [{'end': 128.127, 'start': 0.249, 'title': 'Creating professional responsive portfolio website', 'summary': 'Covers the process of creating a professional responsive portfolio website, including empathetic design, architecture mapping, visual design, and coding using jekyll, with the code available on github for early access.', 'duration': 127.878, 'highlights': ['The code for the portfolio website is available on GitHub at github.com/devtips in the repository called artist theme, providing early access to the code before the videos are released.', 'The series covers important aspects such as empathy in design, architecture mapping, visual design, and coding using Jekyll for creating a professional responsive portfolio website.', "The fifth video in the series focuses on coding the 'about' section for the portfolio website.", 'The series is available on YouTube under the channel Dev Tips and also includes content on PHP Academy.', 'The videos in the series provide comprehensive guidance on creating a professional responsive portfolio website from start to finish.']}], 'duration': 127.878, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL4249.jpg', 'highlights': ['The code for the portfolio website is available on GitHub at github.com/devtips in the repository called artist theme, providing early access to the code before the videos are released.', 'The series covers important aspects such as empathy in design, architecture mapping, visual design, and coding using Jekyll for creating a professional responsive portfolio website.', 'The videos in the series provide comprehensive guidance on creating a professional responsive portfolio website from start to finish.', "The fifth video in the series focuses on coding the 'about' section for the portfolio website.", 'The series is available on YouTube under the channel Dev Tips and also includes content on PHP Academy.']}, {'end': 278.628, 'segs': [{'end': 163.83, 'src': 'embed', 'start': 128.857, 'weight': 2, 'content': [{'end': 129.997, 'text': "So that's kind of a nice thing for you.", 'start': 128.857, 'duration': 1.14}, {'end': 138.922, 'text': "And also the Photoshop document that's used to create this website, the visual design is also included in the repo.", 'start': 130.058, 'duration': 8.864}, {'end': 140.703, 'text': 'So you can get that for free.', 'start': 139.402, 'duration': 1.301}, {'end': 148.314, 'text': "And then when this project is done on GitHub, it'll be free to download and kind of change put your name on it, whatever.", 'start': 140.743, 'duration': 7.571}, {'end': 148.835, 'text': "I don't care.", 'start': 148.354, 'duration': 0.481}, {'end': 154.48, 'text': "Let's jump into our project tracker, um, application called, uh, Trello.", 'start': 148.955, 'duration': 5.525}, {'end': 157.563, 'text': 'Okay So we have last week we did the header and footer.', 'start': 154.72, 'duration': 2.843}, {'end': 163.83, 'text': "And so they're in the Q and a section because we need to go over it once we're done with everything and make sure the quality is pretty good.", 'start': 157.603, 'duration': 6.227}], 'summary': 'Free access to website design and project tracker on github', 'duration': 34.973, 'max_score': 128.857, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL4128857.jpg'}, {'end': 202.572, 'src': 'embed', 'start': 171.684, 'weight': 0, 'content': [{'end': 176.745, 'text': "We're going to use headshots, we're going to use icons of our interests, our personal interests,", 'start': 171.684, 'duration': 5.061}, {'end': 181.227, 'text': "and I'll teach you how to create the icons and export them so they're really nice and scalable.", 'start': 176.745, 'duration': 4.482}, {'end': 189.069, 'text': "We're going to also have a little blurb, which is going to be a value proposition to the people who read the website,", 'start': 182.347, 'duration': 6.722}, {'end': 195.611, 'text': "so they can know what you're about and what value you can add to their company if they were to hire you for your services.", 'start': 189.069, 'duration': 6.542}, {'end': 202.572, 'text': "And we're going to do also the skills kind of like you know, like a bar graph or something like that.", 'start': 196.371, 'duration': 6.201}], 'summary': 'Creating personal icons, value proposition, and skills representation for website.', 'duration': 30.888, 'max_score': 171.684, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL4171684.jpg'}, {'end': 294.434, 'src': 'embed', 'start': 262.596, 'weight': 1, 'content': [{'end': 264.337, 'text': "Actually, that's a pretty important thing for you guys to say.", 'start': 262.596, 'duration': 1.741}, {'end': 270.945, 'text': "I mean we can have all the design and all the visuals you want, but if your message is not good, then it's it's going to be less successful.", 'start': 264.357, 'duration': 6.588}, {'end': 272.145, 'text': "that's for darn sure.", 'start': 270.945, 'duration': 1.2}, {'end': 278.628, 'text': 'and then we have that, that um down here we have that uh, that graph i was talking about of the different uh skill sets.', 'start': 272.145, 'duration': 6.483}, {'end': 281.649, 'text': "we'll talk about that when we come to it, because i'm using jekyll.", 'start': 278.628, 'duration': 3.021}, {'end': 287.291, 'text': 'the first thing i want to do, before i get started on this about section, is carve out the space where i can work,', 'start': 281.649, 'duration': 5.642}, {'end': 294.434, 'text': "meaning i'm going to create a document for me to to hold my um, kind of the about section that i'm going to be creating.", 'start': 287.291, 'duration': 7.143}], 'summary': 'Emphasizing the importance of a good message for success in design, using jekyll to create a document for an about section.', 'duration': 31.838, 'max_score': 262.596, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL4262596.jpg'}], 'start': 128.857, 'title': 'Design project tracker highlights', 'summary': 'Covers the progress of a design project, including the inclusion of visual design assets in a github repo, the development of the about section, and emphasizes the importance of a compelling message.', 'chapters': [{'end': 278.628, 'start': 128.857, 'title': 'Design project tracker highlights', 'summary': 'Covers the progress of a design project, including the inclusion of visual design assets in a github repo, the development of the about section featuring headshots, icons, a value proposition, and skill bar graphs, and emphasizes the importance of a compelling message.', 'duration': 149.771, 'highlights': ['The inclusion of visual design assets in the GitHub repo allows for free access to the Photoshop document used to create the website, enhancing accessibility and flexibility for users.', "The development of the about section involves the incorporation of headshots, icons of personal interests, a value proposition, and skill bar graphs, catering to the common but essential features needed for freelancers' websites and portfolios.", "Emphasizing the significance of a compelling message highlights the importance of effectively conveying one's value proposition, which is critical for the success of the website and services offered to potential clients."]}], 'duration': 149.771, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL4128857.jpg', 'highlights': ["The development of the about section involves the incorporation of headshots, icons of personal interests, a value proposition, and skill bar graphs, catering to the common but essential features needed for freelancers' websites and portfolios.", "Emphasizing the significance of a compelling message highlights the importance of effectively conveying one's value proposition, which is critical for the success of the website and services offered to potential clients.", 'The inclusion of visual design assets in the GitHub repo allows for free access to the Photoshop document used to create the website, enhancing accessibility and flexibility for users.']}, {'end': 490.989, 'segs': [{'end': 318.813, 'src': 'embed', 'start': 278.628, 'weight': 0, 'content': [{'end': 281.649, 'text': "we'll talk about that when we come to it, because i'm using jekyll.", 'start': 278.628, 'duration': 3.021}, {'end': 287.291, 'text': 'the first thing i want to do, before i get started on this about section, is carve out the space where i can work,', 'start': 281.649, 'duration': 5.642}, {'end': 294.434, 'text': "meaning i'm going to create a document for me to to hold my um, kind of the about section that i'm going to be creating.", 'start': 287.291, 'duration': 7.143}, {'end': 296.517, 'text': "Okay, so let's start.", 'start': 295.295, 'duration': 1.222}, {'end': 302.107, 'text': "So I'm gonna run over this includes folder, create a new file called about.html.", 'start': 296.637, 'duration': 5.47}, {'end': 318.813, 'text': "And I'm gonna go to my index, to my index file, and i'm going to use jekyll to inject the html that we are creating into this document.", 'start': 304.911, 'duration': 13.902}], 'summary': 'Creating a new about section using jekyll, including about.html file and injecting html into the index file.', 'duration': 40.185, 'max_score': 278.628, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL4278628.jpg'}, {'end': 357.697, 'src': 'embed', 'start': 328.12, 'weight': 1, 'content': [{'end': 329.601, 'text': 'the answer is no, you do not.', 'start': 328.12, 'duration': 1.481}, {'end': 332.803, 'text': 'you do not, you do not.', 'start': 329.601, 'duration': 3.202}, {'end': 340.289, 'text': 'i am using jekyll because it makes things a little bit more organized and simpler and tidy, right?', 'start': 332.803, 'duration': 7.486}, {'end': 342.99, 'text': "So the the work that I'm going to be doing.", 'start': 340.469, 'duration': 2.521}, {'end': 346.132, 'text': 'the HTML and CSS is going to be injecting itself.', 'start': 342.99, 'duration': 3.142}, {'end': 351.014, 'text': "And I mean, it's just the output of Jekyll is normal HTML and CSS.", 'start': 346.472, 'duration': 4.542}, {'end': 357.697, 'text': "If Jekyll does it, HTML and CSS can do it without Jekyll, right? So don't worry about it, but I do use it.", 'start': 351.274, 'duration': 6.423}], 'summary': 'Jekyll makes work organized, simpler, and tidy, producing normal html and css output.', 'duration': 29.577, 'max_score': 328.12, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL4328120.jpg'}, {'end': 462.405, 'src': 'embed', 'start': 436.079, 'weight': 2, 'content': [{'end': 442.943, 'text': 'Okay And also I need to carve out a place in my sass that I can write the styles for the about section.', 'start': 436.079, 'duration': 6.864}, {'end': 444.384, 'text': "So I'm gonna go over to sections.", 'start': 442.983, 'duration': 1.401}, {'end': 449.266, 'text': 'everything is really organized here tools base and we went over these in the last videos.', 'start': 444.384, 'duration': 4.882}, {'end': 454.549, 'text': "I'm going to make a new section called underscore about dot sass.", 'start': 449.266, 'duration': 5.283}, {'end': 458.852, 'text': "And then I'm going to go into my directory and import that.", 'start': 455.97, 'duration': 2.882}, {'end': 462.405, 'text': "Done, okay, now we're good.", 'start': 461.124, 'duration': 1.281}], 'summary': 'Carved out a section in sass for the about section, imported into directory.', 'duration': 26.326, 'max_score': 436.079, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL4436079.jpg'}], 'start': 278.628, 'title': 'Using jekyll for web development', 'summary': 'Covers creating an about section with jekyll, organizing html and css, and organizing sass, emphasizing its benefits in simplifying and organizing web development tasks.', 'chapters': [{'end': 328.12, 'start': 278.628, 'title': 'Creating about section with jekyll', 'summary': 'Discusses the process of creating an about section using jekyll, including carving out a space to work, creating a new file called about.html, and injecting html into the index file using jekyll.', 'duration': 49.492, 'highlights': ['The chapter discusses the process of creating an about section using Jekyll, including carving out a space to work, creating a new file called about.html, and injecting HTML into the index file using Jekyll.', 'The speaker plans to create a document to hold the about section and mentions creating a new file called about.html.', 'The speaker mentions using Jekyll to inject the HTML that is being created into the index file.']}, {'end': 435.919, 'start': 328.12, 'title': 'Using jekyll for organized html and css', 'summary': 'Discusses the use of jekyll for organizing and simplifying html and css, injecting content into html documents, and verifying the output, emphasizing the benefits of jekyll in making things organized and tidy.', 'duration': 107.799, 'highlights': ['The output of Jekyll is normal HTML and CSS, making Jekyll beneficial for organizing and simplifying web development tasks.', "The process of injecting content into HTML documents is demonstrated through the inclusion of the 'about' section in the main 'index.html' document, showcasing practical application.", 'Emphasizing the importance of verifying the HTML output, with a humorous example of adding dummy content to ensure the proper functioning of the HTML code.']}, {'end': 490.989, 'start': 436.079, 'title': 'Organizing sass for about section', 'summary': 'Covers organizing sass by creating a new section called underscore about dot sass, importing it into the directory, and jekyll compiling the sass and organizing html.', 'duration': 54.91, 'highlights': ['Creating a new section called underscore about dot sass to write styles for the about section.', 'Importing the new section into the directory.', 'Jekyll compiling the SASS and organizing HTML.']}], 'duration': 212.361, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL4278628.jpg', 'highlights': ['The process of creating an about section using Jekyll, including carving out a space to work, creating a new file called about.html, and injecting HTML into the index file using Jekyll.', 'The output of Jekyll is normal HTML and CSS, making Jekyll beneficial for organizing and simplifying web development tasks.', 'Creating a new section called underscore about dot sass to write styles for the about section.']}, {'end': 1039.569, 'segs': [{'end': 521.154, 'src': 'embed', 'start': 493.55, 'weight': 2, 'content': [{'end': 497.433, 'text': "Now I've talked in a few videos before about my approach to writing markup.", 'start': 493.55, 'duration': 3.883}, {'end': 507.599, 'text': "And in, and it's simply this, you need to see what you're trying to build in your mind or on in our case in a Photoshop document.", 'start': 498.073, 'duration': 9.526}, {'end': 517.871, 'text': 'and describe it, describe it with code and think about how things work and and lay them out verbally with your markup.', 'start': 508.263, 'duration': 9.608}, {'end': 521.154, 'text': "So we're going to be looking at our Photoshop document here.", 'start': 517.91, 'duration': 3.244}], 'summary': 'Approach to writing markup: visualize, describe, and lay out verbally.', 'duration': 27.604, 'max_score': 493.55, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL4493550.jpg'}, {'end': 571.651, 'src': 'embed', 'start': 543.484, 'weight': 1, 'content': [{'end': 546.325, 'text': 'We have a few items that need to float against each other.', 'start': 543.484, 'duration': 2.841}, {'end': 548.005, 'text': "It's not like a huge complicated grid.", 'start': 546.385, 'duration': 1.62}, {'end': 558.108, 'text': 'But we can see visually that we do have like a lot of space here between the elements and the margin, the edge of the page and so forth.', 'start': 548.525, 'duration': 9.583}, {'end': 563.29, 'text': 'In fact, it looks like nothing is going outside of this grid.', 'start': 559.229, 'duration': 4.061}, {'end': 566.248, 'text': 'what is it, 780 pixel wide.', 'start': 564.127, 'duration': 2.121}, {'end': 568.289, 'text': "So let's keep that in mind.", 'start': 567.449, 'duration': 0.84}, {'end': 571.651, 'text': 'Okay, the first thing I need to do is block out this area.', 'start': 568.769, 'duration': 2.882}], 'summary': 'Designing a 780-pixel wide grid to contain elements and margins on the page.', 'duration': 28.167, 'max_score': 543.484, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL4543484.jpg'}, {'end': 967.263, 'src': 'embed', 'start': 932.008, 'weight': 0, 'content': [{'end': 938.99, 'text': "And then I'll go into the vars file and make some color, make some vars.", 'start': 932.008, 'duration': 6.982}, {'end': 940.591, 'text': 'So this is what is called accent.', 'start': 939.05, 'duration': 1.541}, {'end': 952.959, 'text': 'Now when we run it, our Jekyll should compile nicely because that Sass works.', 'start': 949.02, 'duration': 3.939}, {'end': 955.459, 'text': 'And the headline is going to be that color.', 'start': 953.678, 'duration': 1.781}, {'end': 965.822, 'text': "So I'm going to build up these variables slowly over time, because I want them to be a place that, when anybody uses this theme,", 'start': 955.559, 'duration': 10.263}, {'end': 967.263, 'text': 'they can open up a few documents.', 'start': 965.822, 'duration': 1.441}], 'summary': 'Configuring colors in the vars file for jekyll theme customization.', 'duration': 35.255, 'max_score': 932.008, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL4932008.jpg'}], 'start': 493.55, 'title': 'Writing markup', 'summary': 'Discusses the approach to writing markup, emphasizing the use of descriptive code for layout in a photoshop doc, including considerations for grid layout and responsive design, and the use of classes and variables for consistent theme development.', 'chapters': [{'end': 1039.569, 'start': 493.55, 'title': 'Approach to writing markup', 'summary': 'Discusses the approach to writing markup, emphasizing the use of descriptive code to lay out elements in a photoshop document, including considerations for grid layout and responsive design, and the use of classes and variables for consistent theme development.', 'duration': 546.019, 'highlights': ['The chapter emphasizes the use of descriptive code to lay out elements in a Photoshop document.', 'It discusses considerations for grid layout and responsive design, including the use of flexbox for arranging elements.', 'The use of classes and variables for consistent theme development is highlighted, aiming to allow quick changes with dramatic results throughout the site.']}], 'duration': 546.019, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL4493550.jpg', 'highlights': ['The use of classes and variables for consistent theme development is highlighted, aiming to allow quick changes with dramatic results throughout the site.', 'It discusses considerations for grid layout and responsive design, including the use of flexbox for arranging elements.', 'The chapter emphasizes the use of descriptive code to lay out elements in a Photoshop document.']}, {'end': 1523.1, 'segs': [{'end': 1071.502, 'src': 'embed', 'start': 1042.717, 'weight': 2, 'content': [{'end': 1050.441, 'text': 'So I want to turn this thing into a flex box, which will help me kind of arrange the icons and space them out really easily.', 'start': 1042.717, 'duration': 7.724}, {'end': 1057.184, 'text': 'And then we have to do some work and actually go get those icons.', 'start': 1050.941, 'duration': 6.243}, {'end': 1059.525, 'text': "So let's get them.", 'start': 1058.965, 'duration': 0.56}, {'end': 1061.967, 'text': "The first thing shouldn't be too hard.", 'start': 1060.186, 'duration': 1.781}, {'end': 1067.99, 'text': 'Where is it? The first thing is actually my face.', 'start': 1062.087, 'duration': 5.903}, {'end': 1069.591, 'text': "So let's get that.", 'start': 1068.47, 'duration': 1.121}, {'end': 1071.502, 'text': 'Get that face.', 'start': 1070.782, 'duration': 0.72}], 'summary': "Turning the thing into a flex box for arranging icons and retrieving the first icon, which is the speaker's face.", 'duration': 28.785, 'max_score': 1042.717, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL41042717.jpg'}, {'end': 1130.446, 'src': 'embed', 'start': 1103.243, 'weight': 0, 'content': [{'end': 1107.525, 'text': 'a? trim away the transparent pixels from the top, bottom, left and right.', 'start': 1103.243, 'duration': 4.282}, {'end': 1108.205, 'text': 'as soon as i hit.', 'start': 1107.525, 'duration': 0.68}, {'end': 1116.949, 'text': "ok, i have a document that's trimmed all the way down to the bare bones of the image, so it's an easy export from there.", 'start': 1108.205, 'duration': 8.744}, {'end': 1121.211, 'text': "um, now my background's white, but i don't.", 'start': 1116.949, 'duration': 4.262}, {'end': 1124.793, 'text': "yeah. so i'll, i'll make it in jpeg so that it can be smaller.", 'start': 1121.211, 'duration': 3.582}, {'end': 1126.202, 'text': 'Look at that.', 'start': 1125.922, 'duration': 0.28}, {'end': 1130.446, 'text': 'It went down to 13 kilowatts.', 'start': 1126.222, 'duration': 4.224}], 'summary': 'The image was trimmed, resulting in a 13 kilobyte file size reduction.', 'duration': 27.203, 'max_score': 1103.243, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL41103243.jpg'}, {'end': 1482.638, 'src': 'embed', 'start': 1436.882, 'weight': 1, 'content': [{'end': 1437.803, 'text': 'Delete the view box.', 'start': 1436.882, 'duration': 0.921}, {'end': 1446.197, 'text': 'All right, we have all our icons as SVGs.', 'start': 1443.595, 'duration': 2.602}, {'end': 1447.178, 'text': 'This is really exciting.', 'start': 1446.257, 'duration': 0.921}, {'end': 1450.52, 'text': "Let's plug them into our markup as partials.", 'start': 1447.218, 'duration': 3.302}, {'end': 1452.942, 'text': "And so let's go to our about HTML.", 'start': 1450.96, 'duration': 1.982}, {'end': 1467.132, 'text': "And right here, we're going to put curly mustache, percent, percent, curly out mustache, that guy.", 'start': 1455.244, 'duration': 11.888}, {'end': 1482.638, 'text': "And write include icon dash And then I'm just going to paste that guy, because it's kind of annoying to write those mustaches.", 'start': 1467.893, 'duration': 14.745}], 'summary': 'Placing svg icons into html markup as partials.', 'duration': 45.756, 'max_score': 1436.882, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL41436882.jpg'}], 'start': 1042.717, 'title': 'Flexbox icons and svg export', 'summary': 'Demonstrates the process of exporting images and icons using flexbox, resulting in a decrease in image size from 60-something kilobytes to 13 kilobytes and the inclusion of svg icons into markup as partials.', 'chapters': [{'end': 1523.1, 'start': 1042.717, 'title': 'Flexbox icons and svg export', 'summary': 'Demonstrates the process of exporting images and icons using flexbox, trimming transparent pixels, and exporting icons as svg, resulting in a decrease in image size from 60-something kilobytes to 13 kilobytes, and the inclusion of svg icons into markup as partials.', 'duration': 480.383, 'highlights': ['The process of exporting images and icons using flexbox is demonstrated. The speaker discusses converting a design into a flexbox to arrange icons easily and efficiently.', 'Transparent pixels are trimmed, resulting in a significant decrease in image size from 60-something kilobytes to 13 kilobytes. The speaker explains the process of trimming transparent pixels from images, leading to a reduction in image size from over 60 kilobytes to 13 kilobytes, and the decision to export the image as a JPEG for further size reduction.', 'Icons are exported as SVG and included into markup as partials. The process of exporting icons as SVG is detailed, along with the inclusion of these SVG icons into markup as partials, demonstrating the practical application of the exported icons.']}], 'duration': 480.383, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL41042717.jpg', 'highlights': ['Transparent pixels are trimmed, resulting in a significant decrease in image size from 60-something kilobytes to 13 kilobytes. The speaker explains the process of trimming transparent pixels from images, leading to a reduction in image size from over 60 kilobytes to 13 kilobytes, and the decision to export the image as a JPEG for further size reduction.', 'Icons are exported as SVG and included into markup as partials. The process of exporting icons as SVG is detailed, along with the inclusion of these SVG icons into markup as partials, demonstrating the practical application of the exported icons.', 'The process of exporting images and icons using flexbox is demonstrated. The speaker discusses converting a design into a flexbox to arrange icons easily and efficiently.']}, {'end': 2008.266, 'segs': [{'end': 1606.522, 'src': 'embed', 'start': 1572.557, 'weight': 0, 'content': [{'end': 1580.243, 'text': 'What did I do wrong? Maybe because I put it as, let me just take this display off.', 'start': 1572.557, 'duration': 7.686}, {'end': 1585.987, 'text': "Okay, so that's what it was.", 'start': 1584.446, 'duration': 1.541}, {'end': 1591.572, 'text': "The display flex was, we're not ready for flexing our displays yet.", 'start': 1586.468, 'duration': 5.104}, {'end': 1593.053, 'text': 'Okay, that was strange.', 'start': 1591.892, 'duration': 1.161}, {'end': 1597.615, 'text': 'So the first thing I want to do is get that image working.', 'start': 1594.212, 'duration': 3.403}, {'end': 1601.097, 'text': 'So if I look back, I have my face in the middle of a circle.', 'start': 1597.735, 'duration': 3.362}, {'end': 1602.519, 'text': "That shouldn't be too hard.", 'start': 1601.378, 'duration': 1.141}, {'end': 1606.522, 'text': 'And that one is called face image.', 'start': 1603.499, 'duration': 3.023}], 'summary': "Debugging code to fix display flex issue and work on getting the 'face image' centered.", 'duration': 33.965, 'max_score': 1572.557, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL41572557.jpg'}, {'end': 1800.652, 'src': 'heatmap', 'start': 1691.054, 'weight': 1, 'content': [{'end': 1697.896, 'text': 'with a caret up means if, as long as the class includes any of this, which is icon space.', 'start': 1691.054, 'duration': 6.842}, {'end': 1702.017, 'text': "okay, so that's that's going to be all four of these, even though they all have separate classes.", 'start': 1697.896, 'duration': 4.121}, {'end': 1707.379, 'text': 'they all have a class name that includes the, the character set, icon dash.', 'start': 1702.017, 'duration': 5.362}, {'end': 1723.546, 'text': 'this is this is selecting them all, and I want them to be size 100, So they should be a lot smaller now.', 'start': 1707.379, 'duration': 16.167}, {'end': 1724.166, 'text': 'Okay, cool.', 'start': 1723.646, 'duration': 0.52}, {'end': 1729.289, 'text': "Now, let's see if that display flex is still gonna mess us up.", 'start': 1725.387, 'duration': 3.902}, {'end': 1732.83, 'text': 'Okay, it did not.', 'start': 1732.13, 'duration': 0.7}, {'end': 1736.792, 'text': 'Good, good, good, good.', 'start': 1735.872, 'duration': 0.92}, {'end': 1739.033, 'text': "Okay, let's do the background.", 'start': 1736.992, 'duration': 2.041}, {'end': 1746.257, 'text': 'So we can see what our space looks like.', 'start': 1744.316, 'duration': 1.941}, {'end': 1749.581, 'text': 'What I want to do is I want to order this.', 'start': 1747.259, 'duration': 2.322}, {'end': 1757.048, 'text': "What's it called? Just order three.", 'start': 1750.502, 'duration': 6.546}, {'end': 1776.827, 'text': "Is that right? Maybe I have to, I've never used an order before, so this is kind of new for me as well.", 'start': 1757.068, 'duration': 19.759}, {'end': 1780.928, 'text': 'So I think maybe I have to designate the order of everything else as well.', 'start': 1776.867, 'duration': 4.061}, {'end': 1788.349, 'text': "So icon-pencil, you're gonna be order number one.", 'start': 1781.528, 'duration': 6.821}, {'end': 1792.87, 'text': 'Okay, looks like you did that.', 'start': 1791.65, 'duration': 1.22}, {'end': 1800.652, 'text': 'And who else is in the house? Icon-mouse.', 'start': 1796.631, 'duration': 4.021}], 'summary': "Selecting all icons with class name 'icon-dash' and setting size to 100. testing 'display: flex' and ordering elements.", 'duration': 98.635, 'max_score': 1691.054, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL41691054.jpg'}, {'end': 1906.124, 'src': 'embed', 'start': 1871.779, 'weight': 3, 'content': [{'end': 1874.179, 'text': 'This is exactly the setup that I wanted.', 'start': 1871.779, 'duration': 2.4}, {'end': 1881.241, 'text': "It's exactly with a few spacing issues with the top and few spacing issues, or a few like background images issues here.", 'start': 1874.419, 'duration': 6.822}, {'end': 1884.482, 'text': "So let's grow this guy here.", 'start': 1881.381, 'duration': 3.101}, {'end': 1897.462, 'text': "And we'll say the background And we'll say the, we'll say background, the color is going to be the BG color.", 'start': 1884.842, 'duration': 12.62}, {'end': 1903.223, 'text': "And I'm gonna go to find the BG color in my vars.", 'start': 1900.163, 'duration': 3.06}, {'end': 1906.124, 'text': 'BG color.', 'start': 1905.064, 'duration': 1.06}], 'summary': 'Adjusting setup with spacing and background color issues.', 'duration': 34.345, 'max_score': 1871.779, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL41871779.jpg'}], 'start': 1525.741, 'title': 'Troubleshooting css, image display, and styling icons', 'summary': "Covers troubleshooting css issues, setting image size and style using class selectors, resolving 'display flex' problem, ordering and styling icons, and resolving issues with background colors and positioning.", 'chapters': [{'end': 1746.257, 'start': 1525.741, 'title': 'Troubleshooting css and image display', 'summary': "Discusses troubleshooting css issues related to image display, including setting the size and style of images and icons using class selectors, with an emphasis on resolving the 'display flex' problem, and successfully displaying the desired images.", 'duration': 220.516, 'highlights': ['The chapter discusses troubleshooting CSS issues related to image display.', "The chapter emphasizes resolving the 'display flex' problem.", 'The chapter covers setting the size and style of images and icons using class selectors.', 'The chapter highlights successfully displaying the desired images.']}, {'end': 2008.266, 'start': 1747.259, 'title': 'Ordering and styling icons', 'summary': 'Discusses the process of ordering and styling icons, including setting the order of icons and resolving issues with background colors and positioning.', 'duration': 261.007, 'highlights': ['The chapter discusses setting the order of icons, including designating the order of different elements, and successfully achieving the desired arrangement.', 'The speaker resolves issues with background colors and positioning, including setting the background color using a variable and adjusting the border radius.', 'The speaker explains the process of removing fill color attributes from the markup to ensure that the CSS styling is not overridden.']}], 'duration': 482.525, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL41525741.jpg', 'highlights': ["The chapter emphasizes resolving the 'display flex' problem.", 'The chapter covers setting the size and style of images and icons using class selectors.', 'The chapter discusses setting the order of icons, including designating the order of different elements, and successfully achieving the desired arrangement.', 'The speaker resolves issues with background colors and positioning, including setting the background color using a variable and adjusting the border radius.']}, {'end': 2561.89, 'segs': [{'end': 2209.2, 'src': 'embed', 'start': 2179.179, 'weight': 0, 'content': [{'end': 2180.84, 'text': "People are like, oh yeah, it'll just get smaller.", 'start': 2179.179, 'duration': 1.661}, {'end': 2182.081, 'text': "That's true, it will get smaller.", 'start': 2180.88, 'duration': 1.201}, {'end': 2188.323, 'text': "But the problem is you don't have any space around your text and it's really immature-ish.", 'start': 2182.521, 'duration': 5.802}, {'end': 2193.765, 'text': 'So I want to put some pixel, I think 15 actually is good, padding on each side of that 620.', 'start': 2188.723, 'duration': 5.042}, {'end': 2195.566, 'text': 'And I want a margin.', 'start': 2193.765, 'duration': 1.801}, {'end': 2203.198, 'text': '0 auto, so I can get it in the center there.', 'start': 2200.057, 'duration': 3.141}, {'end': 2204.039, 'text': 'Okay, great.', 'start': 2203.458, 'duration': 0.581}, {'end': 2209.2, 'text': 'Now, how much space from the top do we need? About 100, right? No, about 50.', 'start': 2204.499, 'duration': 4.701}], 'summary': 'Adding 15 pixels padding, margin 0 auto, and 50px from top to center text.', 'duration': 30.021, 'max_score': 2179.179, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL42179179.jpg'}, {'end': 2338.224, 'src': 'embed', 'start': 2295.189, 'weight': 1, 'content': [{'end': 2303.231, 'text': "So let's add a, at the bottom of this section of the faces and stuff, we're gonna add a media query.", 'start': 2295.189, 'duration': 8.042}, {'end': 2320.034, 'text': 'Say at media screen and max width of, and how big is this?', 'start': 2303.591, 'duration': 16.443}, {'end': 2321.054, 'text': 'This is what?', 'start': 2320.274, 'duration': 0.78}, {'end': 2329.997, 'text': 'If you have your inspector open and start moving your browser and you get these like little pixel dimensions at the top.', 'start': 2326.013, 'duration': 3.984}, {'end': 2338.224, 'text': 'So it was like 640, right? Yeah, it starts impacting around, starts looking like junk around 650.', 'start': 2330.037, 'duration': 8.187}], 'summary': 'Adding a media query for max width of 640px to improve layout at smaller screen sizes.', 'duration': 43.035, 'max_score': 2295.189, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL42295189.jpg'}], 'start': 2009.625, 'title': 'Web design and responsive layout', 'summary': 'Covers styling and sizing web elements with specific measurements such as 100 pixels padding top and 24 pixels font size, and demonstrates the use of media queries with a max width of 650 pixels for responsive design.', 'chapters': [{'end': 2294.829, 'start': 2009.625, 'title': 'Web design styling and sizing', 'summary': 'Outlines the process of styling and sizing elements for a web design, including setting padding, margin, and font size to create visually appealing and responsive layout with specific measurements such as 100 pixels padding top and 24 pixels font size.', 'duration': 285.204, 'highlights': ['Setting padding, margin, and font size for web design elements The transcript details the process of setting padding, margin, and font size to create a visually appealing layout.', 'Specific measurements such as 100 pixels padding top and 24 pixels font size Specific measurements such as 100 pixels padding top and 24 pixels font size are mentioned for creating a responsive web design.', 'Importance of maintaining space around text for mobile optimization The speaker emphasizes the importance of adding padding to prevent the letters from touching the sides of the phone on a mobile device, ensuring a visually appealing and mature design.']}, {'end': 2561.89, 'start': 2295.189, 'title': 'Media query and responsive design', 'summary': 'Demonstrates the use of media queries to create a responsive design, focusing on a max width of 650 pixels and adjusting the layout of elements accordingly.', 'duration': 266.701, 'highlights': ['The chapter discusses the implementation of a media query with a focus on a max width of 650 pixels to adjust the layout of elements, ensuring responsiveness.', 'The transcript emphasizes the use of CSS properties such as display, text align, background position, width, and margin to achieve the desired layout adjustments for different screen sizes.', 'It showcases the iterative process of adjusting the design to ensure the header stays at the top, the bottom elements collapse down, and the face and four grid elements are effectively centered and spaced out for optimal responsiveness.']}], 'duration': 552.265, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL42009625.jpg', 'highlights': ['Specific measurements such as 100 pixels padding top and 24 pixels font size are mentioned for creating a responsive web design.', 'The chapter discusses the implementation of a media query with a focus on a max width of 650 pixels to adjust the layout of elements, ensuring responsiveness.', 'The transcript emphasizes the use of CSS properties such as display, text align, background position, width, and margin to achieve the desired layout adjustments for different screen sizes.', 'Importance of maintaining space around text for mobile optimization The speaker emphasizes the importance of adding padding to prevent the letters from touching the sides of the phone on a mobile device, ensuring a visually appealing and mature design.']}, {'end': 3083.384, 'segs': [{'end': 2592.288, 'src': 'embed', 'start': 2561.89, 'weight': 0, 'content': [{'end': 2570.296, 'text': "let's jump down now to the next section that i haven't even written a markup for and write that markup, the skills markup.", 'start': 2561.89, 'duration': 8.406}, {'end': 2574.458, 'text': 'So in the HTML, I have the skills lockup outlined here.', 'start': 2570.376, 'duration': 4.082}, {'end': 2581.822, 'text': 'I want to make a div called skill unit.', 'start': 2574.478, 'duration': 7.344}, {'end': 2592.288, 'text': "And inside there, I'll have my div class skill label.", 'start': 2584.784, 'duration': 7.504}], 'summary': 'Creating a new section with skills markup in html.', 'duration': 30.398, 'max_score': 2561.89, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL42561890.jpg'}, {'end': 2687.845, 'src': 'embed', 'start': 2643.539, 'weight': 1, 'content': [{'end': 2645, 'text': 'Now I wanna get eight of these guys.', 'start': 2643.539, 'duration': 1.461}, {'end': 2651.021, 'text': 'One, two, three, four, five, six, seven, eight.', 'start': 2645.22, 'duration': 5.801}, {'end': 2653.562, 'text': "That's a lot of skill units, but that's okay.", 'start': 2651.581, 'duration': 1.981}, {'end': 2655.562, 'text': 'We got a lot of skills.', 'start': 2654.622, 'duration': 0.94}, {'end': 2658.612, 'text': 'The first one is communication.', 'start': 2656.972, 'duration': 1.64}, {'end': 2665.574, 'text': 'Second one is organization.', 'start': 2662.033, 'duration': 3.541}, {'end': 2679.798, 'text': "Third one, is that spot right? Don't Google it.", 'start': 2672.816, 'duration': 6.982}, {'end': 2680.679, 'text': "I don't want to Google it.", 'start': 2679.838, 'duration': 0.841}, {'end': 2687.845, 'text': 'Yeah Third one is learning.', 'start': 2681.819, 'duration': 6.026}], 'summary': 'The speaker aims to acquire eight individuals with various skills, including communication, organization, and learning.', 'duration': 44.306, 'max_score': 2643.539, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL42643539.jpg'}, {'end': 2792.171, 'src': 'embed', 'start': 2766.977, 'weight': 2, 'content': [{'end': 2777.562, 'text': "it shows that it shows the potential employer or potential client that you're thinking on a little higher plane, right?", 'start': 2766.977, 'duration': 10.585}, {'end': 2780.104, 'text': "I'm not talking about the specific skills.", 'start': 2778.063, 'duration': 2.041}, {'end': 2785.887, 'text': "Like, do you think that your employer cares if you're good at Photoshop? No, does not care.", 'start': 2780.124, 'duration': 5.763}, {'end': 2792.171, 'text': "The employer cares if you're good at understanding users and giving them what they need.", 'start': 2786.528, 'duration': 5.643}], 'summary': 'Emphasize understanding users over specific skills; e.g. photoshop.', 'duration': 25.194, 'max_score': 2766.977, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL42766977.jpg'}, {'end': 2857.027, 'src': 'embed', 'start': 2836.68, 'weight': 3, 'content': [{'end': 2846.844, 'text': 'The important things are things like, are you able to learn quickly? Are you able to organize yourself? and be organized by other people.', 'start': 2836.68, 'duration': 10.164}, {'end': 2850.265, 'text': 'Are you able to communicate with teams and work efficiently?', 'start': 2847.204, 'duration': 3.061}, {'end': 2851.685, 'text': 'Are you able to?', 'start': 2850.425, 'duration': 1.26}, {'end': 2852.526, 'text': 'you know plan?', 'start': 2851.685, 'duration': 0.841}, {'end': 2855.387, 'text': 'And I covered the technical things by.', 'start': 2853.146, 'duration': 2.241}, {'end': 2857.027, 'text': 'yes, I can also do visual design.', 'start': 2855.387, 'duration': 1.64}], 'summary': 'Seeking a candidate who can learn quickly, organize, communicate, work efficiently, plan, and handle visual design.', 'duration': 20.347, 'max_score': 2836.68, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL42836680.jpg'}], 'start': 2561.89, 'title': 'Elevating skill set', 'summary': 'Covers creating skills markup in html, including div structure and units for various skills, with a focus on communication, organization, and learning. it also discusses the importance of presenting a more mature and elevated skill set by focusing on higher-level abilities to potential employers or clients.', 'chapters': [{'end': 2687.845, 'start': 2561.89, 'title': 'Creating skills markup in html', 'summary': 'Details the creation of skills markup in html, including the div structure and the number of units for various skills, with a focus on communication, organization, and learning.', 'duration': 125.955, 'highlights': ['The chapter focuses on creating a skills markup in HTML, including the div structure and the number of units for various skills.', 'It mentions the intention to create a div called skill unit and div class skill label, followed by the idea to use div class skill icons and write spans for ten units.', 'The chapter also discusses the plan to have eight units for different skills, particularly emphasizing communication, organization, and learning.']}, {'end': 3083.384, 'start': 2690.246, 'title': 'Elevating your skill set', 'summary': 'Discusses the importance of presenting a more mature and elevated skill set by focusing on higher-level abilities, such as understanding users, communicating effectively, and organizing work efficiently, rather than specific technical skills, to potential employers or clients.', 'duration': 393.138, 'highlights': ["Focusing on higher-level abilities, such as understanding users and communicating effectively, is more important than specific technical skills to potential employers or clients. The employer cares if you're good at understanding users and giving them what they need. The employer cares if you're good at communicating with his team right?", "Presenting a more mature and elevated skill set by emphasizing higher-level abilities can demonstrate a higher level of thinking to potential employers or clients. It shows the potential employer or potential client that you're thinking on a little higher plane. It shows that you're more grown up and mature.", 'The importance of focusing on abilities like learning quickly, organizing work efficiently, and communicating with teams, rather than specific technical skills, especially as one gains experience in the field. The important things are things like, are you able to learn quickly? Are you able to organize yourself? and be organized by other people. Are you able to communicate with teams and work efficiently?']}], 'duration': 521.494, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL42561890.jpg', 'highlights': ['The chapter focuses on creating a skills markup in HTML, including the div structure and the number of units for various skills.', 'The chapter also discusses the plan to have eight units for different skills, particularly emphasizing communication, organization, and learning.', 'Focusing on higher-level abilities, such as understanding users and communicating effectively, is more important than specific technical skills to potential employers or clients.', 'The importance of focusing on abilities like learning quickly, organizing work efficiently, and communicating with teams, rather than specific technical skills, especially as one gains experience in the field.']}, {'end': 4020.225, 'segs': [{'end': 3130.928, 'src': 'embed', 'start': 3083.464, 'weight': 3, 'content': [{'end': 3085.185, 'text': "I don't know what's up with that, YouTube, but whatever.", 'start': 3083.464, 'duration': 1.721}, {'end': 3088.226, 'text': "So we're floating left, and.", 'start': 3085.925, 'duration': 2.301}, {'end': 3094.837, 'text': 'I have these skill units here, the skill icons.', 'start': 3090.535, 'duration': 4.302}, {'end': 3098.879, 'text': "So let's make a skill icon.", 'start': 3095.257, 'duration': 3.622}, {'end': 3109.965, 'text': 'Each span is going to be display inline block.', 'start': 3103.302, 'duration': 6.663}, {'end': 3128.226, 'text': "And the size of this skill icon, I think, is going to be, let's say, 14 pixels and margin.", 'start': 3118.579, 'duration': 9.647}, {'end': 3130.067, 'text': "Actually, let's not do the margin.", 'start': 3128.246, 'duration': 1.821}, {'end': 3130.928, 'text': 'I want to show you something.', 'start': 3130.087, 'duration': 0.841}], 'summary': 'Discussion on creating skill icons for youtube with specific size and display properties.', 'duration': 47.464, 'max_score': 3083.464, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL43083464.jpg'}, {'end': 3182.272, 'src': 'heatmap', 'start': 3138.113, 'weight': 0.792, 'content': [{'end': 3140.834, 'text': "They're all going to share the same baseline, but they're going to be stacking inline.", 'start': 3138.113, 'duration': 2.721}, {'end': 3143.136, 'text': "They're not going to be doing like this like you'd expect.", 'start': 3141.175, 'duration': 1.961}, {'end': 3145.578, 'text': "Let's put the background.", 'start': 3143.696, 'duration': 1.882}, {'end': 3169.037, 'text': "background color as, what's the background color? Background color? Yeah, it means background color, right? Okay, so this is interesting.", 'start': 3148.935, 'duration': 20.102}, {'end': 3173.685, 'text': 'So remember, remember here where i broke the line.', 'start': 3169.157, 'duration': 4.528}, {'end': 3175.066, 'text': "that's what this break is for.", 'start': 3173.685, 'duration': 1.381}, {'end': 3182.272, 'text': "so there's there's like five 15 pixel icons here and five here, and then they're actually responding to this markup.", 'start': 3175.066, 'duration': 7.206}], 'summary': 'Styling will be uniform with inline stacking, using 15-pixel icons and responsive markup.', 'duration': 44.159, 'max_score': 3138.113, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL43138113.jpg'}, {'end': 3275.339, 'src': 'embed', 'start': 3214.265, 'weight': 4, 'content': [{'end': 3217.306, 'text': 'And scale icons, margin, bottom.', 'start': 3214.265, 'duration': 3.041}, {'end': 3229.295, 'text': 'How big is this? 30.', 'start': 3218.867, 'duration': 10.428}, {'end': 3235.259, 'text': 'Cool Now I can go over here to my spans and give them a margin.', 'start': 3229.295, 'duration': 5.964}, {'end': 3240.041, 'text': 'Margin right of 2 pixels.', 'start': 3238.08, 'duration': 1.961}, {'end': 3243.103, 'text': "That's not how you do margin right.", 'start': 3242.043, 'duration': 1.06}, {'end': 3244.044, 'text': 'There you go.', 'start': 3243.584, 'duration': 0.46}, {'end': 3251.568, 'text': 'And I want them to be border radius 50%.', 'start': 3247.766, 'duration': 3.802}, {'end': 3255.511, 'text': 'So I want them to be cool little circles.', 'start': 3251.568, 'duration': 3.943}, {'end': 3275.339, 'text': 'I want to put the pseudo-element of after in here by saying and colon after content nothing display block size.', 'start': 3256.698, 'duration': 18.641}], 'summary': 'Styling elements with a 30px scale, 2px margin right, and 50% border radius to create cool circles.', 'duration': 61.074, 'max_score': 3214.265, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL43214265.jpg'}, {'end': 3347.282, 'src': 'heatmap', 'start': 3289.467, 'weight': 0.846, 'content': [{'end': 3306.58, 'text': 'And color or background white border radius is going to be a circle, so 50%.', 'start': 3289.467, 'duration': 17.113}, {'end': 3309.041, 'text': 'and margin two pixels.', 'start': 3306.58, 'duration': 2.461}, {'end': 3315.202, 'text': 'Okay, now this should create a little white dot in the middle of these dots to create the illusion of a circle.', 'start': 3309.761, 'duration': 5.441}, {'end': 3316.683, 'text': 'Yay, we win.', 'start': 3315.803, 'duration': 0.88}, {'end': 3335.688, 'text': "So why do I feel like I haven't won? Put a little bit of space between two pixels, zero and 30, okay.", 'start': 3316.703, 'duration': 18.985}, {'end': 3337.776, 'text': 'Yeah, that looks nice.', 'start': 3337.076, 'duration': 0.7}, {'end': 3339.417, 'text': 'And then I want to increase actually.', 'start': 3337.877, 'duration': 1.54}, {'end': 3347.282, 'text': 'I want to put the margin on the actual units here.', 'start': 3339.437, 'duration': 7.845}], 'summary': 'Styling created a white dot in the middle, margin adjusted to 2 pixels.', 'duration': 57.815, 'max_score': 3289.467, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL43289467.jpg'}, {'end': 3553.266, 'src': 'embed', 'start': 3516.171, 'weight': 1, 'content': [{'end': 3518.453, 'text': "And here's how you write a for loop in SAS.", 'start': 3516.171, 'duration': 2.282}, {'end': 3523.358, 'text': "So this is formatted for SCSS, but we won't hold it against them.", 'start': 3519.374, 'duration': 3.984}, {'end': 3526.842, 'text': "It's just what the popular kids want.", 'start': 3524.619, 'duration': 2.223}, {'end': 3532.318, 'text': "We'll just format this quickly for Sass.", 'start': 3529.437, 'duration': 2.881}, {'end': 3544.082, 'text': "Okay, so from 1 through 10, i, skill dash whatever number it's on, and then this right here, span.", 'start': 3532.618, 'duration': 11.464}, {'end': 3553.266, 'text': 'And then this needs to be the number that it is on.', 'start': 3549.925, 'duration': 3.341}], 'summary': 'Demonstrates writing a for loop in sas for 1 through 10 with span tags.', 'duration': 37.095, 'max_score': 3516.171, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL43516171.jpg'}, {'end': 3665.048, 'src': 'embed', 'start': 3642.471, 'weight': 7, 'content': [{'end': 3650.495, 'text': 'What more do we need than something that already works? But what if we made a placeholder out of this, and then we were able to.', 'start': 3642.471, 'duration': 8.024}, {'end': 3652.94, 'text': 'to make this a little bit more dry.', 'start': 3651.519, 'duration': 1.421}, {'end': 3653.56, 'text': "Let's try that.", 'start': 3653, 'duration': 0.56}, {'end': 3656.562, 'text': "So I'll go over to my placeholders.", 'start': 3653.62, 'duration': 2.942}, {'end': 3663.527, 'text': "Actually, I'll keep the placeholder in line because it's very unique situation and it's not good global selector.", 'start': 3658.584, 'duration': 4.943}, {'end': 3665.048, 'text': 'I just want to condense this a little bit more.', 'start': 3663.567, 'duration': 1.481}], 'summary': 'Exploring the potential of using a placeholder to improve a unique situation.', 'duration': 22.577, 'max_score': 3642.471, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL43642471.jpg'}, {'end': 3747.252, 'src': 'heatmap', 'start': 3700.55, 'weight': 0.725, 'content': [{'end': 3702.831, 'text': 'I wonder, all right, hold on to your butts.', 'start': 3700.55, 'duration': 2.281}, {'end': 3703.472, 'text': "Let's see what we got.", 'start': 3702.871, 'duration': 0.601}, {'end': 3709.193, 'text': 'Haha, look at this.', 'start': 3707.591, 'duration': 1.602}, {'end': 3712.758, 'text': "It's all those selectors stacked upon each other.", 'start': 3710.295, 'duration': 2.463}, {'end': 3719.468, 'text': 'And then just one CSS property of the background and our background color.', 'start': 3712.778, 'duration': 6.69}, {'end': 3722.852, 'text': 'So what this does is it gives us like a really tight markup.', 'start': 3719.888, 'duration': 2.964}, {'end': 3724.054, 'text': 'So So some people.', 'start': 3722.892, 'duration': 1.162}, {'end': 3733.506, 'text': "Okay, let me just address some people, you guys, who say that they don't like SAS because you can't control the output, and they like I like to be,", 'start': 3724.875, 'duration': 8.631}, {'end': 3734.968, 'text': 'I like to be in control of the output.', 'start': 3733.506, 'duration': 1.462}, {'end': 3738.132, 'text': 'Okay, number one, SAS is not going anywhere.', 'start': 3734.988, 'duration': 3.144}, {'end': 3739.133, 'text': 'Deal with it.', 'start': 3738.652, 'duration': 0.481}, {'end': 3740.014, 'text': "It's here to stay.", 'start': 3739.253, 'duration': 0.761}, {'end': 3741.356, 'text': 'So you better get on board.', 'start': 3740.154, 'duration': 1.202}, {'end': 3747.252, 'text': "Or like you're going to be behind and you're going to you know, wish that you had gotten on board earlier.", 'start': 3743.567, 'duration': 3.685}], 'summary': 'Sas provides tight markup and is here to stay, so get on board earlier.', 'duration': 46.702, 'max_score': 3700.55, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL43700550.jpg'}, {'end': 3851.743, 'src': 'embed', 'start': 3807.976, 'weight': 0, 'content': [{'end': 3809.896, 'text': 'Visual design, skill level is 5, 4, 5.', 'start': 3807.976, 'duration': 1.92}, {'end': 3812.657, 'text': 'Skill level of UX design is 8.', 'start': 3809.896, 'duration': 2.761}, {'end': 3815.117, 'text': 'And programming skill is.', 'start': 3812.657, 'duration': 2.46}, {'end': 3829.969, 'text': "or a nine, let's go six for variety.", 'start': 3827.287, 'duration': 2.682}, {'end': 3832.19, 'text': 'Now refresh.', 'start': 3831.11, 'duration': 1.08}, {'end': 3843.077, 'text': "Oh, yeah, we have a really cool like stylized indicator of where we are at in the specific departments that we've already alluded to.", 'start': 3832.951, 'duration': 10.126}, {'end': 3845.259, 'text': "Let's add a media query here.", 'start': 3843.097, 'duration': 2.162}, {'end': 3851.743, 'text': 'At media screen.', 'start': 3847.04, 'duration': 4.703}], 'summary': 'Visual design skill level is 5, 4, 5. ux design skill level is 8. programming skill varies from 6 to 9.', 'duration': 43.767, 'max_score': 3807.976, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL43807976.jpg'}, {'end': 3904.973, 'src': 'heatmap', 'start': 3853.084, 'weight': 1, 'content': [{'end': 3868.044, 'text': 'And paren max width equals, what did I say? Four something? 540? 541 pixels.', 'start': 3853.084, 'duration': 14.96}, {'end': 3889.297, 'text': 'Take this skill lockup and make the width be What? 270.', 'start': 3871.205, 'duration': 18.092}, {'end': 3898.006, 'text': "Exactly And it's already centered, so there should be just a nice line of these things as soon as this gets any smaller than it is.", 'start': 3889.297, 'duration': 8.709}, {'end': 3898.907, 'text': 'Watch this.', 'start': 3898.286, 'duration': 0.621}, {'end': 3900.609, 'text': 'Boop There we go.', 'start': 3899.347, 'duration': 1.262}, {'end': 3904.973, 'text': "So when that's on your mobile phone, it'll look like just a nice column of your.", 'start': 3901.169, 'duration': 3.804}], 'summary': 'Set the maximum width to 541 pixels and the skill lockup width to 270 pixels, ensuring a nice column on mobile phones.', 'duration': 51.889, 'max_score': 3853.084, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL43853084.jpg'}, {'end': 3994.525, 'src': 'embed', 'start': 3963.061, 'weight': 5, 'content': [{'end': 3966.124, 'text': 'If you have any questions like you do, just leave them in the comments down below.', 'start': 3963.061, 'duration': 3.063}, {'end': 3969.987, 'text': 'I try to answer every comment that comes my way.', 'start': 3966.204, 'duration': 3.783}, {'end': 3972.79, 'text': "While we're still small, I can do that.", 'start': 3971.369, 'duration': 1.421}, {'end': 3979.035, 'text': 'And then check out github.com slash devtips to download these files.', 'start': 3972.97, 'duration': 6.065}, {'end': 3982.999, 'text': 'And please, if you do have fun with these videos, if you like it, if this is.', 'start': 3979.456, 'duration': 3.543}, {'end': 3989.522, 'text': "If this is what you're excited about, share it with your friends, please, and share it with everybody else, like your groups,", 'start': 3983.579, 'duration': 5.943}, {'end': 3994.525, 'text': "and you know you're on Facebook or whatever Twitter that you think will be interested in this,", 'start': 3989.522, 'duration': 5.003}], 'summary': 'Encourages viewers to comment, share, and download files from github.com/devtips.', 'duration': 31.464, 'max_score': 3963.061, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL43963061.jpg'}], 'start': 3083.464, 'title': 'Enhancing web development skills', 'summary': 'Covers styling skill icons using inline blocks, addressing bugs and solutions, using sass for dynamic styling with a focus on code efficiency, and enhancing web development skills with quantifiable ratings in various aspects and creating responsive designs to encourage audience engagement.', 'chapters': [{'end': 3356.068, 'start': 3083.464, 'title': 'Styling skill icons with inline blocks', 'summary': 'Explains the process of styling skill icons using inline blocks, addressing a bug with inline blocks causing gaps, and providing solutions to fix it by adjusting the font size and margins, resulting in well-spaced skill icons.', 'duration': 272.604, 'highlights': ['The process of styling skill icons using inline blocks and addressing a bug with inline blocks causing gaps is explained, with solutions provided to fix it by adjusting the font size and margins, resulting in well-spaced skill icons.', 'The demonstration of using CSS properties such as display inline block, background color, and margin to achieve the desired styling of skill icons is provided.', 'The explanation of creating cool little circles for the skill icons by applying CSS properties such as border radius, pseudo-elements, and margin to achieve the illusion of circles is presented.']}, {'end': 3758.906, 'start': 3357.313, 'title': 'Using sass for dynamic styling', 'summary': 'Discusses using sass to dynamically create and style multiple selectors based on a rating system from 1 to 10, with a focus on optimizing code efficiency and control over output.', 'duration': 401.593, 'highlights': ['Using Sass for dynamic selector creation and styling based on a rating system from 1 to 10 The chapter explores using Sass to dynamically generate and style selectors based on a 1 to 10 rating system, optimizing code efficiency and control over output.', 'Implementing for loops in Sass for efficient selector generation The transcript discusses implementing for loops in Sass to efficiently generate selectors for each rating from 1 to 10, showcasing a method to optimize code structure and reduce redundancy.', 'Demonstrating the use of placeholders and extends in Sass for streamlined code The chapter demonstrates the use of placeholders and extends in Sass to streamline and condense code, showcasing a method to create a tight markup and efficiently manage CSS output.']}, {'end': 4020.225, 'start': 3758.926, 'title': 'Enhancing skills through web development', 'summary': 'Discusses applying different skill levels to various aspects of web development, such as communication, organization, learning, teaching, planning, visual design, ux design, and programming, with quantifiable ratings. additionally, it showcases the process of creating a responsive design and encourages audience engagement and sharing.', 'duration': 261.299, 'highlights': ['The speaker assigns quantifiable skill levels to various aspects of web development, such as communication, organization, learning, teaching, planning, visual design, UX design, and programming, providing insights into his proficiency in each area. The speaker rates his skills in communication, organization, learning, teaching, planning, visual design, UX design, and programming with specific numerical values, offering a clear view of his proficiency in these areas.', 'The speaker demonstrates the process of making a design responsive by incorporating media queries and adjusting the layout for mobile devices, showcasing the practical application of web development skills. The speaker showcases the process of making a design responsive by incorporating media queries and adjusting the layout for mobile devices, demonstrating a practical application of web development skills.', 'The speaker encourages audience engagement by inviting questions and comments, providing a link to download the files, and urging viewers to share the content to reach a wider audience, emphasizing the importance of community involvement in web development. The speaker encourages audience engagement by inviting questions and comments, providing a link to download the files, and urging viewers to share the content, emphasizing the importance of community involvement in web development.']}], 'duration': 936.761, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nZoUA-98fL4/pics/nZoUA-98fL43083464.jpg', 'highlights': ['The speaker rates his skills in communication, organization, learning, teaching, planning, visual design, UX design, and programming with specific numerical values, offering a clear view of his proficiency in these areas.', 'The chapter explores using Sass to dynamically generate and style selectors based on a 1 to 10 rating system, optimizing code efficiency and control over output.', 'The speaker demonstrates the process of making a design responsive by incorporating media queries and adjusting the layout for mobile devices, demonstrating a practical application of web development skills.', 'The demonstration of using CSS properties such as display inline block, background color, and margin to achieve the desired styling of skill icons is provided.', 'The explanation of creating cool little circles for the skill icons by applying CSS properties such as border radius, pseudo-elements, and margin to achieve the illusion of circles is presented.', 'The speaker encourages audience engagement by inviting questions and comments, providing a link to download the files, and urging viewers to share the content, emphasizing the importance of community involvement in web development.', 'Implementing for loops in Sass for efficient selector generation The transcript discusses implementing for loops in Sass to efficiently generate selectors for each rating from 1 to 10, showcasing a method to optimize code structure and reduce redundancy.', 'The chapter demonstrates the use of placeholders and extends in Sass to streamline and condense code, showcasing a method to create a tight markup and efficiently manage CSS output.', 'The process of styling skill icons using inline blocks and addressing a bug with inline blocks causing gaps is explained, with solutions provided to fix it by adjusting the font size and margins, resulting in well-spaced skill icons.']}], 'highlights': ['The series covers important aspects such as empathy in design, architecture mapping, visual design, and coding using Jekyll for creating a professional responsive portfolio website.', 'The videos in the series provide comprehensive guidance on creating a professional responsive portfolio website from start to finish.', "The development of the about section involves the incorporation of headshots, icons of personal interests, a value proposition, and skill bar graphs, catering to the common but essential features needed for freelancers' websites and portfolios.", 'The inclusion of visual design assets in the GitHub repo allows for free access to the Photoshop document used to create the website, enhancing accessibility and flexibility for users.', 'The use of classes and variables for consistent theme development is highlighted, aiming to allow quick changes with dramatic results throughout the site.', 'Transparent pixels are trimmed, resulting in a significant decrease in image size from 60-something kilobytes to 13 kilobytes.', "The chapter emphasizes resolving the 'display flex' problem.", 'Specific measurements such as 100 pixels padding top and 24 pixels font size are mentioned for creating a responsive web design.', 'The speaker rates his skills in communication, organization, learning, teaching, planning, visual design, UX design, and programming with specific numerical values, offering a clear view of his proficiency in these areas.', 'The demonstration of using CSS properties such as display inline block, background color, and margin to achieve the desired styling of skill icons is provided.']}