title
HTML and CSS Tutorial - Create a Website for Beginners

description
Learn the basics of HTML and CSS in this complete tutorial. You will create a band website project using HTML and learn how to apply modern design in order to style the site using CSS. 🔗CSS Crash Course: https://www.youtube.com/watch?v=r1xBCi5SOjw ⭐️ Course Contents ⭐️ ⌨️ (00:00) Your first webpage 💻 Code: https://github.com/WebDevSimplified/Introduction-to-Web-Development/tree/master/Introduction%20to%20HTML/Lesson%201 ⌨️ (4:18) Basic HTML elements 💻 Code: https://github.com/WebDevSimplified/Introduction-to-Web-Development/tree/master/Introduction%20to%20HTML/Lesson%202 ⌨️ (14:20) Advanced HTML elements 💻 Code: https://github.com/WebDevSimplified/Introduction-to-Web-Development/tree/master/Introduction%20to%20HTML/Lesson%203 ⌨️ (27:22) Links and elements 💻 Code: https://github.com/WebDevSimplified/Introduction-to-Web-Development/tree/master/Introduction%20to%20HTML/Lesson%204 ⌨️ (42:19) CSS part 1 💻 Code: https://github.com/WebDevSimplified/Introduction-to-Web-Development/tree/master/Introduction%20to%20CSS/Lesson%201 ⌨️ (1:13:35) CSS part 2 💻 Code: https://github.com/WebDevSimplified/Introduction-to-Web-Development/tree/master/Introduction%20to%20CSS/Lesson%202 ⌨️ (1:36:09) CSS part 3 💻 Code: https://github.com/WebDevSimplified/Introduction-to-Web-Development/tree/master/Introduction%20to%20CSS/Lesson%203 Tutorial created by Web Dev Simplified. Check out their channel for more great content: https://www.youtube.com/channel/UCFbNIlppjAuEX4znoulh0Cw Twitter: https://twitter.com/DevSimplified -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://medium.freecodecamp.org

detail
{'title': 'HTML and CSS Tutorial - Create a Website for Beginners', 'heatmap': [{'end': 854.827, 'start': 770.13, 'weight': 1}], 'summary': 'This tutorial covers html basics, live server usage, web development, coding html elements, completing store page, styling web pages with css, fixing webpage content, and styling responsive web pages, showcasing specific details and providing insights into url structure, auto-refreshing functionality, html entity usage, website coding, css properties, flexbox, and achieving a fully responsive design.', 'chapters': [{'end': 236.794, 'segs': [{'end': 97.949, 'src': 'embed', 'start': 54.846, 'weight': 2, 'content': [{'end': 58.107, 'text': 'Upon doing this, you will be greeted with a fairly complex looking window.', 'start': 54.846, 'duration': 3.261}, {'end': 65.843, 'text': 'The data in these tabs is extremely useful in certain scenarios, but for this course, we will only care about the information in the elements tab.', 'start': 59.042, 'duration': 6.801}, {'end': 75.546, 'text': 'The elements tab shows us all the HTML elements our page is composed of, and as you can see, our page has three elements, HTML, head, and body.', 'start': 66.644, 'duration': 8.902}, {'end': 80.667, 'text': 'There is also a fourth element that every HTML page has, and this is called the doc type.', 'start': 76.266, 'duration': 4.401}, {'end': 86.328, 'text': 'The doc type is the first element of an HTML page and must be the first thing in the HTML file.', 'start': 81.447, 'duration': 4.881}, {'end': 90.386, 'text': 'The doc type tells the browser which version of HTML you are using.', 'start': 87.145, 'duration': 3.241}, {'end': 94.267, 'text': "For all of our videos, we'll be using HTML as our doc type.", 'start': 91.246, 'duration': 3.021}, {'end': 97.949, 'text': 'This tells our browser to use the most up-to-date version of HTML available.', 'start': 94.748, 'duration': 3.201}], 'summary': 'The elements tab in the window shows three html elements: html, head, and body, and the doc type is the first element of an html page, specifying the version of html to be used.', 'duration': 43.103, 'max_score': 54.846, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE54846.jpg'}, {'end': 192.077, 'src': 'embed', 'start': 161.087, 'weight': 0, 'content': [{'end': 164.869, 'text': 'so we will download a plugin for Visual Studio Code called Live Server.', 'start': 161.087, 'duration': 3.782}, {'end': 169.112, 'text': 'This plugin will automatically refresh our browser every time we make a change.', 'start': 165.61, 'duration': 3.502}, {'end': 176.245, 'text': 'In order to download this plugin, go to the Extensions tab in the bottom left of the sidebar and type Live Server into the search bar.', 'start': 169.933, 'duration': 6.312}, {'end': 183.11, 'text': 'Next, click the Install button on the Live Server plugin and then click the Reload button after the install is complete.', 'start': 177.185, 'duration': 5.925}, {'end': 186.673, 'text': 'This will restart Visual Studio Code with the new plugin enabled.', 'start': 183.75, 'duration': 2.923}, {'end': 192.077, 'text': 'Now if you open your HTML file, you will see a Go Live button on the bottom of the screen.', 'start': 187.733, 'duration': 4.344}], 'summary': 'Download live server plugin for visual studio code to automatically refresh browser on code changes.', 'duration': 30.99, 'max_score': 161.087, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE161087.jpg'}, {'end': 245.86, 'src': 'embed', 'start': 213.112, 'weight': 1, 'content': [{'end': 214.852, 'text': "Let's break down what this URL means.", 'start': 213.112, 'duration': 1.74}, {'end': 217.414, 'text': 'The first set of numbers from the URL, 127.0.', 'start': 215.593, 'duration': 1.821}, {'end': 219.374, 'text': '0.1, is the IP address of your local host.', 'start': 217.414, 'duration': 1.96}, {'end': 228.605, 'text': "This IP address is exactly the same on all computers and is the IP address of the computer's server.", 'start': 223.339, 'duration': 5.266}, {'end': 232.329, 'text': 'The second set of numbers after the colon is the port number.', 'start': 229.526, 'duration': 2.803}, {'end': 236.794, 'text': 'These two numbers work similarly to how an address of an apartment complex works.', 'start': 233.052, 'duration': 3.742}, {'end': 241.177, 'text': 'The IP address is like the address of the apartment complex,', 'start': 237.795, 'duration': 3.382}, {'end': 245.86, 'text': 'while the port number represents the apartment number of a single room in the apartment complex.', 'start': 241.177, 'duration': 4.683}], 'summary': 'The url contains the ip address 127.0.0.1, which is the local host, and the port number represents a specific room in the server.', 'duration': 32.748, 'max_score': 213.112, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE213112.jpg'}], 'start': 0.523, 'title': 'Html basics and live server usage', 'summary': 'Covers html file structure, basic elements creation, understanding html elements, and usage of live server plugin in visual studio code, providing insight into url structure and auto-refreshing functionality.', 'chapters': [{'end': 53.986, 'start': 0.523, 'title': 'Html file structure and basic elements', 'summary': 'Covers the structure of an html file and basic html elements, guiding the viewer through creating their first webpage and rendering it in a web browser, with the final result being a very basic webpage.', 'duration': 53.463, 'highlights': ['The chapter covers the structure of an HTML file and basic HTML elements', 'Guiding the viewer through creating their first webpage', 'Rendering the webpage in a web browser, resulting in a basic webpage', 'Opening the developer tools of Google Chrome to view the HTML tags']}, {'end': 140.255, 'start': 54.846, 'title': 'Understanding html elements', 'summary': 'Introduces the elements tab in html which displays the html elements of a page, including the doc type, html, head, and body elements, and explains their functions and hierarchy.', 'duration': 85.409, 'highlights': ['The elements tab in HTML displays the HTML elements of a page, including doc type, HTML, head, and body elements.', 'The doc type is the first element of an HTML page and tells the browser which version of HTML is being used.', 'The HTML element indicates that all the code inside it is HTML, excluding the doc type, and should come after the doc type.', 'The head element, though technically optional, is used to set information such as the title or description of the page and is generally the first element inside the HTML element.', 'The body element contains all the information to be displayed in the browser, such as text, images, and videos.']}, {'end': 236.794, 'start': 141.575, 'title': 'Using live server plugin for auto-refreshing html changes', 'summary': 'Explains how to use the live server plugin in visual studio code to automatically refresh the browser every time an html file is saved, which eliminates the need for manual browser refresh and provides insight into the url structure displayed by the plugin.', 'duration': 95.219, 'highlights': ['The Live Server plugin in Visual Studio Code automatically refreshes the browser every time an HTML file is saved, eliminating the need for manual browser refresh.', 'The URL structure displayed by the Live Server plugin includes the IP address of the local host (127.0.0.1) and the port number, providing insight into its functioning.']}], 'duration': 236.271, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE523.jpg', 'highlights': ['The Live Server plugin in Visual Studio Code automatically refreshes the browser every time an HTML file is saved, eliminating the need for manual browser refresh.', 'The URL structure displayed by the Live Server plugin includes the IP address of the local host (127.0.0.1) and the port number, providing insight into its functioning.', 'The elements tab in HTML displays the HTML elements of a page, including doc type, HTML, head, and body elements.', 'The doc type is the first element of an HTML page and tells the browser which version of HTML is being used.']}, {'end': 936.19, 'segs': [{'end': 269.527, 'src': 'embed', 'start': 237.795, 'weight': 0, 'content': [{'end': 241.177, 'text': 'The IP address is like the address of the apartment complex,', 'start': 237.795, 'duration': 3.382}, {'end': 245.86, 'text': 'while the port number represents the apartment number of a single room in the apartment complex.', 'start': 241.177, 'duration': 4.683}, {'end': 253.845, 'text': 'If you do not specify a port number, the browser will automatically use port 80, which is the default port for HTTP communication.', 'start': 246.64, 'duration': 7.205}, {'end': 258.178, 'text': 'You now have all of the setup complete to efficiently develop HTML pages.', 'start': 254.735, 'duration': 3.443}, {'end': 263.742, 'text': 'We will begin learning new HTML elements as well as the structure of an HTML element.', 'start': 259.459, 'duration': 4.283}, {'end': 269.527, 'text': 'We will also start building the project that we will work on over the duration of the entire Introduction to Web Development course.', 'start': 264.463, 'duration': 5.064}], 'summary': 'Understanding ip address and port number setup for efficient html development.', 'duration': 31.732, 'max_score': 237.795, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE237795.jpg'}, {'end': 314.588, 'src': 'embed', 'start': 274.439, 'weight': 1, 'content': [{'end': 279.404, 'text': 'I will walk you through the exact steps needed to create the website, and I will explain all the concepts along the way.', 'start': 274.439, 'duration': 4.965}, {'end': 281.846, 'text': 'As you follow along with this course.', 'start': 280.164, 'duration': 1.682}, {'end': 287.271, 'text': 'I want you to choose your favorite musician or band and create the website for them, instead of copying exactly what I do.', 'start': 281.846, 'duration': 5.425}, {'end': 291.976, 'text': 'In this video, we will be creating the HTML for the About page of the FAND website.', 'start': 287.992, 'duration': 3.984}, {'end': 297.445, 'text': 'You may notice that it looks ugly now, but remember that HTML is only for the content of the site.', 'start': 292.844, 'duration': 4.601}, {'end': 300.185, 'text': "Later, we'll use CSS to style the page.", 'start': 297.965, 'duration': 2.22}, {'end': 303.846, 'text': "Let's get started by going over the structure of an HTML element.", 'start': 301.105, 'duration': 2.741}, {'end': 310.127, 'text': 'Most HTML elements are composed of a start tag, an end tag, and some content between these tags.', 'start': 304.606, 'duration': 5.521}, {'end': 314.588, 'text': 'The content inside these tags can either be text or other HTML elements.', 'start': 310.867, 'duration': 3.721}], 'summary': 'The tutorial guides creating a website for a musician, starting with the html structure and content.', 'duration': 40.149, 'max_score': 274.439, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE274439.jpg'}, {'end': 684.427, 'src': 'embed', 'start': 655.546, 'weight': 3, 'content': [{'end': 662.011, 'text': 'So in order to get this image, we go into the images folder and then get the image bandmembers.png.', 'start': 655.546, 'duration': 6.465}, {'end': 666.514, 'text': 'This must be a path related to the about.html file.', 'start': 662.351, 'duration': 4.163}, {'end': 672.478, 'text': 'So if we moved this about.html file into our images folder, for example,', 'start': 666.914, 'duration': 5.564}, {'end': 680.944, 'text': 'then this path would have to be bandmembers.png as opposed to images slash bandmembers.png.', 'start': 672.478, 'duration': 8.466}, {'end': 684.427, 'text': "And if we reopen this in live server, you'll see that this now works.", 'start': 681.345, 'duration': 3.082}], 'summary': 'To display image in about.html, move file to images folder. path must be bandmembers.png, not images/bandmembers.png.', 'duration': 28.881, 'max_score': 655.546, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE655546.jpg'}, {'end': 854.827, 'src': 'heatmap', 'start': 770.13, 'weight': 1, 'content': [{'end': 775.935, 'text': 'As you may notice, our actual final page looks very different than what our current page looks like,', 'start': 770.13, 'duration': 5.805}, {'end': 779.478, 'text': 'but that is because this final page is styled using CSS.', 'start': 775.935, 'duration': 3.543}, {'end': 786.825, 'text': 'As you remember from earlier videos, HTML is only used to define the content of the page, and this, right here,', 'start': 780.159, 'duration': 6.666}, {'end': 788.946, 'text': 'is all of the content that goes onto our page.', 'start': 786.825, 'duration': 2.121}, {'end': 797.072, 'text': 'The styling for the fonts, font size, background colors, and all these images, that will all come later in CSS.', 'start': 789.767, 'duration': 7.305}, {'end': 801.596, 'text': 'All of the content, though, the HTML, is complete for this About page.', 'start': 797.893, 'duration': 3.703}, {'end': 810.942, 'text': 'Some common problems that you may run into as you create the HTML for your own banned About page is that you forget to include the ending tag for your HTML elements.', 'start': 802.236, 'duration': 8.706}, {'end': 815.566, 'text': 'If you do this, your HTML will not look correct, or it may not even render at all.', 'start': 811.583, 'duration': 3.983}, {'end': 820.829, 'text': 'In order to check that you have created all the ending tags for your HTML elements.', 'start': 816.306, 'duration': 4.523}, {'end': 823.41, 'text': 'if you click on either the start tag or the end tag,', 'start': 820.829, 'duration': 2.581}, {'end': 830.434, 'text': 'Visual Studio Code will automatically highlight the ending tag for you or the start tag if you had selected the ending tag.', 'start': 823.41, 'duration': 7.024}, {'end': 836.897, 'text': 'This is an easy way to check if you have actually created the ending tags and starting tags for all of your elements.', 'start': 830.954, 'duration': 5.943}, {'end': 841.2, 'text': 'Another common problem is with your images not displaying.', 'start': 837.938, 'duration': 3.262}, {'end': 850.225, 'text': 'In order to get around this problem, make sure that the path for your image is in relation to your actual HTML page that it is on.', 'start': 842.182, 'duration': 8.043}, {'end': 854.827, 'text': 'For example, our About page is in the same folder as the Images folder,', 'start': 850.686, 'duration': 4.141}], 'summary': 'Html defines content, styling done with css. common problems: missing ending tags, image path issues.', 'duration': 84.697, 'max_score': 770.13, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE770130.jpg'}, {'end': 860.169, 'src': 'embed', 'start': 830.954, 'weight': 5, 'content': [{'end': 836.897, 'text': 'This is an easy way to check if you have actually created the ending tags and starting tags for all of your elements.', 'start': 830.954, 'duration': 5.943}, {'end': 841.2, 'text': 'Another common problem is with your images not displaying.', 'start': 837.938, 'duration': 3.262}, {'end': 850.225, 'text': 'In order to get around this problem, make sure that the path for your image is in relation to your actual HTML page that it is on.', 'start': 842.182, 'duration': 8.043}, {'end': 854.827, 'text': 'For example, our About page is in the same folder as the Images folder,', 'start': 850.686, 'duration': 4.141}, {'end': 860.169, 'text': 'so we must first navigate through the Images folder to get to the images inside of it.', 'start': 854.827, 'duration': 5.342}], 'summary': 'Check for correct tags and image path in html to avoid display issues.', 'duration': 29.215, 'max_score': 830.954, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE830954.jpg'}, {'end': 908.154, 'src': 'embed', 'start': 878.387, 'weight': 4, 'content': [{'end': 882.25, 'text': 'If you have ever tried to use a greater than or less than sign in the text of your HTML,', 'start': 878.387, 'duration': 3.863}, {'end': 886.053, 'text': 'you may notice that it does not render and actually messes with your entire page rendering.', 'start': 882.25, 'duration': 3.803}, {'end': 893.639, 'text': 'This is because these symbols, along with many more, are special symbols that are used in HTML for signifying start and end tags.', 'start': 886.933, 'duration': 6.706}, {'end': 897.522, 'text': 'In order to render these symbols, we must use HTML entities.', 'start': 894.399, 'duration': 3.123}, {'end': 904.511, 'text': 'An HTML entity is written by writing an ampersand and pound sign followed by the number that corresponds to the symbol.', 'start': 898.202, 'duration': 6.309}, {'end': 908.154, 'text': 'For example, this is the code that will render the less than symbol.', 'start': 905.132, 'duration': 3.022}], 'summary': 'Html symbols like < and > can disrupt rendering and require use of html entities for proper display.', 'duration': 29.767, 'max_score': 878.387, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE878387.jpg'}], 'start': 237.795, 'title': 'Html web development', 'summary': 'Introduces ip address, port numbers, html element structure, and creating websites for musicians using html for content and css for styling. it also covers image tag usage, source attribute, defining image paths, and using html entities for special symbols.', 'chapters': [{'end': 630.293, 'start': 237.795, 'title': 'Html web development introduction', 'summary': 'Introduces the concept of ip address and port numbers, explains the structure of an html element, and provides guidance on creating a website for a musician or band, emphasizing the use of html for content and css for styling.', 'duration': 392.498, 'highlights': ['Explanation of HTML element structure', 'Guidance on creating a website for a musician or band', 'Introduction to IP address and port numbers']}, {'end': 936.19, 'start': 631.014, 'title': 'Html image tag and path attribute', 'summary': 'Explains the usage of image tag and source attribute in html, along with the importance of defining correct image paths and common problems encountered while creating html elements, emphasizing the significance of using html entities to render special symbols.', 'duration': 305.176, 'highlights': ['Importance of defining correct image paths', 'Usage of HTML entities to render special symbols', 'Common problems encountered while creating HTML elements']}], 'duration': 698.395, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE237795.jpg', 'highlights': ['Introduction to IP address and port numbers', 'Guidance on creating a website for a musician or band', 'Explanation of HTML element structure', 'Importance of defining correct image paths', 'Usage of HTML entities to render special symbols', 'Common problems encountered while creating HTML elements']}, {'end': 1717.485, 'segs': [{'end': 992.834, 'src': 'embed', 'start': 957.281, 'weight': 5, 'content': [{'end': 960.279, 'text': 'There are two different meaningless elements, div and span.', 'start': 957.281, 'duration': 2.998}, {'end': 965.483, 'text': 'These elements are the same in every way, except that the div element is a block element,', 'start': 961.059, 'duration': 4.424}, {'end': 969.947, 'text': 'meaning that it will appear on a separate line from the content around it, similar to the paragraph tag.', 'start': 965.483, 'duration': 4.464}, {'end': 975.973, 'text': 'The span element, on the other hand, is an inline element, and thus appears inline with the content around it.', 'start': 970.568, 'duration': 5.405}, {'end': 982.358, 'text': 'If this does not make sense yet, the differences between these two elements will become apparent as we write the HTML for this lesson.', 'start': 976.573, 'duration': 5.785}, {'end': 986.892, 'text': 'Essentially, all you need to know about meaningless elements is that they should be used anytime.', 'start': 982.859, 'duration': 4.033}, {'end': 992.834, 'text': 'you need to group together HTML that either has no meaning or there is no HTML tag to describe the meaning.', 'start': 986.892, 'duration': 5.942}], 'summary': 'Div and span are two meaningless html elements, with div being a block element and span being an inline element.', 'duration': 35.553, 'max_score': 957.281, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE957281.jpg'}, {'end': 1037.911, 'src': 'embed', 'start': 1010.68, 'weight': 0, 'content': [{'end': 1016.323, 'text': 'To get started, we should copy the about.html page and rename it to index.html.', 'start': 1010.68, 'duration': 5.643}, {'end': 1022.627, 'text': 'This is because the about page shares the same header and the same footer as our homepage.', 'start': 1017.264, 'duration': 5.363}, {'end': 1028.624, 'text': 'We now can get rid of the section in the middle that contains the about content since we will not need that on the homepage.', 'start': 1023.8, 'duration': 4.824}, {'end': 1037.911, 'text': 'The reason that we named this page index.html is because the index page is the page that is shown when you leave nothing after the website URL.', 'start': 1029.184, 'duration': 8.727}], 'summary': 'Copy about.html, rename to index.html to share header/footer, remove about content for homepage.', 'duration': 27.231, 'max_score': 1010.68, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE1010680.jpg'}, {'end': 1077.391, 'src': 'embed', 'start': 1049.739, 'weight': 1, 'content': [{'end': 1052.56, 'text': "now let's get started with the actual content of this page.", 'start': 1049.739, 'duration': 2.821}, {'end': 1058.142, 'text': "let's jump back to the image that we have to use as a reference and get started with the header.", 'start': 1052.56, 'duration': 5.582}, {'end': 1066.185, 'text': 'as you can see, inside the header, we have an additional button for get our latest album and another button for the play button.', 'start': 1058.142, 'duration': 8.043}, {'end': 1068.746, 'text': "to create these elements, we'll use the button element.", 'start': 1066.185, 'duration': 2.561}, {'end': 1077.391, 'text': 'button element will render a button on the page, as we can see here, and if we give it some text, such as what is on this page,', 'start': 1069.807, 'duration': 7.584}], 'summary': 'Creating header with buttons for latest album and play functionality using button element.', 'duration': 27.652, 'max_score': 1049.739, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE1049739.jpg'}, {'end': 1217.594, 'src': 'embed', 'start': 1187.515, 'weight': 3, 'content': [{'end': 1193.356, 'text': 'So now if we go back to our page, you can see that that does not actually render, but it shows up in the code for us to reference later.', 'start': 1187.515, 'duration': 5.841}, {'end': 1196.217, 'text': "Now let's go on to the middle section of our page.", 'start': 1194.277, 'duration': 1.94}, {'end': 1203.058, 'text': 'In the middle section of our page, we will use a section element, just as we did for the About section of our code,', 'start': 1196.997, 'duration': 6.061}, {'end': 1205.339, 'text': 'to wrap all of this stuff in our Tours section.', 'start': 1203.058, 'duration': 2.281}, {'end': 1210.808, 'text': 'And you can see that we have a header called tours, just like we had in the about section.', 'start': 1206.584, 'duration': 4.224}, {'end': 1217.594, 'text': "So let's create an H2 and add the text tours into that and view that to make sure that that shows up correctly.", 'start': 1211.068, 'duration': 6.526}], 'summary': 'Using section element to wrap tours content in the middle section of the page.', 'duration': 30.079, 'max_score': 1187.515, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE1187515.jpg'}, {'end': 1584.703, 'src': 'embed', 'start': 1554.674, 'weight': 2, 'content': [{'end': 1559.376, 'text': 'The meta tag has a bunch of different things that we can define for it based on what we set for the name attribute.', 'start': 1554.674, 'duration': 4.702}, {'end': 1562.677, 'text': 'But in our case, we want to set the description of our page.', 'start': 1559.836, 'duration': 2.841}, {'end': 1571.878, 'text': 'This description is used by the browser to show a little bit of a description of your page under the title whenever you search in Google, for example,', 'start': 1563.715, 'duration': 8.163}, {'end': 1572.919, 'text': 'along with other places.', 'start': 1571.878, 'duration': 1.041}, {'end': 1578.381, 'text': "For us, let's just set any title, which we set inside of the content section of this tag.", 'start': 1573.839, 'duration': 4.542}, {'end': 1584.703, 'text': "Let's just say this is the description and close off that meta tag.", 'start': 1578.841, 'duration': 5.862}], 'summary': 'Setting the meta tag description can improve search results. focus on defining the description for the page under the title, such as in google search results.', 'duration': 30.029, 'max_score': 1554.674, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE1554674.jpg'}, {'end': 1727.172, 'src': 'embed', 'start': 1697.85, 'weight': 4, 'content': [{'end': 1701.052, 'text': 'In order for an anchor tag to work, the href attribute must be defined.', 'start': 1697.85, 'duration': 3.202}, {'end': 1705.396, 'text': 'Another common attribute, the target attribute, on the other hand, is optional.', 'start': 1701.873, 'duration': 3.523}, {'end': 1708.438, 'text': 'The target attribute specifies where the link should open.', 'start': 1706.116, 'duration': 2.322}, {'end': 1714.382, 'text': 'By default, the value of the target attribute is self, which means the link should open in the current browser tab.', 'start': 1709.118, 'duration': 5.264}, {'end': 1717.485, 'text': 'The only other value for the target attribute is blank.', 'start': 1715.243, 'duration': 2.242}, {'end': 1720.767, 'text': 'That means that the link opens in a separate tab.', 'start': 1718.225, 'duration': 2.542}, {'end': 1727.172, 'text': "Don't forget to make sure you include the underscore in the front of the self and blank target attribute values or they will not work.", 'start': 1721.688, 'duration': 5.484}], 'summary': "An anchor tag's href attribute is necessary, while target is optional. the default target is self; other option is blank.", 'duration': 29.322, 'max_score': 1697.85, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE1697850.jpg'}], 'start': 936.49, 'title': 'Html elements and coding', 'summary': 'Discusses the use of meaningless elements in html, such as div and span, and focuses on coding the homepage for the banned website using visual studio code, featuring the creation of elements such as buttons, background images, and text formatting using html tags and entities to achieve the desired layout and functionality.', 'chapters': [{'end': 992.834, 'start': 936.49, 'title': 'Html meaningless elements', 'summary': 'Discusses the use of meaningless elements in html, such as div and span, which are used to group together html with no special meaning, where div is a block element and span is an inline element.', 'duration': 56.344, 'highlights': ['The div element is a block element, meaning that it will appear on a separate line from the content around it, similar to the paragraph tag.', 'The span element is an inline element, and thus appears inline with the content around it.', 'Meaningless elements like div and span should be used to group together HTML that either has no meaning or there is no HTML tag to describe the meaning.']}, {'end': 1717.485, 'start': 993.794, 'title': 'Html coding for banned homepage', 'summary': 'Focuses on coding the homepage for the banned website using visual studio code, featuring the creation of elements such as buttons, background images, and text formatting using html tags and entities to achieve the desired layout and functionality.', 'duration': 723.691, 'highlights': ['Creation of homepage index.html by copying about.html and removing unnecessary content', "Utilizing HTML tags to create button elements for 'get our latest album' and 'play' functionalities", 'Incorporating HTML comments to remind about the task of finding a suitable background image', 'Utilizing HTML elements such as section, div, h2, and span for structuring and formatting the middle section of the page', 'Applying HTML meta tags to set the title and description of the webpage for search engine results', 'Explanation of the anchor tag and its attributes for creating links within web pages and to external URLs']}], 'duration': 780.995, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE936490.jpg', 'highlights': ['Creation of homepage index.html by copying about.html and removing unnecessary content', "Utilizing HTML tags to create button elements for 'get our latest album' and 'play' functionalities", 'Applying HTML meta tags to set the title and description of the webpage for search engine results', 'Utilizing HTML elements such as section, div, h2, and span for structuring and formatting the middle section of the page', 'Explanation of the anchor tag and its attributes for creating links within web pages and to external URLs', 'Meaningless elements like div and span should be used to group together HTML that either has no meaning or there is no HTML tag to describe the meaning', 'The div element is a block element, meaning that it will appear on a separate line from the content around it, similar to the paragraph tag', 'The span element is an inline element, and thus appears inline with the content around it']}, {'end': 2537.107, 'segs': [{'end': 1820.632, 'src': 'embed', 'start': 1794.938, 'weight': 0, 'content': [{'end': 1799.26, 'text': "Inside of each of these sections, we're also going to have a header for the title of music, merch, and cart.", 'start': 1794.938, 'duration': 4.322}, {'end': 1805.838, 'text': "Now let's take a look at the content inside of each of these sections.", 'start': 1803.476, 'duration': 2.362}, {'end': 1811.003, 'text': 'As you can see, the music and merch section both share the same template for its content.', 'start': 1806.659, 'duration': 4.344}, {'end': 1818.61, 'text': "where it has an album or t-shirt or coffee cup, whatever's being sold, a picture of that, the price of it and then a button to add it to the cart.", 'start': 1811.003, 'duration': 7.607}, {'end': 1820.632, 'text': "So let's create these elements.", 'start': 1819.45, 'duration': 1.182}], 'summary': 'Creating music and merch sections with uniform content templates.', 'duration': 25.694, 'max_score': 1794.938, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE1794938.jpg'}, {'end': 1904.163, 'src': 'embed', 'start': 1875.921, 'weight': 1, 'content': [{'end': 1881.365, 'text': 'Since this is just a general, generic button.', 'start': 1875.921, 'duration': 5.444}, {'end': 1884.308, 'text': "Now let's open that up using live server to see what our changes look like.", 'start': 1881.365, 'duration': 2.943}, {'end': 1894.44, 'text': 'As you can see, we have the album name, picture of the album and then the line containing the price and the button to add to cart.', 'start': 1887.597, 'duration': 6.843}, {'end': 1898.881, 'text': 'The only thing left to do now is to copy this and paste it down four times,', 'start': 1895.72, 'duration': 3.161}, {'end': 1904.163, 'text': 'so that we have a section like this for all of the albums that we are selling in the music section of our store.', 'start': 1898.881, 'duration': 5.282}], 'summary': 'Creating a generic button and replicating it four times for multiple albums.', 'duration': 28.242, 'max_score': 1875.921, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE1875921.jpg'}, {'end': 1968.597, 'src': 'embed', 'start': 1939.505, 'weight': 3, 'content': [{'end': 1943.907, 'text': 'HTML is only for content and CSS is where we talk about layout and display.', 'start': 1939.505, 'duration': 4.402}, {'end': 1947.068, 'text': 'Now, if we go back to the image of our store page,', 'start': 1945.047, 'duration': 2.021}, {'end': 1952.71, 'text': 'we can see that in the merch section we have almost the exact same layout that we do inside of the music section of our store.', 'start': 1947.068, 'duration': 5.642}, {'end': 1958.713, 'text': "so I'm just going to copy one of the templates from the music section, paste it into the merch section and change it accordingly.", 'start': 1952.71, 'duration': 6.003}, {'end': 1968.597, 'text': "Now if we go view this, you'll see that these also show up at the bottom inside of the merch section.", 'start': 1963.775, 'duration': 4.822}], 'summary': 'Html for content, css for layout. using music section layout in merch section.', 'duration': 29.092, 'max_score': 1939.505, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE1939505.jpg'}, {'end': 2325.453, 'src': 'embed', 'start': 2297.84, 'weight': 2, 'content': [{'end': 2304.282, 'text': 'And as we can see, if we look over here, we have all the elements that we have on this page created in HTML here.', 'start': 2297.84, 'duration': 6.442}, {'end': 2313.184, 'text': 'The last thing we have left to do is add in links so that we can navigate with the home, store, and about buttons that we have up here.', 'start': 2305.939, 'duration': 7.245}, {'end': 2325.453, 'text': "In order to do that, let's scroll up to the very top and wrap this text inside of an a tag as we talked about earlier so that now our text is a link.", 'start': 2313.945, 'duration': 11.508}], 'summary': 'Adding links for navigation with home, store, and about buttons.', 'duration': 27.613, 'max_score': 2297.84, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE2297840.jpg'}, {'end': 2519.358, 'src': 'embed', 'start': 2488.51, 'weight': 4, 'content': [{'end': 2490.952, 'text': 'That is all the HTML that we need for this entire project.', 'start': 2488.51, 'duration': 2.442}, {'end': 2494.675, 'text': "In our next set of videos, we'll be covering CSS.", 'start': 2492.591, 'duration': 2.084}, {'end': 2498.02, 'text': 'CSS is what is going to allow us to take this boring,', 'start': 2495.236, 'duration': 2.784}, {'end': 2502.809, 'text': 'bland-looking HTML and converting it over to this beautiful-looking mockup that we have over here.', 'start': 2498.02, 'duration': 4.789}, {'end': 2509.794, 'text': "After we're done with the CSS for all of our pages, we're then going to jump into JavaScript, which will allow us to make our store page interactive.", 'start': 2503.832, 'duration': 5.962}, {'end': 2513.396, 'text': 'This will make it so that the add cart button actually adds elements to the cart.', 'start': 2510.355, 'duration': 3.041}, {'end': 2519.358, 'text': 'down here the remove element actually removes them and changing the numbers inside of the quantity will actually update the total.', 'start': 2513.396, 'duration': 5.962}], 'summary': 'Html is complete, next is css to beautify, then javascript for interactivity.', 'duration': 30.848, 'max_score': 2488.51, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE2488510.jpg'}, {'end': 2554.278, 'src': 'embed', 'start': 2522.079, 'weight': 5, 'content': [{'end': 2526.761, 'text': 'While we have covered many HTML elements, there are still many more HTML elements that we have not covered.', 'start': 2522.079, 'duration': 4.682}, {'end': 2537.107, 'text': 'I have only selected the most important and useful HTML elements to cover in this introductory course because many of the HTML elements are either obsolete or only useful in very specific scenarios.', 'start': 2527.521, 'duration': 9.586}, {'end': 2545.052, 'text': "We're going to be taking the banned web pages that we created and style the About page to look exactly as this image on the right here.", 'start': 2538.828, 'duration': 6.224}, {'end': 2554.278, 'text': "To give you an idea of what we're starting with, over here is going to be our About page that we have currently designed with just HTML and no CSS.", 'start': 2545.933, 'duration': 8.345}], 'summary': 'Introduction to html elements, focus on most important ones, styling about page with html only', 'duration': 32.199, 'max_score': 2522.079, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE2522079.jpg'}], 'start': 1718.225, 'title': 'Coding and completion of store page', 'summary': 'Covers coding the store page for the banned website with visual studio code, including creating sections for music, merch, and cart, and adding elements such as album images, prices, and buttons. it also covers the completion of html elements and website with the addition of links, buttons, and anchor tags, while highlighting the intent to cover css and javascript in the upcoming videos.', 'chapters': [{'end': 2223.127, 'start': 1718.225, 'title': 'Coding the store page', 'summary': 'Covers coding the store page for the banned website using visual studio code, including creating sections for music, merch, and cart, and adding elements such as album images, prices, and buttons, with adjustments for layout and display.', 'duration': 504.902, 'highlights': ['Creating sections for music, merch, and cart', 'Adding elements such as album images, prices, and buttons', 'Adjusting layout and display']}, {'end': 2537.107, 'start': 2224.451, 'title': 'Html elements and website completion', 'summary': 'Covers the completion of html elements and website with the addition of links, buttons, and anchor tags, while highlighting the intent to cover css and javascript in the upcoming videos.', 'duration': 312.656, 'highlights': ['The chapter covers the completion of HTML elements such as adding a purchase button, creating links for navigation, and wrapping image tags inside anchor tags for YouTube, Spotify, and Facebook.', 'The intent to cover CSS and JavaScript in the upcoming videos to transform the appearance of the HTML and make the store page interactive.', 'An explanation for selecting only the most important and useful HTML elements in the introductory course due to the obsolescence or specific usefulness of other elements.']}], 'duration': 818.882, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE1718225.jpg', 'highlights': ['Creating sections for music, merch, and cart', 'Adding elements such as album images, prices, and buttons', 'The chapter covers the completion of HTML elements', 'Adjusting layout and display', 'The intent to cover CSS and JavaScript in the upcoming videos', 'An explanation for selecting only the most important and useful HTML elements']}, {'end': 3561.775, 'segs': [{'end': 2588.913, 'src': 'embed', 'start': 2561.042, 'weight': 4, 'content': [{'end': 2568.025, 'text': "make sure you watch my Learn CSS in 20 minutes video in order to get primed on what you'll need to know in order to watch this video and follow along.", 'start': 2561.042, 'duration': 6.983}, {'end': 2571.807, 'text': "Now let's get started into the CSS design for this page.", 'start': 2569.066, 'duration': 2.741}, {'end': 2580.651, 'text': "The first thing I want to note is that I've added a fonts folder into our project and included the two fonts that we're going to be using to style some of our elements.", 'start': 2572.847, 'duration': 7.804}, {'end': 2588.913, 'text': "I also, in our images folder, changed our band members.png to be a square image so that it'll fit perfectly inside of a circle.", 'start': 2581.627, 'duration': 7.286}], 'summary': 'Learn css basics in 20 mins. added fonts and modified image for better styling.', 'duration': 27.871, 'max_score': 2561.042, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE2561042.jpg'}, {'end': 2635.835, 'src': 'embed', 'start': 2601.364, 'weight': 3, 'content': [{'end': 2605.868, 'text': "Now that we have that out of the way, let's create our CSS file that we're going to be writing all of our code in.", 'start': 2601.364, 'duration': 4.504}, {'end': 2607.97, 'text': "We're just going to call this styles.css.", 'start': 2606.769, 'duration': 1.201}, {'end': 2626.788, 'text': "Then, inside of our about.html page, in the head, let's add in a link, give it a rel of stylesheet, and an href of style.css.", 'start': 2610.157, 'duration': 16.631}, {'end': 2635.835, 'text': "Now, if we save that, nothing over here will change, because we don't actually have anything loaded into our styles.css.", 'start': 2630.551, 'duration': 5.284}], 'summary': 'Creating styles.css for css code in about.html.', 'duration': 34.471, 'max_score': 2601.364, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE2601364.jpg'}, {'end': 2803.846, 'src': 'embed', 'start': 2774.675, 'weight': 2, 'content': [{'end': 2782.558, 'text': 'This means that if we resize our page, our image will grow and shrink as needed without us having to add any extra code.', 'start': 2774.675, 'duration': 7.883}, {'end': 2789.256, 'text': 'As you can see in our example photo, the background image has a slightly darker hue to it than over here.', 'start': 2783.672, 'duration': 5.584}, {'end': 2792.498, 'text': "So in order to do that, we're going to add a second background.", 'start': 2789.736, 'duration': 2.762}, {'end': 2794.44, 'text': "This time we're going to use a background color.", 'start': 2792.718, 'duration': 1.722}, {'end': 2803.846, 'text': "And we're going to set it to RGBA, and we'll just use black with a 60% transparency.", 'start': 2798.522, 'duration': 5.324}], 'summary': 'Demonstrates resizing image with responsive design, adding second background with rgba black at 60% transparency.', 'duration': 29.171, 'max_score': 2774.675, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE2774675.jpg'}, {'end': 3053.797, 'src': 'embed', 'start': 3028.114, 'weight': 0, 'content': [{'end': 3032.915, 'text': "In order to do that, we're going to use Google Fonts and import it using this URL.", 'start': 3028.114, 'duration': 4.801}, {'end': 3038.957, 'text': 'This URL can be found on the Google Fonts webpage, and you can search for any font on there that you want,', 'start': 3033.515, 'duration': 5.442}, {'end': 3044.958, 'text': "and then all you have to do is click on that font, click the import and it'll give you this link to copy and paste into your CSS.", 'start': 3038.957, 'duration': 6.001}, {'end': 3048.719, 'text': "Now if we save this, you'll see all of our font will change to Railway.", 'start': 3045.698, 'duration': 3.021}, {'end': 3053.797, 'text': 'The last thing that I want to apply to all of our elements is a default text color.', 'start': 3049.875, 'duration': 3.922}], 'summary': 'Using google fonts, import a font with url to change all text to railway and apply default text color.', 'duration': 25.683, 'max_score': 3028.114, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE3028114.jpg'}, {'end': 3136.203, 'src': 'embed', 'start': 3111.154, 'weight': 1, 'content': [{'end': 3117.878, 'text': 'but we want to maybe make our elements so that they are inline with each other as opposed to on separate lines as they are over here.', 'start': 3111.154, 'duration': 6.724}, {'end': 3128.385, 'text': "To do this, we'll select the nav element, and then we'll select the li element under that nav, and we will give them a display of inline.", 'start': 3119.119, 'duration': 9.266}, {'end': 3136.203, 'text': 'This tells us that the browser should render all of these elements in line with each other, as opposed to on separate lines,', 'start': 3129.52, 'duration': 6.683}], 'summary': 'Styling the nav and li elements to display inline for better alignment.', 'duration': 25.049, 'max_score': 3111.154, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE3111154.jpg'}], 'start': 2538.828, 'title': 'Styling web pages with css', 'summary': 'Covers styling the about page, header, elements, navigation, and band name with css, including adding fonts, modifying images, applying background images and colors, adjusting padding, resetting default styles, importing custom fonts, setting text colors, and aligning text. specific details include font and image changes, applying general styles, and making elements inline, with a recommendation to watch a prerequisite css tutorial.', 'chapters': [{'end': 2600.003, 'start': 2538.828, 'title': 'Styling about page with css', 'summary': 'Covers styling the about page with css, including adding fonts and modifying images to fit the design, with specific details on font and image changes and a recommendation to watch a prerequisite css tutorial.', 'duration': 61.175, 'highlights': ['Added fonts folder with two fonts and modified images folder to fit the design, including changing band members.png to a square image and altering footer images to be white instead of black.', "Recommended watching a prerequisite 'Learn CSS in 20 minutes' video before proceeding with the CSS design for the About page."]}, {'end': 3009.208, 'start': 2601.364, 'title': 'Styling header with css', 'summary': 'Covers creating a css file, applying background image and color, using background blend mode, adjusting padding, resetting default styling, and using the everything selector to set general styles for all elements.', 'duration': 407.844, 'highlights': ['Creating a CSS file and linking it to HTML page', 'Applying background image and color', 'Using background blend mode', 'Adjusting padding for spacing', 'Resetting default styling and using the everything selector']}, {'end': 3211.338, 'start': 3010.569, 'title': 'Styling elements and fonts with css', 'summary': 'Explains how to import and apply a custom font using google fonts, set a default text color, and style navigation elements in css, including making elements inline and using inline block for padding.', 'duration': 200.769, 'highlights': ['Importing and applying a custom font using Google Fonts', 'Setting a default text color and reasons for using a light gray color (#777)', 'Styling navigation elements in CSS, including making elements inline', 'Using inline block for padding and its difference from inline elements']}, {'end': 3561.775, 'start': 3212.554, 'title': 'Styling navigation and band name', 'summary': 'Covers styling the navigation elements by adding hover effect, centering the text, increasing font size, changing font family and spacing out the elements, along with styling the band name by aligning text, adjusting font size and importing font files.', 'duration': 349.221, 'highlights': ['Styling the navigation elements', 'Centering and adjusting font size of the text', 'Styling the band name']}], 'duration': 1022.947, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE2538828.jpg', 'highlights': ['Imported and applied custom font using Google Fonts', 'Styled navigation elements, including making elements inline', 'Applied background image and color, adjusted padding for spacing', 'Created CSS file, linked it to HTML page, reset default styling', "Recommended watching prerequisite 'Learn CSS in 20 minutes' video"]}, {'end': 4434.934, 'segs': [{'end': 3628.529, 'src': 'embed', 'start': 3583.176, 'weight': 7, 'content': [{'end': 3586.617, 'text': "This is just a normal font, not italics or anything, so we'll put normal here.", 'start': 3583.176, 'duration': 3.441}, {'end': 3593.479, 'text': 'Now we have that font loaded into our page, so we have booter00 that is normal and normal style.', 'start': 3588.217, 'duration': 5.262}, {'end': 3598.461, 'text': "But over here, you see that our font is bolded and doesn't quite look the same as our mockup.", 'start': 3594.019, 'duration': 4.442}, {'end': 3602.702, 'text': 'This is because h1 tags, by default, bold their font.', 'start': 3599.221, 'duration': 3.481}, {'end': 3613.784, 'text': "To get around this, we're going to set the font weight to be normal and if we save that, our font now looks exactly as it does over here.", 'start': 3603.522, 'duration': 10.262}, {'end': 3619.486, 'text': 'the last thing we need to do is set the color of the font to be white, and if we save that,', 'start': 3613.784, 'duration': 5.702}, {'end': 3622.947, 'text': 'this now looks almost exactly the same as our mock-up does over here.', 'start': 3619.486, 'duration': 3.461}, {'end': 3628.529, 'text': "and that's everything that we need to do, except for this font is a little bit too small.", 'start': 3622.947, 'duration': 5.582}], 'summary': 'Adjust font weight and color to match mock-up, h1 tag defaults to bold.', 'duration': 45.353, 'max_score': 3583.176, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE3583176.jpg'}, {'end': 4087.278, 'src': 'embed', 'start': 4057.504, 'weight': 5, 'content': [{'end': 4060.766, 'text': "In order to do this, we're going to need to supply some classes to the footer.", 'start': 4057.504, 'duration': 3.262}, {'end': 4069.607, 'text': "we're going to use the class of MainFooter, similar to how we used MainHeader, to specify that this is the main footer on our web page.", 'start': 4061.681, 'duration': 7.926}, {'end': 4076.512, 'text': "Then we're going to use the BandName class and apply that to our band name.", 'start': 4070.688, 'duration': 5.824}, {'end': 4080.055, 'text': 'And if we save that and go back here,', 'start': 4077.773, 'duration': 2.282}, {'end': 4087.278, 'text': "You'll see that our band name has already updated to be white text and the correct font and font color and font size,", 'start': 4080.811, 'duration': 6.467}], 'summary': 'Classes mainfooter and bandname used for web page footer. band name updated to white text with correct font, font color, and font size.', 'duration': 29.774, 'max_score': 4057.504, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE4057504.jpg'}, {'end': 4204.8, 'src': 'embed', 'start': 4175.135, 'weight': 1, 'content': [{'end': 4180.522, 'text': "And now in our styles.css, we'll make the main footer container.", 'start': 4175.135, 'duration': 5.387}, {'end': 4189.112, 'text': 'The purpose of this main footer container is to wrap our elements in a display flex element.', 'start': 4182.148, 'duration': 6.964}, {'end': 4200.178, 'text': "A flex display, also known as flexbox, is a very complex layout element that you can use in CSS, but we're only going to skim over the top of it,", 'start': 4190.032, 'duration': 10.146}, {'end': 4204.8, 'text': "because in this video we don't have the time to cover the full complexities of flexbox,", 'start': 4200.178, 'duration': 4.622}], 'summary': 'Creating a main footer container in styles.css for displaying elements using flexbox.', 'duration': 29.665, 'max_score': 4175.135, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE4175135.jpg'}, {'end': 4267.823, 'src': 'embed', 'start': 4223.211, 'weight': 2, 'content': [{'end': 4233.037, 'text': "In order to do this, we'll make it so that main footer container, the UL inside of it, which is our navigation on the right here, we want it to grow.", 'start': 4223.211, 'duration': 9.826}, {'end': 4239.246, 'text': "to take up as much space as possible, so we'll use flex-grow and give it a value of one to tell it to grow.", 'start': 4233.919, 'duration': 5.327}, {'end': 4245.014, 'text': 'Then we also want to align our text in that element to the end of the element.', 'start': 4240.648, 'duration': 4.366}, {'end': 4250.402, 'text': "so we'll use text-align end to tell our text to be on the right side instead of left side.", 'start': 4245.014, 'duration': 5.388}, {'end': 4258.008, 'text': 'We also want it so that our YouTube, Spotify, and Facebook links will be centered with this band logo on the left here.', 'start': 4251.479, 'duration': 6.529}, {'end': 4267.823, 'text': "To do this, we'll use the align items property and set it to center to center everything vertically inside of this flexbox.", 'start': 4258.549, 'duration': 9.274}], 'summary': 'Using flex-grow: 1 & text-align: end for footer. aligning items to center for links.', 'duration': 44.612, 'max_score': 4223.211, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE4223211.jpg'}, {'end': 4335.847, 'src': 'embed', 'start': 4310.323, 'weight': 4, 'content': [{'end': 4316.406, 'text': "Next, we're going to make it so the images are going to be quite a bit smaller than they are right now since they're a bit oversized.", 'start': 4310.323, 'duration': 6.083}, {'end': 4324.722, 'text': "So we'll use the footer nav, select all the images, give them a width of 30 pixels, and a height of 30 pixels.", 'start': 4316.886, 'duration': 7.836}, {'end': 4330.525, 'text': 'And if we save that, we see that now everything is center aligned together inside of the footer.', 'start': 4325.442, 'duration': 5.083}, {'end': 4332.025, 'text': 'Our images are smaller.', 'start': 4330.945, 'duration': 1.08}, {'end': 4335.847, 'text': 'They have the hover element, which is the same from this navigation up here.', 'start': 4332.526, 'duration': 3.321}], 'summary': 'Images resized to 30x30 pixels for footer nav alignment.', 'duration': 25.524, 'max_score': 4310.323, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE4310323.jpg'}, {'end': 4406.325, 'src': 'embed', 'start': 4377.13, 'weight': 0, 'content': [{'end': 4380.593, 'text': 'And that is all there is to creating the about band page for this website.', 'start': 4377.13, 'duration': 3.463}, {'end': 4386.918, 'text': 'We have all this dial in so that our page looks almost exactly the same as the mockup that we had before,', 'start': 4381.073, 'duration': 5.845}, {'end': 4391.502, 'text': 'and it is even scalable to different browser sizes, and it looks good on all those different sizes.', 'start': 4386.918, 'duration': 4.584}, {'end': 4399.958, 'text': 'The best part about this is since that we used very generic named classes such as container, band name and nav.', 'start': 4392.591, 'duration': 7.367}, {'end': 4406.325, 'text': "we're able to apply these classes to the rest of our pages, such as the home page here and the store page here,", 'start': 4399.958, 'duration': 6.367}], 'summary': 'Website about band page created with scalable design and generic named classes for easy application across other pages.', 'duration': 29.195, 'max_score': 4377.13, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE4377130.jpg'}], 'start': 3562.736, 'title': 'Styling and fixing webpage content', 'summary': 'Covers styling webpage content with specific css properties and classes, including font weight, size, color, image positioning, and footer design. it also demonstrates fixing footer layout using flexbox to achieve a responsive and scalable webpage.', 'chapters': [{'end': 4139.982, 'start': 3562.736, 'title': 'Styling webpage content', 'summary': 'Covers styling webpage content, including font weight, size, and color, as well as image positioning and footer design, with specific css properties and classes used to achieve the desired layout and appearance.', 'duration': 577.246, 'highlights': ['Setting font weight and color', 'Styling font and addressing default h1 tag', 'Adjusting font size and image positioning', 'Designing footer with specific classes']}, {'end': 4434.934, 'start': 4141.662, 'title': 'Fixing footer layout using flexbox', 'summary': 'Demonstrates how to fix the problem of a vertically stacked footer by using a main footer container with flex display to align and style the elements, achieving a responsive and scalable webpage.', 'duration': 293.272, 'highlights': ['The main footer container with flex display is used to align and style the elements, achieving the desired horizontal layout for the footer.', 'The UL inside the main footer container is configured with flex-grow to take up as much space as possible and aligned with text-align end to the right side.', 'The align items property is set to center to vertically center the elements inside the flexbox, and specific stylings are applied to the navigation.', 'The images in the footer are resized to 30x30 pixels, and the webpage is responsive and scalable to different browser sizes.', 'The webpage design is made scalable to different browser sizes and is almost identical to the mockup, allowing for easy reuse of generic named classes across multiple pages.']}], 'duration': 872.198, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE3562736.jpg', 'highlights': ['The webpage design is made scalable to different browser sizes and is almost identical to the mockup, allowing for easy reuse of generic named classes across multiple pages.', 'The main footer container with flex display is used to align and style the elements, achieving the desired horizontal layout for the footer.', 'The UL inside the main footer container is configured with flex-grow to take up as much space as possible and aligned with text-align end to the right side.', 'The align items property is set to center to vertically center the elements inside the flexbox, and specific stylings are applied to the navigation.', 'The images in the footer are resized to 30x30 pixels, and the webpage is responsive and scalable to different browser sizes.', 'Designing footer with specific classes', 'Adjusting font size and image positioning', 'Styling font and addressing default h1 tag', 'Setting font weight and color']}, {'end': 5374.579, 'segs': [{'end': 4476.3, 'src': 'embed', 'start': 4454.179, 'weight': 0, 'content': [{'end': 4462.741, 'text': 'The first thing that we want to do is to go into our about.html, copy our link tag from the head, and paste this into our index.html file.', 'start': 4454.179, 'duration': 8.562}, {'end': 4469.775, 'text': "This way we'll be able to load our styles in from our styles.css file into our homepage here.", 'start': 4464.912, 'duration': 4.863}, {'end': 4474.759, 'text': 'As you can see, this already made some changes by changing our font, font color, and etc.', 'start': 4470.516, 'duration': 4.243}, {'end': 4476.3, 'text': 'based on our everything selector.', 'start': 4474.959, 'duration': 1.341}], 'summary': 'Copying link tag from about.html to index.html loads styles from styles.css, resulting in visual changes.', 'duration': 22.121, 'max_score': 4454.179, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE4454179.jpg'}, {'end': 4678.988, 'src': 'embed', 'start': 4647.13, 'weight': 2, 'content': [{'end': 4648.231, 'text': 'If we look at our image here,', 'start': 4647.13, 'duration': 1.101}, {'end': 4654.515, 'text': 'we can see that our button is positioned so it is slightly offset from the center and offset from the left edge of the screen.', 'start': 4648.231, 'duration': 6.284}, {'end': 4659.479, 'text': "We're going to be using margins with percentages and ems in order to accomplish this.", 'start': 4655.196, 'duration': 4.283}, {'end': 4668.445, 'text': 'So, if we use margin, the first value, if we use all four values of margin, corresponds to the top margin which we want to set to 0.5 EM,', 'start': 4660.322, 'duration': 8.123}, {'end': 4670.025, 'text': 'which will be half the size of the font.', 'start': 4668.445, 'duration': 1.58}, {'end': 4678.988, 'text': 'We then want to use 15% to correspond to our right side margin, which will take up 15% of the total space our object can occupy.', 'start': 4670.926, 'duration': 8.062}], 'summary': 'Using margins with percentages and ems to position button on screen: top margin set to 0.5 em, right margin set to 15%.', 'duration': 31.858, 'max_score': 4647.13, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE4647130.jpg'}, {'end': 4830.966, 'src': 'embed', 'start': 4743.872, 'weight': 4, 'content': [{'end': 4750.775, 'text': "If we say that we now get a button that looks very similar to this button in color, but spacing, it's still not quite right.", 'start': 4743.872, 'duration': 6.903}, {'end': 4758.938, 'text': 'What we need to do is set the border radius of our object to be zero, which completely remove the rounded corners of our object,', 'start': 4751.675, 'duration': 7.263}, {'end': 4763.04, 'text': 'so that we now have a perfectly square cornered object over here, just like in this image.', 'start': 4758.938, 'duration': 4.102}, {'end': 4770.162, 'text': 'The border radius corresponds to how rounded the corners are, so by setting it to 0, we have no rounded edges to our corner.', 'start': 4764.517, 'duration': 5.645}, {'end': 4772.904, 'text': 'Next, we want to increase the font size.', 'start': 4771.062, 'duration': 1.842}, {'end': 4777.467, 'text': "We're just going to set that to 1.5em to be about 50% larger,", 'start': 4773.464, 'duration': 4.003}, {'end': 4781.371, 'text': 'and then we want to make the font weight to be lighter so that the text is slightly thinner.', 'start': 4777.467, 'duration': 3.904}, {'end': 4786.855, 'text': 'And if we save that, our button is looking very similar to our button over here,', 'start': 4782.471, 'duration': 4.384}, {'end': 4789.938, 'text': "but you'll notice that we don't quite have the same padding on the left and right.", 'start': 4786.855, 'duration': 3.083}, {'end': 4801.386, 'text': "in order to fix this, we'll set our padding on the left to be 2em and our padding on the right to also be 2em.", 'start': 4790.758, 'duration': 10.628}, {'end': 4806.13, 'text': 'now, if we save that, our button looks almost exactly the same as our button in here.', 'start': 4801.386, 'duration': 4.744}, {'end': 4811.093, 'text': 'this is perfect, but when we hover over this button, nothing actually happens.', 'start': 4806.13, 'duration': 4.963}, {'end': 4813.015, 'text': "we have no way to know we're actually hovering over it.", 'start': 4811.093, 'duration': 1.922}, {'end': 4820.42, 'text': "In order to fix that, we use the button header hover selector here and we'll set the background color.", 'start': 4813.717, 'duration': 6.703}, {'end': 4826.684, 'text': "And we'll just make it a slightly less opaque version of the color that it already is, which is white.", 'start': 4821.821, 'duration': 4.863}, {'end': 4830.966, 'text': "But we'll use 0.3 instead of 0.1 as our opacity.", 'start': 4827.824, 'duration': 3.142}], 'summary': 'Adjusting border radius to 0, increasing font size by 1.5em, setting padding to 2em, and adding hover effect with 0.3 opacity.', 'duration': 87.094, 'max_score': 4743.872, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE4743872.jpg'}, {'end': 4920.215, 'src': 'embed', 'start': 4874.987, 'weight': 3, 'content': [{'end': 4879.189, 'text': 'So if we save this and increase our size of our browser to be even larger,', 'start': 4874.987, 'duration': 4.202}, {'end': 4885.471, 'text': "you see that our button will always stay similar to the center of the screen, because it's inside of a container with a limited width.", 'start': 4879.189, 'duration': 6.282}, {'end': 4889.133, 'text': "That's exactly what we want our web page to react as.", 'start': 4886.172, 'duration': 2.961}, {'end': 4892.234, 'text': "Now let's zoom that back in so it's easier for you guys to see.", 'start': 4889.853, 'duration': 2.381}, {'end': 4898.574, 'text': 'There we go.', 'start': 4898.114, 'duration': 0.46}, {'end': 4902.136, 'text': "And now let's work on styling this button right here for the play button.", 'start': 4899.074, 'duration': 3.062}, {'end': 4908.939, 'text': "We'll use very similar styles to our header button, but we'll also add a play button class to this.", 'start': 4902.996, 'duration': 5.943}, {'end': 4913.522, 'text': 'If we save that, we already see that this is very similar to our style over here.', 'start': 4909.68, 'duration': 3.842}, {'end': 4920.215, 'text': 'What we want to do is we want to make this button entirely round, and we want to make the icon on the inside blue as opposed to white.', 'start': 4914.411, 'duration': 5.804}], 'summary': 'Styling the play button to be round and the icon blue, similar to header button style.', 'duration': 45.228, 'max_score': 4874.987, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE4874987.jpg'}, {'end': 5065.497, 'src': 'embed', 'start': 5040.168, 'weight': 9, 'content': [{'end': 5047.407, 'text': 'The next thing that we need to do is work on this section of our page which contains our tour dates and is the main content of this homepage.', 'start': 5040.168, 'duration': 7.239}, {'end': 5052.252, 'text': 'The first thing we can do is use our styles that we created in our previous video.', 'start': 5048.41, 'duration': 3.842}, {'end': 5059.415, 'text': 'We can use our class over here of content section in order to specify that this is a content section.', 'start': 5052.852, 'duration': 6.563}, {'end': 5065.497, 'text': "And we can also use the class container in order to specify that we don't want the width to grow over a certain size.", 'start': 5059.895, 'duration': 5.602}], 'summary': 'Work on tour dates section using previously created styles.', 'duration': 25.329, 'max_score': 5040.168, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE5040168.jpg'}, {'end': 5121.408, 'src': 'embed', 'start': 5081.841, 'weight': 1, 'content': [{'end': 5086.866, 'text': 'The first thing we can do is remove the HR, as well as these less than and greater than symbols,', 'start': 5081.841, 'duration': 5.025}, {'end': 5093.873, 'text': 'since these were only there in order to be used for spacing in our HTML, and we will do all that with CSS now instead.', 'start': 5086.866, 'duration': 7.007}, {'end': 5099.678, 'text': 'So now if we save that we see that our row is completely scrunched together which is perfect for us to start styling.', 'start': 5094.573, 'duration': 5.105}, {'end': 5107.882, 'text': 'We also want to give our row a class of tourRow so that we can say each row will be styled in the same exact way.', 'start': 5100.619, 'duration': 7.263}, {'end': 5113.985, 'text': "Let's go into our styles.css here, add that tourRow selector, and get started styling it.", 'start': 5108.662, 'duration': 5.323}, {'end': 5121.408, 'text': 'The main thing we want our tourRow to do is to give us padding between our different rows as well as give us a border on the bottom of the row.', 'start': 5114.565, 'duration': 6.843}], 'summary': 'Removing hr and symbols, styling row with css for padding and border.', 'duration': 39.567, 'max_score': 5081.841, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE5081841.jpg'}], 'start': 4437.796, 'title': 'Styling web page elements with css', 'summary': 'Covers applying css to homepage, styling buttons, and tour dates section. it includes adding font styles, aligning text and buttons, changing text color, adding borders, adjusting spacing, and removing symbols.', 'chapters': [{'end': 4693.356, 'start': 4437.796, 'title': 'Styling homepage with css', 'summary': 'Demonstrates the process of applying css styles to the homepage, including adding font styles, aligning text and buttons, and using margins for positioning.', 'duration': 255.56, 'highlights': ['Applying CSS styles to the homepage', 'Aligning text and buttons using CSS', 'Using margins for positioning elements']}, {'end': 5038.788, 'start': 4693.756, 'title': 'Styling button to match page design', 'summary': 'Details the step-by-step process of styling buttons to match the design of a web page, including changing text color, adding a border, setting the background color, adjusting border radius, font size, font weight, padding, hover effect, centering the button, and creating a round play button.', 'duration': 345.032, 'highlights': ['By setting the border radius to 0, the rounded corners of the object are completely removed, resulting in a perfectly square cornered object.', 'The font size is increased to 1.5em, making it about 50% larger, and the font weight is made lighter to achieve thinner text.', 'The padding on the left and right of the button is set to 2em, ensuring the button looks almost exactly the same as the reference button.', 'The button hover selector is used to make the button slightly lighter upon hovering, enhancing user interaction.', 'Wrapping the button inside a div with a limited width ensures the button always stays similar to the center of the screen, regardless of the browser size.', 'The play button is styled to be entirely round and the icon inside is made blue, with the button being centered horizontally in the screen and adjusted to a perfect circle shape.']}, {'end': 5374.579, 'start': 5040.168, 'title': 'Styling tour dates section', 'summary': 'Focuses on styling the tour dates section of the homepage, using css to remove hr and symbols, adding borders and spacing between rows, and styling individual elements within the rows.', 'duration': 334.411, 'highlights': ['The chapter focuses on styling the tour dates section of the homepage', 'Using CSS to remove HR and symbols, adding borders and spacing between rows', 'Styling individual elements within the rows using specific paddings, margins, spacings']}], 'duration': 936.783, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE4437796.jpg', 'highlights': ['Applying CSS styles to the homepage', 'Styling individual elements within the rows using specific paddings, margins, spacings', 'Using margins for positioning elements', 'The play button is styled to be entirely round and the icon inside is made blue, with the button being centered horizontally in the screen and adjusted to a perfect circle shape', 'By setting the border radius to 0, the rounded corners of the object are completely removed, resulting in a perfectly square cornered object', 'The font size is increased to 1.5em, making it about 50% larger, and the font weight is made lighter to achieve thinner text', 'The padding on the left and right of the button is set to 2em, ensuring the button looks almost exactly the same as the reference button', 'The button hover selector is used to make the button slightly lighter upon hovering, enhancing user interaction', 'Wrapping the button inside a div with a limited width ensures the button always stays similar to the center of the screen, regardless of the browser size', 'The chapter focuses on styling the tour dates section of the homepage', 'Using CSS to remove HR and symbols, adding borders and spacing between rows']}, {'end': 6926.475, 'segs': [{'end': 5625.634, 'src': 'embed', 'start': 5597.892, 'weight': 3, 'content': [{'end': 5606.203, 'text': "In order to do that, let's add one final class to our buttons, which will be buttonPrimary, since it will be the primary button of our site,", 'start': 5597.892, 'duration': 8.311}, {'end': 5611.307, 'text': 'and this primary attribute really refers mostly to the coloring of our button,', 'start': 5606.203, 'duration': 5.104}, {'end': 5616.89, 'text': 'since our button base class already applies all the styling for the different sizing, padding and margins that we need.', 'start': 5611.307, 'duration': 5.583}, {'end': 5625.634, 'text': 'So now if we go over to our styles.css, add this button primary class in here, we can now style the different colors we need to.', 'start': 5617.95, 'duration': 7.684}], 'summary': 'Add buttonprimary class to styles.css for primary button coloring.', 'duration': 27.742, 'max_score': 5597.892, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE5597892.jpg'}, {'end': 5776.82, 'src': 'embed', 'start': 5712.054, 'weight': 5, 'content': [{'end': 5721.438, 'text': "So, in order to do this, we'll just go to our About page, go down to the footer and copy all the footer elements, IDs, classes, all of that,", 'start': 5712.054, 'duration': 9.384}, {'end': 5725.76, 'text': "and we'll paste it over our footer here, since we know that we want them to be exactly the same.", 'start': 5721.438, 'duration': 4.322}, {'end': 5733.423, 'text': 'And now if we save that, we scroll down here, our footer now looks exactly the same as our footer over here, which is exactly what we want.', 'start': 5726.22, 'duration': 7.203}, {'end': 5742.546, 'text': "Now, if we zoom out our webpage here a little bit to be 100% increase the size, you'll see that our content stays inside of these bounds,", 'start': 5734.123, 'duration': 8.423}, {'end': 5744.987, 'text': 'and that is due to the container class that we added.', 'start': 5742.546, 'duration': 2.441}, {'end': 5754.751, 'text': 'This is perfect for making our site responsive without stretching too far on larger screens and also making it look decent on smaller screens such as this or this.', 'start': 5745.507, 'duration': 9.244}, {'end': 5758.853, 'text': "That's all there really is to creating a CSS for this homepage.", 'start': 5755.911, 'duration': 2.942}, {'end': 5762.214, 'text': "You'll notice that this was much easier than doing our about page.", 'start': 5759.393, 'duration': 2.821}, {'end': 5767.916, 'text': 'And that is because all the styles that we used in our About page, we were able to copy over and use in our Home page.', 'start': 5762.714, 'duration': 5.202}, {'end': 5776.82, 'text': "We're going to be taking the Store page that we've designed earlier with HTML and style it to look exactly like this image on the right here.", 'start': 5770.617, 'duration': 6.203}], 'summary': 'Copying footer elements made the webpage responsive and consistent. css for homepage was easier than about page.', 'duration': 64.766, 'max_score': 5712.054, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE5712054.jpg'}, {'end': 5831.353, 'src': 'embed', 'start': 5798.387, 'weight': 4, 'content': [{'end': 5800.169, 'text': "And as you can see, it's already taken effect.", 'start': 5798.387, 'duration': 1.782}, {'end': 5807.896, 'text': 'The next thing that we need to do is go into our header here, And we need to style our header to be exactly like our home page and our about page,', 'start': 5801.17, 'duration': 6.726}, {'end': 5808.576, 'text': 'as you can see here.', 'start': 5807.896, 'duration': 0.68}, {'end': 5813.36, 'text': "So to do that, let's just add the classes that we've already created of main header.", 'start': 5809.477, 'duration': 3.883}, {'end': 5817.883, 'text': "In our nav, we're going to add the class of main nav.", 'start': 5813.38, 'duration': 4.503}, {'end': 5820.985, 'text': 'And then nav.', 'start': 5820.305, 'duration': 0.68}, {'end': 5822.927, 'text': 'And there we go.', 'start': 5822.346, 'duration': 0.581}, {'end': 5823.787, 'text': 'That looks good.', 'start': 5823.167, 'duration': 0.62}, {'end': 5825.128, 'text': "Let's remove this HR.", 'start': 5823.807, 'duration': 1.321}, {'end': 5831.353, 'text': 'And then finally, style our band name here with band name and band name large.', 'start': 5825.609, 'duration': 5.744}], 'summary': "Styling the header to match the home and about pages by adding specific classes and removing an hr, and styling the band name with 'band name' and 'band name large' classes.", 'duration': 32.966, 'max_score': 5798.387, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE5798387.jpg'}, {'end': 5965.15, 'src': 'embed', 'start': 5939.633, 'weight': 9, 'content': [{'end': 5947.719, 'text': "And we're just going to call this shop item title, since this is going to be the title and the name of our shop item that we have here.", 'start': 5939.633, 'duration': 8.086}, {'end': 5952.462, 'text': 'Next, we have our image, which we are going to add a class to as well.', 'start': 5949, 'duration': 3.462}, {'end': 5956.966, 'text': 'And we can just call this shop item image.', 'start': 5952.923, 'duration': 4.043}, {'end': 5960.729, 'text': 'so that we can style our image to resize it as we need.', 'start': 5958.328, 'duration': 2.401}, {'end': 5965.15, 'text': 'And then lastly, we have this bottom div here, which are the details of our shop item.', 'start': 5961.409, 'duration': 3.741}], 'summary': 'Creating a shop item with title, image, and details.', 'duration': 25.517, 'max_score': 5939.633, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE5939633.jpg'}, {'end': 6168.408, 'src': 'embed', 'start': 6147.472, 'weight': 1, 'content': [{'end': 6158.242, 'text': "So let's go into here and we'll do shop item details to select the wrapper that goes around, our details for our price and our button here,", 'start': 6147.472, 'duration': 10.77}, {'end': 6159.663, 'text': "and we'll make this display flex.", 'start': 6158.242, 'duration': 1.421}, {'end': 6162.283, 'text': 'There we go.', 'start': 6161.903, 'duration': 0.38}, {'end': 6168.408, 'text': "The reason we're using display effects is because we want to center these items vertically so that they are all within the same line.", 'start': 6162.824, 'duration': 5.584}], 'summary': 'Using css to center items vertically using display flex.', 'duration': 20.936, 'max_score': 6147.472, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE6147472.jpg'}, {'end': 6322.686, 'src': 'embed', 'start': 6294.936, 'weight': 2, 'content': [{'end': 6299.501, 'text': 'And as you can see, now they all fill up in one column instead of wrapping all the way to the end of the screen.', 'start': 6294.936, 'duration': 4.565}, {'end': 6305.609, 'text': "You'll also see by changing our display to flex here for the shop items.", 'start': 6300.482, 'duration': 5.127}, {'end': 6308.432, 'text': 'our image is the total width of our item,', 'start': 6305.609, 'duration': 2.823}, {'end': 6314.6, 'text': "so that our add to cart button doesn't get put all the way to the end here and our album 1 title is properly centered above the image.", 'start': 6308.432, 'duration': 6.168}, {'end': 6316.502, 'text': 'This is exactly what we want.', 'start': 6315.461, 'duration': 1.041}, {'end': 6322.686, 'text': 'The last thing we want to do is when our screen is larger, these items will be right next to each other like this.', 'start': 6317.463, 'duration': 5.223}], 'summary': 'Using flex display, the items are now properly aligned and spaced, avoiding overflow issues.', 'duration': 27.75, 'max_score': 6294.936, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE6294936.jpg'}, {'end': 6451.43, 'src': 'embed', 'start': 6408.614, 'weight': 7, 'content': [{'end': 6413.58, 'text': "So now what we need to do is do the same thing to our Merge section as we've done to this section here,", 'start': 6408.614, 'duration': 4.966}, {'end': 6419.507, 'text': 'by wrapping our container in a ShopItems div and then adding all these different classes down to these elements here.', 'start': 6413.58, 'duration': 5.927}, {'end': 6421.009, 'text': "I'll do that real quick now.", 'start': 6420.148, 'duration': 0.861}, {'end': 6445.327, 'text': 'And there we go.', 'start': 6444.867, 'duration': 0.46}, {'end': 6451.43, 'text': "I've added all the different styles to our merch section, since it's pretty much exactly the same as this music section here.", 'start': 6445.667, 'duration': 5.763}], 'summary': 'Wrapped merge section in shopitems div, added different classes to elements.', 'duration': 42.816, 'max_score': 6408.614, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE6408614.jpg'}, {'end': 6916.528, 'src': 'embed', 'start': 6885.732, 'weight': 0, 'content': [{'end': 6891.396, 'text': 'This is because we were using inline block elements to style those, and inline block elements have spacing around them.', 'start': 6885.732, 'duration': 5.664}, {'end': 6899.145, 'text': "Here we're using flexbox to align our items so we can actually use widths that add up to exactly 100%,", 'start': 6892.176, 'duration': 6.969}, {'end': 6903.41, 'text': 'because flexbox does not add any spaces in between the items inside of its container.', 'start': 6899.145, 'duration': 4.265}, {'end': 6908.597, 'text': 'This is why I almost always use flexbox when laying out elements as opposed to inline block.', 'start': 6904.111, 'duration': 4.486}, {'end': 6916.528, 'text': 'Flexbox is also great at aligning content inside of its box to be centered horizontally or vertically, which is a problem.', 'start': 6910.063, 'duration': 6.465}], 'summary': 'Flexbox allows for precise 100% width alignment and eliminates spacing between items, making it preferable to inline block for layout.', 'duration': 30.796, 'max_score': 6885.732, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE6885732.jpg'}], 'start': 5375.239, 'title': 'Styling responsive web pages', 'summary': 'Covers styling tour and store pages, making shop items and cart responsive, with specific instructions on elements, flexbox usage, resulting in a fully responsive design.', 'chapters': [{'end': 5754.751, 'start': 5375.239, 'title': 'Styling tour page for responsive design', 'summary': 'Covers the process of styling a tour page, including setting specific widths for elements, addressing responsive design, and styling buttons to match across different pages.', 'duration': 379.512, 'highlights': ['Setting specific widths for tour elements and addressing responsive design to ensure proper spacing and alignment.', 'Styling buttons to match across different pages by adding a primary button class, setting colors, removing borders, and adding hover effects.', 'Copying footer elements from another page to ensure consistent styling and appearance across the site.', 'Utilizing container class to maintain responsiveness and proper display on different screen sizes.']}, {'end': 6127.786, 'start': 5755.911, 'title': 'Styling store page with css', 'summary': 'Covers styling the store page by copying over existing css styles and using classes to match the design, with specific instructions on styling the header, music cart section, and individual shop items.', 'duration': 371.875, 'highlights': ['Copying over existing CSS styles made styling the store page easier than the about page.', 'Styling the header, using classes like main header and main nav, to match the design of the home and about page.', 'Styling the music cart section by using existing classes like container and content section.', 'Instructions on styling individual shop items by adding specific classes to elements like title, image, price, and button.']}, {'end': 6451.43, 'start': 6127.786, 'title': 'Styling shop items and making them responsive', 'summary': 'Discusses styling shop items, including setting display flex to center items vertically, adding padding, styling the price, and making the items responsive with display flex and flex wrap, resulting in a site that is responsive to different screen sizes.', 'duration': 323.644, 'highlights': ['Styling shop items with display flex to center items vertically and adding padding', 'Making the shop items responsive with display flex and flex wrap', 'Applying styles to the merch section similar to the music section']}, {'end': 6926.475, 'start': 6452.19, 'title': 'Styling cart with flexbox', 'summary': 'Discusses using flexbox to style a cart, including creating classes for different elements, styling headers and columns, and using flexbox to align items, resulting in all columns having widths that add up to 100%.', 'duration': 474.285, 'highlights': ['Using flexbox to align items resulted in columns having widths that add up to exactly 100%', 'Creating classes for different elements in the cart and styling headers and columns', 'Using flexbox to align items properly in the cart']}], 'duration': 1551.236, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE5375239.jpg', 'highlights': ['Using flexbox to align items resulted in columns having widths that add up to exactly 100%', 'Styling shop items with display flex to center items vertically and adding padding', 'Making the shop items responsive with display flex and flex wrap', 'Styling buttons to match across different pages by adding a primary button class, setting colors, removing borders, and adding hover effects', 'Styling the header, using classes like main header and main nav, to match the design of the home and about page', 'Utilizing container class to maintain responsiveness and proper display on different screen sizes', 'Copying over existing CSS styles made styling the store page easier than the about page', 'Applying styles to the merch section similar to the music section', 'Copying footer elements from another page to ensure consistent styling and appearance across the site', 'Instructions on styling individual shop items by adding specific classes to elements like title, image, price, and button']}, {'end': 7753.502, 'segs': [{'end': 6953.072, 'src': 'embed', 'start': 6926.895, 'weight': 0, 'content': [{'end': 6930.738, 'text': 'But over here, our text is either at the bottom, over here, or the top, over here.', 'start': 6926.895, 'duration': 3.843}, {'end': 6934.881, 'text': "So, to fix that, we'll go back to our cart column here, since, if you remember,", 'start': 6931.239, 'duration': 3.642}, {'end': 6938.74, 'text': 'all of our content for each of these columns has this cart column class around it.', 'start': 6934.881, 'duration': 3.859}, {'end': 6941.222, 'text': "And we'll make this display of flex.", 'start': 6939.481, 'duration': 1.741}, {'end': 6947.908, 'text': "And then we'll use align items center in order to center our items along the vertical right here.", 'start': 6941.863, 'duration': 6.045}, {'end': 6953.072, 'text': "If we save that, you'll see that now all of our items are vertically aligned exactly as they should be.", 'start': 6947.928, 'duration': 5.144}], 'summary': 'Using display: flex and align-items: center to vertically align items in cart column.', 'duration': 26.177, 'max_score': 6926.895, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE6926895.jpg'}, {'end': 7005.049, 'src': 'embed', 'start': 6968.322, 'weight': 2, 'content': [{'end': 6972.704, 'text': "The first element that we'll want to style here is the span tag with the title of the element.", 'start': 6968.322, 'duration': 4.382}, {'end': 6975.005, 'text': "So what we'll do here is we'll add a class.", 'start': 6973.384, 'duration': 1.621}, {'end': 6982.508, 'text': "We'll give it the title or the name of cart item title to specify this is the title of our cart item.", 'start': 6975.565, 'duration': 6.943}, {'end': 6984.749, 'text': 'We also want to add a class here to our image.', 'start': 6983.088, 'duration': 1.661}, {'end': 6989.791, 'text': "So we'll just use cart item image to specify this is the image of our cart item.", 'start': 6985.329, 'duration': 4.462}, {'end': 6992.795, 'text': 'Our cart price is already styled, which is perfect.', 'start': 6990.751, 'duration': 2.044}, {'end': 6996.14, 'text': 'And then we just need to add styles to our input and our button here.', 'start': 6993.336, 'duration': 2.804}, {'end': 6997.763, 'text': "So let's do class here.", 'start': 6996.561, 'duration': 1.202}, {'end': 7000.849, 'text': "We'll just give it cart quantity.", 'start': 6997.783, 'duration': 3.066}, {'end': 7005.049, 'text': 'input in order to specify this is the input for our cart quantity,', 'start': 7002.085, 'duration': 2.964}], 'summary': 'Styling span, image, input, and button with specified classes for cart item elements.', 'duration': 36.727, 'max_score': 6968.322, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE6968322.jpg'}, {'end': 7093.239, 'src': 'embed', 'start': 7065.566, 'weight': 5, 'content': [{'end': 7069.647, 'text': 'Next thing we can style is the actual image, since our image is a little bit too large right here.', 'start': 7065.566, 'duration': 4.081}, {'end': 7078.896, 'text': "So we can go in here, cart item image, We'll change the width to be 75 pixels so that this image is smaller.", 'start': 7070.267, 'duration': 8.629}, {'end': 7082.557, 'text': 'If we save that, you see our image is now smaller, but the height is too tall.', 'start': 7079.196, 'duration': 3.361}, {'end': 7087.578, 'text': "So we're going to give it a height of auto so the height will automatically adjust to the width.", 'start': 7083.177, 'duration': 4.401}, {'end': 7093.239, 'text': "If we save that, it's now within perfect aspect ratio that it was before.", 'start': 7088.378, 'duration': 4.861}], 'summary': 'Styling the image to 75px width, adjusting height to maintain aspect ratio.', 'duration': 27.673, 'max_score': 7065.566, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE7065566.jpg'}, {'end': 7397.757, 'src': 'embed', 'start': 7372.959, 'weight': 1, 'content': [{'end': 7379.05, 'text': 'As you can see, we have a solid border on the bottom for our last row, and over here we have a separated border on the bottom.', 'start': 7372.959, 'duration': 6.091}, {'end': 7385.93, 'text': 'In order to do this, we can use the last child selector in our CSS in order to change the border for the last child.', 'start': 7379.847, 'duration': 6.083}, {'end': 7392.294, 'text': 'But the child element selector only works for the last child inside of a container.', 'start': 7386.851, 'duration': 5.443}, {'end': 7397.757, 'text': "And right now, these cart rows are not the last child of the container that they're inside.", 'start': 7392.674, 'duration': 5.083}], 'summary': 'Using last child selector in css to change border for last child inside a container.', 'duration': 24.798, 'max_score': 7372.959, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE7372959.jpg'}, {'end': 7518.146, 'src': 'embed', 'start': 7487.574, 'weight': 6, 'content': [{'end': 7494.797, 'text': "Now all we need to do is style this total section and this purchase button and we'll be done with this entire band website.", 'start': 7487.574, 'duration': 7.223}, {'end': 7500.059, 'text': "Let's first start by going into our HTML and adding some classes that we can select these elements with.", 'start': 7495.337, 'duration': 4.722}, {'end': 7507.782, 'text': "First, we'll use the class here of cart total that'll wrap our total and the price of the total.", 'start': 7500.939, 'duration': 6.843}, {'end': 7518.146, 'text': "And then we'll also use class here of cart total title So this is going to be the title of total.", 'start': 7507.802, 'duration': 10.344}], 'summary': 'Styling total section and purchase button for band website.', 'duration': 30.572, 'max_score': 7487.574, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE7487574.jpg'}, {'end': 7737.195, 'src': 'embed', 'start': 7706.302, 'weight': 7, 'content': [{'end': 7709.023, 'text': "And that's a huge button for them to click when they want to purchase their items.", 'start': 7706.302, 'duration': 2.721}, {'end': 7714.165, 'text': 'Now all we need to do is style the footer down here, and this is going to be very easy.', 'start': 7710.043, 'duration': 4.122}, {'end': 7716.967, 'text': 'All we can do is go into our index page.', 'start': 7714.466, 'duration': 2.501}, {'end': 7724.091, 'text': "here we can copy our footer, since we know it's exactly the same, and we can just paste that into our store HTML.", 'start': 7716.967, 'duration': 7.124}, {'end': 7727.914, 'text': 'and if we save that, we now have the footer down here and it looks amazing.', 'start': 7724.091, 'duration': 3.823}, {'end': 7737.195, 'text': 'This looks exactly as the page over here, and as we increase the size of our browser, Our elements will flow naturally around each other.', 'start': 7727.974, 'duration': 9.221}], 'summary': 'Styling the footer for the store html, making it look amazing and identical to the index page.', 'duration': 30.893, 'max_score': 7706.302, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE7706302.jpg'}], 'start': 6926.895, 'title': 'Styling cart items and sections', 'summary': 'Covers the process of styling cart items using css flexbox and classes, and also covers the styling of rows and total section using last child selector in css, resulting in an identical store page as the mockup.', 'chapters': [{'end': 7310.415, 'start': 6926.895, 'title': 'Styling cart items', 'summary': 'Covers the process of styling cart items by using css flexbox and classes to align and style elements such as titles, images, prices, inputs, and buttons.', 'duration': 383.52, 'highlights': ['Using CSS flexbox to align cart items vertically', 'Styling the title of cart items', 'Resizing and styling the image of cart items', 'Styling the price of cart items', 'Styling the input and button for cart quantity']}, {'end': 7753.502, 'start': 7311.156, 'title': 'Styling row and total section', 'summary': 'Covers styling rows and total section, using last child selector in css to change the border, adding classes and styling the total and purchase button, and creating a footer, resulting in an identical store page as the mockup.', 'duration': 442.346, 'highlights': ['Using last child selector in CSS to change the border for the last row and removing individual borders from cart columns.', 'Adding classes to HTML elements and styling the total and purchase button in styles.css.', 'Creating a footer by copying the footer from the index page and pasting it into the store HTML.']}], 'duration': 826.607, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/kMT54MPz9oE/pics/kMT54MPz9oE6926895.jpg', 'highlights': ['Using CSS flexbox to align cart items vertically', 'Using last child selector in CSS to change the border for the last row and removing individual borders from cart columns', 'Styling the input and button for cart quantity', 'Styling the price of cart items', 'Styling the title of cart items', 'Resizing and styling the image of cart items', 'Adding classes to HTML elements and styling the total and purchase button in styles.css', 'Creating a footer by copying the footer from the index page and pasting it into the store HTML']}], 'highlights': ['The Live Server plugin in Visual Studio Code automatically refreshes the browser every time an HTML file is saved, eliminating the need for manual browser refresh.', 'The URL structure displayed by the Live Server plugin includes the IP address of the local host (127.0.0.1) and the port number, providing insight into its functioning.', 'The elements tab in HTML displays the HTML elements of a page, including doc type, HTML, head, and body elements.', 'The doc type is the first element of an HTML page and tells the browser which version of HTML is being used.', 'The webpage design is made scalable to different browser sizes and is almost identical to the mockup, allowing for easy reuse of generic named classes across multiple pages.', 'Using flexbox to align items resulted in columns having widths that add up to exactly 100%.', 'Imported and applied custom font using Google Fonts.', 'The main footer container with flex display is used to align and style the elements, achieving the desired horizontal layout for the footer.', 'The UL inside the main footer container is configured with flex-grow to take up as much space as possible and aligned with text-align end to the right side.', 'The align items property is set to center to vertically center the elements inside the flexbox, and specific stylings are applied to the navigation.']}