title
Learn HTML & CSS in 2022 | Crash Course

description
https://designcourse.com/css - Our Interactive CSS Course! hhttps://bit.ly/3Cj1Tjx 👈 Learn UI/UX Today. Use "LAUNCH" for 15% Off! -- Today, we're going to embark upon a brand new frontend development journey where I hold your hand, and we code a web design from scratch. In this process, you will learn some HTML, CSS and a tiny bit of JavaScript in a crash course setting. By the end of this video, you will have created a fully responsive design that works on all devices. The Figma Prototype: https://www.figma.com/file/ReJbOWDc0WR1uizrsgfyfQ/project?node-id=0%3A1 Codepen demo for this project: https://codepen.io/designcourse/pen/eYGPxQv 0:00 - Introduction & Project Preview 1:19 - Interactive CSS Course 2:13 - HTML Explained 5:35 - CSS Explained 8:50 - Code Editor & Project Setup 11:53 - Writing the HTML 48:53 - Mobile First CSS 1:17:01 - Mobile Navigation CSS 1:24:27 - Finishing the Mobile CSS 1:26:38 - First Breakpoint 1:30:25 - Second Breakpoint 1:44:20 - Defining Animations 1:51:09 - JavaScript 1:57:33 - Final Thoughts #html #css #2022 https://designcourse.com/css - Enter your email (Our upcoming Interactive CSS Course!) https://bit.ly/31PhB7U 👈 Learn UI/UX Today. Use "LAUNCH" for 15% Off! Let's get started! - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS! Learn UI/UX: https://designcourse.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Designcourse.com. Come to my discord server or add me on social media and say Hi!

detail
{'title': 'Learn HTML & CSS in 2022 | Crash Course', 'heatmap': [{'end': 1000.133, 'start': 924.379, 'weight': 1}, {'end': 6124.18, 'start': 6053.897, 'weight': 0.738}], 'summary': 'Provides a crash course on front-end development, focusing on html and css basics, web development fundamentals, creating mobile-first css layout and styling, navigation menu styling, responsive design, and front-end development basics, aiming to give beginners an introduction to front-end development and promote a more comprehensive css course.', 'chapters': [{'end': 125.942, 'segs': [{'end': 40.595, 'src': 'embed', 'start': 8.956, 'weight': 0, 'content': [{'end': 13.962, 'text': 'Welcome to the 2022 HTML, CSS, and a little bit of JavaScript crash course.', 'start': 8.956, 'duration': 5.006}, {'end': 19.348, 'text': 'Now, of course, this is referred to as front-end development and front-end developers make a lot of money.', 'start': 14.382, 'duration': 4.966}, {'end': 32.27, 'text': "So we're going to take the design that you see here and we're going to make it work in the browser, on the desktop, on tablets and also mobile phones,", 'start': 21.803, 'duration': 10.467}, {'end': 33.03, 'text': 'as you see.', 'start': 32.27, 'duration': 0.76}, {'end': 40.595, 'text': "So first we're going to take a quick look at this actual mock-up that was designed in Figma by a UI designer, myself.", 'start': 33.61, 'duration': 6.985}], 'summary': '2022 crash course in front-end development for html, css, and a bit of javascript focusing on making designs responsive across devices.', 'duration': 31.639, 'max_score': 8.956, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI8956.jpg'}, {'end': 104.108, 'src': 'embed', 'start': 81.189, 'weight': 1, 'content': [{'end': 88.976, 'text': "if you find that you're really interested in learning more and learning properly from scratch, then I want you to visit designcourse.com.", 'start': 81.189, 'duration': 7.787}, {'end': 90.557, 'text': 'forward slash CSS.', 'start': 88.976, 'duration': 1.581}, {'end': 92.659, 'text': "It's here in the link in the YouTube description.", 'start': 90.657, 'duration': 2.002}, {'end': 96.542, 'text': "And here, at the time of recording this, it's not yet available,", 'start': 93.159, 'duration': 3.383}, {'end': 104.108, 'text': 'but we are creating the most interactive and fun CSS course that will teach you everything from scratch.', 'start': 96.542, 'duration': 7.566}], 'summary': 'Visit designcourse.com/css for an upcoming interactive css course.', 'duration': 22.919, 'max_score': 81.189, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI81189.jpg'}], 'start': 8.956, 'title': 'Html, css, javascript crash course', 'summary': 'Provides a crash course on front-end development, emphasizing implementation of a design mock-up in html and css, with a touch of javascript. it aims to give beginners an introduction to front-end development and promotes a more comprehensive css course.', 'chapters': [{'end': 125.942, 'start': 8.956, 'title': 'Html, css, javascript crash course', 'summary': 'Introduces a crash course on front-end development, focusing on implementing a design mock-up in html and css, with a hint of javascript, aiming to give beginners a taste of front-end development while promoting a more comprehensive css course.', 'duration': 116.986, 'highlights': ['The crash course focuses on implementing a design mock-up in HTML and CSS for desktop, tablets, and mobile, targeting beginners and aspiring front-end developers.', 'The instructor emphasizes the availability of a comprehensive CSS course at designcourse.com, aiming to teach everything from scratch and encourages viewers to sign up for notifications or look for discount codes.', 'The instructor, a UI designer, mentions creating an interactive and fun CSS course at designcourse.com, targeting individuals interested in UI/UX design.']}], 'duration': 116.986, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI8956.jpg', 'highlights': ['The crash course focuses on implementing a design mock-up in HTML and CSS for desktop, tablets, and mobile, targeting beginners and aspiring front-end developers.', 'The instructor emphasizes the availability of a comprehensive CSS course at designcourse.com, aiming to teach everything from scratch and encourages viewers to sign up for notifications or look for discount codes.', 'The instructor, a UI designer, mentions creating an interactive and fun CSS course at designcourse.com, targeting individuals interested in UI/UX design.']}, {'end': 1230.656, 'segs': [{'end': 192.675, 'src': 'embed', 'start': 163.439, 'weight': 8, 'content': [{'end': 171.984, 'text': 'So first, this is an HTML element basically, and this is how most of them look.', 'start': 163.439, 'duration': 8.545}, {'end': 176.806, 'text': 'In the context of a full webpage.', 'start': 174.025, 'duration': 2.781}, {'end': 182.71, 'text': "you're going to have possibly hundreds of these, and you can nest them inside of each other and do all of this cool stuff.", 'start': 176.806, 'duration': 5.904}, {'end': 183.95, 'text': "So let's break this down.", 'start': 182.73, 'duration': 1.22}, {'end': 188.053, 'text': "So first we have what's called the opening tag and the closing tag.", 'start': 184.611, 'duration': 3.442}, {'end': 192.675, 'text': 'Now some Some HTML elements are self-closing.', 'start': 188.453, 'duration': 4.222}], 'summary': 'Html elements can be nested and self-closing, used hundreds of times on a webpage.', 'duration': 29.236, 'max_score': 163.439, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI163439.jpg'}, {'end': 281.408, 'src': 'embed', 'start': 258.827, 'weight': 7, 'content': [{'end': 266.396, 'text': "now, let's say, for instance, we're talking about a whole HTML document itself, like index.html, which you may have seen or may not have.", 'start': 258.827, 'duration': 7.569}, {'end': 271.162, 'text': 'This is the overall structure of an HTML document.', 'start': 266.957, 'duration': 4.205}, {'end': 274.446, 'text': 'So you have the opening HTML tag here.', 'start': 271.182, 'duration': 3.264}, {'end': 275.967, 'text': 'and the closing.', 'start': 275.367, 'duration': 0.6}, {'end': 278.848, 'text': "So that's always going to be your first line and then your very top line.", 'start': 276.207, 'duration': 2.641}, {'end': 281.408, 'text': 'And then inside we have two major areas.', 'start': 279.428, 'duration': 1.98}], 'summary': 'The html document has an overall structure with opening and closing tags and two major areas inside.', 'duration': 22.581, 'max_score': 258.827, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI258827.jpg'}, {'end': 379.228, 'src': 'embed', 'start': 351.548, 'weight': 6, 'content': [{'end': 356.933, 'text': 'you may have hundreds of these rule sets just different rule sets to style different parts of that HTML document.', 'start': 351.548, 'duration': 5.385}, {'end': 362.158, 'text': 'So CSS, by the way, is nothing without HTML.', 'start': 357.934, 'duration': 4.224}, {'end': 368.683, 'text': "If you don't have the body element or any of the stuff that's inside the body element, then CSS means nothing.", 'start': 362.458, 'duration': 6.225}, {'end': 371.566, 'text': 'HTML is the skeleton of your body.', 'start': 369.444, 'duration': 2.122}, {'end': 379.228, 'text': "and CSS is the flesh, all right? It's how you configure the appearance of HTML.", 'start': 372.166, 'duration': 7.062}], 'summary': 'Css configures appearance of html based on different rule sets. html is essential for css.', 'duration': 27.68, 'max_score': 351.548, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI351548.jpg'}, {'end': 557.787, 'src': 'embed', 'start': 531.345, 'weight': 5, 'content': [{'end': 538.071, 'text': "Now in order to write HTML, CSS, JavaScript, and many other languages, you need what's called a code editor.", 'start': 531.345, 'duration': 6.726}, {'end': 543.156, 'text': 'Now, right now, at the time of recording this video, and this has been the case for at least several years.', 'start': 538.492, 'duration': 4.664}, {'end': 546.639, 'text': 'the most popular code editor to use is from Microsoft.', 'start': 543.156, 'duration': 3.483}, {'end': 552.725, 'text': "It's called Visual Studio Code right here, and the URL for that is code.visualstudio.com, rather.", 'start': 546.999, 'duration': 5.726}, {'end': 557.787, 'text': "And I, this is the most popular and guess what? It's free.", 'start': 554.586, 'duration': 3.201}], 'summary': "Visual studio code from microsoft is the most popular code editor for writing html, css, and javascript; it's free.", 'duration': 26.442, 'max_score': 531.345, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI531345.jpg'}, {'end': 621.075, 'src': 'embed', 'start': 592.67, 'weight': 4, 'content': [{'end': 600.117, 'text': "But if you really want to be as efficient as possible and you're at home or you're at an office or whatever, get a second monitor,", 'start': 592.67, 'duration': 7.447}, {'end': 607.083, 'text': 'because you can put your your code editor, you know, on one monitor and then on the other monitor, you can have your browser,', 'start': 600.117, 'duration': 6.966}, {'end': 614.009, 'text': "which is auto reloading every time you're making changes to it, and that way, when you're working on a website or a web app of some sort, uh,", 'start': 607.083, 'duration': 6.926}, {'end': 621.075, 'text': "you can just switch back and forth, because otherwise, if you only have one monitor, then most of the time you're gonna have to um, you know,", 'start': 614.009, 'duration': 7.066}], 'summary': 'Use two monitors for coding and web development to increase efficiency and productivity.', 'duration': 28.405, 'max_score': 592.67, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI592670.jpg'}, {'end': 756.707, 'src': 'embed', 'start': 726.873, 'weight': 3, 'content': [{'end': 731.998, 'text': "So one of the great things about Visual Studio Code is what's called Emmet, E-M-M-E-T.", 'start': 726.873, 'duration': 5.125}, {'end': 736.842, 'text': "If you do a channel search on my channel here on YouTube, you type in Emmet, you'll see a.", 'start': 732.058, 'duration': 4.784}, {'end': 742.229, 'text': 'a crash course I did on it, but basically it helps you write HTML faster.', 'start': 738.644, 'duration': 3.585}, {'end': 744.652, 'text': 'So one of the first things I do.', 'start': 742.73, 'duration': 1.922}, {'end': 750.099, 'text': "it is the first thing I do whenever I'm starting off a new HTML element or document.", 'start': 744.652, 'duration': 5.447}, {'end': 756.707, 'text': 'rather, I just put in a shift exclamation point, hit enter, And there we go.', 'start': 750.099, 'duration': 6.608}], 'summary': "Visual studio code's emmet feature enables faster html writing, such as using 'shift exclamation point' to start a new html element.", 'duration': 29.834, 'max_score': 726.873, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI726873.jpg'}, {'end': 816.823, 'src': 'embed', 'start': 787.717, 'weight': 1, 'content': [{'end': 793.741, 'text': "And then we also have our body element, and this is where we're going to be spending most of our time writing stuff, all right?", 'start': 787.717, 'duration': 6.024}, {'end': 800.265, 'text': 'So there is an extension that I want you to use here for Visual Studio Code, and it is called', 'start': 793.861, 'duration': 6.404}, {'end': 802.004, 'text': 'Live Server.', 'start': 801.303, 'duration': 0.701}, {'end': 810.876, 'text': "Now, what's cool about Live Server is if we go back here and after you install it and you reload your instance of this Visual Studio Code,", 'start': 802.745, 'duration': 8.131}, {'end': 816.823, 'text': 'you can right click our index.html and put in left click rather open with Live Server.', 'start': 810.876, 'duration': 5.947}], 'summary': 'Use live server extension in visual studio code for easy webpage development.', 'duration': 29.106, 'max_score': 787.717, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI787717.jpg'}, {'end': 931.745, 'src': 'embed', 'start': 900.834, 'weight': 2, 'content': [{'end': 903.074, 'text': "and we're going to not write.", 'start': 900.834, 'duration': 2.24}, {'end': 905.395, 'text': "we're gonna write CSS, but we're gonna write it in SAS.", 'start': 903.074, 'duration': 2.321}, {'end': 907.702, 'text': 'So I know this is confusing you.', 'start': 906.28, 'duration': 1.422}, {'end': 917.892, 'text': "SAS is just a way to write CSS in a more efficient manner, but really I'm only going to use one feature of SAS,", 'start': 908.623, 'duration': 9.269}, {'end': 920.615, 'text': 'and that is nesting rule sets within each other.', 'start': 917.892, 'duration': 2.723}, {'end': 923.498, 'text': "You can't do that with plain CSS as of yet.", 'start': 920.675, 'duration': 2.823}, {'end': 928.263, 'text': "And so I'll show you what that is, but otherwise everything I'm doing is just plain CSS.", 'start': 924.379, 'duration': 3.884}, {'end': 931.745, 'text': 'But in order to do this, we have to right click this.', 'start': 929.184, 'duration': 2.561}], 'summary': 'Using sas to write css for nesting rule sets, making it more efficient.', 'duration': 30.911, 'max_score': 900.834, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI900834.jpg'}, {'end': 1000.133, 'src': 'heatmap', 'start': 924.379, 'weight': 1, 'content': [{'end': 928.263, 'text': "And so I'll show you what that is, but otherwise everything I'm doing is just plain CSS.", 'start': 924.379, 'duration': 3.884}, {'end': 931.745, 'text': 'But in order to do this, we have to right click this.', 'start': 929.184, 'duration': 2.561}, {'end': 932.906, 'text': "We're going to rename it.", 'start': 931.765, 'duration': 1.141}, {'end': 938.688, 'text': "And so we're going to change it from main.css to main.scss.", 'start': 933.586, 'duration': 5.102}, {'end': 939.788, 'text': 'All right.', 'start': 939.568, 'duration': 0.22}, {'end': 941.509, 'text': 'Now I have this little SAS icon.', 'start': 939.828, 'duration': 1.681}, {'end': 946.531, 'text': "That's the logo for SAS showing up because I have an extension called the live SAS compiler.", 'start': 941.529, 'duration': 5.002}, {'end': 953.674, 'text': 'So if you type in live SAS compiler right there, you want to go ahead and install that.', 'start': 946.931, 'duration': 6.743}, {'end': 957.355, 'text': "Once it's installed and reloaded, you can click watch SAS.", 'start': 954.134, 'duration': 3.221}, {'end': 958.496, 'text': 'All right.', 'start': 958.216, 'duration': 0.28}, {'end': 966.499, 'text': "So what this does essentially is when you write inside of your main.sas document, for instance, you don't have to do this.", 'start': 959.597, 'duration': 6.902}, {'end': 975.583, 'text': "If I type in body background blue and I hit save, you'll see it creates two other files.", 'start': 967.08, 'duration': 8.503}, {'end': 984.246, 'text': "Ignore the map file, but the main.css file, that is what's gonna be linked or referenced here for this HTML document.", 'start': 975.843, 'duration': 8.403}, {'end': 987.287, 'text': "So we're gonna type link and then enter.", 'start': 984.266, 'duration': 3.021}, {'end': 991.949, 'text': "That way we don't have to write all this other stuff that's necessary for this HTML element to work.", 'start': 987.967, 'duration': 3.982}, {'end': 994.47, 'text': 'So the href is the attribute.', 'start': 992.489, 'duration': 1.981}, {'end': 995.851, 'text': "That's one of many attributes.", 'start': 994.51, 'duration': 1.341}, {'end': 1000.133, 'text': 'Content is an attribute, name, many different attributes like I mentioned.', 'start': 996.471, 'duration': 3.662}], 'summary': 'Using live sas compiler to automatically generate css files from main.sas document, simplifying html linking process.', 'duration': 75.754, 'max_score': 924.379, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI924379.jpg'}, {'end': 1149.339, 'src': 'embed', 'start': 1121.337, 'weight': 0, 'content': [{'end': 1124.199, 'text': 'And this is typically how you would be doing in a professional setting.', 'start': 1121.337, 'duration': 2.862}, {'end': 1130.964, 'text': "Very rarely do you just start off designing a website when you're working with your HTML and CSS.", 'start': 1125.42, 'duration': 5.544}, {'end': 1131.984, 'text': 'You want a mockup.', 'start': 1131.004, 'duration': 0.98}, {'end': 1135.487, 'text': "preferably done by somebody who's a good designer.", 'start': 1132.805, 'duration': 2.682}, {'end': 1140.011, 'text': "If you want to become a good designer, remember, visit designcourse.com because that's what I teach as well.", 'start': 1135.828, 'duration': 4.183}, {'end': 1149.339, 'text': 'But nonetheless, outside of the spam right there you want to look at an actual polished, preferably high fidelity document,', 'start': 1140.872, 'duration': 8.467}], 'summary': 'In a professional setting, a good designer creates a mockup before designing a website using html and css.', 'duration': 28.002, 'max_score': 1121.337, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI1121337.jpg'}], 'start': 125.942, 'title': 'Html and css basics', 'summary': 'Provides an overview of html and css structure, including elements, attributes, and document structure. it also covers setting up visual studio code, creating website folders, index.html file, and using sass for css. additionally, it discusses the use of visual studio code with live server and starting with an html structure based on a design mockup.', 'chapters': [{'end': 509.6, 'start': 125.942, 'title': 'Html css structure', 'summary': 'Provides a quick rundown of the structure of html and css, including the elements, attributes, and the overall structure of an html document, as well as the rule sets and selectors in css.', 'duration': 383.658, 'highlights': ['The overall structure of an HTML document The overall structure of an HTML document is explained, including the opening and closing HTML tags, the head section for configuration, and the body element for content, giving an insight into the layout of HTML documents.', 'The rule sets and selectors in CSS The explanation of rule sets and selectors in CSS is provided, detailing the selector, declaration, and the property-value pair, giving a comprehensive understanding of how CSS styles HTML elements.', 'The structure of HTML elements and attributes The structure of HTML elements and attributes is detailed, covering the opening and closing tags, self-closing elements, element names, attributes, and content, providing a foundational understanding of HTML structure.']}, {'end': 787.277, 'start': 509.6, 'title': 'Getting started with html and css', 'summary': 'Covers the process of setting up visual studio code, creating a new folder for the website, opening it in visual studio code, and creating an index.html file using emmet for html boilerplate code.', 'duration': 277.677, 'highlights': ["Visual Studio Code is the most popular code editor, and it's free. Visual Studio Code from Microsoft is the most popular code editor, available for free at code.visualstudio.com.", 'Suggests using two monitors for efficient development. Using two monitors is suggested for efficient development, allowing the code editor and the browser to be displayed simultaneously for quick testing and changes.', 'Using Emmet for HTML boilerplate code. Emmet is a tool in Visual Studio Code that allows for faster writing of HTML boilerplate code, reducing the need to write it from scratch.']}, {'end': 1230.656, 'start': 787.717, 'title': 'Html and css tutorial', 'summary': 'Discusses using visual studio code with live server to create and edit html and css files efficiently, including the benefits and process of using sass for css, as well as the importance of starting with an html structure based on a design mockup.', 'duration': 442.939, 'highlights': ['The chapter discusses using Visual Studio Code with Live Server to create and edit HTML and CSS files efficiently. It mentions the Live Server extension for Visual Studio Code, allowing automatic browser refresh on file save and efficient editing.', 'The benefits and process of using Sass for CSS are explained. The benefits of using Sass for efficient CSS writing, including the nesting feature that cannot be achieved with regular CSS, are outlined.', 'The importance of starting with an HTML structure based on a design mockup is emphasized. The significance of beginning HTML development based on a professional design mockup to ensure a polished and comprehensive structure is highlighted.']}], 'duration': 1104.714, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI125942.jpg', 'highlights': ['The importance of starting with an HTML structure based on a design mockup is emphasized. The significance of beginning HTML development based on a professional design mockup to ensure a polished and comprehensive structure is highlighted.', 'The chapter discusses using Visual Studio Code with Live Server to create and edit HTML and CSS files efficiently. It mentions the Live Server extension for Visual Studio Code, allowing automatic browser refresh on file save and efficient editing.', 'The benefits and process of using Sass for CSS are explained. The benefits of using Sass for efficient CSS writing, including the nesting feature that cannot be achieved with regular CSS, are outlined.', 'Using Emmet for HTML boilerplate code. Emmet is a tool in Visual Studio Code that allows for faster writing of HTML boilerplate code, reducing the need to write it from scratch.', 'Suggests using two monitors for efficient development. Using two monitors is suggested for efficient development, allowing the code editor and the browser to be displayed simultaneously for quick testing and changes.', "Visual Studio Code is the most popular code editor, and it's free. Visual Studio Code from Microsoft is the most popular code editor, available for free at code.visualstudio.com.", 'The rule sets and selectors in CSS The explanation of rule sets and selectors in CSS is provided, detailing the selector, declaration, and the property-value pair, giving a comprehensive understanding of how CSS styles HTML elements.', 'The overall structure of an HTML document The overall structure of an HTML document is explained, including the opening and closing HTML tags, the head section for configuration, and the body element for content, giving an insight into the layout of HTML documents.', 'The structure of HTML elements and attributes The structure of HTML elements and attributes is detailed, covering the opening and closing tags, self-closing elements, element names, attributes, and content, providing a foundational understanding of HTML structure.']}, {'end': 2842.766, 'segs': [{'end': 1302.398, 'src': 'embed', 'start': 1276.093, 'weight': 1, 'content': [{'end': 1282.417, 'text': "So you could do this, or if you don't want to have to type out all those elements, you can use the emmett abbreviation.", 'start': 1276.093, 'duration': 6.324}, {'end': 1284.638, 'text': 'So period for class.', 'start': 1282.517, 'duration': 2.121}, {'end': 1287.785, 'text': 'and then the name of it, and then hit enter.', 'start': 1285.663, 'duration': 2.122}, {'end': 1290.427, 'text': 'Automatically it creates a div element.', 'start': 1288.245, 'duration': 2.182}, {'end': 1294.631, 'text': 'So div element is probably the one element that you will use the most when writing HTML.', 'start': 1290.468, 'duration': 4.163}, {'end': 1302.398, 'text': "And it's just kind of like a generic element that's created for defining the structure of your layout.", 'start': 1295.072, 'duration': 7.326}], 'summary': 'Use emmett abbreviation for quick html element creation, like div for layout structure.', 'duration': 26.305, 'max_score': 1276.093, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI1276093.jpg'}, {'end': 1376.025, 'src': 'embed', 'start': 1346.971, 'weight': 2, 'content': [{'end': 1351.115, 'text': 'One thing I do want to consider is this photograph right here.', 'start': 1346.971, 'duration': 4.144}, {'end': 1353.158, 'text': 'Notice how, let me hide this real quick.', 'start': 1351.236, 'duration': 1.922}, {'end': 1358.257, 'text': 'Notice how we have the menu on top of it.', 'start': 1354.415, 'duration': 3.842}, {'end': 1366.3, 'text': 'So how do we show a photograph like this, picture of a Nike shoe, with stuff on top of it like other HTML elements?', 'start': 1359.017, 'duration': 7.283}, {'end': 1376.025, 'text': "Well, there's a CSS property that we can give it and that is called position, and we can make the value absolute.", 'start': 1367.241, 'duration': 8.784}], 'summary': 'Css position property allows displaying elements over a photograph, like a nike shoe, with other html elements.', 'duration': 29.054, 'max_score': 1346.971, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI1346971.jpg'}, {'end': 1432.092, 'src': 'embed', 'start': 1403.297, 'weight': 3, 'content': [{'end': 1412.622, 'text': "Now there's two different ways you can actually show photographs or imagery in a sense that are from like JPG files or PNG files.", 'start': 1403.297, 'duration': 9.325}, {'end': 1416.944, 'text': 'And the first way would be an image tag.', 'start': 1414.162, 'duration': 2.782}, {'end': 1423.327, 'text': 'So if we type image source equals, This is where the source goes, kind of like href right here.', 'start': 1417.044, 'duration': 6.283}, {'end': 1427.109, 'text': 'Source is like where the actual file is located.', 'start': 1423.927, 'duration': 3.182}, {'end': 1432.092, 'text': "Now currently, we don't have any image files in our My New LP folder.", 'start': 1427.169, 'duration': 4.923}], 'summary': 'Two ways to display images: using image tag with source attribute, no image files in my new lp folder', 'duration': 28.795, 'max_score': 1403.297, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI1403297.jpg'}, {'end': 1554.778, 'src': 'embed', 'start': 1525.428, 'weight': 0, 'content': [{'end': 1533.489, 'text': 'Now, the alt attribute is a really important alt attribute, because whatever you put here, when somebody hovers over it, for instance,', 'start': 1525.428, 'duration': 8.061}, {'end': 1535.47, 'text': "they'll be able to see a description of it.", 'start': 1533.489, 'duration': 1.981}, {'end': 1547.133, 'text': "But also for people who are using screen readers, who are visually impaired, when they're navigating through the website with their keyboard.", 'start': 1536.43, 'duration': 10.703}, {'end': 1554.778, 'text': "it will actually give them an audible reading so they can hear what's happening essentially on this website.", 'start': 1547.893, 'duration': 6.885}], 'summary': 'The alt attribute is essential for accessibility, providing descriptions for hover and screen reader users.', 'duration': 29.35, 'max_score': 1525.428, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI1525428.jpg'}, {'end': 1887.542, 'src': 'embed', 'start': 1857.239, 'weight': 4, 'content': [{'end': 1859.562, 'text': 'and that is their logo that they want you to use.', 'start': 1857.239, 'duration': 2.323}, {'end': 1863.187, 'text': 'so typically you would use an image tag for this, but for us,', 'start': 1859.562, 'duration': 3.625}, {'end': 1872.46, 'text': "because it's just purely word mark based and it's going to be based on the font that's used here already in the document we can just use and make it a link,", 'start': 1863.187, 'duration': 9.273}, {'end': 1875.885, 'text': "And so we'll use the A tag.", 'start': 1873.822, 'duration': 2.063}, {'end': 1879.511, 'text': "And that's how you create hyperlinks or the things that people can click.", 'start': 1876.366, 'duration': 3.145}, {'end': 1887.542, 'text': "Because another typical pattern is the logo should be clickable and it should take you to the homepage or the dashboard or whatever it's associated with.", 'start': 1879.911, 'duration': 7.631}], 'summary': 'Use the a tag to make the wordmark logo clickable for user interaction.', 'duration': 30.303, 'max_score': 1857.239, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI1857239.jpg'}, {'end': 2019.892, 'src': 'embed', 'start': 1991.607, 'weight': 5, 'content': [{'end': 1999.455, 'text': "this class attribute will allow us to reference it in css to style up to make it look like it does in the figma prototype that we've been looking at now.", 'start': 1991.607, 'duration': 7.848}, {'end': 2006.883, 'text': "inside of here we have the content section, and so inside of it we're going to put shoe And then notice for a second.", 'start': 1999.455, 'duration': 7.428}, {'end': 2011.506, 'text': 'if I come out here, notice how one word is red and the other is black.', 'start': 2006.883, 'duration': 4.623}, {'end': 2019.892, 'text': "Well, we need a way to make this red, just brand, right? So to do that, we can't just put shoe brand.", 'start': 2012.126, 'duration': 7.766}], 'summary': 'Using class attribute in css to style content, making specific word red.', 'duration': 28.285, 'max_score': 1991.607, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI1991607.jpg'}, {'end': 2298.405, 'src': 'embed', 'start': 2273.419, 'weight': 6, 'content': [{'end': 2285.99, 'text': 'But I also want to wrap and this is for semantic purposes this entire element right here and our navigation or our little menu icon within a nav element,', 'start': 2273.419, 'duration': 12.571}, {'end': 2298.405, 'text': "which is a semantic element that will help screen readers understand that this is a navigation and it will say know audibly to the person who's using a screen reader that this is a navigation right here.", 'start': 2285.99, 'duration': 12.415}], 'summary': 'Semantic wrapping of navigation element enhances accessibility for screen readers.', 'duration': 24.986, 'max_score': 2273.419, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI2273419.jpg'}, {'end': 2558.628, 'src': 'embed', 'start': 2530.123, 'weight': 7, 'content': [{'end': 2534.866, 'text': "If I right click open with live server, it's not showing up there.", 'start': 2530.123, 'duration': 4.743}, {'end': 2542.852, 'text': "Now what we could do when you have Firefox or Chrome, which I advise using when you're working with web development.", 'start': 2534.926, 'duration': 7.926}, {'end': 2547.643, 'text': 'hit control, shift I or F12, And this will get up this little dev console.', 'start': 2542.852, 'duration': 4.791}, {'end': 2549.083, 'text': 'Oh, there it is.', 'start': 2547.763, 'duration': 1.32}, {'end': 2550.864, 'text': 'It was way down there.', 'start': 2549.163, 'duration': 1.701}, {'end': 2558.628, 'text': 'Now, why is that? Well, what we can do is we can use this little element right here.', 'start': 2552.025, 'duration': 6.603}], 'summary': 'To troubleshoot web development issues, use firefox or chrome, and access the dev console with control, shift i or f12.', 'duration': 28.505, 'max_score': 2530.123, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI2530123.jpg'}], 'start': 1232.694, 'title': 'Web development fundamentals', 'summary': 'Covers creating html elements and positioning images, emphasizing the importance of alt attributes for accessibility, troubleshooting web development issues, and structuring content with semantic html elements. it also includes techniques for responsive image display and linking image files from unsplash.com.', 'chapters': [{'end': 1524.707, 'start': 1232.694, 'title': 'Html structure and image positioning', 'summary': 'Covers creating html elements, specifically div elements, and positioning images using css with a focus on showing a photograph with html elements on top and linking image files from unsplash.com.', 'duration': 292.013, 'highlights': ['Creating div elements using emmett abbreviation for class and understanding their attributes and usage in HTML. The transcript explains the use of div elements, the emmett abbreviation for class, and the attributes commonly used with div elements in HTML.', "Positioning images using the CSS property 'position: absolute' to stack HTML elements on top of the image and linking image files from unsplash.com. The chapter details the CSS property 'position: absolute' for positioning images and the process of linking image files from unsplash.com, including the steps for downloading and organizing the image files.", 'Demonstrating the use of image tag and linking image files from unsplash.com to display photographs in HTML. The transcript demonstrates the use of the image tag and provides steps for linking image files from unsplash.com to display photographs in HTML.']}, {'end': 1808.517, 'start': 1525.428, 'title': 'Web design basics: alt attributes and image display', 'summary': 'Discusses the importance of alt attributes for accessibility, demonstrates making images responsive using percentage-based width and creating a background image in css, and explains the structure and semantic html for a website header.', 'duration': 283.089, 'highlights': ['The importance of alt attributes for accessibility Alt attributes are crucial for providing descriptions for visually impaired users and enabling screen readers, ensuring accessibility and usability for all website visitors.', "Making images responsive using percentage-based width Demonstrates using 'width: 100%' to make images responsive, ensuring they adapt to different screen sizes and devices for a better user experience.", 'Creating a background image in CSS for more control Explains using a background image in CSS to gain more control over the image display, providing flexibility and customization options for website design.', 'Explaining the structure and semantic HTML for a website header Describes the use of semantic HTML tags and the structuring of HTML elements to create a website header with a logo and navigation, emphasizing the importance of using relevant HTML tags based on the document context.']}, {'end': 2500.455, 'start': 1809.964, 'title': 'Html structure and elements', 'summary': 'Discusses html structure and elements, covering topics such as creating hyperlinks, using classes for styling, and structuring sections with semantic elements to organize content and enhance accessibility.', 'duration': 690.491, 'highlights': ["Creating hyperlinks with the 'A' tag allows for linking to different websites or pages within the same website. The 'A' tag is used to create hyperlinks, specifying the href attribute to link to different websites or pages within the same website, enhancing navigation and user experience.", 'Using the class attribute allows for referencing elements in CSS, enabling the styling of elements to match the Figma prototype. The class attribute in HTML allows for referencing elements in CSS, facilitating the styling of elements to achieve a consistent look with the Figma prototype, ensuring visual cohesion in the design.', "Structuring sections with semantic elements like 'section' and 'nav' enhances organization and accessibility for screen readers. Employing semantic elements such as 'section' and 'nav' in HTML aids in structuring content, fostering organization and accessibility for screen readers, thereby improving the overall user experience."]}, {'end': 2842.766, 'start': 2501.255, 'title': 'Troubleshooting web development issues', 'summary': 'Discusses troubleshooting web development issues, emphasizing the use of developer tools and html/css techniques to identify and resolve display problems, including addressing the issue of a hidden element and manipulating svg attributes.', 'duration': 341.511, 'highlights': ["The speaker encounters a display issue in the browser, demonstrates the use of developer tools to identify hidden elements, and explains how the element's attributes can affect its visibility.", 'The process of creating and styling HTML elements is explained, including the use of classes, copying and pasting content, and utilizing extensions for placeholder text.', 'The chapter introduces the concept of using CSS grid to manipulate the display order of HTML elements and demonstrates the use of H3 and paragraph elements to create content.', 'The importance of using Firefox or Chrome for web development is emphasized, along with the shortcut keys to access the developer console.', 'The chapter provides insights on troubleshooting web development issues, such as identifying hidden elements and using CSS techniques to manipulate element display.']}], 'duration': 1610.072, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI1232694.jpg', 'highlights': ['The importance of alt attributes for accessibility Alt attributes are crucial for providing descriptions for visually impaired users and enabling screen readers, ensuring accessibility and usability for all website visitors.', 'Creating div elements using emmett abbreviation for class and understanding their attributes and usage in HTML. The transcript explains the use of div elements, the emmett abbreviation for class, and the attributes commonly used with div elements in HTML.', "Positioning images using the CSS property 'position: absolute' to stack HTML elements on top of the image and linking image files from unsplash.com. The chapter details the CSS property 'position: absolute' for positioning images and the process of linking image files from unsplash.com, including the steps for downloading and organizing the image files.", 'Demonstrating the use of image tag and linking image files from unsplash.com to display photographs in HTML. The transcript demonstrates the use of the image tag and provides steps for linking image files from unsplash.com to display photographs in HTML.', "Creating hyperlinks with the 'A' tag allows for linking to different websites or pages within the same website. The 'A' tag is used to create hyperlinks, specifying the href attribute to link to different websites or pages within the same website, enhancing navigation and user experience.", 'Using the class attribute allows for referencing elements in CSS, enabling the styling of elements to match the Figma prototype. The class attribute in HTML allows for referencing elements in CSS, facilitating the styling of elements to achieve a consistent look with the Figma prototype, ensuring visual cohesion in the design.', "Structuring sections with semantic elements like 'section' and 'nav' enhances organization and accessibility for screen readers. Employing semantic elements such as 'section' and 'nav' in HTML aids in structuring content, fostering organization and accessibility for screen readers, thereby improving the overall user experience.", "The speaker encounters a display issue in the browser, demonstrates the use of developer tools to identify hidden elements, and explains how the element's attributes can affect its visibility."]}, {'end': 3660.596, 'segs': [{'end': 3049.885, 'src': 'embed', 'start': 3022.978, 'weight': 0, 'content': [{'end': 3031.926, 'text': 'So we can make some decisions on our own in order to adjust things with CSS so that it works and looks well on a phone.', 'start': 3022.978, 'duration': 8.948}, {'end': 3032.927, 'text': 'All right now.', 'start': 3032.526, 'duration': 0.401}, {'end': 3043.243, 'text': 'the reason we do mobile first CSS as opposed to desktop first CSS is because, When it comes to your CSS,', 'start': 3032.927, 'duration': 10.316}, {'end': 3049.885, 'text': "in your initial rule sets that you write that aren't a part of what's called responsive design or media queries.", 'start': 3043.243, 'duration': 6.642}], 'summary': 'Mobile-first approach for css ensures better phone compatibility and appearance.', 'duration': 26.907, 'max_score': 3022.978, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI3022978.jpg'}, {'end': 3223.578, 'src': 'embed', 'start': 3197.237, 'weight': 3, 'content': [{'end': 3201.821, 'text': 'So setting your font family in the body element makes a lot of sense for most cases.', 'start': 3197.237, 'duration': 4.584}, {'end': 3202.722, 'text': 'All right.', 'start': 3202.442, 'duration': 0.28}, {'end': 3209.348, 'text': "So another thing that we'll also do is we're going to reset the margins.", 'start': 3202.782, 'duration': 6.566}, {'end': 3212.871, 'text': 'so by default the browser will apply margins.', 'start': 3209.348, 'duration': 3.523}, {'end': 3213.631, 'text': 'now your margins.', 'start': 3212.871, 'duration': 0.76}, {'end': 3217.854, 'text': "you have margin and padding and that's a way to define white space.", 'start': 3213.631, 'duration': 4.223}, {'end': 3223.578, 'text': "white space is just the empty areas we can see there's a little bit of white space up here, but it's for me it's not enough.", 'start': 3217.854, 'duration': 5.724}], 'summary': 'Setting font family in body, resetting margins, discussing white space.', 'duration': 26.341, 'max_score': 3197.237, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI3197237.jpg'}, {'end': 3519.734, 'src': 'embed', 'start': 3466.849, 'weight': 4, 'content': [{'end': 3474.894, 'text': 'So in that case, you can provide a fallback here in this value and just say sans-serif.', 'start': 3466.849, 'duration': 8.045}, {'end': 3477.896, 'text': "So it'll choose the closest sans-serif font.", 'start': 3475.335, 'duration': 2.561}, {'end': 3480.358, 'text': 'Sans-serif simply means without serif.', 'start': 3477.976, 'duration': 2.382}, {'end': 3483.42, 'text': 'And a serif is like Times New Roman.', 'start': 3480.878, 'duration': 2.542}, {'end': 3485.221, 'text': 'It has all those things hanging off the letters.', 'start': 3483.44, 'duration': 1.781}, {'end': 3488.303, 'text': 'Sans-serif is usually a cleaner font.', 'start': 3486.042, 'duration': 2.261}, {'end': 3490.165, 'text': "It's much more simplistic like this.", 'start': 3488.463, 'duration': 1.702}, {'end': 3498.332, 'text': 'Now the way you force them to be able to download this font is we actually import the font.', 'start': 3490.99, 'duration': 7.342}, {'end': 3501.653, 'text': "Now this happens to be a font that's available on Google.", 'start': 3498.993, 'duration': 2.66}, {'end': 3511.576, 'text': 'So if we go and get our browser, fonts.google.com, this is a resource in which you have all these cool fonts that you can use.', 'start': 3501.913, 'duration': 9.663}, {'end': 3514.397, 'text': "So let's type in to search for a font called Poppins.", 'start': 3512.037, 'duration': 2.36}, {'end': 3516.378, 'text': 'We click on it.', 'start': 3515.758, 'duration': 0.62}, {'end': 3519.734, 'text': 'And then we choose our weights.', 'start': 3518.413, 'duration': 1.321}], 'summary': 'Using sans-serif font can simplify and improve web design. google fonts offers a variety of fonts, such as poppins.', 'duration': 52.885, 'max_score': 3466.849, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI3466849.jpg'}], 'start': 2843.588, 'title': 'Creating mobile-first css layout and css styling basics', 'summary': 'Explains the process of creating a mobile-first css layout, starting with initial css rules for mobile devices and later incorporating media queries for desktop and tablet views. it also covers the basics of css styling, including setting font families, using relative units like m, and specifying and importing custom fonts like poppins, focusing on optimizing performance.', 'chapters': [{'end': 3146.79, 'start': 2843.588, 'title': 'Creating mobile-first css layout', 'summary': 'Explains how to create a mobile-first css layout, focusing on initial css rules for mobile devices, and the reason for starting with a simpler approach before incorporating media queries for desktop and tablet views.', 'duration': 303.202, 'highlights': ['The chapter focuses on creating a mobile-first CSS layout, starting with initial CSS rules for mobile devices before expanding to desktop and tablet views. Creating mobile-first CSS layout, starting with initial CSS rules for mobile devices, then incorporating media queries for desktop and tablet views.', 'The instructor explains the reason for using mobile-first CSS, stating that it allows for a simpler starting point and gradual addition of features with media queries for larger screens. Mobile-first CSS provides a simpler starting point for mobile devices and allows gradual addition of features for larger screens with media queries.', 'The chapter discusses the practice of mobile-first CSS versus desktop-first CSS, highlighting the preference for starting with a simpler approach for mobile devices before expanding to larger screens. Comparison of mobile-first CSS versus desktop-first CSS, with a preference for starting with a simpler approach for mobile devices before expanding to larger screens.']}, {'end': 3660.596, 'start': 3146.85, 'title': 'Css styling basics', 'summary': 'Covers the basics of css styling, including setting font families and using relative units like m for defining margins and paddings. it also discusses specifying and importing custom fonts like poppins using google fonts, with a focus on optimizing performance by selecting only necessary font weights.', 'duration': 513.746, 'highlights': ['The chapter focuses on the basics of CSS styling, including setting font families and using relative units like M for defining margins and paddings.', 'It discusses specifying and importing custom fonts like Poppins using Google Fonts, with a focus on optimizing performance by selecting only necessary font weights.', 'The transcript explains the concept of M units as a relative unit, demonstrating its relationship with the default font size and its advantages in scaling elements for user interface.', 'It provides insights into the process of specifying font families, highlighting the importance of providing fallback options like sans-serif and optimizing font imports for performance by selecting limited necessary font weights.']}], 'duration': 817.008, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI2843588.jpg', 'highlights': ['Creating mobile-first CSS layout, starting with initial CSS rules for mobile devices, then incorporating media queries for desktop and tablet views.', 'Mobile-first CSS provides a simpler starting point for mobile devices and allows gradual addition of features for larger screens with media queries.', 'Comparison of mobile-first CSS versus desktop-first CSS, with a preference for starting with a simpler approach for mobile devices before expanding to larger screens.', 'Basics of CSS styling, including setting font families and using relative units like M for defining margins and paddings.', 'Specifying and importing custom fonts like Poppins using Google Fonts, with a focus on optimizing performance by selecting only necessary font weights.', 'Insights into the process of specifying font families, highlighting the importance of providing fallback options like sans-serif and optimizing font imports for performance by selecting limited necessary font weights.']}, {'end': 4603.738, 'segs': [{'end': 3686.101, 'src': 'embed', 'start': 3660.656, 'weight': 4, 'content': [{'end': 3666.021, 'text': "So that's how you debug your HTML with the help of the dev inspector.", 'start': 3660.656, 'duration': 5.365}, {'end': 3667.102, 'text': 'All right.', 'start': 3666.722, 'duration': 0.38}, {'end': 3668.723, 'text': 'Or the Chrome tools.', 'start': 3667.783, 'duration': 0.94}, {'end': 3670.265, 'text': 'It depends on whatever you want to call it.', 'start': 3668.763, 'duration': 1.502}, {'end': 3676.89, 'text': "Okay So we got that done and let's continue on with our next rule set.", 'start': 3671.005, 'duration': 5.885}, {'end': 3679.764, 'text': "All right, so let's drag this back in.", 'start': 3677.827, 'duration': 1.937}, {'end': 3686.101, 'text': "And the next thing we're going to do is we're going to get rid of the underlines.", 'start': 3681.377, 'duration': 4.724}], 'summary': 'Debug html using dev inspector or chrome tools, remove underlines.', 'duration': 25.445, 'max_score': 3660.656, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI3660656.jpg'}, {'end': 3743.038, 'src': 'embed', 'start': 3715.735, 'weight': 0, 'content': [{'end': 3719.957, 'text': 'Awesome Now we can also choose to style all links and make them even larger.', 'start': 3715.735, 'duration': 4.222}, {'end': 3721.258, 'text': "So let's say 1.3 rem units.", 'start': 3720.097, 'duration': 1.161}, {'end': 3728.464, 'text': "Now, what is a REM unit? We're using M units up there, REM units over here.", 'start': 3723.74, 'duration': 4.724}, {'end': 3735.05, 'text': 'So typically speaking, for font sizes, you want to use REM units or relative M units.', 'start': 3728.524, 'duration': 6.526}, {'end': 3743.038, 'text': "And I can't go into the details about exactly how it works, because it's kind of difficult to explain off the cuff here,", 'start': 3735.691, 'duration': 7.347}], 'summary': 'Using 1.3 rem units for styling links, emphasizing the use of rem units for font sizes.', 'duration': 27.303, 'max_score': 3715.735, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI3715735.jpg'}, {'end': 3846.861, 'src': 'embed', 'start': 3818.583, 'weight': 2, 'content': [{'end': 3822.504, 'text': "so let's actually get rid of nav and let's work on our hero image.", 'start': 3818.583, 'duration': 3.921}, {'end': 3825.705, 'text': "so we're going to put period, because it's a class called hero hyphen image.", 'start': 3822.504, 'duration': 3.201}, {'end': 3826.785, 'text': 'All right.', 'start': 3826.565, 'duration': 0.22}, {'end': 3829.208, 'text': 'so this one has a lot of declarations.', 'start': 3826.785, 'duration': 2.423}, {'end': 3832.972, 'text': "It's almost, it looks like it's over 12.", 'start': 3830.409, 'duration': 2.563}, {'end': 3841.061, 'text': "So the first thing, remember I mentioned at the beginning of the video, there's a CSS property called position, and we're gonna make it absolute.", 'start': 3832.972, 'duration': 8.089}, {'end': 3842.803, 'text': "So we're gonna save that.", 'start': 3841.802, 'duration': 1.001}, {'end': 3846.861, 'text': "And we're also going to put top zero.", 'start': 3843.84, 'duration': 3.021}], 'summary': 'Working on hero image, setting position to absolute, and top to zero.', 'duration': 28.278, 'max_score': 3818.583, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI3818583.jpg'}, {'end': 4144.848, 'src': 'embed', 'start': 4112.41, 'weight': 1, 'content': [{'end': 4113.291, 'text': 'but we have two elements.', 'start': 4112.41, 'duration': 0.881}, {'end': 4116.872, 'text': 'we have two columns rather, this and the nav element.', 'start': 4113.89, 'duration': 2.982}, {'end': 4123.117, 'text': 'We had to make it so that those are not underneath each other like they currently are in the browser, but side by side.', 'start': 4117.212, 'duration': 5.905}, {'end': 4126.779, 'text': "We don't want rows, we want columns for these two elements.", 'start': 4123.718, 'duration': 3.061}, {'end': 4133.104, 'text': 'So the way we do that is we say header and we say display flex.', 'start': 4127.24, 'duration': 5.864}, {'end': 4137.046, 'text': "Notice how they kind of just they're next to each other now, right?", 'start': 4134.345, 'duration': 2.701}, {'end': 4144.848, 'text': 'We could also do justify content space between.', 'start': 4137.947, 'duration': 6.901}], 'summary': 'Using display flex and justify content to align elements in columns instead of rows.', 'duration': 32.438, 'max_score': 4112.41, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI4112410.jpg'}, {'end': 4376.164, 'src': 'embed', 'start': 4345.64, 'weight': 3, 'content': [{'end': 4347.661, 'text': 'Now we could just do display none.', 'start': 4345.64, 'duration': 2.021}, {'end': 4354.024, 'text': "And that, you know, almost is pretty much that gets rid of it, right? And that's what we want.", 'start': 4348.982, 'duration': 5.042}, {'end': 4355.705, 'text': 'And we could do that.', 'start': 4354.344, 'duration': 1.361}, {'end': 4369.183, 'text': "but there's another way to hide this situation here and the way to do that is we can use the transform property and kind of just push it off the side of the page.", 'start': 4355.705, 'duration': 13.478}, {'end': 4372.063, 'text': "for now we're going to leave this at display.", 'start': 4369.183, 'duration': 2.88}, {'end': 4376.164, 'text': "none, no, i and you'll see why in a little bit.", 'start': 4372.063, 'duration': 4.101}], 'summary': 'Using display none and transform property to hide content, leaving it at display none for now.', 'duration': 30.524, 'max_score': 4345.64, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI4345640.jpg'}], 'start': 3660.656, 'title': 'Css styling and layout', 'summary': 'Explains using rem and m units for font sizes and margins, positioning images with css properties, and styling navigation and layout elements, demonstrating the use of display flex and transform property.', 'chapters': [{'end': 3714.894, 'start': 3660.656, 'title': 'Debugging html with dev inspector', 'summary': 'Explains how to debug html using the dev inspector, demonstrating the removal of underlines from hyperlinks based on the tag name a and setting the text decoration to none.', 'duration': 54.238, 'highlights': ['The chapter demonstrates the process of removing underlines from hyperlinks by creating a selector based on the tag name A and setting the text decoration to None.', 'The speaker explains the use of dev inspector or Chrome tools for debugging HTML.']}, {'end': 4052.575, 'start': 3715.735, 'title': 'Css styling and positioning', 'summary': 'Covers using rem units for font sizes and m units for margin and padding, positioning an image using css properties like position, z-index, background size, and background position to create a visually appealing hero image.', 'duration': 336.84, 'highlights': ['Using REM units for font sizes and M units for margin and padding The chapter emphasizes using REM units for font sizes and M units for margin and padding for better control and consistency in styling.', 'Positioning and styling the hero image using CSS properties The detailed explanation covers using CSS properties like position, z-index, background size, background position, and viewport height to position and style the hero image, creating a visually appealing result.', 'Explanation of CSS properties for image positioning The explanation includes the usage of CSS properties like background size, background position, and viewport height for precise and visually appealing positioning of the hero image.']}, {'end': 4603.738, 'start': 4053.116, 'title': 'Styling navigation and layout', 'summary': 'Covers styling the logo, structuring header elements with display flex, and hiding elements using display none and transform property, with further styling of hero section, down arrow, and h1 element.', 'duration': 550.622, 'highlights': ['Structuring header elements with display flex Using display flex to structure the header elements side by side, achieving the desired layout.', 'Styling the logo with color and font weight Applying color white and font weight bold to the logo element for visual enhancement.', 'Hiding elements using display none and transform property Utilizing display none and transform property to hide the navigation element, achieving the desired visual effect.', 'Styling hero section, down arrow, and h1 element Applying styles such as color, height, stroke, and font size to the hero section, down arrow, and h1 element for visual and layout adjustments.']}], 'duration': 943.082, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI3660656.jpg', 'highlights': ['The chapter emphasizes using REM units for font sizes and M units for margin and padding for better control and consistency in styling.', 'Using display flex to structure the header elements side by side, achieving the desired layout.', 'Positioning and styling the hero image using CSS properties like position, z-index, background size, background position, and viewport height to create a visually appealing result.', 'Utilizing display none and transform property to hide the navigation element, achieving the desired visual effect.', 'The speaker explains the use of dev inspector or Chrome tools for debugging HTML.']}, {'end': 5131.399, 'segs': [{'end': 4631, 'src': 'embed', 'start': 4604.759, 'weight': 2, 'content': [{'end': 4611.284, 'text': "Now let's also reference our subhead, which is right here, a subhead class, because that needs to be a little bit larger.", 'start': 4604.759, 'duration': 6.525}, {'end': 4615.327, 'text': 'So subhead will be font size 1.4 rem units.', 'start': 4611.684, 'duration': 3.643}, {'end': 4618.67, 'text': "And I think that's looking pretty good right there.", 'start': 4616.528, 'duration': 2.142}, {'end': 4625.79, 'text': "All right, so right now, all this doesn't look good, but this looks a lot better than what we had before, clearly.", 'start': 4619.758, 'duration': 6.032}, {'end': 4628.154, 'text': "So now let's get this menu up.", 'start': 4626.371, 'duration': 1.783}, {'end': 4631, 'text': 'And when we click on this, a menu is supposed to show up.', 'start': 4628.194, 'duration': 2.806}], 'summary': 'Adjust subhead to 1.4 rem for better appearance. implement menu to show on click.', 'duration': 26.241, 'max_score': 4604.759, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI4604759.jpg'}, {'end': 4677.166, 'src': 'embed', 'start': 4650.761, 'weight': 0, 'content': [{'end': 4655.125, 'text': "so what we'll do is i we were going to use position fixed.", 'start': 4650.761, 'duration': 4.364}, {'end': 4658.113, 'text': 'Fixed means when I scroll down, guess what?', 'start': 4656.212, 'duration': 1.901}, {'end': 4659.014, 'text': "It doesn't go away.", 'start': 4658.193, 'duration': 0.821}, {'end': 4663.637, 'text': 'It stays right there, which is what you want with this type of navigation on mobile.', 'start': 4659.054, 'duration': 4.583}, {'end': 4666.099, 'text': 'Well, we wanna position this to the right.', 'start': 4664.097, 'duration': 2.002}, {'end': 4668.2, 'text': "It's gonna slide in actually from the right.", 'start': 4666.119, 'duration': 2.081}, {'end': 4672.743, 'text': "We're gonna say right zero, all right? And then we're gonna say top zero.", 'start': 4668.22, 'duration': 4.523}, {'end': 4677.166, 'text': "And then we're going to go ahead and give it height 100 viewport height.", 'start': 4673.744, 'duration': 3.422}], 'summary': 'Using position fixed, the navigation will be fixed on scroll and slide in from the right with a height of 100 viewport height.', 'duration': 26.405, 'max_score': 4650.761, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI4650761.jpg'}, {'end': 4731.07, 'src': 'embed', 'start': 4697.633, 'weight': 1, 'content': [{'end': 4701.356, 'text': "which is relative to the size of the browser, the device that you're viewing it on.", 'start': 4697.633, 'duration': 3.723}, {'end': 4704.938, 'text': 'And save it like there.', 'start': 4703.717, 'duration': 1.221}, {'end': 4708.02, 'text': "Now we can see it's given us enough space for a navigation.", 'start': 4704.978, 'duration': 3.042}, {'end': 4714.084, 'text': "And then we'll also do zindex2 to make sure it is sitting on top of this white text.", 'start': 4708.76, 'duration': 5.324}, {'end': 4718.801, 'text': 'because you want this navigation to make sure it goes all for everything.', 'start': 4715.458, 'duration': 3.343}, {'end': 4722.703, 'text': 'So you might actually want to make this a really high value, like 999, just to be careful.', 'start': 4718.841, 'duration': 3.862}, {'end': 4731.07, 'text': 'So then also text transform uppercase allows us to take all this type and make it uppercase.', 'start': 4723.924, 'duration': 7.146}], 'summary': 'Adjust browser size, set z-index to 2, and use text transform to uppercase.', 'duration': 33.437, 'max_score': 4697.633, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI4697633.jpg'}, {'end': 4774.207, 'src': 'embed', 'start': 4744.855, 'weight': 4, 'content': [{'end': 4751.817, 'text': "So UL for unordered list, we're going to say list style type is none.", 'start': 4744.855, 'duration': 6.962}, {'end': 4754.958, 'text': 'That gets rid of these little black circles.', 'start': 4752.037, 'duration': 2.921}, {'end': 4764.057, 'text': "We're also gonna get rid of default padding because browsers will add a little bit of padding on the left side of these list items.", 'start': 4755.95, 'duration': 8.107}, {'end': 4767.501, 'text': 'So if we save that, pushes it all the way over here to the left.', 'start': 4764.097, 'duration': 3.404}, {'end': 4774.207, 'text': "And then we're also gonna push it away from the top by about eight M units, so eight times 16.", 'start': 4768.381, 'duration': 5.826}], 'summary': 'Removing black circles and adjusting padding for unordered list items.', 'duration': 29.352, 'max_score': 4744.855, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI4744855.jpg'}, {'end': 4812.376, 'src': 'embed', 'start': 4788.136, 'weight': 5, 'content': [{'end': 4794.041, 'text': "So we're going to take A, which means all the A elements or the link elements inside of our unordered list.", 'start': 4788.136, 'duration': 5.905}, {'end': 4799.546, 'text': 'Because if you recall, we have list item, then we have A inside of that.', 'start': 4794.101, 'duration': 5.445}, {'end': 4803.069, 'text': "So for these links, we're going to put color black.", 'start': 4800.827, 'duration': 2.242}, {'end': 4805.611, 'text': "We're going to do padding.", 'start': 4804.81, 'duration': 0.801}, {'end': 4812.376, 'text': 'So another way we can put margin and padding is we can put top and bottom values.', 'start': 4807.014, 'duration': 5.362}], 'summary': 'Styling all a elements inside unordered list with black color and padding.', 'duration': 24.24, 'max_score': 4788.136, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI4788136.jpg'}, {'end': 4914.557, 'src': 'embed', 'start': 4885.631, 'weight': 6, 'content': [{'end': 4888.112, 'text': "Now let's get that, that close button working here.", 'start': 4885.631, 'duration': 2.481}, {'end': 4893.886, 'text': "So in Figma, I'm gonna right click and I'm gonna use a plugin that I've installed.", 'start': 4888.212, 'duration': 5.674}, {'end': 4901.53, 'text': 'If you go to bandage plugins or browse plugins in community, you can use an actual plugin called Iconify.', 'start': 4893.906, 'duration': 7.624}, {'end': 4910.074, 'text': "So Iconify, after you get that installed, if you wanna follow along, type in close and you'll see all these.", 'start': 4902.231, 'duration': 7.843}, {'end': 4912.095, 'text': 'So I like this one.', 'start': 4910.955, 'duration': 1.14}, {'end': 4914.557, 'text': "Let's go ahead and just drag that.", 'start': 4912.856, 'duration': 1.701}], 'summary': 'Using the iconify plugin in figma to install and use a close button icon for a design.', 'duration': 28.926, 'max_score': 4885.631, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI4885631.jpg'}, {'end': 5047.423, 'src': 'embed', 'start': 5019.288, 'weight': 8, 'content': [{'end': 5023.13, 'text': 'And then what we can also do just for future reference is transition.', 'start': 5019.288, 'duration': 3.842}, {'end': 5031.172, 'text': 'Transition is a way to specify what type of property should animate from one point to another.', 'start': 5024.35, 'duration': 6.822}, {'end': 5035.374, 'text': 'So, when we create a little bit of JavaScript, when a person clicks this element,', 'start': 5031.252, 'duration': 4.122}, {'end': 5039.735, 'text': "we're going to change this transform property from translate X 100% to zero.", 'start': 5035.374, 'duration': 4.361}, {'end': 5043.361, 'text': 'right. so we want this to animate.', 'start': 5041.92, 'duration': 1.441}, {'end': 5047.423, 'text': 'so we put transition and we put in transform.', 'start': 5043.361, 'duration': 4.062}], 'summary': 'Using transition property to animate transform from x 100% to 0.', 'duration': 28.135, 'max_score': 5019.288, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI5019288.jpg'}, {'end': 5117.728, 'src': 'embed', 'start': 5091.797, 'weight': 7, 'content': [{'end': 5096.219, 'text': "Actually, we don't necessarily even have a rule set for that, but we can just reference this stuff inside of here.", 'start': 5091.797, 'duration': 4.422}, {'end': 5097.019, 'text': 'We can say image.', 'start': 5096.239, 'duration': 0.78}, {'end': 5102.821, 'text': "So all of our images, we're going to say, we're going to make them responsive with 100%.", 'start': 5097.539, 'duration': 5.282}, {'end': 5106.383, 'text': 'Notice that that got rid of that horizontal scroll bar.', 'start': 5102.821, 'duration': 3.562}, {'end': 5109.084, 'text': "So we don't have that scroll issue anymore showing up.", 'start': 5106.423, 'duration': 2.661}, {'end': 5115.266, 'text': 'Oh, and also control B, I do want to change these.', 'start': 5111.283, 'duration': 3.983}, {'end': 5117.728, 'text': "That's two, this is going to be three, and this is going to be four.", 'start': 5115.306, 'duration': 2.422}], 'summary': 'Making images responsive at 100% eliminated the horizontal scroll bar, addressing the scroll issue.', 'duration': 25.931, 'max_score': 5091.797, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI5091797.jpg'}], 'start': 4604.759, 'title': 'Css navigation menu styling', 'summary': 'Discusses styling the navigation menu using css by setting position, width, and background, and adjusting the subhead class for font size, resulting in a visually appealing and functional layout. it also covers css styling for mobile navigation, including setting up an unordered list, styling links, creating a close button, and making images responsive, with specific details on properties and values used in the process.', 'chapters': [{'end': 4718.801, 'start': 4604.759, 'title': 'Styling navigation menu and subhead', 'summary': 'Discusses styling the navigation menu using css by setting position, width, and background, and adjusting the subhead class for font size, resulting in a more visually appealing and functional layout.', 'duration': 114.042, 'highlights': ['The chapter discusses styling the navigation menu using CSS by setting position, width, and background, and adjusting the subhead class for font size, resulting in a more visually appealing and functional layout.', "The navigation menu is positioned using 'position: fixed' and set to slide in from the right with 'right: 0' and 'top: 0', ensuring it stays in place even when scrolling on mobile devices.", 'The width of the navigation menu is set to 50% to provide enough space for navigation, and a z-index of 2 is applied to ensure it sits on top of other elements, enhancing its visibility and usability.', 'The subhead class is adjusted to a font size of 1.4 rem units, improving its visual prominence within the layout.']}, {'end': 5131.399, 'start': 4718.841, 'title': 'Css styling and mobile navigation tutorial', 'summary': 'Covers css styling for mobile navigation, including setting up an unordered list, styling links, creating a close button, and making images responsive, with specific details on properties and values used in the process.', 'duration': 412.558, 'highlights': ['Explain the process for setting up an unordered list and removing default styling, including list item padding and top margin. 999, UL, list style type none, default padding removal, top margin of 8 M units', 'Detail the styling of link elements within the unordered list, including setting color, padding, and display block for hover effect. A element, color black, padding values, display block, hover effect', 'Demonstrate the process of adding a close button using an SVG icon and positioning it within the HTML structure. Adding close button, using SVG icon, positioning with float, margin, and width values', 'Explain the method for making images responsive by setting them to 100% width, eliminating horizontal scroll issues. Making images responsive, 100% width, eliminating horizontal scroll issues', 'Introduce the concept of using transform and transition properties to hide and animate the navigation element, preparing for future JavaScript functionality. Using transform to hide navigation, planning for JavaScript animation']}], 'duration': 526.64, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI4604759.jpg', 'highlights': ["The navigation menu is positioned using 'position: fixed' and set to slide in from the right with 'right: 0' and 'top: 0', ensuring it stays in place even when scrolling on mobile devices.", 'The width of the navigation menu is set to 50% to provide enough space for navigation, and a z-index of 2 is applied to ensure it sits on top of other elements, enhancing its visibility and usability.', 'The chapter discusses styling the navigation menu using CSS by setting position, width, and background, and adjusting the subhead class for font size, resulting in a more visually appealing and functional layout.', 'The subhead class is adjusted to a font size of 1.4 rem units, improving its visual prominence within the layout.', 'Explain the process for setting up an unordered list and removing default styling, including list item padding and top margin.', 'Detail the styling of link elements within the unordered list, including setting color, padding, and display block for hover effect.', 'Demonstrate the process of adding a close button using an SVG icon and positioning it within the HTML structure.', 'Explain the method for making images responsive by setting them to 100% width, eliminating horizontal scroll issues.', 'Introduce the concept of using transform and transition properties to hide and animate the navigation element, preparing for future JavaScript functionality.']}, {'end': 5920.579, 'segs': [{'end': 5159.598, 'src': 'embed', 'start': 5131.919, 'weight': 6, 'content': [{'end': 5140.256, 'text': 'If we change this to object fit hyphen cover and also give it an explicit height of like 11 M units, Guess what?', 'start': 5131.919, 'duration': 8.337}, {'end': 5143.639, 'text': 'It changes the images.', 'start': 5141.016, 'duration': 2.623}, {'end': 5144.681, 'text': 'this object fit cover.', 'start': 5143.639, 'duration': 1.042}, {'end': 5152.71, 'text': 'For instance, if I remove object fit cover, it kind of distorts them, right? If we add that, it keeps them there.', 'start': 5144.721, 'duration': 7.989}, {'end': 5153.871, 'text': 'Very, very cool.', 'start': 5153.11, 'duration': 0.761}, {'end': 5157.595, 'text': 'Next up is our titles, which is a class of title.', 'start': 5154.552, 'duration': 3.043}, {'end': 5159.598, 'text': 'Font weight is going to be bold.', 'start': 5158.116, 'duration': 1.482}], 'summary': 'Changing object fit to cover and setting explicit height improves image display. titles are styled with bold font weight.', 'duration': 27.679, 'max_score': 5131.919, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI5131919.jpg'}, {'end': 5253.241, 'src': 'embed', 'start': 5207.767, 'weight': 0, 'content': [{'end': 5214.189, 'text': "That's why we have media queries or responsive design.", 'start': 5207.767, 'duration': 6.422}, {'end': 5225.768, 'text': 'So now what we do is we ask ourselves, at what point should we start to readjust this layout so that it looks good on a tablet or something like that.', 'start': 5214.449, 'duration': 11.319}, {'end': 5233.513, 'text': "So many times, if you're a front-end developer, a UI designer will have thought of this already or a UI UX designer.", 'start': 5226.709, 'duration': 6.804}, {'end': 5242.258, 'text': 'I mean, they might provide you with a prototype to say, hey, this is what this looks like here on a tablet, code it for us to make it work.', 'start': 5234.073, 'duration': 8.185}, {'end': 5244.019, 'text': "Here's what it looks like on desktop.", 'start': 5242.718, 'duration': 1.301}, {'end': 5249.62, 'text': "So the way we start to adjust this is through what's called media queries.", 'start': 5244.719, 'duration': 4.901}, {'end': 5251.941, 'text': "Here's what a media query looks like.", 'start': 5250.28, 'duration': 1.661}, {'end': 5253.241, 'text': 'Control B to get rid of that.', 'start': 5252.101, 'duration': 1.14}], 'summary': 'Use media queries to adjust layout for different devices and screen sizes.', 'duration': 45.474, 'max_score': 5207.767, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI5207767.jpg'}, {'end': 5311.834, 'src': 'embed', 'start': 5283.648, 'weight': 2, 'content': [{'end': 5285.649, 'text': 'so at minimum width, all right.', 'start': 5283.648, 'duration': 2.001}, {'end': 5291.791, 'text': 'so anything underneath that which is like this stuff over here, you know, will get counted all right.', 'start': 5285.649, 'duration': 6.142}, {'end': 5297.953, 'text': "so if you were to do desktop first, you'd be changing this to max width, but i like min width better.", 'start': 5291.791, 'duration': 6.162}, {'end': 5299.914, 'text': 'so do many other people all right.', 'start': 5297.953, 'duration': 1.961}, {'end': 5303.594, 'text': 'so At how do you know what is 600 pixels though?', 'start': 5299.914, 'duration': 3.68}, {'end': 5304.275, 'text': '680 pixels.', 'start': 5303.614, 'duration': 0.661}, {'end': 5305.716, 'text': "It's like.", 'start': 5304.315, 'duration': 1.401}, {'end': 5306.177, 'text': 'is it here??', 'start': 5305.716, 'duration': 0.461}, {'end': 5306.717, 'text': 'Is it there??', 'start': 5306.197, 'duration': 0.52}, {'end': 5311.834, 'text': 'Well, if you use your dev tools, hit print screen by action.', 'start': 5306.957, 'duration': 4.877}], 'summary': 'Discussion about using a minimum width of 600 pixels and dev tools for web design.', 'duration': 28.186, 'max_score': 5283.648, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI5283648.jpg'}, {'end': 5548.336, 'src': 'embed', 'start': 5517.653, 'weight': 3, 'content': [{'end': 5524.035, 'text': 'Remember, is position fixed? We are gonna change that and override that by putting position unset.', 'start': 5517.653, 'duration': 6.382}, {'end': 5527.635, 'text': "So now we're getting somewhere slightly.", 'start': 5525.195, 'duration': 2.44}, {'end': 5530.056, 'text': "We're going to put display block.", 'start': 5528.316, 'duration': 1.74}, {'end': 5533.67, 'text': "We're going to put width auto.", 'start': 5531.769, 'duration': 1.901}, {'end': 5537.271, 'text': "We're going to put height auto.", 'start': 5533.69, 'duration': 3.581}, {'end': 5540.312, 'text': "And we're going to put background none.", 'start': 5537.291, 'duration': 3.021}, {'end': 5542.613, 'text': "We're getting close.", 'start': 5541.673, 'duration': 0.94}, {'end': 5545.254, 'text': "As you can see, we've overwritten a lot of stuff here.", 'start': 5542.653, 'duration': 2.601}, {'end': 5548.336, 'text': 'Now we are close.', 'start': 5546.875, 'duration': 1.461}], 'summary': 'Overwrote position, set display block, width and height to auto, and background to none.', 'duration': 30.683, 'max_score': 5517.653, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI5517653.jpg'}, {'end': 5691.164, 'src': 'embed', 'start': 5636.123, 'weight': 4, 'content': [{'end': 5639.044, 'text': "We don't want hovers like that because we can barely see the type when you hover.", 'start': 5636.123, 'duration': 2.921}, {'end': 5640.784, 'text': 'So, and hover.', 'start': 5639.564, 'duration': 1.22}, {'end': 5644.385, 'text': 'And we simply say background none.', 'start': 5641.984, 'duration': 2.401}, {'end': 5647.868, 'text': 'And maybe we want a different type of hover.', 'start': 5645.566, 'duration': 2.302}, {'end': 5651.751, 'text': "So we'll do text decoration, underline, which brings back the links.", 'start': 5647.908, 'duration': 3.843}, {'end': 5654.093, 'text': 'So when we underline it, there we go.', 'start': 5652.152, 'duration': 1.941}, {'end': 5659.137, 'text': "We have a visual indicator that we're hovering over this particular element.", 'start': 5654.153, 'duration': 4.984}, {'end': 5663.301, 'text': 'All right, I know that was a lot just for that navigation.', 'start': 5659.738, 'duration': 3.563}, {'end': 5674.657, 'text': "So weird things are happening now, but don't worry, we'll fix that once we get this working and we start to work through things.", 'start': 5665.973, 'duration': 8.684}, {'end': 5675.897, 'text': 'All right.', 'start': 5675.537, 'duration': 0.36}, {'end': 5678.658, 'text': 'so next up, what about the hero image?', 'start': 5675.897, 'duration': 2.761}, {'end': 5689.063, 'text': "If we refer back to our design, you'll see we have this desktop version showing up where it's no longer fully consuming the layout.", 'start': 5679.039, 'duration': 10.024}, {'end': 5691.164, 'text': "It's basically halfway.", 'start': 5689.583, 'duration': 1.581}], 'summary': 'Adjusting hover effects and fixing layout for better visibility and functionality.', 'duration': 55.041, 'max_score': 5636.123, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI5636123.jpg'}], 'start': 5131.919, 'title': 'Responsive design and layout transformation', 'summary': 'Covers the use of media queries for responsive designs, focusing on layout and white space at a minimum width of 680 pixels, and transforming layout through media queries with a key breakpoint at 920 pixels.', 'chapters': [{'end': 5384.485, 'start': 5131.919, 'title': 'Responsive design and media queries', 'summary': 'Discusses the use of media queries to create responsive designs, with a specific focus on adjusting layout and white space at a minimum width of 680 pixels, to ensure optimal display on different devices.', 'duration': 252.566, 'highlights': ['The use of media queries to create responsive designs Discusses the importance of using media queries to adjust layout and design for different devices, ensuring optimal user experience.', 'Adjusting layout and white space at a minimum width of 680 pixels Emphasizes the specific use of a minimum width of 680 pixels to redefine layout and increase white space for improved display on larger devices.', "Impact of object fit and explicit height on images Mentions the effect of using 'object fit cover' and setting an explicit height of 11 M units to maintain image integrity and prevent distortion."]}, {'end': 5920.579, 'start': 5384.485, 'title': 'Layout transformation and styling', 'summary': 'Focuses on transforming the layout through media queries and overriding properties to achieve a specific design, such as hiding elements, adjusting navigation, and styling components, with a key breakpoint at 920 pixels.', 'duration': 536.094, 'highlights': ['The chapter emphasizes the use of media queries to make specific changes, such as hiding elements and adjusting navigation, with a key breakpoint at 920 pixels.', 'The process involves overriding properties like display, width, height, and background to achieve the desired layout transformation and styling.', 'Specific styling adjustments include setting color, padding, font size, and text decoration for improved visual indicators and hover effects.', 'The detailed steps involve adjusting individual elements such as the hero image, logo, and down arrow to align with the desired design.', 'The challenges and problem-solving process are highlighted, emphasizing the iterative nature of web development and the need to troubleshoot issues.']}], 'duration': 788.66, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI5131919.jpg', 'highlights': ['The use of media queries to create responsive designs Discusses the importance of using media queries to adjust layout and design for different devices, ensuring optimal user experience.', 'The chapter emphasizes the use of media queries to make specific changes, such as hiding elements and adjusting navigation, with a key breakpoint at 920 pixels.', 'Adjusting layout and white space at a minimum width of 680 pixels Emphasizes the specific use of a minimum width of 680 pixels to redefine layout and increase white space for improved display on larger devices.', 'The process involves overriding properties like display, width, height, and background to achieve the desired layout transformation and styling.', 'Specific styling adjustments include setting color, padding, font size, and text decoration for improved visual indicators and hover effects.', 'The challenges and problem-solving process are highlighted, emphasizing the iterative nature of web development and the need to troubleshoot issues.', "Impact of object fit and explicit height on images Mentions the effect of using 'object fit cover' and setting an explicit height of 11 M units to maintain image integrity and prevent distortion.", 'The detailed steps involve adjusting individual elements such as the hero image, logo, and down arrow to align with the desired design.']}, {'end': 7097.377, 'segs': [{'end': 6124.18, 'src': 'heatmap', 'start': 6053.897, 'weight': 0.738, 'content': [{'end': 6058.879, 'text': "So now they're all right aligned, and this is fine, you could leave it like this, but we're gonna do this flip floppy reverse thing.", 'start': 6053.897, 'duration': 4.982}, {'end': 6068.644, 'text': "The way we do that is we're gonna come outside of here, feature left, which is in relation to feature left here.", 'start': 6059.62, 'duration': 9.024}, {'end': 6079.36, 'text': 'And what we say is grid template areas I know this is getting confusing, but this will all come to you eventually if you stick with it enough.', 'start': 6068.664, 'duration': 10.696}, {'end': 6081.361, 'text': "We're gonna put left, right.", 'start': 6079.92, 'duration': 1.441}, {'end': 6085.164, 'text': "So we're basically naming our columns within the display grid.", 'start': 6082.282, 'duration': 2.882}, {'end': 6091.528, 'text': 'Then we take our image and we say grid area is left.', 'start': 6086.184, 'duration': 5.344}, {'end': 6093.209, 'text': 'All right.', 'start': 6092.868, 'duration': 0.341}, {'end': 6095.85, 'text': "Now it's just reverse those.", 'start': 6094.369, 'duration': 1.481}, {'end': 6101.594, 'text': 'Now we also wanna left align this type right here.', 'start': 6098.512, 'duration': 3.082}, {'end': 6109.348, 'text': "So let's close this out and we're going to say the content inside of feature left.", 'start': 6102.782, 'duration': 6.566}, {'end': 6113.471, 'text': "That's what that means is going to be text align left.", 'start': 6110.629, 'duration': 2.842}, {'end': 6117.395, 'text': 'There we go.', 'start': 6116.874, 'duration': 0.521}, {'end': 6124.18, 'text': "And then we're also going to give that a specific width as well to make sure everything is evened up between all three columns.", 'start': 6118.075, 'duration': 6.105}], 'summary': 'Adjusting grid layout with left and right alignment, and specific column width for even distribution.', 'duration': 70.283, 'max_score': 6053.897, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI6053897.jpg'}, {'end': 6117.395, 'src': 'embed', 'start': 6079.92, 'weight': 3, 'content': [{'end': 6081.361, 'text': "We're gonna put left, right.", 'start': 6079.92, 'duration': 1.441}, {'end': 6085.164, 'text': "So we're basically naming our columns within the display grid.", 'start': 6082.282, 'duration': 2.882}, {'end': 6091.528, 'text': 'Then we take our image and we say grid area is left.', 'start': 6086.184, 'duration': 5.344}, {'end': 6093.209, 'text': 'All right.', 'start': 6092.868, 'duration': 0.341}, {'end': 6095.85, 'text': "Now it's just reverse those.", 'start': 6094.369, 'duration': 1.481}, {'end': 6101.594, 'text': 'Now we also wanna left align this type right here.', 'start': 6098.512, 'duration': 3.082}, {'end': 6109.348, 'text': "So let's close this out and we're going to say the content inside of feature left.", 'start': 6102.782, 'duration': 6.566}, {'end': 6113.471, 'text': "That's what that means is going to be text align left.", 'start': 6110.629, 'duration': 2.842}, {'end': 6117.395, 'text': 'There we go.', 'start': 6116.874, 'duration': 0.521}], 'summary': 'Using css grid to align content left and right.', 'duration': 37.475, 'max_score': 6079.92, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI6079920.jpg'}, {'end': 6558.83, 'src': 'embed', 'start': 6526.884, 'weight': 2, 'content': [{'end': 6530.987, 'text': 'so if you change the duration stuff, it can go really fast or really slow.', 'start': 6526.884, 'duration': 4.103}, {'end': 6533.424, 'text': 'All right, very, very, very cool.', 'start': 6531.943, 'duration': 1.481}, {'end': 6541.37, 'text': 'All right, also, we also want to get our navigation working.', 'start': 6534.125, 'duration': 7.245}, {'end': 6548.896, 'text': "I believe, oh, before we get to that point, let's make this stuff fall in and like fade in.", 'start': 6543.512, 'duration': 5.384}, {'end': 6558.83, 'text': "All right, so what we'll do in order to do that is we're gonna create another animation called move arrow, not move arrow, I'm sorry.", 'start': 6548.916, 'duration': 9.914}], 'summary': 'Discussing options for adjusting duration and implementing animations in navigation.', 'duration': 31.946, 'max_score': 6526.884, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI6526884.jpg'}, {'end': 6682.807, 'src': 'embed', 'start': 6653.079, 'weight': 4, 'content': [{'end': 6655.06, 'text': 'The final thing we need to do is some JavaScript.', 'start': 6653.079, 'duration': 1.981}, {'end': 6658.351, 'text': "and we'll do a little bit of animation to get that thing to slide in.", 'start': 6656.01, 'duration': 2.341}, {'end': 6659.812, 'text': 'So when we click this, nothing happens.', 'start': 6658.492, 'duration': 1.32}, {'end': 6663.955, 'text': 'So this is how we create interactivity is with JavaScript.', 'start': 6660.373, 'duration': 3.582}, {'end': 6667.397, 'text': "Now this isn't a JavaScript crash course, but we still have to write some of it.", 'start': 6663.995, 'duration': 3.402}, {'end': 6670.059, 'text': 'So at the very just.', 'start': 6667.977, 'duration': 2.082}, {'end': 6676.022, 'text': "typically, if you're gonna do what's called inline JavaScript, which means writing JavaScript inside of your HTML file, you don't have to.", 'start': 6670.059, 'duration': 5.963}, {'end': 6678.764, 'text': 'you can also link an extra file called a.', 'start': 6676.022, 'duration': 2.742}, {'end': 6681.006, 'text': "js file, but we're gonna do it here.", 'start': 6678.764, 'duration': 2.242}, {'end': 6682.807, 'text': "So we're gonna type in script in there.", 'start': 6681.086, 'duration': 1.721}], 'summary': 'Demonstrating the use of javascript for interactivity and animation in a web page.', 'duration': 29.728, 'max_score': 6653.079, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI6653079.jpg'}, {'end': 6854.2, 'src': 'embed', 'start': 6813.711, 'weight': 1, 'content': [{'end': 6818.753, 'text': "We're going to say classlist.add.", 'start': 6813.711, 'duration': 5.042}, {'end': 6822.996, 'text': "We're adding a CSS class to it when it's clicked.", 'start': 6819.194, 'duration': 3.802}, {'end': 6828.239, 'text': 'We add a class that we have not yet created called open-nav.', 'start': 6824.096, 'duration': 4.143}, {'end': 6831.512, 'text': 'all right.', 'start': 6830.071, 'duration': 1.441}, {'end': 6833.552, 'text': "so let's create that now.", 'start': 6831.512, 'duration': 2.04}, {'end': 6850.999, 'text': "if I show you real quickly with the dev tools and we get to a point where we're here and I hit f12 and I click on this and we view this let's let's find our nav element.", 'start': 6833.552, 'duration': 17.447}, {'end': 6854.2, 'text': "it's somewhere in here.", 'start': 6850.999, 'duration': 3.201}], 'summary': "Adding css class 'open-nav' to 'classlist' when clicked", 'duration': 40.489, 'max_score': 6813.711, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI6813711.jpg'}, {'end': 7060.738, 'src': 'embed', 'start': 7032.303, 'weight': 0, 'content': [{'end': 7034.984, 'text': "If I pull this up, it's gonna go in a little bit too close here.", 'start': 7032.303, 'duration': 2.681}, {'end': 7037.746, 'text': 'So what you would do, you could use margin to push this down.', 'start': 7035.084, 'duration': 2.662}, {'end': 7042.408, 'text': "In order to get that a little bit better aligned up, I'll let you try to do that.", 'start': 7039.166, 'duration': 3.242}, {'end': 7046.97, 'text': 'But that is essentially front end development.', 'start': 7042.728, 'duration': 4.242}, {'end': 7054.274, 'text': 'Something a front end developer would do to take an existing design and make it a working reality in the browser.', 'start': 7047.07, 'duration': 7.204}, {'end': 7056.796, 'text': 'All right, everybody, hopefully you enjoyed that.', 'start': 7054.634, 'duration': 2.162}, {'end': 7060.738, 'text': "And I guarantee you, if you're brand new to this, you don't understand everything.", 'start': 7057.176, 'duration': 3.562}], 'summary': 'Front end developer aligns design using margin to create working reality in browser.', 'duration': 28.435, 'max_score': 7032.303, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI7032303.jpg'}], 'start': 5920.579, 'title': 'Front end development basics', 'summary': 'Discusses creating variables and event listeners in javascript to add and remove css classes, transforming an existing design into a working reality in the browser.', 'chapters': [{'end': 6253.867, 'start': 5920.579, 'title': 'Styling web layout with css grid', 'summary': 'Focuses on styling a web layout using css grid, including setting grid columns, image and content widths, aligning elements, creating media queries, and adjusting whitespace, with specific measurements and properties mentioned.', 'duration': 333.288, 'highlights': ['The chapter discusses setting grid columns, image and content widths, and aligning elements using CSS grid, with specific measurements such as 25 M units and properties like grid template columns and justify self left.', 'The speaker demonstrates creating a media query for a 1200-pixel breakpoint to confine the design and center it with a defined width of 1200 pixels and a margin of zero auto.', 'The chapter explains using the grid template areas property to name columns within the display grid and the grid area property to position the image and align text within the grid, facilitating the creation of a visually appealing web layout.']}, {'end': 6690.071, 'start': 6253.887, 'title': 'Css animation basics', 'summary': 'Explains how to apply animations to design elements using css, demonstrating the creation of animations for image and arrow elements, including properties such as animation duration and easing, with the final addition of interactivity using javascript.', 'duration': 436.184, 'highlights': ['Creating keyframe animations for image and arrow elements The chapter demonstrates the creation of keyframe animations for image and arrow elements using CSS, including properties such as animation duration and easing.', 'Adding interactivity using JavaScript The chapter discusses the addition of interactivity using JavaScript to create animation effects and demonstrates how to write inline JavaScript inside an HTML file.', 'Applying CSS animations to design elements The chapter explains the process of applying CSS animations to design elements and showcases the use of properties like animation duration and easing for creating animation effects.']}, {'end': 7097.377, 'start': 6690.132, 'title': 'Front end development basics', 'summary': 'Discusses creating variables and event listeners in javascript to add and remove css classes, demonstrating how a front end developer can transform an existing design into a working reality in the browser.', 'duration': 407.245, 'highlights': ["Creating Variables and Event Listeners The speaker demonstrates creating variables and event listeners in JavaScript to add and remove CSS classes, including examples like adding 'open-nav' class on click and removing it on close.", 'Transforming Design into Reality The chapter emphasizes how front end developers can transform an existing design into a working reality in the browser using JavaScript and CSS, providing examples of adjusting SVG and recommending margin usage for better alignment.', 'Promotion of Interactive CSS and UI/UX Design Courses The speaker promotes interactive CSS and UI/UX design courses on designcourse.com, encouraging the audience to visit the website and consider joining, with potential discounts available.']}], 'duration': 1176.798, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXLjWRteuWI/pics/gXLjWRteuWI5920579.jpg', 'highlights': ['The chapter emphasizes how front end developers can transform an existing design into a working reality in the browser using JavaScript and CSS, providing examples of adjusting SVG and recommending margin usage for better alignment.', "The speaker demonstrates creating variables and event listeners in JavaScript to add and remove CSS classes, including examples like adding 'open-nav' class on click and removing it on close.", 'Creating keyframe animations for image and arrow elements The chapter demonstrates the creation of keyframe animations for image and arrow elements using CSS, including properties such as animation duration and easing.', 'The chapter explains using the grid template areas property to name columns within the display grid and the grid area property to position the image and align text within the grid, facilitating the creation of a visually appealing web layout.', 'Adding interactivity using JavaScript The chapter discusses the addition of interactivity using JavaScript to create animation effects and demonstrates how to write inline JavaScript inside an HTML file.']}], 'highlights': ['The crash course focuses on implementing a design mock-up in HTML and CSS for desktop, tablets, and mobile, targeting beginners and aspiring front-end developers.', 'The importance of starting with an HTML structure based on a design mockup is emphasized. The significance of beginning HTML development based on a professional design mockup to ensure a polished and comprehensive structure is highlighted.', 'The benefits and process of using Sass for CSS are explained. The benefits of using Sass for efficient CSS writing, including the nesting feature that cannot be achieved with regular CSS, are outlined.', 'Using Emmet for HTML boilerplate code. Emmet is a tool in Visual Studio Code that allows for faster writing of HTML boilerplate code, reducing the need to write it from scratch.', 'The importance of alt attributes for accessibility Alt attributes are crucial for providing descriptions for visually impaired users and enabling screen readers, ensuring accessibility and usability for all website visitors.', 'Creating mobile-first CSS layout, starting with initial CSS rules for mobile devices, then incorporating media queries for desktop and tablet views.', 'The chapter emphasizes using REM units for font sizes and M units for margin and padding for better control and consistency in styling.', "The navigation menu is positioned using 'position: fixed' and set to slide in from the right with 'right: 0' and 'top: 0', ensuring it stays in place even when scrolling on mobile devices.", 'The use of media queries to create responsive designs Discusses the importance of using media queries to adjust layout and design for different devices, ensuring optimal user experience.', 'The chapter emphasizes how front end developers can transform an existing design into a working reality in the browser using JavaScript and CSS, providing examples of adjusting SVG and recommending margin usage for better alignment.']}