title
Learn HTML/CSS - #19 - Build a Full HTML Site Layout

description
In this tutorial, we will be building a full site using HTML/CSS. The site is fully usable and can be expanded and built upon to add extra features and improve the layout. You are free to use this layout for whatever you want, however it cannot be sold for a monetory gain. If you would like, it would be greatly appreciated if you were to leave a link back to the Coder's Guide YouTube channel as it would really help me out. 28 Days Later: http://dafont.com/28-days-later.font Project Files: http://coders-guide.com/downloads/projects/html-full-site.zip Live Demo: http://coders-guide.com/examples/html-full-site/ Website: http://coders-guide.com Twitter: http://twitter.com/coders_guide Facebook: http://goo.gl/DmWtB Google+: http://goo.gl/cGyk8 Donate: http://goo.gl/q3MPw

detail
{'title': 'Learn HTML/CSS - #19 - Build a Full HTML Site Layout', 'heatmap': [{'end': 342.319, 'start': 311.116, 'weight': 0.733}, {'end': 387.22, 'start': 358.06, 'weight': 0.879}, {'end': 446.731, 'start': 425.392, 'weight': 0.815}, {'end': 555.932, 'start': 472.211, 'weight': 0.935}, {'end': 626.434, 'start': 610.583, 'weight': 0.784}, {'end': 983.828, 'start': 952.505, 'weight': 0.871}, {'end': 1024.698, 'start': 1003.619, 'weight': 0.721}], 'summary': 'This tutorial covers creating a customizable html site with a blog layout, building website header and navigation, styling header and navigation bars, css styling elements and page content, and styling page tag and website footer, with specific details and measurements for each step.', 'chapters': [{'end': 77.448, 'segs': [{'end': 23.856, 'src': 'embed', 'start': 0.43, 'weight': 0, 'content': [{'end': 8.525, 'text': "So welcome to another HTML and CSS tutorial, and in this tutorial we're going to be creating a full HTML site from scratch,", 'start': 0.43, 'duration': 8.095}, {'end': 10.048, 'text': "and we'll do it from start to finish.", 'start': 8.525, 'duration': 1.523}, {'end': 14.273, 'text': "so what you're looking at right now is the site that we'll be building.", 'start': 11.232, 'duration': 3.041}, {'end': 16.454, 'text': "it's by no means the best site in the world.", 'start': 14.273, 'duration': 2.181}, {'end': 23.856, 'text': "it's just a very simple site, so you can kind of get to know what it's like to build a full site, and it's also very customizable.", 'start': 16.454, 'duration': 7.402}], 'summary': 'Creating a simple html site from scratch in a tutorial.', 'duration': 23.426, 'max_score': 0.43, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hD8wAdicAbs/pics/hD8wAdicAbs430.jpg'}, {'end': 77.448, 'src': 'embed', 'start': 36.88, 'weight': 1, 'content': [{'end': 39.42, 'text': "so what we're going to be doing is we're going to be creating this page here.", 'start': 36.88, 'duration': 2.54}, {'end': 45.935, 'text': "you see, we've got this header bar With the logo space and this navigation which you can easily add more items to or remove them.", 'start': 39.42, 'duration': 6.515}, {'end': 50.218, 'text': "It's going to be kind of like a blog layout in a way.", 'start': 46.915, 'duration': 3.303}, {'end': 57.143, 'text': 'But I mean once you finish this tutorial it will probably be a couple of tutorials in separate parts.', 'start': 50.899, 'duration': 6.244}, {'end': 63.115, 'text': "But once you've finished this, you'll be able to customize completely what goes in this big white box.", 'start': 58.271, 'duration': 4.844}, {'end': 69.601, 'text': 'So you could have a big featured slider thing, or maybe just some information.', 'start': 63.796, 'duration': 5.805}, {'end': 71.483, 'text': 'Or you could have a blog layout if you wanted to.', 'start': 69.681, 'duration': 1.802}, {'end': 73.004, 'text': 'You can have it however you want, really.', 'start': 71.823, 'duration': 1.181}, {'end': 74.685, 'text': "So that's what I'm saying.", 'start': 73.965, 'duration': 0.72}, {'end': 76.127, 'text': 'You can do whatever you want with this site.', 'start': 74.705, 'duration': 1.422}, {'end': 77.448, 'text': 'All right.', 'start': 77.128, 'duration': 0.32}], 'summary': 'Creating a customizable webpage with blog layout and various content options, through tutorials.', 'duration': 40.568, 'max_score': 36.88, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hD8wAdicAbs/pics/hD8wAdicAbs36880.jpg'}], 'start': 0.43, 'title': 'Creating a customizable html site', 'summary': 'Involves creating a simple, customizable html site from scratch with a blog layout, allowing users to add or remove items from the navigation and customize the content within the white box.', 'chapters': [{'end': 77.448, 'start': 0.43, 'title': 'Creating a customizable html site', 'summary': 'Involves creating a simple, customizable html site from scratch with a blog layout, allowing users to add or remove items from the navigation and customize the content within the white box.', 'duration': 77.018, 'highlights': ['The tutorial focuses on creating a simple, customizable HTML site from scratch, allowing users to understand the process of building a full site and customize it according to their preferences.', 'It involves creating a header bar with a logo space and navigation, which users can easily customize by adding or removing items.', 'The tutorial mentions the possibility of customizing the content within the big white box, allowing users to have a featured slider, information, or a blog layout, providing a high level of flexibility in site design.']}], 'duration': 77.018, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hD8wAdicAbs/pics/hD8wAdicAbs430.jpg', 'highlights': ['The tutorial focuses on creating a simple, customizable HTML site from scratch, allowing users to understand the process of building a full site and customize it according to their preferences.', 'It involves creating a header bar with a logo space and navigation, which users can easily customize by adding or removing items.', 'The tutorial mentions the possibility of customizing the content within the big white box, allowing users to have a featured slider, information, or a blog layout, providing a high level of flexibility in site design.']}, {'end': 526.627, 'segs': [{'end': 129.276, 'src': 'embed', 'start': 100.237, 'weight': 0, 'content': [{'end': 106.439, 'text': "so this is going to have a class this time, so we can use them all at once and it'll be container.", 'start': 100.237, 'duration': 6.202}, {'end': 110.001, 'text': 'and what this container is going to do is, if i go back to the site,', 'start': 106.439, 'duration': 3.562}, {'end': 116.464, 'text': "is it's gonna basically mark out the space that can be seen on all screens basically.", 'start': 111.539, 'duration': 4.925}, {'end': 123.47, 'text': "So you see the black bar extends, I'm gonna extend it all the way over my three monitors, and it kinda extends to fill your site.", 'start': 116.884, 'duration': 6.586}, {'end': 129.276, 'text': "So whether you're on three monitors and you extend all over three monitors, or if you're on this tiny little monitor, it will still fit.", 'start': 123.51, 'duration': 5.766}], 'summary': 'A new class will mark out space seen on all screens, extending to fit any screen size.', 'duration': 29.039, 'max_score': 100.237, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hD8wAdicAbs/pics/hD8wAdicAbs100237.jpg'}, {'end': 198.318, 'src': 'embed', 'start': 171.042, 'weight': 1, 'content': [{'end': 174.804, 'text': "So we're going to have a div and an ID of nav area.", 'start': 171.042, 'duration': 3.762}, {'end': 179.686, 'text': "I'm going through this quite quickly because I'm assuming you know how to use divs.", 'start': 176.325, 'duration': 3.361}, {'end': 184.229, 'text': 'And you should know divs and glosses and IDs as well.', 'start': 181.587, 'duration': 2.642}, {'end': 186.91, 'text': "Okay, so that's our nav area.", 'start': 185.469, 'duration': 1.441}, {'end': 192.276, 'text': "Now inside this navigation area, we're going to have an unordered list.", 'start': 188.294, 'duration': 3.982}, {'end': 196.057, 'text': 'Now if you remember back to one of the previous tutorials, we looked at unordered list.', 'start': 192.776, 'duration': 3.281}, {'end': 198.318, 'text': "It's basically like a big bullet point list.", 'start': 196.517, 'duration': 1.801}], 'summary': 'Creating a nav area with an unordered list for a website.', 'duration': 27.276, 'max_score': 171.042, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hD8wAdicAbs/pics/hD8wAdicAbs171042.jpg'}, {'end': 309.815, 'src': 'embed', 'start': 279.846, 'weight': 2, 'content': [{'end': 285.072, 'text': "So looking back at our previous site, what we're going to do, this is 100 pixels, this height here.", 'start': 279.846, 'duration': 5.226}, {'end': 288.096, 'text': "So let's create the header with the background color and everything.", 'start': 285.733, 'duration': 2.363}, {'end': 292.821, 'text': "So in our styling, what I'm first gonna do is remove the margins.", 'start': 289.318, 'duration': 3.503}, {'end': 297.545, 'text': "So for everything, let's set the margin to zero and the padding to zero.", 'start': 293.722, 'duration': 3.823}, {'end': 300.728, 'text': 'Right like that.', 'start': 299.947, 'duration': 0.781}, {'end': 309.815, 'text': "And what we'll do is we'll set the body, because you'll notice that in this, we are using Arial as all of our text.", 'start': 301.568, 'duration': 8.247}], 'summary': 'Styling the header with 100 pixels height, setting margins and padding to zero, and using arial font for all text.', 'duration': 29.969, 'max_score': 279.846, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hD8wAdicAbs/pics/hD8wAdicAbs279846.jpg'}, {'end': 342.319, 'src': 'heatmap', 'start': 311.116, 'weight': 0.733, 'content': [{'end': 315.16, 'text': "So we'll set the font-family to Arial.", 'start': 311.116, 'duration': 4.044}, {'end': 324.388, 'text': 'We also want to set the background color, so background to hash eb, eb, eb.', 'start': 316.803, 'duration': 7.585}, {'end': 326.549, 'text': 'And that gives us that really light gray.', 'start': 324.688, 'duration': 1.861}, {'end': 333.334, 'text': "So if I look at this now, we've got this really light gray as opposed to that white that we had a moment ago.", 'start': 326.589, 'duration': 6.745}, {'end': 334.795, 'text': "And also we've got Arial.", 'start': 333.794, 'duration': 1.001}, {'end': 338.317, 'text': "And you'll notice that there are no bullet points on here.", 'start': 335.695, 'duration': 2.622}, {'end': 342.319, 'text': 'That is because we are so close to the edge that the bullet points are kind of hanging over.', 'start': 339.037, 'duration': 3.282}], 'summary': 'Setting arial font and light gray background color, removing bullet points.', 'duration': 31.203, 'max_score': 311.116, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hD8wAdicAbs/pics/hD8wAdicAbs311116.jpg'}, {'end': 387.22, 'src': 'heatmap', 'start': 358.06, 'weight': 0.879, 'content': [{'end': 362.163, 'text': "We'll give it a height of 100 pixels because that's what it was in the other one.", 'start': 358.06, 'duration': 4.103}, {'end': 367.708, 'text': 'And the width will be 100% so that it stretches across the entire page no matter how big your screen is.', 'start': 362.803, 'duration': 4.905}, {'end': 375.497, 'text': "So if I refresh it now, this is black, and we've got this black bar going all the way across, no matter how I stretch it.", 'start': 369.335, 'duration': 6.162}, {'end': 381.198, 'text': "Right, the next thing we're gonna do is we're gonna set up this logo area.", 'start': 377.617, 'duration': 3.581}, {'end': 387.22, 'text': "Actually, no, let's set up the container first.", 'start': 385.059, 'duration': 2.161}], 'summary': 'Setting height to 100 pixels and width to 100% for the black bar, followed by setting up the logo area and container.', 'duration': 29.16, 'max_score': 358.06, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hD8wAdicAbs/pics/hD8wAdicAbs358060.jpg'}, {'end': 453.773, 'src': 'heatmap', 'start': 425.392, 'weight': 0.815, 'content': [{'end': 433.537, 'text': "so it's going to have zero pixels on the top and it's going to be automatically decided for the side, so that will make it centered.", 'start': 425.392, 'duration': 8.145}, {'end': 434.478, 'text': 'So now if I refresh..', 'start': 433.597, 'duration': 0.881}, {'end': 442.21, 'text': 'we see that the navigation is now being pulled here because our container starts here and probably ends somewhere around here.', 'start': 436.069, 'duration': 6.141}, {'end': 446.731, 'text': 'So the next thing we need to do is put our logo area in.', 'start': 444.311, 'duration': 2.42}, {'end': 453.773, 'text': "So we're going to do hash logo and we'll call this logo area like we did before.", 'start': 446.751, 'duration': 7.022}], 'summary': 'The navigation is centered with zero pixels on top, and the logo area is being worked on.', 'duration': 28.381, 'max_score': 425.392, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hD8wAdicAbs/pics/hD8wAdicAbs425392.jpg'}], 'start': 77.968, 'title': 'Building website header and navigation', 'summary': 'Discusses the process of creating a website header and navigation, including the header div, screen-fitting container, logo area, navigation area with an unordered list, and css styling adjustments.', 'chapters': [{'end': 526.627, 'start': 77.968, 'title': 'Building website header and navigation', 'summary': 'Discusses building the website header and navigation, including creating a header div, a container for screen-fitting, logo area, navigation area with an unordered list, and styling adjustments with css.', 'duration': 448.659, 'highlights': ['Creating a container for screen-fitting The container is designed to mark out the space that can be seen on all screens, ensuring it fits from small to large monitors and extends across multiple monitors.', 'Styling adjustments with CSS The speaker discusses removing margins and setting padding to zero, setting the font-family to Arial, and adjusting the background color to a light gray, as well as styling the header and logo area with specific dimensions and background images.', 'Creating navigation area and unordered list The process involves creating a navigation area with an unordered list to be used for navigation, with specific list items for home, products, portfolio, and about.']}], 'duration': 448.659, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hD8wAdicAbs/pics/hD8wAdicAbs77968.jpg', 'highlights': ['Creating a container for screen-fitting The container is designed to mark out the space that can be seen on all screens, ensuring it fits from small to large monitors and extends across multiple monitors.', 'Creating navigation area and unordered list The process involves creating a navigation area with an unordered list to be used for navigation, with specific list items for home, products, portfolio, and about.', 'Styling adjustments with CSS The speaker discusses removing margins and setting padding to zero, setting the font-family to Arial, and adjusting the background color to a light gray, as well as styling the header and logo area with specific dimensions and background images.']}, {'end': 816.319, 'segs': [{'end': 608.101, 'src': 'embed', 'start': 527.867, 'weight': 0, 'content': [{'end': 529.527, 'text': 'Now you see that this is being pushed down here.', 'start': 527.867, 'duration': 1.66}, {'end': 532.248, 'text': 'And the reason that is is because of floats.', 'start': 530.608, 'duration': 1.64}, {'end': 538.817, 'text': "Now what I'm just going to first do is set our logo image, and then we'll sort that out.", 'start': 533.672, 'duration': 5.145}, {'end': 543.601, 'text': "So the URL here is just simply logo.png, because that's the file type.", 'start': 539.778, 'duration': 3.823}, {'end': 547.585, 'text': 'So now if we refresh that, you see the logo is right there.', 'start': 545.323, 'duration': 2.262}, {'end': 549.366, 'text': 'These are going red.', 'start': 548.706, 'duration': 0.66}, {'end': 553.51, 'text': 'Just ignore it.', 'start': 552.149, 'duration': 1.361}, {'end': 555.932, 'text': "So there's our header bar looking good so far.", 'start': 554.191, 'duration': 1.741}, {'end': 559.635, 'text': 'Now we need to get this to go and float all the way up here.', 'start': 557.153, 'duration': 2.482}, {'end': 563.142, 'text': 'So we can do that using floats as I already said.', 'start': 560.72, 'duration': 2.422}, {'end': 565.344, 'text': 'The logo area is gonna float to the left.', 'start': 563.162, 'duration': 2.182}, {'end': 570.428, 'text': "So it's gonna slide up to the left and we need to style the navigation now.", 'start': 565.624, 'duration': 4.804}, {'end': 575.413, 'text': 'So for the navigation, we called it hashtag nav area.', 'start': 572.01, 'duration': 3.403}, {'end': 580.738, 'text': 'So the width.', 'start': 580.137, 'duration': 0.601}, {'end': 586.302, 'text': "To figure out the width, what we're gonna do is, you won't need a calculator for this, it's quite simple.", 'start': 581.598, 'duration': 4.704}, {'end': 594.329, 'text': 'We know that the width of our container is 960 pixels, so the amount of space it has is 960 pixels.', 'start': 588.104, 'duration': 6.225}, {'end': 603.937, 'text': "So we're gonna do 960, and then minus the space in the logo area, so that's 660 pixels, and that is how wide our nav can be.", 'start': 595.93, 'duration': 8.007}, {'end': 605.919, 'text': "So it'll fit in there perfectly.", 'start': 603.957, 'duration': 1.962}, {'end': 608.101, 'text': "We'll also set the height.", 'start': 607.26, 'duration': 0.841}], 'summary': 'Styling web layout with logo.png, using floats for positioning, and calculating nav width.', 'duration': 80.234, 'max_score': 527.867, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hD8wAdicAbs/pics/hD8wAdicAbs527867.jpg'}, {'end': 631.398, 'src': 'heatmap', 'start': 610.583, 'weight': 0.784, 'content': [{'end': 620.09, 'text': "to um 100 pixels and we'll float it to the right.", 'start': 610.583, 'duration': 9.507}, {'end': 623.312, 'text': "save that and let's run it.", 'start': 620.09, 'duration': 3.222}, {'end': 626.434, 'text': 'and you see, this is now floated up to here.', 'start': 623.312, 'duration': 3.122}, {'end': 631.398, 'text': "now what we're going to do is we're going to style the actual buttons and we'll get first,", 'start': 626.434, 'duration': 4.964}], 'summary': 'Styling buttons to float 100 pixels to the right.', 'duration': 20.815, 'max_score': 610.583, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hD8wAdicAbs/pics/hD8wAdicAbs610583.jpg'}, {'end': 714.915, 'src': 'embed', 'start': 643.737, 'weight': 3, 'content': [{'end': 650.039, 'text': "our unordered list is called nav, so we're just gonna style, hash nav and we can use the list.", 'start': 643.737, 'duration': 6.302}, {'end': 655.98, 'text': 'this helps spell it right list style and set it to none.', 'start': 650.039, 'duration': 5.941}, {'end': 664.982, 'text': 'So what this will do, what this will do is that it basically gets rid of all these list bullet points.', 'start': 657.1, 'duration': 7.882}, {'end': 669.483, 'text': "So what we're next going to do is we want to change the coloring.", 'start': 667.222, 'duration': 2.261}, {'end': 674.944, 'text': "So to do this, what we're going to do is hash nav and then A.", 'start': 670.523, 'duration': 4.421}, {'end': 677.245, 'text': 'So hash nav A.', 'start': 674.944, 'duration': 2.301}, {'end': 685.048, 'text': "So any links that are inside the nav, we're going to set the color to white, like that.", 'start': 677.245, 'duration': 7.803}, {'end': 688.709, 'text': 'So there you go.', 'start': 688.208, 'duration': 0.501}, {'end': 693.63, 'text': "And let's also change the underline.", 'start': 690.029, 'duration': 3.601}, {'end': 710.272, 'text': "text-decoration. so normally, if we were trying to create an underline, we'd put underline here,", 'start': 700.905, 'duration': 9.367}, {'end': 714.915, 'text': "but instead we're going to set it to none to clear the underline that's already there.", 'start': 710.272, 'duration': 4.643}], 'summary': "Styling the unordered list 'nav' by removing bullet points, changing color to white, and clearing underlines.", 'duration': 71.178, 'max_score': 643.737, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hD8wAdicAbs/pics/hD8wAdicAbs643737.jpg'}, {'end': 767.936, 'src': 'embed', 'start': 737.89, 'weight': 7, 'content': [{'end': 739.91, 'text': "Now, what this is going to do is it's going to make it horizontal.", 'start': 737.89, 'duration': 2.02}, {'end': 745.811, 'text': 'The next thing we want to do is add the margins, so we need to put the gaps in between these.', 'start': 741.27, 'duration': 4.541}, {'end': 747.891, 'text': 'That, again, is simple.', 'start': 747.151, 'duration': 0.74}, {'end': 754.913, 'text': "We're going to do margin-left, and on the previous one, on the other side, we did 30 pixels.", 'start': 747.951, 'duration': 6.962}, {'end': 759.752, 'text': "So now we're going to refresh it.", 'start': 758.772, 'duration': 0.98}, {'end': 761.573, 'text': 'And there we go.', 'start': 761.093, 'duration': 0.48}, {'end': 767.936, 'text': 'So the next thing we need to do is figure out why this about one is coming down here.', 'start': 762.674, 'duration': 5.262}], 'summary': 'Adding horizontal orientation and margins; setting margin-left to 30 pixels.', 'duration': 30.046, 'max_score': 737.89, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hD8wAdicAbs/pics/hD8wAdicAbs737890.jpg'}], 'start': 527.867, 'title': 'Styling header and navigation bars', 'summary': 'Covers styling a header bar with floats, adjusting logo image, and determining navigation area width based on a 960-pixel container. it also demonstrates styling a navigation bar using css, removing bullet points, changing colors, and creating a clean horizontal bar.', 'chapters': [{'end': 608.101, 'start': 527.867, 'title': 'Styling header bar with floats', 'summary': 'Discusses styling a header bar using floats, adjusting the logo image, and determining the width of the navigation area based on a container width of 960 pixels.', 'duration': 80.234, 'highlights': ['Determining the width of the navigation area The width of the navigation area is calculated as 960 pixels minus the space occupied by the logo, resulting in a width of 660 pixels.', 'Styling the header bar using floats The process involves floating the logo area to the left and determining the width and height of the navigation area based on the container width of 960 pixels.', "Setting the logo image The logo image is set as 'logo.png' and displayed successfully after refreshing the page."]}, {'end': 816.319, 'start': 610.583, 'title': 'Styling navigation bar with css', 'summary': 'Demonstrates how to style a navigation bar using css, including removing bullet points, changing colors, and arranging items horizontally, resulting in a clean and horizontal navigation bar.', 'duration': 205.736, 'highlights': ['The chapter demonstrates how to style a navigation bar using CSS, including removing bullet points, changing colors, and arranging items horizontally.', 'CSS is used to remove bullet points from the navigation bar by setting the list-style to none, resulting in the elimination of list bullet points.', 'The color of links inside the navigation bar is set to white using CSS, resulting in a color change for the links.', 'The navigation items are styled to float to the left, resulting in a horizontal arrangement of the navigation bar items.', 'Margin-left is used to create gaps between the navigation bar items, resulting in a clean and organized layout.']}], 'duration': 288.452, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hD8wAdicAbs/pics/hD8wAdicAbs527867.jpg', 'highlights': ['Determining the width of the navigation area The width of the navigation area is calculated as 960 pixels minus the space occupied by the logo, resulting in a width of 660 pixels.', 'Styling the header bar using floats The process involves floating the logo area to the left and determining the width and height of the navigation area based on the container width of 960 pixels.', "Setting the logo image The logo image is set as 'logo.png' and displayed successfully after refreshing the page.", 'The chapter demonstrates how to style a navigation bar using CSS, including removing bullet points, changing colors, and arranging items horizontally.', 'CSS is used to remove bullet points from the navigation bar by setting the list-style to none, resulting in the elimination of list bullet points.', 'The color of links inside the navigation bar is set to white using CSS, resulting in a color change for the links.', 'The navigation items are styled to float to the left, resulting in a horizontal arrangement of the navigation bar items.', 'Margin-left is used to create gaps between the navigation bar items, resulting in a clean and organized layout.']}, {'end': 1120.785, 'segs': [{'end': 877.891, 'src': 'embed', 'start': 816.379, 'weight': 3, 'content': [{'end': 820.3, 'text': 'It will just auto-expand based on how much is in there.', 'start': 816.379, 'duration': 3.921}, {'end': 825.456, 'text': "So the next thing we're going to do is we're going to add a background color to this.", 'start': 822.054, 'duration': 3.402}, {'end': 831.418, 'text': 'And the background color for this is going to be hash 252525.', 'start': 828.377, 'duration': 3.041}, {'end': 831.818, 'text': 'Save that.', 'start': 831.418, 'duration': 0.4}, {'end': 835.56, 'text': "Let's have a look at it.", 'start': 831.978, 'duration': 3.582}, {'end': 838.821, 'text': 'And you see we now have this gray color here.', 'start': 837.341, 'duration': 1.48}, {'end': 840.362, 'text': "So that's looking good.", 'start': 838.841, 'duration': 1.521}, {'end': 842.623, 'text': "We're going to set up padding.", 'start': 841.622, 'duration': 1.001}, {'end': 845.364, 'text': 'And this is going to be eight pixels.', 'start': 844.244, 'duration': 1.12}, {'end': 847.245, 'text': 'Save that.', 'start': 846.745, 'duration': 0.5}, {'end': 851.915, 'text': "And you see now we've got these square boxes around them.", 'start': 849.554, 'duration': 2.361}, {'end': 857.819, 'text': "The next thing we're going to do is put a border around them, like a light sort of silver border.", 'start': 853.456, 'duration': 4.363}, {'end': 865.784, 'text': "So we'll do border, one pixel, solid, and silver.", 'start': 858.84, 'duration': 6.944}, {'end': 872.908, 'text': "So now you see they've got this silver kind of border around them.", 'start': 870.867, 'duration': 2.041}, {'end': 876.29, 'text': "Now you'll notice that before we had these curved borders.", 'start': 873.588, 'duration': 2.702}, {'end': 877.891, 'text': "So let's add those in now.", 'start': 877.01, 'duration': 0.881}], 'summary': 'Styling with gray background, padding, and silver border.', 'duration': 61.512, 'max_score': 816.379, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hD8wAdicAbs/pics/hD8wAdicAbs816379.jpg'}, {'end': 948.302, 'src': 'embed', 'start': 897.425, 'weight': 2, 'content': [{'end': 904.389, 'text': 'then you might want to look into using Firefox-compatible ones and Internet Explorer-compatible ones and everything.', 'start': 897.425, 'duration': 6.964}, {'end': 907.491, 'text': "So we're going to set a border-radius of 5 pixels.", 'start': 905.169, 'duration': 2.322}, {'end': 913.142, 'text': "And there's the sort of curved corners there.", 'start': 910.754, 'duration': 2.388}, {'end': 947.402, 'text': "Okay, so the next thing we need to do is sort of add this margin to the top of these buttons, so there'll be a bit of a distance there,", 'start': 939.918, 'duration': 7.484}, {'end': 948.302, 'text': "so they're not right at the top.", 'start': 947.402, 'duration': 0.9}], 'summary': 'Using firefox and internet explorer-compatible elements, set a 5-pixel border-radius and add a margin to the top of buttons.', 'duration': 50.877, 'max_score': 897.425, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hD8wAdicAbs/pics/hD8wAdicAbs897425.jpg'}, {'end': 1031.16, 'src': 'heatmap', 'start': 1003.619, 'weight': 1, 'content': [{'end': 1010.381, 'text': "And we'll set the background color to gray.", 'start': 1003.619, 'duration': 6.762}, {'end': 1014.563, 'text': "Save that and let's run it.", 'start': 1012.962, 'duration': 1.601}, {'end': 1020.105, 'text': "And we refresh and now we've got these hover over effects and these buttons.", 'start': 1016.024, 'duration': 4.081}, {'end': 1021.926, 'text': 'I can close this as well now.', 'start': 1020.865, 'duration': 1.061}, {'end': 1024.698, 'text': 'Okay, so now our header is looking really good.', 'start': 1023.177, 'duration': 1.521}, {'end': 1031.16, 'text': "That wasn't that hard, was it? So now what we can do is we can start styling the actual page.", 'start': 1024.738, 'duration': 6.422}], 'summary': 'Styling added: gray background, hover effects, and buttons for header.', 'duration': 78.655, 'max_score': 1003.619, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hD8wAdicAbs/pics/hD8wAdicAbs1003619.jpg'}, {'end': 1120.785, 'src': 'embed', 'start': 1089.943, 'weight': 0, 'content': [{'end': 1092.864, 'text': 'These are just paragraph tags and heading 3s.', 'start': 1089.943, 'duration': 2.921}, {'end': 1094.544, 'text': "And I'm just going to remove this line.", 'start': 1093.364, 'duration': 1.18}, {'end': 1097.985, 'text': 'Just like that.', 'start': 1094.564, 'duration': 3.421}, {'end': 1102.986, 'text': "So now, if I run this, you see we've got all of our text.", 'start': 1099.205, 'duration': 3.781}, {'end': 1107.606, 'text': "And.. Ah, see what's happened here.", 'start': 1104.146, 'duration': 3.46}, {'end': 1110.927, 'text': "This is kind of formatted all weirdly, but that's not a problem.", 'start': 1108.086, 'duration': 2.841}, {'end': 1120.785, 'text': "Okay, so that won't make any difference, it's just the way the code is laid out, just to make it easier for us.", 'start': 1116.243, 'duration': 4.542}], 'summary': 'Text formatting appears oddly, but does not affect functionality.', 'duration': 30.842, 'max_score': 1089.943, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hD8wAdicAbs/pics/hD8wAdicAbs1089943.jpg'}], 'start': 816.379, 'title': 'Css styling elements and page content', 'summary': 'Covers styling elements with css including background color, padding, and borders with specific values and measurements. it also includes adding border-radius, setting margins, fixing float issues, adding hover effects, and styling page content with div and classes.', 'chapters': [{'end': 877.891, 'start': 816.379, 'title': 'Styling elements with css', 'summary': 'Covers adding background color, setting up padding, and adding borders to elements, with specific values and measurements used, resulting in a visually enhanced web page.', 'duration': 61.512, 'highlights': ['Adding a background color with hash 252525, resulting in a gray color.', 'Setting up padding of eight pixels, creating square boxes around the elements.', 'Adding a one-pixel solid silver border to the elements, enhancing their appearance.']}, {'end': 1120.785, 'start': 879.855, 'title': 'Styling header and page content', 'summary': 'Covers adding border-radius, setting margin-top for buttons, fixing float issues, adding hover effects, and styling the main page content with div and classes.', 'duration': 240.93, 'highlights': ['The chapter covers adding border-radius, setting margin-top for buttons, fixing float issues, adding hover effects, and styling the main page content with div and classes.', 'The tutorial uses a border-radius of 5 pixels for buttons, and sets a margin-top of 30 pixels for proper alignment.', 'Float issues are addressed and fixed, resulting in the proper alignment of buttons and header.', 'Hover effects are implemented by changing the background color to gray when hovering over the buttons.', 'The main page content is styled using div and classes, with the addition of prepared paragraph tags and heading 3s.']}], 'duration': 304.406, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hD8wAdicAbs/pics/hD8wAdicAbs816379.jpg', 'highlights': ['The main page content is styled using div and classes, with the addition of prepared paragraph tags and heading 3s.', 'Float issues are addressed and fixed, resulting in the proper alignment of buttons and header.', 'The tutorial uses a border-radius of 5 pixels for buttons, and sets a margin-top of 30 pixels for proper alignment.', 'Adding a background color with hash 252525, resulting in a gray color.', 'Adding a one-pixel solid silver border to the elements, enhancing their appearance.', 'Setting up padding of eight pixels, creating square boxes around the elements.', 'Hover effects are implemented by changing the background color to gray when hovering over the buttons.']}, {'end': 1421.865, 'segs': [{'end': 1159.647, 'src': 'embed', 'start': 1122.346, 'weight': 0, 'content': [{'end': 1123.987, 'text': "Next thing we're going to do is style this page tag.", 'start': 1122.346, 'duration': 1.641}, {'end': 1130.31, 'text': "So the container is already styled, that's what's going to censor it and give us that 960 pixels, but we're going to style this page tag.", 'start': 1124.327, 'duration': 5.983}, {'end': 1134.932, 'text': "So we're going to go .page, because it was a class.", 'start': 1131.81, 'duration': 3.122}, {'end': 1142.696, 'text': "And after this we're going to have a background color of white, because remember the background is that light silver color.", 'start': 1137.053, 'duration': 5.643}, {'end': 1145.257, 'text': "We'll have a padding of 20 pixels.", 'start': 1143.336, 'duration': 1.921}, {'end': 1150.262, 'text': "And we'll leave it like that for now.", 'start': 1147.601, 'duration': 2.661}, {'end': 1159.647, 'text': "So now if I run this, if I refresh, you see we've got all of this padding and everything like that.", 'start': 1153.024, 'duration': 6.623}], 'summary': 'Styling page tag with white background, 20px padding.', 'duration': 37.301, 'max_score': 1122.346, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hD8wAdicAbs/pics/hD8wAdicAbs1122346.jpg'}, {'end': 1251.469, 'src': 'embed', 'start': 1182.236, 'weight': 1, 'content': [{'end': 1188.883, 'text': "And inside here, we're going to have container just so it kind of centers.", 'start': 1182.236, 'duration': 6.647}, {'end': 1193.748, 'text': 'Div class equals container.', 'start': 1189.343, 'duration': 4.405}, {'end': 1200.71, 'text': 'And then here we can have all of our text that we want.', 'start': 1198.208, 'duration': 2.502}, {'end': 1203.632, 'text': "So in my case, I'm just going to copy and paste the text that I had before.", 'start': 1200.89, 'duration': 2.742}, {'end': 1204.613, 'text': 'Paste it in there.', 'start': 1204.052, 'duration': 0.561}, {'end': 1207.215, 'text': "And there's our copyright notice.", 'start': 1205.954, 'duration': 1.261}, {'end': 1211.158, 'text': 'Well, you could put your own copyright notice in there and also put who maintains it.', 'start': 1207.815, 'duration': 3.343}, {'end': 1212.118, 'text': 'You could put whatever you want in there.', 'start': 1211.178, 'duration': 0.94}, {'end': 1214.12, 'text': "So let's take a look at this.", 'start': 1213.379, 'duration': 0.741}, {'end': 1218.283, 'text': "You see we've got this footer here.", 'start': 1217.162, 'duration': 1.121}, {'end': 1221.105, 'text': 'Now we need to make it black and put all the styling in.', 'start': 1218.363, 'duration': 2.742}, {'end': 1224.728, 'text': 'So we can go hash footer.', 'start': 1223.787, 'duration': 0.941}, {'end': 1251.469, 'text': "And in here, it's going to have a background color of black, a height of 40 pixels, a width of 100 pixels, so it stretches across the header.", 'start': 1232.265, 'duration': 19.204}], 'summary': 'Adding a black footer with specific styling to the container.', 'duration': 69.233, 'max_score': 1182.236, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hD8wAdicAbs/pics/hD8wAdicAbs1182236.jpg'}, {'end': 1351.595, 'src': 'embed', 'start': 1295.57, 'weight': 3, 'content': [{'end': 1302.036, 'text': "Refresh And we'll just change the height back to 40 like it was.", 'start': 1295.57, 'duration': 6.466}, {'end': 1305.058, 'text': 'And refresh.', 'start': 1304.498, 'duration': 0.56}, {'end': 1306.199, 'text': "And that's looking perfect.", 'start': 1305.299, 'duration': 0.9}, {'end': 1312.627, 'text': "So when you're making big sites like this, you've kind of got to keep in mind that it's a bit of trial and error.", 'start': 1307.245, 'duration': 5.382}, {'end': 1316.329, 'text': "You've got to trial and error with your values, especially with numbers and things.", 'start': 1312.707, 'duration': 3.622}, {'end': 1319.77, 'text': "You've got to see what looks good, what fits, and everything like that.", 'start': 1316.709, 'duration': 3.061}, {'end': 1326.313, 'text': 'One last thing, you want to add a bit of a padding to the bottom of these paragraphs.', 'start': 1321.211, 'duration': 5.102}, {'end': 1329.454, 'text': 'So we can start with a P tag.', 'start': 1328.274, 'duration': 1.18}, {'end': 1335.997, 'text': "And don't forget, if you're not going to have paragraphs in your site, then you won't need to worry about this.", 'start': 1332.776, 'duration': 3.221}, {'end': 1345.194, 'text': "But I'm just going to simply do a margin-bottom and we'll set it to 20 pixels.", 'start': 1337.773, 'duration': 7.421}, {'end': 1347.355, 'text': 'Refresh that.', 'start': 1346.755, 'duration': 0.6}, {'end': 1351.595, 'text': "And that's looking really good.", 'start': 1350.755, 'duration': 0.84}], 'summary': 'Trial and error when designing big sites, like adjusting height and adding padding, with a margin-bottom set to 20 pixels.', 'duration': 56.025, 'max_score': 1295.57, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hD8wAdicAbs/pics/hD8wAdicAbs1295570.jpg'}], 'start': 1122.346, 'title': 'Styling page tag and website footer', 'summary': 'Covers styling the page tag with a white background color, 20-pixel padding, and adding a footer with copyright notice and maintenance information. it also demonstrates styling a website footer with black background color, adjusted padding, and a recommendation to add 20-pixel margin-bottom to paragraphs.', 'chapters': [{'end': 1211.158, 'start': 1122.346, 'title': 'Styling page tag and adding footer', 'summary': 'Covers styling the page tag by adding a white background color and a 20-pixel padding, and then proceeds to add a footer with a copyright notice and maintenance information.', 'duration': 88.812, 'highlights': ['The container is already styled to give a 960-pixel width, and the next step is to style the page tag with a white background color and 20-pixel padding.', "The footer is created by adding a div with id 'footer' and a container to center the content, and then adding copyright notice and maintenance information."]}, {'end': 1421.865, 'start': 1211.178, 'title': 'Styling website footer and padding', 'summary': 'Demonstrates the process of styling a website footer, including setting the background color to black, adjusting the padding, and removing excess padding, with a recommendation to add a 20-pixel margin-bottom to paragraphs for a visually appealing design.', 'duration': 210.687, 'highlights': ['The process of styling a website footer, including setting the background color to black, adjusting the padding, and removing excess padding. Demonstrates setting the footer background color to black, adjusting padding, and removing excess padding, contributing to a visually appealing website design.', 'Recommendation to add a 20-pixel margin-bottom to paragraphs for a visually appealing design. Suggests adding a 20-pixel margin-bottom to paragraphs for a visually appealing website design.', 'Trial and error process for finding suitable values and fittings for website design. Emphasizes the trial and error process for determining suitable values and fittings for website design, highlighting the importance of visual appeal and proper fitting.']}], 'duration': 299.519, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/hD8wAdicAbs/pics/hD8wAdicAbs1122346.jpg', 'highlights': ['The container is already styled to give a 960-pixel width, and the next step is to style the page tag with a white background color and 20-pixel padding.', "The footer is created by adding a div with id 'footer' and a container to center the content, and then adding copyright notice and maintenance information.", 'The process of styling a website footer, including setting the background color to black, adjusting the padding, and removing excess padding. Demonstrates setting the footer background color to black, adjusting padding, and removing excess padding, contributing to a visually appealing website design.', 'Recommendation to add a 20-pixel margin-bottom to paragraphs for a visually appealing design. Suggests adding a 20-pixel margin-bottom to paragraphs for a visually appealing website design.', 'Trial and error process for finding suitable values and fittings for website design. Emphasizes the trial and error process for determining suitable values and fittings for website design, highlighting the importance of visual appeal and proper fitting.', 'Covers styling the page tag with a white background color, 20-pixel padding, and adding a footer with copyright notice and maintenance information. it also demonstrates styling a website footer with black background color, adjusted padding, and a recommendation to add 20-pixel margin-bottom to paragraphs.']}], 'highlights': ['The tutorial covers creating a customizable HTML site with a blog layout and specific details for each step.', 'Creating a header bar with a logo space and customizable navigation.', 'Customizing the content within the big white box for a featured slider, information, or a blog layout.', 'Creating a container for screen-fitting to ensure it fits from small to large monitors and extends across multiple monitors.', 'Styling adjustments with CSS including removing margins, setting padding to zero, and adjusting background color.', 'Determining the width of the navigation area as 660 pixels and styling the header bar using floats.', "Setting the logo image as 'logo.png' and styling the navigation bar using CSS.", 'Styling the main page content using div and classes, addressing float issues, and adding hover effects.', 'Styling the page tag with a white background color and 20-pixel padding, and creating a footer with copyright notice and maintenance information.', 'Recommendation to add a 20-pixel margin-bottom to paragraphs for a visually appealing design and emphasizing the trial and error process for finding suitable values and fittings for website design.']}