title
The 2020 Frontend Developer Crash Course for Absolute Beginners

description
http://www.linode.com/designcourse - Use code 'DESIGNC19' to get $20 credit on your new Linode account! - Today, you're going to embark on a journey into the world of Frontend Development! In doing so, you're going to utilize HTML, CSS & a tiny bit of JavaScript to create an actual website layout that works on multiple devices (yes, it's "Responsive"!). Throughout this course, I assume you have no experience building sites or apps -- BUT, this is a *Crash Course*, which means we pack a LOT of content in a relatively short amount of time. The purpose of this course is to get your feet wet and determine if Frontend development might be right for you. You will get to see the full picture of what a Frontend developer does! Download the 2 photograph assets from here: https://unsplash.com/photos/D-vDQMTfAAU https://unsplash.com/photos/8Vh6ulKc50o (I modified this image slightly, which is available here: https://coursetro.s3.amazonaws.com/tutorial_images/bg.jpg (download this one)). The full project code is available here: https://codepen.io/designcourse/pen/zYxPOEP Let's get started! - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS! My site: 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 Coursetro.com. Come to my discord server or add me on social media and say Hi!

detail
{'title': 'The 2020 Frontend Developer Crash Course for Absolute Beginners', 'heatmap': [{'end': 1219.983, 'start': 1134.326, 'weight': 1}], 'summary': 'The crash course covers front end development basics with html, css, and javascript, emphasizing mobile-first design, html structure, responsive design, css styling and layout using flexbox and css grid, and introducing javascript for interactive features, including animations and overlays.', 'chapters': [{'end': 680.373, 'segs': [{'end': 72.162, 'src': 'embed', 'start': 31.349, 'weight': 0, 'content': [{'end': 32.709, 'text': 'So very exciting indeed.', 'start': 31.349, 'duration': 1.36}, {'end': 41.211, 'text': 'And basically this is going to assume this crash course is assumed that you have no knowledge of HTML, CSS, or JavaScript.', 'start': 33.069, 'duration': 8.142}, {'end': 44.652, 'text': "Now we're not going to be getting very much at all into JavaScript at the very end.", 'start': 41.251, 'duration': 3.401}, {'end': 48.693, 'text': "I'll get your feet wet a tad bit, but we are going to be focusing on.", 'start': 44.912, 'duration': 3.781}, {'end': 61.177, 'text': 'you know what the role of a front end developer is and how you use HTML and CSS to make projects a reality in the browser and on your handheld devices using web technologies.', 'start': 48.693, 'duration': 12.484}, {'end': 64.378, 'text': "And that's essentially what it's all about as a front end developer.", 'start': 61.557, 'duration': 2.821}, {'end': 66.459, 'text': "So I'm going to show you right here.", 'start': 64.839, 'duration': 1.62}, {'end': 67.98, 'text': 'This is the project.', 'start': 66.639, 'duration': 1.341}, {'end': 72.162, 'text': 'Again, this is something that I designed myself as a UI UX designer.', 'start': 68.02, 'duration': 4.142}], 'summary': 'Crash course assumes no prior knowledge, focuses on html and css for front end development.', 'duration': 40.813, 'max_score': 31.349, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w31349.jpg'}, {'end': 181.058, 'src': 'embed', 'start': 157.824, 'weight': 2, 'content': [{'end': 164.967, 'text': "So download for Windows assuming you're on Windows or if you're on a different operating system you could choose Mac OS, Linux as well.", 'start': 157.824, 'duration': 7.143}, {'end': 171.93, 'text': "Alright so once you download that make sure you install it and then we'll go ahead and create our project folder.", 'start': 165.387, 'duration': 6.543}, {'end': 176.956, 'text': "All right, so after you've installed Visual Studio Code, we want to create a folder for a project.", 'start': 172.213, 'duration': 4.743}, {'end': 181.058, 'text': "So we're going to go ahead and open up your command line or your console.", 'start': 177.396, 'duration': 3.662}], 'summary': 'Download visual studio code for windows, mac os, or linux, install it, and create a project folder.', 'duration': 23.234, 'max_score': 157.824, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w157824.jpg'}, {'end': 471.323, 'src': 'embed', 'start': 443.532, 'weight': 3, 'content': [{'end': 451.355, 'text': 'Your job as a front end developer is to take this and make it a reality on all devices and make sure it works on all devices.', 'start': 443.532, 'duration': 7.823}, {'end': 457.878, 'text': 'You can also see over here, we have sort of a mobile view of the same layout.', 'start': 451.856, 'duration': 6.022}, {'end': 466.061, 'text': "So typically in a real serious project, you would have a design for each type of device that's out there.", 'start': 458.378, 'duration': 7.683}, {'end': 471.323, 'text': 'So for here, we have an iPhone XRXX Max sort of appearance.', 'start': 466.361, 'duration': 4.962}], 'summary': 'Front end developer to ensure layout works on all devices, including iphone xrxx max.', 'duration': 27.791, 'max_score': 443.532, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w443532.jpg'}, {'end': 527.199, 'src': 'embed', 'start': 496.501, 'weight': 4, 'content': [{'end': 498.562, 'text': 'so this is our goal.', 'start': 496.501, 'duration': 2.061}, {'end': 502.904, 'text': 'we want to make this thing a reality through html and css.', 'start': 498.562, 'duration': 4.342}, {'end': 509.667, 'text': "now there's also something that you should be very familiar with or become familiar with, and that is what's called mobile first design.", 'start': 502.904, 'duration': 6.763}, {'end': 516.95, 'text': "all right, so the idea is, when you're a front-end developer and you're writing out your html and your css,", 'start': 509.667, 'duration': 7.283}, {'end': 520.772, 'text': "you want to make sure you're operating under the mentality of mobile first.", 'start': 516.95, 'duration': 3.822}, {'end': 527.199, 'text': 'Alright. so just to boil it down, very simply, when we go to create our HTML,', 'start': 521.232, 'duration': 5.967}], 'summary': 'Goal: implement mobile-first design in html and css', 'duration': 30.698, 'max_score': 496.501, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w496501.jpg'}, {'end': 589.31, 'src': 'embed', 'start': 565.393, 'weight': 5, 'content': [{'end': 572.098, 'text': 'All right, so I want you to start thinking about this layout in terms of blocks.', 'start': 565.393, 'duration': 6.705}, {'end': 575.56, 'text': 'Everything here is a block or a container of some sort.', 'start': 572.538, 'duration': 3.022}, {'end': 580.083, 'text': "So if I get out this tool, you don't have to follow along even if you don't have this app.", 'start': 576.081, 'duration': 4.002}, {'end': 582.765, 'text': "I just kind of want to demonstrate what I'm talking about.", 'start': 580.103, 'duration': 2.662}, {'end': 587.549, 'text': 'This right here, just make this something that really sticks out quite well.', 'start': 582.965, 'duration': 4.584}, {'end': 589.31, 'text': "We'll make this larger.", 'start': 588.429, 'duration': 0.881}], 'summary': 'Demonstrating layout using blocks and containers, emphasizing making an element stick out and enlarging it.', 'duration': 23.917, 'max_score': 565.393, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w565393.jpg'}], 'start': 0.189, 'title': 'Front end development basics', 'summary': 'Covers the basics of front end development using html, css, and javascript, designed for beginners, including a project demonstration and guidance on setting up the code editor and necessary plugins, and creating an index.html file, the role of a front-end developer, mobile-first design approach, and thinking about web layout in terms of blocks.', 'chapters': [{'end': 298.293, 'start': 0.189, 'title': 'Front end developer crash course 2020', 'summary': 'Covers the basics of front end development using html, css, and javascript, designed for beginners, including a project demonstration and guidance on setting up the code editor and necessary plugins.', 'duration': 298.104, 'highlights': ['The chapter introduces the 2020 front end developer crash course for beginners, focusing on HTML, CSS, and JavaScript. The course is designed for beginners with no prior knowledge of HTML, CSS, or JavaScript.', 'The project demonstration emphasizes the role of a front end developer in creating responsive web projects using HTML and CSS. The tutorial includes step-by-step guidance on creating a responsive project that adapts to different device widths.', 'Guidance is provided on setting up Visual Studio Code as the code editor, including instructions for creating a project folder and installing the live server plugin. The tutorial includes detailed instructions on setting up Visual Studio Code as the code editor and installing the live server plugin for live project previews.']}, {'end': 680.373, 'start': 298.654, 'title': 'Creating html files and front end development', 'summary': 'Covers creating an index.html file, the role of a front-end developer, mobile-first design approach, and thinking about web layout in terms of blocks.', 'duration': 381.719, 'highlights': ["The job role of a front-end developer is to take a UI/UX designer's prototype and make it a reality on all devices, ensuring it works on all devices and device widths.", 'The chapter emphasizes the importance of adopting a mobile-first design mentality when creating HTML and CSS, progressively enhancing the layout to work for tablets and desktops.', 'The concept of thinking about web layout in terms of blocks is introduced, highlighting the need to define elements as blocks through HTML.', 'The chapter explains the significance of having a dual monitor setup or an ultra-wide monitor for efficient coding and visualization of the mockup while working on HTML and CSS.']}], 'duration': 680.184, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w189.jpg', 'highlights': ['The course is designed for beginners with no prior knowledge of HTML, CSS, or JavaScript.', 'The project demonstration emphasizes the role of a front end developer in creating responsive web projects using HTML and CSS.', 'Guidance is provided on setting up Visual Studio Code as the code editor, including instructions for creating a project folder and installing the live server plugin.', "The job role of a front-end developer is to take a UI/UX designer's prototype and make it a reality on all devices, ensuring it works on all devices and device widths.", 'The chapter emphasizes the importance of adopting a mobile-first design mentality when creating HTML and CSS, progressively enhancing the layout to work for tablets and desktops.', 'The concept of thinking about web layout in terms of blocks is introduced, highlighting the need to define elements as blocks through HTML.']}, {'end': 2000.127, 'segs': [{'end': 760.513, 'src': 'embed', 'start': 681.154, 'weight': 0, 'content': [{'end': 687.278, 'text': "And then that way you kind of see the type of HTML elements that you're going to have to create in order to make this necessary.", 'start': 681.154, 'duration': 6.124}, {'end': 689.239, 'text': "So first of all, I'm kind of getting ahead of myself.", 'start': 687.618, 'duration': 1.621}, {'end': 695.243, 'text': 'What exactly is HTML in and of itself? HTML stands for hypertext markup language.', 'start': 689.359, 'duration': 5.884}, {'end': 699.086, 'text': 'It is the standard markup language for building layouts and websites.', 'start': 695.644, 'duration': 3.442}, {'end': 705.11, 'text': 'You build out HTML elements and their attributes, which serve as a structure or the skeleton of your layouts.', 'start': 699.526, 'duration': 5.584}, {'end': 710.576, 'text': "So HTML without CSS though is usually quite ugly, but it's required.", 'start': 705.71, 'duration': 4.866}, {'end': 715.561, 'text': "So you can't have flesh without the bones and you'll see what exactly I mean as we proceed.", 'start': 710.596, 'duration': 4.965}, {'end': 723.668, 'text': "So, now that you know what HTML is, we're going to start by here in Visual Studio Code,", 'start': 715.881, 'duration': 7.787}, {'end': 727.171, 'text': 'hitting shift and the exclamation point to create an exclamation point.', 'start': 723.668, 'duration': 3.503}, {'end': 729.932, 'text': 'And you can see it says right here, Emmet abbreviation.', 'start': 727.471, 'duration': 2.461}, {'end': 738.959, 'text': "So, in Visual Studio Code we have what are called Emmet abbreviations, and really it's a good idea to use them as much as possible,", 'start': 730.613, 'duration': 8.346}, {'end': 747.925, 'text': "because what it helps you do is it creates boilerplate HTML and it makes your life easier, so you don't have to create all HTML from scratch.", 'start': 738.959, 'duration': 8.966}, {'end': 753.749, 'text': "So if I click on it, Let me hit control B to get rid of that sidebar so we can see everything that's happening here.", 'start': 748.325, 'duration': 5.424}, {'end': 756.811, 'text': 'We can see that this is what it created for us.', 'start': 754.769, 'duration': 2.042}, {'end': 760.513, 'text': 'If we had to type all this by default, it would have taken quite a while.', 'start': 757.071, 'duration': 3.442}], 'summary': 'Html is the standard markup language for building layouts and websites, using emmet abbreviations in visual studio code to create boilerplate html, making the process easier and faster.', 'duration': 79.359, 'max_score': 681.154, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w681154.jpg'}, {'end': 864.672, 'src': 'embed', 'start': 835.741, 'weight': 3, 'content': [{'end': 837.782, 'text': "We have the body tag and it's just empty right here.", 'start': 835.741, 'duration': 2.041}, {'end': 842.983, 'text': "So first, before we get to the body, which is where we're going to be working at for the most part,", 'start': 838.542, 'duration': 4.441}, {'end': 848.285, 'text': "let's talk about the head element and exactly what the purpose of the head element is.", 'start': 842.983, 'duration': 5.302}, {'end': 852.246, 'text': 'The HTML head element contains various HTML elements inside of it.', 'start': 849.025, 'duration': 3.221}, {'end': 855.747, 'text': 'These elements contain data about the HTML document itself.', 'start': 852.746, 'duration': 3.001}, {'end': 863.031, 'text': 'So these include information about the page title, which shows up at the top of the browser, character sets, CSS styles,', 'start': 856.207, 'duration': 6.824}, {'end': 864.672, 'text': 'scripts and other information.', 'start': 863.031, 'duration': 1.641}], 'summary': 'The html head element contains various data about the html document, including page title, character sets, css styles, and scripts.', 'duration': 28.931, 'max_score': 835.741, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w835741.jpg'}, {'end': 1118.814, 'src': 'embed', 'start': 1063.505, 'weight': 1, 'content': [{'end': 1072.255, 'text': "So that's a very important concept for a beginner to understand that all of your stuff that you write in here in your HTML document is primarily going to be within the body tags.", 'start': 1063.505, 'duration': 8.75}, {'end': 1080.988, 'text': "Now, before we actually begin writing HTML, because this is a crash course, meaning we're not gonna cover every single thing that has to do with HTML,", 'start': 1072.625, 'duration': 8.363}, {'end': 1082.129, 'text': 'CSS and JavaScript.', 'start': 1080.988, 'duration': 1.141}, {'end': 1084.87, 'text': 'that would be a million hours long.', 'start': 1082.129, 'duration': 2.741}, {'end': 1091.553, 'text': 'I wanted to point out the w3schools.com forward slash HTML website where,', 'start': 1084.87, 'duration': 6.683}, {'end': 1098.798, 'text': "if you really and if you're really interested in front of developing the learning html, you should definitely check out this resource for you,", 'start': 1092.333, 'duration': 6.465}, {'end': 1102.241, 'text': 'because it tells you all about html here.', 'start': 1098.798, 'duration': 3.443}, {'end': 1111.829, 'text': "um, the the introduction html elements, which we'll talk about, attributes, but i'm not going to be going over every single thing that you see here.", 'start': 1102.241, 'duration': 9.588}, {'end': 1113.21, 'text': "so i just wanted to let you know there's,", 'start': 1111.829, 'duration': 1.381}, {'end': 1118.814, 'text': "of course there's a ton of other resources from which you can learn all about more in-depth in terms of html,", 'start': 1113.21, 'duration': 5.604}], 'summary': 'Introduction to html and resources for learning it, w3schools.com/html website is recommended.', 'duration': 55.309, 'max_score': 1063.505, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w1063505.jpg'}, {'end': 1219.983, 'src': 'heatmap', 'start': 1134.326, 'weight': 1, 'content': [{'end': 1139.45, 'text': 'so if it is something that you like, definitely check this resource out and others, Okay.', 'start': 1134.326, 'duration': 5.124}, {'end': 1146.796, 'text': 'So we have our blank document here and we want to get to this right here.', 'start': 1139.951, 'duration': 6.845}, {'end': 1148.056, 'text': 'All right.', 'start': 1147.716, 'duration': 0.34}, {'end': 1151.599, 'text': 'How do we start? How do we even begin thinking about this? All right.', 'start': 1148.116, 'duration': 3.483}, {'end': 1157.203, 'text': 'So like I said before, a little bit, a little bit ago, think of everything in terms of blocks.', 'start': 1152.059, 'duration': 5.144}, {'end': 1157.924, 'text': 'All right.', 'start': 1157.583, 'duration': 0.341}, {'end': 1164.989, 'text': "If we're looking at this high fidelity mockup, what would be the first block?", 'start': 1158.704, 'duration': 6.285}, {'end': 1172.824, 'text': 'that we should start in with our HTML to help define the skeleton structure of this layout?', 'start': 1165.937, 'duration': 6.887}, {'end': 1177.528, 'text': 'So I would say the very first element is actually this photograph that we see over here.', 'start': 1172.964, 'duration': 4.564}, {'end': 1183.214, 'text': "So if I expand this just a bit, we'll see we have this large photograph.", 'start': 1177.609, 'duration': 5.605}, {'end': 1188.839, 'text': 'And this is really the first element that we should consider.', 'start': 1184.795, 'duration': 4.044}, {'end': 1193.861, 'text': "It's this entire block as outlined in this section right here.", 'start': 1189.778, 'duration': 4.083}, {'end': 1197.585, 'text': "okay?. So let's create the HTML element.", 'start': 1193.861, 'duration': 3.724}, {'end': 1198.886, 'text': 'for that, all right?', 'start': 1197.585, 'duration': 1.301}, {'end': 1200.887, 'text': 'So which element would we use?', 'start': 1199.006, 'duration': 1.881}, {'end': 1208.173, 'text': "Now there's, in terms of HTML, everything are HTML elements and there's a ton of them.", 'start': 1200.947, 'duration': 7.226}, {'end': 1215.159, 'text': "And I'm not gonna cover them all, but for this particular element, I'm going to just use what's called a div.", 'start': 1208.874, 'duration': 6.285}, {'end': 1219.983, 'text': 'Now a div, is arguably one of the most common HTML elements out there.', 'start': 1215.299, 'duration': 4.684}], 'summary': 'Start by structuring the layout with html elements, beginning with the photograph block.', 'duration': 85.657, 'max_score': 1134.326, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w1134326.jpg'}, {'end': 1193.861, 'src': 'embed', 'start': 1165.937, 'weight': 2, 'content': [{'end': 1172.824, 'text': 'that we should start in with our HTML to help define the skeleton structure of this layout?', 'start': 1165.937, 'duration': 6.887}, {'end': 1177.528, 'text': 'So I would say the very first element is actually this photograph that we see over here.', 'start': 1172.964, 'duration': 4.564}, {'end': 1183.214, 'text': "So if I expand this just a bit, we'll see we have this large photograph.", 'start': 1177.609, 'duration': 5.605}, {'end': 1188.839, 'text': 'And this is really the first element that we should consider.', 'start': 1184.795, 'duration': 4.044}, {'end': 1193.861, 'text': "It's this entire block as outlined in this section right here.", 'start': 1189.778, 'duration': 4.083}], 'summary': 'Html defines layout with a large photograph as the first element.', 'duration': 27.924, 'max_score': 1165.937, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w1165937.jpg'}, {'end': 1483.582, 'src': 'embed', 'start': 1457.204, 'weight': 6, 'content': [{'end': 1463.59, 'text': "And if we hover over certain areas, certain HTML elements and tags, we'll see that certain things happen over here.", 'start': 1457.204, 'duration': 6.386}, {'end': 1468.195, 'text': 'So we can see our body tag, and then we have our div class hero.', 'start': 1464.151, 'duration': 4.044}, {'end': 1475.318, 'text': "Now, it's not shown because by default, divs, the browser doesn't style it in any way that you can see it.", 'start': 1468.795, 'duration': 6.523}, {'end': 1483.582, 'text': "It's just kind of an empty thing until you actually use CSS to give it some sort of style, like giving it a background or giving it a height.", 'start': 1475.878, 'duration': 7.704}], 'summary': 'Html elements like body tag and div class hero are styled using css for visibility.', 'duration': 26.378, 'max_score': 1457.204, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w1457204.jpg'}], 'start': 681.154, 'title': 'Html basics and website structure', 'summary': 'Covers the basics of html, including its definition and purpose for building layouts and websites, use of emmet abbreviations, creation of html boilerplate, defining website skeleton, and emphasizing semantic html elements. it also recommends w3schools.com as a resource for learning html.', 'chapters': [{'end': 738.959, 'start': 681.154, 'title': 'Html basics: structure and layout', 'summary': 'Covers the basics of html, including its definition, its purpose as a markup language for building layouts and websites, and the use of emmet abbreviations in visual studio code for efficient coding.', 'duration': 57.805, 'highlights': ['HTML is the standard markup language for building layouts and websites, serving as the structure or skeleton of layouts.', 'Emmet abbreviations in Visual Studio Code are recommended for efficient coding and can be accessed using the shortcut shift + exclamation point.', 'HTML, though usually visually unappealing without CSS, is essential for creating the necessary structure for websites.']}, {'end': 1287.192, 'start': 738.959, 'title': 'Html boilerplate and basic structure', 'summary': 'Explains the creation of html boilerplate, the purpose of html elements, and the use of div element to define the structure, emphasizing the importance of body tag and recommending w3schools.com as a resource for learning html.', 'duration': 548.233, 'highlights': ['The chapter explains the creation of HTML boilerplate The chapter discusses how HTML boilerplate helps in creating boilerplate HTML and makes the process of coding easier, saving time and effort.', 'the purpose of HTML elements The chapter details the purpose of HTML elements, such as doc type, HTML tag, head element containing data about the HTML document, and the body tag where most of the frontend development work takes place.', 'use of div element to define the structure The chapter emphasizes the use of the div element to define a section or area of the layout, providing a way to start creating the skeleton structure of the HTML document.', 'importance of body tag The chapter highlights that the body tag is where 95% of the time is spent as a frontend developer, emphasizing that all HTML content is primarily placed within the body tags.', 'recommending w3schools.com as a resource for learning HTML The chapter recommends w3schools.com as a resource for learning HTML, acknowledging its comprehensive coverage of HTML elements, attributes, and other related resources for in-depth learning.']}, {'end': 2000.127, 'start': 1287.832, 'title': 'Creating website skeleton', 'summary': 'Explains how to create a website skeleton using html, including defining sections, adding a logo and headline, and using semantic html elements, with emphasis on the purpose and attributes of the elements.', 'duration': 712.295, 'highlights': ['The importance of using semantic HTML elements and classes for website structure and styling is explained, with a focus on the purpose of the elements and their attributes. The transcript emphasizes the use of semantic HTML elements and classes for structuring and styling a website, highlighting the purpose of these elements and their attributes for effective styling and functionality.', 'The process of creating a website skeleton using HTML, including defining sections, adding a logo and headline, is detailed, providing insights into the structure and elements required for a website layout. The transcript provides a detailed explanation of creating a website skeleton using HTML, outlining the process of defining sections, adding a logo, and creating a headline, offering insights into the necessary structure and elements for a website layout.', 'The use of HTML tags and elements, such as div, section, anchor, and heading, is demonstrated to create a website skeleton, emphasizing the importance of each element in defining website structure and content. The transcript demonstrates the use of HTML tags and elements, such as div, section, anchor, and heading, to create a website skeleton, highlighting the significance of each element in defining the structure and content of the website.']}], 'duration': 1318.973, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w681154.jpg', 'highlights': ['HTML is the standard markup language for building layouts and websites, serving as the structure or skeleton of layouts.', 'The chapter recommends w3schools.com as a resource for learning HTML, acknowledging its comprehensive coverage of HTML elements, attributes, and other related resources for in-depth learning.', 'The chapter emphasizes the use of the div element to define a section or area of the layout, providing a way to start creating the skeleton structure of the HTML document.', 'The chapter details the purpose of HTML elements, such as doc type, HTML tag, head element containing data about the HTML document, and the body tag where most of the frontend development work takes place.', 'The transcript emphasizes the use of semantic HTML elements and classes for structuring and styling a website, highlighting the purpose of these elements and their attributes for effective styling and functionality.', 'The transcript provides a detailed explanation of creating a website skeleton using HTML, outlining the process of defining sections, adding a logo, and creating a headline, offering insights into the necessary structure and elements for a website layout.', 'The transcript demonstrates the use of HTML tags and elements, such as div, section, anchor, and heading, to create a website skeleton, highlighting the significance of each element in defining the structure and content of the website.', 'Emmet abbreviations in Visual Studio Code are recommended for efficient coding and can be accessed using the shortcut shift + exclamation point.', 'HTML, though usually visually unappealing without CSS, is essential for creating the necessary structure for websites.', 'The chapter highlights that the body tag is where 95% of the time is spent as a frontend developer, emphasizing that all HTML content is primarily placed within the body tags.', 'The chapter discusses how HTML boilerplate helps in creating boilerplate HTML and makes the process of coding easier, saving time and effort.']}, {'end': 2917.715, 'segs': [{'end': 2053.058, 'src': 'embed', 'start': 2024.12, 'weight': 1, 'content': [{'end': 2028.982, 'text': 'So we have to create the html market for that, and then all the stuff inside of it, like the form.', 'start': 2024.12, 'duration': 4.862}, {'end': 2033.951, 'text': 'So to create that element, we could use a div tag.', 'start': 2029.986, 'duration': 3.965}, {'end': 2037.156, 'text': 'All right, so again, we used a div tag once already.', 'start': 2034.692, 'duration': 2.464}, {'end': 2042.463, 'text': "We're gonna use another one for that form container, the white section, and then all the stuff inside of it.", 'start': 2037.817, 'duration': 4.646}, {'end': 2043.484, 'text': 'So form.', 'start': 2042.723, 'duration': 0.761}, {'end': 2053.058, 'text': 'so remember, you create a class, a div class, by just typing in period and then the name of the class that you want to name it,', 'start': 2043.484, 'duration': 9.574}], 'summary': 'Creating an html market with div tags and form container.', 'duration': 28.938, 'max_score': 2024.12, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w2024120.jpg'}, {'end': 2414.713, 'src': 'embed', 'start': 2389.123, 'weight': 0, 'content': [{'end': 2399.466, 'text': 'we have to think about the the larger versions and the other iterations of the design so that we can properly mark up our HTML or create the right HTML elements and structure correctly.', 'start': 2389.123, 'duration': 10.343}, {'end': 2403.748, 'text': 'So as it stands right now we have these four elements,', 'start': 2399.966, 'duration': 3.782}, {'end': 2414.713, 'text': 'but we need a way for the CSS to easily create two columns once we get to the desktop version in responsive design.', 'start': 2403.748, 'duration': 10.965}], 'summary': 'Consider larger versions and iterations to properly mark up html for four elements and create two columns for desktop in responsive design.', 'duration': 25.59, 'max_score': 2389.123, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w2389123.jpg'}, {'end': 2892.735, 'src': 'embed', 'start': 2862.477, 'weight': 3, 'content': [{'end': 2869.2, 'text': "You can see it's really large, and we'll deal with that with CSS to get that more situated as it needs to be.", 'start': 2862.477, 'duration': 6.723}, {'end': 2874.763, 'text': "If you're using an image, by the way, we can see that it has this alt.", 'start': 2870.28, 'duration': 4.483}, {'end': 2879.306, 'text': "tag right here, and that's basically for accessibility purposes.", 'start': 2875.763, 'duration': 3.543}, {'end': 2883.389, 'text': 'you always wanna have an alt tag with your images, alright?', 'start': 2879.306, 'duration': 4.083}, {'end': 2891.795, 'text': "So the alt, I'm gonna say this, is just picture of food in a bowl.", 'start': 2883.489, 'duration': 8.306}, {'end': 2892.735, 'text': 'Okay, there we go.', 'start': 2892.035, 'duration': 0.7}], 'summary': 'Css will be used to handle large image, emphasizing the importance of alt tag for accessibility.', 'duration': 30.258, 'max_score': 2862.477, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w2862477.jpg'}], 'start': 2000.127, 'title': 'Html and responsive design', 'summary': 'Covers creating form container and elements using html, including div tags and form elements for city input. it also discusses structuring html elements, css styling, creating div classes, and sections, and considering responsive design for mobile and desktop versions. additionally, it addresses structuring html for responsive design, handling mobile and desktop variations, and incorporating images with accessibility features.', 'chapters': [{'end': 2221.478, 'start': 2000.127, 'title': 'Creating form container in html', 'summary': 'Covers creating a form container and its elements using html, including the use of div tags and form elements, with a focus on creating a label and input field for a city.', 'duration': 221.351, 'highlights': ['The chapter covers creating a form container and its elements using HTML. The transcript explains the process of creating a form container and its elements using HTML, such as using div tags and form elements.', 'Explaining the use of div tags and form elements in creating the form container. The speaker explains the use of div tags for creating the form container and mentions the use of form elements like a label and input field.', 'Focus on creating a label and input field for a city within the form container. The speaker focuses on creating a label and input field for the city within the form container, explaining the attributes and their purpose.']}, {'end': 2647.216, 'start': 2221.518, 'title': 'Html structure and css styling', 'summary': 'Discusses structuring html elements and the use of css to style them, including creating div classes and sections for different content, and considering responsive design for mobile and desktop versions.', 'duration': 425.698, 'highlights': ['The chapter discusses the process of structuring HTML elements and the use of CSS to style them, including creating div classes and sections for different content. It also emphasizes the importance of considering responsive design for mobile and desktop versions.', 'The speaker explains the need for creating div classes and sections for different content and the importance of responsive design for mobile and desktop versions.', 'The speaker mentions the process of creating div classes and sections for different content, including the need to properly mark up HTML elements and structure them correctly for different design iterations.', 'The chapter emphasizes the use of CSS to style HTML elements and the importance of responsive design for different screen sizes, particularly for mobile and desktop versions.']}, {'end': 2917.715, 'start': 2647.216, 'title': 'Html structure and responsive design', 'summary': 'Discusses structuring html for responsive design, including handling mobile and desktop variations, and incorporating images with accessibility features.', 'duration': 270.499, 'highlights': ['The chapter emphasizes the importance of considering both mobile and desktop variations when structuring HTML, as seen in the example of stacking elements for mobile and using columns for the desktop version.', 'It outlines the process of structuring HTML elements for a specific layout, such as encasing type-based elements inside a div wrapper and using appropriate header tags for content hierarchy.', 'The tutorial details the inclusion of images in HTML, covering the use of image tags, specifying image sources, creating image folders, and incorporating alt tags for accessibility purposes.', 'It provides practical instructions for downloading and organizing asset files, such as images, and highlights the significance of providing alt tags for images to enhance accessibility.', 'The chapter addresses the importance of alt tags for images, emphasizing their role in providing information for users with visual impairments who rely on screen readers for web content.']}], 'duration': 917.588, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w2000127.jpg', 'highlights': ['The chapter emphasizes the importance of considering both mobile and desktop variations when structuring HTML, as seen in the example of stacking elements for mobile and using columns for the desktop version.', 'The chapter covers creating a form container and its elements using HTML. The transcript explains the process of creating a form container and its elements using HTML, such as using div tags and form elements.', 'The chapter discusses the process of structuring HTML elements and the use of CSS to style them, including creating div classes and sections for different content. It also emphasizes the importance of considering responsive design for mobile and desktop versions.', 'The tutorial details the inclusion of images in HTML, covering the use of image tags, specifying image sources, creating image folders, and incorporating alt tags for accessibility purposes.', 'The chapter addresses the importance of alt tags for images, emphasizing their role in providing information for users with visual impairments who rely on screen readers for web content.']}, {'end': 3680.106, 'segs': [{'end': 2965.767, 'src': 'embed', 'start': 2941.174, 'weight': 1, 'content': [{'end': 2948.918, 'text': "So it's generally easier just to use CSS to make it a background image as opposed to using an image tag in the HTML.", 'start': 2941.174, 'duration': 7.744}, {'end': 2950.059, 'text': 'Hopefully that makes sense.', 'start': 2949.178, 'duration': 0.881}, {'end': 2950.899, 'text': "My dog's barking.", 'start': 2950.159, 'duration': 0.74}, {'end': 2951.66, 'text': "Hopefully you can't hear that.", 'start': 2950.959, 'duration': 0.701}, {'end': 2958.183, 'text': "So right here, this is just a standard image and nothing's overlapping it.", 'start': 2952.6, 'duration': 5.583}, {'end': 2961.365, 'text': 'We can just use an image tag in HTML to show it.', 'start': 2958.223, 'duration': 3.142}, {'end': 2965.767, 'text': 'Okay, so that is it for the actual HTML.', 'start': 2962.065, 'duration': 3.702}], 'summary': 'Using css for background images is easier than using html image tags.', 'duration': 24.593, 'max_score': 2941.174, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w2941174.jpg'}, {'end': 3019.957, 'src': 'embed', 'start': 2991.745, 'weight': 0, 'content': [{'end': 2996.908, 'text': 'You can control the layout structure, colors, typography, alignment, animations, and even more.', 'start': 2991.745, 'duration': 5.163}, {'end': 3002.191, 'text': 'And CSS consists of rule sets, selectors, properties, and values.', 'start': 2997.528, 'duration': 4.663}, {'end': 3004.712, 'text': "And you'll see how all of this works in a second.", 'start': 3002.631, 'duration': 2.081}, {'end': 3006.973, 'text': "okay. so let's get to the css here.", 'start': 3004.992, 'duration': 1.981}, {'end': 3011.534, 'text': "uh, and you can see we're gonna write all of our css in the main.css file.", 'start': 3006.973, 'duration': 4.561}, {'end': 3013.295, 'text': "now, here's the thing.", 'start': 3011.534, 'duration': 1.761}, {'end': 3019.957, 'text': "you can actually write css inside of an html document and it's worth just showing you this.", 'start': 3013.295, 'duration': 6.662}], 'summary': 'Learn to control layout, colors, typography with css, and how to write css in a separate file.', 'duration': 28.212, 'max_score': 2991.745, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w2991745.jpg'}, {'end': 3083.273, 'src': 'embed', 'start': 3053.759, 'weight': 2, 'content': [{'end': 3056.881, 'text': "This is our HTML document, so we're only going to leave HTML in there.", 'start': 3053.759, 'duration': 3.122}, {'end': 3063.147, 'text': "And then for our CSS, we're going to put in our CSS inside of the CSS file.", 'start': 3057.442, 'duration': 5.705}, {'end': 3065.538, 'text': "That's just to let you know.", 'start': 3064.577, 'duration': 0.961}, {'end': 3075.526, 'text': 'By the way, you can even put CSS specifically using a style tag on each of your HTML elements right here.', 'start': 3066.299, 'duration': 9.227}, {'end': 3083.273, 'text': 'So you can do that with style equals and then you put your CSS property values like background and then we say white or whatever.', 'start': 3075.967, 'duration': 7.306}], 'summary': 'Html and css are separated; css can be applied using style tag in html.', 'duration': 29.514, 'max_score': 3053.759, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w3053759.jpg'}, {'end': 3149.839, 'src': 'embed', 'start': 3121.736, 'weight': 3, 'content': [{'end': 3124.859, 'text': 'And this particular font, as you can see, is called Montserrat.', 'start': 3121.736, 'duration': 3.123}, {'end': 3128.562, 'text': 'A lot of my channel regulars know I just love Montserrat.', 'start': 3125.86, 'duration': 2.702}, {'end': 3134.107, 'text': "I have it installed on my system, so that's what a lot of other people who watch my channel watch.", 'start': 3129.083, 'duration': 5.024}, {'end': 3135.028, 'text': 'I just like the font.', 'start': 3134.187, 'duration': 0.841}, {'end': 3136.549, 'text': 'So we need this font.', 'start': 3135.088, 'duration': 1.461}, {'end': 3143.755, 'text': 'We need to tell the CSS document that we want to use this font for our type.', 'start': 3137.209, 'duration': 6.546}, {'end': 3149.839, 'text': 'So you do that in your CSS file, although you can also do it in the HTML file.', 'start': 3144.435, 'duration': 5.404}], 'summary': 'Using montserrat font for css and html files for consistent branding.', 'duration': 28.103, 'max_score': 3121.736, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w3121736.jpg'}, {'end': 3399.609, 'src': 'embed', 'start': 3374.16, 'weight': 4, 'content': [{'end': 3378.722, 'text': 'of course it allows you to specify different fallbacks.', 'start': 3374.16, 'duration': 4.562}, {'end': 3384.725, 'text': "if, for whatever reason, they can't download this, it'll just tell their system to use a sans-serif font,", 'start': 3378.722, 'duration': 6.003}, {'end': 3391.506, 'text': "which is a font that's more clean and it doesn't have the little things hanging off the side of the letters and such.", 'start': 3384.725, 'duration': 6.781}, {'end': 3395.928, 'text': "So if we save this now, let's get this up before I save it so I can show you.", 'start': 3392.007, 'duration': 3.921}, {'end': 3399.609, 'text': 'Once I save, it is now using that new font.', 'start': 3396.528, 'duration': 3.081}], 'summary': 'Allows specifying fallbacks for font, enabling clean sans-serif font if primary font cannot be downloaded.', 'duration': 25.449, 'max_score': 3374.16, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w3374160.jpg'}, {'end': 3488.123, 'src': 'embed', 'start': 3462.753, 'weight': 6, 'content': [{'end': 3469.637, 'text': "But for me, I'm gonna choose to get rid of that entirely And the way we'll do that is to put in the margin property and zero.", 'start': 3462.753, 'duration': 6.884}, {'end': 3473.057, 'text': 'save it and there we go.', 'start': 3470.896, 'duration': 2.161}, {'end': 3474.378, 'text': 'everything is up against the browser.', 'start': 3473.057, 'duration': 1.321}, {'end': 3480.8, 'text': "but of course ours doesn't look like that and need the prototype, but i simply want to be able to handle the browser padding myself.", 'start': 3474.378, 'duration': 6.422}, {'end': 3482.121, 'text': "so that's why i'm resetting to zero.", 'start': 3480.8, 'duration': 1.321}, {'end': 3488.123, 'text': "i do that on most projects in the body element, as we've seen in the body rule set, rather as we've seen here.", 'start': 3482.121, 'duration': 6.002}], 'summary': 'Resetting browser padding to zero for consistent layout.', 'duration': 25.37, 'max_score': 3462.753, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w3462753.jpg'}, {'end': 3605.478, 'src': 'embed', 'start': 3578.515, 'weight': 5, 'content': [{'end': 3584.524, 'text': "For instance, if you knew you didn't want to use a background image, you could use instead background hyphen color.", 'start': 3578.515, 'duration': 6.009}, {'end': 3586.666, 'text': 'and then the name of the color.', 'start': 3585.265, 'duration': 1.401}, {'end': 3593.711, 'text': 'For us, we know that we want to use both an image and possibly a color as well.', 'start': 3587.366, 'duration': 6.345}, {'end': 3605.478, 'text': 'And so what I mean by that is you can specify in your CSS background property both a color and an image.', 'start': 3594.551, 'duration': 10.927}], 'summary': 'Css allows specifying both background color and image for a webpage.', 'duration': 26.963, 'max_score': 3578.515, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w3578515.jpg'}], 'start': 2917.735, 'title': 'Using css for photographs and custom fonts', 'summary': "Covers using css for photograph referencing, highlighting its advantages, as well as importing and styling custom fonts, using 'montserrat' as an example. it includes details on importation, load time customization, fallbacks, application in the body element, and css background properties.", 'chapters': [{'end': 3095.534, 'start': 2917.735, 'title': 'Using css to reference photographs', 'summary': 'Discusses using css to reference photographs as background images, emphasizing its advantages over using an image tag in html and explaining the role and organization of css in web design.', 'duration': 177.799, 'highlights': ['CSS used to reference photographs as background images instead of using an image tag in HTML for easier organization and to avoid overlapping elements. Using CSS for background images instead of HTML image tags allows for easier organization and prevents overlapping elements.', 'Explanation of the role and organization of CSS in web design, including its ability to control layout structure, colors, typography, alignment, and animations. CSS plays a crucial role in web design, allowing for control over layout structure, colors, typography, alignment, and animations.', "Discussion on the option of writing CSS inside an HTML document, but the preference for organizing CSS in its own file for better readability and separation of concerns. While it's possible to write CSS inside an HTML document, the preference is for organizing CSS in its own file for better readability and separation of concerns."]}, {'end': 3680.106, 'start': 3096.394, 'title': 'Importing and styling custom fonts', 'summary': "Discusses importing and styling custom fonts, using the example of the 'montserrat' font, covering how to import it via css, customize load time, set fallbacks, and use it in the body element. it also addresses removing default browser margins and applying background properties in css.", 'duration': 583.712, 'highlights': ["Importing 'Montserrat' font via CSS The chapter demonstrates importing the 'Montserrat' font via CSS by using the @import rule in the style sheet, allowing for the customization of font weights and load time.", "Setting font fallbacks and usage in the body element It covers setting font fallbacks in case of download failure and applying the 'Montserrat' font to the body element, ensuring consistent usage throughout the website.", 'Removing default browser margins The chapter discusses the removal of default browser margins by setting the margin property to zero in the body element, providing control over the spacing within the layout.', 'Applying background properties in CSS It explains the application of background properties in CSS, including the use of background color and background image to customize the appearance of the webpage.']}], 'duration': 762.371, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w2917735.jpg', 'highlights': ['CSS plays a crucial role in web design, allowing for control over layout structure, colors, typography, alignment, and animations.', 'Using CSS for background images instead of HTML image tags allows for easier organization and prevents overlapping elements.', "While it's possible to write CSS inside an HTML document, the preference is for organizing CSS in its own file for better readability and separation of concerns.", "Importing 'Montserrat' font via CSS by using the @import rule in the style sheet, allowing for the customization of font weights and load time.", "It covers setting font fallbacks in case of download failure and applying the 'Montserrat' font to the body element, ensuring consistent usage throughout the website.", 'It explains the application of background properties in CSS, including the use of background color and background image to customize the appearance of the webpage.', 'The chapter discusses the removal of default browser margins by setting the margin property to zero in the body element, providing control over the spacing within the layout.']}, {'end': 4268.273, 'segs': [{'end': 3739.669, 'src': 'embed', 'start': 3705.809, 'weight': 1, 'content': [{'end': 3713.941, 'text': "Okay So next up, Let's go ahead and we're going to put in, let's see here.", 'start': 3705.809, 'duration': 8.132}, {'end': 3725.448, 'text': 'We do know all of the colors of the fonts and the type are white inside of this section right here, along with the logo.', 'start': 3715.102, 'duration': 10.346}, {'end': 3729.904, 'text': "So we're just gonna say color white.", 'start': 3725.908, 'duration': 3.996}, {'end': 3732.445, 'text': 'so color is the property used to change.', 'start': 3729.904, 'duration': 2.541}, {'end': 3737.848, 'text': 'I type based I elements, such as paragraph elements and a bunch of others.', 'start': 3732.445, 'duration': 5.403}, {'end': 3739.669, 'text': "that's the way you change their color.", 'start': 3737.848, 'duration': 1.821}], 'summary': 'Discussing the use of color white for fonts and type in a section and its properties for changing color.', 'duration': 33.86, 'max_score': 3705.809, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w3705809.jpg'}, {'end': 3792.232, 'src': 'embed', 'start': 3767.192, 'weight': 0, 'content': [{'end': 3774.476, 'text': "So what we can do, there's another element we can use for CSS, and that is text-align and then center.", 'start': 3767.192, 'duration': 7.284}, {'end': 3777.198, 'text': 'So now if we save this.', 'start': 3776.257, 'duration': 0.941}, {'end': 3778.787, 'text': "it's all centered.", 'start': 3778.106, 'duration': 0.681}, {'end': 3782.854, 'text': "So as you can see, things are starting to move along, even though they're still pretty far away.", 'start': 3779.208, 'duration': 3.646}, {'end': 3792.232, 'text': 'Now we also notice, referring back to our prototype, that there seems to be a fair amount of white space between these elements,', 'start': 3784.045, 'duration': 8.187}], 'summary': 'Using text-align property to center content in css, noticing white space between elements in prototype.', 'duration': 25.04, 'max_score': 3767.192, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w3767192.jpg'}, {'end': 3972.85, 'src': 'embed', 'start': 3923.185, 'weight': 2, 'content': [{'end': 3930.308, 'text': "but for padding in margin I for the margin values, I don't recommend using the EM unit.", 'start': 3923.185, 'duration': 7.123}, {'end': 3935.591, 'text': "And it's a flexible unit, as you'll see when we get into responsive design.", 'start': 3930.709, 'duration': 4.882}, {'end': 3938.673, 'text': "So I'm just choosing for EM for padding bottom.", 'start': 3935.631, 'duration': 3.042}, {'end': 3945.217, 'text': "So you can see this is if we hover over this now, you'll see that green area is just for EM units right there.", 'start': 3938.733, 'duration': 6.484}, {'end': 3946.217, 'text': 'And you can play with this.', 'start': 3945.277, 'duration': 0.94}, {'end': 3950.759, 'text': "I could do this like like 20 a.m., you'll see that really push things down.", 'start': 3946.257, 'duration': 4.502}, {'end': 3955.822, 'text': "So it's just a way to add white space or negative space or empty space to your designs.", 'start': 3951.2, 'duration': 4.622}, {'end': 3958.763, 'text': 'So for me, 4 a.m. right here works pretty well.', 'start': 3956.222, 'duration': 2.541}, {'end': 3970.809, 'text': "And that's really just in relation to the bottom or the inside of this part, because I want to be able to see some of this orange part right here.", 'start': 3959.323, 'duration': 11.486}, {'end': 3972.85, 'text': "So let's continue on.", 'start': 3971.529, 'duration': 1.321}], 'summary': 'Em unit used for padding bottom, providing flexibility in responsive design.', 'duration': 49.665, 'max_score': 3923.185, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w3923185.jpg'}, {'end': 4055.372, 'src': 'embed', 'start': 4024.966, 'weight': 5, 'content': [{'end': 4035.798, 'text': "So I'm gonna put padding, and padding is shorthand property because you can actually put in multiple values inside of your padding element.", 'start': 4024.966, 'duration': 10.832}, {'end': 4036.999, 'text': 'And it works like a clock.', 'start': 4036.098, 'duration': 0.901}, {'end': 4039.922, 'text': "It's top, right, bottom, left.", 'start': 4037.239, 'duration': 2.683}, {'end': 4049.869, 'text': 'And so if I put in, for instance, 1 a.m. and then 5 a.m., that means 1 a.m. on the top, 5 a.m. on the right.', 'start': 4040.623, 'duration': 9.246}, {'end': 4055.372, 'text': "I don't know, 3 a.m. on the bottom and then like 10 a.m. on the left.", 'start': 4050.689, 'duration': 4.683}], 'summary': 'Padding shorthand allows multiple values for top, right, bottom, and left positions.', 'duration': 30.406, 'max_score': 4024.966, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w4024966.jpg'}, {'end': 4108.629, 'src': 'embed', 'start': 4079.065, 'weight': 4, 'content': [{'end': 4082.526, 'text': "Let's say for instance, I only want padding on the top and bottom.", 'start': 4079.065, 'duration': 3.461}, {'end': 4089.368, 'text': "Well, I could put one EM here and then I know I want no padding on the right and left because it's centered anyways.", 'start': 4083.226, 'duration': 6.142}, {'end': 4090.888, 'text': 'I just put zero there.', 'start': 4089.988, 'duration': 0.9}, {'end': 4096.43, 'text': "So now it's created padding on the top and bottom of one EM units.", 'start': 4091.908, 'duration': 4.522}, {'end': 4100.47, 'text': "So now we've pushed it away, one EM units on the top and bottom.", 'start': 4096.55, 'duration': 3.92}, {'end': 4102.89, 'text': 'Now what else? This looks pretty bad.', 'start': 4101.111, 'duration': 1.779}, {'end': 4105.591, 'text': "It's like a purple ugly default color.", 'start': 4102.991, 'duration': 2.6}, {'end': 4108.629, 'text': "but it's purple color that the browser gives links.", 'start': 4106.647, 'duration': 1.982}], 'summary': 'Using 1 em for top and bottom padding creates space, but the default purple color for links looks bad.', 'duration': 29.564, 'max_score': 4079.065, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w4079065.jpg'}, {'end': 4182.332, 'src': 'embed', 'start': 4158.408, 'weight': 6, 'content': [{'end': 4165.694, 'text': "then whatever change I make here will be made to every single instance of the A tag that's located throughout here.", 'start': 4158.408, 'duration': 7.286}, {'end': 4170.877, 'text': "I don't really know, I don't think I have any other ones here, but I wanted to demonstrate the importance of this.", 'start': 4166.295, 'duration': 4.582}, {'end': 4182.332, 'text': 'I wanna specify that I only wanna change the information or any links these elements that show up within this entire section right here.', 'start': 4171.479, 'duration': 10.853}], 'summary': 'Demonstrate the importance of making changes to all instances of the a tag within a specific section.', 'duration': 23.924, 'max_score': 4158.408, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w4158408.jpg'}, {'end': 4251.286, 'src': 'embed', 'start': 4228.459, 'weight': 7, 'content': [{'end': 4236.222, 'text': 'And by the way, in Visual Studio Code, if you hover over a color value right here, you can actually change with this handy little tool.', 'start': 4228.459, 'duration': 7.763}, {'end': 4239.563, 'text': "So you don't have to sit there screwing around with different things.", 'start': 4236.262, 'duration': 3.301}, {'end': 4241.083, 'text': 'Notice I said white.', 'start': 4239.943, 'duration': 1.14}, {'end': 4245.244, 'text': "You can choose like just, there's a lot of CSS color values.", 'start': 4241.123, 'duration': 4.121}, {'end': 4247.925, 'text': 'You can do a Google search for what all of them are.', 'start': 4245.384, 'duration': 2.541}, {'end': 4251.286, 'text': "There's a lot of different ways to specify color in CSS.", 'start': 4248.465, 'duration': 2.821}], 'summary': 'Visual studio code allows easy color value changes, offering a variety of css color options.', 'duration': 22.827, 'max_score': 4228.459, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w4228459.jpg'}], 'start': 3682.208, 'title': 'Css styling basics and design principles', 'summary': 'Covers css styling basics including color changes, text alignment, and padding using relative units such as em. it also discusses adding white space and padding to designs, using clock values for padding, and specifying padding and margin values in different ways to create better layout and appearance. additionally, it explains how to style links in css and emphasizes the importance of specifying styles for specific elements to avoid global changes.', 'chapters': [{'end': 3946.217, 'start': 3682.208, 'title': 'Css styling basics', 'summary': 'Covers the basics of css styling including color changes, text alignment, and padding using relative units such as em, with an emphasis on creating a responsive design.', 'duration': 264.009, 'highlights': ["By using the 'color' property and setting it to white, all the fonts and type inside the section are changed to white, ensuring a consistent look and feel.", "The 'text-align' property is used to center-align the text inside the section, creating a more visually appealing layout.", 'The concept of padding is explained, emphasizing the use of relative units like EM for flexible and responsive design.']}, {'end': 4102.89, 'start': 3946.257, 'title': 'Design white space and padding', 'summary': 'Discusses adding white space and padding to designs, using clock values for padding, and specifying padding and margin values in different ways to create better layout and appearance.', 'duration': 156.633, 'highlights': ['The chapter focuses on adding white space or empty space to designs, with the example of using 4 a.m. for creating space in the design layout.', 'Explanation of using clock values for padding, where specific values like 1 a.m. and 5 a.m. are used to create padding on the top and right sides of the layout.', 'Demonstration of specifying padding and margin values in different ways, including using shorthand property and specifying padding for top and bottom only, with the example of using one EM for top and bottom padding and zero for right and left padding.']}, {'end': 4268.273, 'start': 4102.991, 'title': 'Styling links in css', 'summary': 'Explains how to style links in css, emphasizing the importance of specifying styles for specific elements to avoid global changes. it also demonstrates the process of changing the color of links in real time using visual studio code.', 'duration': 165.282, 'highlights': ['Importance of specifying styles for specific elements The chapter emphasizes the importance of specifying styles for specific elements to avoid global changes, demonstrating the impact of changes made to a particular element on all instances of the same tag throughout the section.', 'Demonstration of changing link color in real time using Visual Studio Code The chapter demonstrates the process of changing the color of links in real time using Visual Studio Code, highlighting the convenience of the tool for making immediate visual changes to the code.']}], 'duration': 586.065, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w3682208.jpg', 'highlights': ["The 'text-align' property is used to center-align the text inside the section, creating a more visually appealing layout.", "By using the 'color' property and setting it to white, all the fonts and type inside the section are changed to white, ensuring a consistent look and feel.", 'The concept of padding is explained, emphasizing the use of relative units like EM for flexible and responsive design.', 'The chapter focuses on adding white space or empty space to designs, with the example of using 4 a.m. for creating space in the design layout.', 'Demonstration of specifying padding and margin values in different ways, including using shorthand property and specifying padding for top and bottom only, with the example of using one EM for top and bottom padding and zero for right and left padding.', 'Explanation of using clock values for padding, where specific values like 1 a.m. and 5 a.m. are used to create padding on the top and right sides of the layout.', 'Importance of specifying styles for specific elements The chapter emphasizes the importance of specifying styles for specific elements to avoid global changes, demonstrating the impact of changes made to a particular element on all instances of the same tag throughout the section.', 'Demonstration of changing link color in real time using Visual Studio Code The chapter demonstrates the process of changing the color of links in real time using Visual Studio Code, highlighting the convenience of the tool for making immediate visual changes to the code.']}, {'end': 5929.99, 'segs': [{'end': 4295.908, 'src': 'embed', 'start': 4270.074, 'weight': 0, 'content': [{'end': 4274.736, 'text': 'What else do we want to do to make this look more like this? All right.', 'start': 4270.074, 'duration': 4.662}, {'end': 4278.657, 'text': "Well, it looks like this isn't bold and this also has a text underlined.", 'start': 4274.776, 'duration': 3.881}, {'end': 4279.458, 'text': "This one doesn't.", 'start': 4278.697, 'duration': 0.761}, {'end': 4280.578, 'text': "Let's fix that.", 'start': 4279.918, 'duration': 0.66}, {'end': 4284.62, 'text': 'So we can do text, decoration, none.', 'start': 4281.078, 'duration': 3.542}, {'end': 4287.301, 'text': 'There goes our underline.', 'start': 4286.28, 'duration': 1.021}, {'end': 4291.484, 'text': 'We want to do font weight, bold.', 'start': 4289.082, 'duration': 2.402}, {'end': 4293.086, 'text': 'All right.', 'start': 4291.504, 'duration': 1.582}, {'end': 4294.647, 'text': "So that's how you make the font.", 'start': 4293.106, 'duration': 1.541}, {'end': 4295.908, 'text': "That's how you change the font weight up.", 'start': 4294.667, 'duration': 1.241}], 'summary': 'Adjusting font style and weight to match the desired look.', 'duration': 25.834, 'max_score': 4270.074, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w4270074.jpg'}, {'end': 4345.816, 'src': 'embed', 'start': 4320.921, 'weight': 1, 'content': [{'end': 4328.424, 'text': "And we're going to use something similar to an M unit, but we're going to use what's called a REM unit for this.", 'start': 4320.921, 'duration': 7.503}, {'end': 4333.846, 'text': "So for your text and your font sizes, it's better to use REM units.", 'start': 4329.044, 'duration': 4.802}, {'end': 4337.768, 'text': 'And this is all specific to responsive and flexible design.', 'start': 4334.507, 'duration': 3.261}, {'end': 4342.05, 'text': 'And then for your margin and padding, you want to use EM units or M units.', 'start': 4338.628, 'duration': 3.422}, {'end': 4345.816, 'text': 'Okay So this is looking pretty good right here.', 'start': 4343.095, 'duration': 2.721}], 'summary': 'Use rem units for text and font sizes in responsive design, and em units for margin and padding.', 'duration': 24.895, 'max_score': 4320.921, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w4320921.jpg'}, {'end': 4420.928, 'src': 'embed', 'start': 4394.797, 'weight': 2, 'content': [{'end': 4404.081, 'text': "So let's reference our h1 element, because if we look at our HTML, we'll see we have after header which we've already dealt with.", 'start': 4394.797, 'duration': 9.284}, {'end': 4405.341, 'text': 'we have our h1 element.', 'start': 4404.081, 'duration': 1.26}, {'end': 4410.023, 'text': 'Our h1 element is supposed to look like this in the browser.', 'start': 4406.021, 'duration': 4.002}, {'end': 4413.204, 'text': "And you can see it doesn't really quite look like that just yet.", 'start': 4410.043, 'duration': 3.161}, {'end': 4417.066, 'text': "So let's go ahead and specify h1.", 'start': 4414.024, 'duration': 3.042}, {'end': 4419.387, 'text': "And we're going to say font size.", 'start': 4418.286, 'duration': 1.101}, {'end': 4420.928, 'text': 'We need to make this sucker bigger.', 'start': 4419.427, 'duration': 1.501}], 'summary': 'Adjust h1 font size to improve visual appearance.', 'duration': 26.131, 'max_score': 4394.797, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w4394797.jpg'}, {'end': 4495.047, 'src': 'embed', 'start': 4467.384, 'weight': 3, 'content': [{'end': 4474.17, 'text': 'Awesome Now, what about the span element? Remember, in our HTML markup, we have H1 span for the healthy.', 'start': 4467.384, 'duration': 6.786}, {'end': 4481.676, 'text': "So what we're going to do is we're going to say, just in case I have any other span elements, I'm going to say H1 span.", 'start': 4474.87, 'duration': 6.806}, {'end': 4490.203, 'text': "That means anything inside of span or H1 that has a span element, we're going to give this property or these CSS properties and values.", 'start': 4481.776, 'duration': 8.427}, {'end': 4495.047, 'text': "So we're going to say first text transform uppercase.", 'start': 4490.743, 'duration': 4.304}], 'summary': 'Apply text-transform: uppercase to h1 span in html.', 'duration': 27.663, 'max_score': 4467.384, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w4467384.jpg'}, {'end': 4921.301, 'src': 'embed', 'start': 4892.371, 'weight': 5, 'content': [{'end': 4895.171, 'text': 'CSS can drastically change the appearance quite easily.', 'start': 4892.371, 'duration': 2.8}, {'end': 4898.993, 'text': "So background color, we're going to put in margin here.", 'start': 4895.792, 'duration': 3.201}, {'end': 4901.913, 'text': "So we're going to put margin 2em at the top.", 'start': 4899.013, 'duration': 2.9}, {'end': 4906.535, 'text': "And then on the right and left, we're going to put negative 1em.", 'start': 4902.954, 'duration': 3.581}, {'end': 4908.495, 'text': "And then on the bottom, we're putting zero.", 'start': 4907.135, 'duration': 1.36}, {'end': 4911.476, 'text': 'So I want to talk about that negative 1em value.', 'start': 4908.976, 'duration': 2.5}, {'end': 4921.301, 'text': "So when we didn't have this, We can see there's basically white space at the ends on the right and left.", 'start': 4912.097, 'duration': 9.204}], 'summary': 'Css can easily change appearance with margin values, e.g., 2em top and -1em right/left.', 'duration': 28.93, 'max_score': 4892.371, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w4892371.jpg'}, {'end': 4992.719, 'src': 'embed', 'start': 4962.961, 'weight': 4, 'content': [{'end': 4965.422, 'text': 'So now it makes it go all the way out to the right and left of the browser.', 'start': 4962.961, 'duration': 2.461}, {'end': 4966.742, 'text': 'All right.', 'start': 4966.522, 'duration': 0.22}, {'end': 4971.783, 'text': "So next up for our form container, we're also going to give it some padding.", 'start': 4967.342, 'duration': 4.441}, {'end': 4975.564, 'text': "Look, there's no padding here with this form element or at the bottom of it.", 'start': 4971.823, 'duration': 3.741}, {'end': 4980.285, 'text': 'So padding, remember, affects the white space inside of an element.', 'start': 4975.944, 'duration': 4.341}, {'end': 4982.485, 'text': 'So padding two em.', 'start': 4980.485, 'duration': 2}, {'end': 4987.095, 'text': 'So now things have been pushed off, but we have some work to do.', 'start': 4984.073, 'duration': 3.022}, {'end': 4992.719, 'text': 'So next up, we have our form element right here.', 'start': 4987.956, 'duration': 4.763}], 'summary': 'Adding padding of 2em to form container for better alignment.', 'duration': 29.758, 'max_score': 4962.961, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w4962961.jpg'}, {'end': 5545.265, 'src': 'embed', 'start': 5517.569, 'weight': 6, 'content': [{'end': 5523.533, 'text': "We're going to take this, our button, because our button right here, our button rule sets what's controlling all of this.", 'start': 5517.569, 'duration': 5.964}, {'end': 5525.454, 'text': "We're going to copy that and paste it.", 'start': 5524.093, 'duration': 1.361}, {'end': 5531.097, 'text': "And we're going to get rid of all this stuff except for the background color, because that's the element that I want to change,", 'start': 5526.234, 'duration': 4.863}, {'end': 5533.078, 'text': 'the property that I want to change when somebody hovers over this.', 'start': 5531.097, 'duration': 1.981}, {'end': 5537.22, 'text': "So right here, after that closing bracket, we're going to put hover.", 'start': 5533.578, 'duration': 3.642}, {'end': 5545.265, 'text': "Then I'm going to hover over this, the value, the color value in Visual Studio Code, and change it maybe to slightly darker.", 'start': 5538.641, 'duration': 6.624}], 'summary': 'Adjust button hover property by changing background color to a slightly darker shade.', 'duration': 27.696, 'max_score': 5517.569, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w5517569.jpg'}, {'end': 5905.648, 'src': 'embed', 'start': 5856.665, 'weight': 7, 'content': [{'end': 5860.106, 'text': "This has a lot more line height or leading as it's called than this.", 'start': 5856.665, 'duration': 3.441}, {'end': 5863.467, 'text': 'So we can control that as well with the line height property.', 'start': 5860.606, 'duration': 2.861}, {'end': 5873.11, 'text': "So if I just type in P, line height, we'll say like 1.2 or 1.3 EM.", 'start': 5863.847, 'duration': 9.263}, {'end': 5875.19, 'text': "That didn't change it much.", 'start': 5873.99, 'duration': 1.2}, {'end': 5877.747, 'text': 'How about 2 EM? There we go.', 'start': 5875.511, 'duration': 2.236}, {'end': 5883.391, 'text': 'Now I wanted to show you something really cool about CSS itself.', 'start': 5878.388, 'duration': 5.003}, {'end': 5888.415, 'text': 'CSS can have what are called custom properties or kind of like variables essentially.', 'start': 5883.611, 'duration': 4.804}, {'end': 5897.745, 'text': 'Um, if you ever have values the same values that are perhaps used in multiple areas of your rule sets in your properties,', 'start': 5889.642, 'duration': 8.103}, {'end': 5900.026, 'text': 'then you can create custom properties for this.', 'start': 5897.745, 'duration': 2.281}, {'end': 5905.648, 'text': "So it's not necessarily like it's not necessary in our instance, but I did just want to show you how to do it.", 'start': 5900.706, 'duration': 4.942}], 'summary': 'Css allows control of line height and creation of custom properties for reusing values.', 'duration': 48.983, 'max_score': 5856.665, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w5856665.jpg'}], 'start': 4270.074, 'title': 'Css styling for web elements', 'summary': 'Covers adjusting font weight, size, and style elements using rem and em units, styling html elements with specific css properties and values, customizing form elements with css properties, and implementing interaction-based design changes using css.', 'chapters': [{'end': 4466.498, 'start': 4270.074, 'title': 'Adjusting font and element styles', 'summary': 'Discusses adjusting font weight, size, and style elements for a webpage, emphasizing the use of rem and em units for responsive and flexible design.', 'duration': 196.424, 'highlights': ["Adjusting font weight and style using 'font-weight' and 'text-decoration' properties to make the font bold and underlined for better readability.", 'Emphasizing the use of REM units for text and font sizes, and EM units for margin and padding to achieve responsive and flexible design.', "Specifying font size for h1 element using 'font-size' property and adjusting white space with margin for better visual presentation."]}, {'end': 5140.125, 'start': 4467.384, 'title': 'Styling html elements with css', 'summary': 'Covers the styling of html elements with css, including the use of span elements with specific css properties and values, the creation of a custom underline graphic using intermediate css techniques, and the application of css properties to affect the appearance and layout of various html elements.', 'duration': 672.741, 'highlights': ['The chapter covers the styling of HTML elements with CSS, including the use of span elements with specific CSS properties and values, the creation of a custom underline graphic using intermediate CSS techniques, and the application of CSS properties to affect the appearance and layout of various HTML elements.', 'The span element within the H1 tag is styled using CSS properties such as text-transform, display, font-size, and custom graphic creation using before pseudo-element with properties like content, position, width, background color, and height.', 'The usage of CSS properties like position, width, background color, height, and z-index to create and position a custom underline graphic for the span element within the H1 tag.', 'Applying CSS properties such as font-weight and margin to style specific paragraph elements within the parent container, and utilizing negative margin values for positioning.', 'Styling the form container with CSS properties like background-color, margin, and padding to affect its appearance and whitespace inside the element.', 'Targeting and styling the label and input elements with CSS properties like color, font-weight, display, margin, font size, and different type selectors for input elements.']}, {'end': 5498.016, 'start': 5140.865, 'title': 'Styling form elements', 'summary': 'Demonstrates how to customize form elements including borders, colors, padding, and font styles, emphasizing the use of css properties like border, background color, width, padding, font weight, and cursor, to achieve the desired visual appearance and alignment.', 'duration': 357.151, 'highlights': ['Demonstrates customizing form elements with CSS properties like border, background color, width, and padding to achieve the desired visual appearance and alignment The chapter covers the process of customizing form elements using CSS properties such as border, background color, width, padding, and font styles to achieve the desired visual appearance and alignment.', 'Explains the use of specific CSS properties like border, background color, font weight, and cursor to modify the appearance of form elements Emphasizes the use of specific CSS properties such as border, background color, font weight, and cursor to modify the appearance of form elements.', 'Highlights the importance of using box-sizing: border-box to prevent unexpected element extension and scroll bars Emphasizes the importance of using box-sizing: border-box to prevent unexpected element extension and scroll bars caused by adding padding along with width.']}, {'end': 5929.99, 'start': 5498.036, 'title': 'Interaction-based design change', 'summary': 'Demonstrates how to implement interaction-based design changes using css, including changing button properties on hover, controlling background position, setting rule sets for specific elements, and utilizing custom properties.', 'duration': 431.954, 'highlights': ['Demonstrating how to change button properties on hover, adjusting background position, and setting rule sets for specific elements. The tutorial covers changing button properties on hover, adjusting background position, and setting rule sets for specific elements.', 'Explaining the use of custom properties or variables in CSS for reusing values in multiple rule sets. Demonstrates the use of custom properties in CSS for reusing values in multiple rule sets.', 'Showing the control of line height using the line-height property in CSS. The tutorial demonstrates controlling line height using the line-height property in CSS.']}], 'duration': 1659.916, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w4270074.jpg', 'highlights': ["Covers adjusting font weight and style using 'font-weight' and 'text-decoration' properties for better readability.", 'Emphasizes the use of REM units for text and font sizes, and EM units for margin and padding for responsive design.', "Specifies font size for h1 element using 'font-size' property and adjusting white space with margin for better visual presentation.", 'Covers styling of HTML elements with CSS, including the use of span elements with specific CSS properties and values.', 'Demonstrates customizing form elements with CSS properties like border, background color, width, and padding for visual appearance and alignment.', 'Explains the use of specific CSS properties like border, background color, font weight, and cursor to modify the appearance of form elements.', 'Demonstrates how to change button properties on hover, adjusting background position, and setting rule sets for specific elements.', 'Explains the use of custom properties or variables in CSS for reusing values in multiple rule sets.', 'Shows the control of line height using the line-height property in CSS.']}, {'end': 6493.931, 'segs': [{'end': 5982.708, 'src': 'embed', 'start': 5930.51, 'weight': 0, 'content': [{'end': 5940.378, 'text': "So I'll just say when you have your custom properties, you specify on the root selector, as it's called, and we're going to say dash, dash,", 'start': 5930.51, 'duration': 9.868}, {'end': 5941.879, 'text': 'which is allowing us.', 'start': 5940.378, 'duration': 1.501}, {'end': 5946.342, 'text': "it's going to notify the browser that this is a custom property.", 'start': 5941.879, 'duration': 4.463}, {'end': 5948.066, 'text': 'and then name of the property.', 'start': 5946.946, 'duration': 1.12}, {'end': 5950.747, 'text': "We're going to call it leading or the line height.", 'start': 5948.547, 'duration': 2.2}, {'end': 5956.669, 'text': 'And then you put a colon just as you would any other property and then the value.', 'start': 5951.408, 'duration': 5.261}, {'end': 5958.01, 'text': "We'll say 2em.", 'start': 5957.25, 'duration': 0.76}, {'end': 5969.834, 'text': "So then in order to use this custom property, we'll come back down to where we were working and we'll say var and then leading.", 'start': 5958.81, 'duration': 11.024}, {'end': 5972.124, 'text': 'There we go.', 'start': 5971.704, 'duration': 0.42}, {'end': 5972.544, 'text': "It'll work.", 'start': 5972.184, 'duration': 0.36}, {'end': 5982.708, 'text': 'So now if you had this VAR leading as in multiple areas, instead of having any, you wanted to change it in the future, you would have to change.', 'start': 5972.904, 'duration': 9.804}], 'summary': 'Using custom properties in css for line height with 2em value and var usage.', 'duration': 52.198, 'max_score': 5930.51, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w5930510.jpg'}, {'end': 6091.692, 'src': 'embed', 'start': 6061.744, 'weight': 3, 'content': [{'end': 6066.307, 'text': 'So we need it to look and just be a lot easier to use.', 'start': 6061.744, 'duration': 4.563}, {'end': 6073.332, 'text': "And so that's our job as well as a front end developer is to deal with responsive design.", 'start': 6067.048, 'duration': 6.284}, {'end': 6079.457, 'text': 'So what we want to do is use media queries in order to do this.', 'start': 6074.714, 'duration': 4.743}, {'end': 6083.02, 'text': "And so I'll show you a media query here.", 'start': 6080.338, 'duration': 2.682}, {'end': 6085.808, 'text': 'And it looks like this.', 'start': 6084.907, 'duration': 0.901}, {'end': 6087.009, 'text': "We're going to say app media.", 'start': 6085.988, 'duration': 1.021}, {'end': 6091.692, 'text': "We're going to put in parentheses, minimum width or min width.", 'start': 6087.029, 'duration': 4.663}], 'summary': 'Front end developer aims to improve user experience with responsive design using media queries.', 'duration': 29.948, 'max_score': 6061.744, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w6061744.jpg'}, {'end': 6469.914, 'src': 'embed', 'start': 6442.389, 'weight': 5, 'content': [{'end': 6446.854, 'text': "So as you can see, there's a lot of CSS properties you've never heard of probably, especially if you're new, obviously.", 'start': 6442.389, 'duration': 4.465}, {'end': 6452.44, 'text': "And this is kind of more of a complex sort of property because the values, there's a lot of different values.", 'start': 6447.675, 'duration': 4.765}, {'end': 6461.668, 'text': 'You have how far the X and Y, like how far out to the right In bottom, it should be, the shadow should extend.', 'start': 6452.48, 'duration': 9.188}, {'end': 6464.49, 'text': 'So X is the first property.', 'start': 6461.908, 'duration': 2.582}, {'end': 6469.914, 'text': 'So we could do like 10 pixels, 10 pixels on the X.', 'start': 6464.59, 'duration': 5.324}], 'summary': 'Introduction to unfamiliar css properties, specifically discussing the x and y shadow extend values.', 'duration': 27.525, 'max_score': 6442.389, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w6442389.jpg'}], 'start': 5930.51, 'title': 'Custom css properties and responsive design', 'summary': 'Discusses using custom css properties for efficient value management and implementing responsive design with media queries to adjust layout and styles based on screen size.', 'chapters': [{'end': 6008.586, 'start': 5930.51, 'title': 'Custom css properties', 'summary': "Discusses how to use custom css properties by specifying them on the root selector and then using the 'var' function to apply the custom property, enabling easy and efficient management of values across multiple areas of code.", 'duration': 78.076, 'highlights': ["By using custom CSS properties and the 'var' function, values can be easily managed across multiple areas of code, reducing the need for manual changes.", "Defining custom properties on the root selector with '--' prefix allows notification to the browser that it's a custom property.", 'The example demonstrates how changing the custom property value at the root level automatically updates all instances where the property is used, showcasing the efficiency and convenience of using custom CSS properties.']}, {'end': 6493.931, 'start': 6009.266, 'title': 'Responsive design and media queries', 'summary': 'Covers the implementation of responsive design using media queries, with a focus on adjusting layout and styles based on screen size, such as changing margins and padding at specific pixel widths, exemplifying the use of media queries and css properties.', 'duration': 484.665, 'highlights': ['The use of media queries to adjust layout and styles based on screen size, such as changing margins and padding at specific pixel widths, is a key aspect of responsive design, exemplified by the demonstration of using media queries and CSS properties (e.g., margin, padding, box shadow) to enhance the layout.', 'The demonstration of using media queries and CSS properties to adjust the layout based on specific pixel widths, such as increasing the margin from 1em to 4em for screen sizes larger than 730 pixels, showcases practical implementation of responsive design techniques.', 'Explanation and demonstration of using CSS properties, including box shadow with specific values (e.g., X and Y position, blur amount, color, and opacity), to add a shadow effect, provides insights into advanced styling techniques for responsive design.', 'The explanation and practical demonstration of adjusting CSS properties for specific elements (e.g., changing text alignment, margin, padding, width) at different screen sizes (e.g., above 730 pixels, at 930 pixels) highlights the process of customizing styles for various devices and screen resolutions.']}], 'duration': 563.421, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w5930510.jpg', 'highlights': ["By using custom CSS properties and the 'var' function, values can be easily managed across multiple areas of code, reducing the need for manual changes.", "Defining custom properties on the root selector with '--' prefix allows notification to the browser that it's a custom property.", 'The example demonstrates how changing the custom property value at the root level automatically updates all instances where the property is used, showcasing the efficiency and convenience of using custom CSS properties.', 'The use of media queries to adjust layout and styles based on screen size, such as changing margins and padding at specific pixel widths, is a key aspect of responsive design, exemplified by the demonstration of using media queries and CSS properties (e.g., margin, padding, box shadow) to enhance the layout.', 'The demonstration of using media queries and CSS properties to adjust the layout based on specific pixel widths, such as increasing the margin from 1em to 4em for screen sizes larger than 730 pixels, showcases practical implementation of responsive design techniques.', 'Explanation and demonstration of using CSS properties, including box shadow with specific values (e.g., X and Y position, blur amount, color, and opacity), to add a shadow effect, provides insights into advanced styling techniques for responsive design.', 'The explanation and practical demonstration of adjusting CSS properties for specific elements (e.g., changing text alignment, margin, padding, width) at different screen sizes (e.g., above 730 pixels, at 930 pixels) highlights the process of customizing styles for various devices and screen resolutions.']}, {'end': 7132.755, 'segs': [{'end': 6585.753, 'src': 'embed', 'start': 6540.834, 'weight': 0, 'content': [{'end': 6546.457, 'text': "So there's multiple ways to, there's multiple values for the display property.", 'start': 6540.834, 'duration': 5.623}, {'end': 6549.198, 'text': 'One is flex, one is the grid.', 'start': 6547.657, 'duration': 1.541}, {'end': 6550.939, 'text': "I'm going to show you both.", 'start': 6549.978, 'duration': 0.961}, {'end': 6555.683, 'text': 'So the flex box and the grid are two ways to organize your layout.', 'start': 6551.339, 'duration': 4.344}, {'end': 6561.387, 'text': "And they're both have different ways of going about achieving their layout.", 'start': 6556.223, 'duration': 5.164}, {'end': 6570.215, 'text': "But for me generally, if I'm just trying to do a simple sort of alignment, I'll use the flex box and then I'll use CSS grid for bigger,", 'start': 6561.407, 'duration': 8.808}, {'end': 6572.797, 'text': 'larger elements and more complex things.', 'start': 6570.215, 'duration': 2.582}, {'end': 6577.623, 'text': "what i ultimately suggest doing, because i'm not going to be describing the entire differences.", 'start': 6574.058, 'duration': 3.565}, {'end': 6585.753, 'text': "it's just going to google and just typing in css flexbox tutorial, css grid tutorial, also flexbox verse, the grid,", 'start': 6577.623, 'duration': 8.13}], 'summary': 'There are two main ways to organize layout in css: flexbox and css grid. flexbox is used for simple alignment, while css grid is recommended for larger and more complex elements.', 'duration': 44.919, 'max_score': 6540.834, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w6540834.jpg'}, {'end': 6828.173, 'src': 'embed', 'start': 6799.807, 'weight': 1, 'content': [{'end': 6802.91, 'text': 'That way you know Authentic is attached to a section.', 'start': 6799.807, 'duration': 3.103}, {'end': 6805.713, 'text': "So it's just for organization purposes.", 'start': 6803.011, 'duration': 2.702}, {'end': 6808.576, 'text': 'So we could do display grid this time.', 'start': 6806.474, 'duration': 2.102}, {'end': 6813.261, 'text': 'And remember I mentioned the CSS grid is another way of trying to alter your layout and lay it out.', 'start': 6808.636, 'duration': 4.625}, {'end': 6815.725, 'text': 'going to do css grid.', 'start': 6814.124, 'duration': 1.601}, {'end': 6816.085, 'text': 'all right.', 'start': 6815.725, 'duration': 0.36}, {'end': 6818.567, 'text': 'so this, uh, the css grid.', 'start': 6816.085, 'duration': 2.482}, {'end': 6820.128, 'text': 'i have a tutorial already.', 'start': 6818.567, 'duration': 1.561}, {'end': 6826.212, 'text': "i'm not going to go in depth into it, but the way you work, uh, with it primarily is grid, template column.", 'start': 6820.128, 'duration': 6.084}, {'end': 6828.173, 'text': 'so you define your columns and rows as needed.', 'start': 6826.212, 'duration': 1.961}], 'summary': 'Learning about using css grid for layout organization.', 'duration': 28.366, 'max_score': 6799.807, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w6799807.jpg'}, {'end': 6953.616, 'src': 'embed', 'start': 6925.534, 'weight': 3, 'content': [{'end': 6929.936, 'text': "Our right column, we're going to add a padding zero.", 'start': 6925.534, 'duration': 4.402}, {'end': 6932.096, 'text': "And this time I'm going to use percentage for the padding.", 'start': 6930.196, 'duration': 1.9}, {'end': 6934.337, 'text': 'That way we scale it up.', 'start': 6932.116, 'duration': 2.221}, {'end': 6936.438, 'text': 'It slowly increases the padding around.', 'start': 6934.417, 'duration': 2.021}, {'end': 6939.721, 'text': 'All right.', 'start': 6939.42, 'duration': 0.301}, {'end': 6947.375, 'text': "And then also we're going to do, what else are we going to do? Text align left because it was centered.", 'start': 6940.462, 'duration': 6.913}, {'end': 6949.8, 'text': "Now it's left aligned.", 'start': 6948.858, 'duration': 0.942}, {'end': 6953.616, 'text': "and we'll do align self center.", 'start': 6950.774, 'duration': 2.842}], 'summary': 'Adjusted right column padding to 0%, aligned text left, and centered align self.', 'duration': 28.082, 'max_score': 6925.534, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w6925534.jpg'}, {'end': 7042.14, 'src': 'embed', 'start': 7012.723, 'weight': 4, 'content': [{'end': 7019.872, 'text': 'So now I wanted to cover just very briefly, um, H or CSS rather animations.', 'start': 7012.723, 'duration': 7.149}, {'end': 7027.981, 'text': 'So what if we wanted this to animate in much or similar to the way it was animating in, in our prototype? Oops, wrong one.', 'start': 7020.552, 'duration': 7.429}, {'end': 7031.225, 'text': 'Let me get out the prototype section here.', 'start': 7028.422, 'duration': 2.803}, {'end': 7034.815, 'text': 'We hit play.', 'start': 7034.215, 'duration': 0.6}, {'end': 7042.14, 'text': "See how this kind of animates in? Well, I'm going to make it all animated at the same time, but it's going to fade in and come down like it was here.", 'start': 7035.236, 'duration': 6.904}], 'summary': 'Covering css animations to replicate prototype animation effects.', 'duration': 29.417, 'max_score': 7012.723, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w7012723.jpg'}], 'start': 6493.931, 'title': 'Layout and design in web pages', 'summary': 'Covers using flexbox and css grid for layout, recommending flexbox for simple alignment and css grid for complex elements. it also discusses fixing layout and design issues, including adjusting widths, margins, padding, and implementing animations for responsive design.', 'chapters': [{'end': 6585.753, 'start': 6493.931, 'title': 'Using flexbox and css grid for layout', 'summary': 'Discusses using the flexbox and css grid to organize layout, suggesting to use flexbox for simple alignment and css grid for larger, complex elements, with a recommendation to refer to specific tutorials for further understanding.', 'duration': 91.822, 'highlights': ['Using flexbox and CSS grid for layout The chapter discusses using the flexbox and CSS grid to organize layout', 'Suggestion to use flexbox for simple alignment and CSS grid for larger, complex elements The chapter suggests using flexbox for simple alignment and CSS grid for larger, complex elements', 'Recommendation to refer to specific tutorials for further understanding The chapter recommends referring to specific tutorials for further understanding']}, {'end': 7132.755, 'start': 6585.753, 'title': 'Fixing layout and design', 'summary': 'Discusses fixing layout and design issues in a web page, including adjusting widths, margins, and padding, using css grid to manage layout, and implementing animations for a responsive design.', 'duration': 547.002, 'highlights': ['Using CSS grid to manage layout The instructor demonstrates using CSS grid to manage the layout, including defining columns and rows, specifying grid template areas, and assigning elements to specific areas, resulting in a controlled and organized layout.', 'Adjusting widths, margins, and padding The instructor explains the process of adjusting widths, margins, and padding for various elements, such as setting form width to 70%, resetting margins and adjusting padding to achieve a consistent and visually appealing design.', 'Implementing animations for a responsive design The instructor covers the implementation of animations using CSS, including defining animations, specifying durations, and creating keyframes to achieve a responsive and visually appealing design, as demonstrated in the prototype.']}], 'duration': 638.824, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w6493931.jpg', 'highlights': ['Using flexbox and CSS grid for layout The chapter discusses using the flexbox and CSS grid to organize layout', 'Using CSS grid to manage layout The instructor demonstrates using CSS grid to manage the layout, including defining columns and rows, specifying grid template areas, and assigning elements to specific areas, resulting in a controlled and organized layout.', 'Suggestion to use flexbox for simple alignment and CSS grid for larger, complex elements The chapter suggests using flexbox for simple alignment and CSS grid for larger, complex elements', 'Adjusting widths, margins, and padding The instructor explains the process of adjusting widths, margins, and padding for various elements, such as setting form width to 70%, resetting margins and adjusting padding to achieve a consistent and visually appealing design.', 'Implementing animations for a responsive design The instructor covers the implementation of animations using CSS, including defining animations, specifying durations, and creating keyframes to achieve a responsive and visually appealing design, as demonstrated in the prototype.', 'Recommendation to refer to specific tutorials for further understanding The chapter recommends referring to specific tutorials for further understanding']}, {'end': 8096.844, 'segs': [{'end': 7225.317, 'src': 'embed', 'start': 7181.674, 'weight': 7, 'content': [{'end': 7184.635, 'text': "So we've done our HTML, we've done our CSS.", 'start': 7181.674, 'duration': 2.961}, {'end': 7191.478, 'text': 'Now I want to just get your feet wet with a little bit of JavaScript.', 'start': 7185.235, 'duration': 6.243}, {'end': 7196.5, 'text': "Now I debated even adding JavaScript in just because it's such a massive topic,", 'start': 7191.598, 'duration': 4.902}, {'end': 7201.022, 'text': 'but I decided to do it because JavaScript in front of development are so intertwined.', 'start': 7196.5, 'duration': 4.522}, {'end': 7203.323, 'text': 'I wanted to at least do a tad bit of it.', 'start': 7201.442, 'duration': 1.881}, {'end': 7215.454, 'text': 'So JavaScript is something that you can use in conjunction with HTML and CSS to make your app or your website interactive in some way, shape or form.', 'start': 7204.531, 'duration': 10.923}, {'end': 7221.316, 'text': "So let's say for instance, when a user clicks on find food now, we want something to happen.", 'start': 7216.154, 'duration': 5.162}, {'end': 7222.936, 'text': 'on that click.', 'start': 7222.316, 'duration': 0.62}, {'end': 7224.196, 'text': 'so they click the button.', 'start': 7222.936, 'duration': 1.26}, {'end': 7225.317, 'text': "something's going to happen.", 'start': 7224.196, 'duration': 1.121}], 'summary': 'Introducing javascript for interactive web development.', 'duration': 43.643, 'max_score': 7181.674, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w7181674.jpg'}, {'end': 7272.587, 'src': 'embed', 'start': 7246.881, 'weight': 11, 'content': [{'end': 7251.282, 'text': "well, because it's interactive, based on a click, we'll use javascript All right.", 'start': 7246.881, 'duration': 4.401}, {'end': 7261.804, 'text': 'so, just like with CSS, how we can link a JavaScript file, or we could write inline JavaScript.', 'start': 7251.282, 'duration': 10.522}, {'end': 7265.165, 'text': 'we could do the same thing with JavaScript.', 'start': 7261.804, 'duration': 3.361}, {'end': 7266.446, 'text': 'I meant CSS over here.', 'start': 7265.245, 'duration': 1.201}, {'end': 7268.286, 'text': 'We could do the same thing with JavaScript.', 'start': 7266.846, 'duration': 1.44}, {'end': 7272.587, 'text': "I'm going to choose, just because we have so little code, to put the JavaScript inline.", 'start': 7268.726, 'duration': 3.861}], 'summary': 'Interactive javascript can be linked or written inline, similar to css.', 'duration': 25.706, 'max_score': 7246.881, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w7246881.jpg'}, {'end': 7316.521, 'src': 'embed', 'start': 7291.192, 'weight': 10, 'content': [{'end': 7296.254, 'text': "read a lot about the basics of JavaScript, because I'm really not even going to get into the absolute basics.", 'start': 7291.192, 'duration': 5.062}, {'end': 7299.095, 'text': "I'm just going to show you this one use case for JavaScript.", 'start': 7296.294, 'duration': 2.801}, {'end': 7313.62, 'text': "So what we need to do is we need to create a couple of properties or variables that will allow us to access our button and also that little overlay that's going to make everything dark.", 'start': 7299.995, 'duration': 13.625}, {'end': 7316.521, 'text': 'So right here is our button.', 'start': 7314.5, 'duration': 2.021}], 'summary': 'Introducing a javascript use case with button and overlay properties.', 'duration': 25.329, 'max_score': 7291.192, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w7291192.jpg'}, {'end': 7432.782, 'src': 'embed', 'start': 7404.204, 'weight': 0, 'content': [{'end': 7408.907, 'text': "And what are we listening for? We're listening for an event to take place, like click.", 'start': 7404.204, 'duration': 4.703}, {'end': 7414.59, 'text': "There's a bunch of different types of events, like hovering mouse out, mouse in, mouse over, mouse out.", 'start': 7409.407, 'duration': 5.183}, {'end': 7415.991, 'text': "There's a bunch of other ones.", 'start': 7414.971, 'duration': 1.02}, {'end': 7419.373, 'text': 'And so you can research that yourself.', 'start': 7416.352, 'duration': 3.021}, {'end': 7425.237, 'text': 'Then we put in a comma, and then we put in empty parentheses right here.', 'start': 7419.413, 'duration': 5.824}, {'end': 7427.338, 'text': 'You can usually pass in some properties if you need to.', 'start': 7425.277, 'duration': 2.061}, {'end': 7427.959, 'text': "We don't need to.", 'start': 7427.358, 'duration': 0.601}, {'end': 7432.782, 'text': 'And then we use an arrow function and open it up inside these squiggly braces.', 'start': 7428.539, 'duration': 4.243}], 'summary': 'Listening for various events like click, mouse out, mouse in, etc. using arrow function.', 'duration': 28.578, 'max_score': 7404.204, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w7404204.jpg'}, {'end': 7505.469, 'src': 'embed', 'start': 7477.778, 'weight': 1, 'content': [{'end': 7481.699, 'text': "for now we're going to do a little bit of html and css.", 'start': 7477.778, 'duration': 3.921}, {'end': 7490.043, 'text': "so the html that we need to add is going to be div or actually rather just class overlay, and then i'm going to give it an id as well.", 'start': 7481.699, 'duration': 8.344}, {'end': 7496.546, 'text': 'we could do this through m abbreviations, put a hash time, hash, hashtag rather of overlay.', 'start': 7490.043, 'duration': 6.503}, {'end': 7501.868, 'text': "So that's what it just created a class of overlay, an ID of overlay.", 'start': 7498.547, 'duration': 3.321}, {'end': 7505.469, 'text': "We'll use this ID overlay referenced in the JavaScript in a second.", 'start': 7501.948, 'duration': 3.521}], 'summary': 'Adding a div with class overlay and an id for javascript reference.', 'duration': 27.691, 'max_score': 7477.778, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w7477778.jpg'}, {'end': 7556.606, 'src': 'embed', 'start': 7525.562, 'weight': 2, 'content': [{'end': 7531.805, 'text': "But really what we're gonna do now is head on over to the CSS and we're gonna style this as we want it to look like.", 'start': 7525.562, 'duration': 6.243}, {'end': 7538.727, 'text': "So we're gonna go back here and we're going to come up just above our first media query.", 'start': 7532.525, 'duration': 6.202}, {'end': 7539.228, 'text': 'There we go.', 'start': 7538.807, 'duration': 0.421}, {'end': 7541.729, 'text': "And we're gonna need to say overlay.", 'start': 7540.168, 'duration': 1.561}, {'end': 7544.23, 'text': 'That was the class we gave it.', 'start': 7543.269, 'duration': 0.961}, {'end': 7547.811, 'text': "And we're gonna do position absolute.", 'start': 7545.11, 'duration': 2.701}, {'end': 7556.606, 'text': "That'll allow us to break out of the box model and just overlay everything as we wish.", 'start': 7549.124, 'duration': 7.482}], 'summary': 'Styling the overlay with position absolute for desired look.', 'duration': 31.044, 'max_score': 7525.562, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w7525562.jpg'}, {'end': 7677.13, 'src': 'embed', 'start': 7648.208, 'weight': 3, 'content': [{'end': 7653.81, 'text': "So what we do instead of display grid is display none, and we're going to make it opacity zero.", 'start': 7648.208, 'duration': 5.602}, {'end': 7660.117, 'text': "And you'll see why, because I'm also going to apply CSS animation to it to fade it in from zero.", 'start': 7655.174, 'duration': 4.943}, {'end': 7663.74, 'text': "So right now we don't see it, right? Correct.", 'start': 7660.718, 'duration': 3.022}, {'end': 7664.721, 'text': "We don't see that overlay.", 'start': 7663.78, 'duration': 0.941}, {'end': 7677.13, 'text': "So now what we need to do is we need to go back to our JavaScript and in our JavaScript, we're going to say, Let's just replicate this line.", 'start': 7665.401, 'duration': 11.729}], 'summary': 'Using css opacity and animation to fade in a display grid', 'duration': 28.922, 'max_score': 7648.208, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w7648208.jpg'}, {'end': 7890.199, 'src': 'embed', 'start': 7862.738, 'weight': 4, 'content': [{'end': 7868.181, 'text': "From 30% to 70%, we're gonna keep the opacity at one, and then from 70% to 100%, we're gonna make the opacity zero, the fade right back out.", 'start': 7862.738, 'duration': 5.443}, {'end': 7885.054, 'text': "So, We're not done yet because we have to then attach that CSS class that exists in this CSS file, that animate overlay class, which is right here.", 'start': 7868.241, 'duration': 16.813}, {'end': 7890.199, 'text': 'We want to attach it to our overlay element right here.', 'start': 7885.735, 'duration': 4.464}], 'summary': 'Opacity transitions from 30% to 70% and 70% to 100%, then attaching css class for animation.', 'duration': 27.461, 'max_score': 7862.738, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w7862738.jpg'}, {'end': 8096.844, 'src': 'embed', 'start': 8072.714, 'weight': 5, 'content': [{'end': 8074.395, 'text': "There's a lot of written based content.", 'start': 8072.714, 'duration': 1.681}, {'end': 8076.996, 'text': "There's really cheap or free courses.", 'start': 8074.435, 'duration': 2.561}, {'end': 8079.777, 'text': 'Otherwise, I just do so much.', 'start': 8077.096, 'duration': 2.681}, {'end': 8081.158, 'text': "There's so many ways to learn it.", 'start': 8079.877, 'duration': 1.281}, {'end': 8086.1, 'text': "And really, I tell most people these days, don't go to college if you want to become a front end developer.", 'start': 8081.558, 'duration': 4.542}, {'end': 8089.762, 'text': 'All this stuff is very cheap or even free online to learn yourself.', 'start': 8086.161, 'duration': 3.601}, {'end': 8090.403, 'text': 'All right.', 'start': 8090.162, 'duration': 0.241}, {'end': 8096.583, 'text': "So If you enjoyed it, make sure please to subscribe, like it, leave a comment, and I'll see you guys very shortly.", 'start': 8090.423, 'duration': 6.16}, {'end': 8096.844, 'text': 'Goodbye.', 'start': 8096.603, 'duration': 0.241}], 'summary': 'Abundance of affordable online resources for learning front end development, discouraging traditional college education.', 'duration': 24.13, 'max_score': 8072.714, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w8072714.jpg'}], 'start': 7133.435, 'title': 'Front-end development fundamentals', 'summary': 'Covers animating elements using css properties and an introduction to javascript for creating interactive features, explores javascript basics for front-end development, delves into creating overlays using html, css, and javascript, and explains animating element opacity with css. it also emphasizes the importance of continuous learning in front-end development.', 'chapters': [{'end': 7246.881, 'start': 7133.435, 'title': 'Animating elements and introduction to javascript', 'summary': 'Covers animating elements using css properties like opacity and transform, along with an introduction to using javascript to create interactive features on a website, such as responding to user clicks and dynamically updating content.', 'duration': 113.446, 'highlights': ['The chapter covers animating elements using CSS properties like opacity and transform Demonstrates using CSS properties like opacity and transform to create animation effects on elements.', 'Introduction to using JavaScript to create interactive features on a website Explains the role of JavaScript in making websites interactive and responsive to user actions.', 'Responding to user clicks and dynamically updating content Illustrates the concept of using JavaScript to respond to user clicks and dynamically update website content based on user interactions.']}, {'end': 7427.338, 'start': 7246.881, 'title': 'Javascript basics for front-end development', 'summary': 'Explains how to link javascript files, write inline javascript, create properties and variables to access elements, and add event listeners, emphasizing the importance of learning the basics of javascript for front-end development.', 'duration': 180.457, 'highlights': ['The importance of learning the basics of JavaScript for front-end development The instructor emphasizes the significance of reading and learning the basics of JavaScript for front-end development, highlighting the need for viewers to watch multiple courses and read extensively.', "Creating properties and variables to access elements The process of creating properties and variables to access the button and overlay is explained, with the instructor demonstrating the use of unique IDs for JavaScript and the 'document.getElementById' method to assign variables.", "Explaining the process of adding event listeners The chapter explains the process of adding event listeners, specifically for the 'click' event, and mentions the availability of various other types of events, providing an overview of how to listen for specific interactions on elements.", "Linking JavaScript files and writing inline JavaScript The tutorial briefly touches on the ability to link JavaScript files or write inline JavaScript, indicating the instructor's choice to demonstrate inline JavaScript due to the minimal amount of code involved."]}, {'end': 7746.787, 'start': 7427.358, 'title': 'Creating overlay and animation', 'summary': 'Explains the process of creating an overlay using html, css, and javascript, including setting up the overlay, styling it, and applying animations to make it visible and hidden based on user interaction.', 'duration': 319.429, 'highlights': ["The overlay is created using a div with a class of overlay and an ID of overlay, which is then referenced in the JavaScript to change its display property. The process involves adding a div with a class of overlay and an ID of overlay in the HTML, and then using JavaScript to change the overlay's display property from none to grid when a specific button is clicked.", "The CSS is used to style the overlay, including setting its position to absolute, height and width to 100% viewport, background color to make it dark, and applying transparency using RGBA. The CSS styling involves setting the overlay's position to absolute, height and width to 100% viewport, using RGBA to control transparency, and setting the Z index to ensure it appears on top of other elements.", 'Applying CSS animation to the overlay involves setting its initial display to none and opacity to zero, and then changing them to grid and animating the opacity to create a fade-in effect when a specific button is clicked. The process of applying CSS animation involves setting the initial display of the overlay to none and opacity to zero, then changing the display to grid and animating the opacity to create a fade-in effect when triggered by a button click.']}, {'end': 8096.844, 'start': 7746.787, 'title': 'Animating element opacity', 'summary': 'Explains how to use css animation to fade in and out an element with detailed steps and code examples. it also emphasizes the importance of continuous learning and self-education in front-end development, suggesting various resources for further learning.', 'duration': 350.057, 'highlights': ['The chapter explains how to use CSS animation to fade in and out an element with detailed steps and code examples.', 'It emphasizes the importance of continuous learning and self-education in front-end development, suggesting various resources for further learning.']}], 'duration': 963.409, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QA0XpGhiz5w/pics/QA0XpGhiz5w7133435.jpg', 'highlights': ["Explains the process of adding event listeners, specifically for the 'click' event, and mentions the availability of various other types of events, providing an overview of how to listen for specific interactions on elements.", 'The overlay is created using a div with a class of overlay and an ID of overlay, which is then referenced in the JavaScript to change its display property.', 'The CSS is used to style the overlay, including setting its position to absolute, height and width to 100% viewport, background color to make it dark, and applying transparency using RGBA.', 'Applying CSS animation to the overlay involves setting its initial display to none and opacity to zero, and then changing them to grid and animating the opacity to create a fade-in effect when a specific button is clicked.', 'The chapter explains how to use CSS animation to fade in and out an element with detailed steps and code examples.', 'It emphasizes the importance of continuous learning and self-education in front-end development, suggesting various resources for further learning.', 'The chapter covers animating elements using CSS properties like opacity and transform Demonstrates using CSS properties like opacity and transform to create animation effects on elements.', 'Introduction to using JavaScript to create interactive features on a website Explains the role of JavaScript in making websites interactive and responsive to user actions.', 'Responding to user clicks and dynamically updating content Illustrates the concept of using JavaScript to respond to user clicks and dynamically update website content based on user interactions.', 'The importance of learning the basics of JavaScript for front-end development The instructor emphasizes the significance of reading and learning the basics of JavaScript for front-end development, highlighting the need for viewers to watch multiple courses and read extensively.', "Creating properties and variables to access elements The process of creating properties and variables to access the button and overlay is explained, with the instructor demonstrating the use of unique IDs for JavaScript and the 'document.getElementById' method to assign variables.", "Linking JavaScript files and writing inline JavaScript The tutorial briefly touches on the ability to link JavaScript files or write inline JavaScript, indicating the instructor's choice to demonstrate inline JavaScript due to the minimal amount of code involved."]}], 'highlights': ['The crash course is designed for beginners with no prior knowledge of HTML, CSS, or JavaScript.', 'Guidance is provided on setting up Visual Studio Code as the code editor, including instructions for creating a project folder and installing the live server plugin.', "The job role of a front-end developer is to take a UI/UX designer's prototype and make it a reality on all devices, ensuring it works on all devices and device widths.", 'The course emphasizes the importance of adopting a mobile-first design mentality when creating HTML and CSS, progressively enhancing the layout to work for tablets and desktops.', 'HTML is the standard markup language for building layouts and websites, serving as the structure or skeleton of layouts.', 'The chapter recommends w3schools.com as a resource for learning HTML, acknowledging its comprehensive coverage of HTML elements, attributes, and other related resources for in-depth learning.', 'The chapter emphasizes the use of the div element to define a section or area of the layout, providing a way to start creating the skeleton structure of the HTML document.', 'The transcript emphasizes the use of semantic HTML elements and classes for structuring and styling a website, highlighting the purpose of these elements and their attributes for effective styling and functionality.', 'The transcript provides a detailed explanation of creating a website skeleton using HTML, outlining the process of defining sections, adding a logo, and creating a headline, offering insights into the necessary structure and elements for a website layout.', 'HTML, though usually visually unappealing without CSS, is essential for creating the necessary structure for websites.', 'CSS plays a crucial role in web design, allowing for control over layout structure, colors, typography, alignment, and animations.', 'Using CSS for background images instead of HTML image tags allows for easier organization and prevents overlapping elements.', 'The chapter discusses the removal of default browser margins by setting the margin property to zero in the body element, providing control over the spacing within the layout.', "The 'text-align' property is used to center-align the text inside the section, creating a more visually appealing layout.", "By using the 'color' property and setting it to white, all the fonts and type inside the section are changed to white, ensuring a consistent look and feel.", 'The concept of padding is explained, emphasizing the use of relative units like EM for flexible and responsive design.', 'Demonstration of specifying padding and margin values in different ways, including using shorthand property and specifying padding for top and bottom only, with the example of using one EM for top and bottom padding and zero for right and left padding.', "Covers adjusting font weight and style using 'font-weight' and 'text-decoration' properties for better readability.", 'Emphasizes the use of REM units for text and font sizes, and EM units for margin and padding for responsive design.', 'The example demonstrates how changing the custom property value at the root level automatically updates all instances where the property is used, showcasing the efficiency and convenience of using custom CSS properties.', 'The use of media queries to adjust layout and styles based on screen size, such as changing margins and padding at specific pixel widths, is a key aspect of responsive design, exemplified by the demonstration of using media queries and CSS properties (e.g., margin, padding, box shadow) to enhance the layout.', 'Using flexbox and CSS grid to organize layout The chapter discusses using the flexbox and CSS grid to organize layout', 'Using CSS grid to manage layout The instructor demonstrates using CSS grid to manage the layout, including defining columns and rows, specifying grid template areas, and assigning elements to specific areas, resulting in a controlled and organized layout.', 'Suggestion to use flexbox for simple alignment and CSS grid for larger, complex elements The chapter suggests using flexbox for simple alignment and CSS grid for larger, complex elements', 'The instructor covers the implementation of animations using CSS, including defining animations, specifying durations, and creating keyframes to achieve a responsive and visually appealing design, as demonstrated in the prototype.', "Explains the process of adding event listeners, specifically for the 'click' event, and mentions the availability of various other types of events, providing an overview of how to listen for specific interactions on elements.", 'The overlay is created using a div with a class of overlay and an ID of overlay, which is then referenced in the JavaScript to change its display property.', 'The CSS is used to style the overlay, including setting its position to absolute, height and width to 100% viewport, background color to make it dark, and applying transparency using RGBA.', 'Applying CSS animation to the overlay involves setting its initial display to none and opacity to zero, and then changing them to grid and animating the opacity to create a fade-in effect when a specific button is clicked.', 'The chapter explains how to use CSS animation to fade in and out an element with detailed steps and code examples.', 'The chapter covers animating elements using CSS properties like opacity and transform Demonstrates using CSS properties like opacity and transform to create animation effects on elements.', 'Introduction to using JavaScript to create interactive features on a website Explains the role of JavaScript in making websites interactive and responsive to user actions.', 'Responding to user clicks and dynamically updating content Illustrates the concept of using JavaScript to respond to user clicks and dynamically update website content based on user interactions.', 'The importance of learning the basics of JavaScript for front-end development The instructor emphasizes the significance of reading and learning the basics of JavaScript for front-end development, highlighting the need for viewers to watch multiple courses and read extensively.', "Creating properties and variables to access elements The process of creating properties and variables to access the button and overlay is explained, with the instructor demonstrating the use of unique IDs for JavaScript and the 'document.getElementById' method to assign variables.", "Linking JavaScript files and writing inline JavaScript The tutorial briefly touches on the ability to link JavaScript files or write inline JavaScript, indicating the instructor's choice to demonstrate inline JavaScript due to the minimal amount of code involved."]}