title
The 2023 Frontend Development Crash Course - Learn HTML & CSS

description
https://bit.ly/3GGV7Y6 👈 Take my Interactive CSS Course. Use "UI2023" for 23% Off! -- Today, I'm going to show you exactly how to take the UI design we created in the 2023 UI/UX design crash course video (https://youtu.be/QwSN4n2sjR8) and make it a working reality in the browser with HTML and CSS. You're going to learn about the fundamentals of HTML and CSS, in order to create websites and layouts. Codepen demo: https://codepen.io/designcourse/pen/ExpNjxQ Project files: https://coursetro.s3.amazonaws.com/stuff/fauxica.zip Figma design document: https://www.figma.com/community/file/1192839712389547623 A few of the things you will learn in this video: - Basic HTML & CSS Anatomy - Structuring HTML - CSS Flexbox & the CSS Grid - CSS Transitions & Animations - And much more.. 0:00 - Intro 0:38 - HTML & CSS Anatomy 5:49 - The Code Editor 7:47 - Getting Started with HTML 12:51 - HTML Navbar 28:45 - HTML Hero Section 50:16 - CSS Font Size 62.5% 54:32 - CSS Navbar 1:20:18 - CSS Hero (Left Column) 1:40:20 - CSS Hero (Right Column) 1:54:30 - CSS Animations 2:08:40 - Final Thoughts Let's get started! #frontend #html #css - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS! Learn UI/UX: https://designcourse.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Designcourse.com. Come to my discord server or add me on social media and say Hi!

detail
{'title': 'The 2023 Frontend Development Crash Course - Learn HTML & CSS', 'heatmap': [{'end': 1633.303, 'start': 1549.4, 'weight': 0.709}, {'end': 2335.525, 'start': 2252.157, 'weight': 0.776}, {'end': 3029.692, 'start': 2951.936, 'weight': 0.81}, {'end': 3576.958, 'start': 3488.937, 'weight': 0.929}, {'end': 4127.39, 'start': 4038.192, 'weight': 0.756}, {'end': 5285.703, 'start': 4814.119, 'weight': 0.751}, {'end': 5525.143, 'start': 5438.157, 'weight': 0.709}, {'end': 5671.819, 'start': 5592.523, 'weight': 0.702}, {'end': 5828.461, 'start': 5747.629, 'weight': 0.744}, {'end': 6066.234, 'start': 5902.441, 'weight': 0.831}, {'end': 6214.467, 'start': 6134.956, 'weight': 0.836}, {'end': 6371.159, 'start': 6284.178, 'weight': 0.866}, {'end': 6526.858, 'start': 6445.613, 'weight': 0.958}, {'end': 6761.421, 'start': 6673.767, 'weight': 0.9}, {'end': 7073.588, 'start': 6912.421, 'weight': 0.778}, {'end': 7384.597, 'start': 7302.961, 'weight': 0.914}], 'summary': 'Learn the 2023 frontend dev crash course covering html & css basics, visual studio code usage, html markup, css styling, figma prototype conversion, web design techniques, custom underlines, hero section design, styling h1 & subheading elements, and css design & animation.', 'chapters': [{'end': 340.497, 'segs': [{'end': 37.715, 'src': 'embed', 'start': 0.069, 'weight': 0, 'content': [{'end': 3.713, 'text': 'Welcome everybody to the 2023 front end development crash course.', 'start': 0.069, 'duration': 3.644}, {'end': 8.538, 'text': "We're going to utilize HTML and CSS to create this layout in the browser.", 'start': 4.133, 'duration': 4.405}, {'end': 15.505, 'text': "You're going to learn the very basics in a crash course format so that you can decide for yourself if front end development is for you.", 'start': 9.099, 'duration': 6.406}, {'end': 22.389, 'text': 'now. in my previous crash course video, i showed you how to design this very layout as a ui ux designer.', 'start': 16.306, 'duration': 6.083}, {'end': 26.571, 'text': 'so if you want to start from absolute scratch, watch that video first.', 'start': 22.389, 'duration': 4.182}, {'end': 33.293, 'text': 'and finally, should you really want to learn more about building awesome layouts and want a more interactive approach from the ground up,', 'start': 26.571, 'duration': 6.722}, {'end': 37.715, 'text': 'definitely check out my interactive css course at designcourse.com.', 'start': 33.293, 'duration': 4.422}], 'summary': '2023 front end development crash course using html and css to teach basics in a crash course format.', 'duration': 37.646, 'max_score': 0.069, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ69.jpg'}, {'end': 321.406, 'src': 'embed', 'start': 292.412, 'weight': 4, 'content': [{'end': 296.653, 'text': "This is just terminology that most people don't use.", 'start': 292.412, 'duration': 4.241}, {'end': 298.554, 'text': 'But we do have properties here.', 'start': 297.454, 'duration': 1.1}, {'end': 300.615, 'text': "There's two properties, background and font size.", 'start': 298.594, 'duration': 2.021}, {'end': 304.357, 'text': "And trust me, there's a ton of properties that you can use in CSS.", 'start': 300.775, 'duration': 3.582}, {'end': 307.57, 'text': 'Next up are the values.', 'start': 305.987, 'duration': 1.583}, {'end': 317.747, 'text': 'So we have the property name with a colon with the value, and then we end that property or that particular declaration with a semicolon.', 'start': 307.75, 'duration': 9.997}, {'end': 321.406, 'text': 'And then finally, we also have units.', 'start': 318.485, 'duration': 2.921}], 'summary': 'Css involves using properties with various values and units.', 'duration': 28.994, 'max_score': 292.412, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ292412.jpg'}], 'start': 0.069, 'title': '2023 front end dev crash course', 'summary': 'Introduces the 2023 front end development crash course, covering html and css basics in a crash course format. it also mentions a previous ui/ux crash course and an interactive css course at designcourse.com. additionally, it covers html and css basics, explaining html anatomy, purpose, and css anatomy, including selector, declaration, properties, values, and units.', 'chapters': [{'end': 37.715, 'start': 0.069, 'title': '2023 front end dev crash course', 'summary': 'Introduces the 2023 front end development crash course, covering html and css basics in a crash course format, aimed at helping individuals decide on pursuing front end development; also mentions a previous ui/ux crash course and an interactive css course at designcourse.com.', 'duration': 37.646, 'highlights': ['The chapter introduces the 2023 front end development crash course', 'It covers HTML and CSS basics in a crash course format', 'The crash course is aimed at helping individuals decide on pursuing front end development', 'Mentions a previous UI/UX crash course', 'Promotes an interactive CSS course at designcourse.com']}, {'end': 340.497, 'start': 37.715, 'title': 'Html and css basics', 'summary': 'Covers the basics of html and css, explaining html anatomy, purpose, and css anatomy, including selector, declaration, properties, values, and units.', 'duration': 302.782, 'highlights': ['HTML is hypertext markup language, used to structure a layout with various elements and attributes. HTML is explained as hypertext markup language, used to structure a layout with various elements, attributes, and self-closing elements, and to account for layout components.', 'CSS includes selector, declaration, properties, values, and units for styling HTML elements. CSS anatomy is detailed, including selector for specifying HTML elements, declaration with properties and values, and units for styling.']}], 'duration': 340.428, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ69.jpg', 'highlights': ['Introduces the 2023 front end development crash course', 'Covers HTML and CSS basics in a crash course format', 'Mentions a previous UI/UX crash course', 'Promotes an interactive CSS course at designcourse.com', 'Explains HTML anatomy, purpose, and CSS anatomy including selector, declaration, properties, values, and units']}, {'end': 1342.203, 'segs': [{'end': 397.875, 'src': 'embed', 'start': 366.044, 'weight': 0, 'content': [{'end': 372.987, 'text': "This is a free code editor from Microsoft and it's also the most popular and has been for several years now at least.", 'start': 366.044, 'duration': 6.943}, {'end': 380.462, 'text': "And so depending on your OS, you're going to download the software package, install it, and then run it.", 'start': 373.527, 'duration': 6.935}, {'end': 384.541, 'text': "And then once you run it, you'll see something like this.", 'start': 381.063, 'duration': 3.478}, {'end': 387.725, 'text': 'Now your color scheme might be different, no big deal.', 'start': 384.922, 'duration': 2.803}, {'end': 397.875, 'text': "But over here, we can see that we have this thing called Foxica, which is the name of the fictional service that we're designing a landing page for.", 'start': 388.626, 'duration': 9.249}], 'summary': "Microsoft's free code editor, most popular for several years. designing a landing page for fictional service 'foxica'.", 'duration': 31.831, 'max_score': 366.044, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ366044.jpg'}, {'end': 707.773, 'src': 'embed', 'start': 682.537, 'weight': 4, 'content': [{'end': 692.263, 'text': 'All right, now before we start writing code, another thing to pay attention to, let me get this bigger, is a couple extensions.', 'start': 682.537, 'duration': 9.726}, {'end': 702.09, 'text': "So Visual Studio Code, like Figma, if you watch the design version of this tutorial, you'll know it has plugins or extensions.", 'start': 692.524, 'duration': 9.566}, {'end': 703.211, 'text': "And that's right over here.", 'start': 702.17, 'duration': 1.041}, {'end': 705.212, 'text': 'right here in this section.', 'start': 704.231, 'duration': 0.981}, {'end': 707.773, 'text': "And we're gonna use just one.", 'start': 705.652, 'duration': 2.121}], 'summary': "Visual studio code has extensions, we'll use just one.", 'duration': 25.236, 'max_score': 682.537, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ682537.jpg'}, {'end': 854.391, 'src': 'embed', 'start': 829.495, 'weight': 1, 'content': [{'end': 837.92, 'text': 'very strange that I say that, but yes, really, when it comes to our HTML structure, just think of an analogy like this.', 'start': 829.495, 'duration': 8.425}, {'end': 845.245, 'text': 'HTML is the skeleton to the world of websites.', 'start': 838.541, 'duration': 6.704}, {'end': 845.565, 'text': 'all right?', 'start': 845.245, 'duration': 0.32}, {'end': 846.726, 'text': "It's the skeleton.", 'start': 845.786, 'duration': 0.94}, {'end': 848.187, 'text': "it's the scaffolding, all right?", 'start': 846.726, 'duration': 1.461}, {'end': 850.909, 'text': 'The meat and the visual, the skin, the aesthetics.', 'start': 848.607, 'duration': 2.302}, {'end': 854.391, 'text': "that's the CSS, and we're gonna get to that later in this video.", 'start': 850.909, 'duration': 3.482}], 'summary': 'Html is the skeleton of websites, css provides the visual aesthetics.', 'duration': 24.896, 'max_score': 829.495, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ829495.jpg'}, {'end': 943.716, 'src': 'embed', 'start': 915.36, 'weight': 2, 'content': [{'end': 922.384, 'text': "I don't have it doing it correctly right now, but you want it to stay in the center at a certain point.", 'start': 915.36, 'duration': 7.024}, {'end': 927.067, 'text': "There's equal white space on the very right and the very left as well.", 'start': 922.784, 'duration': 4.283}, {'end': 928.328, 'text': 'All right.', 'start': 927.087, 'duration': 1.241}, {'end': 940.475, 'text': "so, in order to achieve that if you kind of think about it, everything is kind of wrapped I'm gonna make this red in a big rectangle, all right?", 'start': 928.328, 'duration': 12.147}, {'end': 943.716, 'text': "so that's what that wrapper element is.", 'start': 941.574, 'duration': 2.142}], 'summary': 'The goal is to center a red rectangle with equal white space on both sides.', 'duration': 28.356, 'max_score': 915.36, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ915360.jpg'}, {'end': 1211.81, 'src': 'embed', 'start': 1181.348, 'weight': 3, 'content': [{'end': 1184.59, 'text': 'so now we have to worry about what.', 'start': 1181.348, 'duration': 3.242}, {'end': 1185.952, 'text': "what's inside the header?", 'start': 1184.59, 'duration': 1.362}, {'end': 1187.693, 'text': 'the logo all right.', 'start': 1185.952, 'duration': 1.741}, {'end': 1192.277, 'text': "so we're going to go ahead and We have to ask ourselves is the logo clickable??", 'start': 1187.693, 'duration': 4.584}, {'end': 1195.139, 'text': 'If you click the logo with your mouse, is it supposed to take you somewhere??', 'start': 1192.297, 'duration': 2.842}, {'end': 1197.04, 'text': 'Yes, it almost always should.', 'start': 1195.619, 'duration': 1.421}, {'end': 1200.663, 'text': 'People expect to be able to click the logo to be able to go back to the homepage.', 'start': 1197.5, 'duration': 3.163}, {'end': 1204.665, 'text': "If it's clickable, it needs to be the HTML A element.", 'start': 1201.323, 'duration': 3.342}, {'end': 1211.81, 'text': "I'm going to type in another little bit of Emmet, just hit A.", 'start': 1205.826, 'duration': 5.984}], 'summary': 'Ensure the logo is clickable for users to go back to the homepage.', 'duration': 30.462, 'max_score': 1181.348, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ1181348.jpg'}], 'start': 340.497, 'title': 'Html and css fundamentals', 'summary': 'Covers a crash course in html and css, emphasizing the popularity and ease of use of visual studio code. it also includes creating a landing page for foxica, using emmet abbreviations, css linking, and visual studio code extensions. additionally, it highlights the importance of structural html elements and the role of anchor elements for logos.', 'chapters': [{'end': 387.725, 'start': 340.497, 'title': 'Html and css crash course', 'summary': 'Covers the process of downloading and setting up visual studio code, a free code editor from microsoft, to write html and css for the project, emphasizing its popularity and ease of use.', 'duration': 47.228, 'highlights': ['You can download a free code editor, Visual Studio Code, from code.visualstudiocode.com, emphasizing its popularity and ease of use.', "The software package is the most popular and has been for several years, at least, and can be downloaded depending on the user's operating system.", 'After downloading and installing the software package, users can commence writing HTML and CSS for the project.', 'The chapter is a crash course that outlines general concepts and requires jumping right in.']}, {'end': 829.495, 'start': 388.626, 'title': 'Creating a landing page for foxica', 'summary': 'Covers creating a landing page for a fictional service called foxica, starting with setting up the index.html file and using emmet abbreviations to speed up the process of writing html. it also includes linking css and using visual studio code extensions like live server for real-time preview.', 'duration': 440.869, 'highlights': ['Setting up the index.html file and using Emmet abbreviations to speed up the process of writing HTML. Setting up the initial HTML file and using shortcuts like exclamation point to generate starting HTML elements.', 'Linking CSS and using Visual Studio Code extensions like Live Server for real-time preview. Demonstrating the linking of CSS and installing and using the Live Server extension in Visual Studio Code for real-time preview of the HTML file.', 'Instructions on creating a duplicate and working on the design prototype or mockup in Figma. Guidance on duplicating the design prototype and referring to it for creating the HTML structure.']}, {'end': 1342.203, 'start': 829.495, 'title': 'Structuring html and css', 'summary': 'Highlights the importance of html as the skeleton of websites, the role of wrapper and header elements, and the use of anchor elements for logos, emphasizing the necessity for structural html elements.', 'duration': 512.708, 'highlights': ['HTML is the skeleton to the world of websites, with CSS providing the aesthetics and visuals. HTML serves as the foundational structure of websites, while CSS is responsible for the visual and aesthetic aspects.', 'The wrapper element is crucial for centering and creating equal white space in HTML markup. The wrapper element plays a pivotal role in centering and maintaining equal white space, ensuring proper layout in HTML markup.', "The header element in HTML is important for semantic HTML and is used for the website's header/nav bar. The header element in HTML holds significance for semantic HTML and is utilized for the website's header/nav bar.", 'The anchor element is used for logos and should be clickable, typically directing to the homepage. The anchor element is employed for logos and should be clickable, usually leading to the homepage for user convenience.']}], 'duration': 1001.706, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ340497.jpg', 'highlights': ['Visual Studio Code is the most popular code editor, emphasizing its ease of use and popularity.', 'HTML serves as the foundational structure of websites, while CSS is responsible for the visual and aesthetic aspects.', 'The wrapper element plays a pivotal role in centering and maintaining equal white space, ensuring proper layout in HTML markup.', 'The anchor element is employed for logos and should be clickable, usually leading to the homepage for user convenience.', 'Linking CSS and using Visual Studio Code extensions like Live Server for real-time preview.']}, {'end': 2609.224, 'segs': [{'end': 1368.62, 'src': 'embed', 'start': 1342.463, 'weight': 0, 'content': [{'end': 1348.667, 'text': "So I'm getting my reference code and we just have a few, six different elements we're going to use.", 'start': 1342.463, 'duration': 6.204}, {'end': 1350.228, 'text': 'So let me zoom up.', 'start': 1349.227, 'duration': 1.001}, {'end': 1357.333, 'text': 'We have three JPEG files, and then we have three SVG files that you can see right here as well.', 'start': 1350.648, 'duration': 6.685}, {'end': 1362.936, 'text': 'Logo.svg is one of them, okay? So now we can go ahead and close that out.', 'start': 1358.033, 'duration': 4.903}, {'end': 1368.62, 'text': "And so in this case, we're not going to use actual text as our anchor text for the A element.", 'start': 1363.837, 'duration': 4.783}], 'summary': 'Using six different elements, including three jpeg files and three svg files for reference code.', 'duration': 26.157, 'max_score': 1342.463, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ1342463.jpg'}, {'end': 1633.303, 'src': 'heatmap', 'start': 1543.655, 'weight': 1, 'content': [{'end': 1549.159, 'text': "And the type of data that's present here is an unordered list, UL for short.", 'start': 1543.655, 'duration': 5.504}, {'end': 1553.863, 'text': "That's the actual name of the HTML tag, UL, enter.", 'start': 1549.4, 'duration': 4.463}, {'end': 1560.468, 'text': 'Then inside of there, we put our individual list items or LI elements.', 'start': 1554.684, 'duration': 5.784}, {'end': 1562.089, 'text': 'So we hit LI, enter.', 'start': 1560.508, 'duration': 1.581}, {'end': 1565.852, 'text': 'All right, so right now, I could type, for instance, home.', 'start': 1562.97, 'duration': 2.882}, {'end': 1570.416, 'text': "I'm gonna hit Shift-Alt and down a few times, and we could change this to products.", 'start': 1565.873, 'duration': 4.543}, {'end': 1572.618, 'text': "You don't have to follow along with this part.", 'start': 1571.337, 'duration': 1.281}, {'end': 1578.183, 'text': "And if I hit Save and I go back, we'll see we have a list, but they're not clickable.", 'start': 1572.658, 'duration': 5.525}, {'end': 1583.788, 'text': "We don't want that, right? So we have to make them clickable.", 'start': 1579.144, 'duration': 4.644}, {'end': 1587.951, 'text': 'How do we do that? We use A elements, just like this in the logo.', 'start': 1583.828, 'duration': 4.123}, {'end': 1598.913, 'text': "So inside of the li element, we put, A, enter, it's not going anywhere, so we're gonna put in the little hash sign, and then we're gonna put in home.", 'start': 1588.011, 'duration': 10.902}, {'end': 1604.774, 'text': "So now if we save and go back, you'll see it is now a clickable link.", 'start': 1598.933, 'duration': 5.841}, {'end': 1607.735, 'text': 'Now we need to do that for the other ones as well.', 'start': 1605.735, 'duration': 2}, {'end': 1618.006, 'text': "So I'm gonna go ahead and, right at the end of this line, shift alt down a few times just to replicate it.", 'start': 1609.776, 'duration': 8.23}, {'end': 1621.67, 'text': "that way we don't have to sit there typing that out forever.", 'start': 1618.006, 'duration': 3.664}, {'end': 1628.818, 'text': 'products, gallery and finally contact.', 'start': 1621.67, 'duration': 7.148}, {'end': 1633.303, 'text': 'now this is what it should look like in your browser, something similar to this.', 'start': 1628.818, 'duration': 4.485}], 'summary': 'Creating an unordered list with clickable links for home, products, gallery, and contact.', 'duration': 26.761, 'max_score': 1543.655, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ1543655.jpg'}, {'end': 1904.969, 'src': 'embed', 'start': 1874.064, 'weight': 2, 'content': [{'end': 1877.266, 'text': 'h1 is should be the most important element.', 'start': 1874.064, 'duration': 3.202}, {'end': 1886.252, 'text': 'as you go and you work through different titles or subtitles, notice and also note that you can have multiple h1 tags if you deem necessary.', 'start': 1877.266, 'duration': 8.986}, {'end': 1890.354, 'text': "so um, we're going to go ahead and specify quality apparel.", 'start': 1886.252, 'duration': 4.102}, {'end': 1897.305, 'text': "uh, without the price tag, All right, so let's save that.", 'start': 1890.354, 'duration': 6.951}, {'end': 1899.226, 'text': "Let's see what our design looks like so far.", 'start': 1897.345, 'duration': 1.881}, {'end': 1904.969, 'text': "Yep, it's ugly because there's no CSS that we've specified yet.", 'start': 1899.906, 'duration': 5.063}], 'summary': 'Emphasize h1 as the most important element. consider multiple h1 tags. specify quality apparel without price tag.', 'duration': 30.905, 'max_score': 1874.064, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ1874064.jpg'}, {'end': 2335.525, 'src': 'heatmap', 'start': 2252.157, 'weight': 0.776, 'content': [{'end': 2260.542, 'text': "Span, enter, and then we're gonna put in spring semicolon 23 collection.", 'start': 2252.157, 'duration': 8.385}, {'end': 2262.783, 'text': "So that's our first element.", 'start': 2261.702, 'duration': 1.081}, {'end': 2265.805, 'text': 'Now our next element needs to be that little arrow.', 'start': 2263.323, 'duration': 2.482}, {'end': 2269.607, 'text': 'So in that case, we have a couple options.', 'start': 2266.605, 'duration': 3.002}, {'end': 2270.688, 'text': 'We have to go back.', 'start': 2269.987, 'duration': 0.701}, {'end': 2275.752, 'text': 'We zoom up control screw wheel if you will,', 'start': 2271.687, 'duration': 4.065}, {'end': 2282.64, 'text': "and we need to make sure we're selecting this button or this arrow to make sure you hit control left click to select it.", 'start': 2275.752, 'duration': 6.888}, {'end': 2290.168, 'text': "And you'll know you've selected it if you come down here to your layers tab, and then this is highlighted right here, arrow one.", 'start': 2283.24, 'duration': 6.928}, {'end': 2295.011, 'text': 'We right click it and let me zoom up and we choose.', 'start': 2290.869, 'duration': 4.142}, {'end': 2300.754, 'text': 'we choose copy and paste as svg, because this is a svg element.', 'start': 2295.011, 'duration': 5.743}, {'end': 2303.175, 'text': "it's scalable vector graphic.", 'start': 2300.754, 'duration': 2.421}, {'end': 2309.658, 'text': 'anything created inside figma, like with design illustrations, will typically be svg, not png.', 'start': 2303.175, 'duration': 6.483}, {'end': 2314.261, 'text': "that's rastered in bitmap you don't want that and not css svg.", 'start': 2309.658, 'duration': 4.603}, {'end': 2318.723, 'text': "okay, well, once you have that copied, we're going to go ahead and just paste it.", 'start': 2314.261, 'duration': 4.462}, {'end': 2324.796, 'text': 'So look at all this stuff, this crap, rather that it spit out.', 'start': 2319.571, 'duration': 5.225}, {'end': 2325.997, 'text': "It's long.", 'start': 2325.516, 'duration': 0.481}, {'end': 2330.841, 'text': 'In order to create that, look at all this HTML up there.', 'start': 2326.637, 'duration': 4.204}, {'end': 2335.525, 'text': 'This is basically a mathematical equation that gives us that arrow.', 'start': 2330.861, 'duration': 4.664}], 'summary': 'Demonstrating copying and pasting svg elements in figma to create scalable vector graphics.', 'duration': 83.368, 'max_score': 2252.157, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ2252157.jpg'}, {'end': 2365.573, 'src': 'embed', 'start': 2336.786, 'weight': 3, 'content': [{'end': 2340.989, 'text': "And so, because it's math though, that's why it's not bitmap.", 'start': 2336.786, 'duration': 4.203}, {'end': 2348.134, 'text': "It'll never get blurry or pixelated like a blurry, ugly, like 2009 iPhone photo or something like that.", 'start': 2341.029, 'duration': 7.105}, {'end': 2354.898, 'text': "There's a couple of attributes in the SVG element that I want to get rid of, and that is the width and height attribute.", 'start': 2348.794, 'duration': 6.104}, {'end': 2357.48, 'text': "So I'm just going to left click, select both of those, hit delete.", 'start': 2354.918, 'duration': 2.562}, {'end': 2359.33, 'text': 'or backspace rather.', 'start': 2358.43, 'duration': 0.9}, {'end': 2365.573, 'text': "We're gonna leave view box, but we're gonna get rid of our XML and S.", 'start': 2360.051, 'duration': 5.522}], 'summary': 'Discussion about removing attributes from svg element.', 'duration': 28.787, 'max_score': 2336.786, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ2336786.jpg'}], 'start': 1342.463, 'title': 'Html markup and image tags', 'summary': 'Discusses adding image tags in html, such as jpeg and svg files, and creating website markup using html elements like a, nav, ul, and li. it also covers creating webpage structure with headings, paragraphs, and buttons, as well as creating svg elements, div wrapping, and html elements for a news section.', 'chapters': [{'end': 1431.364, 'start': 1342.463, 'title': 'Adding image tags in html', 'summary': 'Discusses adding image tags in html, including using jpeg and svg files, specifying source and alt attributes, and explaining their importance for accessibility and seo.', 'duration': 88.901, 'highlights': ['The chapter discusses using three JPEG files and three SVG files for adding image tags in HTML.', 'It explains the importance of the alt attribute for people with screen readers and its impact on search engine optimization (SEO).', 'It emphasizes the significance of the alt attribute in enabling screen readers to describe elements to users, contributing to better accessibility.', "The chapter mentions the use of the alt attribute for SEO purposes, enhancing the website's search engine optimization.", 'It highlights the process of specifying the source attribute to point to a file on the server or an external server for the image tag in HTML.', 'The chapter addresses the significance of using image tags in HTML as an alternative to actual text for the A element, providing a detailed explanation.']}, {'end': 1844.324, 'start': 1431.764, 'title': 'Creating website markup', 'summary': 'Explains the process of creating website markup, including the use of html elements like a, nav, ul, and li to structure the navigation and content layout.', 'duration': 412.56, 'highlights': ['The process of creating website markup involves using HTML elements like A, nav, UL, and LI to structure the navigation and content layout.', 'The A element is used to create clickable links within the navigation, while the nav element helps in structuring the data for the navigation.', 'An unordered list (UL) is utilized to contain individual list items (LI) within the navigation, allowing for easy organization of the links.', "The class 'active' is added to the associated home element to indicate the currently active page, demonstrating the use of class attributes for styling purposes."]}, {'end': 2262.783, 'start': 1846.4, 'title': 'Creating html structure for webpage', 'summary': 'Covers the creation of html elements for a webpage, including headings, paragraphs, and buttons, with a focus on the h1 element, paragraph tags, and specific classes for call-to-action buttons.', 'duration': 416.383, 'highlights': ['The H1 element is used for the most important heading and can have multiple instances if necessary, emphasizing the importance of headings in webpages.', 'Paragraph tags are essential for structuring content, along with the ability to use line breaks to improve readability and organization within the HTML.', "Creating specific classes for call-to-action buttons, such as 'primary-cta' and 'secondary-CTA', demonstrates the use of custom classes in HTML for styling and functionality."]}, {'end': 2609.224, 'start': 2263.323, 'title': 'Creating svg elements and div wrapping', 'summary': 'Covers creating svg elements and removing unnecessary attributes, while also demonstrating the creation of a div element to wrap around content, and the addition of html elements for a news section with details.', 'duration': 345.901, 'highlights': ['Creating SVG elements and removing unnecessary attributes The process involves copying and pasting an arrow as an SVG element, ensuring it is not a raster or CSS SVG, and then deleting unnecessary attributes like width and height, resulting in a scalable vector graphic.', 'Creating a div element to wrap around content The demonstration involves creating a div element to visually depict and wrap around two columns, utilizing a border to define the element, and emphasizing the necessity of having an element wrapping around the content.', "Adding HTML elements for a news section with details The creation of a news section involves utilizing div and paragraph classes to structure the content, including a paragraph for the number of employees and another for the details, such as 'we now have a workforce of over 50,000'."]}], 'duration': 1266.761, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ1342463.jpg', 'highlights': ['The chapter discusses using three JPEG files and three SVG files for adding image tags in HTML.', 'The process of creating website markup involves using HTML elements like A, nav, UL, and LI to structure the navigation and content layout.', 'The H1 element is used for the most important heading and can have multiple instances if necessary, emphasizing the importance of headings in webpages.', 'Creating SVG elements and removing unnecessary attributes The process involves copying and pasting an arrow as an SVG element, ensuring it is not a raster or CSS SVG, and then deleting unnecessary attributes like width and height, resulting in a scalable vector graphic.']}, {'end': 3292.184, 'segs': [{'end': 2820.11, 'src': 'embed', 'start': 2785.216, 'weight': 0, 'content': [{'end': 2790.16, 'text': "So inside of here, our card one, we're going to have.", 'start': 2785.216, 'duration': 4.944}, {'end': 2806.206, 'text': 'Now first I should say this right here this div element in and of itself, that is what is going to contain the whole picture, the photograph, rather.', 'start': 2792.822, 'duration': 13.384}, {'end': 2811.148, 'text': 'So we can use CSS to target that card one and give it a background image of this.', 'start': 2806.967, 'duration': 4.181}, {'end': 2817.39, 'text': 'So the next thing that we have to write then, let me duplicate this, is these white little boxes.', 'start': 2811.748, 'duration': 5.642}, {'end': 2820.11, 'text': 'All right.', 'start': 2819.81, 'duration': 0.3}], 'summary': 'Using css to add background image to card one and create white boxes.', 'duration': 34.894, 'max_score': 2785.216, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ2785216.jpg'}, {'end': 3029.692, 'src': 'heatmap', 'start': 2951.936, 'weight': 0.81, 'content': [{'end': 2956.898, 'text': "Yes, okay, so now let's go ahead and put in Foxica, let's see, sport.", 'start': 2951.936, 'duration': 4.962}, {'end': 2962.944, 'text': 'And then underneath it, we have a little paragraph, running shoes.', 'start': 2958.123, 'duration': 4.821}, {'end': 2966.065, 'text': "It's kind of like a little tag or category or something like that.", 'start': 2963.304, 'duration': 2.761}, {'end': 2969.826, 'text': "So P, and we're going to say running shoes.", 'start': 2966.425, 'duration': 3.401}, {'end': 2971.606, 'text': 'All right.', 'start': 2971.266, 'duration': 0.34}, {'end': 2975.847, 'text': 'After that, we have the price, which is off to the right in the second column.', 'start': 2972.507, 'duration': 3.34}, {'end': 2984.35, 'text': "So we'll use a paragraph, a class of product hyphen price, and we'll say 49, something like that.", 'start': 2976.308, 'duration': 8.042}, {'end': 2987.24, 'text': 'And that is it.', 'start': 2986.56, 'duration': 0.68}, {'end': 2996.024, 'text': 'So now what we do is we take left click and select that whole card card one all the way to the closing tag associated with that card card one element.', 'start': 2987.801, 'duration': 8.223}, {'end': 3003.086, 'text': 'We copy it, come outside of it, paste it, hit enter, paste it.', 'start': 2997.144, 'duration': 5.942}, {'end': 3004.447, 'text': 'So now we have three.', 'start': 3003.587, 'duration': 0.86}, {'end': 3007.268, 'text': "So we'll see one says card one.", 'start': 3005.567, 'duration': 1.701}, {'end': 3008.889, 'text': 'This one needs to change to card two.', 'start': 3007.468, 'duration': 1.421}, {'end': 3012.63, 'text': 'This one needs to change to card three.', 'start': 3010.369, 'duration': 2.261}, {'end': 3015.869, 'text': 'Hit save, and that is it.', 'start': 3014.349, 'duration': 1.52}, {'end': 3020.79, 'text': "Now, of course, you can give it other fake titles or whatever, but I'm just leaving them.", 'start': 3015.929, 'duration': 4.861}, {'end': 3026.852, 'text': 'So now if we look, we can see this is what it looks like.', 'start': 3021.591, 'duration': 5.261}, {'end': 3029.692, 'text': 'Foxica Sport, Running Shoes.', 'start': 3027.452, 'duration': 2.24}], 'summary': 'Adding three foxica sport running shoes at $49 each to the website.', 'duration': 77.756, 'max_score': 2951.936, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ2951936.jpg'}, {'end': 3244.746, 'src': 'embed', 'start': 3217.558, 'weight': 1, 'content': [{'end': 3229.301, 'text': 'And so what that conversion does, making all font sizes 62.5% means that we only have to rely on decimal places or decimal points.', 'start': 3217.558, 'duration': 11.743}, {'end': 3234.543, 'text': 'So instead of 52 pixels, we can put something like 5.2 rem units.', 'start': 3229.361, 'duration': 5.182}, {'end': 3244.746, 'text': 'So we just move the decimal place over one notch and that will give us accurate sizes based on the design that a designer created or yourself.', 'start': 3235.263, 'duration': 9.483}], 'summary': 'Converting font sizes to 62.5% allows for easier use of rem units, such as changing 52 pixels to 5.2 rem units.', 'duration': 27.188, 'max_score': 3217.558, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ3217558.jpg'}], 'start': 2609.224, 'title': 'Html markup, css styling, and figma prototype conversion', 'summary': 'Details the process of creating html markup and css styling for a website layout, including the use of div elements, classes, and css properties. it also discusses setting the font size in css to 62.5% for easier conversion from figma prototype, resulting in accurate sizes based on the design.', 'chapters': [{'end': 3026.852, 'start': 2609.224, 'title': 'Html markup and css styling', 'summary': 'Details the process of creating html markup and css styling for a website layout, including the use of div elements, classes, and css properties to achieve distinctive visual components such as background images, columns, and clickable links.', 'duration': 417.628, 'highlights': ['The chapter details the process of creating HTML markup and CSS styling for a website layout, including the use of div elements, classes, and CSS properties to achieve distinctive visual components such as background images, columns, and clickable links. It covers the process of creating HTML markup and CSS styling for a website layout, including the use of div elements, classes, and CSS properties to achieve distinctive visual components such as background images, columns, and clickable links.', 'It demonstrates the use of div elements with classes to create distinctive visual components such as background images, columns, and clickable links. The demonstration shows the use of div elements with classes to create distinctive visual components such as background images, columns, and clickable links.', 'The chapter emphasizes the use of CSS properties to target specific elements and achieve visual styling, demonstrating the application of background images, columns, and clickable links. It emphasizes the use of CSS properties to target specific elements and achieve visual styling, demonstrating the application of background images, columns, and clickable links.']}, {'end': 3292.184, 'start': 3027.452, 'title': 'Css conversion for figma prototype', 'summary': 'Discusses the purpose of setting the font size in css to 62.5% for easier conversion from figma prototype, resulting in accurate sizes based on the design and making conversions a lot easier.', 'duration': 264.732, 'highlights': ['The purpose of setting the font size in CSS to 62.5% is to make conversions from Figma prototype easier, resulting in accurate sizes based on the design and making conversions a lot easier.', 'Applying a conversion to font sizes by making all font sizes 62.5% means that instead of using pixel values, accurate sizes can be achieved by using rem units, making conversions a lot easier.', 'The body element in HTML is responsible for containing all of the HTML markup inside, and specifying its styles in CSS is a crucial step in the process.']}], 'duration': 682.96, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ2609224.jpg', 'highlights': ['The chapter details the process of creating HTML markup and CSS styling for a website layout, including the use of div elements, classes, and CSS properties to achieve distinctive visual components such as background images, columns, and clickable links.', 'The purpose of setting the font size in CSS to 62.5% is to make conversions from Figma prototype easier, resulting in accurate sizes based on the design and making conversions a lot easier.']}, {'end': 4538.605, 'segs': [{'end': 3368.683, 'src': 'embed', 'start': 3342.858, 'weight': 4, 'content': [{'end': 3347.859, 'text': 'but i typically want to remove that, so i have control over that myself.', 'start': 3342.858, 'duration': 5.001}, {'end': 3351.44, 'text': 'so margin zero, all right.', 'start': 3347.859, 'duration': 3.581}, {'end': 3351.94, 'text': 'next up.', 'start': 3351.44, 'duration': 0.5}, {'end': 3354.381, 'text': "after that we're gonna have a font family.", 'start': 3351.94, 'duration': 2.441}, {'end': 3356.281, 'text': 'now the font family we have.', 'start': 3354.381, 'duration': 1.9}, {'end': 3358.322, 'text': 'actually in our design we have two different fonts.', 'start': 3356.281, 'duration': 2.041}, {'end': 3359.837, 'text': 'We have this one.', 'start': 3359.076, 'duration': 0.761}, {'end': 3361.078, 'text': "it's called Playfair Display.", 'start': 3359.837, 'duration': 1.241}, {'end': 3364.941, 'text': "It's a nice elegant sort of serif font as it's called.", 'start': 3361.118, 'duration': 3.823}, {'end': 3368.683, 'text': 'And then we also have like this one underneath called Poppins.', 'start': 3365.601, 'duration': 3.082}], 'summary': 'The design includes two different fonts: playfair display and poppins.', 'duration': 25.825, 'max_score': 3342.858, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ3342858.jpg'}, {'end': 3440.209, 'src': 'embed', 'start': 3411.829, 'weight': 0, 'content': [{'end': 3414.631, 'text': 'Many fonts that you use, other people may not have.', 'start': 3411.829, 'duration': 2.802}, {'end': 3426.179, 'text': "So you have to include the font in your project in order for other people who don't have it inherently installed on their phones or their computers,", 'start': 3414.831, 'duration': 11.348}, {'end': 3428.741, 'text': 'for then their browser to download it essentially.', 'start': 3426.179, 'duration': 2.562}, {'end': 3435.365, 'text': 'And so Playfair Display and Poppins are two fonts that are available from Google Fonts.', 'start': 3429.261, 'duration': 6.104}, {'end': 3436.947, 'text': "So here's how that works.", 'start': 3435.946, 'duration': 1.001}, {'end': 3437.847, 'text': "I'm gonna create a new tab.", 'start': 3436.967, 'duration': 0.88}, {'end': 3440.209, 'text': "Fonts.google.com we're gonna go to.", 'start': 3438.267, 'duration': 1.942}], 'summary': 'Include fonts in project for others to download. playfair display and poppins available from google fonts.', 'duration': 28.38, 'max_score': 3411.829, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ3411829.jpg'}, {'end': 3576.958, 'src': 'heatmap', 'start': 3488.937, 'weight': 0.929, 'content': [{'end': 3501.276, 'text': "And then after you did that for Poppins, you just go back, type in Playfair, You'll see Playfair display right here, and just do regular 400.", 'start': 3488.937, 'duration': 12.339}, {'end': 3503.457, 'text': "Right here, it's the top one.", 'start': 3501.276, 'duration': 2.181}, {'end': 3511.58, 'text': 'Once you have this situation to your upper right corner, you can then, let me zoom up, click this.', 'start': 3504.617, 'duration': 6.963}, {'end': 3515.321, 'text': 'Now notice it says to embed a font.', 'start': 3513.12, 'duration': 2.201}, {'end': 3525.066, 'text': 'copy the code into the head of your HTML or, if you wanted to, you can actually import this as a style, or just take this whole right there,', 'start': 3515.321, 'duration': 9.745}, {'end': 3529.548, 'text': 'this import text right there and put it at the very top of your CSS file.', 'start': 3525.066, 'duration': 4.482}, {'end': 3532.029, 'text': "It's advisable, however, not to do that.", 'start': 3530.168, 'duration': 1.861}, {'end': 3534.05, 'text': 'Just use this one right here.', 'start': 3532.429, 'duration': 1.621}, {'end': 3536.011, 'text': "Hit this little thing that'll copy it to your clipboard.", 'start': 3534.09, 'duration': 1.921}, {'end': 3544.353, 'text': 'and we go to our HTML, we put it above our main.css file and just paste all that stuff.', 'start': 3538.069, 'duration': 6.284}, {'end': 3545.433, 'text': "There's a lot of stuff there.", 'start': 3544.373, 'duration': 1.06}, {'end': 3548.315, 'text': "Don't worry about trying to make it readable or whatever.", 'start': 3546.034, 'duration': 2.281}, {'end': 3549.256, 'text': "It's fine as is.", 'start': 3548.375, 'duration': 0.881}, {'end': 3550.696, 'text': 'So hit save and there we go.', 'start': 3549.316, 'duration': 1.38}, {'end': 3559.522, 'text': "So now other people who don't have that font will be able to use it or see the font that we intend them to see.", 'start': 3552.117, 'duration': 7.405}, {'end': 3565.093, 'text': 'All right, so after that, what is the next element? It is wrapper.', 'start': 3560.422, 'duration': 4.671}, {'end': 3567.434, 'text': 'Remember, wrapper wraps around everything.', 'start': 3565.113, 'duration': 2.321}, {'end': 3569.015, 'text': "See, it's highlighted all the way down here.", 'start': 3567.554, 'duration': 1.461}, {'end': 3571.596, 'text': "Let's create the markup for that.", 'start': 3569.935, 'duration': 1.661}, {'end': 3576.958, 'text': "I'm going to put wrapper, not warper, wrapper.", 'start': 3571.616, 'duration': 5.342}], 'summary': 'Embed playfair font in html/css for intended display.', 'duration': 88.021, 'max_score': 3488.937, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ3488937.jpg'}, {'end': 3645.031, 'src': 'embed', 'start': 3612.943, 'weight': 1, 'content': [{'end': 3616.905, 'text': 'We want white space over here to the right and the left here on desktop.', 'start': 3612.943, 'duration': 3.962}, {'end': 3631.538, 'text': "So to do that, I'm going to come back here and we're going to say there's a property called max-width and that's going to be 1200 pixels.", 'start': 3617.765, 'duration': 13.773}, {'end': 3637.507, 'text': 'Now, where did I get 1200 pixels from? I just kind of pulled it out of thin air.', 'start': 3632.299, 'duration': 5.208}, {'end': 3640.128, 'text': "No, it's actually pretty close.", 'start': 3638.628, 'duration': 1.5}, {'end': 3645.031, 'text': "It's probably very roughly close to the value that's probably over here.", 'start': 3641.049, 'duration': 3.982}], 'summary': 'Set max-width to 1200 pixels for white space on desktop.', 'duration': 32.088, 'max_score': 3612.943, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ3612943.jpg'}, {'end': 3819.991, 'src': 'embed', 'start': 3794.393, 'weight': 2, 'content': [{'end': 3806.72, 'text': "Okay So to do that, We take the element that's wrapping around both of them, header, and we say display flex.", 'start': 3794.393, 'duration': 12.327}, {'end': 3809.282, 'text': 'Now just watch what happens when I save that.', 'start': 3807.461, 'duration': 1.821}, {'end': 3812.805, 'text': "Look what's happened.", 'start': 3810.763, 'duration': 2.042}, {'end': 3816.528, 'text': 'We have our logo and now it is sitting right beside it.', 'start': 3813.386, 'duration': 3.142}, {'end': 3818.37, 'text': 'It has created two columns for us.', 'start': 3816.628, 'duration': 1.742}, {'end': 3819.991, 'text': "That's awesome.", 'start': 3819.211, 'duration': 0.78}], 'summary': 'Using display flex on the header element creates two columns for the logo and content.', 'duration': 25.598, 'max_score': 3794.393, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ3794393.jpg'}, {'end': 3954.128, 'src': 'embed', 'start': 3926.526, 'weight': 6, 'content': [{'end': 3943.104, 'text': 'well, one of the ways we can ensure that white space is there is through margin padding and also in this in our case and this is another flex box sort of property align items Center.', 'start': 3926.526, 'duration': 16.578}, {'end': 3946.205, 'text': 'so that means all the items that are found within header,', 'start': 3943.104, 'duration': 3.101}, {'end': 3954.128, 'text': "which are the a element in the nav element We're going to align them on and align items is alignment on the vertical axis.", 'start': 3946.205, 'duration': 7.923}], 'summary': 'Using margin padding and flexbox align items center to ensure white space and vertical alignment within header elements.', 'duration': 27.602, 'max_score': 3926.526, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ3926526.jpg'}, {'end': 4127.39, 'src': 'heatmap', 'start': 4004.537, 'weight': 5, 'content': [{'end': 4005.918, 'text': "And there's a lot of things you can do with it.", 'start': 4004.537, 'duration': 1.381}, {'end': 4012.299, 'text': 'Okay, now we have to work on this nav, because this is default and it looks very ugly.', 'start': 4006.938, 'duration': 5.361}, {'end': 4014.4, 'text': "We don't need these little dots and all that crap.", 'start': 4012.339, 'duration': 2.061}, {'end': 4015.88, 'text': "Don't need the underlines.", 'start': 4014.78, 'duration': 1.1}, {'end': 4017.361, 'text': "So let's get to that.", 'start': 4016.601, 'duration': 0.76}, {'end': 4027.208, 'text': 'So referring back to the HTML, we have a nav element with a ul element, unordered list, and then we have our list items inside of it.', 'start': 4018.385, 'duration': 8.823}, {'end': 4037.072, 'text': "So what we'll do first is we're going to specify and create a rule set with one property for our nav element itself.", 'start': 4028.289, 'duration': 8.783}, {'end': 4045.095, 'text': 'And that is going to be a margin of 4m units, or in other words, 40 pixels.', 'start': 4038.192, 'duration': 6.903}, {'end': 4050.685, 'text': "So if we save that, it's just gonna give us more white space around it.", 'start': 4046.86, 'duration': 3.825}, {'end': 4054.59, 'text': "It doesn't make sense as to why I did this yet, but you'll see in a second.", 'start': 4050.745, 'duration': 3.845}, {'end': 4058.295, 'text': "And I'll show you a before and after if we remove that rule set we just created.", 'start': 4054.79, 'duration': 3.505}, {'end': 4064.906, 'text': "Now after that, we're going to go ahead and target the UL, the nav UL element.", 'start': 4059.082, 'duration': 5.824}, {'end': 4069.529, 'text': "We need to get rid of these little circles because they don't exist in the original design.", 'start': 4065.006, 'duration': 4.523}, {'end': 4074.792, 'text': 'Again, as a refresher, our nav looks like this.', 'start': 4069.989, 'duration': 4.803}, {'end': 4080.856, 'text': "There's no periods, little circles, right? So that's one of the things we'll do in this rule set among others.", 'start': 4074.932, 'duration': 5.924}, {'end': 4083.257, 'text': "So we're going to take our nav UL.", 'start': 4080.916, 'duration': 2.341}, {'end': 4085.859, 'text': "So we're chaining these together right here.", 'start': 4084.098, 'duration': 1.761}, {'end': 4095.233, 'text': 'because we want to only target the unordered list that exists within the nav element,', 'start': 4088.287, 'duration': 6.946}, {'end': 4098.856, 'text': 'because there might be other multiple unordered lists in our design.', 'start': 4095.233, 'duration': 3.623}, {'end': 4102.419, 'text': "There isn't, but there could be, so we don't want to just put ul itself.", 'start': 4099.057, 'duration': 3.362}, {'end': 4107.381, 'text': 'so nav ul just is a command,', 'start': 4103.18, 'duration': 4.201}, {'end': 4116.586, 'text': 'a selector that says only select and style or apply this rule set in this css styling to unordered list that exists within nav.', 'start': 4107.381, 'duration': 9.205}, {'end': 4127.39, 'text': 'okay so, and by the way, we could have given this unordered list a class, like you know, main nav, and then we could just reference period main nav.', 'start': 4116.586, 'duration': 10.804}], 'summary': 'Optimizing navigation layout and styling for a web page.', 'duration': 50.053, 'max_score': 4004.537, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ4004537.jpg'}, {'end': 4299.509, 'src': 'embed', 'start': 4273.713, 'weight': 3, 'content': [{'end': 4278.315, 'text': "So what we're going to do is reset the margins as it's called.", 'start': 4273.713, 'duration': 4.602}, {'end': 4281.256, 'text': 'So margin zero.', 'start': 4278.695, 'duration': 2.561}, {'end': 4283.56, 'text': "We'll save that.", 'start': 4282.878, 'duration': 0.682}, {'end': 4288.511, 'text': "You're not gonna notice like a huge difference, but it actually got rid of some white space around here.", 'start': 4283.7, 'duration': 4.811}, {'end': 4289.74, 'text': 'All right.', 'start': 4289.42, 'duration': 0.32}, {'end': 4296.947, 'text': "Next up, we have to start actually styling these links because we don't want these type of underlines.", 'start': 4290.521, 'duration': 6.426}, {'end': 4299.509, 'text': "We don't want this color, this kind of purple color.", 'start': 4296.987, 'duration': 2.522}], 'summary': 'Reset margins to zero, removing white space. style links to remove underlines and change color.', 'duration': 25.796, 'max_score': 4273.713, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ4273713.jpg'}, {'end': 4425.04, 'src': 'embed', 'start': 4398.634, 'weight': 8, 'content': [{'end': 4405.839, 'text': 'Now you might be wondering something is what is the difference between REM and M??', 'start': 4398.634, 'duration': 7.205}, {'end': 4411.123, 'text': 'Like, why did I use M on our gap property, but on font size have used REM??', 'start': 4406.239, 'duration': 4.884}, {'end': 4417.556, 'text': "Well, in short, typically, most of the time, you're gonna use REM units for your font sizes.", 'start': 4411.912, 'duration': 5.644}, {'end': 4425.04, 'text': 'And when it comes to stuff like scaling, like your distance, like margin and padding and stuff like that, or border radius, you can use M.', 'start': 4418.036, 'duration': 7.004}], 'summary': 'Use rem units for font sizes and m for scaling properties like margin and padding.', 'duration': 26.406, 'max_score': 4398.634, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ4398634.jpg'}], 'start': 3292.264, 'title': 'Web design techniques', 'summary': 'Discusses customizing website design with css, creating an html layout using flexbox, and styling navigation elements. it covers changing margins, specifying font family, including google fonts, setting a max-width of 1200 pixels, using flexbox properties, and altering the appearance of links.', 'chapters': [{'end': 3559.522, 'start': 3292.264, 'title': 'Customizing website design with css', 'summary': 'Discusses customizing website design with css, including changing margin, specifying font family, and including google fonts for cross-compatibility and design consistency.', 'duration': 267.258, 'highlights': ['Including Google Fonts for cross-compatibility and design consistency The chapter explains the process of including Google Fonts such as Poppins and Playfair Display to ensure cross-compatibility and design consistency, allowing other users to see the intended font.', 'Changing margin to zero for precise control over white space The chapter emphasizes changing the margin to zero in CSS to gain control over white space, ensuring precise design layout and removing default browser margins.', 'Specifying font family for consistent type throughout the design The chapter details the process of specifying font families like Poppins and Playfair Display to ensure consistent type throughout the design, providing a cleaner font and elegant serif font for different design elements.']}, {'end': 4004.377, 'start': 3560.422, 'title': 'Html layout and flexbox', 'summary': 'Covers creating an html layout using flexbox, including setting a max-width of 1200 pixels for the wrapper and using flexbox properties like display, justify-content, and align-items to structure the layout and create white space, resulting in a centered and visually appealing design.', 'duration': 443.955, 'highlights': ['Setting max-width of 1200 pixels for the wrapper The speaker sets the max-width of the wrapper to 1200 pixels to create white space and achieve a visually appealing design on desktop.', 'Using display flex to create two columns for logo and navigation The use of display flex creates two columns for the logo and navigation elements, aligning them side by side.', 'Utilizing justify-content and align-items to create space and center elements The speaker demonstrates the use of justify-content to create space between elements and align-items to center the elements vertically, resulting in a visually appealing layout.']}, {'end': 4538.605, 'start': 4004.537, 'title': 'Styling navigation elements', 'summary': 'Covers the process of styling a navigation bar in a web page, including removing default styling, creating white space, and altering the appearance of links, with specific css properties and units used.', 'duration': 534.068, 'highlights': ['The process of styling a navigation bar in a web page is covered, including removing default styling, creating white space, and altering the appearance of links. The chapter covers the process of styling a navigation bar in a web page, including removing default styling, creating white space, and altering the appearance of links.', 'The specific CSS properties and units used for styling are explained, such as margin, text decoration, color, text transform, and font size. The specific CSS properties and units used for styling are explained, such as margin, text decoration, color, text transform, and font size.', 'Explanation of the difference between REM and M units in CSS and their appropriate use cases is provided. Explanation of the difference between REM and M units in CSS and their appropriate use cases is provided.']}], 'duration': 1246.341, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ3292264.jpg', 'highlights': ['Including Google Fonts for cross-compatibility and design consistency', 'Setting max-width of 1200 pixels for the wrapper', 'Using display flex to create two columns for logo and navigation', 'Changing margin to zero for precise control over white space', 'Specifying font family for consistent type throughout the design', 'The process of styling a navigation bar in a web page is covered', 'Utilizing justify-content and align-items to create space and center elements', 'The specific CSS properties and units used for styling are explained', 'Explanation of the difference between REM and M units in CSS and their appropriate use cases']}, {'end': 5074.197, 'segs': [{'end': 4623.671, 'src': 'embed', 'start': 4566.369, 'weight': 0, 'content': [{'end': 4572.584, 'text': 'but this is a crash course And I wanted to show to you this right here, this underline', 'start': 4566.369, 'duration': 6.215}, {'end': 4583.051, 'text': "So remember we did text decoration none to get rid of those underlines? Well, it's not like we can restyle those into a version that looks like this.", 'start': 4573.465, 'duration': 9.586}, {'end': 4589.555, 'text': "We have to kind of create our own custom little element, this custom little asset underline that we've created.", 'start': 4583.111, 'duration': 6.444}, {'end': 4592.877, 'text': 'And so we can do that purely with CSS.', 'start': 4590.296, 'duration': 2.581}, {'end': 4594.839, 'text': "Here's how we do it.", 'start': 4593.998, 'duration': 0.841}, {'end': 4602.542, 'text': "Every HTML element has what's called a before and after pseudo selector.", 'start': 4595.939, 'duration': 6.603}, {'end': 4613.967, 'text': 'Think of it as just a placeholder value where you can style extra things like adding an underline adjacent to this home element,', 'start': 4603.102, 'duration': 10.865}, {'end': 4615.107, 'text': 'this little nav element.', 'start': 4613.967, 'duration': 1.14}, {'end': 4623.671, 'text': "So the way we do that is we're going to say nav ULIA, just like above, .", 'start': 4615.827, 'duration': 7.844}], 'summary': 'Css crash course on creating custom underlines using before and after pseudo selectors', 'duration': 57.302, 'max_score': 4566.369, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ4566369.jpg'}, {'end': 4674.557, 'src': 'embed', 'start': 4650.446, 'weight': 1, 'content': [{'end': 4656.659, 'text': 'When you do this, The parent element up here, we say position relative.', 'start': 4650.446, 'duration': 6.213}, {'end': 4660.743, 'text': "And I'm not gonna describe what that does right now, I'm gonna show you what it does in a second.", 'start': 4657.58, 'duration': 3.163}, {'end': 4669.012, 'text': "So we put position relative on the parent and then the pseudo element, which is attached to it, we're gonna say position absolute.", 'start': 4661.324, 'duration': 7.688}, {'end': 4672.416, 'text': 'all right now.', 'start': 4670.615, 'duration': 1.801}, {'end': 4674.557, 'text': "just remember, i'm going to explain this in a second.", 'start': 4672.416, 'duration': 2.141}], 'summary': 'Demonstrating css positioning with relative and absolute positions.', 'duration': 24.111, 'max_score': 4650.446, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ4650446.jpg'}, {'end': 5008.64, 'src': 'embed', 'start': 4953.057, 'weight': 3, 'content': [{'end': 4958.522, 'text': 'We need more white space between these elements with margin-top, margin-top.', 'start': 4953.057, 'duration': 5.465}, {'end': 4962.105, 'text': "And we're gonna give that 11 M units.", 'start': 4959.383, 'duration': 2.722}, {'end': 4964.627, 'text': 'So 110 pixels, essentially.', 'start': 4962.305, 'duration': 2.322}, {'end': 4967.309, 'text': "Now it's been pushed down quite a bit.", 'start': 4965.368, 'duration': 1.941}, {'end': 4975.116, 'text': "After that, we're also gonna go ahead and specify our left call.", 'start': 4969.211, 'duration': 5.905}, {'end': 4978.958, 'text': "And we're going to give this a width of 45%.", 'start': 4977.298, 'duration': 1.66}, {'end': 4982.139, 'text': "I'm going to save it.", 'start': 4978.958, 'duration': 3.181}, {'end': 4984.159, 'text': 'All right.', 'start': 4983.799, 'duration': 0.36}, {'end': 4997.602, 'text': 'So if we look at our design here, this is basically 45% or so of this available space within that main parent container.', 'start': 4984.279, 'duration': 13.323}, {'end': 4998.682, 'text': 'All right.', 'start': 4997.622, 'duration': 1.06}, {'end': 5002.356, 'text': "So that's why I gave that 45%.", 'start': 4998.722, 'duration': 3.634}, {'end': 5008.64, 'text': 'And another thing to pay attention to is we want this stuff to consume right column, like these three pictures.', 'start': 5002.356, 'duration': 6.284}], 'summary': 'Adjusting white space and column width for better design layout.', 'duration': 55.583, 'max_score': 4953.057, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ4953057.jpg'}, {'end': 5074.197, 'src': 'embed', 'start': 5053.39, 'weight': 5, 'content': [{'end': 5064.4, 'text': "So the default behavior for Flexbox items is it's only going to consume the amount of width it needs based on the content that's inside of it.", 'start': 5053.39, 'duration': 11.01}, {'end': 5066.762, 'text': "So that's why initially it was only this big.", 'start': 5064.48, 'duration': 2.282}, {'end': 5073.296, 'text': 'but we need it to fill out the whole available space, so use flex-grow 1.', 'start': 5067.81, 'duration': 5.486}, {'end': 5074.197, 'text': 'Hopefully that makes sense.', 'start': 5073.296, 'duration': 0.901}], 'summary': 'Flexbox items consume content-based width, use flex-grow for full space.', 'duration': 20.807, 'max_score': 5053.39, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ5053390.jpg'}], 'start': 4538.605, 'title': 'Custom underlines and hero section design in css', 'summary': 'Covers creating custom underlines with before pseudo element in css, using relative and absolute positioning, and styling the underline with specific width, height, and border properties. it also demonstrates css design for the hero section, using flexbox to create a layout, adding white space, and ensuring elements consume the available space.', 'chapters': [{'end': 4788.136, 'start': 4538.605, 'title': 'Creating custom underlines with css', 'summary': 'Covers creating custom underlines using before pseudo element in css, the use of relative and absolute positioning, and the styling of the underline with specific width, height, and border properties.', 'duration': 249.531, 'highlights': ['By using the before pseudo selector in CSS, we can create custom underlines for elements, like adding an underline adjacent to a nav element.', 'The use of position relative on the parent element and position absolute on the pseudo element allows for precise positioning of the custom underline.', 'Styling the custom underline involves setting specific properties such as width, height, and border to achieve the desired appearance.']}, {'end': 5074.197, 'start': 4788.797, 'title': 'Css design for hero section', 'summary': 'Demonstrates the css design for the hero section, using flexbox to create a layout, adding white space, and ensuring elements consume the available space.', 'duration': 285.4, 'highlights': ['Flexbox used to create column layout for main section, with left column set to 45% width.', "White space added between elements using 'gap' property and 'margin-top', with specific measurements of 8 M units and 11 M units.", 'Flex-grow property applied to right column to ensure it consumes the available space within the flexbox container.']}], 'duration': 535.592, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ4538605.jpg', 'highlights': ['By using the before pseudo selector in CSS, we can create custom underlines for elements, like adding an underline adjacent to a nav element.', 'The use of position relative on the parent element and position absolute on the pseudo element allows for precise positioning of the custom underline.', 'Styling the custom underline involves setting specific properties such as width, height, and border to achieve the desired appearance.', 'Flexbox used to create column layout for main section, with left column set to 45% width.', "White space added between elements using 'gap' property and 'margin-top', with specific measurements of 8 M units and 11 M units.", 'Flex-grow property applied to right column to ensure it consumes the available space within the flexbox container.']}, {'end': 5670.639, 'segs': [{'end': 5101.228, 'src': 'embed', 'start': 5075.078, 'weight': 0, 'content': [{'end': 5080.044, 'text': "All right, so now we're gonna focus on our H1 element, because that does not look anything like our design.", 'start': 5075.078, 'duration': 4.966}, {'end': 5084.541, 'text': "So we're gonna take our H1 font size.", 'start': 5081.3, 'duration': 3.241}, {'end': 5093.045, 'text': "Again, how do we do font sizes? Well, we come over here, we select it, we say, ah, it's 52, 5.2 rem.", 'start': 5084.981, 'duration': 8.064}, {'end': 5094.405, 'text': "That's what we want.", 'start': 5093.585, 'duration': 0.82}, {'end': 5097.586, 'text': 'So 5.2 rem units.', 'start': 5095.145, 'duration': 2.441}, {'end': 5100.407, 'text': 'And again, this is gonna make it big and beefy.', 'start': 5098.647, 'duration': 1.76}, {'end': 5101.228, 'text': 'There you go.', 'start': 5100.688, 'duration': 0.54}], 'summary': 'Adjusting h1 element font size to 5.2 rem for a big and beefy appearance.', 'duration': 26.15, 'max_score': 5075.078, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ5075078.jpg'}, {'end': 5190.745, 'src': 'embed', 'start': 5131.778, 'weight': 1, 'content': [{'end': 5139.441, 'text': "Now, if I zoom up, it's telling us the margin by default is right here.", 'start': 5131.778, 'duration': 7.663}, {'end': 5142.881, 'text': 'It says 34.84 pixels.', 'start': 5140.7, 'duration': 2.181}, {'end': 5148.865, 'text': 'And so the margin will be adjusted programmatically by the browser based on the font size.', 'start': 5143.762, 'duration': 5.103}, {'end': 5153.107, 'text': "So it's adding a lot of margin around it and I don't want that margin there.", 'start': 5149.325, 'duration': 3.782}, {'end': 5154.528, 'text': 'So we reset it to zero.', 'start': 5153.187, 'duration': 1.341}, {'end': 5158.53, 'text': 'So we say margin zero, save.', 'start': 5155.348, 'duration': 3.182}, {'end': 5167.836, 'text': "All right, and now obviously those orange little indicators went away because there's no margin now.", 'start': 5158.55, 'duration': 9.286}, {'end': 5173.359, 'text': "All right, so now let's go ahead and focus on the subheading, which is right here, this tiny text.", 'start': 5168.677, 'duration': 4.682}, {'end': 5180.521, 'text': "Again, what is the font size? We click it, it's gonna be 1.8 rem units.", 'start': 5174.039, 'duration': 6.482}, {'end': 5185.483, 'text': 'So we gave that a class, I believe, of subhead.', 'start': 5182.322, 'duration': 3.161}, {'end': 5190.745, 'text': "If we didn't opt to add it, it is, oh, no, I didn't add it.", 'start': 5186.283, 'duration': 4.462}], 'summary': 'Adjusted margin to 0 pixels, removed orange indicators. subheading font size is 1.8 rem units.', 'duration': 58.967, 'max_score': 5131.778, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ5131778.jpg'}, {'end': 5404.644, 'src': 'embed', 'start': 5370.44, 'weight': 4, 'content': [{'end': 5373.662, 'text': "F12 Sorry, I'm hitting wrong keys over here.", 'start': 5370.44, 'duration': 3.222}, {'end': 5374.142, 'text': 'There we go.', 'start': 5373.782, 'duration': 0.36}, {'end': 5377.504, 'text': "And then we're going to also say color black.", 'start': 5374.723, 'duration': 2.781}, {'end': 5379.766, 'text': 'Text decoration, none.', 'start': 5378.765, 'duration': 1.001}, {'end': 5389.599, 'text': "okay. and then we're going to give ourselves some border, a corner radius on the edges.", 'start': 5382.717, 'duration': 6.882}, {'end': 5392.34, 'text': "notice right here they're just right angles.", 'start': 5389.599, 'duration': 2.741}, {'end': 5400.342, 'text': "so we do a border radius of 1.9 m units because it's 19.", 'start': 5392.34, 'duration': 8.002}, {'end': 5404.644, 'text': 'uh, for the value of the corner radius and figma you can see right there.', 'start': 5400.342, 'duration': 4.302}], 'summary': 'Adjusting css properties including color, text decoration, and border radius to improve the design.', 'duration': 34.204, 'max_score': 5370.44, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ5370440.jpg'}, {'end': 5541.931, 'src': 'heatmap', 'start': 5438.157, 'weight': 3, 'content': [{'end': 5441.36, 'text': 'Now this obviously needs work right here.', 'start': 5438.157, 'duration': 3.203}, {'end': 5451.331, 'text': "All right, so what we're gonna do now is we're going to refactor a couple things.", 'start': 5441.38, 'duration': 9.951}, {'end': 5459.973, 'text': "We're going to not necessarily refactor, but we're gonna add another selector onto this rule set called secondary CTA,", 'start': 5451.631, 'duration': 8.342}, {'end': 5465.035, 'text': 'because it needs these exact same two properties a gap of two M units and display flex.', 'start': 5459.973, 'duration': 5.062}, {'end': 5474.139, 'text': "And the reason we're doing display flex for secondary CTA is because, if I show you the code,", 'start': 5465.815, 'duration': 8.324}, {'end': 5478.861, 'text': 'secondary CTA has two elements that need to be in two columns the span and this SVG.', 'start': 5474.139, 'duration': 4.722}, {'end': 5482.424, 'text': 'So going back here, we save that and look at that.', 'start': 5479.963, 'duration': 2.461}, {'end': 5488.288, 'text': "They are now into two columns, but we still have work to do because it still doesn't look good at all.", 'start': 5483.165, 'duration': 5.123}, {'end': 5492.65, 'text': "So now we're going to target our secondary CTA.", 'start': 5489.348, 'duration': 3.302}, {'end': 5496.452, 'text': 'All right.', 'start': 5492.67, 'duration': 3.782}, {'end': 5503.116, 'text': "And for that, we're going to specify a font size again of 1.8 rem units.", 'start': 5496.652, 'duration': 6.464}, {'end': 5508.779, 'text': 'Might as well just move this over so you can see it while we code.', 'start': 5503.336, 'duration': 5.443}, {'end': 5525.143, 'text': "All right, and then also a text decoration of none color black, and this right here we're gonna put display block,", 'start': 5510.305, 'duration': 14.838}, {'end': 5528.608, 'text': "because right now it's on two lines and we don't want that.", 'start': 5525.143, 'duration': 3.465}, {'end': 5534.164, 'text': "Putting display block will ensure that the words don't wrap in this sense.", 'start': 5530.059, 'duration': 4.105}, {'end': 5541.931, 'text': "And then we're also going to specify a padding of 1M on the top and bottom and 0 on the right and left.", 'start': 5535.145, 'duration': 6.786}], 'summary': 'Refactoring code to add selector for secondary cta with specific properties like display flex and font size of 1.8 rem units.', 'duration': 31.626, 'max_score': 5438.157, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ5438157.jpg'}, {'end': 5670.639, 'src': 'embed', 'start': 5634.005, 'weight': 5, 'content': [{'end': 5638.506, 'text': "I'm not sure if that changed anything because this looked like it wasn't perfectly vertically aligned.", 'start': 5634.005, 'duration': 4.501}, {'end': 5644.528, 'text': "I just want to make sure I didn't screw anything up.", 'start': 5642.848, 'duration': 1.68}, {'end': 5653.15, 'text': "Let's see if we remove this, if anything changes, and it doesn't.", 'start': 5648.289, 'duration': 4.861}, {'end': 5657.312, 'text': 'We can get out our F12, our developer console.', 'start': 5654.571, 'duration': 2.741}, {'end': 5668.557, 'text': 'And is that being centered? It looks like it is.', 'start': 5662.552, 'duration': 6.005}, {'end': 5670.639, 'text': "It just looks like it's off centered to me for some reason.", 'start': 5668.617, 'duration': 2.022}], 'summary': 'Testing for vertical alignment and centering in developer console.', 'duration': 36.634, 'max_score': 5634.005, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ5634005.jpg'}], 'start': 5075.078, 'title': 'Styling h1 and subheading elements', 'summary': 'Focuses on setting the h1 font size to 5.2 rem units, adjusting subheading font size to 1.8 rem units, and ensuring correct font family and margin settings. also, it covers styling call to action buttons in html, including display flex with a 20-pixel gap, background color, font size, color, padding, and border radius for desired design, addressing centering and alignment issues.', 'chapters': [{'end': 5221.837, 'start': 5075.078, 'title': 'Styling h1 and subheading elements', 'summary': 'Focuses on styling the h1 and subheading elements, setting the h1 font size to 5.2 rem units and adjusting the subheading font size to 1.8 rem units, while also ensuring the correct font family and margin settings.', 'duration': 146.759, 'highlights': ['Setting H1 font size to 5.2 rem units and using Playfair display font family The H1 font size is set to 5.2 rem units and the font family is changed to Playfair display, resulting in a more visually appealing and appropriately sized heading.', 'Adjusting subheading font size to 1.8 rem units The subheading font size is adjusted to 1.8 rem units, enhancing its visibility and ensuring it aligns with the design requirements.', 'Resetting margin to zero for the H1 element The margin for the H1 element is reset to zero, eliminating unwanted spacing around the element and ensuring it aligns with the design.']}, {'end': 5670.639, 'start': 5222.478, 'title': 'Styling cta buttons in html', 'summary': 'Covers the process of styling call to action buttons in html, including setting display flex with a gap of 20 pixels, specifying background color, font size, color, padding, and border radius to achieve the desired design, while also addressing issues related to centering and alignment of elements.', 'duration': 448.161, 'highlights': ['Setting display flex with a gap of 20 pixels The CTA BTNS is set to display flex with a gap of 20 pixels, achieving a two-column layout.', 'Specifying background color, font size, color, padding, and border radius The process involves specifying the background color, font size, color, padding, and border radius to achieve the desired button design.', 'Addressing centering and alignment issues The chapter addresses issues related to centering and alignment of elements, including using display block and align items center properties.']}], 'duration': 595.561, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ5075078.jpg', 'highlights': ['Setting H1 font size to 5.2 rem units and using Playfair display font family', 'Adjusting subheading font size to 1.8 rem units', 'Resetting margin to zero for the H1 element', 'Setting display flex with a gap of 20 pixels', 'Specifying background color, font size, color, padding, and border radius', 'Addressing centering and alignment issues']}, {'end': 7766.507, 'segs': [{'end': 5828.461, 'src': 'heatmap', 'start': 5747.629, 'weight': 0.744, 'content': [{'end': 5752.692, 'text': "so we're going to say border one pixel solid black.", 'start': 5747.629, 'duration': 5.063}, {'end': 5759.056, 'text': "so if we save it, it's going to be just a rectangular border, but we do have a corner radius on that.", 'start': 5752.692, 'duration': 6.364}, {'end': 5762.678, 'text': 'so, going back to our design, we select it.', 'start': 5759.056, 'duration': 3.622}, {'end': 5766.7, 'text': "it's going to be eight, all right.", 'start': 5762.678, 'duration': 4.022}, {'end': 5772.568, 'text': 'so 0.8 will be the actual border radius.', 'start': 5766.7, 'duration': 5.868}, {'end': 5773.988, 'text': 'Oh yeah, okay, sorry.', 'start': 5772.948, 'duration': 1.04}, {'end': 5776.149, 'text': 'My reference code was incorrect.', 'start': 5774.709, 'duration': 1.44}, {'end': 5781.012, 'text': 'All right, so border radius is 0.8 M units.', 'start': 5776.79, 'duration': 4.222}, {'end': 5788.596, 'text': "And then we're gonna do that trick, position relative, because that confetti graphic that we have to add.", 'start': 5781.932, 'duration': 6.664}, {'end': 5793.298, 'text': 'All right, so based on our Figma prototype, we have this confetti.', 'start': 5788.616, 'duration': 4.682}, {'end': 5799.469, 'text': 'So what we want to do is right click, copy as SVG after you select it.', 'start': 5795.208, 'duration': 4.261}, {'end': 5807.051, 'text': "After you have that selected, what we're going to do is we're going, oh, by the way, it's already in here.", 'start': 5800.91, 'duration': 6.141}, {'end': 5808.152, 'text': "So we don't need to do that.", 'start': 5807.111, 'duration': 1.041}, {'end': 5810.212, 'text': "We've already saved it as a SVG file.", 'start': 5808.432, 'duration': 1.78}, {'end': 5811.212, 'text': "So don't worry about that.", 'start': 5810.232, 'duration': 0.98}, {'end': 5813.693, 'text': 'Ignore that last step of copying it.', 'start': 5812.013, 'duration': 1.68}, {'end': 5825.818, 'text': "So now what we're going to do is we're going to say news, pseudo selector before, and we're going to say position absolute content empty.", 'start': 5814.313, 'duration': 11.505}, {'end': 5828.461, 'text': 'remember those three elements that go hand in hand.', 'start': 5825.818, 'duration': 2.643}], 'summary': 'Applying a 0.8 m unit border radius and adding confetti as svg file.', 'duration': 80.832, 'max_score': 5747.629, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ5747629.jpg'}, {'end': 6066.234, 'src': 'heatmap', 'start': 5902.441, 'weight': 0.831, 'content': [{'end': 5905.344, 'text': 'All right now, just to make sure things are on top of each other.', 'start': 5902.441, 'duration': 2.903}, {'end': 5911.029, 'text': "when you use position absolute on an element, you can use what's called z-index, and we can make this like two.", 'start': 5905.344, 'duration': 5.685}, {'end': 5915.313, 'text': "By default, it's at a value where everything's kind of equal with each other.", 'start': 5911.41, 'duration': 3.903}, {'end': 5921.139, 'text': "I don't think it really changed anything, but if you need something to show up like on top of something or behind something,", 'start': 5915.574, 'duration': 5.565}, {'end': 5924.022, 'text': 'you can use negative z-index values and so on and so forth.', 'start': 5921.139, 'duration': 2.883}, {'end': 5927.044, 'text': "We'll use it again here at the end as well and you'll see.", 'start': 5924.402, 'duration': 2.642}, {'end': 5932.413, 'text': 'Now we have to specify the type, because this is not big enough, the 50K.', 'start': 5928.588, 'duration': 3.825}, {'end': 5936.038, 'text': 'So that is paragraph employees.', 'start': 5933.134, 'duration': 2.904}, {'end': 5941.056, 'text': 'Font size is actually 33 in Figma, so 3.3 rem units.', 'start': 5937.574, 'duration': 3.482}, {'end': 5947, 'text': 'Margin zero to get rid of any default margin.', 'start': 5942.097, 'duration': 4.903}, {'end': 5951.263, 'text': "And then we're also going to use a lighter font weight of 200.", 'start': 5947.721, 'duration': 3.542}, {'end': 5959.168, 'text': "And there's going to be another element here that I specify, but see here we are looking pretty solid right there.", 'start': 5951.263, 'duration': 7.905}, {'end': 5962.784, 'text': 'Yeah, it actually looks good as is.', 'start': 5961.323, 'duration': 1.461}, {'end': 5967.406, 'text': "And then we're going to take our type right here and do something with it.", 'start': 5963.344, 'duration': 4.062}, {'end': 5969.107, 'text': "So let's come over here.", 'start': 5967.707, 'duration': 1.4}, {'end': 5973.13, 'text': "We're going to say paragraph details.", 'start': 5971.148, 'duration': 1.982}, {'end': 5978.933, 'text': 'Font size is 1.4 rem and get rid of any margin.', 'start': 5974.47, 'duration': 4.463}, {'end': 5980.774, 'text': "So we'll save that.", 'start': 5980.033, 'duration': 0.741}, {'end': 5982.795, 'text': 'All right.', 'start': 5982.595, 'duration': 0.2}, {'end': 5984.316, 'text': 'So notice something right here.', 'start': 5983.215, 'duration': 1.101}, {'end': 5993.808, 'text': "there's a column established right here, but the 50k is not matching it right.", 'start': 5985.805, 'duration': 8.003}, {'end': 5996.369, 'text': 'so this is one of those weird things.', 'start': 5993.808, 'duration': 2.561}, {'end': 6001.311, 'text': 'um, and you just kind of understand these things through trial and error.', 'start': 5996.369, 'duration': 4.942}, {'end': 6013.184, 'text': 'um, we need to add line height 100 to employees, and now it makes them even along that line right.', 'start': 6001.311, 'duration': 11.873}, {'end': 6020.369, 'text': "so the bigger your type in is, the more the line height might affect certain things that you don't want to happen.", 'start': 6013.184, 'duration': 7.185}, {'end': 6023.631, 'text': 'okay, so now we have this whole left column done.', 'start': 6020.369, 'duration': 3.262}, {'end': 6028.053, 'text': 'let me go back to 100 percent, looking pretty solid here.', 'start': 6023.631, 'duration': 4.422}, {'end': 6030.675, 'text': 'now we have this area all right.', 'start': 6028.053, 'duration': 2.622}, {'end': 6036.118, 'text': "so this is going to be the first time we use what's called display grid or the grid itself.", 'start': 6030.675, 'duration': 5.443}, {'end': 6045.482, 'text': 'now the grid I is an alternative way of structuring a layout compared to Flexbox.', 'start': 6036.118, 'duration': 9.364}, {'end': 6046.742, 'text': "We've used nothing but Flex.", 'start': 6045.502, 'duration': 1.24}, {'end': 6053.406, 'text': "But if we look at our design, you'll see we have kind of like a.", 'start': 6047.443, 'duration': 5.963}, {'end': 6066.234, 'text': "it's not complex, but it's a design where, if you think about things logically, we have, if you think about like in a grid sense, We have a.", 'start': 6053.406, 'duration': 12.828}], 'summary': 'Using z-index, font size, and display grid for layout design.', 'duration': 163.793, 'max_score': 5902.441, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ5902441.jpg'}, {'end': 6214.467, 'src': 'heatmap', 'start': 6134.956, 'weight': 0.836, 'content': [{'end': 6140.766, 'text': "So it's going to be 2.3.", 'start': 6134.956, 'duration': 5.81}, {'end': 6141.686, 'text': 'and M units.', 'start': 6140.766, 'duration': 0.92}, {'end': 6143.127, 'text': 'All right.', 'start': 6142.787, 'duration': 0.34}, {'end': 6148.329, 'text': "Now, if we go back and look, nothing's really changed by the way.", 'start': 6144.027, 'duration': 4.302}, {'end': 6154.032, 'text': "So now, just so we can visualize what's happening by the way, let's take our card.", 'start': 6150.15, 'duration': 3.882}, {'end': 6162.995, 'text': "Each one of those card elements has a card class and just give it a background of gray, just temporarily so we can see what the heck's happening here.", 'start': 6154.792, 'duration': 8.203}, {'end': 6164.596, 'text': 'This is what it looks like right now.', 'start': 6163.175, 'duration': 1.421}, {'end': 6171.483, 'text': "Unlike Flexbox, when you specify display grid, it doesn't automatically put things in the columns.", 'start': 6165.576, 'duration': 5.907}, {'end': 6173.405, 'text': 'It leaves them as rows like this.', 'start': 6171.563, 'duration': 1.842}, {'end': 6183.065, 'text': "That's an important distinction because if we change this to flex and saved it, Look, it's in columns.", 'start': 6173.886, 'duration': 9.179}, {'end': 6184.506, 'text': "So we don't want that though.", 'start': 6183.365, 'duration': 1.141}, {'end': 6185.247, 'text': 'We want it grid.', 'start': 6184.566, 'duration': 0.681}, {'end': 6193.354, 'text': 'And then what we want to do is specify grid template columns, repeat to auto.', 'start': 6186.047, 'duration': 7.307}, {'end': 6198.918, 'text': "So that's the same thing as saying auto, auto, which means they're going to be the same width.", 'start': 6194.014, 'duration': 4.904}, {'end': 6209.904, 'text': 'If I say this, we see we have this situation, but to save yourself some time, repeat to auto, same thing.', 'start': 6200.179, 'duration': 9.725}, {'end': 6211.485, 'text': "We're gonna get the same exact result.", 'start': 6210.024, 'duration': 1.461}, {'end': 6212.145, 'text': "It's a function.", 'start': 6211.525, 'duration': 0.62}, {'end': 6214.467, 'text': 'So yes, you have functions in CSS.', 'start': 6212.826, 'duration': 1.641}], 'summary': 'Using css grid to create columns, with grid template columns set to repeat 2.3 units, resulting in the same width for all columns.', 'duration': 79.511, 'max_score': 6134.956, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ6134956.jpg'}, {'end': 6371.159, 'src': 'heatmap', 'start': 6284.178, 'weight': 0.866, 'content': [{'end': 6292.623, 'text': 'So if we look at the amount of words that we have, we have one, two, three, three different words, and that we have three different cards.', 'start': 6284.178, 'duration': 8.445}, {'end': 6301.309, 'text': "And we've structured it so that we give a visual representation that this is the left column, then we have a right and a bottom.", 'start': 6292.864, 'duration': 8.445}, {'end': 6305.632, 'text': "Okay, so we're done with that.", 'start': 6302.47, 'duration': 3.162}, {'end': 6308.994, 'text': "And now nothing's gonna change really from where it was before.", 'start': 6306.432, 'duration': 2.562}, {'end': 6317.604, 'text': 'Now we have to assign grid area names to each one of these, so it knows.', 'start': 6309.894, 'duration': 7.71}, {'end': 6321.027, 'text': 'you know which one is going to be called left, all right.', 'start': 6317.604, 'duration': 3.423}, {'end': 6334.478, 'text': "so to do that, we simply say card one, and again that's a class that exists right here on the card one, and we say grid area left, save it.", 'start': 6321.027, 'duration': 13.451}, {'end': 6337.627, 'text': 'Look at that.', 'start': 6336.266, 'duration': 1.361}, {'end': 6340.069, 'text': 'All right.', 'start': 6339.709, 'duration': 0.36}, {'end': 6347.876, 'text': "So we don't even have to explicitly name these two over here because it already has the structure that we want.", 'start': 6340.289, 'duration': 7.587}, {'end': 6351.779, 'text': "And in that case, you don't even have to put right in bottom.", 'start': 6348.356, 'duration': 3.423}, {'end': 6352.86, 'text': 'You could just put periods.', 'start': 6351.799, 'duration': 1.061}, {'end': 6357.67, 'text': 'Look at that.', 'start': 6357.25, 'duration': 0.42}, {'end': 6363.414, 'text': "Awesome. So now let's go ahead and start working on our card rule set.", 'start': 6358.151, 'duration': 5.263}, {'end': 6367.957, 'text': "because our card rule set, there's a lot to be desired about what this looks like.", 'start': 6363.414, 'duration': 4.543}, {'end': 6371.159, 'text': 'This looks nothing like this.', 'start': 6368.737, 'duration': 2.422}], 'summary': 'The transcript discusses creating a visual representation using grid areas for three different cards, with specific grid area assignments for each one.', 'duration': 86.981, 'max_score': 6284.178, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ6284178.jpg'}, {'end': 6526.858, 'src': 'heatmap', 'start': 6445.613, 'weight': 0.958, 'content': [{'end': 6449.495, 'text': "Because if you refer back to the design, we'll see that these are at the bottom.", 'start': 6445.613, 'duration': 3.882}, {'end': 6456.257, 'text': 'So a way to push things around is to make the parent element a flexbox container.', 'start': 6450.035, 'duration': 6.222}, {'end': 6465.241, 'text': "So we say, go back to our CSS, display flex, and we're gonna go ahead and say align items end.", 'start': 6457.098, 'duration': 8.143}, {'end': 6469.646, 'text': "All right, we'll save that, and now they're at the bottom.", 'start': 6467.185, 'duration': 2.461}, {'end': 6473.287, 'text': "So these little tips and tricks you'll pick up along the way.", 'start': 6470.446, 'duration': 2.841}, {'end': 6479.609, 'text': "All right, now I actually wanna see our images, our photographs, so let's do that real quickly.", 'start': 6473.307, 'duration': 6.302}, {'end': 6490.033, 'text': "We're gonna say background image, URL, out of CSS folder into images, and we're gonna say clothing1.jpg.", 'start': 6480.27, 'duration': 9.763}, {'end': 6492.794, 'text': "All right, we're gonna save it.", 'start': 6491.934, 'duration': 0.86}, {'end': 6495.375, 'text': 'There it is.', 'start': 6494.875, 'duration': 0.5}, {'end': 6498.175, 'text': "Now I'm gonna take the background size.", 'start': 6496.354, 'duration': 1.821}, {'end': 6507.018, 'text': "we're gonna make it and again card and card one are applying to the same element here, so we're gonna say background size 150%.", 'start': 6498.175, 'duration': 8.843}, {'end': 6508.039, 'text': 'Save it.', 'start': 6507.018, 'duration': 1.021}, {'end': 6515.17, 'text': 'and now that changes the size of it.', 'start': 6512.748, 'duration': 2.422}, {'end': 6524.756, 'text': "before it was a lot larger and we're going to actually, on hover, scale that down to a different size or scale up rather based on hover.", 'start': 6515.17, 'duration': 9.586}, {'end': 6526.858, 'text': "but we're going to get to that at the end.", 'start': 6524.756, 'duration': 2.102}], 'summary': 'Using flexbox to position elements at the bottom and adjusting background image size for a better visual effect.', 'duration': 81.245, 'max_score': 6445.613, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ6445613.jpg'}, {'end': 6761.421, 'src': 'heatmap', 'start': 6673.767, 'weight': 0.9, 'content': [{'end': 6681.511, 'text': 'And then we have the one underneath it, which is just card details, paragraph.', 'start': 6673.767, 'duration': 7.744}, {'end': 6687.815, 'text': 'This is going to be a font size of 1.4 rem, slightly smaller in a margin of zero.', 'start': 6682.632, 'duration': 5.183}, {'end': 6695.58, 'text': 'There we go, looking solid, very close.', 'start': 6691.838, 'duration': 3.742}, {'end': 6698.362, 'text': 'And then also the size, the font size has to be increased.', 'start': 6695.74, 'duration': 2.622}, {'end': 6705.771, 'text': 'So P product price is font size 1.8 rem units.', 'start': 6699.028, 'duration': 6.743}, {'end': 6707.191, 'text': 'Save that.', 'start': 6706.651, 'duration': 0.54}, {'end': 6709.572, 'text': 'There we go.', 'start': 6709.092, 'duration': 0.48}, {'end': 6724.192, 'text': "All right now, if we refer back to the document, There's actually one thing that I 100% forgot to include, which I kind of wanted to include it,", 'start': 6711.413, 'duration': 12.779}, {'end': 6725.693, 'text': "which is okay that I didn't do it.", 'start': 6724.192, 'duration': 1.501}, {'end': 6734.999, 'text': 'If I go back here in Figma to my designs, I had an initial design and it was supposed to look like this.', 'start': 6725.793, 'duration': 9.206}, {'end': 6736.84, 'text': 'There was supposed to be this graphic right here.', 'start': 6735.059, 'duration': 1.781}, {'end': 6740.482, 'text': 'i want to show you how to do that actually.', 'start': 6738.061, 'duration': 2.421}, {'end': 6747.065, 'text': "so this this file is already an svg file that's available right here, called tag.", 'start': 6740.482, 'duration': 6.583}, {'end': 6750.066, 'text': 'so i want to get that in here.', 'start': 6747.065, 'duration': 3.001}, {'end': 6755.636, 'text': 'so the way we do that is, we go back to our main, And that exists.', 'start': 6750.066, 'duration': 5.57}, {'end': 6761.421, 'text': "it's gonna be that technique where we use the pseudo element of before and it's gonna exist on top of card one,", 'start': 6755.636, 'duration': 5.785}], 'summary': 'Adjust font sizes, include graphic in design, utilize pseudo element for card one', 'duration': 87.654, 'max_score': 6673.767, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ6673767.jpg'}, {'end': 6910.239, 'src': 'embed', 'start': 6883.353, 'weight': 0, 'content': [{'end': 6887.845, 'text': 'So if I refer back to Figma, And we go to the prototype.', 'start': 6883.353, 'duration': 4.492}, {'end': 6892.05, 'text': 'And by the way, you just click, you select this frame and you click play.', 'start': 6888.226, 'duration': 3.824}, {'end': 6895.695, 'text': 'And I show you, this is what it looks like.', 'start': 6892.952, 'duration': 2.743}, {'end': 6897.697, 'text': 'We need to do these little hover animations.', 'start': 6895.755, 'duration': 1.942}, {'end': 6905.147, 'text': 'We need to do this animation right here where that happens, this little subtle animation, and then this animation as well.', 'start': 6898.058, 'duration': 7.089}, {'end': 6907.857, 'text': 'We can all do that in CSS.', 'start': 6906.175, 'duration': 1.682}, {'end': 6910.239, 'text': "So let's get started.", 'start': 6908.497, 'duration': 1.742}], 'summary': 'Using css, create hover and subtle animations for figma prototype.', 'duration': 26.886, 'max_score': 6883.353, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ6883353.jpg'}, {'end': 7073.588, 'src': 'heatmap', 'start': 6912.421, 'weight': 0.778, 'content': [{'end': 6915.844, 'text': "We'll just do a comment, micro interactions.", 'start': 6912.421, 'duration': 3.423}, {'end': 6917.146, 'text': 'All right.', 'start': 6916.705, 'duration': 0.441}, {'end': 6924.633, 'text': "And the first one that we're gonna tackle is going to be the nav hover ones where the little line grows.", 'start': 6918.407, 'duration': 6.226}, {'end': 6930.519, 'text': 'So what we say is nav U-L-L-I-A hover before.', 'start': 6925.274, 'duration': 5.245}, {'end': 6935.516, 'text': "Okay, so we're gonna say width 35%.", 'start': 6932.094, 'duration': 3.422}, {'end': 6938.757, 'text': "Now what's that going to do? I don't think it's gonna work.", 'start': 6935.516, 'duration': 3.241}, {'end': 6941.959, 'text': 'Yeah, nothing happens right now if I hover over these.', 'start': 6939.538, 'duration': 2.421}, {'end': 6948.242, 'text': "That's because we have to go back up to our nav section where all that stuff is at.", 'start': 6942.459, 'duration': 5.783}, {'end': 6952.904, 'text': 'All right, and we have to add a couple things.', 'start': 6949.882, 'duration': 3.022}, {'end': 6972.411, 'text': "So, essentially, what we wanna do is have, a transition element that's going to be added to our ULIA before a new rule set.", 'start': 6953.824, 'duration': 18.587}, {'end': 6975.891, 'text': 'So nav ULIA before.', 'start': 6972.811, 'duration': 3.08}, {'end': 6981.012, 'text': "Now notice how before we have our underlying, but it's only for the active class.", 'start': 6976.832, 'duration': 4.18}, {'end': 6983.453, 'text': 'So it only applies to the home link.', 'start': 6981.052, 'duration': 2.401}, {'end': 6993.155, 'text': 'But these other ones are the ones that we want to hover, are the default ones, not the ones that are have the active class.', 'start': 6984.093, 'duration': 9.062}, {'end': 6997.437, 'text': 'so we basically recreate all this stuff right here.', 'start': 6993.155, 'duration': 4.282}, {'end': 7000.558, 'text': "i'm just going to copy and paste it back in.", 'start': 6997.437, 'duration': 3.121}, {'end': 7003.919, 'text': "but we're going to set this, the width here, to zero.", 'start': 7000.558, 'duration': 3.361}, {'end': 7009.462, 'text': "let's put zero percent, because by default we don't want to see it only when we hover all right.", 'start': 7003.919, 'duration': 5.543}, {'end': 7010.282, 'text': 'hopefully that makes sense.', 'start': 7009.462, 'duration': 0.82}, {'end': 7012.123, 'text': "now we're also going to make this a gray color.", 'start': 7010.282, 'duration': 1.841}, {'end': 7015.783, 'text': "We could grab the color code, but I'm being lazy from Figma.", 'start': 7013.342, 'duration': 2.441}, {'end': 7019.585, 'text': "And then we say, well, for now we'll just hit save.", 'start': 7016.824, 'duration': 2.761}, {'end': 7022.186, 'text': 'We hit save and I zoom up.', 'start': 7020.345, 'duration': 1.841}, {'end': 7025.148, 'text': 'Look, it just shows up.', 'start': 7024.187, 'duration': 0.961}, {'end': 7026.188, 'text': "It doesn't grow.", 'start': 7025.248, 'duration': 0.94}, {'end': 7032.811, 'text': 'How do we make it animate? Well, we say transition width 0.3 seconds.', 'start': 7027.049, 'duration': 5.762}, {'end': 7039.655, 'text': "All right, so it's telling us this is gonna transition the width property should it change based on something like a hover.", 'start': 7034.472, 'duration': 5.183}, {'end': 7046.064, 'text': 'and for a duration of three seconds 0.3 seconds, rather 300 milliseconds.', 'start': 7040.72, 'duration': 5.344}, {'end': 7050.428, 'text': 'so now, zoom up, ta-da, they grow.', 'start': 7046.064, 'duration': 4.364}, {'end': 7052.59, 'text': 'look how cool that is.', 'start': 7050.428, 'duration': 2.162}, {'end': 7055.352, 'text': 'okay. next one is going to be browser collection.', 'start': 7052.59, 'duration': 2.762}, {'end': 7057.013, 'text': 'this is going to be a very simple one.', 'start': 7055.352, 'duration': 1.661}, {'end': 7073.588, 'text': "it's just a simple hover on a button, and so to do that, all we do is come down And we say primary CTA hover background.", 'start': 7057.013, 'duration': 16.575}], 'summary': 'Modifying nav hover effect to grow line on hover, adding transition for animation. also adding simple hover effect on button.', 'duration': 161.167, 'max_score': 6912.421, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ6912421.jpg'}, {'end': 7073.588, 'src': 'embed', 'start': 7034.472, 'weight': 1, 'content': [{'end': 7039.655, 'text': "All right, so it's telling us this is gonna transition the width property should it change based on something like a hover.", 'start': 7034.472, 'duration': 5.183}, {'end': 7046.064, 'text': 'and for a duration of three seconds 0.3 seconds, rather 300 milliseconds.', 'start': 7040.72, 'duration': 5.344}, {'end': 7050.428, 'text': 'so now, zoom up, ta-da, they grow.', 'start': 7046.064, 'duration': 4.364}, {'end': 7052.59, 'text': 'look how cool that is.', 'start': 7050.428, 'duration': 2.162}, {'end': 7055.352, 'text': 'okay. next one is going to be browser collection.', 'start': 7052.59, 'duration': 2.762}, {'end': 7057.013, 'text': 'this is going to be a very simple one.', 'start': 7055.352, 'duration': 1.661}, {'end': 7073.588, 'text': "it's just a simple hover on a button, and so to do that, all we do is come down And we say primary CTA hover background.", 'start': 7057.013, 'duration': 16.575}], 'summary': 'Transition width property on hover, duration of 300ms; simple button hover effect.', 'duration': 39.116, 'max_score': 7034.472, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ7034472.jpg'}, {'end': 7384.597, 'src': 'heatmap', 'start': 7302.961, 'weight': 0.914, 'content': [{'end': 7307.664, 'text': "Let's do like 800ms milliseconds.", 'start': 7302.961, 'duration': 4.703}, {'end': 7308.925, 'text': "We'll see if this works.", 'start': 7308.044, 'duration': 0.881}, {'end': 7311.066, 'text': 'All right.', 'start': 7310.706, 'duration': 0.36}, {'end': 7317.29, 'text': 'I did not spell that right.', 'start': 7315.949, 'duration': 1.341}, {'end': 7318.371, 'text': "That's why it wasn't working.", 'start': 7317.33, 'duration': 1.041}, {'end': 7320.407, 'text': 'Now look at that.', 'start': 7319.406, 'duration': 1.001}, {'end': 7325.833, 'text': 'Very nice.', 'start': 7325.312, 'duration': 0.521}, {'end': 7328.296, 'text': 'And then we also want this to move up.', 'start': 7326.574, 'duration': 1.722}, {'end': 7333.461, 'text': 'This element needs to move up slightly to be consistent with our prototype.', 'start': 7329.557, 'duration': 3.904}, {'end': 7339.877, 'text': "So to do that, to come back down, we're going to say card.", 'start': 7334.242, 'duration': 5.635}, {'end': 7347.181, 'text': 'when the card is hovered over, we want to change card details, which is the white container that contains the three pieces of type transform.', 'start': 7339.877, 'duration': 7.304}, {'end': 7354.525, 'text': "so whenever you want to move something, you can just transform, translate Y on the y-axis and we're gonna move it a negative 20 pixels,", 'start': 7347.181, 'duration': 7.344}, {'end': 7356.346, 'text': 'which will move it upwards.', 'start': 7354.525, 'duration': 1.821}, {'end': 7360.929, 'text': "so if we save it, it's not gonna have a smooth transition.", 'start': 7356.346, 'duration': 4.583}, {'end': 7371.803, 'text': "to give it that smooth transition, we come back to card details And we're going to say transition, transform.", 'start': 7360.929, 'duration': 10.874}, {'end': 7375.447, 'text': 'And again, this could be 800 milliseconds as well.', 'start': 7372.864, 'duration': 2.583}, {'end': 7384.597, 'text': 'So now they all work as one would expect.', 'start': 7378.41, 'duration': 6.187}], 'summary': 'Applied 800ms transition to move element up, achieving consistency with prototype.', 'duration': 81.636, 'max_score': 7302.961, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ7302961.jpg'}, {'end': 7430.772, 'src': 'embed', 'start': 7400.209, 'weight': 3, 'content': [{'end': 7403.472, 'text': 'Sometimes you call them page transition animations.', 'start': 7400.209, 'duration': 3.263}, {'end': 7405.133, 'text': "Let's do that real quick.", 'start': 7404.072, 'duration': 1.061}, {'end': 7410.357, 'text': "Coming back to your HTML, let's add a div class of overlay.", 'start': 7405.974, 'duration': 4.383}, {'end': 7412.939, 'text': "And there's not going to be anything inside of it.", 'start': 7411.198, 'duration': 1.741}, {'end': 7413.88, 'text': "It's just a div element.", 'start': 7412.999, 'duration': 0.881}, {'end': 7416.522, 'text': "We're going to come back to our main CSS.", 'start': 7413.9, 'duration': 2.622}, {'end': 7423.084, 'text': "and we're going to specify that overlay element we just created.", 'start': 7418.559, 'duration': 4.525}, {'end': 7430.772, 'text': "and let's add a comment here real quick intro animation.", 'start': 7423.084, 'duration': 7.688}], 'summary': 'Adding overlay div with css animation for page transitions.', 'duration': 30.563, 'max_score': 7400.209, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ7400209.jpg'}], 'start': 5670.719, 'title': 'Css design and animation', 'summary': 'Covers styling a news section with 50k content, implementing css animation for a graphic, designing grid layouts using flexbox, illustrating css grid layout basics, styling webpage elements, adding svg graphics and css micro interactions with specific design elements, and detailing css animation techniques for creating hover effects and page transitions.', 'chapters': [{'end': 5924.022, 'start': 5670.719, 'title': 'Css styling and animation', 'summary': 'Covers the process of styling a news section with 50k content and implementing css animation for a confetti graphic, including specifying dimensions and positioning values.', 'duration': 253.303, 'highlights': ['The news section is styled using display flex to create two columns for news and 50K content, with a gap of 30 pixels and a padding of 50 pixels, resulting in a visually improved layout. The news section is styled using display flex to create two columns for news and 50K content, with a gap of 30 pixels and a padding of 50 pixels, resulting in a visually improved layout.', 'A border with a one-pixel solid black line and a border radius of 0.8M units is added to the news section, enhancing its visual appearance. A border with a one-pixel solid black line and a border radius of 0.8M units is added to the news section, enhancing its visual appearance.', 'Implementation of a confetti graphic using CSS pseudo-selector before, and specifying its position, background image, width, height, top, and left values, resulting in its correct placement and appearance on the webpage. Implementation of a confetti graphic using CSS pseudo-selector before, and specifying its position, background image, width, height, top, and left values, resulting in its correct placement and appearance on the webpage.']}, {'end': 6164.596, 'start': 5924.402, 'title': 'Designing grid layout with flexbox', 'summary': 'Discusses designing a grid layout using flexbox and explains the usage of properties like display grid, gap, font size, and margin to create a cohesive design.', 'duration': 240.194, 'highlights': ['The grid layout is an alternative way of structuring a layout compared to Flexbox and is suitable for more complex arrangements of layouts. The chapter explains that the grid layout is ideal for organizing complex arrangements of layouts, such as multiple rows and columns, and can handle both horizontal and vertical axis organization effectively.', 'Usage of properties like font size, margin, and line height to ensure proper alignment and spacing within the design. It emphasizes the importance of specifying properties like font size, margin, and line height to ensure proper alignment and spacing within the design, with specific examples such as font size set at 1.4 rem and using a margin of zero.', 'Demonstration of using the display grid property to create a cohesive design and applying the gap property to control the white space between elements. It demonstrates the use of the display grid property to create a cohesive design, along with applying the gap property to control the white space between elements, with a specific example of setting the gap at 2.3 rem units.']}, {'end': 6473.287, 'start': 6165.576, 'title': 'Css grid layout basics', 'summary': 'Illustrates the basics of css grid layout, demonstrating the use of grid template columns, grid template areas, and applying styles such as border radius, padding, and flexbox for layout adjustments.', 'duration': 307.711, 'highlights': ["The chapter highlights the use of grid template columns to set the width of grid items, with the 'repeat' function being utilized to automatically assign equal widths to the columns. The 'repeat' function is used to automatically assign equal widths to the columns, offering a concise and efficient way to set the width of grid items.", 'The concept of grid template areas is explained, allowing for the visualization of grid cells and the assignment of specific names to areas within the grid layout. The concept of grid template areas is explained, providing a visual representation of grid cells and the ability to assign specific names to areas within the grid layout.', 'The application of styles, such as border radius and padding, is demonstrated to customize the appearance of grid items, along with utilizing flexbox to adjust the layout positioning. The application of styles, including border radius and padding, is demonstrated to customize the appearance of grid items, while utilizing flexbox to adjust the layout positioning for optimal design.']}, {'end': 6709.572, 'start': 6473.307, 'title': 'Styling webpage elements', 'summary': 'Focuses on styling webpage elements, including adjusting background image size, creating white containers with text, and specifying font sizes for different text elements.', 'duration': 236.265, 'highlights': ['Adjusting background image size The speaker demonstrates adjusting the background image size using CSS, setting it to 150% and discussing plans to scale it based on hover.', 'Creating white containers with text The process of creating white containers with text, including setting background color, border radius, padding, width, and using flexbox for alignment, is explained.', 'Specifying font sizes for different text elements The speaker specifies font sizes for different text elements, including setting the font size for title, paragraph, and product price, ensuring proper styling and readability.']}, {'end': 7116.289, 'start': 6711.413, 'title': 'Adding svg graphic and css micro interactions', 'summary': 'Focuses on adding an svg graphic using css pseudo elements and implementing css micro interactions for hover effects, achieving a 100% width and height, setting transition property for a duration of 300 milliseconds, and changing button background color to e2d1bd on hover.', 'duration': 404.876, 'highlights': ["The chapter demonstrates adding an SVG graphic using CSS pseudo elements with a width of 100% and height of 100%, positioned relative to 'card one' and using 'before' pseudo element, achieving a visually appealing design.", "It explains the necessity of using 'pointer events: none' to ensure the SVG graphic does not interfere with the clickable elements, making the design fully functional.", "The chapter instructs on implementing CSS micro interactions for hover effects, including growing the width of a line on nav hover using 'transition' property for a duration of 300 milliseconds, enhancing user experience.", 'It showcases changing the button background color to E2D1BD on hover, ensuring a visually pleasing and seamless user interface.', 'The transcript includes steps to retrieve a specific color code from Figma and apply it to the button background, demonstrating attention to detail and design perfectionism.']}, {'end': 7766.507, 'start': 7117.149, 'title': 'Css animation techniques', 'summary': 'Details the use of css for creating various animations, including hover effects and page transition animations, and emphasizes the importance of making designs responsive, while also promoting designcourse.com for further learning.', 'duration': 649.358, 'highlights': ['The chapter explains how to create hover effects using CSS, such as changing the SVG element on hover and setting transition properties for smooth animations. Demonstrates using CSS to change the SVG element on hover and setting transition properties for smooth animations.', 'The speaker illustrates the use of the animation property and keyframes for creating robust animations, such as setting background size and moving elements on hover, while emphasizing the need for smooth transitions. Illustrates the use of the animation property and keyframes for creating robust animations, emphasizing the need for smooth transitions.', 'The chapter discusses the creation of page transition animations using CSS, demonstrating the use of the animation property and keyframes to reveal elements on the webpage, while promoting designcourse.com for further learning. Discusses the creation of page transition animations using CSS, demonstrating the use of the animation property and keyframes to reveal elements on the webpage.', 'The speaker emphasizes the importance of making designs responsive for various devices and promotes designcourse.com for further learning in HTML, CSS, and JavaScript. Emphasizes the importance of making designs responsive for various devices and promotes designcourse.com for further learning in HTML, CSS, and JavaScript.']}], 'duration': 2095.788, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Kl3nOXQjVnQ/pics/Kl3nOXQjVnQ5670719.jpg', 'highlights': ['Demonstrates using CSS to change the SVG element on hover and setting transition properties for smooth animations.', "The chapter instructs on implementing CSS micro interactions for hover effects, including growing the width of a line on nav hover using 'transition' property for a duration of 300 milliseconds, enhancing user experience.", 'The chapter explains how to create hover effects using CSS, such as changing the SVG element on hover and setting transition properties for smooth animations.', 'The chapter discusses the creation of page transition animations using CSS, demonstrating the use of the animation property and keyframes to reveal elements on the webpage.']}], 'highlights': ['Learn the 2023 frontend dev crash course covering html & css basics, visual studio code usage, html markup, css styling, figma prototype conversion, web design techniques, custom underlines, hero section design, styling h1 & subheading elements, and css design & animation.', 'Visual Studio Code is the most popular code editor, emphasizing its ease of use and popularity.', 'HTML serves as the foundational structure of websites, while CSS is responsible for the visual and aesthetic aspects.', 'The purpose of setting the font size in CSS to 62.5% is to make conversions from Figma prototype easier, resulting in accurate sizes based on the design and making conversions a lot easier.', 'Including Google Fonts for cross-compatibility and design consistency', 'By using the before pseudo selector in CSS, we can create custom underlines for elements, like adding an underline adjacent to a nav element.', 'Setting H1 font size to 5.2 rem units and using Playfair display font family', 'Demonstrates using CSS to change the SVG element on hover and setting transition properties for smooth animations.']}