title
HTML / CSS Tutorial – Create an Order Summary Component

description
Learn HTML and CSS by creating an order summary component. You can apply the concepts from this video to other types of front-end elements and projects. ✏️ Madison Kanna created this course. Check out her channel: https://www.youtube.com/c/MadisonKanna 💻 Code: https://github.com/Madisonkanna/tutorial-order-summary-component 🔗 Project: https://www.frontendmentor.io/challenges/order-summary-component-QlPmajDUj ⭐️ Course Contents ⭐️ ⌨️ (0:00:00) Intro ⌨️ (0:02:26) How websites work ⌨️ (0:05:05) Intro to HTML and CSS ⌨️ (0:03:29) Server and Client Model ⌨️ (0:06:45) What is a component? ⌨️ (0:09:51) Intro To Design Tools ⌨️ (0:11:31) Starter project files ⌨️ (0:17:42) Terminals ⌨️ (0:18:46) Creating the project ⌨️ (0:20:21) Creating our index.html file ⌨️ (0:24:29) HTML Body Tag ⌨️ (0:29:33) HTML heading tags ⌨️ (0:30:21) HTML Basics ⌨️ (0:32:52) HTML Syntax ⌨️ (0:36:06) CSS Basics ⌨️ (0:36:42) Adding CSS To our HTML ⌨️ (0:39:16) CSS Selectors ⌨️ (0:42:30) HTML, CSS and JS ⌨️ (0:46:01) The Div Tag ⌨️ (0:48:31) CSS Variables ⌨️ (0:52:15) Adding the background image ⌨️ (0:55:31) Adding background colors ⌨️ (0:56:53) DevTools ⌨️ (0:59:03) CSS Inheritance ⌨️ (1:01:41) CSS Specificity ⌨️ (1:03:51) Adding the card title ⌨️ (1:05:24) Adding the card image ⌨️ (1:09:45) Building the card ⌨️ (1:10:50) The CSS Box Model ⌨️ (1:13:24) CSS Box Model in action ⌨️ (1:15:32) CSS Shorthands ⌨️ (1:18:02) Default styles ⌨️ (1:18:21) Box-sizing ⌨️ (1:22:15) Styling the card ⌨️ (1:23:25) Adding the front ⌨️ (1:24:42) The CSS Overflow Property ⌨️ (1:26:41) The Button tag ⌨️ (1:28:21) Styling the buttons ⌨️ (1:33:28) Building the plan container ⌨️ (1:35:18) Adding the change link ⌨️ (1:35:40) Styling the plan container ⌨️ (1:39:07) Centering content in the card ⌨️ (1:39:56) Centering the card ⌨️ (1:40:48) Final tweaks ⌨️ (1:41:37) Outro 🎉 Thanks to our Champion and Sponsor supporters: 👾 Raymond Odero 👾 Agustín Kussrow 👾 aldo ferretti 👾 Otis Morgan 👾 DeezMaster -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news

detail
{'title': 'HTML / CSS Tutorial – Create an Order Summary Component', 'heatmap': [{'end': 5077.331, 'start': 5013.545, 'weight': 1}], 'summary': 'Tutorial series on html and css covers beginner basics and practical application, including building an order summary component, creating desktop views, using css selectors, properties, specificity, shorthand, devtools, and creating stylish designs.', 'chapters': [{'end': 914.569, 'segs': [{'end': 48.93, 'src': 'embed', 'start': 0.129, 'weight': 0, 'content': [{'end': 5.974, 'text': "This beginner's course will help you learn HTML and CSS by building a real world project.", 'start': 0.129, 'duration': 5.845}, {'end': 8.196, 'text': 'Madison Kanna teaches this course.', 'start': 6.614, 'duration': 1.582}, {'end': 11.278, 'text': 'She is an experienced front end engineer.', 'start': 8.836, 'duration': 2.442}, {'end': 16.663, 'text': 'She is excellent at breaking down things for beginners and explaining the fundamentals of web development.', 'start': 11.639, 'duration': 5.024}, {'end': 25.07, 'text': "Hey everyone, I'm Madison and today we're going to learn HTML and CSS by building an order summary component.", 'start': 17.784, 'duration': 7.286}, {'end': 27.872, 'text': 'This course is for complete beginners.', 'start': 25.81, 'duration': 2.062}, {'end': 32.253, 'text': "If you don't know any HTML or CSS, then this course is for you.", 'start': 28.43, 'duration': 3.823}, {'end': 41.883, 'text': 'This course is also for you if you do know some HTML and CSS, but you want to cement your understanding of them by building something.', 'start': 33.335, 'duration': 8.548}, {'end': 48.93, 'text': 'By the end of this course, you will have a professionally designed project that you can use in your developer portfolio.', 'start': 42.944, 'duration': 5.986}], 'summary': "Madison kanna's course teaches html and css to beginners by building an order summary component, suitable for complete beginners or those looking to solidify their understanding, resulting in a professionally designed project for their portfolio.", 'duration': 48.801, 'max_score': 0.129, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU129.jpg'}, {'end': 135.661, 'src': 'embed', 'start': 107.332, 'weight': 3, 'content': [{'end': 110.313, 'text': "Today we're going to build this order summary component that we see here.", 'start': 107.332, 'duration': 2.981}, {'end': 116.515, 'text': 'The first thing you need to do is sign up for a free account on Frontend Mentor and start this challenge.', 'start': 111.113, 'duration': 5.402}, {'end': 119.276, 'text': "Again, you won't be paying anything in this course.", 'start': 117.035, 'duration': 2.241}, {'end': 125.258, 'text': "If you haven't already, go ahead and go to frontendmentor.io and sign up for your free account.", 'start': 119.756, 'duration': 5.502}, {'end': 128.258, 'text': "Next, let's actually go to our project.", 'start': 126.538, 'duration': 1.72}, {'end': 131.257, 'text': "Here's our order summary component.", 'start': 129.656, 'duration': 1.601}, {'end': 135.661, 'text': 'Before we talk about what an order summary component is,', 'start': 132.118, 'duration': 3.543}], 'summary': 'Build an order summary component, sign up for free at frontend mentor to start the challenge.', 'duration': 28.329, 'max_score': 107.332, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU107332.jpg'}, {'end': 309.159, 'src': 'embed', 'start': 285.089, 'weight': 4, 'content': [{'end': 291.952, 'text': 'HTML allows your websites to display text, images, videos, like anything you see on websites today.', 'start': 285.089, 'duration': 6.863}, {'end': 297.974, 'text': 'Front-end developers such as me use HTML and CSS to make websites look good.', 'start': 292.692, 'duration': 5.282}, {'end': 305.037, 'text': "We also use other things such as JavaScript and other tools and frameworks, but that's a bit beyond the scope of this course.", 'start': 298.715, 'duration': 6.322}, {'end': 309.159, 'text': 'HTML is the foundation of all websites.', 'start': 306.318, 'duration': 2.841}], 'summary': 'Html is the foundation of websites, used by front-end developers to display text, images, and videos.', 'duration': 24.07, 'max_score': 285.089, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU285089.jpg'}, {'end': 856.239, 'src': 'embed', 'start': 820.235, 'weight': 5, 'content': [{'end': 822.616, 'text': "Let's briefly go over what our starter files include.", 'start': 820.235, 'duration': 2.381}, {'end': 825.857, 'text': 'First, we see this design folder.', 'start': 824.056, 'duration': 1.801}, {'end': 832.139, 'text': 'In here, we simply have different pictures of what our app or our component will look like.', 'start': 827.257, 'duration': 4.882}, {'end': 840.642, 'text': 'And again, if you work as a developer, you will usually be given designs by your designer in a tool like Figma or Sketch.', 'start': 834, 'duration': 6.642}, {'end': 845.904, 'text': 'But for today, we will be looking at these pictures to reference as we build our app.', 'start': 841.402, 'duration': 4.502}, {'end': 856.239, 'text': "As a side note, throughout the course I'm going to call what we're building either an app or a component, and sometimes I might just call this a card,", 'start': 847.392, 'duration': 8.847}], 'summary': 'Starter files include design folder with app/component pictures for reference.', 'duration': 36.004, 'max_score': 820.235, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU820235.jpg'}], 'start': 0.129, 'title': "Html and css beginner's course and building order summary component", 'summary': "Covers a beginner's course on html and css, aimed at complete beginners, taught by experienced front end engineer madison kanna. it also discusses the process of building an order summary component, covering the basics of frontend mentor, the significance of html and css in web development, and the use of starter files and active states in the project.", 'chapters': [{'end': 48.93, 'start': 0.129, 'title': "Html and css beginner's course", 'summary': "Covers a beginner's course on html and css, taught by experienced front end engineer madison kanna, aimed at complete beginners and those wanting to solidify their understanding of html and css by building a real-world project, culminating in a professionally designed project for their developer portfolio.", 'duration': 48.801, 'highlights': ["Madison Kanna, an experienced front end engineer, teaches a beginner's course on HTML and CSS by building a real world project.", 'The course is designed for complete beginners and individuals seeking to solidify their understanding of HTML and CSS.', 'By the end of the course, participants will have a professionally designed project for their developer portfolio.']}, {'end': 914.569, 'start': 50.37, 'title': 'Building order summary component', 'summary': 'Discusses the process of building an order summary component, covering the basics of frontend mentor, the significance of html and css in web development, and the use of starter files and active states in the project.', 'duration': 864.199, 'highlights': ['Frontend Mentor and Order Summary Component Frontend Mentor is a platform for improving coding skills by building professionally designed projects, and the project involves creating an order summary component with starter files.', 'Importance of HTML and CSS in Web Development The discussion emphasizes the role of HTML and CSS in building websites, highlighting their use in displaying text, images, and videos.', "Starter Files and Active States The starter files provided include different pictures of the component's design, and active states are explained as the interactivity experienced when hovering over elements."]}], 'duration': 914.44, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU129.jpg', 'highlights': ["Madison Kanna, an experienced front end engineer, teaches a beginner's course on HTML and CSS by building a real world project.", 'The course is designed for complete beginners and individuals seeking to solidify their understanding of HTML and CSS.', 'By the end of the course, participants will have a professionally designed project for their developer portfolio.', 'Frontend Mentor is a platform for improving coding skills by building professionally designed projects, and the project involves creating an order summary component with starter files.', 'The discussion emphasizes the role of HTML and CSS in building websites, highlighting their use in displaying text, images, and videos.', "The starter files provided include different pictures of the component's design, and active states are explained as the interactivity experienced when hovering over elements."]}, {'end': 1749.172, 'segs': [{'end': 959.746, 'src': 'embed', 'start': 915.629, 'weight': 0, 'content': [{'end': 919.851, 'text': "For our purposes today, we're just going to focus on building the desktop view.", 'start': 915.629, 'duration': 4.222}, {'end': 926.755, 'text': "If you like as an extra challenge when you're finished with this course, you can work on building the mobile view.", 'start': 921.412, 'duration': 5.343}, {'end': 929.396, 'text': "That's when you'll learn about things called media queries.", 'start': 927.015, 'duration': 2.381}, {'end': 931.657, 'text': 'Okay, so moving on.', 'start': 930.616, 'duration': 1.041}, {'end': 938.308, 'text': 'We also have this folder of images and this is just going to be all the images that we use in our app.', 'start': 932.523, 'duration': 5.785}, {'end': 947.796, 'text': "Earlier I noted that web files are HTML files, but they can also be other files such as images, so we'll be putting these into our app.", 'start': 940.009, 'duration': 7.787}, {'end': 953.481, 'text': 'Now this is a bit beyond the scope of the course, but the next file we have is this gitignore.', 'start': 949.317, 'duration': 4.164}, {'end': 959.746, 'text': "This is if you're using git and GitHub to commit your code and then put it on GitHub.", 'start': 954.441, 'duration': 5.305}], 'summary': 'Focus on building desktop view, consider mobile view as an extra challenge. introduce media queries and include images and gitignore file.', 'duration': 44.117, 'max_score': 915.629, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU915629.jpg'}, {'end': 1029.457, 'src': 'embed', 'start': 984.173, 'weight': 5, 'content': [{'end': 992.194, 'text': 'In this index.html file, we have a HTML setup as well as the information we need to build our car or our app.', 'start': 984.173, 'duration': 8.021}, {'end': 999.516, 'text': "And we actually could start coding in this file, but we're going to create a new folder to build our app.", 'start': 993.474, 'duration': 6.042}, {'end': 1005.917, 'text': "We're going to create a new folder to build our app because I want us to build this app completely from scratch.", 'start': 1000.036, 'duration': 5.881}, {'end': 1009.178, 'text': "Next up, we have a few read me's.", 'start': 1007.197, 'duration': 1.981}, {'end': 1014.379, 'text': 'Now these are all really just telling us about the project and how you can complete this challenge.', 'start': 1009.818, 'duration': 4.561}, {'end': 1023.552, 'text': 'Lastly, we have our style guide and this is going to show us the font colors and the font family that we need for our application.', 'start': 1015.785, 'duration': 7.767}, {'end': 1029.457, 'text': 'This is going to help us style our project so that it looks as close to the designs as possible.', 'start': 1024.532, 'duration': 4.925}], 'summary': "Html file contains setup for building app from scratch. read me's and style guide provided for project completion.", 'duration': 45.284, 'max_score': 984.173, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU984173.jpg'}, {'end': 1085.822, 'src': 'embed', 'start': 1054.87, 'weight': 8, 'content': [{'end': 1056.031, 'text': "So I'm gonna click iTerm.", 'start': 1054.87, 'duration': 1.161}, {'end': 1063.257, 'text': "Okay, so this is opened and then I'm going to make it a little bit bigger so you can see it.", 'start': 1058.914, 'duration': 4.343}, {'end': 1070.674, 'text': "If you don't know what a terminal is yet, A terminal is just a tool you can use to work with your computer.", 'start': 1064.098, 'duration': 6.576}, {'end': 1074.016, 'text': 'You can type commands into your terminal.', 'start': 1071.995, 'duration': 2.021}, {'end': 1080.539, 'text': "Terminals can seem really scary at first, but they're not too bad once you learn a bit more about them.", 'start': 1075.316, 'duration': 5.223}, {'end': 1085.822, 'text': "OK, next we're going to create a new repository for our order summary component.", 'start': 1081.259, 'duration': 4.563}], 'summary': 'Demonstrating the usage of iterm and creating a new repository for order summary component.', 'duration': 30.952, 'max_score': 1054.87, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU1054870.jpg'}, {'end': 1154.674, 'src': 'embed', 'start': 1128.504, 'weight': 1, 'content': [{'end': 1135.892, 'text': "OK, so next up, we're going to use the command mkdir and this will create a new repository or a new folder,", 'start': 1128.504, 'duration': 7.388}, {'end': 1138.435, 'text': "and we're going to name it order summary component.", 'start': 1135.892, 'duration': 2.543}, {'end': 1144.148, 'text': 'This creates this new repository with this name.', 'start': 1141.687, 'duration': 2.461}, {'end': 1154.674, 'text': 'The next thing we want to do is we want to open up this order summary component repo that we just created and we want to open up this project inside of our text editor.', 'start': 1144.789, 'duration': 9.885}], 'summary': "Using mkdir command, created 'order summary component' repository and opened it in text editor.", 'duration': 26.17, 'max_score': 1128.504, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU1128504.jpg'}, {'end': 1516.057, 'src': 'embed', 'start': 1486.81, 'weight': 9, 'content': [{'end': 1491.191, 'text': 'So in other words, inside of our body tag, all of our HTML will live here.', 'start': 1486.81, 'duration': 4.381}, {'end': 1492.819, 'text': 'This is where it all goes.', 'start': 1491.738, 'duration': 1.081}, {'end': 1495.541, 'text': "Let's actually write out some HTML.", 'start': 1493.539, 'duration': 2.002}, {'end': 1501.446, 'text': "We want to create our order summary component, but first let's just write a hello world.", 'start': 1496.582, 'duration': 4.864}, {'end': 1508.551, 'text': "We're going to use a bold tag and we're going to say hello world and we're going to hit save.", 'start': 1503.447, 'duration': 5.104}, {'end': 1516.057, 'text': "Again, you'll see my auto formatter, which is just pushing this tag over here, kind of indenting the code and making it look nice.", 'start': 1509.372, 'duration': 6.685}], 'summary': "Creating a basic html order summary component with 'hello world' using bold tag.", 'duration': 29.247, 'max_score': 1486.81, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU1486810.jpg'}, {'end': 1754.616, 'src': 'embed', 'start': 1729.64, 'weight': 10, 'content': [{'end': 1737.785, 'text': "However, since we are basically just getting started, and we don't have any fancy tools yet, we're just going to be manually refreshing our page.", 'start': 1729.64, 'duration': 8.145}, {'end': 1741.027, 'text': "But if this drives you crazy, don't worry.", 'start': 1738.546, 'duration': 2.481}, {'end': 1749.172, 'text': "It drives a lot of developers crazy and there's a lot of tools these days so that you don't have to manually refresh every time you write code that is different or new.", 'start': 1741.227, 'duration': 7.945}, {'end': 1754.616, 'text': 'As I said, once we have refreshed, we can see that the bold we had before is gone.', 'start': 1750.333, 'duration': 4.283}], 'summary': 'Developers manually refresh page, but tools available to automate. bold text disappeared after refresh.', 'duration': 24.976, 'max_score': 1729.64, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU1729640.jpg'}], 'start': 915.629, 'title': 'Creating desktop view and order summary component', 'summary': 'Focuses on building the desktop view for an app, involving image handling, folder creation, and terminal usage, as well as setting up an order summary component, creating a repository, writing html code, and emphasizing fundamental concepts for developers. additionally, it highlights the need to manually refresh the browser to view code changes.', 'chapters': [{'end': 1080.539, 'start': 915.629, 'title': 'Building desktop view', 'summary': 'Focuses on building the desktop view for an app, including working with images, creating folders, and using the terminal for project building.', 'duration': 164.91, 'highlights': ['The chapter focuses on building the desktop view for an app. The main focus of the chapter is building the desktop view for the app.', 'Using media queries for building the mobile view can be an extra challenge after completing the course. An extra challenge of building the mobile view with media queries is offered after completing the course.', 'The folder contains all the images used in the app. A folder with all the app images is provided.', 'A gitignore file is included for specifying files to be ignored when using git and GitHub. The gitignore file specifies files to be ignored when using git and GitHub.', 'The index.html file contains the HTML setup and information for building the app. The index.html file contains the necessary setup and information for building the app.', "The read me's provide information on completing the project. The read me's offer guidance on completing the project.", 'The style guide contains font colors and font family information for styling the project. The style guide provides information for styling the project with font colors and font family.', 'The chapter involves using the terminal tool for working with the computer. The chapter involves using the terminal tool for working with the computer.']}, {'end': 1749.172, 'start': 1081.259, 'title': 'Setting up order summary component', 'summary': 'Covers creating a new repository, setting up an order summary component, and writing the initial html code, emphasizing the importance of fundamental concepts for developers and the need to manually refresh the browser to view code changes.', 'duration': 667.913, 'highlights': ["The chapter covers creating a new repository and setting up an order summary component. The speaker explains the process of creating a new repository for the order summary component to store the project's code, highlighting the significance of repositories for developers.", "The initial HTML code is written for the order summary component, emphasizing the importance of fundamental concepts for developers. The speaker highlights the significance of understanding fundamental concepts and assures their relevance throughout a developer's career, using the example of creating the first HTML file.", 'The need to manually refresh the browser to view code changes is explained, with a mention of the possibility of using automatic refresh tools in the future. The speaker addresses the manual process of refreshing the browser to view code changes, acknowledging the inconvenience and mentioning the availability of automatic refresh tools for developers.']}], 'duration': 833.543, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU915629.jpg', 'highlights': ['The chapter focuses on building the desktop view for the app.', 'The chapter covers creating a new repository and setting up an order summary component.', 'Using media queries for building the mobile view can be an extra challenge after completing the course.', 'A folder with all the app images is provided.', 'A gitignore file specifies files to be ignored when using git and GitHub.', 'The index.html file contains the necessary setup and information for building the app.', "The read me's offer guidance on completing the project.", 'The style guide provides information for styling the project with font colors and font family.', 'The chapter involves using the terminal tool for working with the computer.', 'The initial HTML code is written for the order summary component, emphasizing the importance of fundamental concepts for developers.', 'The need to manually refresh the browser to view code changes is explained, with a mention of the possibility of using automatic refresh tools in the future.']}, {'end': 2592.976, 'segs': [{'end': 1869.51, 'src': 'embed', 'start': 1843.624, 'weight': 1, 'content': [{'end': 1848.525, 'text': 'HTML is absolutely a valid language that programmers use.', 'start': 1843.624, 'duration': 4.901}, {'end': 1851.426, 'text': 'However, it is not a programming language.', 'start': 1849.345, 'duration': 2.081}, {'end': 1853.726, 'text': 'It is actually a markup language.', 'start': 1851.666, 'duration': 2.06}, {'end': 1858.407, 'text': "What's the difference, then, between a markup language and a programming language?", 'start': 1854.467, 'duration': 3.94}, {'end': 1864.269, 'text': 'Programming languages like JavaScript use logic to control things on the page.', 'start': 1859.868, 'duration': 4.401}, {'end': 1869.51, 'text': "For example, let's think about our buttons that are in the order summary component design.", 'start': 1864.969, 'duration': 4.541}], 'summary': 'Html is a markup language, not a programming language. javascript uses logic to control elements on the page.', 'duration': 25.886, 'max_score': 1843.624, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU1843624.jpg'}, {'end': 1958.766, 'src': 'embed', 'start': 1918.314, 'weight': 0, 'content': [{'end': 1921.595, 'text': 'then what does a markup language like HTML actually do?', 'start': 1918.314, 'duration': 3.281}, {'end': 1926.277, 'text': 'HTML is the code that is used to structure a web page and its content.', 'start': 1922.456, 'duration': 3.821}, {'end': 1933.274, 'text': 'HTML consists of a series of elements which you use to wrap different parts of the content on your webpage.', 'start': 1927.35, 'duration': 5.924}, {'end': 1937.017, 'text': 'We saw this a moment ago when we created our Hello World.', 'start': 1934.015, 'duration': 3.002}, {'end': 1940.96, 'text': 'Websites can have only HTML on them and nothing else.', 'start': 1937.757, 'duration': 3.203}, {'end': 1944.522, 'text': 'You can build a site with just HTML and CSS.', 'start': 1941.56, 'duration': 2.962}, {'end': 1958.766, 'text': "However, it will probably be a boring and ugly website because it won't have any interactivity using JavaScript and the site will also not look very pretty because it wouldn't have any CSS,", 'start': 1944.702, 'duration': 14.064}], 'summary': 'Html structures webpage content using elements. websites can be built with html and css alone, but lack interactivity and aesthetics without javascript and css.', 'duration': 40.452, 'max_score': 1918.314, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU1918314.jpg'}, {'end': 2012.691, 'src': 'embed', 'start': 1987.676, 'weight': 2, 'content': [{'end': 1996.518, 'text': 'The word syntax can seem kind of scary when you first hear it, but syntax refers to the rules that define the structure of a language.', 'start': 1987.676, 'duration': 8.842}, {'end': 2000.819, 'text': 'When you know the syntax of a language, you can use that language.', 'start': 1997.378, 'duration': 3.441}, {'end': 2004.18, 'text': "First up, let's talk about HTML elements.", 'start': 2001.739, 'duration': 2.441}, {'end': 2008.681, 'text': 'Here, this entire thing is an HTML element.', 'start': 2005.14, 'duration': 3.541}, {'end': 2012.691, 'text': 'An HTML element is a basic unit of HTML.', 'start': 2009.71, 'duration': 2.981}], 'summary': 'Syntax defines language structure and html elements are basic units of html.', 'duration': 25.015, 'max_score': 1987.676, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU1987676.jpg'}, {'end': 2127.894, 'src': 'embed', 'start': 2097.239, 'weight': 3, 'content': [{'end': 2099.461, 'text': 'And then next we have the closing tag over here.', 'start': 2097.239, 'duration': 2.222}, {'end': 2106.968, 'text': 'This is the same as the opening tag, except it includes this forward slash before the element name.', 'start': 2100.703, 'duration': 6.265}, {'end': 2111.332, 'text': 'The closing tag tells us where our element ends.', 'start': 2108.27, 'duration': 3.062}, {'end': 2116.257, 'text': 'In this case, this closing tag tells us where our H1 element ends.', 'start': 2112.514, 'duration': 3.743}, {'end': 2121.952, 'text': 'Again, this whole thing here is one HTML element.', 'start': 2118.371, 'duration': 3.581}, {'end': 2127.894, 'text': "Our HTML element is made up of these tags and it's also made up of the content.", 'start': 2122.812, 'duration': 5.082}], 'summary': 'Html element ends with a closing tag containing a forward slash before the element name.', 'duration': 30.655, 'max_score': 2097.239, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU2097239.jpg'}, {'end': 2214.304, 'src': 'embed', 'start': 2157.705, 'weight': 4, 'content': [{'end': 2162.186, 'text': "We're going to right click again and hit new file and we'll say styles.css.", 'start': 2157.705, 'duration': 4.481}, {'end': 2167.347, 'text': "Before we start writing out our CSS, let's dive into some CSS basics.", 'start': 2163.446, 'duration': 3.901}, {'end': 2173.828, 'text': 'What is CSS anyways? CSS stands for cascading style sheets.', 'start': 2168.747, 'duration': 5.081}, {'end': 2179.346, 'text': "It's a styling language that modifies the appearance of the content of web pages.", 'start': 2174.784, 'duration': 4.562}, {'end': 2182.407, 'text': "CSS by itself can't do very much.", 'start': 2180.346, 'duration': 2.061}, {'end': 2186.589, 'text': 'The purpose of CSS is to style markup language.', 'start': 2183.288, 'duration': 3.301}, {'end': 2193.192, 'text': 'In other words, the purpose of CSS is to style HTML elements and make them look great.', 'start': 2187.61, 'duration': 5.582}, {'end': 2200.115, 'text': 'We can actually inject a bit of CSS right into whatever HTML tag we want to style.', 'start': 2194.713, 'duration': 5.402}, {'end': 2201.876, 'text': "Let's go do this.", 'start': 2201.076, 'duration': 0.8}, {'end': 2210.143, 'text': "Next, we're going to add a style sheet, which will be our way of adding CSS to our HTML and connecting the files.", 'start': 2203.26, 'duration': 6.883}, {'end': 2214.304, 'text': "So our app knows that it'll use this CSS that we're about to write.", 'start': 2210.663, 'duration': 3.641}], 'summary': 'Introduction to css, its purpose, and connecting css to html for styling web pages.', 'duration': 56.599, 'max_score': 2157.705, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU2157705.jpg'}, {'end': 2373.484, 'src': 'embed', 'start': 2348.527, 'weight': 6, 'content': [{'end': 2356.173, 'text': "Imagine if we have dozens of HTML tags on our real website, and we're going to have to add this in several different places all over.", 'start': 2348.527, 'duration': 7.646}, {'end': 2358.815, 'text': 'There is an easier way to do this.', 'start': 2357.113, 'duration': 1.702}, {'end': 2362.257, 'text': "Instead, we're going to use CSS selectors.", 'start': 2359.655, 'duration': 2.602}, {'end': 2366.54, 'text': "We'll be using CSS selectors all throughout the rest of the course.", 'start': 2363.318, 'duration': 3.222}, {'end': 2369.903, 'text': 'A core piece of CSS syntax is the selector.', 'start': 2367.021, 'duration': 2.882}, {'end': 2373.484, 'text': 'A CSS selector is the first part of a CSS rule.', 'start': 2370.683, 'duration': 2.801}], 'summary': 'Using css selectors can simplify adding html tags, making it easier to apply throughout the website.', 'duration': 24.957, 'max_score': 2348.527, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU2348527.jpg'}, {'end': 2564.63, 'src': 'embed', 'start': 2540.433, 'weight': 7, 'content': [{'end': 2547.318, 'text': "It's something that we won't be covering, but I want you to understand how JavaScript works with HTML and CSS.", 'start': 2540.433, 'duration': 6.885}, {'end': 2551.121, 'text': 'So you can kind of understand how they holistically work together.', 'start': 2547.759, 'duration': 3.362}, {'end': 2559.508, 'text': "As a front end developer, you're going to use HTML and CSS to build and style the content of your website.", 'start': 2551.862, 'duration': 7.646}, {'end': 2564.63, 'text': 'You would also use JavaScript alongside the HTML and CSS.', 'start': 2560.387, 'duration': 4.243}], 'summary': 'Understanding how javascript works with html and css is essential for front-end developers.', 'duration': 24.197, 'max_score': 2540.433, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU2540433.jpg'}], 'start': 1750.333, 'title': 'Html and css basics', 'summary': 'Introduces the basics of html and css, covering the use of tags to format text and structure web pages, the difference between markup and programming languages, the importance of html syntax, the purpose of tags, the structure of html elements, the role of css in styling, and the use of css selectors, with examples and practical demonstrations.', 'chapters': [{'end': 2012.691, 'start': 1750.333, 'title': 'Introduction to html basics', 'summary': 'Introduces the basics of html, including the use of tags to format text and structure web pages, explaining the difference between markup and programming languages, and the importance of html syntax, with examples and demonstrations.', 'duration': 262.358, 'highlights': ['HTML elements are the basic unit of HTML, used to structure a web page and its content. The transcript explains that HTML elements are used to wrap different parts of the content on a webpage and are the basic unit of HTML.', 'The difference between a markup language like HTML and a programming language like JavaScript is explained, emphasizing that HTML is used for structuring web content, while JavaScript is used for logic and interactivity. The transcript clarifies the difference between markup and programming languages, highlighting that HTML is used for structuring web content, while JavaScript is used for logic and interactivity.', 'Introduction to HTML syntax, defining it as the rules that define the structure of the language, and its significance in building web applications. The chapter introduces HTML syntax as the rules defining the structure of the language and emphasizes its significance in building web applications.']}, {'end': 2592.976, 'start': 2013.712, 'title': 'Html and css basics', 'summary': 'Covers the basics of html and css, including the purpose of tags, the structure of html elements, the role of css in styling, and the use of css selectors to apply styles to html elements, with examples and practical demonstrations.', 'duration': 579.264, 'highlights': ['HTML element structure The chapter explains the structure of HTML elements, including the purpose of opening and closing tags, and the content between them, with the example of the H1 element and its tags.', 'CSS basics and purpose It covers the basics of CSS, explaining its purpose as a styling language for modifying the appearance of web page content and the relationship between CSS and HTML.', 'Application of CSS to HTML elements It demonstrates how to apply CSS to HTML elements by injecting CSS directly into HTML tags and creating a style sheet to connect CSS to HTML, with a practical example of setting background color.', 'Use of CSS selectors It introduces the use of CSS selectors to target and apply styles to specific HTML elements, emphasizing the efficiency of using selectors to avoid repetitive code.', 'Relationship between HTML, CSS, and JavaScript It briefly discusses the role of JavaScript alongside HTML and CSS in front-end development, using an analogy of a house to illustrate the building blocks, styles, and interactivity.']}], 'duration': 842.643, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU1750333.jpg', 'highlights': ['HTML elements are the basic unit of HTML, used to structure a web page and its content.', 'The difference between a markup language like HTML and a programming language like JavaScript is explained.', 'Introduction to HTML syntax, defining it as the rules that define the structure of the language.', 'The chapter explains the structure of HTML elements, including the purpose of opening and closing tags.', 'CSS basics and purpose It covers the basics of CSS, explaining its purpose as a styling language for modifying the appearance of web page content.', 'Application of CSS to HTML elements It demonstrates how to apply CSS to HTML elements by injecting CSS directly into HTML tags and creating a style sheet to connect CSS to HTML.', 'Use of CSS selectors It introduces the use of CSS selectors to target and apply styles to specific HTML elements.', 'Relationship between HTML, CSS, and JavaScript It briefly discusses the role of JavaScript alongside HTML and CSS in front-end development.']}, {'end': 3020.829, 'segs': [{'end': 2643.742, 'src': 'embed', 'start': 2620.512, 'weight': 0, 'content': [{'end': 2628.075, 'text': 'The problem is we already wrote this CSS rule that says we want all H1s to have this background color of aqua.', 'start': 2620.512, 'duration': 7.563}, {'end': 2637.619, 'text': 'Every single H1 tag that we create on this page will get a background color of aqua, and we no longer want that.', 'start': 2629.296, 'duration': 8.323}, {'end': 2643.742, 'text': "So instead, we're going to use another CSS selector that solves this problem.", 'start': 2638.82, 'duration': 4.922}], 'summary': 'Existing css rule for all h1s with background color of aqua needs to be replaced with a different css selector.', 'duration': 23.23, 'max_score': 2620.512, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU2620512.jpg'}, {'end': 2844.428, 'src': 'embed', 'start': 2815.765, 'weight': 1, 'content': [{'end': 2819.788, 'text': 'So the card kind of symbolizes the whole order summary component on the page.', 'start': 2815.765, 'duration': 4.023}, {'end': 2827.333, 'text': 'The div that we just created with the class of card, this div will be the entire component that we see here.', 'start': 2820.969, 'duration': 6.364}, {'end': 2832.998, 'text': 'Everything inside of this div will be the image, the text, and all of the buttons.', 'start': 2828.094, 'duration': 4.904}, {'end': 2840.283, 'text': 'In other words, everything inside of this div with the class of card will be everything inside of our order summary component.', 'start': 2833.838, 'duration': 6.445}, {'end': 2844.428, 'text': "Okay, let's save this and then, if we go back and refresh,", 'start': 2841.226, 'duration': 3.202}], 'summary': 'The card represents the order summary component, containing image, text, and buttons.', 'duration': 28.663, 'max_score': 2815.765, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU2815765.jpg'}], 'start': 2593.936, 'title': 'Css class selectors and working with html and css', 'summary': 'Explains the usage of class selectors in css to style specific html elements and demonstrates practical implementation, while also covering the creation of a div container, application of css properties, and definition of global css variables. it includes creating an order summary card component.', 'chapters': [{'end': 2741.595, 'start': 2593.936, 'title': 'Css class selectors', 'summary': 'Explains the concept of using class selectors in css to target specific html elements and apply styles, resolving the issue of applying a background color to all h1 elements and demonstrating the practical implementation with a specific example.', 'duration': 147.659, 'highlights': ['The chapter demonstrates the use of class selectors in CSS to target specific HTML elements and apply styles, such as giving a particular H1 element a background color of aqua, resolving the issue of applying a background color to all H1 elements (e.g., the second H1 element no longer has the background color of Aqua).', "It explains the need to differentiate between HTML elements and the power of class selectors, highlighting the practical application of creating a class attribute 'aqua element' for the desired H1 tag and implementing a CSS rule for this specific class, effectively solving the problem of unwanted background color for specific elements.", "The chapter emphasizes the practical implementation of using a class selector to assign a specific class attribute 'aqua element' to the desired H1 tag and creating a corresponding CSS rule for this specific class, resulting in the successful application of the background color to only the targeted element."]}, {'end': 3020.829, 'start': 2742.456, 'title': 'Working with html and css', 'summary': 'Covers creating a div container in html, applying css properties like width and background color, and defining global css variables using root, with a focus on creating an order summary card component.', 'duration': 278.373, 'highlights': ['Creating a div container with a class of cart to represent the order summary card component The div tag is used as a container for HTML elements, and in this case, it symbolizes the entire order summary component on the page.', 'Applying CSS properties like width and background color to the div with the class of card A width of 450 pixels and a white background color are applied to the card, visually representing the order summary component.', 'Defining global CSS variables using root to create reusable color values The root is used to declare global CSS variables, allowing for the reuse of color values across the CSS styles.']}], 'duration': 426.893, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU2593936.jpg', 'highlights': ['The chapter demonstrates the use of class selectors in CSS to target specific HTML elements and apply styles, such as giving a particular H1 element a background color of aqua, resolving the issue of applying a background color to all H1 elements (e.g., the second H1 element no longer has the background color of Aqua).', 'Creating a div container with a class of cart to represent the order summary card component The div tag is used as a container for HTML elements, and in this case, it symbolizes the entire order summary component on the page.', 'Applying CSS properties like width and background color to the div with the class of card A width of 450 pixels and a white background color are applied to the card, visually representing the order summary component.']}, {'end': 3805.865, 'segs': [{'end': 3223.219, 'src': 'embed', 'start': 3177.137, 'weight': 4, 'content': [{'end': 3185.581, 'text': 'We can create folders inside of our main repo or inside of our main order summary component folder to keep our files really organized.', 'start': 3177.137, 'duration': 8.444}, {'end': 3190.503, 'text': "After clicking this images folder, we're going to hit command V.", 'start': 3186.081, 'duration': 4.422}, {'end': 3191.904, 'text': "Next we'll close this again.", 'start': 3190.503, 'duration': 1.401}, {'end': 3197.667, 'text': "And then back in our styles.css, we're going to write out body.", 'start': 3191.924, 'duration': 5.743}, {'end': 3223.219, 'text': "So our selector is the body tag in this case and then our styles or our property values are going to be in here and we're going to write background image and then we're going to say URL images and we have this nice auto complete and we're going to grab the pattern image that we want and we're going to hit save.", 'start': 3199.44, 'duration': 23.779}], 'summary': 'Organize files in folders, set background image to body tag in styles.css, and save.', 'duration': 46.082, 'max_score': 3177.137, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU3177137.jpg'}, {'end': 3325.755, 'src': 'embed', 'start': 3299.824, 'weight': 0, 'content': [{'end': 3303.966, 'text': 'The next problem is that we do want this background image to be a little bit bigger.', 'start': 3299.824, 'duration': 4.142}, {'end': 3308.968, 'text': 'So back in our app, we use the background size CSS property for this.', 'start': 3305.166, 'duration': 3.802}, {'end': 3315.631, 'text': 'The background size CSS property sets the size of the elements background image.', 'start': 3310.649, 'duration': 4.982}, {'end': 3319.812, 'text': 'For this particular use case, we want the value of cover.', 'start': 3316.611, 'duration': 3.201}, {'end': 3325.755, 'text': "So we'll say background size, cover, and we'll hit save.", 'start': 3320.693, 'duration': 5.062}], 'summary': "Adjust background image size using css property 'background size: cover'.", 'duration': 25.931, 'max_score': 3299.824, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU3299824.jpg'}, {'end': 3401.171, 'src': 'embed', 'start': 3374.486, 'weight': 5, 'content': [{'end': 3378.048, 'text': 'Going on and looking at our design, figuring out like what should we build next?', 'start': 3374.486, 'duration': 3.562}, {'end': 3387.474, 'text': 'We can see that most of our text inside of our order summary component, or in other words, inside of our card, is this kind of light color.', 'start': 3378.909, 'duration': 8.565}, {'end': 3392.286, 'text': "So let's go add that color to the div that has the card class.", 'start': 3388.143, 'duration': 4.143}, {'end': 3401.171, 'text': "So in here we'll say color var and it is desaturated blue and we'll hit save.", 'start': 3394.167, 'duration': 7.004}], 'summary': 'Design analysis: updating card class with desaturated blue color.', 'duration': 26.685, 'max_score': 3374.486, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU3374486.jpg'}, {'end': 3805.865, 'src': 'embed', 'start': 3754.001, 'weight': 1, 'content': [{'end': 3758.202, 'text': 'And CSS answers this by saying the most specific rule wins.', 'start': 3754.001, 'duration': 4.201}, {'end': 3768.005, 'text': 'And in this case, the most specific rule is the child div with the color of red, because this rule is more specific to this div.', 'start': 3759.342, 'duration': 8.663}, {'end': 3771.506, 'text': 'This is called CSS specificity.', 'start': 3769.264, 'duration': 2.242}, {'end': 3779.052, 'text': "I can never say CSS specificity right, so I'm going to try to say it as infrequently as I possibly can.", 'start': 3772.607, 'duration': 6.445}, {'end': 3792.104, 'text': 'But CSS specificity is the means by which the browsers decide which CSS property values are the most relevant to an element and therefore will be applied.', 'start': 3779.793, 'duration': 12.311}, {'end': 3796.688, 'text': "Now this can seem complex, so let's look at a great cheat sheet for this.", 'start': 3792.984, 'duration': 3.704}, {'end': 3802.982, 'text': 'Okay, so this is a really fun little site called CSS Specificity.', 'start': 3797.498, 'duration': 5.484}, {'end': 3805.865, 'text': 'I, again, cannot really say that without getting tongue-tied.', 'start': 3803.002, 'duration': 2.863}], 'summary': 'Css specificity determines the most relevant css property values for an element.', 'duration': 51.864, 'max_score': 3754.001, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU3754001.jpg'}], 'start': 3021.77, 'title': 'Css properties and practical application', 'summary': 'Covers css variables for background styling, including creation and application, setting a background image with the body tag, adjusting zoom level and color property, understanding inheritance and specificity of css properties, with emphasis on practical application and debugging.', 'chapters': [{'end': 3227.868, 'start': 3021.77, 'title': 'Css variable and background styling', 'summary': 'Covers the usage of css variables for background styling, including the creation of a css variable, demonstration of its application, and setting a background image with the body tag.', 'duration': 206.098, 'highlights': ["The chapter demonstrates the creation and application of a CSS variable for background styling. The speaker explains the process of creating a CSS variable 'dark blue' and applying it as a background color, showcasing the functionality of CSS variables.", 'The speaker discusses the usage of the body tag for setting a background image and color. The tutorial includes the steps for setting a background image and color for the body tag, emphasizing the importance of organizing files within folders for efficient management.', 'The tutorial emphasizes the organization of files within folders for efficient management. The speaker highlights the importance of creating folders within the main repository or component folder to maintain file organization, ensuring efficient file management.']}, {'end': 3805.865, 'start': 3228.169, 'title': 'Css zoom and color property', 'summary': 'Discusses adjusting the zoom level of the app, modifying the background image size and color, and understanding the inheritance and specificity of css properties, with emphasis on practical application and debugging.', 'duration': 577.696, 'highlights': ['The background image is adjusted to cover the entire space by using the background size CSS property with the value of cover, resulting in a fantastic visual appearance, similar to the design.', 'The color property is utilized to set the text color of the order summary component, achieving the desired light color.', 'Understanding CSS inheritance and specificity is crucial for identifying the source of styles and determining which CSS rule takes precedence when there are conflicting property values.', 'The most specific CSS rule wins, as demonstrated when the child div overrides the inherited color from the parent div by setting a more specific color property, showcasing the concept of CSS specificity.']}], 'duration': 784.095, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU3021770.jpg', 'highlights': ['The background image is adjusted to cover the entire space using the background size CSS property with the value of cover, resulting in a fantastic visual appearance, similar to the design.', 'Understanding CSS inheritance and specificity is crucial for identifying the source of styles and determining which CSS rule takes precedence when there are conflicting property values.', 'The most specific CSS rule wins, as demonstrated when the child div overrides the inherited color from the parent div by setting a more specific color property, showcasing the concept of CSS specificity.', 'The chapter demonstrates the creation and application of a CSS variable for background styling, showcasing the functionality of CSS variables.', 'The speaker discusses the usage of the body tag for setting a background image and color, emphasizing the importance of organizing files within folders for efficient management.', 'The color property is utilized to set the text color of the order summary component, achieving the desired light color.', 'The tutorial emphasizes the organization of files within folders for efficient management, highlighting the importance of creating folders within the main repository or component folder to maintain file organization.']}, {'end': 4431.062, 'segs': [{'end': 3846.373, 'src': 'embed', 'start': 3806.825, 'weight': 0, 'content': [{'end': 3811.529, 'text': 'But here you can see when you are applying styles to your divs like, what styles will win?', 'start': 3806.825, 'duration': 4.704}, {'end': 3815.872, 'text': 'In other words, what styles will actually get applied in order of importance?', 'start': 3811.629, 'duration': 4.243}, {'end': 3823.899, 'text': "Okay so, now that we've learned about CSS specificity, let's move on and let's work more on our order summary component.", 'start': 3816.953, 'duration': 6.946}, {'end': 3825.04, 'text': "Let's keep building.", 'start': 3824.279, 'duration': 0.761}, {'end': 3827.905, 'text': "We're going to remove this child div.", 'start': 3826.004, 'duration': 1.901}, {'end': 3831.586, 'text': "We're not really going to need it now and we're going to go over here and remove it here.", 'start': 3827.985, 'duration': 3.601}, {'end': 3835.908, 'text': "Back in our designs, let's create our title next.", 'start': 3833.127, 'duration': 2.781}, {'end': 3837.609, 'text': 'This is our order summary title.', 'start': 3836.028, 'duration': 1.581}, {'end': 3842.711, 'text': "Now back inside of our card div, we're going to actually remove this word card.", 'start': 3838.99, 'duration': 3.721}, {'end': 3845.252, 'text': 'This was just kind of placeholder text.', 'start': 3843.412, 'duration': 1.84}, {'end': 3846.373, 'text': "We don't need it anymore.", 'start': 3845.493, 'duration': 0.88}], 'summary': 'Learning css specificity, working on order summary component, removing unnecessary divs.', 'duration': 39.548, 'max_score': 3806.825, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU3806825.jpg'}, {'end': 4019.951, 'src': 'embed', 'start': 3992.82, 'weight': 2, 'content': [{'end': 3996.922, 'text': 'Again, we can use our awesome autocomplete and say illustrationhero.svg.', 'start': 3992.82, 'duration': 4.102}, {'end': 4000.755, 'text': 'and then we can use a closing tag and hit save.', 'start': 3998.373, 'duration': 2.382}, {'end': 4004.758, 'text': 'One last thing we can do is add an alt tag.', 'start': 4002.336, 'duration': 2.422}, {'end': 4009.042, 'text': 'So we can say alt hero image and hit save.', 'start': 4004.818, 'duration': 4.224}, {'end': 4019.951, 'text': 'An alt tag, also known as an alt attribute or an alt description, is an HTML attribute applied to image tags to provide a text alternative.', 'start': 4009.903, 'duration': 10.048}], 'summary': "Using autocomplete, add alt tag 'hero image' to illustrationhero.svg.", 'duration': 27.131, 'max_score': 3992.82, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU3992820.jpg'}, {'end': 4128.513, 'src': 'embed', 'start': 4095.505, 'weight': 3, 'content': [{'end': 4100.389, 'text': 'So if we do want to at some point add another page in our app and use this image again,', 'start': 4095.505, 'duration': 4.884}, {'end': 4106.082, 'text': "then we'll be stuck with this hard-coded width of 450 pixels and we don't want that.", 'start': 4101.02, 'duration': 5.062}, {'end': 4109.184, 'text': "Let's go ahead and actually remove this width.", 'start': 4107.023, 'duration': 2.161}, {'end': 4111.805, 'text': "So we're going to remove this and hit save.", 'start': 4110.004, 'duration': 1.801}, {'end': 4119.828, 'text': "Now, if we ever use this image again elsewhere, it's not going to have this hard-coded width of 450.", 'start': 4113.586, 'duration': 6.242}, {'end': 4128.513, 'text': 'If we go back to our app and we refresh, we can see that this image no longer has the width of 450.', 'start': 4119.828, 'duration': 8.685}], 'summary': 'Removing hard-coded width of 450 pixels for image in app.', 'duration': 33.008, 'max_score': 4095.505, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU4095505.jpg'}, {'end': 4270.328, 'src': 'embed', 'start': 4238.636, 'weight': 4, 'content': [{'end': 4240.377, 'text': 'what exactly are padding and margin?', 'start': 4238.636, 'duration': 1.741}, {'end': 4242.138, 'text': "So let's dive into that right now.", 'start': 4240.797, 'duration': 1.341}, {'end': 4249.773, 'text': "To talk about margin and padding, we're going to talk about one of the most important concepts in CSS, which is the CSS box model.", 'start': 4243.188, 'duration': 6.585}, {'end': 4252.415, 'text': 'Okay, so the CSS box model.', 'start': 4250.934, 'duration': 1.481}, {'end': 4256.038, 'text': 'In CSS, you can think of every element as a box.', 'start': 4253.255, 'duration': 2.783}, {'end': 4261.442, 'text': "So everything you see on a website, whether it's a footer or a menu bar, everything is a box.", 'start': 4256.798, 'duration': 4.644}, {'end': 4270.328, 'text': 'If there is a parent div and there are some children divs inside of it, that parent div you can think of as a box with certain properties,', 'start': 4262.122, 'duration': 8.206}], 'summary': 'Css box model defines elements as boxes, with margin and padding, essential concepts in css.', 'duration': 31.692, 'max_score': 4238.636, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU4238636.jpg'}], 'start': 3806.825, 'title': 'Css specificity, order summary component, image optimization, and css box model', 'summary': 'Covers css specificity, building an order summary component with specific styling and svg image insertion. it also discusses image optimization, css box model, and understanding content, padding, border, and margin.', 'chapters': [{'end': 4019.951, 'start': 3806.825, 'title': 'Css specificity and order summary component', 'summary': 'Covers css specificity and building an order summary component, including adding a title with specific styling, inserting an svg image, and explaining the alt attribute for images.', 'duration': 213.126, 'highlights': ['The chapter covers CSS specificity and the importance of styles in applying to divs. Discusses the application of styles to divs and the importance of winning styles.', 'Building an order summary component by adding a title with specific styling and removing unnecessary elements. Involves removing unnecessary elements and adding a title with specific styling to the order summary component.', 'Adding an SVG image to the order summary component and explaining the alt attribute for images. Involves adding an SVG image to the component and explaining the alt attribute for images.']}, {'end': 4431.062, 'start': 4020.371, 'title': 'Optimizing image width and understanding the css box model', 'summary': 'Discusses optimizing image width, removing hard-coded width, and utilizing css box model to understand content, padding, border, and margin.', 'duration': 410.691, 'highlights': ["The image has a width of 450 pixels, which is exactly the width of our car, but it's not being inherited from the car. The image has a width of 450 pixels, not inherited from the car, impacting its reusability in multiple places.", 'Removing the hard-coded width of 450 pixels allows the image to adapt to different uses, improving its reusability. By removing the hard-coded width of 450 pixels, the image becomes adaptable for various uses, enhancing its reusability.', 'Explaining the CSS box model, which includes content, padding, border, and margin, to understand the properties of HTML elements. Detailed explanation of the CSS box model, comprising content, padding, border, and margin, for better understanding of HTML element properties.']}], 'duration': 624.237, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU3806825.jpg', 'highlights': ['Covers css specificity and the importance of styles in applying to divs.', 'Building an order summary component by adding a title with specific styling and removing unnecessary elements.', 'Adding an SVG image to the order summary component and explaining the alt attribute for images.', 'Removing the hard-coded width of 450 pixels allows the image to adapt to different uses, improving its reusability.', 'Explaining the CSS box model, which includes content, padding, border, and margin, to understand the properties of HTML elements.']}, {'end': 5077.331, 'segs': [{'end': 4459.999, 'src': 'embed', 'start': 4431.502, 'weight': 3, 'content': [{'end': 4434.083, 'text': "Now let's write a little bit in our CSS DevTools.", 'start': 4431.502, 'duration': 2.581}, {'end': 4440.485, 'text': 'And again, just to remind you, when we write in here in our browser, these are just showing us some temporary styles.', 'start': 4434.603, 'duration': 5.882}, {'end': 4444.087, 'text': "But of course, this won't change any of our code in our repo.", 'start': 4440.545, 'duration': 3.542}, {'end': 4448.228, 'text': "Now let's say we want to also add some padding to this paragraph tag.", 'start': 4444.547, 'duration': 3.681}, {'end': 4453.856, 'text': 'So we can say padding and earlier we had that 30 pixels.', 'start': 4449.494, 'duration': 4.362}, {'end': 4455.497, 'text': 'So we can say 30 pixels.', 'start': 4453.976, 'duration': 1.521}, {'end': 4459.999, 'text': 'And if we look and see what happened here, padding is in the green.', 'start': 4456.578, 'duration': 3.421}], 'summary': 'Using css devtools, added 30 pixels padding to paragraph tag.', 'duration': 28.497, 'max_score': 4431.502, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU4431502.jpg'}, {'end': 4520.634, 'src': 'embed', 'start': 4494.352, 'weight': 4, 'content': [{'end': 4499.455, 'text': 'If we wanted to give padding to just the bottom of the div, we can say padding bottom like that.', 'start': 4494.352, 'duration': 5.103}, {'end': 4505.218, 'text': 'Okay So say that you wanted to have different values on the top, the left, the right, and the bottom.', 'start': 4499.895, 'duration': 5.323}, {'end': 4510.3, 'text': 'So you could say padding bottom, 30 pixels, padding top, 25 pixels, padding right.', 'start': 4505.258, 'duration': 5.042}, {'end': 4520.634, 'text': '10 padding left 5 pixels now.', 'start': 4516.672, 'duration': 3.962}], 'summary': 'Css div can have different padding values for top, bottom, left, and right sides, such as 30px, 25px, 10px, and 5px respectively.', 'duration': 26.282, 'max_score': 4494.352, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU4494352.jpg'}, {'end': 4638.464, 'src': 'embed', 'start': 4610.154, 'weight': 0, 'content': [{'end': 4613.216, 'text': 'Then we had to the bottom and then finally to the left.', 'start': 4610.154, 'duration': 3.062}, {'end': 4615.458, 'text': 'So this is a CSS shorthand property.', 'start': 4613.656, 'duration': 1.802}, {'end': 4617.039, 'text': "Okay So we've learned about padding.", 'start': 4615.478, 'duration': 1.561}, {'end': 4618.8, 'text': "Next let's look at margin a bit.", 'start': 4617.359, 'duration': 1.441}, {'end': 4624.184, 'text': 'So again, margin is used to create extra space around the outside of an element.', 'start': 4619.621, 'duration': 4.563}, {'end': 4626.246, 'text': 'So we could say margin 50 pixels.', 'start': 4624.264, 'duration': 1.982}, {'end': 4631.502, 'text': 'And you can see this element now has more space around the outside of it.', 'start': 4627.561, 'duration': 3.941}, {'end': 4635.703, 'text': 'With margin, you can use all of the same shorthand properties that we use with padding.', 'start': 4631.802, 'duration': 3.901}, {'end': 4638.464, 'text': "We also have the content, which we've already gone over.", 'start': 4636.143, 'duration': 2.321}], 'summary': 'Css shorthand properties like padding and margin create extra space around elements. margin 50 pixels increases space.', 'duration': 28.31, 'max_score': 4610.154, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU4610154.jpg'}, {'end': 4777.605, 'src': 'embed', 'start': 4753.626, 'weight': 1, 'content': [{'end': 4761.83, 'text': "Border box tells the browser to account for any border and padding in the values you specify for an element's width and height.", 'start': 4753.626, 'duration': 8.204}, {'end': 4766.612, 'text': "Okay, so first let's remove box sizing.", 'start': 4763.531, 'duration': 3.081}, {'end': 4772.464, 'text': "and we'll remove it so we can kind of see the problem that it solves when we add it back later.", 'start': 4767.222, 'duration': 5.242}, {'end': 4777.605, 'text': 'Okay, so here we have our card and has a width of 450 pixels.', 'start': 4774.084, 'duration': 3.521}], 'summary': "Using border box model to account for padding and border in element's width and height; card has a width of 450 pixels.", 'duration': 23.979, 'max_score': 4753.626, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU4753626.jpg'}, {'end': 4952.408, 'src': 'embed', 'start': 4926.752, 'weight': 2, 'content': [{'end': 4934.277, 'text': "because it's just more intuitive and it solves a lot of problems where our elements are much bigger than we expected them to be.", 'start': 4926.752, 'duration': 7.525}, {'end': 4941.242, 'text': 'Next up, back in our designs, we can see that this text has some space between it.', 'start': 4936.118, 'duration': 5.124}, {'end': 4946.605, 'text': 'But if we look in our app, this text has almost no space between it.', 'start': 4942.622, 'duration': 3.983}, {'end': 4952.408, 'text': "So we'll use line height for this, which can be used to set the distance between text.", 'start': 4947.585, 'duration': 4.823}], 'summary': 'Using line height for text to maintain consistent spacing in designs and app.', 'duration': 25.656, 'max_score': 4926.752, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU4926752.jpg'}, {'end': 5077.331, 'src': 'heatmap', 'start': 5013.545, 'weight': 1, 'content': [{'end': 5015.347, 'text': 'Okay So here we see the font family.', 'start': 5013.545, 'duration': 1.802}, {'end': 5016.748, 'text': "We're going to follow this link.", 'start': 5015.387, 'duration': 1.361}, {'end': 5021.131, 'text': "Okay So now we're going to add the font weights that we want.", 'start': 5017.648, 'duration': 3.483}, {'end': 5026.449, 'text': 'So we want 500, we want 700 and 900.', 'start': 5021.846, 'duration': 4.603}, {'end': 5033.294, 'text': "Awesome The next thing we're going to do is hit import and we're going to copy this link right here.", 'start': 5026.449, 'duration': 6.845}, {'end': 5037.937, 'text': "Okay So next up, we're going to add this import to the top of our app, like so.", 'start': 5034.294, 'duration': 3.643}, {'end': 5040.018, 'text': 'Going to hit save.', 'start': 5039.237, 'duration': 0.781}, {'end': 5050.545, 'text': "Then inside of our body tag down here, we're going to say font family, red hat display, sans serif.", 'start': 5040.618, 'duration': 9.927}, {'end': 5055.436, 'text': 'If we go back to our app and we refresh we can see that we now have the font that we want.', 'start': 5051.493, 'duration': 3.943}, {'end': 5065.242, 'text': "Awesome While we're here we can also give our body a font size of 16 and I saw that over in our starter files.", 'start': 5055.936, 'duration': 9.306}, {'end': 5069.405, 'text': 'If we refresh we can see we have more of the size that we want.', 'start': 5066.704, 'duration': 2.701}, {'end': 5077.331, 'text': "Keep in mind that I am again zoomed in here, so if we zoom back out, we'll start to see more of what our app actually looks like.", 'start': 5069.886, 'duration': 7.445}], 'summary': "Adding font weights 500, 700, and 900, importing 'red hat display' font, and setting font size to 16 resulted in desired font and size for the app.", 'duration': 63.786, 'max_score': 5013.545, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU5013545.jpg'}], 'start': 4431.502, 'title': 'Css shorthand and devtools', 'summary': 'Covers the use of css devtools to apply temporary styles, illustrates padding shorthand and css shorthand properties for padding, margin, and border, including the concept of box sizing border box, and the importance of line height with practical examples and explanations.', 'chapters': [{'end': 4585.368, 'start': 4431.502, 'title': 'Css devtools and padding shorthand', 'summary': 'Explains how to use css devtools to apply temporary styles in a browser, demonstrates the use of padding shorthand with examples and emphasizes the use of css shorthand for applying different padding values to individual sides of an element.', 'duration': 153.866, 'highlights': ['The chapter explains how to use CSS DevTools to apply temporary styles in a browser, demonstrates the use of padding shorthand with examples and emphasizes the use of CSS shorthand for applying different padding values to individual sides of an element.', 'The padding shorthand with just one value applies the same padding to all sides of the div, as demonstrated by applying 30 pixels of padding to the top, left, right, and bottom.', 'Illustrates how to apply padding to specific sides of a div using padding top and padding bottom, showing that different padding values can be applied to individual sides.', 'Emphasizes the use of CSS shorthand for applying different padding values to individual sides of an element, highlighting the need for separate lines of code if different padding values are required for the top, bottom, right, and left sides of the div.', 'Explains the use of CSS shorthand for applying different padding values to individual sides of an element, illustrating the need for separate lines of code when different padding values are required for the top, bottom, right, and left sides of the div.']}, {'end': 5077.331, 'start': 4585.808, 'title': 'Css shorthand properties and box sizing', 'summary': 'Covers css shorthand properties for padding, margin, and border, including the concept of box sizing border box, and the importance of line height, with practical examples and explanations.', 'duration': 491.523, 'highlights': ['The chapter explains the concept of CSS shorthand properties for padding, margin, and border, using clock analogy to specify values, and practical demonstrations with quantifiable data. The chapter provides a detailed explanation of CSS shorthand properties for padding, margin, and border, using a clock analogy to specify values, and practical demonstrations with quantifiable data such as specifying margin and observing the resulting space.', "The section emphasizes the importance of box sizing border box to account for padding and border in an element's width and height, with practical demonstrations and problem-solving scenarios. The section highlights the importance of box sizing border box to account for padding and border in an element's width and height, with practical demonstrations and problem-solving scenarios such as observing the change in width when adding padding without box sizing, and the solution provided by box sizing border box.", 'The chapter discusses the significance of line height in creating space between text elements, with a practical example and implementation using line height property. The chapter discusses the significance of line height in creating space between text elements, with a practical example and implementation using the line height property to adjust the distance between text.']}], 'duration': 645.829, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU4431502.jpg', 'highlights': ['The chapter provides a detailed explanation of CSS shorthand properties for padding, margin, and border, using a clock analogy to specify values, and practical demonstrations with quantifiable data.', "The section emphasizes the importance of box sizing border box to account for padding and border in an element's width and height, with practical demonstrations and problem-solving scenarios.", 'The chapter discusses the significance of line height in creating space between text elements, with a practical example and implementation using the line height property to adjust the distance between text.', 'The chapter explains how to use CSS DevTools to apply temporary styles in a browser, demonstrates the use of padding shorthand with examples and emphasizes the use of CSS shorthand for applying different padding values to individual sides of an element.', 'Illustrates how to apply padding to specific sides of a div using padding top and padding bottom, showing that different padding values can be applied to individual sides.']}, {'end': 6114.587, 'segs': [{'end': 5130.776, 'src': 'embed', 'start': 5101.503, 'weight': 1, 'content': [{'end': 5103.644, 'text': "In this case, we're going to use overflow hidden.", 'start': 5101.503, 'duration': 2.141}, {'end': 5109.806, 'text': 'So when the content of an element is too big and overflowing, we can hide that overflow.', 'start': 5104.764, 'duration': 5.042}, {'end': 5120.211, 'text': 'In our case here, this image is overflowing because this image is inside of the card div, but its square edges are overflowing.', 'start': 5110.927, 'duration': 9.284}, {'end': 5127.795, 'text': 'In other words, we have this card div that has rounded borders, but the image is overflowing with its square borders.', 'start': 5120.751, 'duration': 7.044}, {'end': 5130.776, 'text': "It's hiding the rounded border of the card.", 'start': 5128.435, 'duration': 2.341}], 'summary': 'Using overflow hidden to hide overflowing content and maintain rounded borders.', 'duration': 29.273, 'max_score': 5101.503, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU5101503.jpg'}, {'end': 5200.497, 'src': 'embed', 'start': 5171.948, 'weight': 2, 'content': [{'end': 5183.909, 'text': "Okay, so we're using this greater than star which says all of the children inside of this container they will all get this margin with this value.", 'start': 5171.948, 'duration': 11.961}, {'end': 5193.554, 'text': 'When you have a margin property with two values, this means that the first value is for the top and bottom and the left and right are at zero.', 'start': 5184.569, 'duration': 8.985}, {'end': 5200.497, 'text': 'We just gave each element a top and bottom margin of 13 pixels and a left and right value of zero.', 'start': 5194.354, 'duration': 6.143}], 'summary': 'Applying a margin of 13 pixels to top and bottom, and 0 pixels to left and right for all children inside the container.', 'duration': 28.549, 'max_score': 5171.948, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU5171948.jpg'}, {'end': 5252.422, 'src': 'embed', 'start': 5225.231, 'weight': 0, 'content': [{'end': 5230.935, 'text': "We won't go into that in this course, but those are some of the actions that you can use a button tag for.", 'start': 5225.231, 'duration': 5.704}, {'end': 5237.958, 'text': "Since this course is all about HTML and CSS, our buttons won't have any interactivity.", 'start': 5232.256, 'duration': 5.702}, {'end': 5240.759, 'text': 'So nothing happens when we click on our buttons.', 'start': 5238.458, 'duration': 2.301}, {'end': 5246.52, 'text': "They won't be very exciting, but we're going to make sure that they're styled correctly to look just like the design.", 'start': 5241.179, 'duration': 5.341}, {'end': 5252.422, 'text': "Okay So first off, I'll write out button and then I'll give it a class.", 'start': 5248.361, 'duration': 4.061}], 'summary': 'Html/css course covers button tag styling with no interactivity.', 'duration': 27.191, 'max_score': 5225.231, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU5225231.jpg'}, {'end': 5644.827, 'src': 'embed', 'start': 5614.963, 'weight': 3, 'content': [{'end': 5617.504, 'text': "Let's get to building this by first adding the HTML.", 'start': 5614.963, 'duration': 2.541}, {'end': 5624.967, 'text': "First up back in our index.html, let's add a plan container that will hold everything that we see in the purple box.", 'start': 5618.844, 'duration': 6.123}, {'end': 5628.848, 'text': 'This will go right below our paragraph tag and above our buttons.', 'start': 5625.887, 'duration': 2.961}, {'end': 5633.17, 'text': "So we'll create a div and we'll give it a class of plan container.", 'start': 5629.568, 'duration': 3.602}, {'end': 5639.232, 'text': "And then next let's add the image that we see.", 'start': 5637.231, 'duration': 2.001}, {'end': 5644.827, 'text': 'We go back to our starter files and we hit images.', 'start': 5642.466, 'duration': 2.361}], 'summary': 'Adding html elements including a plan container and an image for the purple box.', 'duration': 29.864, 'max_score': 5614.963, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU5614963.jpg'}, {'end': 5719.038, 'src': 'embed', 'start': 5688.062, 'weight': 7, 'content': [{'end': 5695.708, 'text': "Back in our plan container div, we're going to create another container div and we'll give it a class of plan description.", 'start': 5688.062, 'duration': 7.646}, {'end': 5704.752, 'text': "Next up, we're going to add the annual plan and we'll use a strong tag for this.", 'start': 5700.41, 'duration': 4.342}, {'end': 5706.733, 'text': "So we'll write annual plan.", 'start': 5705.312, 'duration': 1.421}, {'end': 5719.038, 'text': "Then next up, we'll use a P tag and we'll write out $59.99 slash year and we'll hit save.", 'start': 5709.074, 'duration': 9.964}], 'summary': 'Created plan description container with annual plan at $59.99/year.', 'duration': 30.976, 'max_score': 5688.062, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU5688062.jpg'}, {'end': 5907.331, 'src': 'embed', 'start': 5854.026, 'weight': 5, 'content': [{'end': 5855.587, 'text': "Next up, let's work on our A tag.", 'start': 5854.026, 'duration': 1.561}, {'end': 5862.672, 'text': 'If we go back to our design, our A tag, or in other words the tag that has the content of change inside of it,', 'start': 5856.568, 'duration': 6.104}, {'end': 5864.834, 'text': 'looks a little bit different than what we currently have.', 'start': 5862.672, 'duration': 2.162}, {'end': 5866.615, 'text': "So let's add some styles to fix that.", 'start': 5864.874, 'duration': 1.741}, {'end': 5872.962, 'text': "So let's write out plan container A, and we'll add some styles here.", 'start': 5867.936, 'duration': 5.026}, {'end': 5876.383, 'text': "First, we'll add the color, so var bright blue.", 'start': 5873.062, 'duration': 3.321}, {'end': 5886.448, 'text': "Next up, we'll add the font size, which is 13 pixels, and we'll add the font weight of 700, and we'll hit save.", 'start': 5878.745, 'duration': 7.703}, {'end': 5890.13, 'text': 'If we go back and refresh, we can see that our A tag is looking much better.', 'start': 5886.468, 'duration': 3.662}, {'end': 5897.194, 'text': 'Next up, we can add the hover state, so when you hover over this change A tag, it actually changes color.', 'start': 5890.951, 'duration': 6.243}, {'end': 5907.331, 'text': "Again, we'll use opacity, so we'll say plan container A, hover, and we'll give it an opacity of 0.8.", 'start': 5898.034, 'duration': 9.297}], 'summary': 'Updated a tag with color, font size (13px), and hover state', 'duration': 53.305, 'max_score': 5854.026, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU5854026.jpg'}, {'end': 5991.207, 'src': 'embed', 'start': 5959.438, 'weight': 4, 'content': [{'end': 5962.501, 'text': 'We need to kind of center things here and make them look a bit better.', 'start': 5959.438, 'duration': 3.063}, {'end': 5964.422, 'text': "Let's go add some styles to do this.", 'start': 5963.001, 'duration': 1.421}, {'end': 5970.527, 'text': "Back in our container div that we created, we're going to add a display flex, which we talked about earlier.", 'start': 5965.763, 'duration': 4.764}, {'end': 5973.549, 'text': "We're going to give it a flex direction of column.", 'start': 5970.947, 'duration': 2.602}, {'end': 5978.963, 'text': 'Next we want to center the content.', 'start': 5976.522, 'duration': 2.441}, {'end': 5980.764, 'text': "So we'll say justify content center.", 'start': 5979.003, 'duration': 1.761}, {'end': 5983.725, 'text': "We'll also center the text on our page.", 'start': 5981.544, 'duration': 2.181}, {'end': 5986.205, 'text': "So we'll say text align center as well.", 'start': 5983.785, 'duration': 2.42}, {'end': 5991.207, 'text': 'Lastly, we want to say font size of 18 pixels.', 'start': 5988.146, 'duration': 3.061}], 'summary': 'Adding styles to the container div for better look with flex display, centered text, and 18px font size.', 'duration': 31.769, 'max_score': 5959.438, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU5959438.jpg'}, {'end': 6039.927, 'src': 'embed', 'start': 6007.336, 'weight': 9, 'content': [{'end': 6012.38, 'text': "We'll go back to the styles for our card and we'll say margin 50 pixels auto.", 'start': 6007.336, 'duration': 5.044}, {'end': 6022.849, 'text': 'Now, when you have just two values here the 50 pixels is going to be for the top and the bottom of the div and auto is going to be for the left and the right.', 'start': 6013.321, 'duration': 9.528}, {'end': 6028.474, 'text': 'That is auto will be applied on the left and the right of the div and the 50 pixels will be applied on the top and the bottom.', 'start': 6022.969, 'duration': 5.505}, {'end': 6031.557, 'text': 'You might be wondering why are we using auto right here?', 'start': 6029.335, 'duration': 2.222}, {'end': 6039.927, 'text': 'When we say margin auto for the left and the right margins of an element, equal margin is given on either side of that element.', 'start': 6032.725, 'duration': 7.202}], 'summary': 'Applying margin 50 pixels on top and bottom, and auto on left and right of the div for equal margins on either side.', 'duration': 32.591, 'max_score': 6007.336, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU6007336.jpg'}], 'start': 5077.331, 'title': 'Creating stylish designs with html and css', 'summary': 'Discusses fixing the issue of square edges overflowing from rounded borders, building stylish buttons with specific styles, creating a plan container with an image, designing layouts using html and css, and styling a tags and containers for changed content, resulting in visually accurate and stylish designs.', 'chapters': [{'end': 5200.497, 'start': 5077.331, 'title': 'Fixing border radius issue with overflow property', 'summary': 'Discusses fixing the issue of square edges overflowing from rounded borders by using the overflow hidden property and adding margin to elements inside a container, resulting in the resolution of the visual problem.', 'duration': 123.166, 'highlights': ['Using overflow hidden to fix the issue of square edges overflowing from rounded borders. The overflow hidden property is used to hide the overflow of content within an element, resolving the problem of square edges overflowing from rounded borders.', 'Adding margin to each element inside the container to create space between elements. Margin of 13 pixels is added to all the children inside the container, creating space between the elements and improving the visual layout.']}, {'end': 5669.007, 'start': 5201.858, 'title': 'Building stylish buttons & plan container', 'summary': 'Covers building stylish buttons using html and css, including creating a proceed button and a cancel button with specific styles, such as background color, text color, border, width, font weight, and hover effect, and then creating a plan container with an image.', 'duration': 467.149, 'highlights': ['Creating stylish buttons The chapter covers creating stylish buttons using HTML and CSS, including defining the proceed button with a bright blue background color, white text color, box shadow, specific width, border, font weight, cursor pointer, font size, and border radius, and defining the cancel button with white background color, desaturated blue text color, specific width, font weight, font size, border radius, and hover effect.', 'Applying specific styles to buttons The chapter explains the process of applying specific styles to both the proceed and cancel buttons, including removing default styles, utilizing the width property, and ensuring consistent styling for both buttons.', "Creating a plan container with an image The chapter details the creation of a plan container with an image, including adding a div with the class 'plan container' and inserting an image with the source from the 'icon music' file."]}, {'end': 5852.986, 'start': 5669.748, 'title': 'Html design and styling', 'summary': 'Demonstrates using html and css to create a design layout, including adding container divs, applying specific styles such as font size, background color, padding, border radius, and using flexbox properties like display flex, flex direction, justify content, and align items to achieve the desired design.', 'duration': 183.238, 'highlights': ['Applying styles to the plan container div Setting the font size to 16 pixels, adding a background color, applying padding of 25 pixels, and giving it a border radius of 12 pixels to match the design.', 'Using flexbox properties to align items Applying display flex, flex direction of row, and justify content space between to evenly space out the items within the container div.', "Adding a change link below the plan description Inserting an A tag with the text 'change' to create a link below the plan description container."]}, {'end': 6114.587, 'start': 5854.026, 'title': 'Styling a tag and container', 'summary': 'Covers styling the a tag for change content, including adding color, font size, and hover effects, and adjusting the design of the annual plan text and container layout, and centering the card on the page, resulting in a visually accurate representation of the design.', 'duration': 260.561, 'highlights': ['The A tag for the change content is styled by adding color, font size of 13 pixels, and font weight of 700, resulting in a much better appearance. Color, font size, and font weight are set for the A tag for change content, enhancing its visual appearance.', 'Hover state is added to the change A tag, with the opacity set to 0.8 and the text decoration set to none, resulting in a better visual effect when hovering over the link. A hover state is added to the change A tag, with the opacity set to 0.8 and the text decoration set to none, improving the visual effect when hovering over the link.', 'The strong tag for the annual plan text is styled by setting the color to a darker blue, resulting in a bolder and clearer appearance as per the design. The color is set for the strong tag for the annual plan text, resulting in a bolder and clearer appearance in line with the design.', 'The container div is styled by adding display flex with a flex direction of column, justifying content and centering the text, and setting the font size to 18 pixels, resulting in a visually improved layout closer to the design. Styles such as display flex, flex direction, justify content, text align, and font size are applied to the container div, resulting in a visually improved layout closer to the design.', 'The card is centered on the page by adding a margin of 50 pixels auto, resulting in a visually accurate representation of the design. The card is centered on the page by adding a margin of 50 pixels auto, achieving a visually accurate representation of the design.']}], 'duration': 1037.256, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SR5GxoFhIAU/pics/SR5GxoFhIAU5077331.jpg', 'highlights': ['Creating stylish buttons with specific styles using HTML and CSS.', 'Using overflow hidden to fix the issue of square edges overflowing from rounded borders.', 'Adding margin of 13 pixels to all children inside the container to create space between elements.', 'Creating a plan container with an image and applying specific styles to it.', 'Applying flexbox properties to align items within the container div.', 'Styling the A tag for change content by adding color, font size, and font weight.', 'Adding a hover state to the change A tag to improve the visual effect when hovering over the link.', 'Styling the strong tag for the annual plan text by setting the color to a darker blue.', 'Styling the container div by adding display flex, flex direction, justifying content, centering the text, and setting the font size.', 'Centering the card on the page by adding a margin of 50 pixels auto.']}], 'highlights': ['The course is designed for complete beginners and individuals seeking to solidify their understanding of HTML and CSS.', 'By the end of the course, participants will have a professionally designed project for their developer portfolio.', 'Frontend Mentor is a platform for improving coding skills by building professionally designed projects, and the project involves creating an order summary component with starter files.', 'The discussion emphasizes the role of HTML and CSS in building websites, highlighting their use in displaying text, images, and videos.', 'The chapter focuses on building the desktop view for the app.', 'The chapter covers creating a new repository and setting up an order summary component.', 'The chapter involves using the terminal tool for working with the computer.', 'The chapter demonstrates the use of class selectors in CSS to target specific HTML elements and apply styles, such as giving a particular H1 element a background color of aqua.', 'The background image is adjusted to cover the entire space using the background size CSS property with the value of cover, resulting in a fantastic visual appearance, similar to the design.', 'Understanding CSS inheritance and specificity is crucial for identifying the source of styles and determining which CSS rule takes precedence when there are conflicting property values.', 'The chapter provides a detailed explanation of CSS shorthand properties for padding, margin, and border, using a clock analogy to specify values, and practical demonstrations with quantifiable data.', "The section emphasizes the importance of box sizing border box to account for padding and border in an element's width and height, with practical demonstrations and problem-solving scenarios.", 'The chapter discusses the significance of line height in creating space between text elements, with a practical example and implementation using the line height property to adjust the distance between text.', 'The chapter explains how to use CSS DevTools to apply temporary styles in a browser, demonstrates the use of padding shorthand with examples and emphasizes the use of CSS shorthand for applying different padding values to individual sides of an element.', 'Creating stylish buttons with specific styles using HTML and CSS.', 'Using overflow hidden to fix the issue of square edges overflowing from rounded borders.', 'Adding margin of 13 pixels to all children inside the container to create space between elements.', 'Creating a plan container with an image and applying specific styles to it.', 'Applying flexbox properties to align items within the container div.', 'Styling the A tag for change content by adding color, font size, and font weight.', 'Adding a hover state to the change A tag to improve the visual effect when hovering over the link.', 'Styling the strong tag for the annual plan text by setting the color to a darker blue.', 'Styling the container div by adding display flex, flex direction, justifying content, centering the text, and setting the font size.', 'Centering the card on the page by adding a margin of 50 pixels auto.']}