title
Pluralsight Login Page Clone - HTML & CSS

description
In this video we will be creating a clone of the Pluralsight login page with HTML5 and CSS3 including Flexbox and media queries for responsiveness. Sponsor: DevMountain Bootcamp https://goo.gl/6q0dEa Code: https://codepen.io/bradtraversy/pen/MzyJqw Flexbox in 20 Minutes: https://www.youtube.com/watch?v=JJSoEo8JSnc 💖 Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Website & Udemy Courses http://www.traversymedia.com Follow Traversy Media: https://www.facebook.com/traversymedia https://www.twitter.com/traversymedia https://www.instagram.com/traversymedia

detail
{'title': 'Pluralsight Login Page Clone - HTML & CSS', 'heatmap': [{'end': 668.6, 'start': 587.304, 'weight': 0.81}, {'end': 743.282, 'start': 716.263, 'weight': 0.914}, {'end': 1132.395, 'start': 1093.562, 'weight': 0.729}, {'end': 1764.405, 'start': 1710.424, 'weight': 0.85}, {'end': 2028.988, 'start': 1964.034, 'weight': 0.793}, {'end': 2121.481, 'start': 2088.038, 'weight': 0.826}, {'end': 2300.303, 'start': 2275.769, 'weight': 0.728}], 'summary': 'Learn to build a pluralsight login page using html and css with flexbox and media queries, utilize rem units for layout and styling, improve primary button design, and create a responsive showcase, addressing mobile layout adjustments for newer devices.', 'chapters': [{'end': 733.094, 'segs': [{'end': 47.491, 'src': 'embed', 'start': 24.178, 'weight': 0, 'content': [{'end': 32.363, 'text': "So we haven't done a UI project in a while, so I wanted to do something with HTML CSS and we're going to build a clone of the Pluralsight login page,", 'start': 24.178, 'duration': 8.185}, {'end': 37.846, 'text': 'which I actually think is a pretty good looking page here, with the login on the side,', 'start': 32.363, 'duration': 5.483}, {'end': 42.049, 'text': 'the sign in and then this area here with the text in the background image.', 'start': 37.846, 'duration': 4.203}, {'end': 43.51, 'text': "So that's what we're going to build.", 'start': 42.449, 'duration': 1.061}, {'end': 45.811, 'text': 'This is the actual Pluralsight page.', 'start': 43.61, 'duration': 2.201}, {'end': 47.491, 'text': 'It is a little different.', 'start': 46.651, 'duration': 0.84}], 'summary': 'Planning to build a clone of pluralsight login page using html and css.', 'duration': 23.313, 'max_score': 24.178, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wIx1O5Y5EB4/pics/wIx1O5Y5EB424178.jpg'}, {'end': 86.136, 'src': 'embed', 'start': 61.377, 'weight': 1, 'content': [{'end': 67.08, 'text': 'As you can see, the logo is Sluralprite instead of Pluralsight, just to avoid any copyright issues.', 'start': 61.377, 'duration': 5.703}, {'end': 69.542, 'text': "So, yeah, that's what we'll be building.", 'start': 68.101, 'duration': 1.441}, {'end': 71.083, 'text': 'It is completely responsive.', 'start': 69.582, 'duration': 1.501}, {'end': 75.727, 'text': "We're going to be using Flexbox along with media queries to make it responsive.", 'start': 71.383, 'duration': 4.344}, {'end': 84.895, 'text': "So right now you can see on big screens, it's basically we have a flex property of four and a flex property of six over here.", 'start': 76.127, 'duration': 8.768}, {'end': 86.136, 'text': 'So this side is wider.', 'start': 84.955, 'duration': 1.181}], 'summary': 'Building a responsive website using flexbox and media queries with a 4:6 layout.', 'duration': 24.759, 'max_score': 61.377, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wIx1O5Y5EB4/pics/wIx1O5Y5EB461377.jpg'}, {'end': 192.488, 'src': 'embed', 'start': 148.484, 'weight': 2, 'content': [{'end': 152.925, 'text': "If it's a small enough project, I'll do all the HTML and then go to the styling.", 'start': 148.484, 'duration': 4.441}, {'end': 153.745, 'text': 'All right.', 'start': 152.945, 'duration': 0.8}, {'end': 156.426, 'text': 'So one thing I want to mention.', 'start': 153.845, 'duration': 2.581}, {'end': 162.987, 'text': "if you haven't used Flexbox before, I would suggest watching my Flexbox in 20 minutes video before this,", 'start': 156.426, 'duration': 6.561}, {'end': 166.588, 'text': "because I explain Flexbox more in depth than I'm going to now.", 'start': 162.987, 'duration': 3.601}, {'end': 171.992, 'text': "okay. so that's that's the only um you know, prerequisite i would recommend.", 'start': 167.228, 'duration': 4.764}, {'end': 175.735, 'text': "so let's go ahead and use emmett here to generate a boilerplate.", 'start': 171.992, 'duration': 3.743}, {'end': 177.837, 'text': 'we can do that with exclamation tab.', 'start': 175.735, 'duration': 2.102}, {'end': 185.182, 'text': "um, the title i'm going to change to just sign in and then the name of the site, which is slurlprite.", 'start': 177.837, 'duration': 7.345}, {'end': 185.623, 'text': "i don't know.", 'start': 185.182, 'duration': 0.441}, {'end': 190.387, 'text': "i don't even know where i got that, but i didn't want to use the actual uh company name.", 'start': 185.623, 'duration': 4.764}, {'end': 192.488, 'text': "Let's bring in the style sheet.", 'start': 191.047, 'duration': 1.441}], 'summary': 'Html project with flexbox, emmett for boilerplate, and stylesheet inclusion.', 'duration': 44.004, 'max_score': 148.484, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wIx1O5Y5EB4/pics/wIx1O5Y5EB4148484.jpg'}, {'end': 251.558, 'src': 'embed', 'start': 220.023, 'weight': 4, 'content': [{'end': 223.164, 'text': 'And if we look at the layout, wrapper goes around everything.', 'start': 220.023, 'duration': 3.141}, {'end': 225.085, 'text': 'And then this is the left, this is the right.', 'start': 223.284, 'duration': 1.801}, {'end': 229.727, 'text': 'So what I want to do is use flexbox here to align these side by side.', 'start': 225.485, 'duration': 4.242}, {'end': 236.729, 'text': "So to do that, we're going to make wrapper the container, and left and right will be the flex items inside.", 'start': 230.407, 'duration': 6.322}, {'end': 240.391, 'text': "But we're going to do that in the CSS, which we'll get to in a little bit.", 'start': 237.61, 'duration': 2.781}, {'end': 242.792, 'text': 'So on the left, we have the sign in.', 'start': 241.071, 'duration': 1.721}, {'end': 245.714, 'text': "So let's give this an ID of sign in.", 'start': 243.072, 'duration': 2.642}, {'end': 251.558, 'text': "OK, inside sign in, we're going to have pretty much everything except the footer.", 'start': 245.734, 'duration': 5.824}], 'summary': 'Using flexbox to align left and right elements inside a wrapper.', 'duration': 31.535, 'max_score': 220.023, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wIx1O5Y5EB4/pics/wIx1O5Y5EB4220023.jpg'}, {'end': 347.588, 'src': 'embed', 'start': 316.907, 'weight': 5, 'content': [{'end': 322.892, 'text': "But we're just going to have a class of text input so that we can style these.", 'start': 316.907, 'duration': 5.985}, {'end': 332.811, 'text': "OK, so now I'm going to just copy the div here and we'll go right underneath and paste in another div.", 'start': 323.292, 'duration': 9.519}, {'end': 338.556, 'text': "And let's change this email or username to password.", 'start': 333.912, 'duration': 4.644}, {'end': 341.558, 'text': "Let's change the type to password.", 'start': 339.436, 'duration': 2.122}, {'end': 345.606, 'text': "And we're going to keep the class of text input.", 'start': 343.303, 'duration': 2.303}, {'end': 347.588, 'text': 'So those are our two text inputs.', 'start': 345.946, 'duration': 1.642}], 'summary': 'Creating two text input fields for email/username and password.', 'duration': 30.681, 'max_score': 316.907, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wIx1O5Y5EB4/pics/wIx1O5Y5EB4316907.jpg'}, {'end': 438.296, 'src': 'embed', 'start': 407.096, 'weight': 6, 'content': [{'end': 410.238, 'text': "If we look underneath the links, let's take a look here.", 'start': 407.096, 'duration': 3.142}, {'end': 414.3, 'text': 'We have this this or with these lines on the side.', 'start': 410.678, 'duration': 3.622}, {'end': 420.124, 'text': 'So basically these are horizontal rules, HR tags, and then we have the or in the middle.', 'start': 414.34, 'duration': 5.784}, {'end': 421.605, 'text': "So we're going to have to style it.", 'start': 420.244, 'duration': 1.361}, {'end': 426.327, 'text': "We're actually going to use Flexbox here to style it going in a horizontal fashion.", 'start': 422.025, 'duration': 4.302}, {'end': 433.552, 'text': "So let's have a class of or and then inside here we'll have an HR tag with the class of bar.", 'start': 427.088, 'duration': 6.464}, {'end': 438.296, 'text': "And let's do with Emmett, I can do times two because I want two of those.", 'start': 434.475, 'duration': 3.821}], 'summary': 'Using flexbox to style horizontal rules for links.', 'duration': 31.2, 'max_score': 407.096, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wIx1O5Y5EB4/pics/wIx1O5Y5EB4407096.jpg'}, {'end': 668.6, 'src': 'heatmap', 'start': 587.304, 'weight': 0.81, 'content': [{'end': 588.405, 'text': "So that's our H1.", 'start': 587.304, 'duration': 1.101}, {'end': 592.791, 'text': "And then under that, we're just going to have a link that's formatted as a button.", 'start': 588.505, 'duration': 4.286}, {'end': 597.097, 'text': "So it's going to have the secondary dash BTN class.", 'start': 592.851, 'duration': 4.246}, {'end': 599.501, 'text': 'And this is going to just say.', 'start': 598.219, 'duration': 1.282}, {'end': 606.936, 'text': "It's going to say start a free 10 day trial.", 'start': 601.553, 'duration': 5.383}, {'end': 609.317, 'text': "And that's it for the right.", 'start': 608.236, 'duration': 1.081}, {'end': 611.338, 'text': "OK, that's it for the HTML, actually.", 'start': 609.617, 'duration': 1.721}, {'end': 614.579, 'text': 'So, yeah, it looks like this now looks like crap.', 'start': 612.138, 'duration': 2.441}, {'end': 616.7, 'text': "So let's start to style it.", 'start': 614.619, 'duration': 2.081}, {'end': 623.804, 'text': 'Now, as far as the font goes, the font that Pluralsight uses is actually not free.', 'start': 617.361, 'duration': 6.443}, {'end': 627.585, 'text': "I forget what it's called, but I couldn't find it for free.", 'start': 623.884, 'duration': 3.701}, {'end': 630.507, 'text': 'So I use Roboto, which you can see is pretty similar.', 'start': 627.625, 'duration': 2.882}, {'end': 645.53, 'text': "So if we go to Google Fonts and search for Roboto and I'm going to go and just click this right here, this dropdown, and choose light 300,", 'start': 631.287, 'duration': 14.243}, {'end': 648.071, 'text': 'because I want it to be a lighter font', 'start': 645.53, 'duration': 2.541}, {'end': 652.272, 'text': "And we're going to click the plus sign down here.", 'start': 648.371, 'duration': 3.901}, {'end': 658.273, 'text': "We're going to you can either use the link tag in your HTML or the import in your CSS, which is what I'm going to do.", 'start': 652.292, 'duration': 5.981}, {'end': 660.554, 'text': "So I'm going to copy this import right here.", 'start': 658.353, 'duration': 2.201}, {'end': 668.6, 'text': 'and then just paste that in, and then we should be able to use Roboto inside our font family.', 'start': 661.234, 'duration': 7.366}], 'summary': 'Html code created for a button link with a 10-day free trial offer. font styling using roboto from google fonts.', 'duration': 81.296, 'max_score': 587.304, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wIx1O5Y5EB4/pics/wIx1O5Y5EB4587304.jpg'}, {'end': 648.071, 'src': 'embed', 'start': 617.361, 'weight': 7, 'content': [{'end': 623.804, 'text': 'Now, as far as the font goes, the font that Pluralsight uses is actually not free.', 'start': 617.361, 'duration': 6.443}, {'end': 627.585, 'text': "I forget what it's called, but I couldn't find it for free.", 'start': 623.884, 'duration': 3.701}, {'end': 630.507, 'text': 'So I use Roboto, which you can see is pretty similar.', 'start': 627.625, 'duration': 2.882}, {'end': 645.53, 'text': "So if we go to Google Fonts and search for Roboto and I'm going to go and just click this right here, this dropdown, and choose light 300,", 'start': 631.287, 'duration': 14.243}, {'end': 648.071, 'text': 'because I want it to be a lighter font', 'start': 645.53, 'duration': 2.541}], 'summary': 'Pluralsight uses a non-free font, so roboto is used instead for a similar look. light 300 is chosen for the font weight.', 'duration': 30.71, 'max_score': 617.361, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wIx1O5Y5EB4/pics/wIx1O5Y5EB4617361.jpg'}], 'start': 7.059, 'title': 'Web development', 'summary': 'Covers building a pluralsight login page using html and css with flexbox and media queries, using emmett for web layout and styling, and html formatting and styling with flexbox, including google fonts usage.', 'chapters': [{'end': 171.992, 'start': 7.059, 'title': 'Building a pluralsight login page', 'summary': "Covers building a clone of the pluralsight login page using html and css, explaining the use of flexbox and media queries for responsiveness, and recommending prior knowledge of flexbox through the 'flexbox in 20 minutes' video.", 'duration': 164.933, 'highlights': ['The chapter explains building a clone of the Pluralsight login page using HTML and CSS. Building a clone of the Pluralsight login page, using HTML and CSS.', 'It emphasizes the use of Flexbox and media queries for responsiveness. Emphasizing the use of Flexbox and media queries for responsiveness.', "It recommends prior knowledge of Flexbox through the 'Flexbox in 20 minutes' video. Recommending prior knowledge of Flexbox through the 'Flexbox in 20 minutes' video."]}, {'end': 376.41, 'start': 171.992, 'title': 'Web layout and styling with emmett', 'summary': 'Discusses using emmett to generate a web page boilerplate, creating a web layout with flexbox, and styling various elements including text fields and buttons.', 'duration': 204.418, 'highlights': ['Using Emmett to generate a web page boilerplate The presenter demonstrates using Emmett to quickly generate a web page boilerplate, saving time and effort in setting up initial HTML structure.', 'Creating a web layout with flexbox The chapter emphasizes using flexbox to align elements side by side, explaining the process of making the wrapper the container and left and right as the flex items inside.', "Styling text fields and buttons The presenter explains the process of styling text fields and buttons, including assigning classes like 'text input' and 'primary-btn' to ensure consistent styling across the site."]}, {'end': 733.094, 'start': 376.95, 'title': 'Html styling and formatting', 'summary': 'Covers the html formatting and styling using flexbox, including the creation of links, buttons, and the addition of copyright information. it also includes the usage of google fonts to apply the roboto font with a font weight of 300.', 'duration': 356.144, 'highlights': ["The chapter covers the HTML formatting and styling using Flexbox, including the creation of links, buttons, and the addition of copyright information. The transcript explains the process of creating links for 'forgot password' and 'sign in with company or school', as well as the styling of horizontal rules using Flexbox. It also covers the creation of a 'create account' button and the addition of a copyright paragraph with the symbol © and the year 2018.", 'The usage of Google Fonts to apply the Roboto font with a font weight of 300. The transcript details the process of using Google Fonts to apply the Roboto font with a font weight of 300 to the HTML file, ensuring the font family is updated for the body and headings to achieve the desired visual appearance.']}], 'duration': 726.035, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wIx1O5Y5EB4/pics/wIx1O5Y5EB47059.jpg', 'highlights': ['Building a clone of the Pluralsight login page using HTML and CSS.', 'Emphasizing the use of Flexbox and media queries for responsiveness.', "Recommending prior knowledge of Flexbox through the 'Flexbox in 20 minutes' video.", 'Using Emmett to quickly generate a web page boilerplate.', 'Emphasizing using flexbox to align elements side by side.', 'Explaining the process of styling text fields and buttons.', 'Covering HTML formatting and styling using Flexbox, including the creation of links, buttons, and copyright information.', 'Detailing the process of using Google Fonts to apply the Roboto font with a font weight of 300.']}, {'end': 990.052, 'segs': [{'end': 766.086, 'src': 'embed', 'start': 733.354, 'weight': 0, 'content': [{'end': 737.477, 'text': "OK we'll save that and let's take a look and that's what it should look like now.", 'start': 733.354, 'duration': 4.123}, {'end': 743.282, 'text': "So let's let's work on the wrapper and the left and right.", 'start': 738.457, 'duration': 4.825}, {'end': 751.65, 'text': 'So basically wrappers, like I said, is going to be of display flex and that will make the left and right align horizontally.', 'start': 743.342, 'duration': 8.308}, {'end': 753.592, 'text': "So let's do that.", 'start': 751.771, 'duration': 1.821}, {'end': 755.895, 'text': "Let's say wrapper.", 'start': 753.853, 'duration': 2.042}, {'end': 766.086, 'text': "We want to display flex and I'm just going to put a flex direction of row, meaning horizontal.", 'start': 757.941, 'duration': 8.145}], 'summary': 'Using display flex, set wrapper to align left and right horizontally.', 'duration': 32.732, 'max_score': 733.354, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wIx1O5Y5EB4/pics/wIx1O5Y5EB4733354.jpg'}, {'end': 840.88, 'src': 'embed', 'start': 780.8, 'weight': 1, 'content': [{'end': 785.863, 'text': 'So just by doing that, if we take a look, oops, let me just move this back.', 'start': 780.8, 'duration': 5.063}, {'end': 791.586, 'text': 'If we take a look, you can see that now the right is is on the right and the left is on the left.', 'start': 786.503, 'duration': 5.083}, {'end': 799.53, 'text': 'So we want to basically have it take up the whole page and be split in the middle.', 'start': 792.686, 'duration': 6.844}, {'end': 802.792, 'text': 'So the way that we can do that is with the flex property.', 'start': 800.01, 'duration': 2.782}, {'end': 803.712, 'text': 'So if we say left.', 'start': 802.892, 'duration': 0.82}, {'end': 804.373, 'text': 'And right.', 'start': 803.732, 'duration': 0.641}, {'end': 819.504, 'text': 'And we set the flex property to 1.', 'start': 809.936, 'duration': 9.568}, {'end': 821.386, 'text': 'And we save that and we take a look.', 'start': 819.504, 'duration': 1.882}, {'end': 824.268, 'text': "Now it takes up the whole side and it's split evenly.", 'start': 821.446, 'duration': 2.822}, {'end': 828.271, 'text': 'And you could change this like if you wanted right to be bigger, you could do two.', 'start': 824.728, 'duration': 3.543}, {'end': 831.673, 'text': 'And if we look now, this side is bigger.', 'start': 829.792, 'duration': 1.881}, {'end': 838.098, 'text': "We're actually going to do a four six split on big screens, but we're going to add that through a media query in a little bit.", 'start': 832.074, 'duration': 6.024}, {'end': 840.88, 'text': 'But the default I want to be flex one and one.', 'start': 838.439, 'duration': 2.441}], 'summary': 'Using flex property to split the page evenly; default split is one to one.', 'duration': 60.08, 'max_score': 780.8, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wIx1O5Y5EB4/pics/wIx1O5Y5EB4780800.jpg'}, {'end': 990.052, 'src': 'embed', 'start': 875.763, 'weight': 3, 'content': [{'end': 882.472, 'text': "OK, so let's align this stuff, because right now you can see that this is aligned over here.", 'start': 875.763, 'duration': 6.709}, {'end': 885.636, 'text': "Yeah, we're going to.", 'start': 882.492, 'duration': 3.144}, {'end': 893.446, 'text': "We're going to do align dash items to the center.", 'start': 888.462, 'duration': 4.984}, {'end': 895.367, 'text': 'So we save that.', 'start': 894.506, 'duration': 0.861}, {'end': 896.108, 'text': 'We take a look.', 'start': 895.407, 'duration': 0.701}, {'end': 899.03, 'text': 'You can see it moved everything in the center horizontally.', 'start': 896.168, 'duration': 2.862}, {'end': 901.131, 'text': 'I also want it centered vertically.', 'start': 899.05, 'duration': 2.081}, {'end': 905.495, 'text': 'And to do that, we use justify content, but we also have to add a height.', 'start': 901.832, 'duration': 3.663}, {'end': 911.223, 'text': 'So the height is actually going to be the whole whatever is available.', 'start': 906.395, 'duration': 4.828}, {'end': 920.497, 'text': 'So 100 viewport heights that takes up the whole browser in, you know, vertically, no matter how big or small the browser is resized.', 'start': 911.303, 'duration': 9.194}, {'end': 928.489, 'text': 'So now we can justify actually going to put this here and say justify content to the center.', 'start': 921.221, 'duration': 7.268}, {'end': 931.612, 'text': 'OK, so this is how we can position stuff.', 'start': 928.509, 'duration': 3.103}, {'end': 933.855, 'text': "So let's save that and take a look.", 'start': 931.873, 'duration': 1.982}, {'end': 936.478, 'text': "And now you can see it's in the center both ways.", 'start': 933.915, 'duration': 2.563}, {'end': 940.26, 'text': "Now I think that's good.", 'start': 937.978, 'duration': 2.282}, {'end': 945.385, 'text': "Now we want to format this block, the sign in everything that's in that sign in.", 'start': 940.641, 'duration': 4.744}, {'end': 949.089, 'text': "So I'm actually going to put a comment here.", 'start': 945.505, 'duration': 3.584}, {'end': 950.911, 'text': 'This is going to be all sign in stuff.', 'start': 949.149, 'duration': 1.762}, {'end': 959.807, 'text': 'So the sign in div itself, we want that to also be a flex box because we want to align stuff in there.', 'start': 952.381, 'duration': 7.426}, {'end': 964.211, 'text': "So we're going to say display flex and we want to display it as a column.", 'start': 959.827, 'duration': 4.384}, {'end': 966.433, 'text': 'So we need flex direction column.', 'start': 964.371, 'duration': 2.062}, {'end': 969.255, 'text': 'So it goes up and down, not left and right.', 'start': 966.913, 'duration': 2.342}, {'end': 977.002, 'text': 'And we want to justify content to the center, align items to the center.', 'start': 970.076, 'duration': 6.926}, {'end': 983.205, 'text': "And we're going to set a width of 80% instead of 100.", 'start': 979.521, 'duration': 3.684}, {'end': 987.75, 'text': "I don't want it to go all the way across its parent, which is the left.", 'start': 983.205, 'duration': 4.545}, {'end': 990.052, 'text': 'I want it to be 80% of that.', 'start': 988.35, 'duration': 1.702}], 'summary': 'Using css, items are aligned both horizontally and vertically, and a sign-in block is formatted with specific dimensions and alignment.', 'duration': 114.289, 'max_score': 875.763, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wIx1O5Y5EB4/pics/wIx1O5Y5EB4875763.jpg'}], 'start': 733.354, 'title': 'Css flexbox layout and design', 'summary': 'Covers using flexbox to create horizontal and vertical layouts, adjusting sections for larger screens, and formatting the sign-in block with specific flexbox properties, such as align-items, justify-content, and flex-direction.', 'chapters': [{'end': 840.88, 'start': 733.354, 'title': 'Css flexbox layout design', 'summary': 'Explains using flexbox to create a layout with left and right sections aligned horizontally, setting the flex property to divide the sections evenly, and mentions the possibility of adjusting the layout for larger screens with a media query.', 'duration': 107.526, 'highlights': ['Using display flex to align left and right sections horizontally The wrapper is set to display flex with a flex direction of row to align the left and right sections horizontally.', 'Setting the flex property to evenly divide the sections The flex property is set to 1 for both left and right sections, evenly dividing the space, with the possibility of adjusting the proportions by changing the values.', 'Mention of adjusting layout for larger screens with a media query The default split is set to flex one and one, with a plan to implement a four-six split on bigger screens through a media query.']}, {'end': 933.855, 'start': 842.529, 'title': 'Flexbox layout and alignment', 'summary': 'Demonstrates the use of flexbox to create a vertical column layout with items aligned both horizontally and vertically, utilizing flex-direction: column, align-items: center, justify-content: center, and setting the height to 100 viewport heights.', 'duration': 91.326, 'highlights': ['The chapter illustrates the implementation of a flexbox layout with the flex direction set to column, creating a vertical arrangement of items.', 'It highlights the use of align-items to center the items horizontally within the flex container.', 'The transcript emphasizes the application of justify-content to center the items vertically within the flex container.', 'It also mentions setting the height of the container to 100 viewport heights to ensure it occupies the entire vertical space.']}, {'end': 990.052, 'start': 933.915, 'title': 'Formatting sign in block', 'summary': 'Discusses formatting the sign-in block, setting it as a flexbox with column direction, justifying content and aligning items to the center, and adjusting the width to 80%.', 'duration': 56.137, 'highlights': ['Setting the sign-in div as a flexbox with a column direction, justifying content and aligning items to the center.', 'Adjusting the width of the sign-in block to 80% to prevent it from spanning the entire parent.']}], 'duration': 256.698, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wIx1O5Y5EB4/pics/wIx1O5Y5EB4733354.jpg', 'highlights': ['Using display flex to align left and right sections horizontally The wrapper is set to display flex with a flex direction of row to align the left and right sections horizontally.', 'Setting the flex property to evenly divide the sections The flex property is set to 1 for both left and right sections, evenly dividing the space, with the possibility of adjusting the proportions by changing the values.', 'Mention of adjusting layout for larger screens with a media query The default split is set to flex one and one, with a plan to implement a four-six split on bigger screens through a media query.', 'The chapter illustrates the implementation of a flexbox layout with the flex direction set to column, creating a vertical arrangement of items.', 'It highlights the use of align-items to center the items horizontally within the flex container.', 'The transcript emphasizes the application of justify-content to center the items vertically within the flex container.', 'It also mentions setting the height of the container to 100 viewport heights to ensure it occupies the entire vertical space.', 'Setting the sign-in div as a flexbox with a column direction, justifying content and aligning items to the center.', 'Adjusting the width of the sign-in block to 80% to prevent it from spanning the entire parent.']}, {'end': 1367.015, 'segs': [{'end': 1041.907, 'src': 'embed', 'start': 1015.297, 'weight': 0, 'content': [{'end': 1024.327, 'text': "Now, you could explicitly change the pixels of the HTML element in your CSS, Let's say we set it to 10 pixels, then 1 rem would be 10 pixels.", 'start': 1015.297, 'duration': 9.03}, {'end': 1026.23, 'text': "But in our case, it's 16.", 'start': 1024.708, 'duration': 1.522}, {'end': 1030.095, 'text': '0.5 rem will be 8, 2 rems will be 32.', 'start': 1026.23, 'duration': 3.865}, {'end': 1034.281, 'text': "It's just a multiplier of the HTML font size.", 'start': 1030.095, 'duration': 4.186}, {'end': 1035.682, 'text': 'All right.', 'start': 1035.362, 'duration': 0.32}, {'end': 1038.605, 'text': "So let's go ahead and save that.", 'start': 1035.821, 'duration': 2.784}, {'end': 1041.907, 'text': "And now you can see it's about 80 percent.", 'start': 1039.945, 'duration': 1.962}], 'summary': '1 rem equals 16 pixels, 0.5 rem equals 8, 2 rems equals 32, resulting in 80% size.', 'duration': 26.61, 'max_score': 1015.297, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wIx1O5Y5EB4/pics/wIx1O5Y5EB41015297.jpg'}, {'end': 1116.492, 'src': 'embed', 'start': 1075.336, 'weight': 5, 'content': [{'end': 1076.656, 'text': "OK, so that's the form.", 'start': 1075.336, 'duration': 1.32}, {'end': 1078.637, 'text': "Now let's do some stuff with the logo.", 'start': 1076.716, 'duration': 1.921}, {'end': 1081.998, 'text': "So sign in, there's a class of logo.", 'start': 1080.017, 'duration': 1.981}, {'end': 1087.34, 'text': "Now, you don't technically need to put sign in here because there's only one class of logo.", 'start': 1082.058, 'duration': 5.282}, {'end': 1091.021, 'text': "But I think it's it's or it's more organized to do it like this.", 'start': 1087.42, 'duration': 3.601}, {'end': 1093.542, 'text': "Just so you know that that's in the sign in.", 'start': 1091.601, 'duration': 1.941}, {'end': 1099.443, 'text': "So I'm going to add a margin bottom to push it down and actually going to use viewport heights here.", 'start': 1093.562, 'duration': 5.881}, {'end': 1100.244, 'text': 'So eight VH.', 'start': 1099.603, 'duration': 0.641}, {'end': 1116.492, 'text': 'okay and the image itself so you want to say sign in class logo and then the image uh i want to set that to a fixed width of 300 pixels All right.', 'start': 1101.864, 'duration': 14.628}], 'summary': 'Adding margin bottom of 8vh to sign-in class logo and setting image width to 300 pixels.', 'duration': 41.156, 'max_score': 1075.336, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wIx1O5Y5EB4/pics/wIx1O5Y5EB41075336.jpg'}, {'end': 1132.395, 'src': 'heatmap', 'start': 1093.562, 'weight': 0.729, 'content': [{'end': 1099.443, 'text': "So I'm going to add a margin bottom to push it down and actually going to use viewport heights here.", 'start': 1093.562, 'duration': 5.881}, {'end': 1100.244, 'text': 'So eight VH.', 'start': 1099.603, 'duration': 0.641}, {'end': 1116.492, 'text': 'okay and the image itself so you want to say sign in class logo and then the image uh i want to set that to a fixed width of 300 pixels All right.', 'start': 1101.864, 'duration': 14.628}, {'end': 1119.173, 'text': "So let's take a look at that, which is this right here.", 'start': 1116.512, 'duration': 2.661}, {'end': 1121.113, 'text': 'So you can see this is pushed down.', 'start': 1119.193, 'duration': 1.92}, {'end': 1122.553, 'text': 'This is a little smaller.', 'start': 1121.133, 'duration': 1.42}, {'end': 1124.134, 'text': "It's now the same size as this.", 'start': 1122.613, 'duration': 1.521}, {'end': 1128.975, 'text': 'We also put padding here and padding here.', 'start': 1125.374, 'duration': 3.601}, {'end': 1132.395, 'text': 'So just to kind of break things up a little bit.', 'start': 1129.875, 'duration': 2.52}], 'summary': 'Adding a margin bottom and using viewport heights. setting the image width to 300 pixels. adding padding to break things up.', 'duration': 38.833, 'max_score': 1093.562, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wIx1O5Y5EB4/pics/wIx1O5Y5EB41093562.jpg'}, {'end': 1207.811, 'src': 'embed', 'start': 1181.579, 'weight': 4, 'content': [{'end': 1187.904, 'text': "So one point three rem and let's set a width to 100 percent of its container.", 'start': 1181.579, 'duration': 6.325}, {'end': 1190.186, 'text': 'We want the input to go all the way across.', 'start': 1187.944, 'duration': 2.242}, {'end': 1193.982, 'text': 'rather than, you know, have the label next to it.', 'start': 1191.54, 'duration': 2.442}, {'end': 1198.104, 'text': 'So if I save that and we look, you can see now it goes all the way across.', 'start': 1194.062, 'duration': 4.042}, {'end': 1204.689, 'text': "So let's see, we also wanted a slight border radius.", 'start': 1200.426, 'duration': 4.263}, {'end': 1207.811, 'text': 'OK, so a slight curve on the edges.', 'start': 1206.049, 'duration': 1.762}], 'summary': 'Set input width to 100% and add slight border radius.', 'duration': 26.232, 'max_score': 1181.579, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wIx1O5Y5EB4/pics/wIx1O5Y5EB41181579.jpg'}, {'end': 1313.154, 'src': 'embed', 'start': 1285.954, 'weight': 3, 'content': [{'end': 1290.637, 'text': "So I'm going to go down below here and let's say media queries.", 'start': 1285.954, 'duration': 4.683}, {'end': 1300.39, 'text': 'OK. so basically, what we want to do is say if the browser is is larger than twelve hundred pixels, then change the orientation,', 'start': 1291.607, 'duration': 8.783}, {'end': 1301.75, 'text': 'make the right side bigger.', 'start': 1300.39, 'duration': 1.36}, {'end': 1305.432, 'text': 'So to do that, we want to say at media.', 'start': 1302.611, 'duration': 2.821}, {'end': 1313.154, 'text': "OK, if you've never written a media query, this is how you do it and you you can do max with men with you can also do heights.", 'start': 1305.452, 'duration': 7.702}], 'summary': 'Using media queries to change layout based on browser size, if larger than 1200 pixels, change orientation to make right side bigger.', 'duration': 27.2, 'max_score': 1285.954, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wIx1O5Y5EB4/pics/wIx1O5Y5EB41285954.jpg'}], 'start': 991.374, 'title': 'Using rem units and styling sign-in form', 'summary': 'Explains using rem units in css for layout, where 1 rem is 16 pixels, providing examples of rem multipliers and covers styling sign-in form, logo, text fields, labels, dimensions, padding, margins, and media queries for responsiveness.', 'chapters': [{'end': 1041.907, 'start': 991.374, 'title': 'Using rem units for layout', 'summary': 'Explains the concept of using rem units in css for layout, where 1 rem is equivalent to 16 pixels and provides examples of how different multipliers of rem units translate to pixel values, resulting in 0.5 rem being 8 pixels and 2 rems being 32 pixels.', 'duration': 50.533, 'highlights': ['The HTML element by default is 16 pixels, making 1 rem equivalent to 16 pixels.', '0.5 rem translates to 8 pixels, and 2 rems equals 32 pixels, showing the relationship between rem units and pixel values.', 'An explanation is given about rem units being a multiplier of the HTML font size, providing a clear understanding of their functionality.']}, {'end': 1367.015, 'start': 1042.608, 'title': 'Styling sign-in form and logo', 'summary': 'Covers the styling of the sign-in form, logo, text fields, and labels, including setting dimensions, padding, margins, and media queries for responsiveness.', 'duration': 324.407, 'highlights': ['Media Query for Responsiveness The chapter discusses the addition of a media query to adjust the layout based on browser width, with a minimum width of 1200 pixels, changing the flex properties to accommodate larger screens.', 'Styling Text Input and Label The tutorial explains the styling of text input and label, setting properties like margin, width, border radius, background color, border, text color, padding, and line height for a consistent and visually appealing form design.', 'Styling Logo and Form The tutorial covers the styling of the sign-in form by setting width, padding, and using viewport heights, as well as adding margin and fixed width to the logo class for improved organization and visual appeal.']}], 'duration': 375.641, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wIx1O5Y5EB4/pics/wIx1O5Y5EB4991374.jpg', 'highlights': ['The HTML element by default is 16 pixels, making 1 rem equivalent to 16 pixels.', '0.5 rem translates to 8 pixels, and 2 rems equals 32 pixels, showing the relationship between rem units and pixel values.', 'An explanation is given about rem units being a multiplier of the HTML font size, providing a clear understanding of their functionality.', 'Media Query for Responsiveness The chapter discusses the addition of a media query to adjust the layout based on browser width, with a minimum width of 1200 pixels, changing the flex properties to accommodate larger screens.', 'Styling Text Input and Label The tutorial explains the styling of text input and label, setting properties like margin, width, border radius, background color, border, text color, padding, and line height for a consistent and visually appealing form design.', 'Styling Logo and Form The tutorial covers the styling of the sign-in form by setting width, padding, and using viewport heights, as well as adding margin and fixed width to the logo class for improved organization and visual appeal.']}, {'end': 1585.591, 'segs': [{'end': 1417.787, 'src': 'embed', 'start': 1390.966, 'weight': 0, 'content': [{'end': 1397.548, 'text': 'I want to be able to use it across the site, even though I mean, this is the only primary button, but just in case you were to add more.', 'start': 1390.966, 'duration': 6.582}, {'end': 1402.28, 'text': "it's going to be separate from the specific sign in form.", 'start': 1398.45, 'duration': 3.83}, {'end': 1409.002, 'text': "So let's say primary button and Let's see what we want to do here.", 'start': 1402.4, 'duration': 6.602}, {'end': 1413.505, 'text': 'We want to actually do a few things.', 'start': 1410.623, 'duration': 2.882}, {'end': 1417.787, 'text': "So let's make it thicker, bigger, bigger with padding.", 'start': 1414.125, 'duration': 3.662}], 'summary': 'The primary button should be usable across the site, thicker, bigger, and with padding.', 'duration': 26.821, 'max_score': 1390.966, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wIx1O5Y5EB4/pics/wIx1O5Y5EB41390966.jpg'}, {'end': 1514.343, 'src': 'embed', 'start': 1480.548, 'weight': 1, 'content': [{'end': 1481.989, 'text': "That'll take away the underline.", 'start': 1480.548, 'duration': 1.441}, {'end': 1485.453, 'text': 'We want the cursor to be a pointer when we hover over it.', 'start': 1482.41, 'duration': 3.043}, {'end': 1490.958, 'text': 'And we want to text the line to the center.', 'start': 1487.197, 'duration': 3.761}, {'end': 1497.619, 'text': "And then finally, I'm going to add a transition of all properties.", 'start': 1492.478, 'duration': 5.141}, {'end': 1499.8, 'text': "And we'll say 0.5 seconds.", 'start': 1497.799, 'duration': 2.001}, {'end': 1505.221, 'text': 'So when we add a hover state, as long as the property is something that can transition, it will.', 'start': 1499.88, 'duration': 5.341}, {'end': 1507.501, 'text': "And we're going to have the color change slightly.", 'start': 1505.421, 'duration': 2.08}, {'end': 1514.343, 'text': 'Adding a transition will allow it to slowly fade into that color rather than to just switch to that color when you hover over it.', 'start': 1508.081, 'duration': 6.262}], 'summary': 'Styling changes include cursor pointer, text alignment to center, and color transition on hover with a 0.5-second duration.', 'duration': 33.795, 'max_score': 1480.548, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wIx1O5Y5EB4/pics/wIx1O5Y5EB41480548.jpg'}, {'end': 1566.432, 'src': 'embed', 'start': 1535.111, 'weight': 2, 'content': [{'end': 1537.711, 'text': "That's where I want to add the width of 100 percent.", 'start': 1535.111, 'duration': 2.6}, {'end': 1544.853, 'text': "OK, so we want that so that every primary button you were to create doesn't have a width of 100 percent.", 'start': 1538.011, 'duration': 6.842}, {'end': 1545.873, 'text': 'But this one we want.', 'start': 1544.893, 'duration': 0.98}, {'end': 1553.049, 'text': 'two. oh, actually the oh, see how these are stretched out further than the button.', 'start': 1546.328, 'duration': 6.721}, {'end': 1557.47, 'text': "that's because we don't have our box sizing property set.", 'start': 1553.049, 'duration': 4.421}, {'end': 1561.891, 'text': "basically, we added padding to these inputs and it's adding to the width.", 'start': 1557.47, 'duration': 4.421}, {'end': 1566.432, 'text': "so what we need to do and i should have did this earlier is i'm going to go above the body.", 'start': 1561.891, 'duration': 4.541}], 'summary': 'Setting width to 100% for primary button to avoid stretching.', 'duration': 31.321, 'max_score': 1535.111, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wIx1O5Y5EB4/pics/wIx1O5Y5EB41535111.jpg'}], 'start': 1369.781, 'title': 'Improving primary button design', 'summary': 'Discusses making the primary button thicker, bigger, and adding padding for consistent appearance, and applying these changes across the site. it also covers styling the primary button with specific dimensions, colors, behaviors, transition effects, and addressing width and padding issues for a 100% width button class.', 'chapters': [{'end': 1417.787, 'start': 1369.781, 'title': 'Improving primary button design', 'summary': 'Discusses improving the primary button design by making it thicker, bigger, and adding padding to make it look better, which will be applied across the site.', 'duration': 48.006, 'highlights': ["The primary button's design needs improvement by making it thicker and bigger with added padding.", 'The primary button will be a utility to be used across the site.', 'The changes will be separate from the specific sign-in form.']}, {'end': 1585.591, 'start': 1418.208, 'title': 'Styling primary button', 'summary': 'Discusses styling a primary button with specific dimensions, colors, and behaviors, including a transition effect, and addressing the issue of width and padding for consistent appearance, ensuring a 100% width for a specific button class.', 'duration': 167.383, 'highlights': ['The primary button is styled with specific dimensions, including 0.7rem padding for top and bottom, 1rem padding for left and right, and a height of 2.7rem.', 'The button is given a background color of #f96816 (orange), a font weight of 500, and a 2px border radius for a slightly curved appearance.', 'A transition effect of 0.5 seconds is added to smoothly change the color when hovering over the button, providing a more visually appealing interaction.', "The width for the 'Sign in' primary button is specified as 100%, ensuring it extends across the entire width, addressing the inconsistency in button widths.", 'The issue of padding affecting the width is resolved by setting the box sizing property to border-box for all elements, ensuring a consistent appearance by preventing padding from adding to the width.']}], 'duration': 215.81, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wIx1O5Y5EB4/pics/wIx1O5Y5EB41369781.jpg', 'highlights': ['The primary button is styled with specific dimensions, including 0.7rem padding for top and bottom, 1rem padding for left and right, and a height of 2.7rem.', 'A transition effect of 0.5 seconds is added to smoothly change the color when hovering over the button, providing a more visually appealing interaction.', "The width for the 'Sign in' primary button is specified as 100%, ensuring it extends across the entire width, addressing the inconsistency in button widths.", 'The issue of padding affecting the width is resolved by setting the box sizing property to border-box for all elements, ensuring a consistent appearance by preventing padding from adding to the width.', "The primary button's design needs improvement by making it thicker and bigger with added padding.", 'The primary button will be a utility to be used across the site.', 'The changes will be separate from the specific sign-in form.']}, {'end': 2155.934, 'segs': [{'end': 1621.085, 'src': 'embed', 'start': 1586.372, 'weight': 0, 'content': [{'end': 1588.374, 'text': "OK, so that's that's exactly what I want.", 'start': 1586.372, 'duration': 2.002}, {'end': 1590.918, 'text': "So let's go back down.", 'start': 1589.676, 'duration': 1.242}, {'end': 1593.644, 'text': 'So we did the primary button.', 'start': 1592.523, 'duration': 1.121}, {'end': 1600.589, 'text': "Let's let's do the primary button hover state, which, like I said, is just going to lighten it a little bit.", 'start': 1593.684, 'duration': 6.905}, {'end': 1606.714, 'text': "So we'll say primary button hover hiver.", 'start': 1601.51, 'duration': 5.204}, {'end': 1608.235, 'text': "We'll say hover.", 'start': 1607.394, 'duration': 0.841}, {'end': 1621.085, 'text': 'And the background for that is going to be a hexadecimal value of FF seven B three nine, which is just a lighter a bit of a lighter orange.', 'start': 1609.716, 'duration': 11.369}], 'summary': 'Creating primary button hover state with hexadecimal value ff7b39.', 'duration': 34.713, 'max_score': 1586.372, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wIx1O5Y5EB4/pics/wIx1O5Y5EB41586372.jpg'}, {'end': 1677.134, 'src': 'embed', 'start': 1640.126, 'weight': 1, 'content': [{'end': 1642.046, 'text': 'Well, not slowly, just whatever we put here.', 'start': 1640.126, 'duration': 1.92}, {'end': 1643.287, 'text': 'Point five seconds.', 'start': 1642.226, 'duration': 1.061}, {'end': 1645.727, 'text': "It'll take to transition the color when we hover.", 'start': 1643.367, 'duration': 2.36}, {'end': 1650.509, 'text': "So if we take a look and we go over it, you can see it doesn't just flick to the color.", 'start': 1645.848, 'duration': 4.661}, {'end': 1653.03, 'text': 'It takes point five seconds.', 'start': 1651.009, 'duration': 2.021}, {'end': 1656.991, 'text': 'And you can make that longer if you want, if you want it to go in slower.', 'start': 1653.07, 'duration': 3.921}, {'end': 1664.733, 'text': "So now let's work on the secondary button, which this create account and then this trial button.", 'start': 1658.111, 'duration': 6.622}, {'end': 1666.634, 'text': 'These are both secondary buttons.', 'start': 1664.753, 'duration': 1.881}, {'end': 1677.134, 'text': "So I'm going to copy all of this the primary button in the hover state paste it in and I'm going to change this to secondary button.", 'start': 1667.466, 'duration': 9.668}], 'summary': 'Transition color on hover takes 0.5 seconds, can be adjusted. working on secondary buttons.', 'duration': 37.008, 'max_score': 1640.126, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wIx1O5Y5EB4/pics/wIx1O5Y5EB41640126.jpg'}, {'end': 1785.059, 'src': 'heatmap', 'start': 1710.424, 'weight': 2, 'content': [{'end': 1715.468, 'text': 'And then for the hover, instead of the background color changing to orange, we want the border color.', 'start': 1710.424, 'duration': 5.044}, {'end': 1719.95, 'text': 'To change to that color as well as the text color.', 'start': 1716.949, 'duration': 3.001}, {'end': 1721.731, 'text': 'So we want this as well.', 'start': 1720.13, 'duration': 1.601}, {'end': 1724.433, 'text': "So let's save that and let's go back.", 'start': 1722.332, 'duration': 2.101}, {'end': 1726.334, 'text': 'OK, now if I hover over it.', 'start': 1724.453, 'duration': 1.881}, {'end': 1730.977, 'text': "There's no transition, though, because you know what?", 'start': 1728.095, 'duration': 2.882}, {'end': 1738.721, 'text': "I do want to keep this to all, or at least make the secondary button all, because now we're not transitioning the background color.", 'start': 1731.157, 'duration': 7.564}, {'end': 1741.083, 'text': 'There is no background color in the hover state.', 'start': 1738.781, 'duration': 2.302}, {'end': 1745.165, 'text': "So we'll just say all and I'll just put this one to all as well.", 'start': 1741.723, 'duration': 3.442}, {'end': 1752.239, 'text': 'All right, so now if we go back and hover, you can see that it slowly fades in.', 'start': 1748.106, 'duration': 4.133}, {'end': 1755.86, 'text': "OK, don't worry about this being all the way across.", 'start': 1753.439, 'duration': 2.421}, {'end': 1757.641, 'text': "We'll fix that later on.", 'start': 1755.88, 'duration': 1.761}, {'end': 1761.623, 'text': "So there's a couple of things.", 'start': 1758.602, 'duration': 3.021}, {'end': 1764.405, 'text': 'All this stuff down here, we want to be 60%.', 'start': 1762.404, 'duration': 2.001}, {'end': 1771.628, 'text': "OK, if we look at the final project, you see how these are it's it's more narrow than the form.", 'start': 1764.405, 'duration': 7.223}, {'end': 1774.33, 'text': 'The form is 80% of its container.', 'start': 1772.028, 'duration': 2.302}, {'end': 1777.071, 'text': 'We want this stuff to be 60%.', 'start': 1774.37, 'duration': 2.701}, {'end': 1779.052, 'text': "So let's add those styles.", 'start': 1777.071, 'duration': 1.981}, {'end': 1783.456, 'text': "I'm going to go right Sign in.", 'start': 1779.252, 'duration': 4.204}, {'end': 1785.059, 'text': "Yeah, we'll go right here.", 'start': 1783.877, 'duration': 1.182}], 'summary': 'Modify hover effect to change border and text color, and adjust width to 60%.', 'duration': 29.179, 'max_score': 1710.424, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wIx1O5Y5EB4/pics/wIx1O5Y5EB41710424.jpg'}, {'end': 1858.844, 'src': 'embed', 'start': 1818.553, 'weight': 3, 'content': [{'end': 1820.575, 'text': "Let's go back up to the links right here.", 'start': 1818.553, 'duration': 2.022}, {'end': 1821.475, 'text': 'We want them.', 'start': 1820.975, 'duration': 0.5}, {'end': 1823.137, 'text': 'We want these to look like this.', 'start': 1821.635, 'duration': 1.502}, {'end': 1825.158, 'text': 'We want them to be on top of each other.', 'start': 1823.277, 'duration': 1.881}, {'end': 1830.292, 'text': "So Let's see.", 'start': 1825.178, 'duration': 5.114}, {'end': 1839.567, 'text': "Yeah, let's let's go right under that and let's do sign in.", 'start': 1833.858, 'duration': 5.709}, {'end': 1847.241, 'text': 'links class and then we want to style the individual link.', 'start': 1843.78, 'duration': 3.461}, {'end': 1850.462, 'text': 'So first of all, the color is going to be white.', 'start': 1847.861, 'duration': 2.601}, {'end': 1857.044, 'text': 'We want to do a text decoration.', 'start': 1851.822, 'duration': 5.222}, {'end': 1858.844, 'text': "None We don't want an underline.", 'start': 1857.204, 'duration': 1.64}], 'summary': 'Styling links with white color and no underline.', 'duration': 40.291, 'max_score': 1818.553, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wIx1O5Y5EB4/pics/wIx1O5Y5EB41818553.jpg'}, {'end': 2028.988, 'src': 'heatmap', 'start': 1964.034, 'weight': 0.793, 'content': [{'end': 1969.019, 'text': "So what we're going to do here is go underneath and let's do sign in.", 'start': 1964.034, 'duration': 4.985}, {'end': 1975.665, 'text': "Dot or and then for the class of bar, we're actually going to set flex auto.", 'start': 1970.08, 'duration': 5.585}, {'end': 1977.727, 'text': "I'm going to remove the border.", 'start': 1976.306, 'duration': 1.421}, {'end': 1982.171, 'text': "So I'm going to say border zero or let's do I will do border none.", 'start': 1977.747, 'duration': 4.424}, {'end': 1985.474, 'text': "And we're going to just have a one pixel height.", 'start': 1983.092, 'duration': 2.382}, {'end': 1992.72, 'text': "OK, and then the background is going to be gray, so we'll do triple a.", 'start': 1986.815, 'duration': 5.905}, {'end': 1994.962, 'text': "OK, so let's save that and take a look.", 'start': 1992.72, 'duration': 2.242}, {'end': 1996.584, 'text': 'And now we have the lines here.', 'start': 1995.003, 'duration': 1.581}, {'end': 2004.402, 'text': 'Uh.. So I want some spacing right here.', 'start': 1999.591, 'duration': 4.811}, {'end': 2007.262, 'text': 'So we want to style this or which is in a span.', 'start': 2004.502, 'duration': 2.76}, {'end': 2009.143, 'text': "Right It's in a span.", 'start': 2008.103, 'duration': 1.04}, {'end': 2013.904, 'text': "So we'll say sign in in the or class.", 'start': 2009.223, 'duration': 4.681}, {'end': 2016.845, 'text': 'We want to target the span, which has the text in it.', 'start': 2013.964, 'duration': 2.881}, {'end': 2020.406, 'text': "And I'm just going to make the color light gray.", 'start': 2017.545, 'duration': 2.861}, {'end': 2028.988, 'text': "And then let's add padding zero on the top and bottom and zero point eight rem on the left and right.", 'start': 2020.926, 'duration': 8.062}], 'summary': 'Styling sign-in form with flex auto, gray background and light gray text.', 'duration': 64.954, 'max_score': 1964.034, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wIx1O5Y5EB4/pics/wIx1O5Y5EB41964034.jpg'}, {'end': 2121.481, 'src': 'heatmap', 'start': 2063.178, 'weight': 4, 'content': [{'end': 2064.458, 'text': "We'll make it a little smaller.", 'start': 2063.178, 'duration': 1.28}, {'end': 2066.1, 'text': "I'm going to do 0.8 rem.", 'start': 2064.478, 'duration': 1.622}, {'end': 2075.547, 'text': "And I'm going to give it a max width of 80%.", 'start': 2067.36, 'duration': 8.187}, {'end': 2081.233, 'text': "And then padding top, because I want to push it down quite a bit, I'm going to do 5 rem.", 'start': 2075.547, 'duration': 5.686}, {'end': 2082.914, 'text': 'All right.', 'start': 2081.253, 'duration': 1.661}, {'end': 2084.155, 'text': 'Now the links in the footer.', 'start': 2082.954, 'duration': 1.201}, {'end': 2098.647, 'text': "So the links in the footer, they're actually going to be that orange color, which or is it will grab it from primary primary button.", 'start': 2088.038, 'duration': 10.609}, {'end': 2100.469, 'text': "So that's going to be the color.", 'start': 2099.348, 'duration': 1.121}, {'end': 2105.753, 'text': "And I do I do want them to have an underline because that's how the Pluralsight login page has it.", 'start': 2100.629, 'duration': 5.124}, {'end': 2111.358, 'text': "So I'll do text decoration underline, which I don't use very often.", 'start': 2105.833, 'duration': 5.525}, {'end': 2113.579, 'text': "So let's save that.", 'start': 2112.719, 'duration': 0.86}, {'end': 2114.339, 'text': "We'll take a look.", 'start': 2113.619, 'duration': 0.72}, {'end': 2115.3, 'text': 'And good.', 'start': 2114.86, 'duration': 0.44}, {'end': 2116.8, 'text': 'So the photo looks good.', 'start': 2115.82, 'duration': 0.98}, {'end': 2121.481, 'text': "Now we're going to work on the this side, the right side with a showcases.", 'start': 2116.86, 'duration': 4.621}], 'summary': 'Styling adjustments made to footer: 0.8 rem font, 80% max width, 5 rem padding. footer links styled orange with underline.', 'duration': 35.469, 'max_score': 2063.178, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wIx1O5Y5EB4/pics/wIx1O5Y5EB42063178.jpg'}], 'start': 1586.372, 'title': 'Styling buttons and page elements', 'summary': 'Covers styling primary button hover state with a transition duration of 0.5 seconds, and focuses on styling secondary buttons, setting the width of page elements to 60%, and formatting links, bars, and footer in web page design.', 'chapters': [{'end': 1656.991, 'start': 1586.372, 'title': 'Styling primary button hover state', 'summary': 'Covers the process of styling the primary button hover state, including specifying the hexadecimal value for the background color and setting a transition duration of 0.5 seconds for the color change when hovering over the button.', 'duration': 70.619, 'highlights': ['The primary button hover state is styled by specifying the hexadecimal value FF7B39 for the background color, resulting in a lighter orange color.', 'A transition duration of 0.5 seconds is set for the color change when hovering over the button, providing a smooth visual effect.', "The process involves using the 'transition' property to control the duration of the color transition when hovering over the button."]}, {'end': 2155.934, 'start': 1658.111, 'title': 'Styling secondary buttons and page elements', 'summary': 'Focuses on styling secondary buttons, setting the width of various page elements to 60%, and formatting the links, bars, and footer in a web page design.', 'duration': 497.823, 'highlights': ["Setting the width of various page elements to 60% The instructor sets the width of page elements like the 'sign-in' secondary button, 'or' class, and links to 60% to match the design of the final project.", 'Styling the links and bars in the page design The instructor styles the links to be displayed on top of each other with a white color, no underline, and a margin bottom of 1 rem, and formats the bars to go all the way across with a 1 pixel height and a gray background.', 'Formatting the footer and its links The instructor styles the footer with gray text, centered alignment, a font size of 0.8 rem, and sets a maximum width of 80%, also formats the links in the footer to have an orange color and underline.']}], 'duration': 569.562, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wIx1O5Y5EB4/pics/wIx1O5Y5EB41586372.jpg', 'highlights': ['The primary button hover state is styled with the hexadecimal value FF7B39 for the background color.', 'A transition duration of 0.5 seconds is set for the color change when hovering over the button.', 'Setting the width of various page elements to 60% to match the design of the final project.', 'Styling the links to be displayed on top of each other with a white color, no underline, and a margin bottom of 1 rem.', 'Formatting the footer with gray text, centered alignment, a font size of 0.8 rem, and sets a maximum width of 80%.']}, {'end': 2554.569, 'segs': [{'end': 2300.303, 'src': 'heatmap', 'start': 2250.669, 'weight': 1, 'content': [{'end': 2262.278, 'text': "Font size, I'm going to increase that to three ram and we want to set the width to 100 percent, the color white.", 'start': 2250.669, 'duration': 11.609}, {'end': 2268.583, 'text': "And let's set a margin bottom to push the button down to one point five ram.", 'start': 2263.239, 'duration': 5.344}, {'end': 2270.145, 'text': 'All right.', 'start': 2269.865, 'duration': 0.28}, {'end': 2270.905, 'text': "Let's take a look.", 'start': 2270.165, 'duration': 0.74}, {'end': 2273.768, 'text': 'Good So the secondary button.', 'start': 2271.085, 'duration': 2.683}, {'end': 2278.531, 'text': 'In the showcase showcase.', 'start': 2275.769, 'duration': 2.762}, {'end': 2282.441, 'text': 'Secondary button.', 'start': 2281.5, 'duration': 0.941}, {'end': 2290.449, 'text': "I'm going to set a width of 60 percent and just set the margin to auto.", 'start': 2282.461, 'duration': 7.988}, {'end': 2292.33, 'text': "So it's always in the middle.", 'start': 2291.169, 'duration': 1.161}, {'end': 2294.312, 'text': "And let's take a look.", 'start': 2293.531, 'duration': 0.781}, {'end': 2295.133, 'text': 'And there we go.', 'start': 2294.492, 'duration': 0.641}, {'end': 2296.114, 'text': 'So that looks pretty good.', 'start': 2295.193, 'duration': 0.921}, {'end': 2300.303, 'text': "so we're almost done here.", 'start': 2298.402, 'duration': 1.901}], 'summary': 'Adjustments made: font size increased to 3rem, width set to 100%, margin bottom to 1.5rem. secondary button width set to 60% and margin to auto.', 'duration': 39.78, 'max_score': 2250.669, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wIx1O5Y5EB4/pics/wIx1O5Y5EB42250669.jpg'}, {'end': 2344.873, 'src': 'embed', 'start': 2312.586, 'weight': 0, 'content': [{'end': 2316.267, 'text': "so we're going to just completely get rid of the right side.", 'start': 2312.586, 'duration': 3.681}, {'end': 2324.5, 'text': "so down here at the bottom, i'm going to add another media query for smaller screens, basically tablet and under.", 'start': 2316.267, 'duration': 8.233}, {'end': 2327.182, 'text': 'so 768 is a good, a good width.', 'start': 2324.5, 'duration': 2.682}, {'end': 2337.928, 'text': "so let's say media, and this time we're going to use a max width of 768 pixels,", 'start': 2327.182, 'duration': 10.746}, {'end': 2344.873, 'text': 'meaning that anything that is on 768 or under these styles will will come into effect.', 'start': 2337.928, 'duration': 6.945}], 'summary': 'Adding a media query for smaller screens with a max width of 768 pixels.', 'duration': 32.287, 'max_score': 2312.586, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wIx1O5Y5EB4/pics/wIx1O5Y5EB42312586.jpg'}, {'end': 2425.581, 'src': 'embed', 'start': 2368.14, 'weight': 2, 'content': [{'end': 2372.823, 'text': "And right now we have it set to overflow hidden, which means we don't we won't even have scroll bars.", 'start': 2368.14, 'duration': 4.683}, {'end': 2373.904, 'text': "We won't be able to scroll.", 'start': 2372.843, 'duration': 1.061}, {'end': 2380.51, 'text': "So, I'm going to do a couple things here to basically make this, you know, less long.", 'start': 2374.724, 'duration': 5.786}, {'end': 2386.035, 'text': "So, let's add in and we can probably just move this over.", 'start': 2381.451, 'duration': 4.584}, {'end': 2395.083, 'text': "Yeah, so let's do body and I'm just going to change this to overflow auto.", 'start': 2388.257, 'duration': 6.826}, {'end': 2407.511, 'text': 'Okay, now the reason that this is pushed down so far is because our left div, the div with the ID of left, the justify content is in the center.', 'start': 2397.585, 'duration': 9.926}, {'end': 2412.854, 'text': 'So this is being in the center vertically, but I want to change that on smaller screens.', 'start': 2407.591, 'duration': 5.263}, {'end': 2422.599, 'text': "So let's go ahead and say for the left, we want to add justify content start.", 'start': 2413.014, 'duration': 9.585}, {'end': 2425.581, 'text': 'Okay, so if I save that, now it gets pushed up.', 'start': 2422.619, 'duration': 2.962}], 'summary': 'Adjusting css properties to modify layout for smaller screens.', 'duration': 57.441, 'max_score': 2368.14, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wIx1O5Y5EB4/pics/wIx1O5Y5EB42368140.jpg'}, {'end': 2546.384, 'src': 'embed', 'start': 2453.977, 'weight': 4, 'content': [{'end': 2459.141, 'text': "So let's change that to two viewport heights and save.", 'start': 2453.977, 'duration': 5.164}, {'end': 2460.442, 'text': 'So that pushes that up.', 'start': 2459.401, 'duration': 1.041}, {'end': 2464.694, 'text': 'We can also save some space on the text inputs right here.', 'start': 2461.209, 'duration': 3.485}, {'end': 2468.639, 'text': "I think there's like one point three ram or something like that.", 'start': 2464.754, 'duration': 3.885}, {'end': 2478.532, 'text': "So we'll go ahead and say sign in and we want to get the text input and let's add a margin bottom.", 'start': 2469.159, 'duration': 9.373}, {'end': 2485.371, 'text': 'or change the margin bottom from whatever it is to 0.7 ram.', 'start': 2479.286, 'duration': 6.085}, {'end': 2489.255, 'text': 'save that so that made these more closer together.', 'start': 2485.371, 'duration': 3.884}, {'end': 2490.556, 'text': 'and then the footer.', 'start': 2489.255, 'duration': 1.301}, {'end': 2492.597, 'text': "obviously there's a lot of space right here.", 'start': 2490.556, 'duration': 2.041}, {'end': 2494.559, 'text': 'we can save on that as well.', 'start': 2492.597, 'duration': 1.962}, {'end': 2497.241, 'text': 'so say foot.', 'start': 2494.559, 'duration': 2.682}, {'end': 2497.882, 'text': 'actually what is it?', 'start': 2497.241, 'duration': 0.641}, {'end': 2501.345, 'text': 'main footer?', 'start': 2497.882, 'duration': 3.463}, {'end': 2507.634, 'text': "and we're gonna set the margin top, which I believe is initially three REM.", 'start': 2501.345, 'duration': 6.289}, {'end': 2508.274, 'text': 'we set it to.', 'start': 2507.634, 'duration': 0.64}, {'end': 2510.956, 'text': "So let's set it to one REM on smaller screens.", 'start': 2508.374, 'duration': 2.582}, {'end': 2513.058, 'text': 'Main footer.', 'start': 2512.317, 'duration': 0.741}, {'end': 2516.06, 'text': "I'm sorry, it's padding, not margin.", 'start': 2514.399, 'duration': 1.661}, {'end': 2518.843, 'text': 'And there we go.', 'start': 2518.322, 'duration': 0.521}, {'end': 2519.503, 'text': 'Pushes it up.', 'start': 2518.883, 'duration': 0.62}, {'end': 2522.225, 'text': 'I do want to push the logo down a little bit.', 'start': 2520.004, 'duration': 2.221}, {'end': 2524.928, 'text': 'So for left margin top.', 'start': 2522.305, 'duration': 2.623}, {'end': 2528.45, 'text': "Let's do four.", 'start': 2526.489, 'duration': 1.961}, {'end': 2530.312, 'text': "Yeah, that's better.", 'start': 2529.551, 'duration': 0.761}, {'end': 2532.775, 'text': 'Okay, so that looks pretty good.', 'start': 2531.334, 'duration': 1.441}, {'end': 2538.338, 'text': "And that should do it for, I'm not going to say every mobile device, but most of them, especially the newer ones.", 'start': 2532.815, 'duration': 5.523}, {'end': 2541.841, 'text': 'But yeah, so once we get here, splits.', 'start': 2539.439, 'duration': 2.402}, {'end': 2546.384, 'text': 'Once we get here, it goes into, you know, 40, 60, basically.', 'start': 2542.021, 'duration': 4.363}], 'summary': 'Optimized layout for mobile devices, reducing margins and padding to improve spacing and responsiveness.', 'duration': 92.407, 'max_score': 2453.977, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wIx1O5Y5EB4/pics/wIx1O5Y5EB42453977.jpg'}], 'start': 2155.954, 'title': 'Responsive showcase design and mobile layout adjustments', 'summary': 'Covers designing a responsive showcase and making adjustments to the layout for smaller screens, ensuring proper display and optimizing the layout for most newer mobile devices.', 'chapters': [{'end': 2395.083, 'start': 2155.954, 'title': 'Responsive showcase design', 'summary': 'Discusses designing a responsive showcase, including setting positioning, dimensions, and responsiveness, achieving a prominent and centered display, and ensuring proper display on smaller screens.', 'duration': 239.129, 'highlights': ['The showcase design includes setting a height of 100 VH for proper display, using flex to center the content, and adjusting text size and button width for prominence.', 'A media query with a max width of 768 pixels is implemented to remove the right side display on smaller screens, ensuring a better responsive layout.', "To address the display on mobile devices, the overflow property is adjusted to 'auto' for better scrolling functionality and to optimize the showcase for smaller screens."]}, {'end': 2554.569, 'start': 2397.585, 'title': 'Mobile layout adjustments', 'summary': 'Discusses making adjustments to the layout for smaller screens, including changing justify content, margin top, and margin bottom for different elements to optimize the layout for mobile devices, aiming to cater to most newer mobile devices.', 'duration': 156.984, 'highlights': ['Changed justify content to start for the left div to adjust its position on smaller screens, optimizing for mobile devices.', 'Set the margin top of the logo to four, reducing excessive space on the top, enhancing the mobile layout.', 'Adjusted the margin bottom of the text inputs to 0.7 ram, optimizing the spacing for a better mobile viewing experience.', 'Set the margin top of the main footer to one REM on smaller screens, reducing excessive space and improving the mobile layout.']}], 'duration': 398.615, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wIx1O5Y5EB4/pics/wIx1O5Y5EB42155954.jpg', 'highlights': ['A media query with a max width of 768 pixels is implemented to remove the right side display on smaller screens, ensuring a better responsive layout.', 'The showcase design includes setting a height of 100 VH for proper display, using flex to center the content, and adjusting text size and button width for prominence.', "To address the display on mobile devices, the overflow property is adjusted to 'auto' for better scrolling functionality and to optimize the showcase for smaller screens.", 'Changed justify content to start for the left div to adjust its position on smaller screens, optimizing for mobile devices.', 'Set the margin top of the main footer to one REM on smaller screens, reducing excessive space and improving the mobile layout.', 'Set the margin top of the logo to four, reducing excessive space on the top, enhancing the mobile layout.', 'Adjusted the margin bottom of the text inputs to 0.7 ram, optimizing the spacing for a better mobile viewing experience.']}], 'highlights': ['Using Flexbox and media queries for responsiveness.', 'Building a clone of the Pluralsight login page using HTML and CSS.', 'Emphasizing using flexbox to align elements side by side.', 'Setting the flex property to evenly divide the sections.', 'Implementing a flexbox layout with the flex direction set to column.', 'Styling text input and label for a consistent and visually appealing form design.', 'Styling the sign-in form by setting width, padding, and using viewport heights.', 'Styling the primary button with specific dimensions and a transition effect for a visually appealing interaction.', 'Styling the primary button hover state with a transition duration and a specific background color.', 'Implementing a media query to adjust the layout based on browser width for responsiveness.', 'Adjusting layout for larger screens with a media query.', 'Setting the width of various page elements to match the design of the final project.', 'Formatting the footer with gray text, centered alignment, and a maximum width of 80%.', 'Optimizing the showcase for smaller screens by adjusting properties like height, text size, and button width.', 'Implementing a media query to remove the right side display on smaller screens for a better responsive layout.', 'Adjusting properties like overflow, justify content, and margins to optimize for mobile devices.']}