title
The 2019 Frontend Developer Crash Course - HTML & CSS Tutorial for Beginners

description
https://skl.sh/designcourse19 - First 500 people to sign up will get their first 2 months free! -- Welcome to this lengthy crash course to Frontend Development here in 2019. This course assumes you have never touched HTML, CSS or JavaScript. Initially, we're going to take 20 minutes to discuss the conceptual elements as it pertains to frontend development, including understanding the terminology and structure of HTML, CSS and some JavaScript. Then, we spend the rest of the course taking the UI design mockup that we created in the UI Design Crash Course (linked below) and make it a reality in the browser by writing HTML and CSS from scratch! By the end of the course, you will: 1. Understand the basics of HTML 2. Understand the basics of CSS 3. Write HTML & CSS to make a static mockup work in the browser. 4. Understand Responsive Web Design 5. ...and much more. If you want to start from the VERY beginning of this entire project, first watch these 2 videos where we design the UI using Adobe XD: Step 1. The 2019 UI Design Crash Course for Beginners https://www.youtube.com/watch?v=_Hp_dI0DzY4 Step 2. Responsive Web Design Tutorial in Adobe XD https://www.youtube.com/watch?v=Ejbu4ZyCCrs Step 3: Watch this video! IMAGE ASSETS are located here and the final project: https://s3.amazonaws.com/coursetro/frontend-dev-project.zip Enjoy the video? Subscribe up, leave a like and a comment! - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS! My site: 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 Coursetro.com. Come to my discord server or add me on social media and say Hi!

detail
{'title': 'The 2019 Frontend Developer Crash Course - HTML & CSS Tutorial for Beginners', 'heatmap': [{'end': 582.604, 'start': 480.385, 'weight': 1}, {'end': 4628.059, 'start': 4524.919, 'weight': 0.851}], 'summary': 'Covers front-end development basics, html, css, responsive design, and provides a crash course on implementing ui design for beginners. it also includes setting up a development environment, creating web elements, and optimizing css styling techniques for different screen sizes.', 'chapters': [{'end': 211.98, 'segs': [{'end': 219.702, 'src': 'embed', 'start': 190.062, 'weight': 0, 'content': [{'end': 193.305, 'text': 'It has a lot of plugins and a huge community, a lot of support.', 'start': 190.062, 'duration': 3.243}, {'end': 196.127, 'text': 'I used Sublime Text before this.', 'start': 194.285, 'duration': 1.842}, {'end': 202.612, 'text': "There's other ones like Atom, Notepad++, there's Dreamweaver.", 'start': 196.787, 'duration': 5.825}, {'end': 208.457, 'text': "There's so many options to choose from, but a lot of people these days are using Visual Studio Code, so you can use that as well.", 'start': 202.652, 'duration': 5.805}, {'end': 211.98, 'text': "That's what I'm going to be using once we get to the project portion of this course.", 'start': 208.497, 'duration': 3.483}, {'end': 215.521, 'text': "So let's talk about the very, very basics.", 'start': 212.72, 'duration': 2.801}, {'end': 219.702, 'text': "And again, I'm aiming this at absolute beginners.", 'start': 216.601, 'duration': 3.101}], 'summary': 'Visual studio code is popular with a large community and many plugins; favored by beginners.', 'duration': 29.64, 'max_score': 190.062, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw190062.jpg'}], 'start': 0.461, 'title': 'Front-end development', 'summary': 'Introduces front-end development and promotes skillshare.com offering 25,000 classes in coding, design, and business, providing the first two months free for the first 500 subscribers. it also includes a crash course covering html, css, and javascript, with a focus on implementing ui design for beginners and recommends visual studio code as the code editor of choice.', 'chapters': [{'end': 36.572, 'start': 0.461, 'title': 'Front-end development journey', 'summary': 'Introduces front-end development and promotes skillshare.com, which offers 25,000 classes in coding, design, and business, and provides the first two months free for the first 500 subscribers.', 'duration': 36.111, 'highlights': ['Skillshare.com offers 25,000 different classes in coding, design, and business, helping learners to keep learning and thriving.', "Skillshare's subscription costs 10 bucks a month and provides the first two months free for the first 500 subscribers."]}, {'end': 211.98, 'start': 37.033, 'title': 'Front end dev crash course', 'summary': 'Introduces a free crash course in front end development, covering html, css, and javascript, with a focus on implementing ui design for beginners, and emphasizes the importance of understanding the conceptual elements of front end development. visual studio code is recommended as the code editor of choice.', 'duration': 174.947, 'highlights': ['The importance of understanding the conceptual elements of HTML, CSS, and front end development is emphasized, targeting absolute beginners. (20 minutes of slides dedicated to this concept)', 'The chapter recommends Visual Studio Code as the preferred code editor for the course, citing its free availability, extensive plugin support, and a large community. (Relevant for those looking to start coding)', 'The chapter introduces a free crash course in front end development, focusing on implementing UI design using HTML, CSS, and JavaScript, and targeting beginners without prior experience. (Outlining the content and target audience of the course)', 'The role of a front-end developer in implementing UI design using web technologies such as HTML, CSS, and JavaScript is explained, with an emphasis on the process of making mock-ups a reality in the browser. (Outlining the responsibilities and tasks of a front-end developer)', 'The chapter discusses the combination of UI designer and front-end developer roles, advocating the benefits of understanding HTML and CSS for UI designers and vice versa. (Explaining the potential advantages for freelancers and those in combined roles)']}], 'duration': 211.519, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw461.jpg', 'highlights': ['Skillshare.com offers 25,000 classes in coding, design, and business, providing the first two months free for the first 500 subscribers.', "Skillshare's subscription costs 10 bucks a month and provides the first two months free for the first 500 subscribers.", 'The chapter introduces a crash course in front-end development, focusing on implementing UI design using HTML, CSS, and JavaScript for beginners.', 'The importance of understanding HTML, CSS, and front-end development is emphasized, targeting absolute beginners.', 'The chapter recommends Visual Studio Code as the preferred code editor for the course, citing its free availability, extensive plugin support, and a large community.', 'The role of a front-end developer in implementing UI design using web technologies such as HTML, CSS, and JavaScript is explained, with an emphasis on making mock-ups a reality in the browser.', 'The chapter discusses the combination of UI designer and front-end developer roles, advocating the benefits of understanding HTML and CSS for UI designers and vice versa.']}, {'end': 1227.711, 'segs': [{'end': 321.146, 'src': 'embed', 'start': 281.71, 'weight': 4, 'content': [{'end': 288.432, 'text': "So let's take a look at what some of these other HTML elements that you find within the head element look like.", 'start': 281.71, 'duration': 6.722}, {'end': 290.933, 'text': 'So you have one I call the title.', 'start': 288.872, 'duration': 2.061}, {'end': 298.317, 'text': "So for instance, when you click on a web page and you see the document in the browser title right there, that's where it's coming from.", 'start': 291.113, 'duration': 7.204}, {'end': 300.839, 'text': "It's in between those title tags right there.", 'start': 298.338, 'duration': 2.501}, {'end': 308.003, 'text': "Another common one is to link up your CSS file that's associated with that HTML document.", 'start': 301.659, 'duration': 6.344}, {'end': 309.284, 'text': "And we'll get to CSS in a bit.", 'start': 308.023, 'duration': 1.261}, {'end': 313.465, 'text': "And then there's also other meta tags, like meta description like,", 'start': 309.764, 'duration': 3.701}, {'end': 321.146, 'text': "which provides a description to the search engines like Google when they're listing out your results, and also meta keywords and other ones.", 'start': 313.465, 'duration': 7.681}], 'summary': 'Html head element contains title, css link, meta tags for description and keywords.', 'duration': 39.436, 'max_score': 281.71, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw281710.jpg'}, {'end': 582.604, 'src': 'heatmap', 'start': 472.282, 'weight': 0, 'content': [{'end': 479.085, 'text': 'So this is linking to an image and then the alt tag is required and a required attribute on the image element.', 'start': 472.282, 'duration': 6.803}, {'end': 486.887, 'text': "And it just provides information about the graphic that's being shown.", 'start': 480.385, 'duration': 6.502}, {'end': 493.11, 'text': "And this doesn't get shown in the browser really unless you hover over the graphic and it'll provide you with information.", 'start': 487.067, 'duration': 6.043}, {'end': 496.811, 'text': "But it's also even more useful for people, for instance, who are using screen readers.", 'start': 493.21, 'duration': 3.601}, {'end': 498.44, 'text': 'All right.', 'start': 498.16, 'duration': 0.28}, {'end': 500.681, 'text': 'That showed up after the fact.', 'start': 499.3, 'duration': 1.381}, {'end': 504.642, 'text': "Okay So let's talk about class and ID attributes.", 'start': 500.761, 'duration': 3.881}, {'end': 508.422, 'text': "So here's an example of what these look like.", 'start': 505.162, 'duration': 3.26}, {'end': 514.504, 'text': 'Again, it follows the same format as all the other attributes, but these in particular I thought I would mention,', 'start': 508.462, 'duration': 6.042}, {'end': 521.246, 'text': "because there's a lot of different type of attributes, but you see these ones a lot and they can be basically placed on any HTML element.", 'start': 514.504, 'duration': 6.742}, {'end': 522.926, 'text': "In this case, it's a paragraph tag.", 'start': 521.346, 'duration': 1.58}, {'end': 529.312, 'text': 'And the class attribute is most commonly used to point to a style in CSS.', 'start': 523.686, 'duration': 5.626}, {'end': 536.738, 'text': "So it will allow the CSS to use it as what's called a selector, which we'll get to later on, to provide style to it.", 'start': 529.352, 'duration': 7.386}, {'end': 542.424, 'text': 'And then the ID attribute is most commonly used for JavaScript.', 'start': 537.539, 'duration': 4.885}, {'end': 544.886, 'text': "And we'll get to that a little bit later as well.", 'start': 543.204, 'duration': 1.682}, {'end': 557.26, 'text': "right and, by the way, both of these can be used in css, in javascript, so you can reference ids in css i as well, although it's not common anymore.", 'start': 546.596, 'duration': 10.664}, {'end': 559.101, 'text': "so let's talk about the div element.", 'start': 557.26, 'duration': 1.841}, {'end': 567.584, 'text': "so i, the div element, is normally used as a container for other elements, and again there's a lot of html elements that i'm not mentioning.", 'start': 559.101, 'duration': 8.483}, {'end': 572.646, 'text': 'but just as with the previous slide, i wanted to mention this because you see it very often in your html,', 'start': 567.584, 'duration': 5.062}, {'end': 582.604, 'text': "And so it's normally used for defining different layouts and different visual properties of the layout through CSS.", 'start': 573.166, 'duration': 9.438}], 'summary': 'Alt tag provides information for images; class and id attributes used for css and javascript; div element used as a container for layouts.', 'duration': 48.964, 'max_score': 472.282, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw472282.jpg'}, {'end': 879.247, 'src': 'embed', 'start': 844.764, 'weight': 2, 'content': [{'end': 849.108, 'text': 'In this case, we have two declarations, this right here and this right here.', 'start': 844.764, 'duration': 4.344}, {'end': 852.391, 'text': "And then in this rule sets case, it's only one declaration.", 'start': 849.208, 'duration': 3.183}, {'end': 856.814, 'text': 'So some rule sets can have like 20 different declarations.', 'start': 852.431, 'duration': 4.383}, {'end': 858.876, 'text': 'Then we have declarations.', 'start': 857.775, 'duration': 1.101}, {'end': 867.896, 'text': "uh, inside of the declaration it's two different parts you have the css property name followed by a colon,", 'start': 859.688, 'duration': 8.208}, {'end': 879.247, 'text': "and then you also have the css value associated with that property, and it's the value, and then you end the declaration with a semicolon.", 'start': 867.896, 'duration': 11.351}], 'summary': 'Some rule sets can have up to 20 declarations, each consisting of a property name, value, and ending with a semicolon.', 'duration': 34.483, 'max_score': 844.764, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw844764.jpg'}, {'end': 1075.871, 'src': 'embed', 'start': 1042.051, 'weight': 3, 'content': [{'end': 1045.555, 'text': "And it's always the function name opened up by parentheses.", 'start': 1042.051, 'duration': 3.504}, {'end': 1050.478, 'text': 'And then, depending on how many parameters they accept, you just separate those by.', 'start': 1046.035, 'duration': 4.443}, {'end': 1061.365, 'text': "So this would be suitable for a background color where you're using red, green, blue values along with an alpha value,", 'start': 1052.439, 'duration': 8.926}, {'end': 1064.127, 'text': 'which means you can make it transparent.', 'start': 1061.365, 'duration': 2.762}, {'end': 1066.249, 'text': 'You could also do math for properties.', 'start': 1064.487, 'duration': 1.762}, {'end': 1075.871, 'text': "If you're trying to make the margin, which is dealing with white space on a UI design, you can use the calc function and you can do division,", 'start': 1067.129, 'duration': 8.742}], 'summary': 'Css functions can accept multiple parameters, such as for background color and margin calculations.', 'duration': 33.82, 'max_score': 1042.051, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw1042050.jpg'}], 'start': 212.72, 'title': 'Html for beginners & responsive design', 'summary': 'Introduces html basics, covering its anatomy, elements, attributes, and the importance of semantic elements and validation. it also delves into css properties, media queries, and responsive design, providing beginners with a foundational understanding of web development.', 'chapters': [{'end': 662.943, 'start': 212.72, 'title': 'Html basics for absolute beginners', 'summary': 'Introduces html basics for absolute beginners, covering the definition, anatomy, and terminology of html, including its elements, attributes, and the importance of semantic elements and html validation.', 'duration': 450.223, 'highlights': ['HTML is a language for building web pages, defining different areas of a page using elements.', 'The head element provides metadata about the HTML document, including title, linking CSS files, meta tags, style, and script tags.', 'The body element defines the main content of the webpage, visible to users, while head section contains elements not visible on the screen.', 'Understanding the difference between closing elements and singletons, and the use of HTML attributes and their importance, like the alt tag for screen readers and HTML validation using tools such as validator.w3.org.']}, {'end': 1227.711, 'start': 662.943, 'title': 'Html, css basics & responsive design', 'summary': 'Covers html elements, css properties, and units, including media queries for responsive design, with a focus on providing beginners with a foundational understanding of web development.', 'duration': 564.768, 'highlights': ['HTML elements and attributes The chapter explains the purpose of various HTML elements and attributes, and encourages the use of Google for reference, providing beginners with a practical approach to learning.', 'CSS selectors and declarations Detailed explanation of CSS selectors and declarations, empowering beginners to understand and use CSS effectively in styling web elements.', 'CSS units: Absolute and Relative The chapter discusses absolute and relative CSS units, emphasizing their importance in defining lengths and responsiveness in web layouts.', 'Media queries for responsive design In-depth coverage of media queries for responsive design, enabling beginners to understand and implement adaptive web layouts for varying screen sizes.', 'CSS functions, animations, and transitions Introduction to CSS functions, animations, and transitions, providing beginners with insights into enhancing web elements through dynamic styling and effects.']}], 'duration': 1014.991, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw212720.jpg', 'highlights': ['HTML is a language for building web pages, defining different areas of a page using elements.', 'The head element provides metadata about the HTML document, including title, linking CSS files, meta tags, style, and script tags.', 'Understanding the difference between closing elements and singletons, and the use of HTML attributes and their importance, like the alt tag for screen readers and HTML validation using tools such as validator.w3.org.', 'CSS selectors and declarations Detailed explanation of CSS selectors and declarations, empowering beginners to understand and use CSS effectively in styling web elements.', 'Media queries for responsive design In-depth coverage of media queries for responsive design, enabling beginners to understand and implement adaptive web layouts for varying screen sizes.', 'CSS functions, animations, and transitions Introduction to CSS functions, animations, and transitions, providing beginners with insights into enhancing web elements through dynamic styling and effects.']}, {'end': 2007.493, 'segs': [{'end': 1633.29, 'src': 'embed', 'start': 1588.092, 'weight': 0, 'content': [{'end': 1591.977, 'text': 'It shows my index.html with a number three by the side.', 'start': 1588.092, 'duration': 3.885}, {'end': 1600.605, 'text': "But if I go to view and I go to my problems, we could see I have this validator extension that I've installed already.", 'start': 1591.997, 'duration': 8.608}, {'end': 1602.687, 'text': "So if you don't see this, that's the reason.", 'start': 1600.686, 'duration': 2.001}, {'end': 1611.713, 'text': "There's an extension that you can install for your validator for these things to show.", 'start': 1603.027, 'duration': 8.686}, {'end': 1618.637, 'text': "And it's already giving me issues saying certain things aren't in here that need to be in here in terms of the HTML document itself.", 'start': 1611.993, 'duration': 6.644}, {'end': 1625.382, 'text': 'So if you want access to install this plugin, you just click over here, the extensions, and you type in W3C.', 'start': 1619.098, 'duration': 6.284}, {'end': 1629.846, 'text': 'And then the one I have installed is right here.', 'start': 1627.123, 'duration': 2.723}, {'end': 1633.29, 'text': "You can see it doesn't have the install because I already have it installed.", 'start': 1629.866, 'duration': 3.424}], 'summary': 'The speaker discusses issues with a w3c validator extension for html, guiding on how to install it and highlighting specific problems with the html document.', 'duration': 45.198, 'max_score': 1588.092, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw1588092.jpg'}, {'end': 1783.382, 'src': 'embed', 'start': 1753.1, 'weight': 1, 'content': [{'end': 1754.161, 'text': "Don't even worry about them.", 'start': 1753.1, 'duration': 1.061}, {'end': 1756.221, 'text': "Don't let them confuse you right now.", 'start': 1754.301, 'duration': 1.92}, {'end': 1757.342, 'text': 'Just forget about them.', 'start': 1756.301, 'duration': 1.041}, {'end': 1761.865, 'text': 'The ones that you can really worry about at this point in time are the title.', 'start': 1758.323, 'duration': 3.542}, {'end': 1763.727, 'text': 'Notice it just says document.', 'start': 1762.366, 'duration': 1.361}, {'end': 1770.552, 'text': "And then also we're going to link up our CSS document, which doesn't yet exist, but we're going to link it up right here.", 'start': 1764.427, 'duration': 6.125}, {'end': 1774.054, 'text': 'We use the link element or the link tag.', 'start': 1771.232, 'duration': 2.822}, {'end': 1776.456, 'text': "We're going to hit enter.", 'start': 1774.074, 'duration': 2.382}, {'end': 1780.639, 'text': "When it comes to Visual Studio Code, you don't have to hand type everything, which is pretty handy.", 'start': 1776.476, 'duration': 4.163}, {'end': 1783.382, 'text': 'I could sit there typing it out by hand.', 'start': 1781.38, 'duration': 2.002}], 'summary': 'Focus on linking css document in visual studio code.', 'duration': 30.282, 'max_score': 1753.1, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw1753100.jpg'}], 'start': 1227.711, 'title': 'Front-end development basics', 'summary': 'Introduces the basics of front-end development, emphasizing the importance of html, css, and javascript, along with setting up a development environment and creating an html file. it also mentions the use of modern front-end development frameworks like react, vue, and angular.', 'chapters': [{'end': 1290.102, 'start': 1227.711, 'title': 'Media queries and responsive design', 'summary': 'Discusses the challenges of using older web pages due to lack of responsive design and media queries, while emphasizing the importance of focusing on absolute beginner fundamentals in html and css.', 'duration': 62.391, 'highlights': ['The purpose of media queries is to address the challenges of using older web pages that lack responsive design and media queries, making it difficult for users to navigate (e.g., automatic shrinking, zooming difficulties).', 'Emphasizing the importance of focusing on absolute beginner fundamentals in HTML and CSS before delving into more intermediate to advanced concepts to avoid overwhelming beginners.', 'Acknowledging the existence of more intermediate to advanced concepts in web development, but highlighting the sufficiency of the beginner fundamentals in providing a conceptual level understanding for most people.']}, {'end': 2007.493, 'start': 1292.864, 'title': 'Front-end development basics', 'summary': 'Introduces the basics of front-end development, emphasizing the importance of html, css, and javascript, and provides a step-by-step guide to setting up a development environment and creating an html file. it also mentions the use of modern front-end development frameworks like react, vue, and angular, which are built on top of javascript.', 'duration': 714.629, 'highlights': ['Front-end development fundamentals The importance of understanding HTML, CSS, and JavaScript is emphasized as the foundational skills for front-end development.', 'Setting up a development environment The step-by-step guide to creating a folder, installing Visual Studio Code, and setting up a new HTML file is provided.', 'Introduction to modern front-end development frameworks The mention of frameworks like React, Vue, and Angular, and the advice to beginners not to touch them until mastering JavaScript, highlights the relevance of these frameworks and their relationship with JavaScript.']}], 'duration': 779.782, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw1227711.jpg', 'highlights': ['The importance of understanding HTML, CSS, and JavaScript as foundational skills for front-end development.', 'Setting up a development environment with a step-by-step guide for creating a folder, installing Visual Studio Code, and setting up a new HTML file.', 'Mention of modern front-end development frameworks like React, Vue, and Angular, and advice to beginners not to touch them until mastering JavaScript.']}, {'end': 3025.18, 'segs': [{'end': 2257.403, 'src': 'embed', 'start': 2234.318, 'weight': 0, 'content': [{'end': 2243.72, 'text': 'What do we have next? We have this logo right here, right? Now, by the way, as a side note, when I exported this, this right here is editable type.', 'start': 2234.318, 'duration': 9.402}, {'end': 2249.521, 'text': "It hasn't been converted to outlines, which I think you would need to do with something like Adobe Illustrator or another vector application.", 'start': 2243.86, 'duration': 5.661}, {'end': 2252.802, 'text': 'So, because I exported this as just.', 'start': 2249.962, 'duration': 2.84}, {'end': 2257.403, 'text': "you know, an unflattened type right here you're going to have to have.", 'start': 2252.802, 'duration': 4.601}], 'summary': 'Logo needs to be converted to outlines for editing, possibly using adobe illustrator.', 'duration': 23.085, 'max_score': 2234.318, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw2234318.jpg'}, {'end': 2319.959, 'src': 'embed', 'start': 2282.875, 'weight': 1, 'content': [{'end': 2285.276, 'text': 'you have to ask yourself do you want the image to be clickable??', 'start': 2282.875, 'duration': 2.401}, {'end': 2288.438, 'text': 'For instance, we went on our web page and you want to get to the home page.', 'start': 2285.896, 'duration': 2.542}, {'end': 2289.459, 'text': 'you might click on the logo.', 'start': 2288.438, 'duration': 1.021}, {'end': 2293.542, 'text': 'You would use an A tag or an A element for that.', 'start': 2289.839, 'duration': 3.703}, {'end': 2296.644, 'text': "And we're not going to do that.", 'start': 2294.122, 'duration': 2.522}, {'end': 2298.465, 'text': 'We have a home button here already.', 'start': 2297.104, 'duration': 1.361}, {'end': 2303.268, 'text': "It's probably good to do that just as a general, just because people usually expect it.", 'start': 2298.725, 'duration': 4.543}, {'end': 2305.09, 'text': "I'm just going to leave that off though.", 'start': 2303.969, 'duration': 1.121}, {'end': 2306.451, 'text': 'So keep things simple right now.', 'start': 2305.31, 'duration': 1.141}, {'end': 2308.972, 'text': "So I'm just going to type the name of the tag, which is image.", 'start': 2306.831, 'duration': 2.141}, {'end': 2313.535, 'text': "And by the way, you ask yourself, how did you know it's images? Well, it's because I've been doing this for so long.", 'start': 2309.853, 'duration': 3.682}, {'end': 2319.959, 'text': 'You will too, once you start getting the muscle memory down, you keep sticking with it and doing HTML and writing your HTML.', 'start': 2313.795, 'duration': 6.164}], 'summary': 'Consider adding clickable image for user expectations. keep it simple by using image tag.', 'duration': 37.084, 'max_score': 2282.875, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw2282875.jpg'}, {'end': 2639.564, 'src': 'embed', 'start': 2612.209, 'weight': 3, 'content': [{'end': 2618.192, 'text': 'For instance, if you had multiple HTML documents like another subpage, like services.', 'start': 2612.209, 'duration': 5.983}, {'end': 2622.114, 'text': 'this is where you would put that to direct the user to another HTML document.', 'start': 2618.192, 'duration': 3.922}, {'end': 2623.575, 'text': "But if you don't have one, you can just do this.", 'start': 2622.154, 'duration': 1.421}, {'end': 2627.977, 'text': 'And then we can put class equals hide desktop.', 'start': 2624.395, 'duration': 3.582}, {'end': 2639.564, 'text': "So notice we're using the same class name right here and here, because once we get to a desktop viewport resolution width,", 'start': 2628.698, 'duration': 10.866}], 'summary': "Using 'class=hide desktop' to direct users to another html document or hide content at desktop viewport.", 'duration': 27.355, 'max_score': 2612.209, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw2612209.jpg'}, {'end': 2700.81, 'src': 'embed', 'start': 2669.216, 'weight': 6, 'content': [{'end': 2675.442, 'text': 'And also, do we need any other attributes in here? Well, we actually need a few.', 'start': 2669.216, 'duration': 6.226}, {'end': 2677.244, 'text': "So we're going to put class equals menu.", 'start': 2675.462, 'duration': 1.782}, {'end': 2685.593, 'text': 'That will allow us to position this icon menu as well as an ID of menu as well for JavaScript, so that when a person clicks on it,', 'start': 2678.065, 'duration': 7.528}, {'end': 2688.395, 'text': 'we can attach a different class with it through JavaScript.', 'start': 2685.593, 'duration': 2.802}, {'end': 2691.959, 'text': "If you're confused, don't worry too much about that in this point in time.", 'start': 2688.776, 'duration': 3.183}, {'end': 2700.81, 'text': "Now also for our unordered list right here, we're going to add an ID as well because we're going to have to reference that with JavaScript later on.", 'start': 2692.642, 'duration': 8.168}], 'summary': 'Adding attributes like class=menu and id=menu for js interaction.', 'duration': 31.594, 'max_score': 2669.216, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw2669216.jpg'}, {'end': 2735.451, 'src': 'embed', 'start': 2712.461, 'weight': 4, 'content': [{'end': 2723.026, 'text': 'So the way an unordered list works is you open it up with the ul element unordered list element and inside of it it accepts other different elements,', 'start': 2712.461, 'duration': 10.565}, {'end': 2725.047, 'text': 'such as the li the list items.', 'start': 2723.026, 'duration': 2.021}, {'end': 2731.869, 'text': "And so you'll have multiple list items and this is what gives you your bullet point looks in the browser.", 'start': 2725.347, 'duration': 6.522}, {'end': 2735.451, 'text': "And in fact, I'm gonna show the browser right here on the right side,", 'start': 2731.889, 'duration': 3.562}], 'summary': 'An unordered list uses ul and li elements to create bullet points in the browser.', 'duration': 22.99, 'max_score': 2712.461, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw2712461.jpg'}, {'end': 3031.908, 'src': 'embed', 'start': 3004.403, 'weight': 5, 'content': [{'end': 3007.184, 'text': "This is something that I actually didn't design in the mockup.", 'start': 3004.403, 'duration': 2.781}, {'end': 3013.587, 'text': "If we look at the mockup over here, We'll see there was nowhere that I put it like an exit.", 'start': 3007.664, 'duration': 5.923}, {'end': 3018.433, 'text': "I didn't even really draw or design what the navigation drawer looks like.", 'start': 3013.667, 'duration': 4.766}, {'end': 3022.397, 'text': "That's something that normally would be handled by the designer.", 'start': 3018.813, 'duration': 3.584}, {'end': 3025.18, 'text': 'But I just wanted to put that disclaimer in there.', 'start': 3022.678, 'duration': 2.502}, {'end': 3029.665, 'text': "But it's just a simple X is all it is an SVG graphic.", 'start': 3025.941, 'duration': 3.724}, {'end': 3031.908, 'text': "The alt we're just going to say exit menu.", 'start': 3029.685, 'duration': 2.223}], 'summary': "The mockup lacks an exit icon, which the designer typically handles. it's a simple svg graphic with the alt text 'exit menu.'", 'duration': 27.505, 'max_score': 3004.403, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw3004403.jpg'}], 'start': 2008.894, 'title': 'Creating html and css layout, displaying svg image and navigation, and mobile viewport simulation', 'summary': "Covers setting up a live server, automatic refreshing for html and css, mobile-first css, and organizing assets for web design. it also discusses displaying svg images, creating navigation using semantic html tags, and simulating mobile viewport in html using chrome's device toolbar.", 'chapters': [{'end': 2232.682, 'start': 2008.894, 'title': 'Creating html and css layout', 'summary': 'Covers setting up a live server, automatic refreshing for html and css, mobile-first css, and organizing assets for web design.', 'duration': 223.788, 'highlights': ['Setting up live server for automatic refresh Using live server to open the default browser and automatically refresh when the file is saved.', 'Mobile-first CSS and UI design Implementing mobile-first CSS and UI design, focusing on the desktop and mobile versions of the layout.', 'Organizing assets for web design Providing available files for assets and instructing to create an images folder for images used in the layout.']}, {'end': 2735.451, 'start': 2234.318, 'title': 'Displaying svg image and navigation in html', 'summary': 'Discusses how to display an svg image using the img element, emphasizing the use of scalable vector graphics and the importance of semantic html tags. it also delves into creating navigation using the nav tag and unordered list, highlighting the use of classes and ids for css and javascript targeting.', 'duration': 501.133, 'highlights': ['The chapter discusses how to display an SVG image using the IMG element, emphasizing the use of scalable vector graphics (SVG) as opposed to rastered graphics like JPEG or PNG for elements like a logo. SVG is a scalable vector graphics format that is almost always better to use for elements like a logo, as it allows for resizing without quality loss.', 'The chapter delves into creating navigation using the nav tag and unordered list, highlighting the importance of semantic HTML tags and using classes and IDs for CSS and JavaScript targeting. The use of semantic HTML tags such as nav and ul is emphasized, along with the importance of using classes and IDs for targeting with CSS and JavaScript.']}, {'end': 3025.18, 'start': 2735.451, 'title': 'Mobile viewport simulation in html', 'summary': "Discusses simulating mobile viewport in html, using chrome's device toolbar to change the perspective to iphone x, modifying the navigation and list items, and adding an exit icon for navigation drawer.", 'duration': 289.729, 'highlights': ["Simulating mobile viewport in HTML The chapter explains how to use Chrome's device toolbar to change the perspective to iPhone X.", 'Modifying the navigation and list items The tutorial demonstrates how to modify the navigation and list items, making them clickable and creating a navigation drawer.', 'Adding an exit icon for navigation drawer The chapter discusses adding an exit icon for the navigation drawer, explaining the usage of image tags and the necessity of the element for closing the navigation drawer.']}], 'duration': 1016.286, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw2008894.jpg', 'highlights': ['Setting up live server for automatic refresh Using live server to open the default browser and automatically refresh when the file is saved.', 'Mobile-first CSS and UI design Implementing mobile-first CSS and UI design, focusing on the desktop and mobile versions of the layout.', 'Organizing assets for web design Providing available files for assets and instructing to create an images folder for images used in the layout.', 'The chapter discusses how to display an SVG image using the IMG element, emphasizing the use of scalable vector graphics (SVG) as opposed to rastered graphics like JPEG or PNG for elements like a logo.', 'The chapter delves into creating navigation using the nav tag and unordered list, highlighting the importance of semantic HTML tags and using classes and IDs for CSS and JavaScript targeting.', "Simulating mobile viewport in HTML The chapter explains how to use Chrome's device toolbar to change the perspective to iPhone X.", 'Modifying the navigation and list items The tutorial demonstrates how to modify the navigation and list items, making them clickable and creating a navigation drawer.', 'Adding an exit icon for navigation drawer The chapter discusses adding an exit icon for the navigation drawer, explaining the usage of image tags and the necessity of the element for closing the navigation drawer.']}, {'end': 3691.439, 'segs': [{'end': 3326.449, 'src': 'embed', 'start': 3295.926, 'weight': 0, 'content': [{'end': 3302.411, 'text': "we're going to give it a class because i want to be able to reference it of subhead and again these names.", 'start': 3295.926, 'duration': 6.485}, {'end': 3304.573, 'text': 'you can come up with them on your own.', 'start': 3302.411, 'duration': 2.162}, {'end': 3306.714, 'text': "so there isn't something technically called subhead.", 'start': 3304.573, 'duration': 2.141}, {'end': 3308.776, 'text': "i'm just giving it that name.", 'start': 3306.714, 'duration': 2.062}, {'end': 3311.137, 'text': "i. we're going to paste this in.", 'start': 3308.776, 'duration': 2.361}, {'end': 3313.159, 'text': 'so this is what our html looks like so far.', 'start': 3311.137, 'duration': 2.022}, {'end': 3326.449, 'text': "And then we will put in another image element which doesn't show up here, because if you followed along during the UI design course that I did,", 'start': 3315.838, 'duration': 10.611}], 'summary': 'Creating a class named subhead in html for referencing with an image element.', 'duration': 30.523, 'max_score': 3295.926, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw3295926.jpg'}, {'end': 3368.779, 'src': 'embed', 'start': 3339.36, 'weight': 4, 'content': [{'end': 3342.843, 'text': 'but on the desktop version you may not see this bottom portion.', 'start': 3339.36, 'duration': 3.483}, {'end': 3350.188, 'text': 'so this is going to be an animated scroll icon that kind of gives the user a hint that they should scroll down.', 'start': 3342.843, 'duration': 7.345}, {'end': 3352.329, 'text': "so to do that again it's an image.", 'start': 3350.188, 'duration': 2.141}, {'end': 3354.811, 'text': "so we're going to use the image tag again.", 'start': 3352.329, 'duration': 2.482}, {'end': 3357.793, 'text': 'images forward, slash, scroll.svg.', 'start': 3354.811, 'duration': 2.982}, {'end': 3363.978, 'text': 'the alt will just be scroll, scroll down and a class.', 'start': 3357.793, 'duration': 6.185}, {'end': 3365.338, 'text': "We're going to give it a couple of classes.", 'start': 3363.998, 'duration': 1.34}, {'end': 3368.779, 'text': 'So class equals a scroll.', 'start': 3365.698, 'duration': 3.081}], 'summary': 'Adding an animated scroll icon on desktop version to prompt users to scroll down using an image tag with classes.', 'duration': 29.419, 'max_score': 3339.36, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw3339360.jpg'}, {'end': 3441.442, 'src': 'embed', 'start': 3409.61, 'weight': 2, 'content': [{'end': 3414.352, 'text': 'that kind of does this nice little sort of Bezier curves and rounded edges, inverted and such.', 'start': 3409.61, 'duration': 4.742}, {'end': 3416.973, 'text': 'And then we have, so this is a container itself.', 'start': 3414.852, 'duration': 2.121}, {'end': 3418.053, 'text': "It's a block of sorts.", 'start': 3417.033, 'duration': 1.02}, {'end': 3420.874, 'text': 'And then we have these things in my sides.', 'start': 3418.713, 'duration': 2.161}, {'end': 3423.615, 'text': "But let's first try to figure out how we're gonna do this.", 'start': 3420.914, 'duration': 2.701}, {'end': 3425.256, 'text': 'Now, initially, when I designed this,', 'start': 3423.695, 'duration': 1.561}, {'end': 3432.438, 'text': "I thought to myself We're going to take an SVG and we'll export it and we'll get this in there through some clever CSS.", 'start': 3425.256, 'duration': 7.182}, {'end': 3441.442, 'text': 'But I decided against that because this shape is simple enough to where I can actually achieve it through CSS alone.', 'start': 3432.458, 'duration': 8.984}], 'summary': 'Transcript discusses creating shapes using bezier curves and css.', 'duration': 31.832, 'max_score': 3409.61, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw3409610.jpg'}, {'end': 3479.033, 'src': 'embed', 'start': 3452.026, 'weight': 3, 'content': [{'end': 3459.128, 'text': 'know, flat container, which is fine if you chose to go that route, by the way, but we are going to integrate this in the css portion.', 'start': 3452.026, 'duration': 7.102}, {'end': 3463.729, 'text': 'so for now, we want to get this all right.', 'start': 3459.128, 'duration': 4.601}, {'end': 3471.251, 'text': "so to do that, the next area we're going to have is a div.", 'start': 3463.729, 'duration': 7.522}, {'end': 3474.252, 'text': "um, actually, no, let's, let's close this out.", 'start': 3471.251, 'duration': 3.001}, {'end': 3479.033, 'text': 'so this closing div tag is in relation to this div class container right here.', 'start': 3474.252, 'duration': 4.781}], 'summary': 'Integrating a flat container in the css portion, ensuring correctness.', 'duration': 27.007, 'max_score': 3452.026, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw3452026.jpg'}], 'start': 3025.941, 'title': 'Creating webpage elements', 'summary': 'Covers creating an svg exit button with specific id and class using javascript and css, and discusses the html and css structure for a webpage, including semantic elements, images, headlines, sub-headlines, and icons.', 'chapters': [{'end': 3074.728, 'start': 3025.941, 'title': 'Creating svg exit button', 'summary': "Covers creating an svg exit button with id 'exit', class 'exit-btn' and the functionality to hide it during desktop mode, using javascript and css.", 'duration': 48.787, 'highlights': ["The process involves creating an SVG graphic with the alt text 'exit menu' and attaching an ID 'exit' to it, along with a class 'exit-BTN' to style it specifically and hide it during desktop mode.", 'JavaScript is used to detect clicks on the exit button and automatically add a CSS class to hide it along with the rest of the menu.']}, {'end': 3691.439, 'start': 3075.848, 'title': 'Html and css structure', 'summary': 'Discusses the html and css structure for creating a webpage, including the use of semantic elements like header, section, and div, as well as the inclusion of images, headlines, sub-headlines, and icons within the structure.', 'duration': 615.591, 'highlights': ['The chapter discusses the use of semantic elements like header, section, and div to structure the webpage. Semantic elements like header and section are highlighted for structuring the webpage.', 'The inclusion of images, headlines, sub-headlines, and icons within the HTML structure is explained. The process of including images, headlines, sub-headlines, and icons within the HTML structure is explained, demonstrating the use of image tags and paragraph elements.', 'The use of CSS to style the webpage is mentioned, with a focus on achieving specific designs through CSS alone. CSS is mentioned for styling the webpage, with an emphasis on achieving specific designs purely through CSS.']}], 'duration': 665.498, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw3025941.jpg', 'highlights': ["The process involves creating an SVG graphic with the alt text 'exit menu' and attaching an ID 'exit' to it, along with a class 'exit-BTN' to style it specifically and hide it during desktop mode.", 'JavaScript is used to detect clicks on the exit button and automatically add a CSS class to hide it along with the rest of the menu.', 'The chapter discusses the use of semantic elements like header, section, and div to structure the webpage.', 'The inclusion of images, headlines, sub-headlines, and icons within the HTML structure is explained, demonstrating the use of image tags and paragraph elements.', 'The use of CSS to style the webpage is mentioned, with a focus on achieving specific designs through CSS alone.']}, {'end': 4599.237, 'segs': [{'end': 4030.796, 'src': 'embed', 'start': 4003.439, 'weight': 0, 'content': [{'end': 4008.183, 'text': 'So next up, we will find out what is next after that section.', 'start': 4003.439, 'duration': 4.744}, {'end': 4010.545, 'text': 'And that is right here.', 'start': 4009.104, 'duration': 1.441}, {'end': 4018.372, 'text': "Start your free trial and then the get started call to action button as it's referred to as.", 'start': 4011.806, 'duration': 6.566}, {'end': 4024.554, 'text': "So, once again, we're going to have to escape out of the blue.", 'start': 4019.052, 'duration': 5.502}, {'end': 4030.796, 'text': "we're going to have to close the gray container right here, because this is the only two items in it, along with the container element.", 'start': 4024.554, 'duration': 6.242}], 'summary': 'The next steps include starting a free trial and using the call to action button.', 'duration': 27.357, 'max_score': 4003.439, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw4003439.jpg'}, {'end': 4374.575, 'src': 'embed', 'start': 4322.901, 'weight': 2, 'content': [{'end': 4327.529, 'text': "And then we're going to replicate this line with shift alt and the down arrow key and then privacy policy.", 'start': 4322.901, 'duration': 4.628}, {'end': 4334.822, 'text': 'All right.', 'start': 4332.317, 'duration': 2.505}, {'end': 4344.779, 'text': 'What is happening here? Oh, and that is because I accidentally left that A tag unclosed up here.', 'start': 4335.182, 'duration': 9.597}, {'end': 4346.12, 'text': 'It was sitting at the bottom.', 'start': 4344.799, 'duration': 1.321}, {'end': 4350.502, 'text': 'So we need to put this right here.', 'start': 4346.84, 'duration': 3.662}, {'end': 4351.442, 'text': 'There we go.', 'start': 4350.862, 'duration': 0.58}, {'end': 4353.283, 'text': 'So all this stuff should be outside of that.', 'start': 4351.503, 'duration': 1.78}, {'end': 4357.886, 'text': 'So I was trying to put an anchor text inside an unclosed anchor text link.', 'start': 4353.323, 'duration': 4.563}, {'end': 4366.35, 'text': "So that's why the W3C validation is very helpful because it will underline a red error if you screw up like that.", 'start': 4357.926, 'duration': 8.424}, {'end': 4374.575, 'text': "so now this is what your um, the html for the footer should look like being, once you have it completed, all right, so let's save that.", 'start': 4366.81, 'duration': 7.765}], 'summary': 'Fixing unclosed a tag error and w3c validation for html footer', 'duration': 51.674, 'max_score': 4322.901, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw4322901.jpg'}, {'end': 4456.595, 'src': 'embed', 'start': 4429.395, 'weight': 1, 'content': [{'end': 4435.542, 'text': 'That way I can see the different selectors that I have at my disposal to reference during the CSS process.', 'start': 4429.395, 'duration': 6.147}, {'end': 4441.265, 'text': "Right now, though, I don't have enough room because I want the text to be large enough so everything's really large up here.", 'start': 4436.082, 'duration': 5.183}, {'end': 4443.246, 'text': 'And I also want to see this preview over here.', 'start': 4441.345, 'duration': 1.901}, {'end': 4448.83, 'text': "But that's why it helps as a front end developer to at least have two monitors so that you can separate things out a bit.", 'start': 4443.286, 'duration': 5.544}, {'end': 4456.595, 'text': "So I'm just going to go ahead and let's see here, close out this right here and just go back to my main CSS.", 'start': 4449.67, 'duration': 6.925}], 'summary': 'Front end developer needs two monitors for better workflow.', 'duration': 27.2, 'max_score': 4429.395, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw4429395.jpg'}], 'start': 3692.58, 'title': 'Html structure, styling, and css basics', 'summary': 'Covers organizing html elements, using semantic tags for quotes and avatars, and optimizing readability through proper formatting. it also emphasizes the use of semantic html elements and classes for structuring webpages, and introduces the css styling process with examples and tips for efficient coding.', 'chapters': [{'end': 3970.52, 'start': 3692.58, 'title': 'Html structure and semantics', 'summary': 'Covers organizing html elements, using semantic tags for quotes and avatars, and optimizing readability through proper formatting, with a focus on improving the structure and semantics of html.', 'duration': 277.94, 'highlights': ['Organizing HTML elements and using semantic tags for quotes and avatars', 'Emphasizing the importance of proper formatting for readability and structure in HTML', 'Demonstrating the use of figure, figcaption, blockquote, and image tags for testimonial sections']}, {'end': 4196.128, 'start': 3971.621, 'title': 'Html structure & styling', 'summary': 'Covers the html structure and styling of a webpage, including elements like containers, buttons, and footers, emphasizing the use of semantic html elements and classes for structuring.', 'duration': 224.507, 'highlights': ['The power of CSS allows for significant appearance changes, such as transforming a simple anchor button into a styled call-to-action button.', "Detailed explanation of structuring the HTML elements using semantic elements and classes like 'container' and 'footer' for a consistent layout.", "Demonstration of creating a 'start your free trial' section with heading and anchor elements, emphasizing the flexibility in using different heading elements without causing W3C compliance errors."]}, {'end': 4374.575, 'start': 4196.608, 'title': 'Creating a simple html footer', 'summary': 'Covers the process of creating a simple html footer, including adding a logo image, an address paragraph, and an unordered list of links for terms of service and privacy policy.', 'duration': 177.967, 'highlights': ["Adding a logo image with a white version using the source 'images logo hyphen white dot SVG' and a class of 'logo'. The source for the logo image is 'images logo hyphen white dot SVG', and it is given a class of 'logo'.", "Including an address paragraph with the text 'Melrose Place 90210' and 'USA'. The address paragraph contains the text 'Melrose Place 90210' and 'USA'.", "Inserting an unordered list of links for terms of service and privacy policy. The footer includes a simple unordered list of links for 'terms of service' and 'privacy policy'."]}, {'end': 4599.237, 'start': 4374.575, 'title': 'Css styling basics', 'summary': 'Introduces the css styling process, focusing on the body tag and its properties, such as setting font family and background color, with examples and tips for efficient coding and development environment setup.', 'duration': 224.662, 'highlights': ['The chapter introduces the CSS styling process, focusing on the body tag and its properties The transcript discusses how to style the body tag in CSS, covering properties like font family and background color.', 'Examples and tips for efficient coding and development environment setup The speaker provides examples of using selectors and properties in CSS, along with tips for setting up an efficient development environment.', 'Tips for efficient coding and development environment setup The speaker mentions the benefit of having two monitors for front-end development and suggests splitting the view in the browser for HTML and CSS.']}], 'duration': 906.657, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw3692580.jpg', 'highlights': ['Emphasizing the importance of proper formatting for readability and structure in HTML', "Detailed explanation of structuring the HTML elements using semantic elements and classes like 'container' and 'footer' for a consistent layout", 'The chapter introduces the CSS styling process, focusing on the body tag and its properties', "Demonstration of creating a 'start your free trial' section with heading and anchor elements, emphasizing the flexibility in using different heading elements without causing W3C compliance errors"]}, {'end': 5445.005, 'segs': [{'end': 4888.402, 'src': 'embed', 'start': 4863.523, 'weight': 0, 'content': [{'end': 4872.069, 'text': "So I'm simply going to use UL as a selector, and any of the declarations inside of this rule set will apply to all the unordered lists that show up.", 'start': 4863.523, 'duration': 8.546}, {'end': 4878.234, 'text': 'So notice on all of my unordered lists, we have these little bullet points showing up.', 'start': 4872.649, 'duration': 5.585}, {'end': 4880.235, 'text': 'Those black dots.', 'start': 4879.455, 'duration': 0.78}, {'end': 4881.576, 'text': "Let's get rid of those.", 'start': 4880.716, 'duration': 0.86}, {'end': 4888.402, 'text': "So the way we can do that is, let's see, list style type, and then we just put none.", 'start': 4882.017, 'duration': 6.385}], 'summary': "Using 'list-style-type: none' to remove bullet points from all unordered lists.", 'duration': 24.879, 'max_score': 4863.523, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw4863523.jpg'}, {'end': 5019.511, 'src': 'embed', 'start': 4989.855, 'weight': 1, 'content': [{'end': 4995.238, 'text': "So we're just going to say text align, which is another CSS property.", 'start': 4989.855, 'duration': 5.383}, {'end': 4999.48, 'text': 'and an acceptable value for that is center.', 'start': 4996.138, 'duration': 3.342}, {'end': 5003.862, 'text': 'So if we save it, all of a sudden everything has just become centered.', 'start': 5000.2, 'duration': 3.662}, {'end': 5009.185, 'text': 'That is inside any of the HTML elements that are inside of that container class.', 'start': 5004.503, 'duration': 4.682}, {'end': 5010.566, 'text': 'All right.', 'start': 5010.286, 'duration': 0.28}, {'end': 5019.511, 'text': "Also, let's give it some padding because right now everything is really close to the edges, to the top right and left edges of the browser.", 'start': 5011.026, 'duration': 8.485}], 'summary': 'Using css, the text is aligned to the center, creating a more visually pleasing layout.', 'duration': 29.656, 'max_score': 4989.855, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw4989855.jpg'}, {'end': 5143.858, 'src': 'embed', 'start': 5118.487, 'weight': 5, 'content': [{'end': 5124.808, 'text': "but i'm just going to use this orientation right here, and that's all we're going to do for container.", 'start': 5118.487, 'duration': 6.321}, {'end': 5127.349, 'text': 'next up after our container is our logo.', 'start': 5124.808, 'duration': 2.541}, {'end': 5131.211, 'text': "We gave it a class of logo, so that's how we're going to reference it.", 'start': 5128.109, 'duration': 3.102}, {'end': 5134.472, 'text': 'Logo All right.', 'start': 5132.652, 'duration': 1.82}, {'end': 5140.736, 'text': "So what do we need done with our logo? This is where it's currently at in the browser, and this is where we need it to be.", 'start': 5134.553, 'duration': 6.183}, {'end': 5143.858, 'text': 'Right here.', 'start': 5143.017, 'duration': 0.841}], 'summary': 'Using orientation for container, adding class logo for referencing, and positioning the logo.', 'duration': 25.371, 'max_score': 5118.487, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw5118487.jpg'}, {'end': 5199.858, 'src': 'embed', 'start': 5168.418, 'weight': 2, 'content': [{'end': 5169.219, 'text': "that's absolute.", 'start': 5168.418, 'duration': 0.801}, {'end': 5170.04, 'text': "It doesn't change.", 'start': 5169.299, 'duration': 0.741}, {'end': 5174.324, 'text': "I don't need the size of the logo to change based on the viewport.", 'start': 5170.54, 'duration': 3.784}, {'end': 5178.586, 'text': 'so it just scales it down slightly, all right.', 'start': 5174.964, 'duration': 3.622}, {'end': 5189.653, 'text': "um, a another thing that we're going to do to do is we need this icon right here to show up to the right and this logo to show up to the left.", 'start': 5178.586, 'duration': 11.067}, {'end': 5199.858, 'text': 'and the way we can do that is notice that we have this header element right here and inside of the the header element,', 'start': 5189.653, 'duration': 10.205}], 'summary': "Logo size won't change based on viewport. icon to the right, logo to the left.", 'duration': 31.44, 'max_score': 5168.418, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw5168418.jpg'}, {'end': 5275.008, 'src': 'embed', 'start': 5242.861, 'weight': 4, 'content': [{'end': 5246.962, 'text': "It's not quite right of the spacing, and I'll demonstrate how to fix that in a second.", 'start': 5242.861, 'duration': 4.101}, {'end': 5253.103, 'text': 'But it basically created a layout called a flex box layout.', 'start': 5247.302, 'duration': 5.801}, {'end': 5259.285, 'text': 'And there are different types of properties that you can use for display, such as display block.', 'start': 5253.483, 'duration': 5.802}, {'end': 5263.906, 'text': 'display grid is very popular and display flex as well in inline.', 'start': 5259.285, 'duration': 4.621}, {'end': 5275.008, 'text': 'But flex is a real easy way if you have small elements in your user interface that need basically structured into columns like this.', 'start': 5264.786, 'duration': 10.222}], 'summary': 'Flex box layout simplifies structuring small elements into columns.', 'duration': 32.147, 'max_score': 5242.861, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw5242861.jpg'}, {'end': 5312.582, 'src': 'embed', 'start': 5287.871, 'weight': 3, 'content': [{'end': 5298.056, 'text': 'this ul class right here hide desktop, so, or hide mobile, rather, make sure i have this all set up.', 'start': 5287.871, 'duration': 10.185}, {'end': 5302.257, 'text': "i we're going to put in hide mobile.", 'start': 5298.056, 'duration': 4.201}, {'end': 5303.118, 'text': 'i had that wrong.', 'start': 5302.257, 'duration': 0.861}, {'end': 5304.658, 'text': 'make sure you update that right there.', 'start': 5303.118, 'duration': 1.54}, {'end': 5306.799, 'text': "it's confusing me for a second.", 'start': 5304.658, 'duration': 2.141}, {'end': 5311.241, 'text': "so we're going to create that class of hide mobile, so i'm going to put it right here.", 'start': 5306.799, 'duration': 4.442}, {'end': 5312.582, 'text': "doesn't really matter where you put it.", 'start': 5311.241, 'duration': 1.341}], 'summary': "Creating a 'hide mobile' class for desktop view. update needed.", 'duration': 24.711, 'max_score': 5287.871, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw5287871.jpg'}], 'start': 4599.377, 'title': 'Css font family and styles, and mobile-first design', 'summary': 'Explains css font family property and values, including montserrat as a web font, and setting default declarations for paragraph tags and block quotes. it also covers applying css to mobile-first design, including using specific css properties and values to achieve the desired layout.', 'chapters': [{'end': 4843.324, 'start': 4599.377, 'title': 'Css font family and styles', 'summary': 'Explains the css font family property and values, including the use of montserrat as a web font available in google web fonts, and setting default declarations for paragraph tags and block quotes, with specific font sizes and line heights.', 'duration': 243.947, 'highlights': ['Explaining the CSS font family property and values, including the use of Montserrat as a web font available in Google Web Fonts. The chapter covers the use of the font family property in CSS, specifically highlighting the ability to use Montserrat as a web font available in Google Web Fonts, with specific details on importing and using different weights of the font.', 'Setting default declarations for paragraph tags and block quotes, with specific font sizes and line heights. The transcript includes setting default declarations for paragraph tags and block quotes, with specific details on using .9em for font size and 1.6em for line height, along with an explanation of em units and their relationship to pixel sizes.']}, {'end': 5445.005, 'start': 4844.89, 'title': 'Css mobile first design', 'summary': 'Covers the process of applying css to mobile-first design, including removing default styles for unordered lists, centering content, adding padding, and using flexbox layout to position elements, with the key point of using specific css properties and values to achieve the desired layout.', 'duration': 600.115, 'highlights': ["Using CSS to remove default styles for unordered lists The speaker demonstrates using CSS to remove default bullet points from unordered lists, applying the 'list-style-type: none' property, resulting in the removal of the bullet points from all unordered lists.", "Centering content using the 'text-align: center' property The speaker explains using the 'text-align: center' property to center all content within the container class, resulting in the center alignment of all HTML elements inside the container class.", "Applying padding to elements using CSS The speaker discusses using the 'padding' property to add padding to elements within the container class, demonstrating the ability to control the top, bottom, left, and right padding values separately or together.", "Using flexbox layout to position elements The speaker demonstrates using the 'display: flex' and 'justify-content: space-between' properties to create a flexbox layout, allowing for positioning elements in columns and achieving the desired layout."]}], 'duration': 845.628, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw4599377.jpg', 'highlights': ['Explaining the CSS font family property and values, including the use of Montserrat as a web font available in Google Web Fonts.', 'Setting default declarations for paragraph tags and block quotes, with specific font sizes and line heights.', 'Using flexbox layout to position elements', 'Applying padding to elements using CSS', "Centering content using the 'text-align: center' property", 'Using CSS to remove default styles for unordered lists']}, {'end': 7852.942, 'segs': [{'end': 5730.22, 'src': 'embed', 'start': 5695.926, 'weight': 0, 'content': [{'end': 5703.208, 'text': "And then z index of three means it's going to stack it on top of that graphic,", 'start': 5695.926, 'duration': 7.282}, {'end': 5708.869, 'text': 'the circle graphic that is used to create that sort of interesting effect in the blue container.', 'start': 5703.208, 'duration': 5.661}, {'end': 5712.091, 'text': "So hopefully that's not too confusing at this point.", 'start': 5709.469, 'duration': 2.622}, {'end': 5716.753, 'text': 'I think we will get to a point where we might adjust the size, but not at this point.', 'start': 5712.991, 'duration': 3.762}, {'end': 5730.22, 'text': 'So going on, oh yeah, the subhead actually, I am going to reference specifically and say font size about 0.9.', 'start': 5717.734, 'duration': 12.486}], 'summary': 'Using z index of 3 to stack a circle graphic on top, with a font size of 0.9 for the subhead.', 'duration': 34.294, 'max_score': 5695.926, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw5695926.jpg'}, {'end': 5879.232, 'src': 'embed', 'start': 5854.856, 'weight': 1, 'content': [{'end': 5860.899, 'text': 'So we could actually get away with just putting in margin hyphen top 15%.', 'start': 5854.856, 'duration': 6.043}, {'end': 5861.8, 'text': 'It would be the same thing.', 'start': 5860.899, 'duration': 0.901}, {'end': 5867.703, 'text': 'Oh, and by the way, I was referring to the top up here, not the inside, which would be padding.', 'start': 5863.74, 'duration': 3.963}, {'end': 5873.367, 'text': "Okay Um, next after that, we're going to do with padding, which is inside.", 'start': 5869.104, 'duration': 4.263}, {'end': 5879.232, 'text': "So on the top, we'll say 4 E M and let's just save that.", 'start': 5874.328, 'duration': 4.904}], 'summary': 'Setting margin-top to 15% and padding-top to 4em.', 'duration': 24.376, 'max_score': 5854.856, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw5854856.jpg'}, {'end': 6286.558, 'src': 'embed', 'start': 6253.752, 'weight': 2, 'content': [{'end': 6266.417, 'text': "Next we're going to give it a width of about 80 pixels and then we're going to give it a height of 80 pixels and we're going to give it a background color of white.", 'start': 6253.752, 'duration': 12.665}, {'end': 6275.861, 'text': "Right now, we can't see it, but it's up right around here, I believe, or inside, and you'll see this in a second.", 'start': 6268.458, 'duration': 7.403}, {'end': 6283.616, 'text': "What we'll do, first I should have done this one because we're doing both.", 'start': 6279.253, 'duration': 4.363}, {'end': 6286.558, 'text': 'I just copied this, a before and an after.', 'start': 6283.636, 'duration': 2.922}], 'summary': 'Setting width and height of 80 pixels with white background color.', 'duration': 32.806, 'max_score': 6253.752, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw6253752.jpg'}, {'end': 6794.691, 'src': 'embed', 'start': 6764.176, 'weight': 3, 'content': [{'end': 6769.498, 'text': 'If we do margin top, we can actually do negative units so we can put negative like three percent.', 'start': 6764.176, 'duration': 5.322}, {'end': 6772.899, 'text': 'And there it goes, it just got rid of it.', 'start': 6771.118, 'duration': 1.781}, {'end': 6773.979, 'text': 'Not sure if you could see that.', 'start': 6772.959, 'duration': 1.02}, {'end': 6776.74, 'text': "Hopefully you'll notice it yourself.", 'start': 6774.059, 'duration': 2.681}, {'end': 6782.344, 'text': "All right, so that's it for the gray container styling.", 'start': 6778.021, 'duration': 4.323}, {'end': 6789.528, 'text': 'And now, what about this? Yeah, this stuff is all pretty bad.', 'start': 6782.824, 'duration': 6.704}, {'end': 6793.09, 'text': 'These are pretty large graphics.', 'start': 6789.548, 'duration': 3.542}, {'end': 6794.691, 'text': "So let's get those figured out.", 'start': 6793.19, 'duration': 1.501}], 'summary': 'Styling adjustments made to margin top with negative units, addressing large graphics.', 'duration': 30.515, 'max_score': 6764.176, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw6764176.jpg'}, {'end': 7404.251, 'src': 'embed', 'start': 7375.32, 'weight': 4, 'content': [{'end': 7381.566, 'text': "Um, so when we do that, we're going to put margin zero auto, which is a way to center things.", 'start': 7375.32, 'duration': 6.246}, {'end': 7388.373, 'text': 'And we can also put in, uh, our L I element.', 'start': 7383.648, 'duration': 4.725}, {'end': 7396.363, 'text': "So inside of UL, we have our list items, right? So let's try to style this LI element.", 'start': 7390.296, 'duration': 6.067}, {'end': 7398.805, 'text': 'So we put LI after.', 'start': 7397.604, 'duration': 1.201}, {'end': 7404.251, 'text': "And inside of here, we're going to put just display inline block.", 'start': 7398.825, 'duration': 5.426}], 'summary': 'Styling ul and li elements for centering and display inline block.', 'duration': 28.931, 'max_score': 7375.32, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw7375320.jpg'}, {'end': 7859.185, 'src': 'embed', 'start': 7834.909, 'weight': 5, 'content': [{'end': 7842.676, 'text': "and i'm not going to save that because look, when you hover over it it's if it's not a link, nothing happens, but it should change to a pointer icon.", 'start': 7834.909, 'duration': 7.767}, {'end': 7844.938, 'text': 'so there we go now we click on it.', 'start': 7842.676, 'duration': 2.262}, {'end': 7846.6, 'text': 'nothing happens.', 'start': 7844.938, 'duration': 1.662}, {'end': 7852.942, 'text': "nothing happens on any of this, but i that's when javascript will come into play, Okay.", 'start': 7846.6, 'duration': 6.342}, {'end': 7859.185, 'text': "So now what I'm going to do is go back and we're going to fix this and make it back to hide mobile and we'll save it.", 'start': 7853.402, 'duration': 5.783}], 'summary': 'Fixing non-functional link to pointer icon, then javascript will come into play.', 'duration': 24.276, 'max_score': 7834.909, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw7834909.jpg'}], 'start': 5445.005, 'title': 'Css styling techniques', 'summary': 'Covers css styling techniques including fluid white space, responsive design, customizing css properties, and styling footer and navigation links, emphasizing ui optimization for different screen sizes and advanced css techniques.', 'chapters': [{'end': 5589.672, 'start': 5445.005, 'title': 'Optimizing ui for different screen sizes', 'summary': 'Discusses the importance of fluid white space in ui design, experimenting with percentages to optimize the interface for different screen sizes, and adjusting graphic elements using css properties like width, margin, and padding.', 'duration': 144.667, 'highlights': ['Experimenting with percentages to optimize the interface for different screen sizes, such as using 45% for fluid white space and 70% for graphic size.', 'Adjusting graphic elements using CSS properties like width, margin, and padding to achieve better alignment and positioning.', 'Emphasizing the importance of fluid white space in UI design to ensure a seamless user experience across different devices.']}, {'end': 5974.884, 'start': 5590.212, 'title': 'Css styling and responsive design', 'summary': 'Explains the process of creating a responsive image and styling elements using css, including adjusting font sizes, setting background colors, and applying margins and paddings, emphasizing the importance of ui monitoring and visual feedback.', 'duration': 384.672, 'highlights': ['Creating a responsive image and adjusting font sizes The chapter discusses creating a responsive image based on percentage width and adjusting font sizes using CSS, with emphasis on the need for UI monitoring for changes.', 'Styling elements with background colors and text color control It explains the process of setting background colors using hex codes and controlling text color through the color property in CSS, highlighting the efficient use of fewer lines of code and the visual feedback feature in Visual Studio Code.', 'Applying margins and paddings with consideration of UI elements The chapter demonstrates the application of margins and paddings, considering the impact of default margins on UI elements and providing a tip for visualizing padding and margin application for white space adjustment.']}, {'end': 6434.034, 'start': 5975.504, 'title': 'Customizing css properties', 'summary': 'Covers customizing css properties such as border radius and transform to create rounded corners, skew elements, and position pseudo elements, providing insights into intermediate to advanced css techniques.', 'duration': 458.53, 'highlights': ['Using border radius to create rounded corners Demonstrates using the border radius property to create rounded corners and achieving a specific aesthetic in the container.', 'Applying skew transformation to elements Explains the use of the skew transformation property to apply a skew effect to elements within the container, providing an aesthetic appeal.', 'Positioning pseudo elements using CSS Details the process of positioning pseudo elements before and after the containing HTML element, using properties like position, z-index, and dimensions to create unique visual effects.']}, {'end': 7077.256, 'start': 6434.034, 'title': 'Css styling techniques', 'summary': 'Covers css styling techniques including adjusting margins, padding, and size of elements, with a focus on improving the layout and appearance of the webpage, and utilizing specific css properties to achieve desired visual effects.', 'duration': 643.222, 'highlights': ['The chapter focuses on adjusting margins, padding, and size of elements to improve the layout and appearance of the webpage.', 'Specific CSS properties are utilized to achieve desired visual effects, such as setting z-index and using nth-child selector.', 'Detailed explanation is provided on styling the elements, including setting margin, padding, background color, border radius, and font size for a call to action button.', 'Explanations are given on how to target specific elements using CSS selectors, such as first child and figure semantic element.']}, {'end': 7323.35, 'start': 7078.557, 'title': 'Styling the footer container', 'summary': 'Explains the css styling of the footer container, including its dimensions, colors, and positioning, along with the use of before and after selectors for additional elements, resulting in a visually cohesive and properly aligned footer section.', 'duration': 244.793, 'highlights': ['The CSS styling of the footer container includes a width of 100%, a background color of 3D444A, and a color of white, with specific padding values. The footer container has a width of 100%, a background color of 3D444A, a color of white, and padding of 3EM on the top and bottom, and zero on the right and left.', 'The use of transform skew with positive two degrees for the footer container to slope it in the opposite direction compared to the previous element. The footer container utilizes transform skew with positive two degrees to slope it in the opposite direction, contributing to the visual design.', 'Utilizing before and after selectors for additional elements, including specific dimensions, colors, positioning, and z-index values. Before and after selectors are employed for additional elements, each with specific dimensions, colors, positioning, and z-index values to achieve the desired visual layout.']}, {'end': 7852.942, 'start': 7323.71, 'title': 'Styling navigation and footer links', 'summary': 'Discusses styling the footer links and navigation, including setting fixed position, dimensions, colors, and padding, resulting in a visually improved design and user experience for the mobile view.', 'duration': 529.232, 'highlights': ['Styling the navigation with fixed position, width, and background color Setting the navigation to have a fixed position, a width of 60%, and an RGB background color of 36, 41, 44, resulting in a visually improved design for the mobile view.', 'Styling the footer links with centering, inline block display, color, and font size Applying styles to the footer links to center them, use inline block display, set a color of 9D, 9D, 9D, and a font size of 0.8 EM, resulting in improved readability and aesthetics.', 'Applying hover effect and styling the exit button Implementing a hover effect by changing the background color and styling the exit button by setting margins, text alignment, padding, and cursor, enhancing user interaction and visual appeal.']}], 'duration': 2407.937, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw5445005.jpg', 'highlights': ['Experimenting with percentages to optimize the interface for different screen sizes, such as using 45% for fluid white space and 70% for graphic size.', 'Creating a responsive image based on percentage width and adjusting font sizes using CSS, with emphasis on the need for UI monitoring for changes.', 'Using border radius property to create rounded corners and achieving a specific aesthetic in the container.', 'The chapter focuses on adjusting margins, padding, and size of elements to improve the layout and appearance of the webpage.', 'The CSS styling of the footer container includes a width of 100%, a background color of 3D444A, and a color of white, with specific padding values.', 'Styling the navigation with fixed position, width, and background color setting the navigation to have a fixed position, a width of 60%, and an RGB background color of 36, 41, 44, resulting in a visually improved design for the mobile view.']}, {'end': 9617.561, 'segs': [{'end': 8256.411, 'src': 'embed', 'start': 8173.835, 'weight': 0, 'content': [{'end': 8183.906, 'text': "So what we'll do is say blue container image width 20%.", 'start': 8173.835, 'duration': 10.071}, {'end': 8188.59, 'text': "And actually, it's a little bit too large for my liking there.", 'start': 8183.906, 'duration': 4.684}, {'end': 8195.476, 'text': "Trying to look at where that's changing at.", 'start': 8193.714, 'duration': 1.762}, {'end': 8207.306, 'text': 'Actually, probably like 10% looks better, will look better there.', 'start': 8203.883, 'duration': 3.423}, {'end': 8210.974, 'text': 'Yeah, probably right around there.', 'start': 8209.994, 'duration': 0.98}, {'end': 8219.495, 'text': 'And then what we can also do is reuse the rule set that we had before for controlling this one.', 'start': 8210.994, 'duration': 8.501}, {'end': 8222.837, 'text': 'Just like that.', 'start': 8222.236, 'duration': 0.601}, {'end': 8226.538, 'text': 'And make that width here.', 'start': 8224.937, 'duration': 1.601}, {'end': 8230.339, 'text': "Probably leave it, well, we'll say like 7% or smaller.", 'start': 8227.577, 'duration': 2.762}, {'end': 8240.806, 'text': 'Right around there is fine.', 'start': 8239.625, 'duration': 1.181}, {'end': 8246.091, 'text': "I'm just looking at the thickness of the lines, probably 6%.", 'start': 8240.846, 'duration': 5.245}, {'end': 8251.396, 'text': "And then also margin top, we'll say negative six pixels.", 'start': 8246.091, 'duration': 5.305}, {'end': 8256.411, 'text': "And this doesn't really make sense right now to put margin top here.", 'start': 8253.749, 'duration': 2.662}], 'summary': 'Adjusting container image width to 10%, line thickness to 6%, and margin top to -6 pixels.', 'duration': 82.576, 'max_score': 8173.835, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw8173835.jpg'}, {'end': 8785.651, 'src': 'embed', 'start': 8756.002, 'weight': 2, 'content': [{'end': 8759.983, 'text': "let's get the the the rule sets rewritten here for this.", 'start': 8756.002, 'duration': 3.981}, {'end': 8764.705, 'text': 'So we have a nav ul element, which is for this whole container here.', 'start': 8760.023, 'duration': 4.682}, {'end': 8767.866, 'text': "And we're going to change position here to inherent.", 'start': 8765.445, 'duration': 2.421}, {'end': 8779.889, 'text': "So it's kind of resetting it back to it's going from position fixed to just whatever it inherits, which is a potential and acceptable property value.", 'start': 8768.626, 'duration': 11.263}, {'end': 8785.651, 'text': 'The width is also going to be reset to auto background is going to be set to none.', 'start': 8780.729, 'duration': 4.922}], 'summary': 'Rewriting rule sets for nav ul element: position set to inherit, width reset to auto, background set to none.', 'duration': 29.649, 'max_score': 8756.002, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw8756002.jpg'}, {'end': 9394.334, 'src': 'embed', 'start': 9365.844, 'weight': 3, 'content': [{'end': 9375.77, 'text': 'So this is basically allowing us to target that element and be able to reference it as this menu variable, a variable called menu,', 'start': 9365.844, 'duration': 9.926}, {'end': 9377.471, 'text': 'here in our JavaScript.', 'start': 9375.77, 'duration': 1.701}, {'end': 9380, 'text': 'So we need a couple more.', 'start': 9378.959, 'duration': 1.041}, {'end': 9382.002, 'text': 'We need our nav element.', 'start': 9380.761, 'duration': 1.241}, {'end': 9384.745, 'text': 'Get element by ID of nav.', 'start': 9383.103, 'duration': 1.642}, {'end': 9386.406, 'text': 'So we have another one called nav up there.', 'start': 9384.785, 'duration': 1.621}, {'end': 9392.712, 'text': 'And then also exit, which is the exit button on the mobile navigation.', 'start': 9387.087, 'duration': 5.625}, {'end': 9394.334, 'text': "And that's called exit.", 'start': 9392.732, 'duration': 1.602}], 'summary': 'Using javascript to reference elements: menu, nav, and exit.', 'duration': 28.49, 'max_score': 9365.844, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw9365844.jpg'}, {'end': 9450.836, 'src': 'embed', 'start': 9422.168, 'weight': 4, 'content': [{'end': 9425.029, 'text': "So when somebody clicks on it, we're going to make something happen.", 'start': 9422.168, 'duration': 2.861}, {'end': 9429.39, 'text': "So we're going to pass in a function with E as a parameter.", 'start': 9425.549, 'duration': 3.841}, {'end': 9432.131, 'text': "And you'll see how we work in with that.", 'start': 9430.27, 'duration': 1.861}, {'end': 9435.632, 'text': 'And then we open up things in the squiggly bracket.', 'start': 9432.471, 'duration': 3.161}, {'end': 9437.293, 'text': "It's similar sort of to CSS.", 'start': 9435.732, 'duration': 1.561}, {'end': 9440.894, 'text': 'And so when something clicks, do something in here.', 'start': 9438.733, 'duration': 2.161}, {'end': 9446.555, 'text': 'So we could do alert, I have been clicked.', 'start': 9441.794, 'duration': 4.761}, {'end': 9450.836, 'text': 'So if we do that, watch what happens.', 'start': 9449.236, 'duration': 1.6}], 'summary': 'Demonstrating event handling in javascript with a click function and an alert message.', 'duration': 28.668, 'max_score': 9422.168, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw9422168.jpg'}, {'end': 9597.755, 'src': 'embed', 'start': 9573.354, 'weight': 5, 'content': [{'end': 9583.726, 'text': 'This is the app or the website that we designed all the way from the course from a couple days ago or last week,', 'start': 9573.354, 'duration': 10.372}, {'end': 9587.03, 'text': 'rather and realizing it in the browser.', 'start': 9583.726, 'duration': 3.304}, {'end': 9591.154, 'text': 'And you can check this out on your phones and everything and it should work quite well.', 'start': 9587.05, 'duration': 4.104}, {'end': 9597.755, 'text': "All right, hopefully you stuck with me till the end here and you've learned a massive amount.", 'start': 9592.273, 'duration': 5.482}], 'summary': 'App and website designed in course, functional on phones, a massive amount learned.', 'duration': 24.401, 'max_score': 9573.354, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw9573354.jpg'}], 'start': 7853.402, 'title': 'Responsive web design and css styling', 'summary': 'Discusses implementing media queries for responsive design targeting mobile and desktop resolutions, making various css adjustments using media queries to control font sizes, margins, padding, image widths, and layout positioning, applying css to style and animate elements, and covering css adjustments for big screen sizes with javascript implementation for a mobile menu.', 'chapters': [{'end': 8083.444, 'start': 7853.402, 'title': 'Responsive design and media queries', 'summary': 'Discusses implementing media queries for responsive design, beginning with a mobile-first approach and later targeting desktop resolutions, specifically focusing on the application of a media query with a minimum width of 650 pixels to adjust the layout.', 'duration': 230.042, 'highlights': ['The chapter discusses implementing media queries for responsive design, beginning with a mobile-first approach. The discussion starts with the concept of mobile-first CSS and the need for responsive design to address issues with the layout on different viewports.', 'Application of a media query with a minimum width of 650 pixels to adjust the layout. The chapter explains the process of determining the appropriate minimum width for the media query based on viewport dimensions and demonstrates the adjustment of the layout using a specific example of changing the width of a server element at 650 pixels.']}, {'end': 8668.27, 'start': 8084.205, 'title': 'Css media queries adjustments', 'summary': 'Discusses making various css adjustments using media queries to control font sizes, margins, padding, image widths, and layout positioning, with specific values and percentages applied at different viewport sizes such as 650, 875, and 1024, to enhance the visual layout and alignment of elements.', 'duration': 584.065, 'highlights': ['Using media queries to adjust font sizes, margins, padding, image widths, and layout positioning at different viewport sizes such as 650, 875, and 1024, to enhance the visual layout and alignment of elements, with specific values and percentages applied. (Relevance: 5)', 'Applying specific CSS properties and values, such as font size, margin, padding, width, and display, to elements like H1, sub head, blue container, image, UL, LI, paragraph, gray container, nav UL, and CTA class, to control their appearance and spacing at different viewport sizes. (Relevance: 4)', 'Using media queries and specific CSS rules to control the layout and alignment of elements, including adjusting margin, padding, and spacing to create a visually appealing design across different viewport sizes, such as mobile, tablet, and desktop. (Relevance: 3)']}, {'end': 9084.891, 'start': 8670.154, 'title': 'Css styling and animation', 'summary': 'Covers applying css to style and animate elements, including adjusting display properties, resetting styling, and implementing animations using keyframes and vendor prefixes.', 'duration': 414.737, 'highlights': ['The chapter covers applying CSS to style and animate elements, including adjusting display properties, resetting styling, and implementing animations using keyframes and vendor prefixes.', 'The instructor demonstrates changing the display properties to show and hide elements, with the desktop version showing up at 40% width and different margin settings compared to the mobile version.', 'The detailed explanation of resetting styling includes changing the position, width, background, height, and display properties, along with restyling links and addressing hover behaviors.', 'The section on implementing animations covers using keyframes to define movement and the importance of considering vendor prefixes for CSS properties to ensure compatibility across browsers.']}, {'end': 9617.561, 'start': 9086.392, 'title': 'Css media query and javascript menu', 'summary': 'Covers css adjustments for big screen sizes, with changes to server icon width and container size, as well as javascript implementation for a mobile menu, resulting in a functioning website and a recommendation for front-end development practice.', 'duration': 531.169, 'highlights': ['CSS adjustments for big screen sizes The chapter discusses adjusting server icon width to 40% and container size to 70% for 1600 pixels and beyond.', 'JavaScript implementation for a mobile menu The chapter explains the process of using JavaScript to create a functioning mobile menu, including adding event listeners and toggling CSS classes.', 'Recommendation for front-end development practice The chapter encourages practicing front-end development by creating pages and implementing existing UI designs with HTML, CSS, and JavaScript.']}], 'duration': 1764.159, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8gNrZ4lAnAw/pics/8gNrZ4lAnAw7853402.jpg', 'highlights': ['The chapter discusses implementing media queries for responsive design, beginning with a mobile-first approach.', 'Using media queries to adjust font sizes, margins, padding, image widths, and layout positioning at different viewport sizes such as 650, 875, and 1024, to enhance the visual layout and alignment of elements, with specific values and percentages applied.', 'Applying specific CSS properties and values, such as font size, margin, padding, width, and display, to elements like H1, sub head, blue container, image, UL, LI, paragraph, gray container, nav UL, and CTA class, to control their appearance and spacing at different viewport sizes.', 'The chapter covers applying CSS to style and animate elements, including adjusting display properties, resetting styling, and implementing animations using keyframes and vendor prefixes.', 'CSS adjustments for big screen sizes The chapter discusses adjusting server icon width to 40% and container size to 70% for 1600 pixels and beyond.', 'JavaScript implementation for a mobile menu The chapter explains the process of using JavaScript to create a functioning mobile menu, including adding event listeners and toggling CSS classes.', 'Recommendation for front-end development practice The chapter encourages practicing front-end development by creating pages and implementing existing UI designs with HTML, CSS, and JavaScript.']}], 'highlights': ['Skillshare.com offers 25,000 classes in coding, design, and business, providing the first two months free for the first 500 subscribers.', 'The chapter introduces a crash course in front-end development, focusing on implementing UI design using HTML, CSS, and JavaScript for beginners.', 'The importance of understanding HTML, CSS, and front-end development is emphasized, targeting absolute beginners.', 'Setting up a development environment with a step-by-step guide for creating a folder, installing Visual Studio Code, and setting up a new HTML file.', 'HTML is a language for building web pages, defining different areas of a page using elements.', 'Understanding the difference between closing elements and singletons, and the use of HTML attributes and their importance, like the alt tag for screen readers and HTML validation using tools such as validator.w3.org.', 'CSS selectors and declarations Detailed explanation of CSS selectors and declarations, empowering beginners to understand and use CSS effectively in styling web elements.', 'Media queries for responsive design In-depth coverage of media queries for responsive design, enabling beginners to understand and implement adaptive web layouts for varying screen sizes.', 'The importance of understanding HTML, CSS, and JavaScript as foundational skills for front-end development.', 'Setting up live server for automatic refresh Using live server to open the default browser and automatically refresh when the file is saved.', 'Mobile-first CSS and UI design Implementing mobile-first CSS and UI design, focusing on the desktop and mobile versions of the layout.', 'The chapter discusses how to display an SVG image using the IMG element, emphasizing the use of scalable vector graphics (SVG) as opposed to rastered graphics like JPEG or PNG for elements like a logo.', "The process involves creating an SVG graphic with the alt text 'exit menu' and attaching an ID 'exit' to it, along with a class 'exit-BTN' to style it specifically and hide it during desktop mode.", 'JavaScript is used to detect clicks on the exit button and automatically add a CSS class to hide it along with the rest of the menu.', 'Emphasizing the importance of proper formatting for readability and structure in HTML', 'Explaining the CSS font family property and values, including the use of Montserrat as a web font available in Google Web Fonts.', 'Experimenting with percentages to optimize the interface for different screen sizes, such as using 45% for fluid white space and 70% for graphic size.', 'Creating a responsive image based on percentage width and adjusting font sizes using CSS, with emphasis on the need for UI monitoring for changes.', 'Using border radius property to create rounded corners and achieving a specific aesthetic in the container.', 'The chapter discusses implementing media queries for responsive design, beginning with a mobile-first approach.', 'Using media queries to adjust font sizes, margins, padding, image widths, and layout positioning at different viewport sizes such as 650, 875, and 1024, to enhance the visual layout and alignment of elements, with specific values and percentages applied.', 'Applying specific CSS properties and values, such as font size, margin, padding, width, and display, to elements like H1, sub head, blue container, image, UL, LI, paragraph, gray container, nav UL, and CTA class, to control their appearance and spacing at different viewport sizes.', 'The chapter covers applying CSS to style and animate elements, including adjusting display properties, resetting styling, and implementing animations using keyframes and vendor prefixes.', 'CSS adjustments for big screen sizes The chapter discusses adjusting server icon width to 40% and container size to 70% for 1600 pixels and beyond.', 'JavaScript implementation for a mobile menu The chapter explains the process of using JavaScript to create a functioning mobile menu, including adding event listeners and toggling CSS classes.', 'Recommendation for front-end development practice The chapter encourages practicing front-end development by creating pages and implementing existing UI designs with HTML, CSS, and JavaScript.']}