title
Creative Agency Website From Scratch | HTML & CSS
description
We will build a responsive website using HTML/CSS and look at things like positioning, flexbox, CSS Grid basics, and media queries
Code & Images:
https://github.com/bradtraversy/creative-agency-website
Latest Udemy Courses:
https://traversymedia.com​​
💖 Support The Channel!
http://www.patreon.com/traversymedia
Timestamps:
0:00 - Intro
2:47 - Homepage HTML
8:52 - Homepage CSS
21:02 - Toggle & Navigation CSS
34:11 - JavaScript Toggle
38:09 - Media Queries
41:00 - Services HTML
46:40 - Services CSS
53:30 - Work HTML
56:30 - Work CSS
1:03:56 - Contact HTML
1:10:49 - Contact CSS
detail
{'title': 'Creative Agency Website From Scratch | HTML & CSS', 'heatmap': [{'end': 577.004, 'start': 466.08, 'weight': 0.895}, {'end': 1311.275, 'start': 1249.39, 'weight': 0.735}, {'end': 1615.885, 'start': 1508.289, 'weight': 1}, {'end': 2039.978, 'start': 1977.366, 'weight': 0.965}, {'end': 2245.345, 'start': 2188.871, 'weight': 0.89}, {'end': 2616.87, 'start': 2450.117, 'weight': 0.909}, {'end': 2716.592, 'start': 2653.11, 'weight': 0.89}, {'end': 3077.919, 'start': 3023.552, 'weight': 0.85}, {'end': 4120.408, 'start': 4058.536, 'weight': 0.743}], 'summary': 'Tutorial covers building a four-page creative agency website using html and css, incorporating css positioning, flexbox, and css grid for different pages, with a responsive design for mobile screens. it also includes styling web design elements, using javascript for toggle functionality, implementing responsive design with media queries, and optimizing for different screen sizes.', 'chapters': [{'end': 235.027, 'segs': [{'end': 71.391, 'src': 'embed', 'start': 7.335, 'weight': 0, 'content': [{'end': 11.498, 'text': "What's going on, guys? So it's been a while since I did an HTML and CSS project.", 'start': 7.335, 'duration': 4.163}, {'end': 15.06, 'text': 'So I put together a four page website to build together.', 'start': 11.538, 'duration': 3.522}, {'end': 19.403, 'text': "And we're going to look at things like CSS positioning, Flexbox.", 'start': 15.28, 'duration': 4.123}, {'end': 21.525, 'text': 'One of the pages is going to use CSS Grid.', 'start': 19.543, 'duration': 1.982}, {'end': 24.627, 'text': "So it's basically a creative agency website.", 'start': 21.965, 'duration': 2.662}, {'end': 25.667, 'text': 'This is the home page.', 'start': 24.647, 'duration': 1.02}, {'end': 28.949, 'text': 'You see we have this image on the side, this text over here.', 'start': 25.827, 'duration': 3.122}, {'end': 35.314, 'text': 'And we have this toggle, this menu toggle, which will toggle a full screen menu with some social media icons.', 'start': 29.29, 'duration': 6.024}, {'end': 39.495, 'text': "We will have a tiny bit of JavaScript just to toggle the menu, but that's it.", 'start': 35.814, 'duration': 3.681}, {'end': 42.276, 'text': 'And then we have a services page.', 'start': 40.096, 'duration': 2.18}, {'end': 44.057, 'text': 'So we have these cards here.', 'start': 42.797, 'duration': 1.26}, {'end': 49.899, 'text': "We're going to use CSS Grid to line this up and we have a work page with these portfolio items.", 'start': 44.077, 'duration': 5.822}, {'end': 54.221, 'text': "We're going to use Flexbox here and we have these this nice little hover effect.", 'start': 50.039, 'duration': 4.182}, {'end': 60.203, 'text': 'And then on the contact page, we have a form and we have some address info and stuff.', 'start': 54.821, 'duration': 5.382}, {'end': 62.188, 'text': 'So this is responsive.', 'start': 60.908, 'duration': 1.28}, {'end': 66.889, 'text': "You'll see if I make this smaller, once it gets to a certain point, the image will just go away.", 'start': 62.428, 'duration': 4.461}, {'end': 68.85, 'text': "So on mobile screens, it'll look like this.", 'start': 67.01, 'duration': 1.84}, {'end': 71.391, 'text': "It's a little plain, but I think it looks pretty clean.", 'start': 69.25, 'duration': 2.141}], 'summary': 'Built a 4-page website using html, css, with css grid, flexbox, and responsive design.', 'duration': 64.056, 'max_score': 7.335, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY7335.jpg'}, {'end': 160.764, 'src': 'embed', 'start': 136.609, 'weight': 4, 'content': [{'end': 143.854, 'text': "We will have other index, sorry, other HTML pages later for our inner pages, but we'll create them when we need to.", 'start': 136.609, 'duration': 7.245}, {'end': 151.839, 'text': 'And then I have a CSS folder with a style dot CSS, which is empty, and then a JS folder with a script JS, which is empty.', 'start': 144.314, 'duration': 7.525}, {'end': 159.884, 'text': "And really the only JavaScript that we're going to need is to toggle this button here to toggle the class so that we can show the navigation.", 'start': 152.279, 'duration': 7.605}, {'end': 160.764, 'text': 'All right.', 'start': 160.504, 'duration': 0.26}], 'summary': 'Creating html, css, and js folders for future use', 'duration': 24.155, 'max_score': 136.609, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY136609.jpg'}, {'end': 235.027, 'src': 'embed', 'start': 183.127, 'weight': 5, 'content': [{'end': 190.254, 'text': "agency and let's add our link to our style sheet, which is in the CSS folder slash style dot CSS.", 'start': 183.127, 'duration': 7.127}, {'end': 199.242, 'text': "And while we're at it, we'll add the script tag down here with a source attribute to it's in the JS folder and then script JS.", 'start': 191.195, 'duration': 8.047}, {'end': 203.827, 'text': "And then for now, I'm just going to put an H1 here and just say hello and save.", 'start': 199.763, 'duration': 4.064}, {'end': 212.027, 'text': 'And I have my my prettier extension set up to basically format my code when I save.', 'start': 204.42, 'duration': 7.607}, {'end': 217.232, 'text': "So if I have something way over here and I save, it's going to automatically fix that.", 'start': 212.087, 'duration': 5.145}, {'end': 220.355, 'text': 'And you can you can set that in your VS code settings.', 'start': 217.673, 'duration': 2.682}, {'end': 228.462, 'text': "So you can open this just right on your file system or you can use an extension which I'm using called live server.", 'start': 221.136, 'duration': 7.326}, {'end': 235.027, 'text': "So if you install that, you'll then be able to just say open with live server and it should open in a new tab.", 'start': 228.822, 'duration': 6.205}], 'summary': 'Setting up web page with css, js, and live server for automatic code formatting and easy preview.', 'duration': 51.9, 'max_score': 183.127, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY183127.jpg'}], 'start': 7.335, 'title': 'Building a creative agency website and css basics', 'summary': 'Covers building a four-page website using html and css, incorporating css positioning, flexbox, and css grid for different pages, with a responsive design for mobile screens. it also demonstrates setting up a web project with html, css, and javascript files, file structure guidance, and utilizing flexbox and css grid for positioning.', 'chapters': [{'end': 90.398, 'start': 7.335, 'title': 'Building a creative agency website', 'summary': 'Covers building a four-page website using html and css, incorporating css positioning, flexbox, and css grid for different pages, along with a responsive design for mobile screens.', 'duration': 83.063, 'highlights': ['The website project involves creating a four-page website using HTML and CSS, focusing on CSS positioning, Flexbox, and CSS Grid for different pages.', 'The responsive design of the website ensures adaptability for mobile screens, with specific elements disappearing at certain breakpoints for a clean look.', 'The chapter emphasizes the use of CSS Grid for the services page and Flexbox for the work page, showcasing specific layout and design implementations.', 'A menu toggle feature with social media icons is incorporated, along with a form and address info on the contact page, adding interactive elements to the website.', 'The speaker encourages the audience to follow along with the project as the best way to learn and suggests the use of a tiny bit of JavaScript for toggling the menu.']}, {'end': 235.027, 'start': 90.418, 'title': 'Css basics and project setup', 'summary': 'Covers setting up a web project with html, css, and javascript files and demonstrates the use of visual studio code for coding and live server extension for easy viewing, providing guidance on file structure, linking style sheets and scripts, and utilizing flexbox and css grid for positioning.', 'duration': 144.609, 'highlights': ['The chapter covers setting up a web project with HTML, CSS, and JavaScript files HTML, CSS, JavaScript files', 'Demonstrates the use of Visual Studio Code for coding and live server extension for easy viewing Visual Studio Code, live server extension', 'Provides guidance on file structure, linking style sheets and scripts file structure, linking style sheets, scripts', 'Utilizes Flexbox and CSS Grid for positioning Flexbox, CSS Grid']}], 'duration': 227.692, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY7335.jpg', 'highlights': ['The website project involves creating a four-page website using HTML and CSS, focusing on CSS positioning, Flexbox, and CSS Grid for different pages.', 'The responsive design of the website ensures adaptability for mobile screens, with specific elements disappearing at certain breakpoints for a clean look.', 'The chapter emphasizes the use of CSS Grid for the services page and Flexbox for the work page, showcasing specific layout and design implementations.', 'A menu toggle feature with social media icons is incorporated, along with a form and address info on the contact page, adding interactive elements to the website.', 'The chapter covers setting up a web project with HTML, CSS, and JavaScript files HTML, CSS, JavaScript files', 'Demonstrates the use of Visual Studio Code for coding and live server extension for easy viewing Visual Studio Code, live server extension', 'Provides guidance on file structure, linking style sheets and scripts file structure, linking style sheets, scripts', 'Utilizes Flexbox and CSS Grid for positioning Flexbox, CSS Grid']}, {'end': 977.123, 'segs': [{'end': 287.172, 'src': 'embed', 'start': 256.817, 'weight': 0, 'content': [{'end': 263.162, 'text': "All it's really going to have is the logo, which we're just going to have some text and then our toggle button with the navigation.", 'start': 256.817, 'duration': 6.345}, {'end': 266.924, 'text': "So let's go ahead and add a logo here.", 'start': 263.762, 'duration': 3.162}, {'end': 271.067, 'text': "So just a div with a class of logo and we'll say creative agency.", 'start': 266.984, 'duration': 4.083}, {'end': 275.19, 'text': 'And you can put an image in here if you want and then a class of toggle.', 'start': 271.247, 'duration': 3.943}, {'end': 276.771, 'text': 'So div with a class of toggle.', 'start': 275.47, 'duration': 1.301}, {'end': 278.453, 'text': "That's going to represent our icon.", 'start': 276.791, 'duration': 1.662}, {'end': 287.172, 'text': "our toggle icon and then we'll have our navigation, which is going to be everything that displays when we click this.", 'start': 279.344, 'duration': 7.828}], 'summary': 'Transcript describes adding a logo, toggle button, and navigation to a web page.', 'duration': 30.355, 'max_score': 256.817, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY256817.jpg'}, {'end': 465.76, 'src': 'embed', 'start': 441.018, 'weight': 1, 'content': [{'end': 446.941, 'text': 'slash email dot PNG and you should see this this at sign now.', 'start': 441.018, 'duration': 5.923}, {'end': 448.181, 'text': 'All right.', 'start': 447.881, 'duration': 0.3}, {'end': 450.322, 'text': "So that's pretty much it for the header.", 'start': 448.221, 'duration': 2.101}, {'end': 452.223, 'text': 'Now in the section here.', 'start': 450.862, 'duration': 1.361}, {'end': 459.156, 'text': "We're going to have basically the big home image, which is going to go on the right.", 'start': 454.053, 'duration': 5.103}, {'end': 463.598, 'text': "We're going to position an absolute and then we have our text, our heading and paragraph.", 'start': 459.196, 'duration': 4.402}, {'end': 465.76, 'text': "So let's add the image.", 'start': 463.718, 'duration': 2.042}], 'summary': 'Adding a big home image to the section on the right.', 'duration': 24.742, 'max_score': 441.018, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY441018.jpg'}, {'end': 577.004, 'src': 'heatmap', 'start': 466.08, 'weight': 0.895, 'content': [{'end': 472.603, 'text': "So that's going to be images slash home slash or home dash image.", 'start': 466.08, 'duration': 6.523}, {'end': 476.906, 'text': "And I'm going to give it a class of home dash image.", 'start': 473.064, 'duration': 3.842}, {'end': 482.042, 'text': "And then underneath that, let's have a div call it home content.", 'start': 477.697, 'duration': 4.345}, {'end': 484.925, 'text': "And in here we'll have an H1.", 'start': 483.043, 'duration': 1.882}, {'end': 489.31, 'text': "We're going to say we help to achieve.", 'start': 484.965, 'duration': 4.345}, {'end': 495.357, 'text': "And then I'm just going to put a line break here just to put the rest of this on a new line and say your goals.", 'start': 490.231, 'duration': 5.126}, {'end': 497.994, 'text': 'And then a paragraph.', 'start': 496.914, 'duration': 1.08}, {'end': 499.855, 'text': 'I want some dummy text in here.', 'start': 498.375, 'duration': 1.48}, {'end': 501.836, 'text': "So I'll use Emmett and just do lorem.", 'start': 499.915, 'duration': 1.921}, {'end': 503.556, 'text': "Let's try 40.", 'start': 501.856, 'duration': 1.7}, {'end': 505.977, 'text': "That'll give us 40 dummy text words.", 'start': 503.556, 'duration': 2.421}, {'end': 509.558, 'text': "And then under the paragraph, we'll have an a tag.", 'start': 506.797, 'duration': 2.761}, {'end': 511.039, 'text': "I'm going to give it a class of button.", 'start': 509.578, 'duration': 1.461}, {'end': 514.419, 'text': 'And this is going to go to contact dot HTML.', 'start': 511.719, 'duration': 2.7}, {'end': 520.562, 'text': "And yeah, let's just say get started.", 'start': 515.539, 'duration': 5.023}, {'end': 522.982, 'text': 'All right.', 'start': 520.582, 'duration': 2.4}, {'end': 526.832, 'text': 'So that should do it for at least the markup.', 'start': 524.071, 'duration': 2.761}, {'end': 529.154, 'text': 'Now we have to start on our CSS.', 'start': 527.073, 'duration': 2.081}, {'end': 534.757, 'text': "So let's go to CSS and open up our style sheet.", 'start': 529.914, 'duration': 4.843}, {'end': 540.199, 'text': "And the first thing I want to do is bring my font in that I'm going to use.", 'start': 536.177, 'duration': 4.022}, {'end': 542.56, 'text': "So I'm just going to grab it and paste it in.", 'start': 540.359, 'duration': 2.201}, {'end': 545.302, 'text': "So I'm importing the Poppins font from Google fonts.", 'start': 542.601, 'duration': 2.701}, {'end': 551.385, 'text': 'So you can just copy this or you can go to fonts dot Google dot com search for Poppins and just get the import.', 'start': 545.782, 'duration': 5.603}, {'end': 552.57, 'text': 'All right.', 'start': 552.25, 'duration': 0.32}, {'end': 553.631, 'text': "So we're going to add that.", 'start': 552.63, 'duration': 1.001}, {'end': 555.512, 'text': "Then let's add a reset.", 'start': 553.751, 'duration': 1.761}, {'end': 558.494, 'text': "So I'm going to use the universal selector, which is an asterisk.", 'start': 555.692, 'duration': 2.802}, {'end': 562.436, 'text': 'And I just want to remove all the margin and padding from everything.', 'start': 559.174, 'duration': 3.262}, {'end': 565.237, 'text': 'So if we say margin zero, padding zero.', 'start': 563.056, 'duration': 2.181}, {'end': 567.098, 'text': 'Now you can see all the space is gone.', 'start': 565.397, 'duration': 1.701}, {'end': 570.8, 'text': 'And I also want to add a box sizing property.', 'start': 567.839, 'duration': 2.961}, {'end': 577.004, 'text': "set that to border box so that, no, so the padding doesn't affect the width of any elements or anything like that.", 'start': 570.8, 'duration': 6.204}], 'summary': 'Creating markup and css for a webpage with specific elements and styles.', 'duration': 110.924, 'max_score': 466.08, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY466080.jpg'}, {'end': 810.072, 'src': 'embed', 'start': 777.244, 'weight': 3, 'content': [{'end': 779.046, 'text': 'So I want to actually.', 'start': 777.244, 'duration': 1.802}, {'end': 783.4, 'text': 'position the image to be absolute.', 'start': 781.138, 'duration': 2.262}, {'end': 788.063, 'text': 'So I want it to be over here on the right, kind of plastered to the side.', 'start': 783.62, 'duration': 4.443}, {'end': 790.105, 'text': 'I want it to stretch from the top to bottom.', 'start': 788.083, 'duration': 2.022}, {'end': 791.566, 'text': "So let's do that.", 'start': 790.585, 'duration': 0.981}, {'end': 801.293, 'text': "Let's add let's say home what I call it home image and let's position that to be absolute.", 'start': 791.626, 'duration': 9.667}, {'end': 810.072, 'text': "And without adding any other positioning parameters, it's going to take this the space up here.", 'start': 803.707, 'duration': 6.365}], 'summary': 'Positioned absolute image to right, stretched top to bottom.', 'duration': 32.828, 'max_score': 777.244, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY777244.jpg'}, {'end': 899.379, 'src': 'embed', 'start': 866.718, 'weight': 2, 'content': [{'end': 873.583, 'text': "Now this each section I'm actually going to display as a flex box so we can easily align things.", 'start': 866.718, 'duration': 6.865}, {'end': 875.665, 'text': "So let's add.", 'start': 874.284, 'duration': 1.381}, {'end': 884.771, 'text': "Let's see, we'll go right above the logo because I'm going to style the section directly and let's display as a flex box.", 'start': 875.685, 'duration': 9.086}, {'end': 894.338, 'text': 'And then to align this in the middle vertically, we have to first add a height onto the Flexbox.', 'start': 885.737, 'duration': 8.601}, {'end': 899.379, 'text': "So let's set the height to 100 VH, which is 100 viewport heights.", 'start': 895.019, 'duration': 4.36}], 'summary': 'Using flexbox to align items vertically with a height of 100 viewport heights.', 'duration': 32.661, 'max_score': 866.718, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY866718.jpg'}, {'end': 961.155, 'src': 'embed', 'start': 932.172, 'weight': 4, 'content': [{'end': 934.774, 'text': 'So remember, that has a class of home content.', 'start': 932.172, 'duration': 2.602}, {'end': 937.256, 'text': "So let's go right here and say home content.", 'start': 934.794, 'duration': 2.462}, {'end': 942.328, 'text': "and say Z index, set that to 10, and now it's over the image.", 'start': 938.186, 'duration': 4.142}, {'end': 946.349, 'text': "I'm also going to set a max width because I don't want it to go that far over.", 'start': 942.748, 'duration': 3.601}, {'end': 948.07, 'text': "Let's set it to 600 pixels.", 'start': 946.369, 'duration': 1.701}, {'end': 953.432, 'text': 'OK, now, if you start to bring this smaller it.', 'start': 950.191, 'duration': 3.241}, {'end': 961.155, 'text': 'actually this image is good because you can actually bring it in and it looks seamless, like this right here until you start to hit the plant.', 'start': 953.432, 'duration': 7.723}], 'summary': 'Styling the home content with z-index 10 and max width of 600 pixels.', 'duration': 28.983, 'max_score': 932.172, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY932172.jpg'}], 'start': 235.908, 'title': 'Web design styling', 'summary': 'Covers creating a web header with logo, toggle button, and navigation links using css, and styling web design layout with a focus on flexbox, z index, and responsive design.', 'chapters': [{'end': 748.505, 'start': 235.908, 'title': 'Web design header and navigation', 'summary': 'Discusses creating a website header with a logo, toggle button, and navigation links, as well as styling the header with css, featuring details on positioning, font selection, and visibility settings.', 'duration': 512.597, 'highlights': ["The chapter discusses creating a website header with a logo, toggle button, and navigation links. It explains the structure of the header, including the logo, toggle button, and navigation links, providing a comprehensive overview of the website's header design.", 'The chapter provides details on styling the header with CSS, featuring information on positioning, font selection, and visibility settings. It covers CSS styling for the header, including absolute positioning, font selection, adjusting font weight, setting the Z-index, and controlling visibility with display settings.']}, {'end': 977.123, 'start': 748.505, 'title': 'Web design layout styling', 'summary': 'Focuses on styling a web design layout using css, including positioning elements, aligning content, and adapting to different viewport heights, with a key emphasis on implementing flexbox and z index properties.', 'duration': 228.618, 'highlights': ['Implementing flexbox to align content vertically and adding padding to the section By using flexbox and setting a height of 100 viewport heights, the text is aligned in the middle, and adding padding of 100 pixels enhances the layout.', 'Positioning the image using absolute positioning and adapting its height to 110 percent of the viewport The image is positioned using absolute positioning, stretching from top to bottom, with its height adapting to 110 percent of the viewport height.', 'Setting Z index and max width for the content to control its placement and size By setting a higher Z index for the content and limiting its max width to 600 pixels, the content is placed over the image and its size is constrained.']}], 'duration': 741.215, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY235908.jpg', 'highlights': ["The chapter discusses creating a website header with a logo, toggle button, and navigation links. It explains the structure of the header, including the logo, toggle button, and navigation links, providing a comprehensive overview of the website's header design.", 'The chapter provides details on styling the header with CSS, featuring information on positioning, font selection, and visibility settings. It covers CSS styling for the header, including absolute positioning, font selection, adjusting font weight, setting the Z-index, and controlling visibility with display settings.', 'Implementing flexbox to align content vertically and adding padding to the section By using flexbox and setting a height of 100 viewport heights, the text is aligned in the middle, and adding padding of 100 pixels enhances the layout.', 'Positioning the image using absolute positioning and adapting its height to 110 percent of the viewport The image is positioned using absolute positioning, stretching from top to bottom, with its height adapting to 110 percent of the viewport height.', 'Setting Z index and max width for the content to control its placement and size By setting a higher Z index for the content and limiting its max width to 600 pixels, the content is placed over the image and its size is constrained.']}, {'end': 1508.189, 'segs': [{'end': 1081.806, 'src': 'embed', 'start': 1056.038, 'weight': 1, 'content': [{'end': 1063.202, 'text': 'So a rem unit is basically a multiplier of whatever the font size of this of the root HTML element.', 'start': 1056.038, 'duration': 7.164}, {'end': 1071.664, 'text': "So by default, if we don't, if we don't, you know, explicitly define a font size for this HTML element, it's 16 pixels.", 'start': 1063.742, 'duration': 7.922}, {'end': 1075.945, 'text': "And that's what one REM is going to be because it's 16 times one.", 'start': 1072.144, 'duration': 3.801}, {'end': 1080.246, 'text': 'If I were to change this to two REM, it would be huge.', 'start': 1076.445, 'duration': 3.801}, {'end': 1081.806, 'text': "It's going to be 32 pixels.", 'start': 1080.306, 'duration': 1.5}], 'summary': '1 rem = 16 pixels; 2 rem = 32 pixels.', 'duration': 25.768, 'max_score': 1056.038, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY1056038.jpg'}, {'end': 1311.275, 'src': 'heatmap', 'start': 1249.39, 'weight': 0.735, 'content': [{'end': 1255.616, 'text': "I'm going to add a transform scale and one is the default.", 'start': 1249.39, 'duration': 6.226}, {'end': 1258.638, 'text': "So I'm just going to scale it down to point nine eight on hover.", 'start': 1255.636, 'duration': 3.002}, {'end': 1261.381, 'text': 'So you just have that little effect when you hover over it.', 'start': 1258.658, 'duration': 2.723}, {'end': 1265.793, 'text': "Now, let's start to do the the toggle button.", 'start': 1262.671, 'duration': 3.122}, {'end': 1268.956, 'text': 'OK, so we want to create this this red toggle button here.', 'start': 1266.174, 'duration': 2.782}, {'end': 1274.56, 'text': "And remember, it's just an empty class or I should say an empty div with a class of toggle.", 'start': 1269.416, 'duration': 5.144}, {'end': 1278.943, 'text': "So let's put this we'll go right underneath the logo.", 'start': 1275.06, 'duration': 3.883}, {'end': 1284.687, 'text': 'And we could actually just put some comments in here just to make this a little easier.', 'start': 1280.884, 'duration': 3.803}, {'end': 1286.208, 'text': 'So home.', 'start': 1284.707, 'duration': 1.501}, {'end': 1289.711, 'text': 'I will just say home page.', 'start': 1288.39, 'duration': 1.321}, {'end': 1293.148, 'text': 'What else we got here? Button.', 'start': 1291.667, 'duration': 1.481}, {'end': 1297.589, 'text': "And we'll say.", 'start': 1296.809, 'duration': 0.78}, {'end': 1301.571, 'text': 'Base styles.', 'start': 1300.711, 'duration': 0.86}, {'end': 1307.754, 'text': 'OK, so we got our button, we got our home page, this will be our navigation.', 'start': 1303.112, 'duration': 4.642}, {'end': 1311.275, 'text': "Actually, the navigation I'm probably going to.", 'start': 1309.575, 'duration': 1.7}], 'summary': 'Adding transform scale effect to button & creating red toggle button with class of toggle.', 'duration': 61.885, 'max_score': 1249.39, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY1249390.jpg'}, {'end': 1284.687, 'src': 'embed', 'start': 1255.636, 'weight': 2, 'content': [{'end': 1258.638, 'text': "So I'm just going to scale it down to point nine eight on hover.", 'start': 1255.636, 'duration': 3.002}, {'end': 1261.381, 'text': 'So you just have that little effect when you hover over it.', 'start': 1258.658, 'duration': 2.723}, {'end': 1265.793, 'text': "Now, let's start to do the the toggle button.", 'start': 1262.671, 'duration': 3.122}, {'end': 1268.956, 'text': 'OK, so we want to create this this red toggle button here.', 'start': 1266.174, 'duration': 2.782}, {'end': 1274.56, 'text': "And remember, it's just an empty class or I should say an empty div with a class of toggle.", 'start': 1269.416, 'duration': 5.144}, {'end': 1278.943, 'text': "So let's put this we'll go right underneath the logo.", 'start': 1275.06, 'duration': 3.883}, {'end': 1284.687, 'text': 'And we could actually just put some comments in here just to make this a little easier.', 'start': 1280.884, 'duration': 3.803}], 'summary': 'Scaling down to 0.98 on hover, creating a red toggle button using an empty div with a class of toggle.', 'duration': 29.051, 'max_score': 1255.636, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY1255636.jpg'}, {'end': 1461.357, 'src': 'embed', 'start': 1430.13, 'weight': 0, 'content': [{'end': 1432.15, 'text': 'So when we hover over it, we have our cursor.', 'start': 1430.13, 'duration': 2.02}, {'end': 1436.872, 'text': "So let's see.", 'start': 1434.591, 'duration': 2.281}, {'end': 1443.552, 'text': 'Since we reuse this color, this red for the button, for this and this,', 'start': 1439.071, 'duration': 4.481}, {'end': 1447.513, 'text': "I think maybe we should put that into a variable or what's known as a custom property.", 'start': 1443.552, 'duration': 3.961}, {'end': 1452.355, 'text': 'So in CSS, you can now have custom properties which are basically variables.', 'start': 1447.613, 'duration': 4.742}, {'end': 1457.556, 'text': "So what we'll do is go up here and it needs to be on some kind of scope.", 'start': 1453.415, 'duration': 4.141}, {'end': 1461.357, 'text': "So we're going to put it on the root scope, meaning we can use this anywhere.", 'start': 1457.636, 'duration': 3.721}], 'summary': 'Using css custom properties to reuse color variable globally.', 'duration': 31.227, 'max_score': 1430.13, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY1430130.jpg'}], 'start': 977.143, 'title': 'Styling html elements', 'summary': 'Covers the styling of html elements including font size, margin, rem units, button formatting, toggle button creation, and the use of custom properties in css.', 'chapters': [{'end': 1508.189, 'start': 977.143, 'title': 'Styling html elements', 'summary': 'Covers the styling of html elements including font size, margin, rem units, button formatting, toggle button creation, and the use of custom properties in css.', 'duration': 531.046, 'highlights': ['The chapter covers the styling of HTML elements including font size, margin, rem units, button formatting, toggle button creation, and the use of custom properties in CSS. The chapter explains the styling of HTML elements with specific emphasis on font size, margin, rem units, button formatting, toggle button creation, and the use of custom properties in CSS.', "Explains the concept of rem units in relation to the root HTML element's font size and provides examples of its practical application. Detailed explanation about rem units and its relationship to the root HTML element's font size, including practical examples for better understanding.", 'Demonstrates the creation of a toggle button using CSS properties like positioning, background image, Z index, and cursor. Detailed demonstration of creating a toggle button using CSS properties such as positioning, background image, Z index, and cursor for interactivity.', 'Introduces the use of custom properties (variables) in CSS for defining and reusing color values throughout the stylesheet. Introduction to the use of custom properties as variables in CSS for defining and reusing color values across the stylesheet for easy theming.']}], 'duration': 531.046, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY977143.jpg', 'highlights': ['Covers the styling of HTML elements including font size, margin, rem units, button formatting, toggle button creation, and the use of custom properties in CSS.', "Explains the concept of rem units in relation to the root HTML element's font size and provides examples of its practical application.", 'Demonstrates the creation of a toggle button using CSS properties like positioning, background image, Z index, and cursor.', 'Introduces the use of custom properties (variables) in CSS for defining and reusing color values throughout the stylesheet.']}, {'end': 2229.16, 'segs': [{'end': 1562.559, 'src': 'embed', 'start': 1508.289, 'weight': 3, 'content': [{'end': 1511.791, 'text': "Now it's going to change in that air in that spot in that spot.", 'start': 1508.289, 'duration': 3.502}, {'end': 1513.813, 'text': 'All right.', 'start': 1513.493, 'duration': 0.32}, {'end': 1515.795, 'text': "Let's actually take the border.", 'start': 1514.594, 'duration': 1.201}, {'end': 1517.456, 'text': "See how there's a border on that button.", 'start': 1515.815, 'duration': 1.641}, {'end': 1518.597, 'text': 'I want to take that off.', 'start': 1517.496, 'duration': 1.101}, {'end': 1520.199, 'text': "Let's put that color back.", 'start': 1518.938, 'duration': 1.261}, {'end': 1525.243, 'text': "Yes, I'll say border zero.", 'start': 1522.14, 'duration': 3.103}, {'end': 1527.625, 'text': 'All right.', 'start': 1527.285, 'duration': 0.34}, {'end': 1530.367, 'text': 'So we have the close now.', 'start': 1528.386, 'duration': 1.981}, {'end': 1536.873, 'text': "I do want to make it so that when we click it, we're going to be adding our JavaScript soon.", 'start': 1530.387, 'duration': 6.486}, {'end': 1540.336, 'text': "When we click it, it's going to add the class of active.", 'start': 1536.893, 'duration': 3.443}, {'end': 1543.695, 'text': "onto it's going to add it onto the navigation.", 'start': 1541.315, 'duration': 2.38}, {'end': 1547.956, 'text': "It's also going to add it onto this the toggle itself.", 'start': 1544.256, 'duration': 3.7}, {'end': 1553.017, 'text': "So let's go ahead and say toggle dot active.", 'start': 1548.936, 'duration': 4.081}, {'end': 1562.559, 'text': "And just for right now, I'm going to go ahead and just manually add on the class of active like that just so we can kind of see what we're doing.", 'start': 1553.717, 'duration': 8.842}], 'summary': "Modifying button border and adding class 'active' on click.", 'duration': 54.27, 'max_score': 1508.289, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY1508289.jpg'}, {'end': 1615.885, 'src': 'heatmap', 'start': 1508.289, 'weight': 1, 'content': [{'end': 1511.791, 'text': "Now it's going to change in that air in that spot in that spot.", 'start': 1508.289, 'duration': 3.502}, {'end': 1513.813, 'text': 'All right.', 'start': 1513.493, 'duration': 0.32}, {'end': 1515.795, 'text': "Let's actually take the border.", 'start': 1514.594, 'duration': 1.201}, {'end': 1517.456, 'text': "See how there's a border on that button.", 'start': 1515.815, 'duration': 1.641}, {'end': 1518.597, 'text': 'I want to take that off.', 'start': 1517.496, 'duration': 1.101}, {'end': 1520.199, 'text': "Let's put that color back.", 'start': 1518.938, 'duration': 1.261}, {'end': 1525.243, 'text': "Yes, I'll say border zero.", 'start': 1522.14, 'duration': 3.103}, {'end': 1527.625, 'text': 'All right.', 'start': 1527.285, 'duration': 0.34}, {'end': 1530.367, 'text': 'So we have the close now.', 'start': 1528.386, 'duration': 1.981}, {'end': 1536.873, 'text': "I do want to make it so that when we click it, we're going to be adding our JavaScript soon.", 'start': 1530.387, 'duration': 6.486}, {'end': 1540.336, 'text': "When we click it, it's going to add the class of active.", 'start': 1536.893, 'duration': 3.443}, {'end': 1543.695, 'text': "onto it's going to add it onto the navigation.", 'start': 1541.315, 'duration': 2.38}, {'end': 1547.956, 'text': "It's also going to add it onto this the toggle itself.", 'start': 1544.256, 'duration': 3.7}, {'end': 1553.017, 'text': "So let's go ahead and say toggle dot active.", 'start': 1548.936, 'duration': 4.081}, {'end': 1562.559, 'text': "And just for right now, I'm going to go ahead and just manually add on the class of active like that just so we can kind of see what we're doing.", 'start': 1553.717, 'duration': 8.842}, {'end': 1564.999, 'text': "And we're going to change the image from the menu.", 'start': 1562.639, 'duration': 2.36}, {'end': 1570.1, 'text': "So I'm going to just grab this background right here and paste that in here.", 'start': 1565.159, 'duration': 4.941}, {'end': 1576.528, 'text': 'and change it from menu to close, which is an X.', 'start': 1571.707, 'duration': 4.821}, {'end': 1581.869, 'text': "OK And we definitely don't want it to repeat.", 'start': 1576.528, 'duration': 5.341}, {'end': 1583.87, 'text': "So let's actually just copy.", 'start': 1582.009, 'duration': 1.861}, {'end': 1591.951, 'text': "Let's copy all of this and let's actually change it from 30 to 25.", 'start': 1584.95, 'duration': 7.001}, {'end': 1593.972, 'text': "So it'll be a little smaller like that.", 'start': 1591.951, 'duration': 2.021}, {'end': 1598.473, 'text': 'And you can use pure CSS for like the lines and stuff.', 'start': 1595.168, 'duration': 3.305}, {'end': 1603.56, 'text': "You don't have to use an image, but I didn't want to, you know, complicate things even more.", 'start': 1598.753, 'duration': 4.807}, {'end': 1605.182, 'text': "So I think that's fine.", 'start': 1604.081, 'duration': 1.101}, {'end': 1607.826, 'text': "If that's active, it'll have an X.", 'start': 1605.442, 'duration': 2.384}, {'end': 1609.067, 'text': 'Now for the navigation.', 'start': 1607.826, 'duration': 1.241}, {'end': 1613.282, 'text': "Let's go ahead and remove the display none.", 'start': 1610.799, 'duration': 2.483}, {'end': 1614.644, 'text': "That's not how we're going to do this.", 'start': 1613.322, 'duration': 1.322}, {'end': 1615.885, 'text': "We're not using display none.", 'start': 1614.704, 'duration': 1.181}], 'summary': 'Using css to add and remove active class for navigation toggle and button border styling.', 'duration': 107.596, 'max_score': 1508.289, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY1508289.jpg'}, {'end': 1628.701, 'src': 'embed', 'start': 1595.168, 'weight': 2, 'content': [{'end': 1598.473, 'text': 'And you can use pure CSS for like the lines and stuff.', 'start': 1595.168, 'duration': 3.305}, {'end': 1603.56, 'text': "You don't have to use an image, but I didn't want to, you know, complicate things even more.", 'start': 1598.753, 'duration': 4.807}, {'end': 1605.182, 'text': "So I think that's fine.", 'start': 1604.081, 'duration': 1.101}, {'end': 1607.826, 'text': "If that's active, it'll have an X.", 'start': 1605.442, 'duration': 2.384}, {'end': 1609.067, 'text': 'Now for the navigation.', 'start': 1607.826, 'duration': 1.241}, {'end': 1613.282, 'text': "Let's go ahead and remove the display none.", 'start': 1610.799, 'duration': 2.483}, {'end': 1614.644, 'text': "That's not how we're going to do this.", 'start': 1613.322, 'duration': 1.322}, {'end': 1615.885, 'text': "We're not using display none.", 'start': 1614.704, 'duration': 1.181}, {'end': 1620.311, 'text': "We're basically going to position it off screen if it's not active.", 'start': 1615.905, 'duration': 4.406}, {'end': 1628.701, 'text': "OK so it's going to have a fixed position and what I'm talking about now at navigation is this whole area.", 'start': 1620.952, 'duration': 7.749}], 'summary': 'Using pure css for lines, not complicating with images. implementing fixed position for navigation.', 'duration': 33.533, 'max_score': 1595.168, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY1595168.jpg'}, {'end': 1733.353, 'src': 'embed', 'start': 1697.505, 'weight': 1, 'content': [{'end': 1699.447, 'text': 'So we wanted to take up the entire screen.', 'start': 1697.505, 'duration': 1.942}, {'end': 1703.369, 'text': 'So a width and the height of 100 percent.', 'start': 1699.507, 'duration': 3.862}, {'end': 1706.011, 'text': "And let's set the background.", 'start': 1704.65, 'duration': 1.361}, {'end': 1709.164, 'text': "We'll set background color to white.", 'start': 1706.903, 'duration': 2.261}, {'end': 1713.747, 'text': 'Now it should cover everything.', 'start': 1710.865, 'duration': 2.882}, {'end': 1717.79, 'text': "So let's give this a high Z index.", 'start': 1714.588, 'duration': 3.202}, {'end': 1721.152, 'text': "So we'll say Z index.", 'start': 1718.83, 'duration': 2.322}, {'end': 1724.874, 'text': 'We set that to 10.', 'start': 1722.833, 'duration': 2.041}, {'end': 1726.055, 'text': "Yeah So it's going to cover.", 'start': 1724.874, 'duration': 1.181}, {'end': 1730.017, 'text': "We set this to 10, didn't we? All right.", 'start': 1727.456, 'duration': 2.561}, {'end': 1733.353, 'text': "Let's set it to 15.", 'start': 1730.057, 'duration': 3.296}], 'summary': 'Setting the screen to 100% width and height with white background color and increasing z index to 15.', 'duration': 35.848, 'max_score': 1697.505, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY1697505.jpg'}, {'end': 2039.978, 'src': 'heatmap', 'start': 1977.366, 'weight': 0.965, 'content': [{'end': 1992.997, 'text': "And we're going to position that absolute and let's make it from the bottom 20 pixels and let's do a transform scale and we're going to scale it down half.", 'start': 1977.366, 'duration': 15.631}, {'end': 1995.779, 'text': 'like that.', 'start': 1995.319, 'duration': 0.46}, {'end': 1998.701, 'text': 'And I also want these to be scaled down as well.', 'start': 1996.44, 'duration': 2.261}, {'end': 2002.463, 'text': "So let's do the social bar links.", 'start': 1998.861, 'duration': 3.602}, {'end': 2018.191, 'text': "OK, so for this, let's go ahead and let's display these as inline block and then let's also scale that down.", 'start': 2002.483, 'duration': 15.708}, {'end': 2022.894, 'text': 'So transform scale it down to zero point five.', 'start': 2018.231, 'duration': 4.663}, {'end': 2025.547, 'text': 'All right.', 'start': 2025.247, 'duration': 0.3}, {'end': 2026.888, 'text': 'So I think that looks pretty good.', 'start': 2025.607, 'duration': 1.281}, {'end': 2039.978, 'text': "Now, if we don't have the active class on both the toggle and the navigation, then it's going to be in the default state like this.", 'start': 2028.509, 'duration': 11.469}], 'summary': 'Applying a transform scale to elements, such as scaling down by 50% and positioning from the bottom by 20 pixels.', 'duration': 62.612, 'max_score': 1977.366, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY1977366.jpg'}, {'end': 2210.307, 'src': 'embed', 'start': 2180.613, 'weight': 0, 'content': [{'end': 2182.454, 'text': "It's the button, this thing here.", 'start': 2180.613, 'duration': 1.841}, {'end': 2183.454, 'text': 'All right.', 'start': 2183.194, 'duration': 0.26}, {'end': 2186.276, 'text': 'So we want to toggle the class of active.', 'start': 2183.514, 'duration': 2.762}, {'end': 2195.496, 'text': "So just doing that, if I save and I click, you can see it turns to an X because it's adding and removing that active class.", 'start': 2188.871, 'duration': 6.625}, {'end': 2200.06, 'text': "In fact, we can see that if we look at, let's see, let's select this.", 'start': 2195.556, 'duration': 4.504}, {'end': 2205.644, 'text': 'So you can see right now this div with the class of toggle does not have the active.', 'start': 2200.66, 'duration': 4.984}, {'end': 2210.307, 'text': "If I click it, it gets added, right? It gets added because it didn't have it.", 'start': 2205.704, 'duration': 4.603}], 'summary': 'Toggling the active class changes the button appearance.', 'duration': 29.694, 'max_score': 2180.613, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY2180613.jpg'}], 'start': 1508.289, 'title': 'Styling and designing with javascript and css', 'summary': 'Discusses styling a button with javascript to enable a toggle functionality and designing a css navigation menu, including setting position, dimensions, and styling with pure css, and implementing javascript to toggle the active class for both the navigation and the toggle button.', 'chapters': [{'end': 1562.559, 'start': 1508.289, 'title': 'Styling and adding class with javascript', 'summary': 'Discusses styling a button by removing its border and adding a class using javascript to enable a toggle functionality.', 'duration': 54.27, 'highlights': ['The script removes the border from a button by setting its border property to zero.', "The plan is to use JavaScript to add the class 'active' to the navigation and toggle when the button is clicked.", "The class 'active' will be manually added to the toggle to visualize the intended functionality."]}, {'end': 2229.16, 'start': 1562.639, 'title': 'Css navigation design', 'summary': 'Covers the process of designing a css navigation menu, including setting the position, dimensions, and styling with pure css, and implementing javascript to toggle the active class for both the navigation and the toggle button.', 'duration': 666.521, 'highlights': ['The navigation is positioned fixed and takes up the entire screen, with a background color of white and a high Z index of 15, ensuring it covers everything. The navigation is set to a fixed position, covering the entire screen with a white background and a high Z index of 15.', 'The JavaScript function toggles the active class for the toggle and navigation elements, allowing for the visual change from a menu icon to an X when activated. The JavaScript function toggles the active class for the toggle and navigation elements, enabling the visual change from a menu icon to an X when activated.', 'The CSS styling includes setting the navigation to display flex, justifying and aligning items to the center, and removing bullet points while centering the text and adjusting the font size and color. The CSS styling involves setting the navigation to display flex, justifying and aligning items to the center, removing bullet points, centering the text, and adjusting the font size and color.']}], 'duration': 720.871, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY1508289.jpg', 'highlights': ['The JavaScript function toggles the active class for the toggle and navigation elements, enabling the visual change from a menu icon to an X when activated.', 'The navigation is positioned fixed and takes up the entire screen, with a background color of white and a high Z index of 15, ensuring it covers everything.', 'The CSS styling involves setting the navigation to display flex, justifying and aligning items to the center, removing bullet points, centering the text, and adjusting the font size and color.', "The plan is to use JavaScript to add the class 'active' to the navigation and toggle when the button is clicked.", "The class 'active' will be manually added to the toggle to visualize the intended functionality.", 'The script removes the border from a button by setting its border property to zero.']}, {'end': 2797.139, 'segs': [{'end': 2308.257, 'src': 'embed', 'start': 2229.42, 'weight': 0, 'content': [{'end': 2231.781, 'text': "So let's click and there we go.", 'start': 2229.42, 'duration': 2.361}, {'end': 2235.303, 'text': "So it's as simple as that.", 'start': 2234.322, 'duration': 0.981}, {'end': 2238.705, 'text': "That's all the JavaScript that we have to add so we can actually close that up.", 'start': 2235.343, 'duration': 3.362}, {'end': 2245.345, 'text': "And we're going to make this a little bigger because we are going to be creating other HTML pages and I want to be able to see what we're doing.", 'start': 2239.642, 'duration': 5.703}, {'end': 2248.386, 'text': 'I think this is a little too many words here.', 'start': 2246.345, 'duration': 2.041}, {'end': 2250.167, 'text': 'If we look at the other version.', 'start': 2248.766, 'duration': 1.401}, {'end': 2257.87, 'text': "Yeah, I think we have one less line, so let's actually delete just some of the dummy text.", 'start': 2250.187, 'duration': 7.683}, {'end': 2264.373, 'text': 'See what if we do if we get rid of that? Yeah, so I think that looks a little better.', 'start': 2259.431, 'duration': 4.942}, {'end': 2270.683, 'text': "Now, this isn't really responsive because it goes over the image.", 'start': 2265.7, 'duration': 4.983}, {'end': 2275.946, 'text': 'In fact, we can open up the dev tools and see what it looks like on a mobile screen.', 'start': 2271.644, 'duration': 4.302}, {'end': 2278.988, 'text': 'So this would be iPhone six, seven, eight.', 'start': 2276.927, 'duration': 2.061}, {'end': 2279.908, 'text': 'And you can change this.', 'start': 2279.008, 'duration': 0.9}, {'end': 2282.25, 'text': 'So that would be an iPhone X.', 'start': 2280.489, 'duration': 1.761}, {'end': 2288.994, 'text': "But I'm actually not going to use this because I'm going to just make this smaller like that.", 'start': 2282.25, 'duration': 6.744}, {'end': 2294.177, 'text': "And then let's go to our style sheet and we're going to go to the bottom here and add our media query.", 'start': 2289.594, 'duration': 4.583}, {'end': 2308.257, 'text': "So to create a media query, we just say at media and in here we can say either max or min, with I'm going to say max with 10 to 10, 68 pixels,", 'start': 2295.552, 'duration': 12.705}], 'summary': 'Adding javascript, optimizing for mobile, and creating media query for max width 1068px.', 'duration': 78.837, 'max_score': 2229.42, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY2229420.jpg'}, {'end': 2616.87, 'src': 'heatmap', 'start': 2434.124, 'weight': 4, 'content': [{'end': 2439.025, 'text': "Navigation, we want you LLIA, so we're targeting the links here.", 'start': 2434.124, 'duration': 4.901}, {'end': 2440.846, 'text': "Let's set the font size.", 'start': 2439.606, 'duration': 1.24}, {'end': 2442.747, 'text': "I think it's two point five by default.", 'start': 2440.906, 'duration': 1.841}, {'end': 2444.627, 'text': "So let's do to Ram.", 'start': 2442.787, 'duration': 1.84}, {'end': 2447.608, 'text': 'Yeah, just shrink those down a little bit.', 'start': 2445.968, 'duration': 1.64}, {'end': 2450.638, 'text': 'All right, good.', 'start': 2450.117, 'duration': 0.521}, {'end': 2455.103, 'text': 'So that should do it as far as the home page goes.', 'start': 2452.26, 'duration': 2.843}, {'end': 2459.748, 'text': "So now let's start on the services page.", 'start': 2456.785, 'duration': 2.963}, {'end': 2466.296, 'text': "So I'm going to create a new HTML file called Services Dot HTML.", 'start': 2459.908, 'duration': 6.388}, {'end': 2473.98, 'text': "Now obviously we're going to have like the same header and everything so I'm going to copy everything from the index.", 'start': 2467.779, 'duration': 6.201}, {'end': 2481.302, 'text': "Let's close that up and in services will paste this in and let's just clear out the entire section.", 'start': 2474.32, 'duration': 6.982}, {'end': 2484.102, 'text': 'So we want to keep the header,', 'start': 2482.762, 'duration': 1.34}, {'end': 2494.425, 'text': "but we'll clear out everything that's in the section and we should now be able to link to services dot html and just have kind of an empty slate,", 'start': 2484.102, 'duration': 10.323}, {'end': 2495.565, 'text': 'empty page to work with.', 'start': 2494.425, 'duration': 1.14}, {'end': 2504.274, 'text': "Now in the section here we're going to have a div with the class of title and in the title we'll have an H1.", 'start': 2496.468, 'duration': 7.806}, {'end': 2511.319, 'text': "Let's say services that we can help you with.", 'start': 2504.474, 'duration': 6.845}, {'end': 2520.205, 'text': "And then underneath the H1 let's have a paragraph we'll do lorem to lorem 50.", 'start': 2512.259, 'duration': 7.946}, {'end': 2521.226, 'text': "So we'll save that.", 'start': 2520.205, 'duration': 1.021}, {'end': 2523.748, 'text': "It's going to look like that for now.", 'start': 2521.246, 'duration': 2.502}, {'end': 2529.339, 'text': "And I guess, yeah, let's just do the HTML.", 'start': 2525.517, 'duration': 3.822}, {'end': 2533.62, 'text': "There's some stuff in the CSS that's going to make it look weird, but we'll get to that after.", 'start': 2529.439, 'duration': 4.181}, {'end': 2537.502, 'text': "Basically, we're just going to have, of course, I can just show you.", 'start': 2534.161, 'duration': 3.341}, {'end': 2541.243, 'text': "We're going to have the title, which wraps around this.", 'start': 2538.102, 'duration': 3.141}, {'end': 2542.404, 'text': "That's the class of title.", 'start': 2541.324, 'duration': 1.08}, {'end': 2546.806, 'text': 'And then we want these cards or whatever you want to call them, these different services.', 'start': 2542.484, 'duration': 4.322}, {'end': 2549.867, 'text': "And we're going to use CSS grid to lay these out.", 'start': 2547.126, 'duration': 2.741}, {'end': 2551.628, 'text': "So let's..", 'start': 2550.767, 'duration': 0.861}, {'end': 2554.114, 'text': "Let's add those services.", 'start': 2552.833, 'duration': 1.281}, {'end': 2564.639, 'text': "So under this div we're going to have a class of services and then each one of those cards is going to be a class called service.", 'start': 2554.194, 'duration': 10.445}, {'end': 2573.323, 'text': "And in that service we're going to have a class of icon and in that we'll have an image with the icon.", 'start': 2566.419, 'duration': 6.904}, {'end': 2577.685, 'text': "This one's going to be images slash zero zero one dot PNG.", 'start': 2573.663, 'duration': 4.022}, {'end': 2588.16, 'text': "And then outside of the icon div, let's put an H2, we'll say design and then let's say lorem 20.", 'start': 2578.874, 'duration': 9.286}, {'end': 2594.003, 'text': "Might have to change that if it doesn't look good, but that's basically a service right now.", 'start': 2588.16, 'duration': 5.843}, {'end': 2598.606, 'text': 'We do have an issue here, and that is the section.', 'start': 2595.084, 'duration': 3.522}, {'end': 2600.087, 'text': 'If we look at our styling.', 'start': 2598.626, 'duration': 1.461}, {'end': 2610.185, 'text': "Let's go up to our section as we displayed flex and by default display flex gives you a flex row which is horizontal.", 'start': 2601.8, 'duration': 8.385}, {'end': 2616.87, 'text': 'So any elements that we add in here any direct children of section are going to be in a horizontal row.', 'start': 2610.366, 'duration': 6.504}], 'summary': 'Modifying website layout, adding services page with html and css grid for service display.', 'duration': 32.172, 'max_score': 2434.124, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY2434124.jpg'}, {'end': 2564.639, 'src': 'embed', 'start': 2529.439, 'weight': 5, 'content': [{'end': 2533.62, 'text': "There's some stuff in the CSS that's going to make it look weird, but we'll get to that after.", 'start': 2529.439, 'duration': 4.181}, {'end': 2537.502, 'text': "Basically, we're just going to have, of course, I can just show you.", 'start': 2534.161, 'duration': 3.341}, {'end': 2541.243, 'text': "We're going to have the title, which wraps around this.", 'start': 2538.102, 'duration': 3.141}, {'end': 2542.404, 'text': "That's the class of title.", 'start': 2541.324, 'duration': 1.08}, {'end': 2546.806, 'text': 'And then we want these cards or whatever you want to call them, these different services.', 'start': 2542.484, 'duration': 4.322}, {'end': 2549.867, 'text': "And we're going to use CSS grid to lay these out.", 'start': 2547.126, 'duration': 2.741}, {'end': 2551.628, 'text': "So let's..", 'start': 2550.767, 'duration': 0.861}, {'end': 2554.114, 'text': "Let's add those services.", 'start': 2552.833, 'duration': 1.281}, {'end': 2564.639, 'text': "So under this div we're going to have a class of services and then each one of those cards is going to be a class called service.", 'start': 2554.194, 'duration': 10.445}], 'summary': 'Using css grid to layout title and service cards.', 'duration': 35.2, 'max_score': 2529.439, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY2529439.jpg'}, {'end': 2716.592, 'src': 'heatmap', 'start': 2653.11, 'weight': 0.89, 'content': [{'end': 2664.7, 'text': "you could that you could handle this, but we're going to add, just add a class of home and let's go right under section and let's add,", 'start': 2653.11, 'duration': 11.59}, {'end': 2666.622, 'text': "let's say section dot home.", 'start': 2664.7, 'duration': 1.922}, {'end': 2671.786, 'text': "So if it has the class of home then we're going to set the flex direction back to row.", 'start': 2666.742, 'duration': 5.044}, {'end': 2673.488, 'text': 'So if I save that now.', 'start': 2672.287, 'duration': 1.201}, {'end': 2676.008, 'text': 'It goes back to normal.', 'start': 2674.847, 'duration': 1.161}, {'end': 2683.432, 'text': 'Now I also want to have some margin on the section for every inner page to push it to push this down right here.', 'start': 2676.168, 'duration': 7.264}, {'end': 2693.177, 'text': "So if I set margin top to 60 pixels that's what I want here.", 'start': 2684.332, 'duration': 8.845}, {'end': 2701.728, 'text': "Now on the home page I don't want that so I'm just going to set the home section margin Say margin top to zero.", 'start': 2693.397, 'duration': 8.331}, {'end': 2706.569, 'text': "So that doesn't affect the home page, but I do want it on all the intersections.", 'start': 2701.908, 'duration': 4.661}, {'end': 2708.789, 'text': 'All right.', 'start': 2708.489, 'duration': 0.3}, {'end': 2716.592, 'text': "So now that we have that taken care of, let's go back to services and let's add the rest of these services.", 'start': 2709.03, 'duration': 7.562}], 'summary': 'Adjusting flex direction in css for home class and adding margin to sections.', 'duration': 63.482, 'max_score': 2653.11, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY2653110.jpg'}], 'start': 2229.42, 'title': 'Web design implementation', 'summary': 'Covers implementing responsive design with media queries for various devices, and making styling adjustments for website elements including logo, font, padding, and navigation size, as well as creating a new html file for the services page and using css grid for layout.', 'chapters': [{'end': 2338.09, 'start': 2229.42, 'title': 'Implementing responsive design', 'summary': 'Discusses implementing responsive design, including using media queries to adjust content based on screen size, with specific reference to iphone 6, 7, 8, and x, and ipad pro, and modifying the display of an image based on the screen width.', 'duration': 108.67, 'highlights': ['The chapter explains using media queries to adjust content based on screen size, with specific reference to iPhone 6, 7, 8, and X, and iPad Pro, and modifying the display of an image based on the screen width.', 'The transcript demonstrates the use of JavaScript to add functionality to HTML pages, with a specific example of resizing elements for better visibility during development.', 'The speaker mentions the use of dev tools to visualize the appearance of the webpage on different devices, such as iPhone 6, 7, 8, and X, and iPad Pro, and makes adjustments accordingly.', 'The speaker showcases the implementation of media queries to control the display of elements based on screen width, specifically setting a condition for a certain width range (1024 to 1068 pixels) to hide the home image.', 'The transcript briefly discusses the process of adjusting content for responsiveness, including the use of media queries and the application of specific screen width conditions to modify the display of elements.']}, {'end': 2797.139, 'start': 2339.938, 'title': 'Website page styling', 'summary': "Discusses making adjustments to the website's logo, font size, padding, and navigation size, as well as creating a new html file for the services page and adding content to it using css grid.", 'duration': 457.201, 'highlights': ["Making adjustments to the website's logo, font size, padding, and navigation size The speaker wants to make the logo smaller, adjust its positioning, decrease the font size, and reduce the padding around the section. They also aim to decrease the font size of the navigation links for the home page.", 'Creating a new HTML file for the services page and adding content to it using CSS grid The speaker plans to create a new HTML file for the services page, copy the header from the index, clear out the section, add a div with the class of title and an H1 for services, and use CSS grid to layout the services and their descriptions.']}], 'duration': 567.719, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY2229420.jpg', 'highlights': ['Implement media queries for responsive design on iPhone 6, 7, 8, X, and iPad Pro.', 'Use JavaScript to resize elements for better visibility during development.', 'Visualize webpage appearance on different devices using dev tools.', 'Control element display with media queries based on screen width conditions.', "Adjust website's logo, font size, padding, and navigation size for better layout.", 'Create new HTML file for services page and utilize CSS grid for layout.']}, {'end': 3387.91, 'segs': [{'end': 2879.29, 'src': 'embed', 'start': 2797.919, 'weight': 0, 'content': [{'end': 2802.74, 'text': "So let's go into our style sheet here and we're going to want to go.", 'start': 2797.919, 'duration': 4.821}, {'end': 2807.581, 'text': "Let's go down right above the media query.", 'start': 2805.381, 'duration': 2.2}, {'end': 2810.702, 'text': "See, so that's our home page.", 'start': 2809.362, 'duration': 1.34}, {'end': 2818.744, 'text': "Home page style, so let's go under that and let's say services page and services.", 'start': 2812.343, 'duration': 6.401}, {'end': 2826.482, 'text': 'So the services class itself which wraps around all of the individual cards.', 'start': 2821.559, 'duration': 4.923}, {'end': 2834.906, 'text': "Let's add a margin top of 40 pixels and I'm going to display that as a grid.", 'start': 2827.102, 'duration': 7.804}, {'end': 2837.368, 'text': 'So what that means is.', 'start': 2836.407, 'duration': 0.961}, {'end': 2844.556, 'text': 'this right here, this div of services that wraps around all the individual services.', 'start': 2840.353, 'duration': 4.203}, {'end': 2848.52, 'text': "we're going to make this a grid, so each service is going to be a grid item.", 'start': 2844.556, 'duration': 3.964}, {'end': 2851.842, 'text': "now, just doing that doesn't doesn't actually change the layout.", 'start': 2848.52, 'duration': 3.322}, {'end': 2860.79, 'text': "we need to define our columns, so to do that, I'm going to use a property called grid dash template, dash columns,", 'start': 2851.842, 'duration': 8.948}, {'end': 2869.582, 'text': 'and here we can define basically which, how wide each column should be and how many columns we want.', 'start': 2860.79, 'duration': 8.792}, {'end': 2871.483, 'text': "Let's say we wanted to 50 percent.", 'start': 2869.622, 'duration': 1.861}, {'end': 2875.287, 'text': 'We could say 50 percent for the first one, 50 percent for the second.', 'start': 2871.523, 'duration': 3.764}, {'end': 2876.488, 'text': "And that's what it gives us.", 'start': 2875.467, 'duration': 1.021}, {'end': 2879.29, 'text': 'So CSS grid is really, really powerful.', 'start': 2877.128, 'duration': 2.162}], 'summary': 'Using css grid to create a services page layout with 50% width columns and 40px margin top.', 'duration': 81.371, 'max_score': 2797.919, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY2797919.jpg'}, {'end': 2955.881, 'src': 'embed', 'start': 2904.581, 'weight': 3, 'content': [{'end': 2907.283, 'text': "So I'm going to do one F.R., one F.R., one F.R.", 'start': 2904.581, 'duration': 2.702}, {'end': 2910.985, 'text': 'and now it gives me three, three columns.', 'start': 2908.143, 'duration': 2.842}, {'end': 2919.306, 'text': 'Now a cleaner way to do this is to use repeat and I could say repeat three times one far.', 'start': 2912.096, 'duration': 7.21}, {'end': 2920.769, 'text': "That's going to give me the same thing.", 'start': 2919.527, 'duration': 1.242}, {'end': 2924.066, 'text': "And don't worry about these icons.", 'start': 2922.685, 'duration': 1.381}, {'end': 2929.067, 'text': "I'm going to make these smaller in a minute, but I do want to have some some gap in between.", 'start': 2924.086, 'duration': 4.981}, {'end': 2930.708, 'text': 'See how close these are together.', 'start': 2929.127, 'duration': 1.581}, {'end': 2940.211, 'text': "So with grid, we can actually use it used to be grid gap, which still works, but you can just do gap now and I'm going to give it a 40 pixel gap.", 'start': 2931.268, 'duration': 8.943}, {'end': 2944.773, 'text': "So now it'll have space in between both vertically and horizontally.", 'start': 2940.851, 'duration': 3.922}, {'end': 2947.954, 'text': 'And then I also want to just align everything to the center.', 'start': 2945.353, 'duration': 2.601}, {'end': 2950.835, 'text': "So let's say text align to the center.", 'start': 2947.994, 'duration': 2.841}, {'end': 2955.881, 'text': "OK, let's take care of those icons real quick.", 'start': 2953.379, 'duration': 2.502}], 'summary': 'Using repeat function to create 3 columns with 40 pixel gap, aligning content to the center.', 'duration': 51.3, 'max_score': 2904.581, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY2904581.jpg'}, {'end': 3077.919, 'src': 'heatmap', 'start': 3023.552, 'weight': 0.85, 'content': [{'end': 3033.015, 'text': "So box shadow, let's do zero, 10 pixels, 30 pixels, and then the color, let's do RGBA, which is red, green, blue, alpha.", 'start': 3023.552, 'duration': 9.463}, {'end': 3033.975, 'text': "We're going to do black.", 'start': 3033.035, 'duration': 0.94}, {'end': 3037.32, 'text': 'with zero point one for the transparency.', 'start': 3034.659, 'duration': 2.661}, {'end': 3041.201, 'text': 'So now when I hover over, we get that little shadow effect.', 'start': 3037.38, 'duration': 3.821}, {'end': 3043.582, 'text': 'All right.', 'start': 3043.282, 'duration': 0.3}, {'end': 3048.923, 'text': 'Now, for the each twos, I believe that we have these each twos.', 'start': 3043.642, 'duration': 5.281}, {'end': 3052.024, 'text': 'Yeah So each one of these services has an H2.', 'start': 3049.684, 'duration': 2.34}, {'end': 3053.425, 'text': 'I want to style that.', 'start': 3052.264, 'duration': 1.161}, {'end': 3055.805, 'text': "So let's go right.", 'start': 3054.565, 'duration': 1.24}, {'end': 3063.288, 'text': 'Go right here and say services service H2.', 'start': 3057.386, 'duration': 5.902}, {'end': 3070.478, 'text': "Let's make the font size 24 pixels.", 'start': 3065.657, 'duration': 4.821}, {'end': 3073.678, 'text': "And let's make the font weight 500.", 'start': 3070.758, 'duration': 2.92}, {'end': 3077.919, 'text': "And we're going to add a little margin top.", 'start': 3073.678, 'duration': 4.241}], 'summary': 'Styled box shadow with 0.1 transparency and services h2 with 24px font size and 500 font weight.', 'duration': 54.367, 'max_score': 3023.552, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY3023552.jpg'}, {'end': 3199.526, 'src': 'embed', 'start': 3169.606, 'weight': 1, 'content': [{'end': 3173.146, 'text': "So it turns to two when I'm more than ten sixty eight.", 'start': 3169.606, 'duration': 3.54}, {'end': 3173.687, 'text': "It's three.", 'start': 3173.187, 'duration': 0.5}, {'end': 3177.988, 'text': 'Now, if I get down to here, like really small, I want it to be just one.', 'start': 3174.147, 'duration': 3.841}, {'end': 3180.969, 'text': 'So what I can do is add another media query.', 'start': 3178.088, 'duration': 2.881}, {'end': 3185.97, 'text': "Let's say media will say Max with this time.", 'start': 3181.809, 'duration': 4.161}, {'end': 3188.591, 'text': "Let's do seven sixty eight pixels.", 'start': 3186.01, 'duration': 2.581}, {'end': 3192.392, 'text': "And I'm just simply going to take this.", 'start': 3190.211, 'duration': 2.181}, {'end': 3196.944, 'text': "Put that here and I don't need to do any repeat.", 'start': 3194.363, 'duration': 2.581}, {'end': 3198.325, 'text': 'I just need one column.', 'start': 3196.984, 'duration': 1.341}, {'end': 3199.526, 'text': 'So one F.R.', 'start': 3198.545, 'duration': 0.981}], 'summary': 'Adjust layout to one column below 768 pixels.', 'duration': 29.92, 'max_score': 3169.606, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY3169606.jpg'}], 'start': 2797.919, 'title': 'Css grid for responsive web design', 'summary': 'Covers styling the services page with css grid by adding a margin top of 40 pixels and using grid-template-columns, and demonstrates the usage of css grid layout for responsive web designs, including defining column widths, setting percentages, using f.r. units, applying grid gap, aligning content, and implementing media queries.', 'chapters': [{'end': 2860.79, 'start': 2797.919, 'title': 'Styling services page with css grid', 'summary': 'Covers styling the services page by adding a margin top of 40 pixels and using the property grid-template-columns to define the layout as a grid.', 'duration': 62.871, 'highlights': ['Adding a margin top of 40 pixels to the services class.', 'Using the grid-template-columns property to define the layout as a grid.']}, {'end': 3387.91, 'start': 2860.79, 'title': 'Css grid layout', 'summary': 'Demonstrates the usage of css grid layout to create responsive web designs, with examples of defining column widths, setting column percentages, using f.r. units, applying grid gap, aligning content, and implementing media queries for responsiveness.', 'duration': 527.12, 'highlights': ['Creating responsive web designs using CSS grid layout The chapter demonstrates the usage of CSS grid layout to create responsive web designs.', 'Defining column widths and percentages Examples are provided for defining column widths and setting column percentages, such as using 50% for each of two columns and 70% for one column and 30% for another.', "Using F.R. units for creating multiple columns The usage of F.R. units for creating multiple columns is illustrated, with the example of using '1 F.R.' for three columns and the 'repeat' function for a cleaner approach.", "Applying grid gap and aligning content The application of grid gap for adding space between grid elements and aligning content to the center is demonstrated, along with the usage of 'gap' property and 'text-align' property.", 'Implementing media queries for responsiveness The chapter provides examples of implementing media queries to adjust the layout for different screen sizes, such as changing the number of columns at specific breakpoints.']}], 'duration': 589.991, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY2797919.jpg', 'highlights': ['Demonstrates the usage of CSS grid layout for responsive web designs, including defining column widths, setting percentages, using F.R. units, applying grid gap, aligning content, and implementing media queries.', 'Implementing media queries for responsiveness, such as changing the number of columns at specific breakpoints.', 'Using the grid-template-columns property to define the layout as a grid.', 'Applying grid gap for adding space between grid elements and aligning content to the center.', 'Defining column widths and percentages, such as using 50% for each of two columns and 70% for one column and 30% for another.', "Using F.R. units for creating multiple columns, with the example of using '1 F.R.' for three columns and the 'repeat' function for a cleaner approach.", 'Adding a margin top of 40 pixels to the services class.']}, {'end': 3826.183, 'segs': [{'end': 3418.013, 'src': 'embed', 'start': 3387.91, 'weight': 0, 'content': [{'end': 3389.331, 'text': 'but I wanted to make it look decent.', 'start': 3387.91, 'duration': 1.421}, {'end': 3391.493, 'text': "So that's it for the HTML.", 'start': 3390.031, 'duration': 1.462}, {'end': 3392.153, 'text': 'Pretty simple.', 'start': 3391.533, 'duration': 0.62}, {'end': 3393.674, 'text': 'Now we need to style it.', 'start': 3392.533, 'duration': 1.141}, {'end': 3394.535, 'text': "So let's go under.", 'start': 3393.714, 'duration': 0.821}, {'end': 3397.558, 'text': "Let's make sure we go outside of our media query.", 'start': 3394.555, 'duration': 3.003}, {'end': 3401.281, 'text': 'And this is going to be the work page.', 'start': 3397.898, 'duration': 3.383}, {'end': 3405.945, 'text': "And what I'm going to do here is set the portfolio.", 'start': 3402.442, 'duration': 3.503}, {'end': 3409.587, 'text': 'So portfolio wraps around all the items.', 'start': 3407.366, 'duration': 2.221}, {'end': 3413.27, 'text': 'So I want to display the portfolio as a flex box.', 'start': 3409.948, 'duration': 3.322}, {'end': 3418.013, 'text': 'And as soon as I do that, all of the items are going to be in a row.', 'start': 3413.29, 'duration': 4.723}], 'summary': 'Styling the work page by setting the portfolio as a flex box to display items in a row.', 'duration': 30.103, 'max_score': 3387.91, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY3387910.jpg'}, {'end': 3468.229, 'src': 'embed', 'start': 3439.724, 'weight': 5, 'content': [{'end': 3442.445, 'text': 'It will then shrink down down again.', 'start': 3439.724, 'duration': 2.721}, {'end': 3448.729, 'text': "So that's kind of what we want to happen, although I want to make these smaller.", 'start': 3442.465, 'duration': 6.264}, {'end': 3455.492, 'text': "So over here, let's say portfolio and take each item and make the width.", 'start': 3449.049, 'duration': 6.443}, {'end': 3459.014, 'text': "Let's do 300 pixels and let's do a height.", 'start': 3455.732, 'duration': 3.282}, {'end': 3461.315, 'text': 'Of 300 pixels as well.', 'start': 3459.034, 'duration': 2.281}, {'end': 3466.929, 'text': 'Now, the image is going to kind of break out of that.', 'start': 3464.127, 'duration': 2.802}, {'end': 3468.229, 'text': "We'll take care of that in a second.", 'start': 3467.009, 'duration': 1.22}], 'summary': 'Adjust portfolio items to 300x300 pixels, image issue to be resolved later.', 'duration': 28.505, 'max_score': 3439.724, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY3439724.jpg'}, {'end': 3559.094, 'src': 'embed', 'start': 3496.275, 'weight': 6, 'content': [{'end': 3499.757, 'text': 'We want that to just take up the whole container of 300 pixels.', 'start': 3496.275, 'duration': 3.482}, {'end': 3505.26, 'text': "So let's set the width to the image to 100 percent and also the height.", 'start': 3499.837, 'duration': 5.423}, {'end': 3507.83, 'text': 'to 100 percent.', 'start': 3506.929, 'duration': 0.901}, {'end': 3510.632, 'text': 'OK, so now it fills the container.', 'start': 3507.85, 'duration': 2.782}, {'end': 3512.774, 'text': 'We have five pixels in between each one.', 'start': 3510.852, 'duration': 1.922}, {'end': 3515.817, 'text': "And it's if it'll fit, it'll come in like that.", 'start': 3512.894, 'duration': 2.923}, {'end': 3518.559, 'text': "And it doesn't matter how big or small.", 'start': 3516.918, 'duration': 1.641}, {'end': 3523.283, 'text': "Now, let's do the hover effect.", 'start': 3520.941, 'duration': 2.342}, {'end': 3530.809, 'text': 'Actually, one thing I want to do is just add margin top right here to the portfolio just to push it down a little bit.', 'start': 3524.944, 'duration': 5.865}, {'end': 3534.933, 'text': 'Now, for the the hover.', 'start': 3533.371, 'duration': 1.562}, {'end': 3546.362, 'text': 'If we look at if we look at the item, it has the image, but then it also has this div with a class of action that has launch so that.', 'start': 3536.172, 'duration': 10.19}, {'end': 3550.706, 'text': "Let's go down here, let's add that.", 'start': 3548.504, 'duration': 2.202}, {'end': 3554.33, 'text': 'So portfolio.', 'start': 3552.908, 'duration': 1.422}, {'end': 3559.094, 'text': 'Item and then we want to target action action.', 'start': 3556.111, 'duration': 2.983}], 'summary': 'Adjust image size to fill 300px container, add hover effect, and set margin top for portfolio', 'duration': 62.819, 'max_score': 3496.275, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY3496275.jpg'}, {'end': 3608.132, 'src': 'embed', 'start': 3584.984, 'weight': 4, 'content': [{'end': 3592.908, 'text': 'of RGBA which is red green blue alpha we want black and then the transparency of the alpha value will be zero point eight.', 'start': 3584.984, 'duration': 7.924}, {'end': 3601.333, 'text': "So right now you can see it's covering all of them and this will only show on hover but for now we're going to see it you know at all times.", 'start': 3593.008, 'duration': 8.325}, {'end': 3608.132, 'text': 'So that takes care of kind of the overlay now for the text inside.', 'start': 3603.649, 'duration': 4.483}], 'summary': 'Setting rgba to black with 0.8 alpha value for hover effect.', 'duration': 23.148, 'max_score': 3584.984, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY3584984.jpg'}, {'end': 3802.612, 'src': 'embed', 'start': 3745.733, 'weight': 1, 'content': [{'end': 3755.1, 'text': 'So I want it to have a fade in transition so we can just add transition and then however long we want it to take.', 'start': 3745.733, 'duration': 9.367}, {'end': 3757.042, 'text': "We'll say zero point three seconds.", 'start': 3755.14, 'duration': 1.902}, {'end': 3759.244, 'text': "Let's do zero point five seconds.", 'start': 3757.082, 'duration': 2.162}, {'end': 3761.506, 'text': 'And then we have that hover effect.', 'start': 3760.065, 'duration': 1.441}, {'end': 3771.819, 'text': "Now if we may if on small screens it doesn't this isn't aligned to the center we could put that in a media query or we could just do it in general.", 'start': 3762.796, 'duration': 9.023}, {'end': 3773.86, 'text': "Let's see if we just add.", 'start': 3771.839, 'duration': 2.021}, {'end': 3777.521, 'text': 'To portfolio.', 'start': 3776.18, 'duration': 1.341}, {'end': 3780.593, 'text': 'which is our flex box.', 'start': 3779.192, 'duration': 1.401}, {'end': 3787.759, 'text': "If we add justify content to the center, that'll push everything into the center.", 'start': 3781.274, 'duration': 6.485}, {'end': 3788.56, 'text': "Let's see how it looks.", 'start': 3787.779, 'duration': 0.781}, {'end': 3791.863, 'text': 'I guess we could deal with that.', 'start': 3790.161, 'duration': 1.702}, {'end': 3795.746, 'text': 'If you want it centered on large screens like this, you can do this,', 'start': 3791.963, 'duration': 3.783}, {'end': 3801.691, 'text': "or you can move that justify content center to the media query so that it's only on smaller screens.", 'start': 3795.746, 'duration': 5.945}, {'end': 3802.612, 'text': "It's up to you.", 'start': 3802.131, 'duration': 0.481}], 'summary': 'Adding a 0.5-second fade-in transition and centering content using justify-content.', 'duration': 56.879, 'max_score': 3745.733, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY3745733.jpg'}], 'start': 3387.91, 'title': 'Styling portfolio and elements in css', 'summary': 'Covers styling a portfolio with flexbox and positioning elements using css. it includes setting flex properties, adjusting item dimensions, applying hover effects, and details on positioning elements absolutely, setting background colors, opacity, transitions, and media queries.', 'chapters': [{'end': 3559.094, 'start': 3387.91, 'title': 'Styling portfolio with flexbox', 'summary': 'Covers the process of styling a portfolio using flexbox, including setting flex properties, adjusting item dimensions, and adding hover effects.', 'duration': 171.184, 'highlights': ['Setting the portfolio as a flexbox and enabling flex wrap to ensure items wrap when they go out of the container. The portfolio is set as a flexbox, allowing all items to be in a row, and flex wrap is enabled to ensure items wrap when they go out of the container.', 'Adjusting the width and height of portfolio items to 300 pixels, setting position to relative, and adding a margin of five pixels around each item. The width and height of portfolio items are adjusted to 300 pixels, position is set to relative, and a margin of five pixels is added around each item.', 'Ensuring the image fills the container by setting its width and height to 100 percent. The image within the portfolio item is adjusted to fill the container by setting its width and height to 100 percent.', "Adding a margin top to the portfolio to push it down and preparing for hover effects by targeting the 'action' class. A margin top is added to the portfolio to push it down, and the 'action' class is targeted to prepare for hover effects."]}, {'end': 3826.183, 'start': 3561.485, 'title': 'Styling and positioning elements in css', 'summary': 'Covers positioning elements absolutely, applying hover effects, and styling elements using css, with details on setting background colors, opacity, transitions, and media queries.', 'duration': 264.698, 'highlights': ['Setting background color with RGBA and transparency Setting the background color with RGBA values (black) and an alpha value of 0.8 to create a semi-transparent overlay.', 'Applying hover effects and setting opacity Setting the opacity of elements to 0 to hide them initially and then making them visible on hover, with a transition effect of 0.5 seconds.', 'Styling elements using CSS Styling elements by setting the display property to flex, justifying content and aligning items to the center, and applying specific styles such as color, text decoration, border, and padding.', 'Using media queries for responsive design Utilizing media queries to adjust the layout based on screen size, including centering elements and applying specific styles for different screen sizes.']}], 'duration': 438.273, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY3387910.jpg', 'highlights': ['Setting the portfolio as a flexbox and enabling flex wrap to ensure items wrap when they go out of the container.', 'Using media queries for responsive design Utilizing media queries to adjust the layout based on screen size, including centering elements and applying specific styles for different screen sizes.', 'Applying hover effects and setting opacity Setting the opacity of elements to 0 to hide them initially and then making them visible on hover, with a transition effect of 0.5 seconds.', 'Styling elements using CSS Styling elements by setting the display property to flex, justifying content and aligning items to the center, and applying specific styles such as color, text decoration, border, and padding.', 'Setting background color with RGBA and transparency Setting the background color with RGBA values (black) and an alpha value of 0.8 to create a semi-transparent overlay.', 'Adjusting the width and height of portfolio items to 300 pixels, setting position to relative, and adding a margin of five pixels around each item.', 'Ensuring the image fills the container by setting its width and height to 100 percent.', "Adding a margin top to the portfolio to push it down and preparing for hover effects by targeting the 'action' class."]}, {'end': 5210.555, 'segs': [{'end': 3924.202, 'src': 'embed', 'start': 3894.722, 'weight': 0, 'content': [{'end': 3895.543, 'text': "So let's go see.", 'start': 3894.722, 'duration': 0.821}, {'end': 3898.827, 'text': 'So we have our title.', 'start': 3897.345, 'duration': 1.482}, {'end': 3904.554, 'text': "Let's go under this did with the class of title and let's create a class of contact.", 'start': 3898.867, 'duration': 5.687}, {'end': 3910.642, 'text': "And in here we're going to have first of all our contact dash form.", 'start': 3905.956, 'duration': 4.686}, {'end': 3914.916, 'text': 'And this is going to be a form.', 'start': 3913.315, 'duration': 1.601}, {'end': 3920.88, 'text': "Let's get rid of the action and let's create a class of row.", 'start': 3914.936, 'duration': 5.944}, {'end': 3924.202, 'text': "So basically we're going to have rows of inputs.", 'start': 3920.9, 'duration': 3.302}], 'summary': 'Creating a contact form with rows of inputs.', 'duration': 29.48, 'max_score': 3894.722, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY3894722.jpg'}, {'end': 4120.408, 'src': 'heatmap', 'start': 4026.552, 'weight': 1, 'content': [{'end': 4027.592, 'text': "So let's do.", 'start': 4026.552, 'duration': 1.04}, {'end': 4031.094, 'text': "Yeah we'll just get rid of all this because we're going to style it with CSS.", 'start': 4027.612, 'duration': 3.482}, {'end': 4039.461, 'text': "So let's give this a placeholder.", 'start': 4032.537, 'duration': 6.924}, {'end': 4043.024, 'text': 'So placeholder, this is going to be message.', 'start': 4041.002, 'duration': 2.022}, {'end': 4048.767, 'text': "And then we're going to have another row.", 'start': 4046.406, 'duration': 2.361}, {'end': 4058.496, 'text': "And inside here we'll do another input 100 and this is going to be our submit button.", 'start': 4053.195, 'duration': 5.301}, {'end': 4065.338, 'text': "So let's say input and we'll do the type of submit and the value will say send.", 'start': 4058.536, 'duration': 6.802}, {'end': 4068.438, 'text': "OK so that's our form.", 'start': 4065.358, 'duration': 3.08}, {'end': 4076.24, 'text': 'Now we want to go under the contact form div which ends right here still within contact.', 'start': 4069.058, 'duration': 7.182}, {'end': 4080.121, 'text': 'And here we want to create contact font.', 'start': 4077.36, 'duration': 2.761}, {'end': 4083.348, 'text': 'contact dash info.', 'start': 4081.468, 'duration': 1.88}, {'end': 4089.129, 'text': "And inside here we're going to have a couple in info boxes.", 'start': 4085.569, 'duration': 3.56}, {'end': 4093.21, 'text': "So let's create a class of info dash box.", 'start': 4089.81, 'duration': 3.4}, {'end': 4104.292, 'text': "And in this info box we're going to have an image source is going to be images slash address.", 'start': 4095.031, 'duration': 9.261}, {'end': 4111.564, 'text': "And then we're also going to give this a class Let's give it a class of contact dash icon.", 'start': 4104.653, 'duration': 6.911}, {'end': 4116.426, 'text': "And then we're going to have a div with the class of details.", 'start': 4113.666, 'duration': 2.76}, {'end': 4120.408, 'text': "And in details, we'll have an H4 that says address.", 'start': 4117.307, 'duration': 3.101}], 'summary': 'Developing a contact form with css styling and adding contact info boxes.', 'duration': 38.786, 'max_score': 4026.552, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY4026552.jpg'}, {'end': 4141.042, 'src': 'embed', 'start': 4104.653, 'weight': 2, 'content': [{'end': 4111.564, 'text': "And then we're also going to give this a class Let's give it a class of contact dash icon.", 'start': 4104.653, 'duration': 6.911}, {'end': 4116.426, 'text': "And then we're going to have a div with the class of details.", 'start': 4113.666, 'duration': 2.76}, {'end': 4120.408, 'text': "And in details, we'll have an H4 that says address.", 'start': 4117.307, 'duration': 3.101}, {'end': 4124.871, 'text': "And underneath that, we'll have a paragraph with our address.", 'start': 4121.448, 'duration': 3.423}, {'end': 4134.035, 'text': "So let's say 28 Neon Tower, New York City, USA.", 'start': 4124.89, 'duration': 9.145}, {'end': 4139.201, 'text': "So that's our address.", 'start': 4138.12, 'duration': 1.081}, {'end': 4141.042, 'text': "Then we're going to have another info box.", 'start': 4139.241, 'duration': 1.801}], 'summary': 'Creating a web page with contact information and address at 28 neon tower, new york city, usa.', 'duration': 36.389, 'max_score': 4104.653, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY4104653.jpg'}, {'end': 4395.352, 'src': 'embed', 'start': 4358.898, 'weight': 3, 'content': [{'end': 4366.361, 'text': "So with CSS, we can use calc and we can have calculations like, let's say, 100 percent, but take away 400 pixels.", 'start': 4358.898, 'duration': 7.463}, {'end': 4376.445, 'text': "And then what we'll do is make this side not 400 because I do want some space here, we'll make it 350.", 'start': 4368.561, 'duration': 7.884}, {'end': 4377.505, 'text': "So let's see.", 'start': 4376.445, 'duration': 1.06}, {'end': 4379.746, 'text': 'We also want to add some padding.', 'start': 4377.565, 'duration': 2.181}, {'end': 4388.429, 'text': "Let's do padding, 60 pixels, 40 pixels, 20 pixels.", 'start': 4381.447, 'duration': 6.982}, {'end': 4395.352, 'text': 'OK, so add some space inside of the box here and then the form itself.', 'start': 4389.99, 'duration': 5.362}], 'summary': 'Using css calc to subtract 400 pixels, adding padding of 60, 40, 20 pixels', 'duration': 36.454, 'max_score': 4358.898, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY4358898.jpg'}, {'end': 4714.19, 'src': 'embed', 'start': 4679.639, 'weight': 4, 'content': [{'end': 4681.8, 'text': "And then let's add a background.", 'start': 4679.639, 'duration': 2.161}, {'end': 4690.486, 'text': "We'll say background color and background color for this is going to be hexadecimal value one be two zero six.", 'start': 4682.141, 'duration': 8.345}, {'end': 4696.969, 'text': "OK And we'll make the color white text color white.", 'start': 4690.506, 'duration': 6.463}, {'end': 4702.573, 'text': "Let's also say margin zero.", 'start': 4697.69, 'duration': 4.883}, {'end': 4707.484, 'text': 'And I want to set set it make it uppercase.', 'start': 4704.921, 'duration': 2.563}, {'end': 4710.727, 'text': "So let's use text transform and set that to uppercase.", 'start': 4707.524, 'duration': 3.203}, {'end': 4714.19, 'text': 'And I want to just space out the letters a little bit.', 'start': 4712.188, 'duration': 2.002}], 'summary': 'Adding white background with hexadecimal value #1b206, setting text to uppercase.', 'duration': 34.551, 'max_score': 4679.639, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY4679639.jpg'}, {'end': 5035.632, 'src': 'embed', 'start': 5002.351, 'weight': 5, 'content': [{'end': 5004.853, 'text': "Right It has these two items in it and they're in a row.", 'start': 5002.351, 'duration': 2.502}, {'end': 5011.498, 'text': 'So I want to change that flex direction to a column so that they stack on top of each other.', 'start': 5005.214, 'duration': 6.284}, {'end': 5014.421, 'text': "Now that obviously doesn't look good.", 'start': 5012.499, 'duration': 1.922}, {'end': 5020.085, 'text': "So let's let's take the contact form.", 'start': 5014.581, 'duration': 5.504}, {'end': 5028.209, 'text': "And I'm going to want to take the width and set that to 100%.", 'start': 5024.168, 'duration': 4.041}, {'end': 5029.77, 'text': 'So that goes all the way across.', 'start': 5028.209, 'duration': 1.561}, {'end': 5035.632, 'text': "And then I'm going to change up the padding to 30 pixels, 30 pixels, 20 pixels.", 'start': 5030.67, 'duration': 4.962}], 'summary': 'Changing flex direction to column and adjusting contact form width and padding for better alignment.', 'duration': 33.281, 'max_score': 5002.351, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY5002351.jpg'}], 'start': 3826.203, 'title': 'Creating contact page, form, and styling', 'summary': 'Covers creating a contact page and form, form layout in html, contact info boxes, css form styling, and optimizing for different screen sizes, involving use of classes, css, html, and resulting in a visually appealing and responsive layout.', 'chapters': [{'end': 3924.202, 'start': 3826.203, 'title': 'Creating contact page and form', 'summary': 'Discusses creating a contact page and form by copying existing content, modifying titles, and structuring the form layout with classes and rows.', 'duration': 97.999, 'highlights': ['The chapter discusses creating a contact page and form by copying existing content, modifying titles, and structuring the form layout with classes and rows.', "The speaker mentions copying the existing content, modifying the title to 'contact us,' and creating a contact form layout with classes and rows.", "The speaker talks about creating a contact form with a class of 'contact-form' and structuring it with rows of inputs."]}, {'end': 4065.338, 'start': 3924.382, 'title': 'Creating form layout in html', 'summary': 'Discusses creating a form layout in html, with inputs for first name, last name, email, subject, message area, and a submit button, emphasizing the use of css for styling.', 'duration': 140.956, 'highlights': ['The form layout consists of input fields for first name, last name, email, subject, a message area, and a submit button.', 'The inputs are styled using CSS, with placeholders used as labels for the input fields.', 'The input fields for first name, last name, email, and subject are set to 50% width, while the message area and submit button are set to 100% width.']}, {'end': 4326.295, 'start': 4065.358, 'title': 'Creating contact info boxes', 'summary': 'Discusses the creation of contact info boxes for address, email, and phone number within a contact form, involving the use of classes, image sources, and styling in css.', 'duration': 260.937, 'highlights': ['Creation of contact info boxes for address, email, and phone number The transcript discusses the creation of info boxes for address, email, and phone number within a contact form.', 'Use of classes and image sources for the info boxes It involves the use of classes such as contact dash info, info dash box, contact dash icon, and image sources like images/address, email, and call for the info boxes.', 'Styling the contact form using CSS The chapter covers the styling of the contact form using CSS, including setting the width to 100%, adding a margin top of 50 pixels, and using display flex and justify content for alignment.']}, {'end': 4678.426, 'start': 4328.076, 'title': 'Css form styling', 'summary': 'Demonstrates how to style a form using css, including setting widths, padding, borders, and other visual attributes, resulting in a visually appealing and responsive form layout.', 'duration': 350.35, 'highlights': ["The form is styled to have a light gray background using CSS, and the width is adjusted using calculations and percentages for responsive design. The form's background is set to light gray, and the width is adjusted using CSS calculations and percentages for responsive design.", 'The inputs and text area are styled with specific widths, paddings, borders, and other visual attributes for a visually appealing and responsive layout. The inputs and text area are styled with specific widths, paddings, borders, and other visual attributes for a visually appealing and responsive layout.', "The form's inputs are set to be displayed side by side using the 'display: flex' property in CSS. The form's inputs are displayed side by side using the 'display: flex' property in CSS."]}, {'end': 4964.175, 'start': 4679.639, 'title': 'Styling contact information', 'summary': 'Covers the styling of contact information, including setting background color, text color, letter spacing, font weight, and aligning the items.', 'duration': 284.536, 'highlights': ['Setting background color for contact information to hexadecimal value #1B206E.', 'Adding padding to contact info of 60 pixels top, 40 pixels left and right, and 20 pixels bottom.', 'Aligning the items for info box using display flex and setting margin bottom to 40 pixels.']}, {'end': 5210.555, 'start': 4967.543, 'title': 'Optimizing contact form for different screen sizes', 'summary': 'Discusses optimizing the contact form for different screen sizes, adjusting flexbox properties, widths, and margins for improved display on various devices, resulting in a clean and organized layout for mobile, tablet, and desktop screens.', 'duration': 243.012, 'highlights': ['Adjusting the contact form flex direction to column so that items stack on top of each other and setting width to 100% for improved display on smaller screens.', 'Setting the width of contact info to 100% and adjusting margin and padding for better separation and display on different devices.', 'Demonstrating the clean and organized layout for mobile, tablet, and desktop screens, including iPhone 10 and iPad, resulting in a user-friendly experience.', 'Encouraging viewers to utilize the project for their portfolios, indicating the availability of code links in the description.']}], 'duration': 1384.352, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/lvYnfMOUOJY/pics/lvYnfMOUOJY3826203.jpg', 'highlights': ['The chapter covers creating a contact page and form by copying existing content, modifying titles, and structuring the form layout with classes and rows.', 'The form layout consists of input fields for first name, last name, email, subject, a message area, and a submit button.', 'Creation of contact info boxes for address, email, and phone number involving the use of classes and image sources for the info boxes.', 'The form is styled to have a light gray background using CSS, and the width is adjusted using calculations and percentages for responsive design.', 'Setting background color for contact information to hexadecimal value #1B206E.', 'Adjusting the contact form flex direction to column so that items stack on top of each other and setting width to 100% for improved display on smaller screens.']}], 'highlights': ['The website project involves creating a four-page website using HTML and CSS, focusing on CSS positioning, Flexbox, and CSS Grid for different pages.', 'The responsive design of the website ensures adaptability for mobile screens, with specific elements disappearing at certain breakpoints for a clean look.', 'The chapter emphasizes the use of CSS Grid for the services page and Flexbox for the work page, showcasing specific layout and design implementations.', 'A menu toggle feature with social media icons is incorporated, along with a form and address info on the contact page, adding interactive elements to the website.', 'The JavaScript function toggles the active class for the toggle and navigation elements, enabling the visual change from a menu icon to an X when activated.', 'Implement media queries for responsive design on iPhone 6, 7, 8, X, and iPad Pro.', 'Demonstrates the usage of CSS grid layout for responsive web designs, including defining column widths, setting percentages, using F.R. units, applying grid gap, aligning content, and implementing media queries.', 'Setting the portfolio as a flexbox and enabling flex wrap to ensure items wrap when they go out of the container.', 'The chapter covers creating a contact page and form by copying existing content, modifying titles, and structuring the form layout with classes and rows.']}