title
Create a Responsive Website Using HTML5 and CSS3

description
This is a standalone complete HTML5 and CSS3 Website Building Tutorial. You can check the demo and download files here - http://www.1stwebdesigner.com/responsive-website-tutorial/ Hope you enjoyed this tutorial! And if you want to go in-depth, check this guide out this PSD to HTML tutorial: http://www.1stwebdesigner.com/psd-to-html/ If you are enjoying this video and are looking for more, we created The Ultimate 2015 Web Design Learning Course, where in 9 hours we will teach you how to Build Your Own WordPress Site - 100% Responsive & Flat - http://rockingcode.com/ You will learn how to build website from scratch in Photoshop, then convert PSD to HTML and CSS. Finally using Bootstrap magic, we will covert website to fully responsive and functional WordPress website. We throw in some business lessons, interviews and many bonuses to amplify your learning and help you get some clients as well! What you are waiting for? Take your skills to the next level right now with http://rockingcode.com/

detail
{'title': 'Create a Responsive Website Using HTML5 and CSS3', 'heatmap': [{'end': 1117.207, 'start': 1076.789, 'weight': 0.801}, {'end': 1997.237, 'start': 1910.749, 'weight': 1}, {'end': 2356.919, 'start': 2271.374, 'weight': 0.803}, {'end': 2521.313, 'start': 2391.687, 'weight': 0.714}], 'summary': 'Tutorial covers creating a responsive html5 css3 theme, emphasizing hands-on coding, including basics, web page structure, responsive design, css styling, and container styling, resulting in a 330-line code layout and support for queries and feedback.', 'chapters': [{'end': 219.949, 'segs': [{'end': 41.498, 'src': 'embed', 'start': 14.343, 'weight': 0, 'content': [{'end': 23.189, 'text': 'Hi guys, this is Kristian from firstwebdesigner.com, and, as I promised you in my HTML5 and CSS3 articles,', 'start': 14.343, 'duration': 8.846}, {'end': 29.734, 'text': 'I will today help you through this video tutorial, create a fully responsive HTML5 CSS3 theme.', 'start': 23.189, 'duration': 6.545}, {'end': 41.498, 'text': "before starting, I just want to tell you that there's no way you'll understand much of this tutorial if you didn't read my previous two articles.", 'start': 33.296, 'duration': 8.202}], 'summary': 'Kristian from firstwebdesigner.com is providing a video tutorial to create a fully responsive html5 css3 theme, with the prerequisite of reading his previous two articles.', 'duration': 27.155, 'max_score': 14.343, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo14343.jpg'}, {'end': 106.093, 'src': 'embed', 'start': 68.076, 'weight': 2, 'content': [{'end': 77.343, 'text': 'as simple as it gets, because the reason behind this is that I do not want to create complicated stuff to confuse you.', 'start': 68.076, 'duration': 9.267}, {'end': 84.009, 'text': "I want to create it as simple as possible to be able for you to be able to follow me, and that's why I chose a very,", 'start': 77.343, 'duration': 6.666}, {'end': 87.492, 'text': 'very simple theme which we can work with today.', 'start': 84.009, 'duration': 3.483}, {'end': 97.182, 'text': 'and before jumping into it, I also want to tell you that, although in the beginning I thought I will make the theme available for you to download,', 'start': 87.492, 'duration': 9.69}, {'end': 98.222, 'text': 'I decided against it.', 'start': 97.182, 'duration': 1.04}, {'end': 106.093, 'text': 'um, although i will make it available at a later point in time, and this is because i think if i make it available for download,', 'start': 99.144, 'duration': 6.949}], 'summary': 'The speaker aims to create a simple, understandable theme for later download.', 'duration': 38.017, 'max_score': 68.076, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo68076.jpg'}, {'end': 151.389, 'src': 'embed', 'start': 123.675, 'weight': 3, 'content': [{'end': 128.621, 'text': 'but until then you will have time to practice with your own theme and so on,', 'start': 123.675, 'duration': 4.946}, {'end': 134.303, 'text': 'and this theme is actually my plans are actually for this team to be an ongoing work.', 'start': 128.621, 'duration': 5.682}, {'end': 147.107, 'text': 'and it will be ongoing work because after we will create this together, i want to well, as i promised, you will have some other tutorials about html5,', 'start': 134.303, 'duration': 12.804}, {'end': 149.488, 'text': "css3 and i'm gonna add things to this theme.", 'start': 147.107, 'duration': 2.381}, {'end': 151.389, 'text': 'so it is ongoing work.', 'start': 149.488, 'duration': 1.901}], 'summary': 'Plans for ongoing work, including tutorials on html5 and css3.', 'duration': 27.714, 'max_score': 123.675, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo123675.jpg'}, {'end': 219.949, 'src': 'embed', 'start': 171.3, 'weight': 1, 'content': [{'end': 177.085, 'text': "it's actually how to create the HTML framework for it and then basic, very basic styling.", 'start': 171.3, 'duration': 5.785}, {'end': 183.59, 'text': "as you can see, this theme is responsive, and that's what we're gonna create today.", 'start': 177.085, 'duration': 6.505}, {'end': 186.853, 'text': 'well before starting, just want to mention one more thing.', 'start': 183.59, 'duration': 3.263}, {'end': 194.916, 'text': "I am a very fast coder and I'm a very fast OS user, so I use a lot of keyboard shortcuts and so on.", 'start': 187.993, 'duration': 6.923}, {'end': 204.12, 'text': 'If, at some point in time, it gets confusing for you, do not hesitate to ask a question and ask me what I did in comments below,', 'start': 194.936, 'duration': 9.184}, {'end': 206.881, 'text': "because I'm going to be here and I'm going to answer.", 'start': 204.12, 'duration': 2.761}, {'end': 209.342, 'text': "So let's just jump into it.", 'start': 208.082, 'duration': 1.26}, {'end': 218.408, 'text': 'I use Coda to code instead of Adobe, Streamweaver or anything else, and I like very much.', 'start': 212.044, 'duration': 6.364}, {'end': 219.949, 'text': 'I like Coda very much.', 'start': 218.408, 'duration': 1.541}], 'summary': 'Creating responsive html framework with basic styling, using coda for coding.', 'duration': 48.649, 'max_score': 171.3, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo171300.jpg'}], 'start': 14.343, 'title': 'Creating responsive html5 css3 theme and framework', 'summary': 'Details the process of creating a fully responsive html5 css3 theme and discusses creating a responsive html framework, emphasizing the importance of learning by coding oneself, and availability of support for queries and preference for coda for coding.', 'chapters': [{'end': 87.492, 'start': 14.343, 'title': 'Creating responsive html5 css3 theme', 'summary': "Details the process of creating a fully responsive html5 css3 theme through a video tutorial, emphasizing the importance of prior knowledge from the author's previous articles and focusing on simplicity to facilitate understanding.", 'duration': 73.149, 'highlights': ["The tutorial focuses on creating a fully responsive HTML5 CSS3 theme, emphasizing the need to have prior knowledge of the author's previous articles (2 times)", 'The theme created for the tutorial is deliberately kept extremely simple to ensure ease of understanding and follow-through', 'The author emphasizes the importance of simplicity in the theme to facilitate easy comprehension for the audience']}, {'end': 219.949, 'start': 87.492, 'title': 'Creating responsive html framework', 'summary': 'Discusses creating a responsive html framework, emphasizing the importance of learning by coding oneself and the ongoing work nature of the theme, with plans for future tutorial additions. the instructor also highlights the availability of support for queries and preference for coda for coding.', 'duration': 132.457, 'highlights': ['The chapter discusses creating a responsive HTML framework, emphasizing the importance of learning by coding oneself and the ongoing work nature of the theme. The instructor emphasizes the value of learning by coding oneself and highlights the ongoing work nature of the theme, indicating plans for future tutorial additions about HTML5 and CSS3.', 'The instructor also highlights the availability of support for queries and preference for Coda for coding. The instructor emphasizes being available for support and encourages learners to ask questions, indicating a preference for Coda for coding.', 'The instructor mentions the decision against making the theme available for download initially, with plans to offer it at a later point in time. The instructor explains the decision not to make the theme available for download initially, citing the importance of learners coding the framework themselves and mentions plans to offer the theme for download in the future.']}], 'duration': 205.606, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo14343.jpg', 'highlights': ["The tutorial focuses on creating a fully responsive HTML5 CSS3 theme, emphasizing the need to have prior knowledge of the author's previous articles (2 times)", 'The chapter discusses creating a responsive HTML framework, emphasizing the importance of learning by coding oneself and the ongoing work nature of the theme', 'The instructor emphasizes the importance of simplicity in the theme to facilitate easy comprehension for the audience', 'The instructor emphasizes the value of learning by coding oneself and highlights the ongoing work nature of the theme, indicating plans for future tutorial additions about HTML5 and CSS3', 'The instructor also highlights the availability of support for queries and preference for Coda for coding', 'The instructor mentions the decision against making the theme available for download initially, with plans to offer it at a later point in time']}, {'end': 453.358, 'segs': [{'end': 277.744, 'src': 'embed', 'start': 219.949, 'weight': 0, 'content': [{'end': 242.041, 'text': "so what I'm gonna start with is duplicate this theme that you just saw here on the desktop and then go into it desktop yes and then open both index and style and and erase everything from here.", 'start': 219.949, 'duration': 22.092}, {'end': 249.802, 'text': 'so we have a blank theme to start with and save it and see the preview.', 'start': 244.699, 'duration': 5.103}, {'end': 251.743, 'text': "it's empty.", 'start': 249.802, 'duration': 1.941}, {'end': 254.225, 'text': "so what we're gonna start with is actually, we're gonna,", 'start': 251.743, 'duration': 2.482}, {'end': 261.149, 'text': "we're gonna focus on it in the HTML part in the beginning and then we're gonna take the CSS in the end and yeah,", 'start': 254.225, 'duration': 6.924}, {'end': 263.831, 'text': "we're just gonna jump into it and start coding.", 'start': 261.149, 'duration': 2.682}, {'end': 264.711, 'text': "so let's start with.", 'start': 263.831, 'duration': 0.88}, {'end': 270.355, 'text': 'you know those things in the in the beginning of the page that basically can just copy from a layout to another one.', 'start': 264.711, 'duration': 5.644}, {'end': 277.744, 'text': "We're going to write everything now and you're going to be able to use these things from now on.", 'start': 270.655, 'duration': 7.089}], 'summary': 'Creating a new theme by erasing the existing content, focusing on html and then css, for easy copying and reuse.', 'duration': 57.795, 'max_score': 219.949, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo219949.jpg'}, {'end': 336.85, 'src': 'embed', 'start': 304.352, 'weight': 4, 'content': [{'end': 311.838, 'text': "After the HTML, it's obviously the head where we're gonna add different things, like, for example, we're gonna add the title and let's say,", 'start': 304.352, 'duration': 7.486}, {'end': 318.263, 'text': 'the title is gonna be HTML5 CSS3 responsive theme.', 'start': 311.838, 'duration': 6.425}, {'end': 330.668, 'text': 'close the title and then after title, we want to add some other basic stuff, like meta charsets, which in this case should be utf-8.', 'start': 318.923, 'duration': 11.745}, {'end': 336.85, 'text': 'yes, and after meta charsets we want to link The style sheet obviously.', 'start': 330.668, 'duration': 6.182}], 'summary': 'Adding html head elements: title, meta charset, and style sheet link.', 'duration': 32.498, 'max_score': 304.352, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo304352.jpg'}, {'end': 406.006, 'src': 'embed', 'start': 368.367, 'weight': 3, 'content': [{'end': 375.653, 'text': "to work on other devices, you're gonna have to add something called meta name viewport.", 'start': 368.367, 'duration': 7.286}, {'end': 379.095, 'text': "it's just something that tells the browser.", 'start': 375.653, 'duration': 3.442}, {'end': 384.017, 'text': 'well, you have to to think of this web page as responsible.', 'start': 379.095, 'duration': 4.922}, {'end': 405.446, 'text': 'you have to consider it as a responsive theme, and then content is gonna be a with device, with, and then, yeah, I usually write here initial scale.', 'start': 384.017, 'duration': 21.429}, {'end': 406.006, 'text': 'it should be one.', 'start': 405.446, 'duration': 0.56}], 'summary': "To make a web page responsive on other devices, add 'meta name viewport' with 'initial scale' set to 1.", 'duration': 37.639, 'max_score': 368.367, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo368367.jpg'}, {'end': 457.479, 'src': 'embed', 'start': 429.888, 'weight': 7, 'content': [{'end': 436.25, 'text': "so i i assume it's a good idea to do that and i i advise you to do it because it's going to help a lot, not only you,", 'start': 429.888, 'duration': 6.362}, {'end': 440.772, 'text': "but also if others were going to come and look at your code, that's going to help a lot.", 'start': 436.25, 'duration': 4.522}, {'end': 441.653, 'text': 'so use intonation.', 'start': 440.772, 'duration': 0.881}, {'end': 447.615, 'text': 'we want to give a class this body, and I usually I usually call it body,', 'start': 442.973, 'duration': 4.642}, {'end': 453.358, 'text': "because it's much easier for me to remember all these names and classes that I'm gonna use today.", 'start': 447.615, 'duration': 5.743}, {'end': 457.479, 'text': 'those are just things that you can just, you know, rename in your own way.', 'start': 453.358, 'duration': 4.121}], 'summary': "Using intonation in code, like 'body' class, can aid readability and understanding.", 'duration': 27.591, 'max_score': 429.888, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo429888.jpg'}], 'start': 219.949, 'title': 'Web page creation basics', 'summary': 'Introduces the basics of creating a web page, emphasizing the importance of intonation and providing a clear class name for the body, aiding in code readability.', 'chapters': [{'end': 277.744, 'start': 219.949, 'title': 'Creating blank theme for coding', 'summary': 'Discusses creating a blank theme by duplicating a desktop theme, erasing its contents, and focusing on html coding first before css.', 'duration': 57.795, 'highlights': ['The chapter focuses on creating a blank theme by duplicating a desktop theme, erasing its contents, and starting with HTML coding before moving on to CSS.', 'The process involves starting with a blank theme, saving it, and then beginning HTML coding before transitioning to CSS.', 'The instructor emphasizes the importance of being able to use the created elements across different layouts, enabling reusability.']}, {'end': 406.006, 'start': 278.204, 'title': 'Html doctype and basic structure', 'summary': 'Covers the basics of html structure, including doctype declaration, specifying language, adding meta charset, and linking style sheets, emphasizing the importance of meta name viewport for responsiveness.', 'duration': 127.802, 'highlights': ["The chapter emphasizes the importance of meta name viewport for responsiveness, specifying 'content' as 'width=device-width' and 'initial scale' as '1'. Adding meta name viewport is crucial for making the web page responsive, specifying 'content' as 'width=device-width' and 'initial scale' as '1'.", 'Demonstrates the process of linking a style sheet, including specifying the file name, location, and type (text/CSS). Details the process of linking a style sheet, specifying the file name, location, and type (text/CSS).', 'Explains the process of adding meta charset, emphasizing the use of utf-8 for SEO purposes. Explains the process of adding meta charset, emphasizing the use of utf-8 for SEO purposes.', 'Describes the essential elements of HTML structure, including the doctype declaration, specifying the HTML tag, and adding content within the head. Describes the essential elements of HTML structure, including the doctype declaration, specifying the HTML tag, and adding content within the head.']}, {'end': 453.358, 'start': 406.601, 'title': 'Web page creation basics', 'summary': 'Introduces the basics of creating a web page, emphasizing the importance of using intonation and providing a clear class name for the body which can aid in code readability and understanding.', 'duration': 46.757, 'highlights': ['Using intonation in code can help improve readability and understanding, benefiting both the coder and potential future readers.', "Providing clear and memorable class names, like 'body', can aid in the management of code elements and attributes."]}], 'duration': 233.409, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo219949.jpg', 'highlights': ['The chapter focuses on creating a blank theme by duplicating a desktop theme, erasing its contents, and starting with HTML coding before moving on to CSS.', 'The process involves starting with a blank theme, saving it, and then beginning HTML coding before transitioning to CSS.', 'The instructor emphasizes the importance of being able to use the created elements across different layouts, enabling reusability.', "The chapter emphasizes the importance of meta name viewport for responsiveness, specifying 'content' as 'width=device-width' and 'initial scale' as '1'.", 'Demonstrates the process of linking a style sheet, including specifying the file name, location, and type (text/CSS).', 'Explains the process of adding meta charset, emphasizing the use of utf-8 for SEO purposes.', 'Describes the essential elements of HTML structure, including the doctype declaration, specifying the HTML tag, and adding content within the head.', 'Using intonation in code can help improve readability and understanding, benefiting both the coder and potential future readers.', "Providing clear and memorable class names, like 'body', can aid in the management of code elements and attributes."]}, {'end': 1131.549, 'segs': [{'end': 539.56, 'src': 'embed', 'start': 481.422, 'weight': 0, 'content': [{'end': 486.323, 'text': "we're gonna have the header, which is which includes the logo and navigation.", 'start': 481.422, 'duration': 4.901}, {'end': 492.604, 'text': "we're gonna have something called main content, which is this whole,", 'start': 486.323, 'duration': 6.281}, {'end': 500.946, 'text': 'a container which contains a smaller which which actually contains two smaller areas.', 'start': 492.604, 'duration': 8.342}, {'end': 507.566, 'text': "it's, it's the content area and and it's the sidebar or the sidebars, and then the third part.", 'start': 500.946, 'duration': 6.62}, {'end': 510.489, 'text': 'the third main area is gonna be obviously the footer.', 'start': 507.566, 'duration': 2.923}, {'end': 524.325, 'text': "so we're gonna start building this header with logo and navigation, and we're gonna do that from here, using the header tag, and give it in the class.", 'start': 510.489, 'duration': 13.836}, {'end': 529.45, 'text': "i'm going to call it um main header, because, you're going to see,", 'start': 524.325, 'duration': 5.125}, {'end': 537.338, 'text': "i'm not calling the class header because a bit later on we're going to use some other header tags and might use header there.", 'start': 529.45, 'duration': 7.888}, {'end': 538.839, 'text': 'so this is the main header.', 'start': 537.338, 'duration': 1.501}, {'end': 539.56, 'text': "i'd call it like that.", 'start': 538.839, 'duration': 0.721}], 'summary': 'Creating a website layout with header, main content, and footer sections.', 'duration': 58.138, 'max_score': 481.422, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo481422.jpg'}, {'end': 604.106, 'src': 'embed', 'start': 572.969, 'weight': 1, 'content': [{'end': 580.732, 'text': 'and then, after the image, you will want to start with navigation, the navigation, instead of calling it like before in HTML 4.0..', 'start': 572.969, 'duration': 7.763}, {'end': 591.303, 'text': '1 div id equals navigation now we call it nav that makes work much easier for us And then here we close the UL and we close the nav.', 'start': 580.732, 'duration': 10.571}, {'end': 598.204, 'text': 'And then we have the list items, which are pretty much links.', 'start': 591.543, 'duration': 6.661}, {'end': 601.365, 'text': "Let's see.", 'start': 600.885, 'duration': 0.48}, {'end': 604.106, 'text': "Let's not give them a target right now.", 'start': 602.206, 'duration': 1.9}], 'summary': 'In html 4.0, div id for navigation is now called nav for easier work. includes list items as links.', 'duration': 31.137, 'max_score': 572.969, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo572969.jpg'}, {'end': 818.537, 'src': 'embed', 'start': 784.647, 'weight': 3, 'content': [{'end': 787.01, 'text': 'well, the footer is created to give some extra information.', 'start': 784.647, 'duration': 2.363}, {'end': 788.291, 'text': 'so what Google is?', 'start': 787.01, 'duration': 1.281}, {'end': 791.094, 'text': "Google is gonna look at your code and we're gonna see.", 'start': 788.291, 'duration': 2.803}, {'end': 794.558, 'text': 'well, you have this article and in the article you have a footer tag.', 'start': 791.094, 'duration': 3.464}, {'end': 803.208, 'text': "yeah, for attack, right, and they're gonna Google gonna think everything.", 'start': 797.765, 'duration': 5.443}, {'end': 803.728, 'text': "that's right.", 'start': 803.208, 'duration': 0.52}, {'end': 810.532, 'text': "here, in this tag, in this container, it's some information about the respective content, and that's good for SEO purposes.", 'start': 803.728, 'duration': 6.804}, {'end': 818.537, 'text': "so we're gonna use the footer is, although it's not in the footer, and yeah, it's just a paragraph, basically,", 'start': 810.532, 'duration': 8.005}], 'summary': "Using the footer tag for seo purposes, even if it's not in the footer, is beneficial.", 'duration': 33.89, 'max_score': 784.647, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo784647.jpg'}, {'end': 1117.207, 'src': 'heatmap', 'start': 1076.789, 'weight': 0.801, 'content': [{'end': 1078.29, 'text': "and yet that's it.", 'start': 1076.789, 'duration': 1.501}, {'end': 1083.475, 'text': "guys, we already coded the page in HTML, so let's go and preview it.", 'start': 1078.29, 'duration': 5.185}, {'end': 1089.887, 'text': "That's our page right now.", 'start': 1089.025, 'duration': 0.862}, {'end': 1091.369, 'text': 'You have the HTML code.', 'start': 1090.207, 'duration': 1.162}, {'end': 1094.756, 'text': "It's exactly the same code, probably exactly the same code as it is here.", 'start': 1091.69, 'duration': 3.066}, {'end': 1097.18, 'text': 'Most of it is the same.', 'start': 1096.158, 'duration': 1.022}, {'end': 1101.188, 'text': "Oh, I don't like that.", 'start': 1098.944, 'duration': 2.244}, {'end': 1105.283, 'text': 'now i like it.', 'start': 1104.082, 'duration': 1.201}, {'end': 1108.504, 'text': 'um, yeah, okay, then we have exactly the same content.', 'start': 1105.283, 'duration': 3.221}, {'end': 1110.805, 'text': 'now we need to start and style it.', 'start': 1108.504, 'duration': 2.301}, {'end': 1117.207, 'text': "um, and, and styling it, it's, it takes a bit more time because you know there are different things you have to take care of.", 'start': 1110.805, 'duration': 6.402}], 'summary': 'Html page coded, needs styling, similar content, more time for styling', 'duration': 40.418, 'max_score': 1076.789, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo1076789.jpg'}], 'start': 453.358, 'title': 'Web page structure and html5 page structure', 'summary': "Discusses structuring a web page with three main containers and building the main header, and explains the process of structuring an html5 page, including creating navigation using the 'nav' tag and organizing content, resulting in a non-responsive html page.", 'chapters': [{'end': 572.969, 'start': 453.358, 'title': 'Web page structure and header building', 'summary': 'Discusses structuring a web page with three main containers: header, main content, and footer, emphasizing the building of the main header with logo and navigation.', 'duration': 119.611, 'highlights': ['The three main containers for the web page are the header (including logo and navigation), main content (comprising content area and sidebar/sidebars), and footer.', "The process of building the main header involves using the header tag and assigning the class 'main header' to distinguish it from potential future header tags, with a specific focus on introducing and locating the logo within the web page structure."]}, {'end': 1131.549, 'start': 572.969, 'title': 'Html5 page structure', 'summary': "Explains the process of structuring an html5 page, including creating navigation using the 'nav' tag, implementing article and footer tags for seo purposes, and organizing content within the main and sidebar sections, ultimately resulting in a non-responsive html page.", 'duration': 558.58, 'highlights': ["Creating navigation using the 'nav' tag instead of 'div id equals navigation' simplifies the process in HTML5. In HTML5, it is advised to use the 'nav' tag for creating navigation, simplifying the process.", "Implementing article and footer tags for SEO purposes can provide additional information to search engines. The use of the 'article' and 'footer' tags in HTML5 serves SEO purposes by providing additional information to search engines.", 'Organizing content within the main and sidebar sections is essential for structuring an HTML5 page. Proper organization of content within the main and sidebar sections is essential for structuring an HTML5 page.']}], 'duration': 678.191, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo453358.jpg', 'highlights': ["The process of building the main header involves using the header tag and assigning the class 'main header' to distinguish it from potential future header tags, with a specific focus on introducing and locating the logo within the web page structure.", "Creating navigation using the 'nav' tag instead of 'div id equals navigation' simplifies the process in HTML5. In HTML5, it is advised to use the 'nav' tag for creating navigation, simplifying the process.", 'The three main containers for the web page are the header (including logo and navigation), main content (comprising content area and sidebar/sidebars), and footer.', "Implementing article and footer tags for SEO purposes can provide additional information to search engines. The use of the 'article' and 'footer' tags in HTML5 serves SEO purposes by providing additional information to search engines.", 'Organizing content within the main and sidebar sections is essential for structuring an HTML5 page. Proper organization of content within the main and sidebar sections is essential for structuring an HTML5 page.']}, {'end': 1558.417, 'segs': [{'end': 1194.727, 'src': 'embed', 'start': 1163.824, 'weight': 3, 'content': [{'end': 1167.025, 'text': 'and I only start with body because I want to give it a background image.', 'start': 1163.824, 'duration': 3.201}, {'end': 1174.088, 'text': "and I have this image in a folder that I showed you earlier and that's how you link it.", 'start': 1167.025, 'duration': 7.063}, {'end': 1179.131, 'text': "it's in the folder image and it's called bg.png.", 'start': 1174.088, 'duration': 5.043}, {'end': 1183.813, 'text': 'yes, so see, now I have a new background.', 'start': 1179.131, 'duration': 4.682}, {'end': 1191.784, 'text': "yes, more brightness, it's nice.", 'start': 1188.26, 'duration': 3.524}, {'end': 1194.727, 'text': 'now we want to give a color to the text.', 'start': 1191.784, 'duration': 2.943}], 'summary': 'Creating a new background image and adjusting brightness before adding color to text.', 'duration': 30.903, 'max_score': 1163.824, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo1163824.jpg'}, {'end': 1289.651, 'src': 'embed', 'start': 1223.305, 'weight': 1, 'content': [{'end': 1236.068, 'text': 'well, I code in percent because I wanted to be responsive, I wanted to be, I want this phone to be fluid or to be changeable.', 'start': 1223.305, 'duration': 12.763}, {'end': 1237.568, 'text': 'so I code in percent.', 'start': 1236.068, 'duration': 1.5}, {'end': 1244.531, 'text': 'and just so you know, base font size is usually 14 pixels.', 'start': 1237.568, 'duration': 6.963}, {'end': 1249.835, 'text': 'so right now, your font size is 87.5% out of 14 pixels.', 'start': 1244.531, 'duration': 5.304}, {'end': 1254.298, 'text': "and if you're a math genius, you're gonna be able to know what that is.", 'start': 1249.835, 'duration': 4.463}, {'end': 1268.068, 'text': "font family yeah, obviously you have to name your font and let's just say take something basic, let's take Arial and let's take Lucida, Sans, unicode.", 'start': 1254.298, 'duration': 13.77}, {'end': 1275.672, 'text': "let's say, yes, I'm a line height free, so I'm gonna put a line height of 1.5.", 'start': 1268.068, 'duration': 7.604}, {'end': 1285.177, 'text': 'and you see, already things start to change here and then you obviously want your text to be aligned to the left.', 'start': 1275.672, 'duration': 9.505}, {'end': 1289.651, 'text': "that's pretty much it.", 'start': 1286.65, 'duration': 3.001}], 'summary': 'Coding in percent for fluid design, font size 87.5% of 14px, arial font, line height 1.5, left-aligned text.', 'duration': 66.346, 'max_score': 1223.305, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo1223305.jpg'}, {'end': 1359.375, 'src': 'embed', 'start': 1331.488, 'weight': 0, 'content': [{'end': 1337.212, 'text': 'you would like because this is gonna be in the middle of the page you like to give it a margin.', 'start': 1331.488, 'duration': 5.724}, {'end': 1346.311, 'text': "zero order means that everything will be centered and you can't see it now because the width of this body is 100%.", 'start': 1338.109, 'duration': 8.202}, {'end': 1347.592, 'text': 'but this is a trick.', 'start': 1346.311, 'duration': 1.281}, {'end': 1350.572, 'text': 'our width is going to be 70% only.', 'start': 1347.592, 'duration': 2.98}, {'end': 1359.375, 'text': 'so already you see, we have a container of 70% width and you might want to use clear both,', 'start': 1350.572, 'duration': 8.803}], 'summary': 'Set margin for centering content in 70% width container.', 'duration': 27.887, 'max_score': 1331.488, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo1331488.jpg'}, {'end': 1418.836, 'src': 'embed', 'start': 1387.994, 'weight': 4, 'content': [{'end': 1393.86, 'text': 'But before the main header, actually it should be here, we should style the links.', 'start': 1387.994, 'duration': 5.866}, {'end': 1395.061, 'text': 'I always style links.', 'start': 1394.08, 'duration': 0.981}, {'end': 1400.466, 'text': "First, it's always a good idea and I hate text decoration.", 'start': 1396.362, 'duration': 4.104}, {'end': 1404.41, 'text': 'I hate when the links are underlined.', 'start': 1402.208, 'duration': 2.202}, {'end': 1405.612, 'text': "See, they're not anymore now.", 'start': 1404.591, 'duration': 1.021}, {'end': 1410.193, 'text': 'and we will use a bit later on.', 'start': 1407.252, 'duration': 2.941}, {'end': 1416.835, 'text': 'we will style some links and then we will style visited links in different colors.', 'start': 1410.193, 'duration': 6.642}, {'end': 1418.836, 'text': "we don't have those colors yet,", 'start': 1416.835, 'duration': 2.001}], 'summary': 'Styling links to remove underlines and use different colors for visited links.', 'duration': 30.842, 'max_score': 1387.994, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo1387994.jpg'}, {'end': 1481.545, 'src': 'embed', 'start': 1453.358, 'weight': 5, 'content': [{'end': 1464.45, 'text': 'so we want to go here and style the main header image first, And what we want from it is to give it a width of 30%.', 'start': 1453.358, 'duration': 11.092}, {'end': 1468.215, 'text': "So it's not going to be that big anymore.", 'start': 1464.45, 'duration': 3.765}, {'end': 1471.28, 'text': 'And then a height of auto.', 'start': 1469.557, 'duration': 1.723}, {'end': 1474.465, 'text': "So it's going to be just automatically adjusting.", 'start': 1471.761, 'duration': 2.704}, {'end': 1481.545, 'text': 'And we might also want to give it some margin on top and bottom and then nothing on the side.', 'start': 1476.383, 'duration': 5.162}], 'summary': 'Style the main header image to 30% width, auto height, with top and bottom margin.', 'duration': 28.187, 'max_score': 1453.358, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo1453358.jpg'}, {'end': 1532.707, 'src': 'embed', 'start': 1505.628, 'weight': 6, 'content': [{'end': 1509.031, 'text': "there are many adjustments to do, so let's just jump into it.", 'start': 1505.628, 'duration': 3.403}, {'end': 1512.413, 'text': 'main header, navigation we have right now.', 'start': 1509.031, 'duration': 3.382}, {'end': 1517.177, 'text': 'and what we want from navigation is, if we looked at this theme, we want it to look exactly like that,', 'start': 1512.413, 'duration': 4.764}, {'end': 1522.321, 'text': 'and so we want to give it a background color of the navigation.', 'start': 1517.177, 'duration': 5.144}, {'end': 1532.707, 'text': "and the color that you saw there is 666, yeah, and and we will want to give it a height, let's say 40 pixels.", 'start': 1522.321, 'duration': 10.386}], 'summary': 'Making adjustments to navigation: set background color to #666, height 40px.', 'duration': 27.079, 'max_score': 1505.628, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo1505628.jpg'}], 'start': 1131.549, 'title': 'Responsive web design basics and website styling walkthrough', 'summary': 'Discusses the basics of responsive web design, covering html5 tags for responsiveness, background images, color, font size, font family, line height, and text alignment. it also includes a walkthrough of styling a website, covering setting the container width to 70%, removing underlines from links, and specifying the size and margin of the main header image.', 'chapters': [{'end': 1306.975, 'start': 1131.549, 'title': 'Responsive web design basics', 'summary': 'Discusses the basics of responsive web design, including using html5 tags for responsiveness, setting background images, color, font size, font family, line height, and text alignment to create a fluid and changeable design.', 'duration': 175.426, 'highlights': ['The chapter explains the importance of using HTML5 tags for responsiveness and coding in percent for fluid design, with the base font size usually being 14 pixels.', 'The chapter demonstrates setting a background image by linking it from a folder, adjusting text color, font size, font family, and line height for a responsive design.', 'The chapter emphasizes the use of standard tags like body when starting coding and discusses the significance of setting text alignment and using basic font families like Arial and Lucida Sans Unicode.']}, {'end': 1558.417, 'start': 1306.975, 'title': 'Website styling walkthrough', 'summary': 'Covers the step-by-step process of styling a website, including setting the container width to 70%, removing underlines from links, and specifying the size and margin of the main header image.', 'duration': 251.442, 'highlights': ['The container width is set to 70% to create a centered layout, enhancing the visual appeal (quantifiable data: width set to 70%).', 'Links are styled to remove underlines, improving the aesthetics and user experience (quantifiable data: underlines removed from links).', 'The main header image is styled with a width of 30%, height set to auto, and top and bottom margins of 2% to achieve a visually pleasing layout (quantifiable data: image width set to 30%, top and bottom margins set to 2%).', 'Background color (#666) and a height of 40 pixels are specified for the navigation bar, ensuring consistency and visual appeal (quantifiable data: background color set to #666, height set to 40 pixels).']}], 'duration': 426.868, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo1131549.jpg', 'highlights': ['The container width is set to 70% to create a centered layout, enhancing the visual appeal (width set to 70%).', 'The chapter emphasizes the use of standard tags like body when starting coding and discusses the significance of setting text alignment and using basic font families like Arial and Lucida Sans Unicode.', 'The chapter explains the importance of using HTML5 tags for responsiveness and coding in percent for fluid design, with the base font size usually being 14 pixels.', 'The chapter demonstrates setting a background image by linking it from a folder, adjusting text color, font size, font family, and line height for a responsive design.', 'Links are styled to remove underlines, improving the aesthetics and user experience (underlines removed from links).', 'The main header image is styled with a width of 30%, height set to auto, and top and bottom margins of 2% to achieve a visually pleasing layout (image width set to 30%, top and bottom margins set to 2%).', 'Background color (#666) and a height of 40 pixels are specified for the navigation bar, ensuring consistency and visual appeal (background color set to #666, height set to 40 pixels).']}, {'end': 1889.515, 'segs': [{'end': 1597.92, 'src': 'embed', 'start': 1558.417, 'weight': 1, 'content': [{'end': 1560.038, 'text': "and what we're going to create?", 'start': 1558.417, 'duration': 1.621}, {'end': 1565.86, 'text': "we're going to create some border radius, because you can see here pretty much every container that has a background color has.", 'start': 1560.038, 'duration': 5.822}, {'end': 1569.362, 'text': "it's easy to notice that they have the same border radius.", 'start': 1565.86, 'duration': 3.502}, {'end': 1578.906, 'text': "that's border radius of five pixels and we're going to use that really in the, in the whole um, in the whole.", 'start': 1569.362, 'duration': 9.544}, {'end': 1597.92, 'text': "um, yeah, layout, what we want to do, just to make sure it's it's to copy this twice and in front of this just put Moz and in WebKit,", 'start': 1578.906, 'duration': 19.014}], 'summary': 'Creating a layout with a border radius of five pixels for consistency.', 'duration': 39.503, 'max_score': 1558.417, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo1558417.jpg'}, {'end': 1700.091, 'src': 'embed', 'start': 1643.821, 'weight': 0, 'content': [{'end': 1646.802, 'text': "so we're just going to continue styling in this way.", 'start': 1643.821, 'duration': 2.981}, {'end': 1652.544, 'text': "i think it's it's a good idea to call it main header with capital h, and it was a mistake.", 'start': 1646.802, 'duration': 5.742}, {'end': 1654.204, 'text': 'i usually do that.', 'start': 1652.544, 'duration': 1.66}, {'end': 1658.145, 'text': 'um, yes, and here too.', 'start': 1654.204, 'duration': 3.941}, {'end': 1664.441, 'text': "so let's let's see what we want from the list for the other order list and what we want it.", 'start': 1658.145, 'duration': 6.296}, {'end': 1666.501, 'text': 'we want to get rid of those bullets in front of it.', 'start': 1664.441, 'duration': 2.06}, {'end': 1668.681, 'text': "so it's it's list style?", 'start': 1666.501, 'duration': 2.18}, {'end': 1680.544, 'text': 'non, yeah, so we got rid of those right now and we want to give them a margin of zero or two,', 'start': 1668.681, 'duration': 11.863}, {'end': 1687.645, 'text': "and you're gonna see that it's just gonna fall into place a bit later on without.", 'start': 1680.544, 'duration': 7.101}, {'end': 1688.686, 'text': 'without it.', 'start': 1687.645, 'duration': 1.041}, {'end': 1691.467, 'text': "i can show you it's a bigger margin here.", 'start': 1688.686, 'duration': 2.781}, {'end': 1700.091, 'text': "we don't want that because we want to be able to control all the margins we have, and this one, this margins here, is a two percent.", 'start': 1691.467, 'duration': 8.624}], 'summary': 'Styling includes removing bullets, setting margins, and controlling the layout.', 'duration': 56.27, 'max_score': 1643.821, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo1643821.jpg'}, {'end': 1786.847, 'src': 'embed', 'start': 1720.017, 'weight': 3, 'content': [{'end': 1726.279, 'text': 'and what we want to do is we want them to flow to the left, to push each other to the left, and then we obviously want to display,', 'start': 1720.017, 'duration': 6.262}, {'end': 1731.461, 'text': 'display them in line.', 'start': 1726.279, 'duration': 5.182}, {'end': 1739.275, 'text': "yes, um, That's why it didn't work.", 'start': 1731.461, 'duration': 7.814}, {'end': 1750.042, 'text': "Remember that CSS is case sensitive, so this doesn't work if it has a small H, but it works with capital H.", 'start': 1741.196, 'duration': 8.846}, {'end': 1751.243, 'text': 'Good Now we have that.', 'start': 1750.042, 'duration': 1.201}, {'end': 1752.244, 'text': 'They are in line.', 'start': 1751.263, 'duration': 0.981}, {'end': 1759.308, 'text': 'What we are going to do now is we want to make them look nicer.', 'start': 1753.164, 'duration': 6.144}, {'end': 1762.991, 'text': "Yeah And we're going to do that.", 'start': 1759.328, 'duration': 3.663}, {'end': 1771.799, 'text': 'by by working a bit with, with the with, yeah, with the link, basically.', 'start': 1763.994, 'duration': 7.805}, {'end': 1778.623, 'text': "so let's say, main header navigation and all the links in the navigation.", 'start': 1771.799, 'duration': 6.824}, {'end': 1786.847, 'text': 'and we also want to do the same for, for you know, main header navigation, all the, all the visited links.', 'start': 1778.623, 'duration': 8.224}], 'summary': 'Css is case-sensitive, links are displayed in line, and need to look nicer.', 'duration': 66.83, 'max_score': 1720.017, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo1720017.jpg'}, {'end': 1838.624, 'src': 'embed', 'start': 1813.588, 'weight': 5, 'content': [{'end': 1825.716, 'text': "i want to give a padding of, i know, 30 pixels um, bottom top, although it's too much, 20 pixel bottom top, let's say in the 25 pixel left, right.", 'start': 1813.588, 'duration': 12.128}, {'end': 1827.117, 'text': "let's see how that looks.", 'start': 1825.716, 'duration': 1.401}, {'end': 1833.721, 'text': "I think it's too much, because what we want to achieve is have the links on them in the middle of the navigation.", 'start': 1827.117, 'duration': 6.604}, {'end': 1835.422, 'text': 'so 20% is too much.', 'start': 1833.721, 'duration': 1.701}, {'end': 1838.624, 'text': "let's, let's try 10% in 10 pixel.", 'start': 1835.422, 'duration': 3.202}], 'summary': 'Adjust padding to 10 pixels and 10% for better link alignment.', 'duration': 25.036, 'max_score': 1813.588, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo1813588.jpg'}], 'start': 1558.417, 'title': 'Css styling for web layout and navigation links', 'summary': 'Covers creating consistent border radius of 5 pixels, styling navigation elements, removing bullets from list items, and managing margins, along with aligning navigation links to the left, changing their color to white, and adjusting padding and height for visual enhancement.', 'chapters': [{'end': 1720.017, 'start': 1558.417, 'title': 'Css styling for web layout', 'summary': 'Covers the process of creating a consistent border radius of five pixels for various containers, styling navigation elements, removing bullets from list items, and managing margins for a web layout using css.', 'duration': 161.6, 'highlights': ['The chapter emphasizes creating a consistent border radius of five pixels for various containers, ensuring uniformity in the layout.', 'Styling the navigation elements and removing bullets from list items are key elements of the process.', 'Managing margins, including setting them to zero or two percent, is crucial for controlling the layout and ensuring uniformity.']}, {'end': 1889.515, 'start': 1720.017, 'title': 'Styling navigation links in css', 'summary': 'Covers the process of styling navigation links in css, including aligning them to the left, changing their color to white, and adjusting their padding and height to enhance the visual appearance and layout.', 'duration': 169.498, 'highlights': ['The chapter emphasizes aligning the navigation links to the left and ensuring they are displayed in line block.', 'It highlights the process of changing the color of visited links to white instead of the standard blue.', 'The chapter discusses adjusting the padding of the navigation links to achieve the desired layout and visual appearance.', 'It briefly touches upon the concept of assigning a height to the links for improved visibility and indicates revisiting this aspect later.']}], 'duration': 331.098, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo1558417.jpg', 'highlights': ['Styling the navigation elements and removing bullets from list items are key elements of the process.', 'The chapter emphasizes creating a consistent border radius of five pixels for various containers, ensuring uniformity in the layout.', 'Managing margins, including setting them to zero or two percent, is crucial for controlling the layout and ensuring uniformity.', 'The chapter emphasizes aligning the navigation links to the left and ensuring they are displayed in line block.', 'It highlights the process of changing the color of visited links to white instead of the standard blue.', 'The chapter discusses adjusting the padding of the navigation links to achieve the desired layout and visual appearance.']}, {'end': 2489.327, 'segs': [{'end': 1997.237, 'src': 'heatmap', 'start': 1889.515, 'weight': 0, 'content': [{'end': 1902.724, 'text': 'what we move on now is we want to to work on the, on the links, who you want to hover over them and see your color or something like that.', 'start': 1889.515, 'duration': 13.209}, {'end': 1907.567, 'text': 'so, main header, we also want.', 'start': 1902.724, 'duration': 4.843}, {'end': 1908.167, 'text': "it's a class.", 'start': 1907.567, 'duration': 0.6}, {'end': 1910.749, 'text': 'we also wanted to work with the ones that are active.', 'start': 1908.167, 'duration': 2.582}, {'end': 1919.259, 'text': 'yes, I think in order to.', 'start': 1910.749, 'duration': 8.51}, {'end': 1928.806, 'text': "yeah, I skipped something when we created HTML, because one of the links is obviously active, because well, you're always on one of the pages.", 'start': 1919.259, 'duration': 9.547}, {'end': 1932.048, 'text': "So let's say we're on home right now and give it a class of active.", 'start': 1928.826, 'duration': 3.222}, {'end': 1937.392, 'text': "So we're going to be able to style the active link that the link you're on right now.", 'start': 1932.489, 'duration': 4.903}, {'end': 1953.108, 'text': 'Yes, so we also want to style main header navigation and all the links that are that have the class activity.', 'start': 1942.576, 'duration': 10.532}, {'end': 1968.275, 'text': 'we actually want to style the, the active, you know, class for all the normal links and then main header navigation, active for the visitor links.', 'start': 1953.108, 'duration': 15.167}, {'end': 1970.996, 'text': 'so How are we going to style it??', 'start': 1968.275, 'duration': 2.721}, {'end': 1973.398, 'text': "Well, first we're going to give it a background color.", 'start': 1971.056, 'duration': 2.342}, {'end': 1976.301, 'text': 'As you can see if we go here they have an orange background color.', 'start': 1973.418, 'duration': 2.883}, {'end': 1978.644, 'text': "And we're going to do that.", 'start': 1977.002, 'duration': 1.642}, {'end': 1981.526, 'text': 'Background color.', 'start': 1980.706, 'duration': 0.82}, {'end': 1987.172, 'text': "That color that you saw is an orange CF5C3F if I'm not mistaken.", 'start': 1982.047, 'duration': 5.125}, {'end': 1997.237, 'text': 'it is yes, perfect, and then we we want to give the text white color it is already white,', 'start': 1988.553, 'duration': 8.684}], 'summary': 'Styling active links with orange background and white text.', 'duration': 83.883, 'max_score': 1889.515, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo1889515.jpg'}, {'end': 2059.225, 'src': 'embed', 'start': 2037.761, 'weight': 5, 'content': [{'end': 2050.112, 'text': 'you can go here and see the navigation has 40 pixel height and and then you have a padding of 10 pixel bottom and 10 pixel top and that leaves the actual height of the link to 20 pixels.', 'start': 2037.761, 'duration': 12.351}, {'end': 2051.855, 'text': "so it's it's pure math.", 'start': 2050.112, 'duration': 1.743}, {'end': 2055.62, 'text': "um, you don't have to be a math genius to that.", 'start': 2051.855, 'duration': 3.765}, {'end': 2059.225, 'text': 'another thing that i might want to do is i add some border radios,', 'start': 2055.62, 'duration': 3.605}], 'summary': 'Navigation has 40px height with 10px padding, resulting in 20px link height. adding border radius is also considered.', 'duration': 21.464, 'max_score': 2037.761, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo2037761.jpg'}, {'end': 2264.255, 'src': 'embed', 'start': 2229.372, 'weight': 1, 'content': [{'end': 2230.133, 'text': 'you might ask why.', 'start': 2229.372, 'duration': 0.761}, {'end': 2236.357, 'text': "it's because we want the content to stop around here, because it has to be placed for the sidebars.", 'start': 2230.133, 'duration': 6.224}, {'end': 2240.836, 'text': "so we're gonna give it a width of 70%.", 'start': 2236.357, 'duration': 4.479}, {'end': 2242.257, 'text': "So that's quite about right.", 'start': 2240.836, 'duration': 1.421}, {'end': 2246.441, 'text': 'And what we want to do is give it a background color, I think.', 'start': 2244.339, 'duration': 2.102}, {'end': 2250.344, 'text': "Or no, actually, we're not going to give it a background color.", 'start': 2248.282, 'duration': 2.062}, {'end': 2254.067, 'text': "We're going to keep the background color for a bit later on.", 'start': 2250.364, 'duration': 3.703}, {'end': 2257.61, 'text': "We want, obviously, it's very, very important.", 'start': 2255.608, 'duration': 2.002}, {'end': 2264.255, 'text': 'It needs to float to the left because otherwise the sidebar will not be able to push it to push this container to the left side.', 'start': 2257.63, 'duration': 6.625}], 'summary': 'Styling content for sidebars with 70% width and left float.', 'duration': 34.883, 'max_score': 2229.372, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo2229372.jpg'}, {'end': 2373.163, 'src': 'heatmap', 'start': 2271.374, 'weight': 3, 'content': [{'end': 2279.378, 'text': 'and then we want to you know our borders, which basically cannot see here.', 'start': 2271.374, 'duration': 8.004}, {'end': 2286.701, 'text': "yeah, they don't have to be here, okay, have to be later on.", 'start': 2279.378, 'duration': 7.323}, {'end': 2288.202, 'text': 'yeah, then you have.', 'start': 2286.701, 'duration': 1.501}, {'end': 2295.616, 'text': "then you have this top content and, and yeah, we'll only have top content here.", 'start': 2288.202, 'duration': 7.414}, {'end': 2300.661, 'text': 'I forgot to to add a second content, you know, because we need to article.', 'start': 2295.616, 'duration': 5.045}, {'end': 2301.682, 'text': "so I'm just gonna do it now.", 'start': 2300.661, 'duration': 1.021}, {'end': 2315.52, 'text': "I'm just gonna take this article and copy it and call it bottom content.", 'start': 2301.682, 'duration': 13.838}, {'end': 2318.741, 'text': 'no, second post, second post.', 'start': 2315.52, 'duration': 3.221}, {'end': 2321.562, 'text': 'great. so now we have two contents.', 'start': 2318.741, 'duration': 2.821}, {'end': 2322.722, 'text': 'there are two articles.', 'start': 2321.562, 'duration': 1.16}, {'end': 2327.344, 'text': 'sorry, yes, so we want to style top content and bottom content.', 'start': 2322.722, 'duration': 4.622}, {'end': 2331.725, 'text': "they likely need to be styled the same because they're, they're representing the same.", 'start': 2327.344, 'duration': 4.381}, {'end': 2336.447, 'text': 'so we style the top content and then just duplicate it and rename it.', 'start': 2331.725, 'duration': 4.722}, {'end': 2342.589, 'text': 'and here we want to give it a background color, a white in what else you want to do.', 'start': 2336.447, 'duration': 6.142}, {'end': 2356.919, 'text': 'well, we obviously want to add yeah, once you add the borders, sweet, um, yes, um might have to add some margins and paddings,', 'start': 2342.589, 'duration': 14.33}, {'end': 2359.521, 'text': "but we're gonna look at that a bit later on.", 'start': 2356.919, 'duration': 2.602}, {'end': 2362.243, 'text': 'um, so looks quite right, i think.', 'start': 2359.521, 'duration': 2.722}, {'end': 2363.044, 'text': 'top content.', 'start': 2362.243, 'duration': 0.801}, {'end': 2366.466, 'text': "let's copy it and rename it bottom content.", 'start': 2363.044, 'duration': 3.422}, {'end': 2369.32, 'text': 'so now, both articles like that.', 'start': 2366.466, 'duration': 2.854}, {'end': 2373.163, 'text': "yeah, we will want some padding, because we don't want the text to start like that.", 'start': 2369.32, 'duration': 3.843}], 'summary': 'Styling two contents, adding borders, and padding for top and bottom content.', 'duration': 30.574, 'max_score': 2271.374, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo2271374.jpg'}], 'start': 1889.515, 'title': 'Styling web page and containers', 'summary': 'Covers styling web page elements, including navigation, main content, articles, and sidebars, by setting dimensions, adding borders, padding, margins, and applying float and background color properties.', 'chapters': [{'end': 2010.703, 'start': 1889.515, 'title': 'Styling active links in main header', 'summary': 'Covers styling the active links in the main header by giving them an orange background color (#cf5c3f) and white text color, while removing any possible text shadow.', 'duration': 121.188, 'highlights': ['Styling the active links in the main header by giving them an orange background color (#CF5C3F) and white text color, while removing any possible text shadow.', "Working with links that have the class 'active' to be able to style the active link that the user is currently on.", 'Identifying the need to work on the links and main header navigation to allow for hovering and styling.']}, {'end': 2489.327, 'start': 2010.703, 'title': 'Styling web page and containers', 'summary': 'Covers the process of styling web page elements, such as navigation, main content, articles, and sidebars, including setting dimensions, adding borders, padding, margins, and applying float and background color properties.', 'duration': 478.624, 'highlights': ['The main content is given a width of 70% to accommodate sidebars and floated to the left, with the addition of borders and padding to improve the layout. The main content is assigned a width of 70% to allow space for sidebars, floated left, and borders and padding are added for layout improvement.', 'The process of styling articles involves setting background color, adding borders, margins, and paddings to improve the appearance of the content. Styling articles includes setting background color, adding borders, margins, and paddings to enhance content appearance.', 'Setting the height and border radius for the navigation elements is discussed, with emphasis on the calculation of pixel dimensions for optimal styling. Discussion on setting the height and border radius for navigation, emphasizing the calculation of pixel dimensions for optimal styling.']}], 'duration': 599.812, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo1889515.jpg', 'highlights': ['Styling the active links in the main header by giving them an orange background color (#CF5C3F) and white text color, while removing any possible text shadow.', 'The main content is given a width of 70% to accommodate sidebars and floated to the left, with the addition of borders and padding to improve the layout.', "Working with links that have the class 'active' to be able to style the active link that the user is currently on.", 'The process of styling articles involves setting background color, adding borders, margins, and paddings to improve the appearance of the content.', 'Identifying the need to work on the links and main header navigation to allow for hovering and styling.', 'Setting the height and border radius for the navigation elements is discussed, with emphasis on the calculation of pixel dimensions for optimal styling.']}, {'end': 2938.364, 'segs': [{'end': 2550.623, 'src': 'embed', 'start': 2521.313, 'weight': 0, 'content': [{'end': 2530.464, 'text': "let's make this 27 percent and see what happens if we give them a margin left of three percent.", 'start': 2521.313, 'duration': 9.151}, {'end': 2532.468, 'text': 'So it happens that.', 'start': 2531.687, 'duration': 0.781}, {'end': 2533.989, 'text': "You can see it's aligned perfectly.", 'start': 2532.748, 'duration': 1.241}, {'end': 2543.117, 'text': "The reason why it's aligned perfectly, it's because we have 27% with the margin that is 3%, that's 30.", 'start': 2534.069, 'duration': 9.048}, {'end': 2549.743, 'text': "And then you already know that our main content, which is here, is 70%, or our content, sorry, it's 70%.", 'start': 2543.117, 'duration': 6.626}, {'end': 2550.623, 'text': 'So it adds up to 100.', 'start': 2549.743, 'duration': 0.88}], 'summary': 'Align content using 27% and 3% margin, totaling 100%.', 'duration': 29.31, 'max_score': 2521.313, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo2521313.jpg'}, {'end': 2650.797, 'src': 'embed', 'start': 2584.075, 'weight': 1, 'content': [{'end': 2591.577, 'text': 'so you have a padding of six in total, three left, three to the right, which means that your total width is gonna be 21 percent.', 'start': 2584.075, 'duration': 7.502}, {'end': 2601.359, 'text': "um, so, now you have it and then we, uh, we want some margin, uh, to the bottom, to all of them, and let's see margin bottom.", 'start': 2591.577, 'duration': 9.782}, {'end': 2603.179, 'text': 'uh, two, two percent.', 'start': 2601.359, 'duration': 1.82}, {'end': 2621.815, 'text': "then we want the first one to have a margin top, and I'm gonna show you a trick now if you didn't know it.", 'start': 2614.509, 'duration': 7.306}, {'end': 2624.998, 'text': 'once you have it, a margin the top of 2%.', 'start': 2621.815, 'duration': 3.183}, {'end': 2630.383, 'text': "oh, that's not good, it should add up here.", 'start': 2624.998, 'duration': 5.385}, {'end': 2638.609, 'text': "But yeah, whatever, we're gonna work on style word now.", 'start': 2634.783, 'duration': 3.826}, {'end': 2640.973, 'text': "What I wanna show you, it's something very nice.", 'start': 2638.909, 'duration': 2.064}, {'end': 2645.821, 'text': 'Instead of writing three lines of code, I can teach you how to write the same thing in only one.', 'start': 2641.514, 'duration': 4.307}, {'end': 2650.797, 'text': "so we're just gonna say margin and first i'm gonna write and then i'm gonna explain it.", 'start': 2647.535, 'duration': 3.262}], 'summary': 'Styling tutorial with 21% total width, 2% margins, and code optimization', 'duration': 66.722, 'max_score': 2584.075, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo2584075.jpg'}, {'end': 2793.975, 'src': 'embed', 'start': 2742.086, 'weight': 3, 'content': [{'end': 2754.053, 'text': 'we want the same background color as the navigation, which, as far as I remember, was 6x6, and then we want a margin on top of 2%.', 'start': 2742.086, 'duration': 11.967}, {'end': 2754.653, 'text': "let's see how it looks.", 'start': 2754.053, 'duration': 0.6}, {'end': 2757.795, 'text': 'I think it looks quite fine.', 'start': 2754.653, 'duration': 3.142}, {'end': 2770.302, 'text': "and now we're gonna edit the actual paragraph of the main footer so we make it look nicer and style the text.", 'start': 2758.274, 'duration': 12.028}, {'end': 2773.564, 'text': 'and what we want is a width.', 'start': 2770.302, 'duration': 3.262}, {'end': 2780.95, 'text': "let's give it a width of 92% of its parent container and then a margin of 0 order, because we want it to be centered.", 'start': 2773.564, 'duration': 7.386}, {'end': 2781.53, 'text': "let's see how it looks.", 'start': 2780.95, 'duration': 0.58}, {'end': 2787.59, 'text': "um, that looks just fine, but we don't want a margin of two percent.", 'start': 2783.807, 'duration': 3.783}, {'end': 2788.631, 'text': 'it was my mistake.', 'start': 2787.59, 'duration': 1.041}, {'end': 2789.532, 'text': "we want a margin of i don't.", 'start': 2788.631, 'duration': 0.901}, {'end': 2793.415, 'text': "let's say two, two, uh, two percent.", 'start': 2789.532, 'duration': 3.883}, {'end': 2793.975, 'text': 'now it looks better.', 'start': 2793.415, 'duration': 0.56}], 'summary': 'Styling includes 6x6 background, 92% width, 2% top margin. adjusted to 2% margin for improved appearance.', 'duration': 51.889, 'max_score': 2742.086, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo2742086.jpg'}, {'end': 2873.798, 'src': 'embed', 'start': 2846.276, 'weight': 5, 'content': [{'end': 2854.706, 'text': "go away, yes, and then the links are still like that and told you earlier that we're gonna go back to the links and edit them.", 'start': 2846.276, 'duration': 8.43}, {'end': 2866.193, 'text': "so let's go up here to the links, and then give them a, you know, give them sub colors instead of that that blue we want to make them.", 'start': 2854.706, 'duration': 11.487}, {'end': 2871.056, 'text': 'we want to make them orange, like like this kind of orange.', 'start': 2866.193, 'duration': 4.863}, {'end': 2873.798, 'text': "and so let's go here and say color.", 'start': 2871.056, 'duration': 2.742}], 'summary': 'Plan to change link colors to orange for a more distinct appearance.', 'duration': 27.522, 'max_score': 2846.276, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo2846276.jpg'}], 'start': 2489.327, 'title': 'Styling web elements and footer', 'summary': 'Discusses styling web elements by adding border radius, margin, padding, and using a shortcut for defining margins, with specific percentages mentioned for each property. it also focuses on styling the main footer and its paragraph, including setting the width, margin, color, and background color, with specific percentages and color codes mentioned throughout.', 'chapters': [{'end': 2709.402, 'start': 2489.327, 'title': 'Styling web elements with margins and padding', 'summary': 'Discusses styling web elements by adding border radius, margin, padding, and using a shortcut for defining margins, with specific percentages mentioned for each property and their impact on the layout.', 'duration': 220.075, 'highlights': ['The chapter emphasizes adding a border radius and margin left of 27% to align three elements, with a subsequent explanation of how the percentages add up to 100, showcasing a clear understanding of layout design.', "A detailed explanation is provided on the impact of adding padding, where the total width is calculated as 21%, demonstrating proficiency in considering padding's effect on element dimensions.", 'An efficient technique for defining margins is introduced, illustrating a practical understanding of optimizing code by combining margin properties into a single line for top, right, bottom, and left dimensions.']}, {'end': 2938.364, 'start': 2709.402, 'title': 'Styling the footer', 'summary': 'Focuses on styling the main footer and its paragraph, including setting the width, margin, color, and background color, with specific percentages and color codes mentioned throughout.', 'duration': 228.962, 'highlights': ['Setting the main footer to have a width of 100% of its container and a background color similar to the navigation, specifically 6x6, while also adding a 2% margin on top.', 'Adjusting the width of the main footer paragraph to 92% of its parent container, modifying the margin to 2%, and ensuring it is centered.', "Changing the color of the text in the main footer to white and adjusting the links to have an orange color, specifically using the color code 'see if I see three'."]}], 'duration': 449.037, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo2489327.jpg', 'highlights': ['The chapter emphasizes adding a border radius and margin left of 27% to align three elements, showcasing a clear understanding of layout design.', "A detailed explanation is provided on the impact of adding padding, where the total width is calculated as 21%, demonstrating proficiency in considering padding's effect on element dimensions.", 'An efficient technique for defining margins is introduced, illustrating a practical understanding of optimizing code by combining margin properties into a single line for top, right, bottom, and left dimensions.', 'Setting the main footer to have a width of 100% of its container and a background color similar to the navigation, specifically 6x6, while also adding a 2% margin on top.', 'Adjusting the width of the main footer paragraph to 92% of its parent container, modifying the margin to 2%, and ensuring it is centered.', "Changing the color of the text in the main footer to white and adjusting the links to have an orange color, specifically using the color code 'see if I see three'"]}, {'end': 3975.176, 'segs': [{'end': 2967.667, 'src': 'embed', 'start': 2939.565, 'weight': 1, 'content': [{'end': 2946.168, 'text': 'And then another thing that we seem to forget and now I just remember is this footer if you remember.', 'start': 2939.565, 'duration': 6.603}, {'end': 2947.309, 'text': 'We called it footer here.', 'start': 2946.288, 'duration': 1.021}, {'end': 2950.394, 'text': 'and we called it the post info.', 'start': 2949.113, 'duration': 1.281}, {'end': 2955.598, 'text': "I think, yeah, it's in the footer, it's in the p in a paragraph class called post info.", 'start': 2950.394, 'duration': 5.204}, {'end': 2967.667, 'text': "we want to style that and we want to go right here and style post info and let's say we're gonna make it italic.", 'start': 2955.598, 'duration': 12.069}], 'summary': 'Styling the post info in the footer to be italic.', 'duration': 28.102, 'max_score': 2939.565, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo2939565.jpg'}, {'end': 3169.112, 'src': 'embed', 'start': 3132.316, 'weight': 0, 'content': [{'end': 3138.281, 'text': 'Well, media queries work quite simple and I explained it to you in the CSS3 tutorial how they work, I think.', 'start': 3132.316, 'duration': 5.965}, {'end': 3148.47, 'text': "So you should know that they're quite easy to implement and well, we're gonna work now with a minimum width of 150 pixels and a max width of,", 'start': 3139.322, 'duration': 9.148}, {'end': 3149.791, 'text': "let's say, 600 pixels.", 'start': 3148.47, 'duration': 1.321}, {'end': 3161.407, 'text': "um, yeah, and then we're gonna do that.", 'start': 3158.185, 'duration': 3.222}, {'end': 3166.19, 'text': 'i plan, i usually keep it like that.', 'start': 3161.407, 'duration': 4.783}, {'end': 3169.112, 'text': "so it's everything that comes inside it.", 'start': 3166.19, 'duration': 2.922}], 'summary': 'Media queries are simple to implement, with a minimum width of 150 pixels and a max width of 600 pixels.', 'duration': 36.796, 'max_score': 3132.316, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo3132316.jpg'}, {'end': 3947.764, 'src': 'embed', 'start': 3920.733, 'weight': 2, 'content': [{'end': 3929.399, 'text': 'and if you like me to talk louder or want my screen brightness to be lower or whatever, tell me,', 'start': 3920.733, 'duration': 8.666}, {'end': 3936.701, 'text': "because i would want to to improve this and i promise i'll improve it by the next tutorial which, if i'm not mistaking,", 'start': 3929.399, 'duration': 7.302}, {'end': 3940.342, 'text': "it's going to be about html5 contact forms, creating those contact forms.", 'start': 3936.701, 'duration': 3.641}, {'end': 3947.764, 'text': "so we're going to fill in this contact, this contact page, and we're going to make the contact form responsive too.", 'start': 3940.342, 'duration': 7.422}], 'summary': 'Next tutorial will cover creating html5 contact forms, with a commitment to improvement.', 'duration': 27.031, 'max_score': 3920.733, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo3920733.jpg'}], 'start': 2939.565, 'title': 'Styling footer post info and creating responsive html5 css3 theme', 'summary': 'Discusses styling the post info in the footer by making it italic, changing its color to gray, and making it smaller, and details the process of creating a responsive html5 css3 theme, involving media queries and layout adjustments, resulting in a 330-line code layout. the tutorial aims to encourage hands-on coding and feedback for future improvements.', 'chapters': [{'end': 2992.705, 'start': 2939.565, 'title': 'Styling footer post info', 'summary': 'Discusses styling the post info in the footer by making it italic, changing its color to gray, and making it smaller to establish hierarchy.', 'duration': 53.14, 'highlights': ['The post info in the footer is styled by making it italic, changing its color to gray (#999), and making it smaller to establish hierarchy.', 'Styling the post info in the footer helps in creating hierarchy and emphasizing the importance of content.']}, {'end': 3975.176, 'start': 2992.705, 'title': 'Creating responsive html5 css3 theme', 'summary': 'Details the process of creating a responsive html5 css3 theme, involving media queries and layout adjustments, resulting in a 330-line code layout. the tutorial aims to encourage hands-on coding and feedback for future improvements.', 'duration': 982.471, 'highlights': ['The tutorial walks through the process of creating a responsive HTML5 CSS3 theme, involving media queries and layout adjustments, resulting in a 330-line code layout.', 'Encourages hands-on coding and feedback for future improvements to the tutorial and upcoming tutorials about HTML5 contact forms.', 'Demonstrates the use of media queries for responsiveness, with a minimum width of 150 pixels and a max width of 600 pixels, and encourages user feedback for improvements to future tutorials.']}], 'duration': 1035.611, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/eOG90Q8EfRo/pics/eOG90Q8EfRo2939565.jpg', 'highlights': ['The tutorial walks through the process of creating a responsive HTML5 CSS3 theme, involving media queries and layout adjustments, resulting in a 330-line code layout.', 'Styling the post info in the footer is done by making it italic, changing its color to gray (#999), and making it smaller to establish hierarchy.', 'Encourages hands-on coding and feedback for future improvements to the tutorial and upcoming tutorials about HTML5 contact forms.', 'Demonstrates the use of media queries for responsiveness, with a minimum width of 150 pixels and a max width of 600 pixels, and encourages user feedback for improvements to future tutorials.', 'Styling the post info in the footer helps in creating hierarchy and emphasizing the importance of content.']}], 'highlights': ['The tutorial walks through the process of creating a responsive HTML5 CSS3 theme, involving media queries and layout adjustments, resulting in a 330-line code layout.', 'The instructor emphasizes the value of learning by coding oneself and highlights the ongoing work nature of the theme, indicating plans for future tutorial additions about HTML5 and CSS3.', "The tutorial focuses on creating a fully responsive HTML5 CSS3 theme, emphasizing the need to have prior knowledge of the author's previous articles.", 'The chapter discusses creating a responsive HTML framework, emphasizing the importance of learning by coding oneself and the ongoing work nature of the theme.', 'Encourages hands-on coding and feedback for future improvements to the tutorial and upcoming tutorials about HTML5 contact forms.', 'The instructor emphasizes the importance of simplicity in the theme to facilitate easy comprehension for the audience.', 'The process involves starting with a blank theme, saving it, and then beginning HTML coding before transitioning to CSS.', 'The instructor emphasizes the importance of being able to use the created elements across different layouts, enabling reusability.', "The chapter emphasizes the importance of meta name viewport for responsiveness, specifying 'content' as 'width=device-width' and 'initial scale' as '1'.", "The process of building the main header involves using the header tag and assigning the class 'main header' to distinguish it from potential future header tags, with a specific focus on introducing and locating the logo within the web page structure.", "Creating navigation using the 'nav' tag instead of 'div id equals navigation' simplifies the process in HTML5.", 'The three main containers for the web page are the header (including logo and navigation), main content (comprising content area and sidebar/sidebars), and footer.', 'The container width is set to 70% to create a centered layout, enhancing the visual appeal (width set to 70%).', 'The chapter emphasizes the use of standard tags like body when starting coding and discusses the significance of setting text alignment and using basic font families like Arial and Lucida Sans Unicode.', 'The chapter explains the importance of using HTML5 tags for responsiveness and coding in percent for fluid design, with the base font size usually being 14 pixels.', 'Styling the navigation elements and removing bullets from list items are key elements of the process.', 'Styling the active links in the main header by giving them an orange background color (#CF5C3F) and white text color, while removing any possible text shadow.', 'The main content is given a width of 70% to accommodate sidebars and floated to the left, with the addition of borders and padding to improve the layout.', "A detailed explanation is provided on the impact of adding padding, where the total width is calculated as 21%, demonstrating proficiency in considering padding's effect on element dimensions.", 'An efficient technique for defining margins is introduced, illustrating a practical understanding of optimizing code by combining margin properties into a single line for top, right, bottom, and left dimensions.', 'Setting the main footer to have a width of 100% of its container and a background color similar to the navigation, specifically 6x6, while also adding a 2% margin on top.', 'The tutorial covers creating a responsive HTML5 CSS3 theme, emphasizing hands-on coding, including basics, web page structure, responsive design, css styling, and container styling, resulting in a 330-line code layout and support for queries and feedback.']}