title
Create a Split Landing Page With HTML, CSS & JS

description
Create a split animated landing page using HTML5, CSS3 transitions and a bit of vanilla JavaScript. We will also be using CSS variables aka custom properties. CODE: Code for this project https://codepen.io/bradtraversy/pen/dJzzdB 💖 BECOME A PATRON: Show support & get perks! http://www.patreon.com/traversymedia VISIT MY WEBISTE: Check Out My Udemy Courses http://www.traversymedia.com FOLLOW TRAVERSY MEDIA: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.instagram.com/traversymedia https://discord.gg/traversymedia

detail
{'title': 'Create a Split Landing Page With HTML, CSS & JS', 'heatmap': [{'end': 268.216, 'start': 195.906, 'weight': 0.729}, {'end': 355.439, 'start': 328.67, 'weight': 0.868}, {'end': 537.661, 'start': 513.976, 'weight': 0.867}, {'end': 702.537, 'start': 675.943, 'weight': 0.863}, {'end': 806.401, 'start': 760.124, 'weight': 0.885}, {'end': 1092.377, 'start': 1065.438, 'weight': 0.891}, {'end': 1135.804, 'start': 1104.402, 'weight': 0.911}, {'end': 1255.879, 'start': 1189.979, 'weight': 0.714}, {'end': 1316.515, 'start': 1288.204, 'weight': 0.731}], 'summary': 'Tutorial demonstrates creating a split landing page with responsive design using html, css, and javascript, covering javascript basics, styling techniques, css units, button and image styling, hover effects, and responsive design implementation with specific code details and examples.', 'chapters': [{'end': 287.212, 'segs': [{'end': 70.106, 'src': 'embed', 'start': 7.628, 'weight': 0, 'content': [{'end': 14.85, 'text': "Hey guys, in this video, we're going to build a split landing page from scratch, using just HTML, CSS and a little bit of JavaScript.", 'start': 7.628, 'duration': 7.222}, {'end': 23.012, 'text': 'so the idea of this would be for someone that is a designer or a pro and a programmer, and of course you can substitute this with anything at all,', 'start': 14.85, 'duration': 8.162}, {'end': 27.993, 'text': 'but you may have different sections or pages for each of these these categories.', 'start': 23.012, 'duration': 4.981}, {'end': 35.334, 'text': 'So this is a nice, sleek way to give your visitors the option to choose where they want to go.', 'start': 28.473, 'duration': 6.861}, {'end': 38.155, 'text': 'Do they want design services or programming services?', 'start': 35.374, 'duration': 2.781}, {'end': 45.496, 'text': "And you'll see if I hover over the designer, it's going to extend and push the programmer part over and make it darker.", 'start': 38.855, 'duration': 6.641}, {'end': 48.377, 'text': 'And we can hover hover over this button as well.', 'start': 46.157, 'duration': 2.22}, {'end': 51.018, 'text': 'And this would go to a specific part of the site.', 'start': 48.697, 'duration': 2.321}, {'end': 52.598, 'text': 'And then the same thing over here.', 'start': 51.458, 'duration': 1.14}, {'end': 57.959, 'text': "If we go hover over programmer, it'll push designer over and we could go to that part of the site.", 'start': 52.658, 'duration': 5.301}, {'end': 58.939, 'text': 'All right.', 'start': 58.639, 'duration': 0.3}, {'end': 62.301, 'text': "And as far as responsiveness, it's pretty responsive.", 'start': 58.979, 'duration': 3.322}, {'end': 67.444, 'text': "If I go down to a certain point, you'll see that the button and the heading will get smaller.", 'start': 62.381, 'duration': 5.063}, {'end': 70.106, 'text': 'You can tweak this this around if you want.', 'start': 67.825, 'duration': 2.281}], 'summary': 'Build split landing page with html, css, and javascript, providing options for design and programming services, and demonstrating responsiveness.', 'duration': 62.478, 'max_score': 7.628, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oRmQN244Ir0/pics/oRmQN244Ir07628.jpg'}, {'end': 162.295, 'src': 'embed', 'start': 135.676, 'weight': 5, 'content': [{'end': 139.296, 'text': 'Hopefully you enjoy this and you can use this on your own website if you want.', 'start': 135.676, 'duration': 3.62}, {'end': 141.757, 'text': "It's open source and let's get started.", 'start': 139.356, 'duration': 2.401}, {'end': 148.904, 'text': "Hey guys, if you've been watching my videos for a while and you really like what I do and I've helped you out a lot, consider becoming a patron.", 'start': 142.759, 'duration': 6.145}, {'end': 153.928, 'text': 'Even for $1 per month, it pushes me to keep bringing you guys the best content I possibly can.', 'start': 149.084, 'duration': 4.844}, {'end': 158.992, 'text': "There's reward tiers for discounts, free Udemy courses, personal support, and more.", 'start': 153.948, 'duration': 5.044}, {'end': 162.295, 'text': 'So check out the Patreon link in the description below for more info.', 'start': 159.072, 'duration': 3.223}], 'summary': 'Open source website tool available for patronage with rewards and discounts.', 'duration': 26.619, 'max_score': 135.676, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oRmQN244Ir0/pics/oRmQN244Ir0135676.jpg'}, {'end': 216.166, 'src': 'embed', 'start': 175.616, 'weight': 3, 'content': [{'end': 181.199, 'text': 'and then I have an image folder and IMG folder with the designer.jpg and programmer.jpg.', 'start': 175.616, 'duration': 5.583}, {'end': 183.741, 'text': "which isn't going to display.", 'start': 182.62, 'duration': 1.121}, {'end': 190.824, 'text': "it's too large, but i have those images and i will include a remote link with the code pen.", 'start': 183.741, 'duration': 7.083}, {'end': 195.906, 'text': 'but if you want to download these yourself, what you can do is go to pexels.com.', 'start': 190.824, 'duration': 5.082}, {'end': 216.166, 'text': "so p-e-x-e-l-s dot com and i just search for programming and these are all free to use images and I grab this first one here and then for the other one I search for design red and it's this brush one right here and for both of them I grab the 1920 by 1280 version.", 'start': 195.906, 'duration': 20.26}], 'summary': 'Images designer.jpg and programmer.jpg not displaying. suggested using pexels.com for free images, 1920x1280 resolution.', 'duration': 40.55, 'max_score': 175.616, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oRmQN244Ir0/pics/oRmQN244Ir0175616.jpg'}, {'end': 268.216, 'src': 'heatmap', 'start': 195.906, 'weight': 0.729, 'content': [{'end': 216.166, 'text': "so p-e-x-e-l-s dot com and i just search for programming and these are all free to use images and I grab this first one here and then for the other one I search for design red and it's this brush one right here and for both of them I grab the 1920 by 1280 version.", 'start': 195.906, 'duration': 20.26}, {'end': 219.552, 'text': 'All right.', 'start': 219.232, 'duration': 0.32}, {'end': 222.313, 'text': "So let's start off with the HTML.", 'start': 220.132, 'duration': 2.181}, {'end': 224.054, 'text': "It's going to be very, very simple.", 'start': 222.373, 'duration': 1.681}, {'end': 228.735, 'text': "So let's go ahead and add our basic boilerplate with Emmet.", 'start': 225.034, 'duration': 3.701}, {'end': 233.977, 'text': "So we'll do exclamation tab, and that'll give us just our basic boilerplate here.", 'start': 228.795, 'duration': 5.182}, {'end': 240.319, 'text': "And we'll add a title of, let's say, split landing page.", 'start': 234.537, 'duration': 5.782}, {'end': 245.241, 'text': "And I'm going to add in a link to our style sheet.", 'start': 241.56, 'duration': 3.681}, {'end': 251.983, 'text': "Okay, and let's go ahead and add a container class.", 'start': 248.22, 'duration': 3.763}, {'end': 253.704, 'text': 'This is going to be very minimal.', 'start': 252.003, 'duration': 1.701}, {'end': 258.148, 'text': "And then we're going to have two classes with split.", 'start': 254.265, 'duration': 3.883}, {'end': 262.051, 'text': "So I'll go ahead and say split times two tab with Emmett.", 'start': 259.089, 'duration': 2.962}, {'end': 265.174, 'text': 'And then this one will also have a class of left.', 'start': 262.471, 'duration': 2.703}, {'end': 268.216, 'text': 'and then this one will have a class of right.', 'start': 265.794, 'duration': 2.422}], 'summary': 'Using pexels.com, grabbed free images for split landing page with html and css.', 'duration': 72.31, 'max_score': 195.906, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oRmQN244Ir0/pics/oRmQN244Ir0195906.jpg'}], 'start': 7.628, 'title': 'Building split landing page', 'summary': 'Discusses building a split landing page with a responsive design using html, css, and javascript, allowing visitors to choose between design and programming services. it includes information on resources for images and code files and mentions the option to support the content creator through patreon.', 'chapters': [{'end': 70.106, 'start': 7.628, 'title': 'Building split landing page', 'summary': 'Discusses how to build a split landing page using html, css, and a little bit of javascript, allowing visitors to choose between design and programming services with a sleek and responsive design.', 'duration': 62.478, 'highlights': ['The split landing page is built using HTML, CSS, and a little bit of JavaScript, providing visitors with the option to choose between design and programming services.', 'The page features a sleek design with hover effects that extend and push the selected category, making it darker and allowing visitors to navigate to specific parts of the site.', 'The responsiveness of the page is demonstrated as the button and heading get smaller when the screen size is reduced, offering flexibility for customization.']}, {'end': 287.212, 'start': 70.886, 'title': 'Building a split landing page', 'summary': 'Discusses building a split landing page with a responsive design using media queries and css variables, and includes information on resources for images and code files. it also mentions the option to support the content creator through patreon.', 'duration': 216.326, 'highlights': ['The chapter discusses building a split landing page with a responsive design using media queries and CSS variables. It explains the approach to creating a responsive design, mentioning the use of media queries and CSS variables for easy customization.', 'Includes information on resources for images and code files. It provides details about obtaining free-to-use images from pexels.com and the creation of HTML, JavaScript, and CSS files for the project.', 'Mentions the option to support the content creator through Patreon. It encourages viewers to support the content creator through Patreon, highlighting the benefits and rewards available.']}], 'duration': 279.584, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oRmQN244Ir0/pics/oRmQN244Ir07628.jpg', 'highlights': ['The split landing page is built using HTML, CSS, and a little bit of JavaScript, providing visitors with the option to choose between design and programming services.', 'The chapter discusses building a split landing page with a responsive design using media queries and CSS variables. It explains the approach to creating a responsive design, mentioning the use of media queries and CSS variables for easy customization.', 'The page features a sleek design with hover effects that extend and push the selected category, making it darker and allowing visitors to navigate to specific parts of the site.', 'Includes information on resources for images and code files. It provides details about obtaining free-to-use images from pexels.com and the creation of HTML, JavaScript, and CSS files for the project.', 'The responsiveness of the page is demonstrated as the button and heading get smaller when the screen size is reduced, offering flexibility for customization.', 'Mentions the option to support the content creator through Patreon. It encourages viewers to support the content creator through Patreon, highlighting the benefits and rewards available.']}, {'end': 605.99, 'segs': [{'end': 369.571, 'src': 'heatmap', 'start': 328.67, 'weight': 0, 'content': [{'end': 332.732, 'text': "And it'll come up, and you can just click the green Install button, and that'll set it up.", 'start': 328.67, 'duration': 4.062}, {'end': 336.855, 'text': 'And then you can simply right-click and just say Open with Live Server.', 'start': 333.173, 'duration': 3.682}, {'end': 339.983, 'text': "OK, so that's what it's going to look like for now.", 'start': 337.921, 'duration': 2.062}, {'end': 344.047, 'text': "So let's let's see.", 'start': 341.685, 'duration': 2.362}, {'end': 348.272, 'text': "I would say let's do the JavaScript next because it's pretty easy.", 'start': 345.168, 'duration': 3.104}, {'end': 355.439, 'text': 'All we need to do is remove and add classes, the hover left and hover right classes from certain elements.', 'start': 348.452, 'duration': 6.987}, {'end': 358.062, 'text': "So we're just going to create a couple of variables.", 'start': 356.04, 'duration': 2.022}, {'end': 360.124, 'text': "We're going to create one called left.", 'start': 358.082, 'duration': 2.042}, {'end': 369.571, 'text': "and we're going to use document dot query selector and we're going to grab the class of left all right.", 'start': 361.685, 'duration': 7.886}], 'summary': 'Install and use live server, then apply javascript to add/remove classes from elements.', 'duration': 48.985, 'max_score': 328.67, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oRmQN244Ir0/pics/oRmQN244Ir0328670.jpg'}, {'end': 468.704, 'src': 'embed', 'start': 432.037, 'weight': 4, 'content': [{'end': 433.717, 'text': 'So class list dot add.', 'start': 432.037, 'duration': 1.68}, {'end': 438.838, 'text': "And we're going to put in here hover dash left.", 'start': 435.397, 'duration': 3.441}, {'end': 440.438, 'text': "That's the class we want to add.", 'start': 439.018, 'duration': 1.42}, {'end': 452.061, 'text': 'So for the left class, which is this right here, this div right here, when we mouse enter it, then we want to add the class of hover left.', 'start': 440.999, 'duration': 11.062}, {'end': 453.301, 'text': "That's all this is doing.", 'start': 452.181, 'duration': 1.12}, {'end': 454.661, 'text': 'all right.', 'start': 454.281, 'duration': 0.38}, {'end': 468.704, 'text': "so let's um, let's go ahead and copy this down and let's add an event for mouse leave.", 'start': 454.661, 'duration': 14.043}], 'summary': 'Adding hover-left class on mouse enter and mouse leave events.', 'duration': 36.667, 'max_score': 432.037, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oRmQN244Ir0/pics/oRmQN244Ir0432037.jpg'}, {'end': 548.679, 'src': 'heatmap', 'start': 513.976, 'weight': 0.867, 'content': [{'end': 514.856, 'text': "OK, and that's it.", 'start': 513.976, 'duration': 0.88}, {'end': 517.437, 'text': "That's all we need to do for our JavaScript.", 'start': 515.236, 'duration': 2.201}, {'end': 519.457, 'text': "We can go ahead and save this, and we're done here.", 'start': 517.457, 'duration': 2}, {'end': 525.358, 'text': 'So the style CSS, this is where most of our work is going to be done.', 'start': 520.977, 'duration': 4.381}, {'end': 530.579, 'text': "So like I said, we're using CSS variables, also called custom properties.", 'start': 525.979, 'duration': 4.6}, {'end': 537.661, 'text': "And I'm going to scope them all to the root element so that we can use these variables anywhere in any other element.", 'start': 530.68, 'duration': 6.981}, {'end': 542.422, 'text': "All right, so first thing we'll put is the container background color.", 'start': 538.261, 'duration': 4.161}, {'end': 548.679, 'text': "And we're going to set that to hexadecimal 333, which is a very dark gray.", 'start': 543.436, 'duration': 5.243}], 'summary': 'Using css variables to set container background color to hexadecimal 333.', 'duration': 34.703, 'max_score': 513.976, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oRmQN244Ir0/pics/oRmQN244Ir0513976.jpg'}], 'start': 287.232, 'title': 'Javascript basics and styling', 'summary': 'Covers setting up live server in vs code, creating javascript variables, event handling for mouse enter and leave, adding and removing classes, using css variables for styling, and setting container background color to #333 with custom rgba values.', 'chapters': [{'end': 403.967, 'start': 287.232, 'title': 'Setting up live server and javascript variables', 'summary': 'Covers setting up live server in vs code and creating javascript variables to manipulate classes of certain elements in the web page.', 'duration': 116.735, 'highlights': ['The chapter explains setting up Live Server in VS Code by installing it through the extensions icon and opening it with Live Server, providing a seamless way to view changes in the web page instantly.', "It describes creating JavaScript variables such as 'left', 'right', and 'container' to manipulate classes of elements, enabling the removal and addition of classes like 'hover left' and 'hover right' for interactivity.", 'The process involves using document.querySelector to grab the classes of elements and assigning them to variables for further manipulation.']}, {'end': 605.99, 'start': 404.908, 'title': 'Javascript event handling and css styling', 'summary': 'Demonstrates the manual addition of event listeners for mouse enter and leave in javascript for adding and removing classes, and the use of css variables for styling, including setting the container background color to #333 and creating custom colors with rgba values.', 'duration': 201.082, 'highlights': ['The chapter demonstrates the manual addition of event listeners for mouse enter and leave in JavaScript for adding and removing classes, and the use of CSS variables for styling, including setting the container background color to #333 and creating custom colors with RGBA values.', 'The JavaScript code adds event listeners for mouse enter and leave to add and remove classes, such as hover-left and hover-right, to elements, demonstrating a manual approach to event handling.', 'The CSS code uses custom properties and sets the container background color to hexadecimal #333, the left background color with an RGBA value of (223, 0, 0, 0.7), and the left button hover color with RGBA value (161, 11, 11, 0.3), showcasing the use of CSS variables and custom colors.', 'Manual addition of event listeners for mouse enter and leave in JavaScript is used to add and remove classes, such as hover-left and hover-right, to elements, providing an alternative to using jQuery for event handling.', 'The CSS styling includes setting the container background color to hexadecimal #333, the left background color with an RGBA value of (223, 0, 0, 0.7), and the left button hover color with RGBA value (161, 11, 11, 0.3), showcasing the use of CSS variables and custom colors for enhanced styling.']}], 'duration': 318.758, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oRmQN244Ir0/pics/oRmQN244Ir0287232.jpg', 'highlights': ['The chapter explains setting up Live Server in VS Code by installing it through the extensions icon and opening it with Live Server, providing a seamless way to view changes in the web page instantly.', 'The process involves using document.querySelector to grab the classes of elements and assigning them to variables for further manipulation.', 'The chapter demonstrates the manual addition of event listeners for mouse enter and leave in JavaScript for adding and removing classes, and the use of CSS variables for styling, including setting the container background color to #333 and creating custom colors with RGBA values.', 'The JavaScript code adds event listeners for mouse enter and leave to add and remove classes, such as hover-left and hover-right, to elements, demonstrating a manual approach to event handling.', 'The CSS code uses custom properties and sets the container background color to hexadecimal #333, the left background color with an RGBA value of (223, 0, 0, 0.7), and the left button hover color with RGBA value (161, 11, 11, 0.3), showcasing the use of CSS variables and custom colors.']}, {'end': 855.369, 'segs': [{'end': 669.821, 'src': 'embed', 'start': 605.99, 'weight': 1, 'content': [{'end': 611.093, 'text': "so for that this is going to be a dark gray, almost black, so it's going to be 43.", 'start': 605.99, 'duration': 5.103}, {'end': 611.814, 'text': 'what whoops?', 'start': 611.093, 'duration': 0.721}, {'end': 626.154, 'text': "we need to do rgba and then 43 three times, and let's do for the alpha 0.8.", 'start': 611.814, 'duration': 14.34}, {'end': 633.52, 'text': "and you can experiment with these colors if you want, but if you want it to match exactly what i'm doing, then use these.", 'start': 626.154, 'duration': 7.366}, {'end': 646.763, 'text': 'so now we want the button hover color for the right side, So RGBA, and this is going to be just a lighter dark gray.', 'start': 633.52, 'duration': 13.243}, {'end': 651.745, 'text': "So it's going to be 92 three times.", 'start': 646.883, 'duration': 4.862}, {'end': 657.326, 'text': "And then for the opacity, let's do 0.3.", 'start': 652.205, 'duration': 5.121}, {'end': 659.606, 'text': 'Okay, now we want the hover width variable.', 'start': 657.326, 'duration': 2.28}, {'end': 667.348, 'text': "So I'm going to set this to 75%, and then the other width is what I'm calling it.", 'start': 661.647, 'duration': 5.701}, {'end': 669.821, 'text': "I'm going to set that to 25%.", 'start': 668.7, 'duration': 1.121}], 'summary': 'Setting colors for button hover and widths: dark gray (rgba 43, 43, 43, 0.8), lighter dark gray (rgba 92, 92, 92, 0.3), hover width 75%, other width 25%', 'duration': 63.831, 'max_score': 605.99, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oRmQN244Ir0/pics/oRmQN244Ir0605990.jpg'}, {'end': 702.537, 'src': 'heatmap', 'start': 675.943, 'weight': 0.863, 'content': [{'end': 680.045, 'text': "And I'm going to do 1000 milliseconds, which is one second.", 'start': 675.943, 'duration': 4.102}, {'end': 682.446, 'text': "Okay, so that's it for our variables.", 'start': 680.726, 'duration': 1.72}, {'end': 685.968, 'text': "Now we're going to move on to the HTML and body.", 'start': 682.987, 'duration': 2.981}, {'end': 692.371, 'text': 'So for the for this, we want to zero out the padding and margin.', 'start': 688.489, 'duration': 3.882}, {'end': 696.374, 'text': 'So margin zero.', 'start': 695.094, 'duration': 1.28}, {'end': 702.537, 'text': "And let's do a font family of Franklin Gothic medium.", 'start': 696.394, 'duration': 6.143}], 'summary': 'Setting variables and styles for html and body elements.', 'duration': 26.594, 'max_score': 675.943, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oRmQN244Ir0/pics/oRmQN244Ir0675943.jpg'}, {'end': 737.732, 'src': 'embed', 'start': 705.277, 'weight': 0, 'content': [{'end': 708.218, 'text': "We'll do a width of 100% and a height of 100%.", 'start': 705.277, 'duration': 2.941}, {'end': 717.021, 'text': "And then I'm going to do an overflow dash x so we prevent any horizontal scrolling.", 'start': 708.218, 'duration': 8.803}, {'end': 718.682, 'text': "So we're going to set that to hidden.", 'start': 717.181, 'duration': 1.501}, {'end': 724.903, 'text': "Okay so after the HTML and body let's do the H1.", 'start': 721.42, 'duration': 3.483}, {'end': 729.766, 'text': "So we're going to set a font size here and I tried to use all rem units.", 'start': 726.103, 'duration': 3.663}, {'end': 737.732, 'text': "If you don't really understand rem and em units I have a tutorial on that that I did about a month ago or so.", 'start': 730.807, 'duration': 6.925}], 'summary': 'Setting width and height to 100% with overflow-x hidden, and specifying font size in rem units for h1.', 'duration': 32.455, 'max_score': 705.277, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oRmQN244Ir0/pics/oRmQN244Ir0705277.jpg'}, {'end': 806.401, 'src': 'heatmap', 'start': 760.124, 'weight': 0.885, 'content': [{'end': 761.965, 'text': 'So color is going to be white.', 'start': 760.124, 'duration': 1.841}, {'end': 763.666, 'text': 'And then position.', 'start': 762.566, 'duration': 1.1}, {'end': 779.107, 'text': "is going to be absolute and we're going to say from the left 50% and then from the top 20% alright, and if we look at the finished product here,", 'start': 765.658, 'duration': 13.449}, {'end': 781.208, 'text': "we're talking about this H1.", 'start': 779.107, 'duration': 2.101}, {'end': 793.615, 'text': "so we're saying from the left 50%, from the top 20%, okay, um so let's continue here and let's do transform,", 'start': 781.208, 'duration': 12.407}, {'end': 800.198, 'text': 'because we we need the h1 to actually move when we do our transformation or our transition.', 'start': 793.615, 'duration': 6.583}, {'end': 806.401, 'text': "so we'll set, translate x, we want it to move along the x-axis and we're going to do negative 50 percent.", 'start': 800.198, 'duration': 6.203}], 'summary': 'Set h1 color to white, absolute position with left 50% and top 20%. also, apply a transform to move it along the x-axis by -50%.', 'duration': 46.277, 'max_score': 760.124, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oRmQN244Ir0/pics/oRmQN244Ir0760124.jpg'}, {'end': 863.902, 'src': 'embed', 'start': 831.851, 'weight': 4, 'content': [{'end': 837.295, 'text': "I don't want the programmer to go on the next line, even if this gets too small.", 'start': 831.851, 'duration': 5.444}, {'end': 840.337, 'text': "I want it to just stay on one line, so I'm adding the no wrap.", 'start': 837.335, 'duration': 3.002}, {'end': 843.039, 'text': "All right, so that's the H1.", 'start': 841.618, 'duration': 1.421}, {'end': 844.16, 'text': "Now let's do the button.", 'start': 843.079, 'duration': 1.081}, {'end': 848.243, 'text': 'So this has the most styles out of all the elements.', 'start': 845.161, 'duration': 3.082}, {'end': 852.226, 'text': "We're going to display it as a block level element.", 'start': 849.364, 'duration': 2.862}, {'end': 855.369, 'text': "We're going to position it absolute.", 'start': 853.047, 'duration': 2.322}, {'end': 863.902, 'text': "And as far as its position, we'll do left 50%, just like the H1.", 'start': 859.48, 'duration': 4.422}], 'summary': 'Styling the h1 and button elements for web layout.', 'duration': 32.051, 'max_score': 831.851, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oRmQN244Ir0/pics/oRmQN244Ir0831851.jpg'}], 'start': 605.99, 'title': 'Css and rem/em units', 'summary': 'Covers setting up css styling variables for colors, widths, and speed, as well as formatting html elements such as html, body, and h1 with specific properties and values. it also explains the concept of rem and em units, where 1rem equals 16 pixels by default, and provides examples of using these units for styling elements like h1 and buttons.', 'chapters': [{'end': 729.766, 'start': 605.99, 'title': 'Css styling variables and html formatting', 'summary': 'Covers setting up css styling variables for colors, widths, and speed, as well as formatting html elements such as html, body, and h1 with specific properties and values.', 'duration': 123.776, 'highlights': ['Setting up CSS styling variables for colors, widths, and speed The chapter discusses defining CSS variables for colors, widths, and speed, providing specific values such as dark gray, lighter dark gray, 75% width, 25% width, and 1000 milliseconds.', 'Formatting HTML elements with specific properties and values The transcript covers formatting HTML and body elements with properties like zero padding and margin, setting font family to Franklin Gothic Medium, width and height of 100%, and preventing horizontal scrolling.']}, {'end': 855.369, 'start': 730.807, 'title': 'Using rem and em units for styling', 'summary': 'Explains the concept of rem and em units, where 1rem equals 16 pixels by default, and provides examples of using these units for styling elements like h1 and buttons.', 'duration': 124.562, 'highlights': ['1rem is equal to 16 pixels by default The chapter explains that 1rem is equivalent to the default 16 pixels, providing a clear understanding of the rem unit.', 'Using transform property for element movement The tutorial demonstrates the use of the transform property to move the H1 element for visual effects, enhancing the understanding of CSS styling.', 'Applying white space property to prevent text wrapping The chapter discusses applying the white space property to ensure the text stays on one line, even when the container size changes, showcasing practical CSS application.']}], 'duration': 249.379, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oRmQN244Ir0/pics/oRmQN244Ir0605990.jpg', 'highlights': ['Setting up CSS styling variables for colors, widths, and speed with specific values like dark gray, lighter dark gray, 75% width, 25% width, and 1000 milliseconds.', 'Formatting HTML and body elements with properties like zero padding and margin, font family set to Franklin Gothic Medium, width and height of 100%, and preventing horizontal scrolling.', '1rem is equivalent to the default 16 pixels, providing a clear understanding of the rem unit.', 'Demonstrating the use of the transform property to move the H1 element for visual effects, enhancing the understanding of CSS styling.', 'Discussing the application of the white space property to ensure the text stays on one line, showcasing practical CSS application.']}, {'end': 1206.722, 'segs': [{'end': 998.871, 'src': 'embed', 'start': 859.48, 'weight': 0, 'content': [{'end': 863.902, 'text': "And as far as its position, we'll do left 50%, just like the H1.", 'start': 859.48, 'duration': 4.422}, {'end': 866.104, 'text': "And then from the top, we're going to do 40%.", 'start': 864.303, 'duration': 1.801}, {'end': 869.525, 'text': 'Okay, the H1 was 20%.', 'start': 866.104, 'duration': 3.421}, {'end': 873.167, 'text': "This one we want below, so we're going 40% from the top.", 'start': 869.525, 'duration': 3.642}, {'end': 882.352, 'text': "So for the height of the actual button, let's do 2.5 rem.", 'start': 874.968, 'duration': 7.384}, {'end': 887.495, 'text': "For the padding, we're going to actually just do padding top.", 'start': 883.653, 'duration': 3.842}, {'end': 891.496, 'text': "And we're going to set that to 1.3 rem.", 'start': 888.775, 'duration': 2.721}, {'end': 898.037, 'text': "And then for the width of the button, I'm going to do 15 rem.", 'start': 892.396, 'duration': 5.641}, {'end': 901.977, 'text': "And then let's align to the center.", 'start': 899.817, 'duration': 2.16}, {'end': 908.079, 'text': "And let's make the color white.", 'start': 901.997, 'duration': 6.082}, {'end': 911.039, 'text': 'And then we want to add a border.', 'start': 909.599, 'duration': 1.44}, {'end': 915.32, 'text': 'So the border will also be white, not 4, F.', 'start': 911.599, 'duration': 3.721}, {'end': 926.152, 'text': "solid, and I'm going to use a rem unit here, so we're going to do 0.2 rem for the width of the border.", 'start': 918.269, 'duration': 7.883}, {'end': 928.373, 'text': 'All right the font size.', 'start': 927.032, 'duration': 1.341}, {'end': 942.818, 'text': "we're going to use 1 rem, so 16 pixels, and let's make the font weight bold and let's make it all uppercase with text transform.", 'start': 928.373, 'duration': 14.445}, {'end': 948.488, 'text': "and let's make sure there's no underline.", 'start': 946.427, 'duration': 2.061}, {'end': 950.628, 'text': "so we'll say text decoration none.", 'start': 948.488, 'duration': 2.14}, {'end': 965.633, 'text': "and we also want to add a transform on this, which will be translate x, just like the h1, and then here we're going to say negative fifty percent.", 'start': 950.628, 'duration': 15.005}, {'end': 969.635, 'text': 'okay, so that should be good, alright.', 'start': 965.633, 'duration': 4.002}, {'end': 977.32, 'text': "so the next thing we're going to do is the button hover.", 'start': 969.635, 'duration': 7.685}, {'end': 986.024, 'text': "So I'm going to do button hover.", 'start': 978.421, 'duration': 7.603}, {'end': 987.684, 'text': "Actually, there shouldn't be a space there.", 'start': 986.164, 'duration': 1.52}, {'end': 992.346, 'text': "So button hover, and I'm going to set the background color.", 'start': 989.345, 'duration': 3.001}, {'end': 996.249, 'text': 'Now, remember, we have a variable for this.', 'start': 994.488, 'duration': 1.761}, {'end': 998.871, 'text': "So this is the first time we're going to use a variable.", 'start': 996.309, 'duration': 2.562}], 'summary': 'Styling instructions for a button: dimensions, padding, color, border, font, and hover effect.', 'duration': 139.391, 'max_score': 859.48, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oRmQN244Ir0/pics/oRmQN244Ir0859480.jpg'}, {'end': 1092.377, 'src': 'heatmap', 'start': 1065.438, 'weight': 0.891, 'content': [{'end': 1069.301, 'text': 'So the container is actually going to be positioned relative.', 'start': 1065.438, 'duration': 3.863}, {'end': 1078.407, 'text': "And I'm not showing you it yet because it's just, it's going to be nothing if we look at it.", 'start': 1069.321, 'duration': 9.086}, {'end': 1082.032, 'text': "You can see there's nothing.", 'start': 1081.212, 'duration': 0.82}, {'end': 1083.713, 'text': 'I mean, the words are there.', 'start': 1082.052, 'duration': 1.661}, {'end': 1085.214, 'text': 'Let me see if I can highlight it.', 'start': 1083.733, 'duration': 1.481}, {'end': 1087.375, 'text': "They're just white.", 'start': 1086.594, 'duration': 0.781}, {'end': 1092.377, 'text': "Yeah, we can't see it yet.", 'start': 1090.836, 'duration': 1.541}], 'summary': 'The container will be positioned relatively and the content is currently not visible.', 'duration': 26.939, 'max_score': 1065.438, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oRmQN244Ir0/pics/oRmQN244Ir01065438.jpg'}, {'end': 1135.804, 'src': 'heatmap', 'start': 1104.402, 'weight': 0.911, 'content': [{'end': 1109.716, 'text': 'And for the background, remember we had a variable for that.', 'start': 1104.402, 'duration': 5.314}, {'end': 1112.837, 'text': "so that'll be container BG color.", 'start': 1109.716, 'duration': 3.121}, {'end': 1121.739, 'text': 'alright. so now, if we look at it now, it should look like this so far, okay.', 'start': 1112.837, 'duration': 8.902}, {'end': 1123.76, 'text': "so let's see, that's it for the container.", 'start': 1121.739, 'duration': 2.021}, {'end': 1127.961, 'text': "now let's do the split class.", 'start': 1123.76, 'duration': 4.201}, {'end': 1135.804, 'text': "so for the split, we're gonna set left to zero, and this is where we're gonna set our.", 'start': 1127.961, 'duration': 7.843}], 'summary': 'Setting container background color and split class left to zero.', 'duration': 31.402, 'max_score': 1104.402, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oRmQN244Ir0/pics/oRmQN244Ir01104402.jpg'}, {'end': 1173.24, 'src': 'embed', 'start': 1138.82, 'weight': 5, 'content': [{'end': 1140.022, 'text': "I'm sorry, not left zero.", 'start': 1138.82, 'duration': 1.202}, {'end': 1141.524, 'text': "This isn't that's not right.", 'start': 1140.062, 'duration': 1.462}, {'end': 1153.592, 'text': 'We want position absolute and the width is going to be 50 for the split.', 'start': 1142.165, 'duration': 11.427}, {'end': 1164.196, 'text': 'okay, remember, the right and the left class elements have the class split on it, so each one will be 50 wide and 100 high,', 'start': 1153.592, 'duration': 10.604}, {'end': 1167.537, 'text': "and then we're just going to set the overflow to hidden.", 'start': 1164.196, 'duration': 3.341}, {'end': 1173.24, 'text': "we don't want any kind of scroll bars or anything like that, so that'll be hidden.", 'start': 1167.537, 'duration': 5.703}], 'summary': 'Set position absolute, width 50, overflow hidden for split elements.', 'duration': 34.42, 'max_score': 1138.82, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oRmQN244Ir0/pics/oRmQN244Ir01138820.jpg'}], 'start': 859.48, 'title': 'Css button styling', 'summary': 'Details css button styling, including setting the height to 2.5 rem, the padding top to 1.3 rem, the width to 15 rem, the border width to 0.2 rem, the font size to 1 rem (16 pixels), the font weight to bold, and text transformation to uppercase. it also covers styling buttons and containers using variables and setting properties such as background color, border color, width, and height.', 'chapters': [{'end': 969.635, 'start': 859.48, 'title': 'Styling button with css', 'summary': 'Details the css styling for a button, specifying dimensions, alignment, color, and other attributes, including setting the height to 2.5 rem, the padding top to 1.3 rem, the width to 15 rem, the border width to 0.2 rem, the font size to 1 rem (16 pixels), the font weight to bold, and the text transformation to uppercase.', 'duration': 110.155, 'highlights': ['The height of the button is set to 2.5 rem, providing specific dimension details.', 'The padding top is specified as 1.3 rem, ensuring a defined padding for the button.', 'The width of the button is set to 15 rem, providing specific dimension details.', 'The border width is set to 0.2 rem, specifying the width of the border.', 'The font size is set to 1 rem (16 pixels), defining the size of the text within the button.', 'The font weight is specified as bold, ensuring a bold style for the text within the button.', 'The text is transformed to uppercase, specifying the text transformation for the button content.', 'The position and alignment details are also provided for the button, ensuring accurate placement and appearance.']}, {'end': 1206.722, 'start': 969.635, 'title': 'Styling buttons and containers in css', 'summary': 'Covers the styling of buttons and containers in css, using variables and setting properties such as background color, border color, width, and height.', 'duration': 237.087, 'highlights': ['Setting button hover properties using variables The chapter explains how to set the background color and border color for button hover using variables, such as left button hover color and right button hover color.', "Styling container with width, height, and background color It covers setting the container's width to 100%, height, and background color using the variable container BG color.", 'Defining styles for split class and split left It explains setting position absolute, width, and overflow properties for the split class and split left, and also setting the background URL for the designer image.']}], 'duration': 347.242, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oRmQN244Ir0/pics/oRmQN244Ir0859480.jpg', 'highlights': ['The height of the button is set to 2.5 rem, providing specific dimension details.', 'The width of the button is set to 15 rem, providing specific dimension details.', 'The padding top is specified as 1.3 rem, ensuring a defined padding for the button.', 'The border width is set to 0.2 rem, specifying the width of the border.', 'The font size is set to 1 rem (16 pixels), defining the size of the text within the button.', 'The font weight is specified as bold, ensuring a bold style for the text within the button.', 'The text is transformed to uppercase, specifying the text transformation for the button content.', 'Setting button hover properties using variables The chapter explains how to set the background color and border color for button hover using variables, such as left button hover color and right button hover color.', "Styling container with width, height, and background color It covers setting the container's width to 100%, height, and background color using the variable container BG color.", 'Defining styles for split class and split left It explains setting position absolute, width, and overflow properties for the split class and split left, and also setting the background URL for the designer image.']}, {'end': 1503.563, 'segs': [{'end': 1401.792, 'src': 'heatmap', 'start': 1288.204, 'weight': 0, 'content': [{'end': 1296.227, 'text': "And we'll set the background to the variable of left BG color.", 'start': 1288.204, 'duration': 8.023}, {'end': 1300.208, 'text': "All right, so that'll be the overlay.", 'start': 1298.208, 'duration': 2}, {'end': 1306.971, 'text': 'So now you can see that the picture is darker because we have the overlay of the red.', 'start': 1302.769, 'duration': 4.202}, {'end': 1309.972, 'text': "All right, so we're getting there.", 'start': 1306.991, 'duration': 2.981}, {'end': 1312.213, 'text': "Now we're going to start to work on the right side.", 'start': 1309.992, 'duration': 2.221}, {'end': 1316.515, 'text': "So let's do split dot right.", 'start': 1313.294, 'duration': 3.221}, {'end': 1320.637, 'text': 'Let me just..', 'start': 1316.535, 'duration': 4.102}, {'end': 1323.312, 'text': 'Move this up for you guys.', 'start': 1322.091, 'duration': 1.221}, {'end': 1327.655, 'text': "All right, so split right, and we're going to set right to zero.", 'start': 1324.233, 'duration': 3.422}, {'end': 1332.819, 'text': "And let's set our background URL here as well.", 'start': 1327.675, 'duration': 5.144}, {'end': 1341.225, 'text': "So we'll say background URL and center, center, no repeat.", 'start': 1332.839, 'duration': 8.386}, {'end': 1349.792, 'text': "And for the URL, it's going to be in our image folder slash programmer dot JPEG.", 'start': 1343.147, 'duration': 6.645}, {'end': 1354.655, 'text': 'All right, and then we just want to do background size.', 'start': 1351.772, 'duration': 2.883}, {'end': 1359.379, 'text': 'And that should be cover.', 'start': 1358.038, 'duration': 1.341}, {'end': 1369.528, 'text': 'OK, now, just like we did with the split left, we need to have split right before for our overlay.', 'start': 1363.362, 'duration': 6.166}, {'end': 1373.972, 'text': 'So split right before.', 'start': 1370.689, 'duration': 3.283}, {'end': 1378.321, 'text': 'and we can actually just copy.', 'start': 1376.64, 'duration': 1.681}, {'end': 1397.608, 'text': "um yeah, we'll grab this and let's set the background color to right bg color, all right.", 'start': 1378.321, 'duration': 19.287}, {'end': 1401.792, 'text': "so let's take a look at that, And there we go.", 'start': 1397.608, 'duration': 4.184}], 'summary': 'Setting background colors and images for left and right side with overlays and url link.', 'duration': 154.357, 'max_score': 1288.204, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oRmQN244Ir0/pics/oRmQN244Ir01288204.jpg'}], 'start': 1208.88, 'title': 'Css image overlay, background setting, and transition effects', 'summary': 'Covers css techniques for adding a color overlay to images, setting background images and splitting them, and adding transition effects to a split level design, including details on specific css properties and javascript interactions.', 'chapters': [{'end': 1309.972, 'start': 1208.88, 'title': 'Css image overlay technique', 'summary': 'Details the process of adding a color overlay to an image using the before pseudo class in css, achieving a darker effect by setting the background to the specified color variable.', 'duration': 101.092, 'highlights': ['The process involves using the before pseudo class in CSS to add a color overlay to an image, with the background set to the specified color variable.', 'The width and height of the color overlay are set to 100%, similar to the split left, resulting in a consistent overlay effect across the image.', 'The addition of the color overlay creates a darker effect on the image, achieving the desired outcome for the webpage design.']}, {'end': 1401.792, 'start': 1309.992, 'title': 'Setting background and splitting right side', 'summary': 'Covers setting the right side background image and splitting it, involving setting the background url, background size, and background color.', 'duration': 91.8, 'highlights': ["Setting the background URL to 'image/programmer.jpeg' and using 'center center no repeat' as the background position.", "Splitting the right side and setting the background color to 'right bg color'.", 'Setting the background size to cover for the right side.', "Initializing the right side with 'split right' and setting it to zero."]}, {'end': 1503.563, 'start': 1401.872, 'title': 'Adding transition effects to split level design', 'summary': 'Discusses adding transition effects to a split level design, including specifying the transition speed and type, and applying hover effects through javascript.', 'duration': 101.691, 'highlights': ["The transition is specified with the speed and type 'ease in out', ensuring a smooth start and end.", "The classes 'hover-left' and 'hover-right' are added and removed on mouse enter and mouse leave events through JavaScript.", 'The split level design is described, and the process of adding transition effects is detailed.']}], 'duration': 294.683, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oRmQN244Ir0/pics/oRmQN244Ir01208880.jpg', 'highlights': ['The process involves using the before pseudo class in CSS to add a color overlay to an image, with the background set to the specified color variable.', "The transition is specified with the speed and type 'ease in out', ensuring a smooth start and end.", 'The width and height of the color overlay are set to 100%, similar to the split left, resulting in a consistent overlay effect across the image.', "The classes 'hover-left' and 'hover-right' are added and removed on mouse enter and mouse leave events through JavaScript.", "Setting the background URL to 'image/programmer.jpeg' and using 'center center no repeat' as the background position.", 'The addition of the color overlay creates a darker effect on the image, achieving the desired outcome for the webpage design.', "Splitting the right side and setting the background color to 'right bg color'.", 'Setting the background size to cover for the right side.', "Initializing the right side with 'split right' and setting it to zero.", 'The split level design is described, and the process of adding transition effects is detailed.']}, {'end': 2052.255, 'segs': [{'end': 1542.249, 'src': 'embed', 'start': 1505.521, 'weight': 3, 'content': [{'end': 1509.945, 'text': "So we want to set the width here, and we're going to use our hover width variable.", 'start': 1505.521, 'duration': 4.424}, {'end': 1529.501, 'text': 'Okay, and then for the right, so hover left and the right, this is where we want to use the other width variable.', 'start': 1509.965, 'duration': 19.536}, {'end': 1542.249, 'text': 'OK, so when we hover over the left, we want the left to be the hover width, which is the larger one, the 75 percent.', 'start': 1534.207, 'duration': 8.042}], 'summary': 'Setting width and hover effect using variables for left and right.', 'duration': 36.728, 'max_score': 1505.521, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oRmQN244Ir0/pics/oRmQN244Ir01505521.jpg'}, {'end': 1833.772, 'src': 'embed', 'start': 1804.807, 'weight': 2, 'content': [{'end': 1812.092, 'text': 'so right here, if I were to get rid of this.', 'start': 1804.807, 'duration': 7.285}, {'end': 1817.595, 'text': "and now that side you can see it fades out, but this side doesn't.", 'start': 1812.092, 'duration': 5.503}, {'end': 1822.699, 'text': "so that's why we need that z-index there, in case you were wondering about that.", 'start': 1817.595, 'duration': 5.104}, {'end': 1824.16, 'text': "but that's pretty much it.", 'start': 1822.699, 'duration': 1.461}, {'end': 1828.463, 'text': 'aside from our media queries, everything else, it looks good.', 'start': 1824.16, 'duration': 4.303}, {'end': 1833.772, 'text': "so let's just add in some very simple media queries for responsiveness.", 'start': 1828.463, 'duration': 5.309}], 'summary': 'Fixing z-index resolves element display issue. adding media queries for responsiveness.', 'duration': 28.965, 'max_score': 1804.807, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oRmQN244Ir0/pics/oRmQN244Ir01804807.jpg'}, {'end': 1905.592, 'src': 'embed', 'start': 1871.353, 'weight': 1, 'content': [{'end': 1872.514, 'text': "I'm going to set it to 12.", 'start': 1871.353, 'duration': 1.161}, {'end': 1880.644, 'text': "All right, and then I'll add one more media query for the minimum height.", 'start': 1872.514, 'duration': 8.13}, {'end': 1894.304, 'text': "so when it's a height of 700 pixels or less, then we're going to take the button and we're going to change the top property,", 'start': 1883.994, 'duration': 10.31}, {'end': 1895.785, 'text': 'which by default i think is 40.', 'start': 1894.304, 'duration': 1.481}, {'end': 1900.229, 'text': "from the top, we're going to set it to 70, which will move it down.", 'start': 1895.785, 'duration': 4.444}, {'end': 1905.592, 'text': "So let's save that and let's go ahead and try it out.", 'start': 1901.13, 'duration': 4.462}], 'summary': 'Adjusting button position for heights under 700 pixels to move it down from 40 to 70.', 'duration': 34.239, 'max_score': 1871.353, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oRmQN244Ir0/pics/oRmQN244Ir01871353.jpg'}, {'end': 2052.255, 'src': 'embed', 'start': 2039.387, 'weight': 0, 'content': [{'end': 2043.029, 'text': 'as well as just a place to discuss new ideas and get feedback.', 'start': 2039.387, 'duration': 3.642}, {'end': 2044.61, 'text': 'I also check in daily.', 'start': 2043.489, 'duration': 1.121}, {'end': 2048.032, 'text': "There's a channel to request videos on YouTube and much more.", 'start': 2044.65, 'duration': 3.382}, {'end': 2052.255, 'text': 'So if you want to check it out, just go to discord.gg slash Traversey Media.', 'start': 2048.072, 'duration': 4.183}], 'summary': 'Discord server for traversey media offers new ideas, feedback, daily check-ins, video requests, and more.', 'duration': 12.868, 'max_score': 2039.387, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oRmQN244Ir0/pics/oRmQN244Ir02039387.jpg'}], 'start': 1505.521, 'title': 'Css hover effect implementation and adding responsive design with media queries', 'summary': 'Discusses css hover effect with adjustments like widths, z index, and troubleshooting, resulting in successful implementation with a minor correction. it also demonstrates adding media queries for max width of 800 pixels, reducing font size to 2 rem, changing button width to 12, and adjusting button position for a minimum height of 700 pixels.', 'chapters': [{'end': 1802.494, 'start': 1505.521, 'title': 'Css hover effect implementation', 'summary': 'Discusses the implementation of a css hover effect, adjusting widths on hover, setting z index, and troubleshooting hover effects and button color, resulting in a successful implementation with a minor spelling correction.', 'duration': 296.973, 'highlights': ['The chapter discusses setting the width and Z index for a CSS hover effect, with the left side set to 75 percent width and the right side set to 25 percent width, resulting in a successful implementation.', "The speaker copies the CSS code for the left side and applies it to the right side, leading to a minor error in the hover behavior, which is later identified as a spelling mistake in 'mouseenter'.", 'The speaker troubleshoots a hover effect on a button, identifying and correcting a spelling mistake in the CSS code, leading to successful implementation.', 'The Z index is set to 2 for both the left and right sides to ensure proper layering and display during the hover effect implementation.']}, {'end': 2052.255, 'start': 1804.807, 'title': 'Adding responsive design with media queries', 'summary': 'Demonstrates adding media queries for a max width of 800 pixels, reducing font size to 2 rem, and changing button width to 12, as well as adjusting button position for a minimum height of 700 pixels.', 'duration': 247.448, 'highlights': ['The chapter demonstrates adding media queries for a max width of 800 pixels, reducing font size to 2 rem, and changing button width to 12, as well as adjusting button position for a minimum height of 700 pixels.', 'The tutorial encourages viewers to use the provided code, modify it, and share their creations in the comments section, fostering a collaborative learning environment.', 'The instructor promotes a new Discord server for programming help, feedback, and idea exchange, with a channel for requesting YouTube videos, aiming to provide a supportive community.']}], 'duration': 546.734, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/oRmQN244Ir0/pics/oRmQN244Ir01505521.jpg', 'highlights': ['The chapter discusses setting the width and Z index for a CSS hover effect, resulting in a successful implementation.', 'The speaker troubleshoots a hover effect on a button, leading to successful implementation after identifying and correcting a spelling mistake in the CSS code.', 'The chapter demonstrates adding media queries for a max width of 800 pixels, reducing font size to 2 rem, and changing button width to 12, as well as adjusting button position for a minimum height of 700 pixels.', 'The tutorial encourages viewers to use the provided code, modify it, and share their creations in the comments section, fostering a collaborative learning environment.']}], 'highlights': ['The split landing page is built using HTML, CSS, and a little bit of JavaScript, providing visitors with the option to choose between design and programming services.', 'The chapter discusses building a split landing page with a responsive design using media queries and CSS variables. It explains the approach to creating a responsive design, mentioning the use of media queries and CSS variables for easy customization.', 'The page features a sleek design with hover effects that extend and push the selected category, making it darker and allowing visitors to navigate to specific parts of the site.', 'Includes information on resources for images and code files. It provides details about obtaining free-to-use images from pexels.com and the creation of HTML, JavaScript, and CSS files for the project.', 'The responsiveness of the page is demonstrated as the button and heading get smaller when the screen size is reduced, offering flexibility for customization.', 'Mentions the option to support the content creator through Patreon. It encourages viewers to support the content creator through Patreon, highlighting the benefits and rewards available.', 'The chapter explains setting up Live Server in VS Code by installing it through the extensions icon and opening it with Live Server, providing a seamless way to view changes in the web page instantly.', 'The process involves using document.querySelector to grab the classes of elements and assigning them to variables for further manipulation.', 'The chapter demonstrates the manual addition of event listeners for mouse enter and leave in JavaScript for adding and removing classes, and the use of CSS variables for styling, including setting the container background color to #333 and creating custom colors with RGBA values.', 'The JavaScript code adds event listeners for mouse enter and leave to add and remove classes, such as hover-left and hover-right, to elements, demonstrating a manual approach to event handling.', 'The CSS code uses custom properties and sets the container background color to hexadecimal #333, the left background color with an RGBA value of (223, 0, 0, 0.7), and the left button hover color with RGBA value (161, 11, 11, 0.3), showcasing the use of CSS variables and custom colors.', 'Setting up CSS styling variables for colors, widths, and speed with specific values like dark gray, lighter dark gray, 75% width, 25% width, and 1000 milliseconds.', 'Formatting HTML and body elements with properties like zero padding and margin, font family set to Franklin Gothic Medium, width and height of 100%, and preventing horizontal scrolling.', '1rem is equivalent to the default 16 pixels, providing a clear understanding of the rem unit.', 'The height of the button is set to 2.5 rem, providing specific dimension details.', 'The width of the button is set to 15 rem, providing specific dimension details.', 'The padding top is specified as 1.3 rem, ensuring a defined padding for the button.', 'The border width is set to 0.2 rem, specifying the width of the border.', 'The font size is set to 1 rem (16 pixels), defining the size of the text within the button.', 'The font weight is specified as bold, ensuring a bold style for the text within the button.', 'The text is transformed to uppercase, specifying the text transformation for the button content.', 'Setting button hover properties using variables The chapter explains how to set the background color and border color for button hover using variables, such as left button hover color and right button hover color.', "Styling container with width, height, and background color It covers setting the container's width to 100%, height, and background color using the variable container BG color.", 'The process involves using the before pseudo class in CSS to add a color overlay to an image, with the background set to the specified color variable.', "The transition is specified with the speed and type 'ease in out', ensuring a smooth start and end.", 'The width and height of the color overlay are set to 100%, similar to the split left, resulting in a consistent overlay effect across the image.', "The classes 'hover-left' and 'hover-right' are added and removed on mouse enter and mouse leave events through JavaScript.", "Setting the background URL to 'image/programmer.jpeg' and using 'center center no repeat' as the background position.", 'The addition of the color overlay creates a darker effect on the image, achieving the desired outcome for the webpage design.', 'The chapter discusses setting the width and Z index for a CSS hover effect, resulting in a successful implementation.', 'The speaker troubleshoots a hover effect on a button, leading to successful implementation after identifying and correcting a spelling mistake in the CSS code.', 'The chapter demonstrates adding media queries for a max width of 800 pixels, reducing font size to 2 rem, and changing button width to 12, as well as adjusting button position for a minimum height of 700 pixels.', 'The tutorial encourages viewers to use the provided code, modify it, and share their creations in the comments section, fostering a collaborative learning environment.']}