title
From Prototype UI Design to HTML, CSS & JS Tutorial

description
http://www.linode.com/designcourse - Use code 'DESIGNC19' to get $20 credit on your new Linode account! -- A few days ago, I released a tutorial where I designed an email capture UI in Adobe XD from scratch. Today, we're taking that UI design and making it a reality in the browser by stepping into the realm of frontend development. We'll write the HTML, responsive CSS and then a little bit of JavaScript for some interactivity. Codepen: https://codepen.io/designcourse/live/vYBpYRx https://codepen.io/designcourse/pen/vYBpYRx Let's get started! #responsive #frontend #javascript - - - - - - - - - - - - - - - - - - - - - - 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': 'From Prototype UI Design to HTML, CSS & JS Tutorial', 'heatmap': [{'end': 2469.391, 'start': 2466.028, 'weight': 1}], 'summary': 'This tutorial covers front-end development, responsive design, and css styling for web pages, including planning html structure, applying responsive web design changes, creating grid layout, and adding interactive parallax effect using javascript. it also introduces linode as a sponsor, emphasizing their affordable cloud computing hosting services with plans starting at $5 and a $20 credit for new accounts.', 'chapters': [{'end': 38.975, 'segs': [{'end': 46.461, 'src': 'embed', 'start': 18.2, 'weight': 0, 'content': [{'end': 23.964, 'text': 'Unlike entry-level hosting services, Linode is a step up to powerful, fast, fully configurable cloud computing.', 'start': 18.2, 'duration': 5.764}, {'end': 31.65, 'text': 'With server plans starting at just $5 plus no hidden fees or surprise outages, Linode offers a no-nonsense hosting at a price you can afford.', 'start': 24.424, 'duration': 7.226}, {'end': 36.213, 'text': 'So sign up now using the link below to get a $20 credit on your new Linode account.', 'start': 31.89, 'duration': 4.323}, {'end': 38.975, 'text': "Hey everyone, what's up? Gary Simon of Corsetto.com.", 'start': 36.573, 'duration': 2.402}, {'end': 46.461, 'text': "So today we're going to take the design that we did, the series of mockups, rather from the previous tutorial just a few days ago,", 'start': 39.255, 'duration': 7.206}], 'summary': 'Linode offers powerful cloud computing with plans starting at $5 and no hidden fees, plus a $20 credit for new accounts.', 'duration': 28.261, 'max_score': 18.2, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTyMUjhA-o4/pics/GTyMUjhA-o418200.jpg'}], 'start': 0.189, 'title': 'Front-end development tutorial', 'summary': 'Introduces linode as a sponsor, highlighting their affordable and powerful cloud computing hosting services with plans starting at just $5 and a $20 credit for new accounts.', 'chapters': [{'end': 38.975, 'start': 0.189, 'title': 'Front-end development tutorial', 'summary': 'Introduces linode as a sponsor and emphasizes their affordable and powerful cloud computing hosting services with plans starting at just $5 and a $20 credit for new accounts.', 'duration': 38.786, 'highlights': ['Linode offers powerful, fast, fully configurable cloud computing with server plans starting at just $5.', 'By signing up using the provided link, new Linode accounts receive a $20 credit.', 'Linode provides hosting without hidden fees or surprise outages.']}], 'duration': 38.786, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTyMUjhA-o4/pics/GTyMUjhA-o4189.jpg', 'highlights': ['Linode offers powerful, fast, fully configurable cloud computing with server plans starting at just $5.', 'By signing up using the provided link, new Linode accounts receive a $20 credit.', 'Linode provides hosting without hidden fees or surprise outages.']}, {'end': 785.562, 'segs': [{'end': 63.695, 'src': 'embed', 'start': 39.255, 'weight': 0, 'content': [{'end': 46.461, 'text': "So today we're going to take the design that we did, the series of mockups, rather from the previous tutorial just a few days ago,", 'start': 39.255, 'duration': 7.206}, {'end': 49.083, 'text': 'which is right here, by the way, in Adobe XD.', 'start': 46.461, 'duration': 2.622}, {'end': 52.666, 'text': 'And I showed you exactly how to design this from scratch.', 'start': 50.084, 'duration': 2.582}, {'end': 60.012, 'text': "And I'm taking basically this variation for this tutorial, and we're going to make it a reality in the browser.", 'start': 53.627, 'duration': 6.385}, {'end': 61.833, 'text': "We're going to make it responsive.", 'start': 60.032, 'duration': 1.801}, {'end': 63.695, 'text': 'So we have a lot to cover here.', 'start': 62.333, 'duration': 1.362}], 'summary': 'Using adobe xd, we will convert a design into a responsive browser layout.', 'duration': 24.44, 'max_score': 39.255, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTyMUjhA-o4/pics/GTyMUjhA-o439255.jpg'}, {'end': 130.544, 'src': 'embed', 'start': 103.302, 'weight': 4, 'content': [{'end': 109.644, 'text': 'uh, for the email capture page, and the one that i decided to go ahead and, um, you know,', 'start': 103.302, 'duration': 6.342}, {'end': 118.023, 'text': "feature in terms of doing the html and css or the front end dev process is one that's more similar to this one,", 'start': 109.644, 'duration': 8.379}, {'end': 123.004, 'text': "although we're going to be using kind of this color gradient instead of this bluish color.", 'start': 118.023, 'duration': 4.981}, {'end': 125.985, 'text': "So, yeah, let's go ahead and get started.", 'start': 123.024, 'duration': 2.961}, {'end': 130.544, 'text': "So first, I'm in a Visual Studio code free code editor for Microsoft.", 'start': 126.105, 'duration': 4.439}], 'summary': 'Decided to work on email capture page with color gradient, using visual studio code.', 'duration': 27.242, 'max_score': 103.302, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTyMUjhA-o4/pics/GTyMUjhA-o4103302.jpg'}, {'end': 174.145, 'src': 'embed', 'start': 147.889, 'weight': 1, 'content': [{'end': 156.254, 'text': "So new folder of CSS and then main we'll use SAS and there's a live extension that we're going to use for live SAS compilation in a second.", 'start': 147.889, 'duration': 8.365}, {'end': 157.295, 'text': "It's going to show up right here.", 'start': 156.314, 'duration': 0.981}, {'end': 158.996, 'text': "I don't know why it takes so long for it to show up.", 'start': 157.335, 'duration': 1.661}, {'end': 160.517, 'text': "We'll click watch SAS.", 'start': 159.416, 'duration': 1.101}, {'end': 164.199, 'text': 'Um, and then also a right click index and open with live server.', 'start': 161.037, 'duration': 3.162}, {'end': 174.145, 'text': "So in order to, to watch the SAS and open with live server, of course, you're going to have to go to, uh, the extensions and let's click out of these.", 'start': 164.559, 'duration': 9.586}], 'summary': 'Using sas for css and live server extension for live compilation and viewing.', 'duration': 26.256, 'max_score': 147.889, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTyMUjhA-o4/pics/GTyMUjhA-o4147889.jpg'}, {'end': 234.338, 'src': 'embed', 'start': 208.677, 'weight': 2, 'content': [{'end': 218.323, 'text': "I never ever suggest just starting and the HTML CSS process without first having a design or a mockup first, because you're just going in blind.", 'start': 208.677, 'duration': 9.646}, {'end': 222.207, 'text': 'And the results are always subpar.', 'start': 218.964, 'duration': 3.243}, {'end': 223.608, 'text': "So the pros don't do that.", 'start': 222.227, 'duration': 1.381}, {'end': 227.752, 'text': "You always have, you know, a UI designer, if it's not yourself.", 'start': 223.708, 'duration': 4.044}, {'end': 234.338, 'text': 'create the design first, and then you know exactly the elements that you need to specify here in HTML CSS.', 'start': 227.752, 'duration': 6.586}], 'summary': 'Design before html/css: pros always do it, results are subpar otherwise.', 'duration': 25.661, 'max_score': 208.677, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTyMUjhA-o4/pics/GTyMUjhA-o4208677.jpg'}, {'end': 368.335, 'src': 'embed', 'start': 337.614, 'weight': 3, 'content': [{'end': 338.875, 'text': "So that's our first element.", 'start': 337.614, 'duration': 1.261}, {'end': 340.536, 'text': "It's going to be our container element.", 'start': 338.915, 'duration': 1.621}, {'end': 348.639, 'text': "Usually you'll see it's a standard convention usually for people to wrap everything in something in a class either called wrapper or container.", 'start': 341.356, 'duration': 7.283}, {'end': 350.5, 'text': "So we'll just do container.", 'start': 349.079, 'duration': 1.421}, {'end': 352.581, 'text': 'All right.', 'start': 352.301, 'duration': 0.28}, {'end': 361.109, 'text': "And then inside of container, let's see what we have really next that ends up falling here in line.", 'start': 352.721, 'duration': 8.388}, {'end': 368.335, 'text': 'So if we go to our mockup, we have two columns essentially that we could see.', 'start': 361.169, 'duration': 7.166}], 'summary': "Creating a container element named 'container' and two columns in a web layout.", 'duration': 30.721, 'max_score': 337.614, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTyMUjhA-o4/pics/GTyMUjhA-o4337614.jpg'}, {'end': 785.562, 'src': 'embed', 'start': 758.701, 'weight': 5, 'content': [{'end': 763.143, 'text': 'with our CSS rule sets and our properties, for it to work on mobile, and then,', 'start': 758.701, 'duration': 4.442}, {'end': 769.228, 'text': 'as we start to expand and we get to bigger devices and larger screen sizes,', 'start': 763.963, 'duration': 5.265}, {'end': 776.074, 'text': "essentially we'll go ahead and use media queries and then make adjustments, additions, etc.", 'start': 769.228, 'duration': 6.846}, {'end': 778.876, 'text': 'to the CSS properties.', 'start': 776.094, 'duration': 2.782}, {'end': 785.562, 'text': "So the first thing that we'll do is, let me get my reference monitor here.", 'start': 779.437, 'duration': 6.125}], 'summary': 'Using media queries to adjust css for mobile and larger devices.', 'duration': 26.861, 'max_score': 758.701, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTyMUjhA-o4/pics/GTyMUjhA-o4758701.jpg'}], 'start': 39.255, 'title': 'Creating responsive design and planning html structure', 'summary': 'Covers creating a responsive design with a parallax effect using adobe xd mockups for an upcoming ui design course and demonstrates setting up html, css, and live sas compilation. it also explains the importance of planning the html structure, emphasizing starting with a design before delving into the html/css process and detailing specific html elements and structure required for a sample project.', 'chapters': [{'end': 189.613, 'start': 39.255, 'title': 'Creating responsive design with parallax effect', 'summary': 'Covers creating a responsive design with a parallax effect using adobe xd mockups, which will be used for an upcoming ui design course, and demonstrates the process of setting up the html, css, and live sas compilation in visual studio code for implementing the design. the tutorial will also utilize a color gradient for the design.', 'duration': 150.358, 'highlights': ['The tutorial demonstrates the process of setting up the HTML, CSS, and live SAS compilation in Visual Studio Code for implementing the design. The tutorial explains the steps for setting up the HTML, CSS, and live SAS compilation in Visual Studio Code, emphasizing the use of a blank folder and creating index.html and main.css files.', 'The chapter covers creating a responsive design with a parallax effect using Adobe XD mockups, which will be used for an upcoming UI design course. The chapter emphasizes the creation of a responsive design with a parallax effect using Adobe XD mockups, intended for an upcoming UI design course and the process of turning the design into a reality in the browser.', "The tutorial will also utilize a color gradient for the design. The tutorial mentions the utilization of a color gradient instead of the bluish color for the design, adding a visual element to the tutorial's content."]}, {'end': 785.562, 'start': 189.633, 'title': 'Planning html structure for web design', 'summary': 'Explains the importance of planning the html structure for a web design project, emphasizing the necessity of starting with a design or mockup before delving into the html/css process, and detailing the specific html elements and structure required for a sample project, including the use of containers, columns, and classes.', 'duration': 595.929, 'highlights': ['The importance of starting with a design or mockup before beginning the HTML/CSS process is emphasized, as it leads to subpar results when not followed. Starting with a design or mockup before delving into the HTML/CSS process is emphasized to avoid subpar results.', 'Detailed explanation of the specific HTML elements required for the sample project, including the use of containers, columns, and classes, is provided. Detailed explanation of the specific HTML elements required for the sample project, including the use of containers, columns, and classes, is provided.', "The concept of 'mobile first' approach in CSS is introduced, emphasizing the initial design for mobile devices and subsequent adjustments for larger screens using media queries. The 'mobile first' approach in CSS is introduced, emphasizing the initial design for mobile devices and subsequent adjustments for larger screens using media queries."]}], 'duration': 746.307, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTyMUjhA-o4/pics/GTyMUjhA-o439255.jpg', 'highlights': ['The tutorial covers creating a responsive design with a parallax effect using Adobe XD mockups for an upcoming UI design course.', 'The tutorial demonstrates the process of setting up the HTML, CSS, and live SAS compilation in Visual Studio Code for implementing the design.', 'The importance of starting with a design or mockup before beginning the HTML/CSS process is emphasized.', 'Detailed explanation of the specific HTML elements required for the sample project, including the use of containers, columns, and classes, is provided.', 'The tutorial will also utilize a color gradient for the design.', "The concept of 'mobile first' approach in CSS is introduced, emphasizing the initial design for mobile devices and subsequent adjustments for larger screens using media queries."]}, {'end': 1292.623, 'segs': [{'end': 880.427, 'src': 'embed', 'start': 828.639, 'weight': 0, 'content': [{'end': 834.402, 'text': "Background, I'm going to get a very light gray, just a bunch of Es, six Es to be exact.", 'start': 828.639, 'duration': 5.763}, {'end': 841.334, 'text': "All right, so we can see that white logo is now starting to show up, although it's going to be purple there pretty soon.", 'start': 835.851, 'duration': 5.483}, {'end': 846.796, 'text': "Font size, by default, it's 16 pixels, I believe.", 'start': 841.834, 'duration': 4.962}, {'end': 852.699, 'text': "All right, and then for the height, let's do height here, 100 viewport height.", 'start': 846.816, 'duration': 5.883}, {'end': 860.582, 'text': 'All right, and we need to do that, especially when it comes to the desktop versions.', 'start': 853.539, 'duration': 7.043}, {'end': 869.224, 'text': 'In order for us to have that column like that purple column over here Extend all the way down the browser.', 'start': 862.363, 'duration': 6.861}, {'end': 874.005, 'text': 'We need to set the body to 100% Or 100 viewport Heights.', 'start': 869.304, 'duration': 4.701}, {'end': 876.266, 'text': "So let's all let's continue here.", 'start': 874.565, 'duration': 1.701}, {'end': 880.427, 'text': "The next one is going to be container, Which is the one that's just kind of encasing everything.", 'start': 876.306, 'duration': 4.121}], 'summary': 'Styling details include 16px font size, 100vh height, and a container encasing everything.', 'duration': 51.788, 'max_score': 828.639, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTyMUjhA-o4/pics/GTyMUjhA-o4828639.jpg'}, {'end': 967.538, 'src': 'embed', 'start': 936.226, 'weight': 1, 'content': [{'end': 938.488, 'text': "We're also going to specify left.", 'start': 936.226, 'duration': 2.262}, {'end': 940.53, 'text': 'So this is technically.', 'start': 938.708, 'duration': 1.822}, {'end': 941.111, 'text': "it's not left.", 'start': 940.53, 'duration': 0.581}, {'end': 948.558, 'text': "it's stacked on top of these columns to become stacked on mobile, which is a common practice for mobile design,", 'start': 941.111, 'duration': 7.447}, {'end': 954.524, 'text': "because we just don't have enough space to have these two columns left and right here.", 'start': 948.558, 'duration': 5.966}, {'end': 956.666, 'text': "So we're stacking them on top of each other by default.", 'start': 954.584, 'duration': 2.082}, {'end': 960.43, 'text': "So left, we're gonna give it a gradient.", 'start': 957.787, 'duration': 2.643}, {'end': 963.874, 'text': "So I already have the gradient, it's just using a linear gradient.", 'start': 960.45, 'duration': 3.424}, {'end': 967.538, 'text': 'So background, linear gradient, and then these properties right here.', 'start': 964.354, 'duration': 3.184}], 'summary': 'Design involves stacking columns on mobile and applying a gradient to the left column.', 'duration': 31.312, 'max_score': 936.226, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTyMUjhA-o4/pics/GTyMUjhA-o4936226.jpg'}, {'end': 1046.678, 'src': 'embed', 'start': 1015.424, 'weight': 2, 'content': [{'end': 1017.025, 'text': "It's because of this SVG graphic.", 'start': 1015.424, 'duration': 1.601}, {'end': 1018.146, 'text': "We haven't yet dealt with it.", 'start': 1017.045, 'duration': 1.101}, {'end': 1020.788, 'text': "So it's kind of just pushing things and screwing them all up.", 'start': 1018.206, 'duration': 2.582}, {'end': 1022.549, 'text': 'But the HTML is correct for this part.', 'start': 1020.828, 'duration': 1.721}, {'end': 1024.43, 'text': "So let's continue on.", 'start': 1023.449, 'duration': 0.981}, {'end': 1027.232, 'text': 'After that, we have.', 'start': 1024.569, 'duration': 2.663}, {'end': 1027.913, 'text': "Let's see here.", 'start': 1027.232, 'duration': 0.681}, {'end': 1032.432, 'text': 'Our right column.', 'start': 1028.173, 'duration': 4.259}, {'end': 1034.553, 'text': "i'm going to put just right paragraph.", 'start': 1032.432, 'duration': 2.121}, {'end': 1037.874, 'text': "so we're going to specify just the paragraph inside of the right column,", 'start': 1034.553, 'duration': 3.321}, {'end': 1046.678, 'text': "which happens to be this get notified when i release this course and we're going to give it some margin just to push it away more than it is because it's too close to this stuff over here.", 'start': 1037.874, 'duration': 8.804}], 'summary': 'Issues with svg graphic causing layout problems, html is correct, adjusting right column paragraph for course release notification.', 'duration': 31.254, 'max_score': 1015.424, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTyMUjhA-o4/pics/GTyMUjhA-o41015424.jpg'}, {'end': 1125.656, 'src': 'embed', 'start': 1096.004, 'weight': 3, 'content': [{'end': 1103.81, 'text': "It's gonna be margin top here, two EM, width is gonna be three EM, and border radius will be 50%.", 'start': 1096.004, 'duration': 7.806}, {'end': 1107.813, 'text': "All right, so we're getting there.", 'start': 1103.81, 'duration': 4.003}, {'end': 1110.675, 'text': "Now the arrow, here's where we fix the main problem.", 'start': 1107.833, 'duration': 2.842}, {'end': 1116.56, 'text': "It's gonna be a width of 15 EM units, and there we go.", 'start': 1111.196, 'duration': 5.364}, {'end': 1118.921, 'text': 'Now things are starting to look a lot better.', 'start': 1117.2, 'duration': 1.721}, {'end': 1120.172, 'text': 'All right.', 'start': 1119.912, 'duration': 0.26}, {'end': 1122.114, 'text': "So let's continue on where we left off.", 'start': 1120.212, 'duration': 1.902}, {'end': 1125.656, 'text': 'We were up here after the right P.', 'start': 1122.154, 'duration': 3.502}], 'summary': 'Styling adjustments made for margin, width, and border radius. arrow width set to 15 em, improving appearance.', 'duration': 29.652, 'max_score': 1096.004, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTyMUjhA-o4/pics/GTyMUjhA-o41096004.jpg'}, {'end': 1260.667, 'src': 'embed', 'start': 1234.773, 'weight': 4, 'content': [{'end': 1240.235, 'text': 'So if we do this, it thickens things up, just makes it look better and easier to use.', 'start': 1234.773, 'duration': 5.462}, {'end': 1242.616, 'text': "font size we're going to increase as well to 1.3.", 'start': 1240.235, 'duration': 2.381}, {'end': 1252.922, 'text': "rem units, all right, and then we're going to have, uh, outline none and margin 1em.", 'start': 1242.616, 'duration': 10.306}, {'end': 1257.985, 'text': 'so 1em on top, right, bottom left, all right.', 'start': 1252.922, 'duration': 5.063}, {'end': 1260.667, 'text': "now we're going to override just a couple of those with button.", 'start': 1257.985, 'duration': 2.682}], 'summary': 'Increasing font size to 1.3 for better visibility and using 1em margin.', 'duration': 25.894, 'max_score': 1234.773, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTyMUjhA-o4/pics/GTyMUjhA-o41234773.jpg'}], 'start': 786.563, 'title': 'Css styling for web page', 'summary': 'Covers the process of applying css styling to a web page, including specifying fonts, colors, padding, and margins, as well as setting widths and heights for various elements, with specific attention to the body, container, logo, left column, right column, attention, light, and input and button, to achieve a visually appealing and user-friendly design.', 'chapters': [{'end': 1292.623, 'start': 786.563, 'title': 'Css styling for web page', 'summary': 'Covers the process of applying css styling to a web page, including specifying fonts, colors, padding, and margins, as well as setting widths and heights for various elements, with specific attention to the body, container, logo, left column, right column, attention, light, and input and button, to achieve a visually appealing and user-friendly design.', 'duration': 506.06, 'highlights': ["Setting font family to Montserrat and background to very light gray. The speaker specified the font family as Montserrat and the background color as very light gray using six E's, along with setting default font size to 16 pixels.", 'Setting body height to 100 viewport height and centering the container with margin and text align properties. The speaker set the body height to 100 viewport height and centered the container using margin and text align properties.', 'Adjusting the logo size, spacing, and color, and applying a gradient to the left column. The speaker adjusted the logo size, spacing, and color, and applied a gradient to the left column for a visually appealing design.', 'Specifying margin for the paragraph in the right column and adjusting the layout for attention, including the width, margin, and text alignment. The speaker specified margin for the paragraph in the right column and adjusted the layout for attention, including the width, margin, and text alignment.', 'Setting width and border radius for the avatar class and adjusting the width for the arrow element. The speaker set the width and border radius for the avatar class and adjusted the width for the arrow element to improve the visual appearance.', 'Adjusting the color and margin of the light element and specifying styles for the input and button elements. The speaker adjusted the color and margin of the light element and specified styles for the input and button elements to enhance the overall user experience.']}], 'duration': 506.06, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTyMUjhA-o4/pics/GTyMUjhA-o4786563.jpg', 'highlights': ['Setting body height to 100 viewport height and centering the container with margin and text align properties.', 'Adjusting the logo size, spacing, and color, and applying a gradient to the left column.', 'Specifying margin for the paragraph in the right column and adjusting the layout for attention, including the width, margin, and text alignment.', 'Setting width and border radius for the avatar class and adjusting the width for the arrow element.', 'Adjusting the color and margin of the light element and specifying styles for the input and button elements.', "Setting font family to Montserrat and background to very light gray using six E's, along with setting default font size to 16 pixels."]}, {'end': 1578.449, 'segs': [{'end': 1402.65, 'src': 'embed', 'start': 1314.712, 'weight': 0, 'content': [{'end': 1325.52, 'text': "So continuing on after that, we're pretty happy with what I'm pretty happy at least with what this is looking like here on a mobile preview.", 'start': 1314.712, 'duration': 10.808}, {'end': 1335.929, 'text': 'All right, so the next step is at what point do we want this thing to start changing? Because on a desktop, this would be pretty bad.', 'start': 1327.062, 'duration': 8.867}, {'end': 1342.254, 'text': "It's not very useful in this massive input area, the massive button.", 'start': 1336.389, 'duration': 5.865}, {'end': 1350.901, 'text': 'We need to situate this thing and make it look more like this on the desktop.', 'start': 1342.294, 'duration': 8.607}, {'end': 1351.702, 'text': 'So how do we do that?', 'start': 1350.941, 'duration': 0.761}, {'end': 1352.919, 'text': 'All right.', 'start': 1352.639, 'duration': 0.28}, {'end': 1359.361, 'text': 'so first you may be wondering okay, at what point do you know where you think the layout should start to break??', 'start': 1352.919, 'duration': 6.442}, {'end': 1362.321, 'text': "And so there's not a specific pixel.", 'start': 1359.421, 'duration': 2.9}, {'end': 1363.802, 'text': 'you know amount.', 'start': 1362.321, 'duration': 1.481}, {'end': 1369.043, 'text': "As you can see, when you have the inspector open, sorry, I'm like burping here.", 'start': 1364.342, 'duration': 4.701}, {'end': 1373.304, 'text': 'You can see it tells us the pixel width and height.', 'start': 1369.883, 'duration': 3.421}, {'end': 1381.674, 'text': "Alright, so I, the media query that we're going to use for the first one is around 768.", 'start': 1374.631, 'duration': 7.043}, {'end': 1390.299, 'text': "That's a very common one, that's about where this should probably break into multiple columns right here, because we have enough width in the screen.", 'start': 1381.674, 'duration': 8.625}, {'end': 1392.98, 'text': 'So come down here.', 'start': 1391.059, 'duration': 1.921}, {'end': 1402.65, 'text': "And we're gonna type in app media only screen and min width 768 pixels.", 'start': 1394.605, 'duration': 8.045}], 'summary': 'Optimizing layout for mobile and desktop with a media query at 768 pixels.', 'duration': 87.938, 'max_score': 1314.712, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTyMUjhA-o4/pics/GTyMUjhA-o41314712.jpg'}, {'end': 1547.815, 'src': 'embed', 'start': 1432.651, 'weight': 1, 'content': [{'end': 1439.817, 'text': "If we go from like some something absurd to like 26 pixels, we can see how it's not just the font sizes that change,", 'start': 1432.651, 'duration': 7.166}, {'end': 1444.841, 'text': "but it's a space between them as well, because we're using EM units on a lot of our margins and our padding.", 'start': 1439.817, 'duration': 5.024}, {'end': 1445.662, 'text': 'All right.', 'start': 1445.382, 'duration': 0.28}, {'end': 1446.943, 'text': "So let's go back just to 20.", 'start': 1445.702, 'duration': 1.241}, {'end': 1449.145, 'text': "So we're only bumping it up by two pixels.", 'start': 1446.943, 'duration': 2.202}, {'end': 1453.389, 'text': "Um, I'm also going to change, uh, the width of the button.", 'start': 1449.966, 'duration': 3.423}, {'end': 1456.011, 'text': "See, it doesn't really, it's a little bit, it's way too long.", 'start': 1453.729, 'duration': 2.282}, {'end': 1456.952, 'text': "So we're just going to do button.", 'start': 1456.091, 'duration': 0.861}, {'end': 1463.087, 'text': 'Width is 60% and to overwrite that type important.', 'start': 1459.013, 'duration': 4.074}, {'end': 1467.018, 'text': 'All right, and then same thing with our input.', 'start': 1464.898, 'duration': 2.12}, {'end': 1471.199, 'text': "In order to get these lined up, you can't just put width 60% as well.", 'start': 1467.799, 'duration': 3.4}, {'end': 1477.261, 'text': 'If we did, it would be like slightly off still just based on how these things are styled.', 'start': 1471.219, 'duration': 6.042}, {'end': 1480.141, 'text': "See how it's a little bit longer? That is frustrating.", 'start': 1477.281, 'duration': 2.86}, {'end': 1488.523, 'text': "So we're going to change this to calc 60% minus 1 EM because we had 0.5 EM on the right and left.", 'start': 1480.201, 'duration': 8.322}, {'end': 1491.084, 'text': 'So now they match up a lot better.', 'start': 1489.463, 'duration': 1.621}, {'end': 1492.885, 'text': "That's all I'm going to do for that media query.", 'start': 1491.344, 'duration': 1.541}, {'end': 1501.488, 'text': "And then coming out to about 1024, which is another standard media query, just underneath here, you can see we're getting around 1024.", 'start': 1493.405, 'duration': 8.083}, {'end': 1504.25, 'text': "We're going to break into a two column layout.", 'start': 1501.488, 'duration': 2.762}, {'end': 1509.032, 'text': "So let's just copy this real quick just so we have the media query code and then gut this stuff.", 'start': 1504.79, 'duration': 4.242}, {'end': 1514.234, 'text': "So yeah, we're not going to mess with the body tag here.", 'start': 1510.972, 'duration': 3.262}, {'end': 1515.695, 'text': 'So this is going to be 1024 here.', 'start': 1514.834, 'duration': 0.861}, {'end': 1521.356, 'text': 'inside of here.', 'start': 1520.735, 'duration': 0.621}, {'end': 1529.001, 'text': "the first thing we're going to change is container width is going to be a hundred percent all right.", 'start': 1521.356, 'duration': 7.645}, {'end': 1532.464, 'text': 'so wait, you know, i think i already had the width at a hundred percent or no?', 'start': 1529.001, 'duration': 3.463}, {'end': 1533.965, 'text': "i didn't.", 'start': 1532.464, 'duration': 1.501}, {'end': 1536.306, 'text': 'i think it would be that by default anyhow.', 'start': 1533.965, 'duration': 2.341}, {'end': 1538.968, 'text': 'so never mind that i was experimenting with different layouts.', 'start': 1536.306, 'duration': 2.662}, {'end': 1540.109, 'text': 'so i still have someone.', 'start': 1538.968, 'duration': 1.141}, {'end': 1541.59, 'text': 'you see, unused css.', 'start': 1540.109, 'duration': 1.481}, {'end': 1543.292, 'text': "that i'm i'm contending with.", 'start': 1541.59, 'duration': 1.702}, {'end': 1547.815, 'text': "so the logo um, we're going to give it a margin of 1em and zero.", 'start': 1543.292, 'duration': 4.523}], 'summary': 'Adjustments made to font sizes, button and input widths, and container layout for media queries at specific breakpoints.', 'duration': 115.164, 'max_score': 1432.651, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTyMUjhA-o4/pics/GTyMUjhA-o41432651.jpg'}], 'start': 1293.703, 'title': 'Responsive web design changes', 'summary': 'Delves into making responsive web design changes by adjusting media queries and layout for different screen sizes, updating css properties such as container width, margins, and line height, and employing styling and layout adjustments for a mobile preview, including modifying cursor, button size, and layout breakpoints. it also covers the use of a media query at 768 pixels to adjust the layout, increase font size, and modify the width of button and input fields for improved design and responsiveness.', 'chapters': [{'end': 1369.043, 'start': 1293.703, 'title': 'Styling and layout adjustments', 'summary': 'Discusses making styling and layout adjustments for a mobile preview, with focus on modifying the cursor, button size, and layout breakpoints.', 'duration': 75.34, 'highlights': ['Making styling and layout adjustments for a mobile preview, including modifying cursor, button size, and layout breakpoints.', 'The need to situate and adjust the layout for a desktop view as it would look bad and not very useful with the current massive input area and button size.', 'No specific pixel amount for layout breakpoint, as indicated with the inspector open.']}, {'end': 1477.261, 'start': 1369.883, 'title': 'Media query and styling adjustments', 'summary': 'Discusses using a media query at 768 pixels to adjust the layout, increasing the font size, and modifying the width of the button and input fields to improve the design and responsiveness of the web page.', 'duration': 107.378, 'highlights': ['Using a media query at 768 pixels to adjust the layout The media query is set at 768 pixels to create a responsive layout for the web page, allowing the content to be displayed in multiple columns for better readability.', 'Increasing the font size for better visibility and spacing The font size is adjusted from 18 to 20 pixels, impacting the overall appearance and spacing between elements, demonstrating the use of EM units for margins and padding.', "Modifying the width of the button and input fields for improved design The width of the button and input fields is adjusted to 60% to align and enhance the visual appeal, with the use of 'important' to override existing styles."]}, {'end': 1578.449, 'start': 1477.281, 'title': 'Responsive web design changes', 'summary': 'Discusses making responsive web design changes, including adjusting media queries and layout for different screen sizes, and updating css properties like container width, margins, and line height.', 'duration': 101.168, 'highlights': ['Adjusting media queries to ensure elements match up better, such as changing to calc 60% minus 1 EM to align with the 0.5 EM on the right and left.', 'Updating layout to a two-column format for screens around 1024px wide.', 'Modifying CSS properties like container width to 100%, adding margin to the logo, and adjusting line height for paragraphs to 1.7 EM for better spacing.']}], 'duration': 284.746, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTyMUjhA-o4/pics/GTyMUjhA-o41293703.jpg', 'highlights': ['Using a media query at 768 pixels to adjust the layout The media query is set at 768 pixels to create a responsive layout for the web page, allowing the content to be displayed in multiple columns for better readability.', 'Updating layout to a two-column format for screens around 1024px wide.', 'Adjusting media queries to ensure elements match up better, such as changing to calc 60% minus 1 EM to align with the 0.5 EM on the right and left.', 'Increasing the font size for better visibility and spacing The font size is adjusted from 18 to 20 pixels, impacting the overall appearance and spacing between elements, demonstrating the use of EM units for margins and padding.', "Modifying the width of the button and input fields for improved design The width of the button and input fields is adjusted to 60% to align and enhance the visual appeal, with the use of 'important' to override existing styles.", 'Modifying CSS properties like container width to 100%, adding margin to the logo, and adjusting line height for paragraphs to 1.7 EM for better spacing.', 'Making styling and layout adjustments for a mobile preview, including modifying cursor, button size, and layout breakpoints.', 'The need to situate and adjust the layout for a desktop view as it would look bad and not very useful with the current massive input area and button size.', 'No specific pixel amount for layout breakpoint, as indicated with the inspector open.']}, {'end': 2095.904, 'segs': [{'end': 1653.267, 'src': 'embed', 'start': 1578.629, 'weight': 0, 'content': [{'end': 1579.452, 'text': "We're going to have inner.", 'start': 1578.629, 'duration': 0.823}, {'end': 1583.587, 'text': "All right, and we're going to say display grid.", 'start': 1580.885, 'duration': 2.702}, {'end': 1585.629, 'text': "Now, let's go back to our HTML.", 'start': 1583.748, 'duration': 1.881}, {'end': 1593.756, 'text': 'We have inner here, and we have these child elements of div class left and div class right.', 'start': 1586.03, 'duration': 7.726}, {'end': 1601.083, 'text': 'All right, so we want to convert these two into an actual left and right column, so two columns.', 'start': 1594.357, 'duration': 6.726}, {'end': 1602.784, 'text': "We're going to do that with the grid.", 'start': 1601.103, 'duration': 1.681}, {'end': 1605.927, 'text': 'So grid template columns.', 'start': 1603.365, 'duration': 2.562}, {'end': 1611.611, 'text': "We're going to give the left one 55% and then just auto on the right.", 'start': 1607.088, 'duration': 4.523}, {'end': 1617.655, 'text': "So now things are starting to take shape, although of course they're still kind of screwed up looking.", 'start': 1612.952, 'duration': 4.703}, {'end': 1620.917, 'text': "Let's specify left here.", 'start': 1619.536, 'duration': 1.381}, {'end': 1623.139, 'text': 'Text align left.', 'start': 1622.218, 'duration': 0.921}, {'end': 1633.465, 'text': "Can't see all these changes because now we're getting into a bigger sort of viewports here and we wouldn't be able to see our code.", 'start': 1625.017, 'duration': 8.448}, {'end': 1635.967, 'text': 'Padding 0 and 2 EM.', 'start': 1633.545, 'duration': 2.422}, {'end': 1637.989, 'text': "So that's padding on the right and left.", 'start': 1636.007, 'duration': 1.982}, {'end': 1640.572, 'text': "We're going to really get it away from the edges here.", 'start': 1638.45, 'duration': 2.122}, {'end': 1644.515, 'text': "We're going to say height is 100 viewport height.", 'start': 1640.592, 'duration': 3.923}, {'end': 1645.897, 'text': "That's going to push this all the way down.", 'start': 1644.555, 'duration': 1.342}, {'end': 1647.618, 'text': "So now we're getting somewhere.", 'start': 1646.617, 'duration': 1.001}, {'end': 1650.121, 'text': "We're also going to make this a grid itself.", 'start': 1648.479, 'duration': 1.642}, {'end': 1653.267, 'text': 'All right.', 'start': 1652.947, 'duration': 0.32}], 'summary': 'Using css grid to create two columns with 55% and auto widths, aligning text left and adding padding for better visibility.', 'duration': 74.638, 'max_score': 1578.629, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTyMUjhA-o4/pics/GTyMUjhA-o41578629.jpg'}, {'end': 1918.378, 'src': 'embed', 'start': 1861.458, 'weight': 1, 'content': [{'end': 1861.838, 'text': 'Never mind.', 'start': 1861.458, 'duration': 0.38}, {'end': 1862.978, 'text': 'Sorry about that.', 'start': 1862.418, 'duration': 0.56}, {'end': 1865.86, 'text': "Because I really don't want this effect for mobile.", 'start': 1862.998, 'duration': 2.862}, {'end': 1868.481, 'text': 'So this effect is only going to take place for desktop.', 'start': 1866.16, 'duration': 2.321}, {'end': 1871.382, 'text': "So we're going to say proto container.", 'start': 1868.521, 'duration': 2.861}, {'end': 1872.683, 'text': 'All right.', 'start': 1871.402, 'duration': 1.281}, {'end': 1874.744, 'text': 'So position is going to be absolute.', 'start': 1872.923, 'duration': 1.821}, {'end': 1881.127, 'text': "That's just the way to really position things wherever you want, essentially.", 'start': 1875.744, 'duration': 5.383}, {'end': 1885.269, 'text': 'Top is going to be 20% from the top of the browser.', 'start': 1881.707, 'duration': 3.562}, {'end': 1887.43, 'text': "Height, I'm going to put.", 'start': 1885.389, 'duration': 2.041}, {'end': 1903.35, 'text': "70 and z index so that we can see it will be zero, width will be a hundred percent and pointer events will be none, and that's important.", 'start': 1892.025, 'duration': 11.325}, {'end': 1908.713, 'text': "for, uh, when we're we want to move our mouse around, uh, when we hover over it.", 'start': 1903.35, 'duration': 5.363}, {'end': 1913.275, 'text': "actually, what i'll do is just comment this out so i can show you what that actually does.", 'start': 1908.713, 'duration': 4.562}, {'end': 1918.378, 'text': "um So, right now we can't see anything because we haven't done anything.", 'start': 1913.275, 'duration': 5.103}], 'summary': 'Css effect applied for desktop only, absolute positioning with specific dimensions and pointer events disabled.', 'duration': 56.92, 'max_score': 1861.458, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTyMUjhA-o4/pics/GTyMUjhA-o41861458.jpg'}, {'end': 2098.005, 'src': 'embed', 'start': 2070.185, 'weight': 5, 'content': [{'end': 2074.226, 'text': "There was one more media query I wanted to do, and I'm simply just going to paste the whole thing in.", 'start': 2070.185, 'duration': 4.041}, {'end': 2075.268, 'text': "There's only three rule sets.", 'start': 2074.246, 'duration': 1.022}, {'end': 2078.188, 'text': 'So at 1600 pixels.', 'start': 2076.688, 'duration': 1.5}, {'end': 2086.393, 'text': "this is where, a lot like much larger screens, we're setting the body size to 22 pixels from 20, and then just adjusting padding right here.", 'start': 2078.188, 'duration': 8.205}, {'end': 2089.438, 'text': 'So There we go.', 'start': 2087.094, 'duration': 2.344}, {'end': 2092.501, 'text': "This is at 1920 because we're maximized.", 'start': 2090.159, 'duration': 2.342}, {'end': 2095.904, 'text': "I'm on a 2K res just for this video.", 'start': 2092.621, 'duration': 3.283}, {'end': 2098.005, 'text': 'So this is good.', 'start': 2096.844, 'duration': 1.161}], 'summary': 'Media query for 1600 pixels: body size set to 22 pixels from 20, and padding adjusted. on 2k res at 1920 pixels.', 'duration': 27.82, 'max_score': 2070.185, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTyMUjhA-o4/pics/GTyMUjhA-o42070185.jpg'}], 'start': 1578.629, 'title': 'Css layout, styling, and desktop effects', 'summary': 'Covers creating grid layout with specific column widths, padding, and alignment properties, resulting in a visually appealing and responsive design. it also discusses creating desktop-only styling effects with specific css properties and media queries for larger screens.', 'chapters': [{'end': 1861.378, 'start': 1578.629, 'title': 'Css layout and styling', 'summary': 'Covers the process of creating a grid layout with specific column widths, adjusting padding and alignment properties, and setting dimensions for various elements, resulting in a visually appealing and responsive design.', 'duration': 282.749, 'highlights': ["Creating a grid layout with specific column widths Using 'display grid' and 'grid template columns' to create a two-column layout with a left column of 55% width and an auto-sized right column.", "Adjusting padding and alignment properties Setting padding and text alignment properties to improve the appearance and structure of the layout, such as using 'padding 0 and 2 EM' and 'text align left'.", "Setting dimensions for various elements Defining the dimensions of elements including setting the height to '100 viewport height' and specifying specific font sizes and widths for elements like H1, span, input, and button."]}, {'end': 2095.904, 'start': 1861.458, 'title': 'Styling desktop effect', 'summary': 'Discusses the process of creating a desktop-only styling effect with specific css properties, including absolute positioning, z-index, and clip-path, as well as the use of media queries for larger screens.', 'duration': 234.446, 'highlights': ['Creating desktop-only styling effect The chapter discusses creating a styling effect that exclusively applies to desktop screens, utilizing CSS properties like absolute positioning and clip-path.', 'Use of specific CSS properties The speaker explains the use of specific CSS properties such as absolute positioning, z-index, clip-path, and pointer events to achieve the desired styling effect.', 'Media query for larger screens The chapter includes a media query for larger screens, where the body size is set to 22 pixels at 1600 pixels viewport width.']}], 'duration': 517.275, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTyMUjhA-o4/pics/GTyMUjhA-o41578629.jpg', 'highlights': ["Creating a grid layout with specific column widths Using 'display grid' and 'grid template columns' to create a two-column layout with a left column of 55% width and an auto-sized right column.", 'Creating desktop-only styling effect The chapter discusses creating a styling effect that exclusively applies to desktop screens, utilizing CSS properties like absolute positioning and clip-path.', "Adjusting padding and alignment properties Setting padding and text alignment properties to improve the appearance and structure of the layout, such as using 'padding 0 and 2 EM' and 'text align left'.", 'Use of specific CSS properties The speaker explains the use of specific CSS properties such as absolute positioning, z-index, clip-path, and pointer events to achieve the desired styling effect.', "Setting dimensions for various elements Defining the dimensions of elements including setting the height to '100 viewport height' and specifying specific font sizes and widths for elements like H1, span, input, and button.", 'Media query for larger screens The chapter includes a media query for larger screens, where the body size is set to 22 pixels at 1600 pixels viewport width.']}, {'end': 2469.731, 'segs': [{'end': 2127.547, 'src': 'embed', 'start': 2096.844, 'weight': 0, 'content': [{'end': 2098.005, 'text': 'So this is good.', 'start': 2096.844, 'duration': 1.161}, {'end': 2098.966, 'text': 'We could leave it like this.', 'start': 2098.125, 'duration': 0.841}, {'end': 2099.566, 'text': "It's fine.", 'start': 2099.046, 'duration': 0.52}, {'end': 2100.947, 'text': 'People get the idea.', 'start': 2100.146, 'duration': 0.801}, {'end': 2106.411, 'text': "These are kind of like just, I don't know, artboards or mockups, something to do with user interfaces.", 'start': 2100.967, 'duration': 5.444}, {'end': 2112.975, 'text': "But just to make it interactive, just to show you a little bit of JavaScript, we'll make these things move,", 'start': 2106.931, 'duration': 6.044}, {'end': 2118.799, 'text': "sort of in a parallax effect based on the mouse position when it's hovered over this area.", 'start': 2112.975, 'duration': 5.824}, {'end': 2121.441, 'text': "So let's go to our index.html.", 'start': 2119.6, 'duration': 1.841}, {'end': 2127.547, 'text': "We'll just do some inline JavaScript down here.", 'start': 2121.461, 'duration': 6.086}], 'summary': 'Creating interactive user interface mockups using javascript with a parallax effect based on mouse position.', 'duration': 30.703, 'max_score': 2096.844, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTyMUjhA-o4/pics/GTyMUjhA-o42096844.jpg'}, {'end': 2247.191, 'src': 'embed', 'start': 2193.955, 'weight': 4, 'content': [{'end': 2200.62, 'text': "so left we're gonna add an event listener and there's a bunch of events like clicks or whatever.", 'start': 2193.955, 'duration': 6.665}, {'end': 2203.062, 'text': 'this is going to be on mouse move.', 'start': 2200.62, 'duration': 2.442}, {'end': 2209.188, 'text': "we're gonna pass in an event that will give us information about the mouse position.", 'start': 2203.062, 'duration': 6.126}, {'end': 2216.709, 'text': "all right, so then We'll say let move equals event.clientX.", 'start': 2209.188, 'duration': 7.521}, {'end': 2225.416, 'text': 'ClientX is basically the mouse position in the X axis times 0.05.', 'start': 2217.589, 'duration': 7.827}, {'end': 2229.659, 'text': 'So if you were to do clientX and just console log this, it would be a large number.', 'start': 2225.416, 'duration': 4.243}, {'end': 2236.604, 'text': "We want to really scale it down big time to a much smaller number, which is why I'm using 0.05.", 'start': 2230.179, 'duration': 6.425}, {'end': 2242.188, 'text': "I I'll show you though, what happens when we, if we just made it like one or equal to this value.", 'start': 2236.604, 'duration': 5.584}, {'end': 2245.63, 'text': "Um, so that way you're not too confused.", 'start': 2242.828, 'duration': 2.802}, {'end': 2247.191, 'text': "I'm also doing plus four.", 'start': 2245.87, 'duration': 1.321}], 'summary': 'Adding mouse move event listener to scale down mouse position by 0.05 and add 4.', 'duration': 53.236, 'max_score': 2193.955, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTyMUjhA-o4/pics/GTyMUjhA-o42193955.jpg'}, {'end': 2361.534, 'src': 'embed', 'start': 2278.013, 'weight': 1, 'content': [{'end': 2281.676, 'text': "we're going to focus first on moving this content on top.", 'start': 2278.013, 'duration': 3.663}, {'end': 2292.325, 'text': "that's three pieces of type, so we can change the style, css style through, through javascript, in this manner, style transform.", 'start': 2281.676, 'duration': 10.649}, {'end': 2293.186, 'text': "So that's the.", 'start': 2292.345, 'duration': 0.841}, {'end': 2298.31, 'text': 'the transform is the property that we want to to animate, which is the one you should try to animate as much as possible,', 'start': 2293.186, 'duration': 5.124}, {'end': 2299.652, 'text': "because it's a lot more performant.", 'start': 2298.31, 'duration': 1.342}, {'end': 2303.315, 'text': "So transform, we'll do back back ticks here,", 'start': 2300.232, 'duration': 3.083}, {'end': 2318.128, 'text': "translate X and then we're going to put in a in a negative value and then our property move to type Gary type and then we'll make that a percentage.", 'start': 2303.315, 'duration': 14.813}, {'end': 2322.684, 'text': "All right, so let's save that and see what happens.", 'start': 2319.54, 'duration': 3.144}, {'end': 2324.086, 'text': 'There we go.', 'start': 2323.645, 'duration': 0.441}, {'end': 2330.237, 'text': 'Now this was the one that says move to with 0.003.', 'start': 2325.874, 'duration': 4.363}, {'end': 2333.399, 'text': 'If we put like 0.1, watch how crazy this is.', 'start': 2330.237, 'duration': 3.162}, {'end': 2335.5, 'text': "Like it's just unusable.", 'start': 2333.779, 'duration': 1.721}, {'end': 2342.225, 'text': "So that's why we're, you know, I experimented with, you know, several different values and that's what I came up with.", 'start': 2336.601, 'duration': 5.624}, {'end': 2350.51, 'text': "Now let's move, like make this part, these little canvases move the opposite direction to create that sort of parallax effect.", 'start': 2342.625, 'duration': 7.885}, {'end': 2361.534, 'text': "So, in order to do that, we're going to say protos for each, because we're using query selector all, so we have to iterate over them.", 'start': 2351.051, 'duration': 10.483}], 'summary': 'Using javascript to animate the transform property for better performance and experimenting with different values to achieve desired effects.', 'duration': 83.521, 'max_score': 2278.013, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTyMUjhA-o4/pics/GTyMUjhA-o42278013.jpg'}, {'end': 2446.446, 'src': 'embed', 'start': 2420.177, 'weight': 2, 'content': [{'end': 2424.241, 'text': "It won't work if you're hovered over a certain area.", 'start': 2420.177, 'duration': 4.064}, {'end': 2432.009, 'text': 'So pointer events, saving that there fixes that.', 'start': 2424.902, 'duration': 7.107}, {'end': 2433.43, 'text': "So it doesn't do that anymore.", 'start': 2432.169, 'duration': 1.261}, {'end': 2436.393, 'text': "So that's, that's an important property when you're working with sort of thing.", 'start': 2433.55, 'duration': 2.843}, {'end': 2440.783, 'text': "So now, if we go back to a mobile viewport, of course none of that's there,", 'start': 2437.762, 'duration': 3.021}, {'end': 2446.446, 'text': 'except for this part which you can use JavaScript to disable that if you wanted to.', 'start': 2440.783, 'duration': 5.663}], 'summary': 'Pointer events property fixed hover issue, important for mobile viewport.', 'duration': 26.269, 'max_score': 2420.177, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTyMUjhA-o4/pics/GTyMUjhA-o42420177.jpg'}, {'end': 2469.391, 'src': 'heatmap', 'start': 2466.028, 'weight': 1, 'content': [{'end': 2467.949, 'text': 'probably on Udemy and a couple other networks.', 'start': 2466.028, 'duration': 1.921}, {'end': 2469.391, 'text': "All right, I'll see you guys real soon.", 'start': 2467.969, 'duration': 1.422}], 'summary': 'The speaker plans to meet with the audience on udemy and other networks.', 'duration': 3.363, 'max_score': 2466.028, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTyMUjhA-o4/pics/GTyMUjhA-o42466028.jpg'}], 'start': 2096.844, 'title': 'Creating interactive parallax effect and transforming elements with javascript', 'summary': 'Covers adding an interactive parallax effect to html elements using javascript, scaling down the mouse position in the x axis by 0.05, animating css style transform property, and addressing pointer events for mobile compatibility.', 'chapters': [{'end': 2247.191, 'start': 2096.844, 'title': 'Creating interactive parallax effect', 'summary': 'Demonstrates adding an interactive parallax effect to html elements using javascript, scaling down the mouse position in the x axis by 0.05 and adding an event listener for mouse movement.', 'duration': 150.347, 'highlights': ['Adding interactive parallax effect using JavaScript The chapter explains how to make HTML elements move in a parallax effect based on the mouse position by adding inline JavaScript to the index.html file.', 'Scaling down the mouse position in the X axis by 0.05 The script scales down the mouse position in the X axis by a factor of 0.05 to create a visually appealing parallax effect, enhancing user experience.', 'Adding an event listener for mouse movement A mouse move event listener is added to track the mouse position, enabling the implementation of the parallax effect and enhancing interactivity.']}, {'end': 2469.731, 'start': 2247.211, 'title': 'Transforming elements with javascript', 'summary': 'Demonstrates using javascript to animate css style transform property for performance optimization, experimenting with different values, creating a parallax effect, and addressing pointer events for mobile compatibility.', 'duration': 222.52, 'highlights': ['Using JavaScript to animate CSS transform property can improve performance by using the translate X function. Animating CSS transform property using JavaScript for performance optimization.', 'Experimenting with different values for the move property, such as 0.003 and 0.1, resulted in noticeable differences in usability. Notable impact of experimenting with different values for the move property on usability.', 'Creating a parallax effect by moving multiple elements in the opposite direction using querySelectorAll and translate X function. Demonstrating the technique to create a parallax effect by moving multiple elements in the opposite direction.', 'Addressing pointer events and mobile compatibility by using the pointer events property to ensure functionality on mobile viewports. Explaining the importance of using the pointer events property for mobile compatibility.']}], 'duration': 372.887, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/GTyMUjhA-o4/pics/GTyMUjhA-o42096844.jpg', 'highlights': ['Adding interactive parallax effect using JavaScript The chapter explains how to make HTML elements move in a parallax effect based on the mouse position by adding inline JavaScript to the index.html file.', 'Using JavaScript to animate CSS transform property can improve performance by using the translate X function. Animating CSS transform property using JavaScript for performance optimization.', 'Addressing pointer events and mobile compatibility by using the pointer events property to ensure functionality on mobile viewports. Explaining the importance of using the pointer events property for mobile compatibility.', 'Creating a parallax effect by moving multiple elements in the opposite direction using querySelectorAll and translate X function. Demonstrating the technique to create a parallax effect by moving multiple elements in the opposite direction.', 'Scaling down the mouse position in the X axis by 0.05 The script scales down the mouse position in the X axis by a factor of 0.05 to create a visually appealing parallax effect, enhancing user experience.', 'Adding an event listener for mouse movement A mouse move event listener is added to track the mouse position, enabling the implementation of the parallax effect and enhancing interactivity.', 'Experimenting with different values for the move property, such as 0.003 and 0.1, resulted in noticeable differences in usability. Notable impact of experimenting with different values for the move property on usability.']}], 'highlights': ['Linode offers powerful, fast, fully configurable cloud computing with server plans starting at just $5.', 'By signing up using the provided link, new Linode accounts receive a $20 credit.', 'Linode provides hosting without hidden fees or surprise outages.', 'The tutorial covers creating a responsive design with a parallax effect using Adobe XD mockups for an upcoming UI design course.', 'The tutorial demonstrates the process of setting up the HTML, CSS, and live SAS compilation in Visual Studio Code for implementing the design.', 'The importance of starting with a design or mockup before beginning the HTML/CSS process is emphasized.', 'The tutorial will also utilize a color gradient for the design.', "The concept of 'mobile first' approach in CSS is introduced, emphasizing the initial design for mobile devices and subsequent adjustments for larger screens using media queries.", 'Setting body height to 100 viewport height and centering the container with margin and text align properties.', 'Adjusting the logo size, spacing, and color, and applying a gradient to the left column.', 'Specifying margin for the paragraph in the right column and adjusting the layout for attention, including the width, margin, and text alignment.', 'Setting width and border radius for the avatar class and adjusting the width for the arrow element.', 'Adjusting the color and margin of the light element and specifying styles for the input and button elements.', "Setting font family to Montserrat and background to very light gray using six E's, along with setting default font size to 16 pixels.", 'Using a media query at 768 pixels to adjust the layout The media query is set at 768 pixels to create a responsive layout for the web page, allowing the content to be displayed in multiple columns for better readability.', 'Updating layout to a two-column format for screens around 1024px wide.', 'Adjusting media queries to ensure elements match up better, such as changing to calc 60% minus 1 EM to align with the 0.5 EM on the right and left.', 'Increasing the font size for better visibility and spacing The font size is adjusted from 18 to 20 pixels, impacting the overall appearance and spacing between elements, demonstrating the use of EM units for margins and padding.', "Modifying the width of the button and input fields for improved design The width of the button and input fields is adjusted to 60% to align and enhance the visual appeal, with the use of 'important' to override existing styles.", 'Modifying CSS properties like container width to 100%, adding margin to the logo, and adjusting line height for paragraphs to 1.7 EM for better spacing.', 'Making styling and layout adjustments for a mobile preview, including modifying cursor, button size, and layout breakpoints.', 'The need to situate and adjust the layout for a desktop view as it would look bad and not very useful with the current massive input area and button size.', 'No specific pixel amount for layout breakpoint, as indicated with the inspector open.', "Creating a grid layout with specific column widths Using 'display grid' and 'grid template columns' to create a two-column layout with a left column of 55% width and an auto-sized right column.", 'Creating desktop-only styling effect The chapter discusses creating a styling effect that exclusively applies to desktop screens, utilizing CSS properties like absolute positioning and clip-path.', "Adjusting padding and alignment properties Setting padding and text alignment properties to improve the appearance and structure of the layout, such as using 'padding 0 and 2 EM' and 'text align left'.", 'Use of specific CSS properties The speaker explains the use of specific CSS properties such as absolute positioning, z-index, clip-path, and pointer events to achieve the desired styling effect.', "Setting dimensions for various elements Defining the dimensions of elements including setting the height to '100 viewport height' and specifying specific font sizes and widths for elements like H1, span, input, and button.", 'Adding interactive parallax effect using JavaScript The chapter explains how to make HTML elements move in a parallax effect based on the mouse position by adding inline JavaScript to the index.html file.', 'Using JavaScript to animate CSS transform property can improve performance by using the translate X function. Animating CSS transform property using JavaScript for performance optimization.', 'Addressing pointer events and mobile compatibility by using the pointer events property to ensure functionality on mobile viewports. Explaining the importance of using the pointer events property for mobile compatibility.', 'Creating a parallax effect by moving multiple elements in the opposite direction using querySelectorAll and translate X function. Demonstrating the technique to create a parallax effect by moving multiple elements in the opposite direction.', 'Scaling down the mouse position in the X axis by 0.05 The script scales down the mouse position in the X axis by a factor of 0.05 to create a visually appealing parallax effect, enhancing user experience.', 'Adding an event listener for mouse movement A mouse move event listener is added to track the mouse position, enabling the implementation of the parallax effect and enhancing interactivity.', 'Experimenting with different values for the move property, such as 0.003 and 0.1, resulted in noticeable differences in usability. Notable impact of experimenting with different values for the move property on usability.']}