title
Learn HTML & CSS – Full Course for Beginners

description
Learn HTML and CSS from scratch by building 6 projects and solving 80+ coding challenges. Go here for the interactive browser-version: https://scrimba.com/links/htmlandcss ⭐️ Code ⭐️ 🔗 Interactive version: https://scrimba.com/links/htmlandcss 🔗 GitHub repo: https://github.com/scrimba/learn-html-and-css ✏️ This course was created by Per Harald Borgen, the co-founder and CEO of Scrimba. You can follow Per on Twitter here: https://twitter.com/perborgen 🛠 Tools used: 🔗 Netlify: https://www.netlify.com/ 🔗 VS Code: https://code.visualstudio.com/ 🔗 GitHub Desktop: https://desktop.github.com/ 🔗 Figma: https://www.figma.com/ 🔗 Coolors: https://coolors.co/ 🔗 Google Fonts: https://fonts.google.com/ 🔗 1001 Fonts: https://www.1001fonts.com/ ⭐️ Contents ⭐️ 0:00:00 Introduction Build and deploy your first website 0:01:32 1: Welcome to the HTML & CSS Course 0:04:12 2: HTML Tags 0:07:33 3: Write a news article 0:09:43 4: The image tag 0:14:43 5: Nesting 0:17:33 6: Internet superpowers - Change the BBC news! 0:22:34 7: Interactive elements - Button 0:24:37 8: Interactive elements - input tags -- Experiment with input types 100% 0:29:37 9: Let’s build Google! 0:33:28 10: Aside - Anchor tags 0:38:04 11: Add an anchor tag to Google.com 0:39:43 12: Proper document structure 0:45:29 13: Aside: Lists 0:49:27 14: Build a personal Website 0:58:15 15: Deploy your Personal Website 1:01:30 16: HTML Recap Build a Google.com clone 1:03:06 1: Let’s learn CSS! 1:03:53 2: Write your first lines of CSS! 1:08:10 3: Write your first lines of CSS! Solution 1:11:46 4: Let’s destroy wikipedia - recording 1:13:43 5: Link to the CSS file 1:16:22 6: Set the width of the elements 1:18:31 7: Inline vs block elements 1:20:49 8: Margin top 1:22:05 9: Divs rule the world 1:24:10 10: CSS classes 1:28:07 11: Aside - Learn margins via flags 1:34:04 12: Add space between our elements 1:35:12 13: Aside - Centering with margins 1:38:39 14: Centering our content 1:40:01 15: Aside - padding 1:45:23 16: Aside - Border and border-radius 1:50:33 17: Aside challenge - style Twitter button 1:55:36 18: Fix the input field 2:00:22 19: Center the button 2:02:42 20: Style the button 2:07:13 21: Why we can’t have two block-level buttons 2:11:42 22: Aside - Flexbox 2:15:25 23: Centering both buttons with flexbox 2:18:20 24: Google clone recap Build a Digital Business Card 2:20:27 1: Building your digital business card 2:21:00 2: Fix the image path 2:23:56 3: Add alt attribute 2:28:24 4: Make image smaller 2:29:40 5: Add a border and padding 2:33:30 6: Aside - flexbox child containers 2:37:11 7: Flex item containers 2:38:51 8: Add a utility class 2:42:04 9: Justify the items 2:44:13 10: Center the card 2:46:13 11: Aside - inheritance 2:50:31 12: Center the text via inheritance 2:53:32 13: Add colors 2:56:57 14: Web-safe fonts 3:02:06 15: Aside - margin/padding shorthand 3:06:09 16: Use the margin & padding shorhands 3:07:26 17: Deploy your Digital Business Card 3:12:16 18: Business Card Recap Build a Space Exploration Site 3:14:17 1: Let’s go to space 3:14:54 2: Add a background image from unsplash 3:18:54 3: Center elements and Style button 3:22:12 4: Add a Google font 3:26:34 5: @font-face 3:28:39 6: Aside - spans 3:32:37 7: Add an underline using a span 3:34:27 8: Use an ID for the logo 3:38:51 9: Replace the jpg with a webp 3:41:25 10: Choose a color palette from an image 3:44:18 11: Add the terms & conditions section 3:48:17 12: Aside - text shadow 3:54:17 13: Improving the readability with text shadows 3:56:17 14: Space - Exploration recap Build a Birthday GIFt Site 3:58:02 1: Let’s build a Birthday GIFt site 3:59:13 2: Add basic header styling 4:02:47 3: Set the colors 4:04:13 4: Add shadow on text 4:07:34 5: We have a problem that flexbox can fix 4:10:10 6: Aside - align-items 4:16:13 7: Aside - flex-direction 4:20:42 8: Turn the header into a flexbox 4:22:26 9: Fix date and age design 4:26:36 10: Create the first gift 4:31:56 11: Replace the img with a div 4:36:14 12: Aside - make elements change on hover 4:39:08 13: Add the hover effect 4:41:17 14: Create the next GIFt 4:45:39 15: Create two more GIFts 4:48:15 16: Create the final GIFt 4:51:38 17: Add the footer 4:55:18 18: Add a background gradient 4:58:46 19: Personalize the Birthday GIFt Site 5:00:25 20: Use GitHub Desktop to publish your Birthday GIFt Site 5:05:44 21: Deploying your Birthday GIFt Site 5:06:45 22: Use VS Code to edit your Birthday GIFt 5:11:36 23: GIFt site recap Solo Project: Hometown Homepage 5:13:29 1: It’s time to go solo! 5:15:47 2: Solo Project - Hometown Homepage 5:19:54 3: Congrats on completing the course!

detail
{'title': 'Learn HTML & CSS – Full Course for Beginners', 'heatmap': [{'end': 2316.827, 'start': 1737.128, 'weight': 0.869}, {'end': 3476.559, 'start': 3085.094, 'weight': 0.717}, {'end': 5214.636, 'start': 5018.001, 'weight': 0.705}, {'end': 8110.522, 'start': 7908.454, 'weight': 0.954}, {'end': 9849.893, 'start': 9652.577, 'weight': 0.766}, {'end': 11585.81, 'start': 11386.638, 'weight': 0.746}, {'end': 11970.455, 'start': 11774.287, 'weight': 0.712}, {'end': 12554.639, 'start': 12161.946, 'weight': 0.916}, {'end': 13713.064, 'start': 13126.307, 'weight': 0.891}, {'end': 16219.142, 'start': 16016.127, 'weight': 0.712}, {'end': 19301.043, 'start': 19108.599, 'weight': 1}], 'summary': 'Learn html & css course covers 5 projects with 75+ coding challenges, taught by per borgen, emphasizing practical learning and building projects like google.com homepage, space exploration landing page, digital business card, and birthday site with virtual presents. it includes html & css fundamentals, layout, personalizing websites, css styling, front-end essentials, github deployment, web design techniques, and css hover feature, resulting in a 0.02% increase in click-through rate for ad.', 'chapters': [{'end': 149.888, 'segs': [{'end': 82.675, 'src': 'embed', 'start': 40.45, 'weight': 0, 'content': [{'end': 46.351, 'text': 'which means that you will need to get your hands on the keyboard again and again as you progress through this course.', 'start': 40.45, 'duration': 5.901}, {'end': 51.854, 'text': "If you now are a little bit afraid or like, setting up your local dev environment, don't worry.", 'start': 46.751, 'duration': 5.103}, {'end': 57.838, 'text': 'For that reason, we have created an interactive version of this course over on scrimba.com.', 'start': 52.274, 'duration': 5.564}, {'end': 62.62, 'text': "There, you'll be able to solve all of the challenges directly in your browser.", 'start': 58.498, 'duration': 4.122}, {'end': 66.363, 'text': "So just click on the link below and you'll get to that interactive version.", 'start': 62.981, 'duration': 3.382}, {'end': 73.047, 'text': "Now, if you prefer, to instead solve the challenges locally, I've created a GitHub repository that you can clone,", 'start': 66.703, 'duration': 6.344}, {'end': 76.609, 'text': "and there you'll get access to all of the starter files for the challenges.", 'start': 73.047, 'duration': 3.562}, {'end': 81.233, 'text': 'One final thing, if you like this course, please give it a thumbs up here at YouTube.', 'start': 77.049, 'duration': 4.184}, {'end': 82.675, 'text': 'That is highly appreciated.', 'start': 81.273, 'duration': 1.402}], 'summary': 'The course offers an interactive version on scrimba.com for solving challenges in the browser, and a github repository for accessing starter files locally.', 'duration': 42.225, 'max_score': 40.45, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ40450.jpg'}], 'start': 0.169, 'title': 'Html & css for 5 projects', 'summary': 'Covers an interactive html and css course for building and deploying five projects, incorporating over 75 coding challenges, taught by per borgen, ceo of scrimba, and a front-end developer, focusing on hands-on learning and building projects such as google.com homepage, a space exploration landing page, a digital business card, and a birthday site with virtual birthday presents.', 'chapters': [{'end': 149.888, 'start': 0.169, 'title': 'Html & css for 5 projects', 'summary': 'Covers an interactive html and css course for building and deploying five projects, incorporating over 75 coding challenges, taught by per borgen, ceo of scrimba, and a front-end developer, with a focus on hands-on learning and building projects such as google.com homepage, a space exploration landing page, a digital business card, and a birthday site with virtual birthday presents.', 'duration': 149.719, 'highlights': ['The course involves building and deploying five projects, including the google.com homepage, a space exploration landing page, a digital business card, and a birthday site with virtual birthday presents. The chapter covers an interactive course for building and deploying five projects.', 'The course includes over 75 coding challenges for hands-on learning. The chapter emphasizes over 75 coding challenges for hands-on learning.', "The instructor, Per Borgen, is the CEO of Scrimba, a front-end developer, and a coding teacher, with over a million students having gone through his tutorials. The chapter highlights the instructor's credentials, including being the CEO of Scrimba and a coding teacher with over a million students."]}], 'duration': 149.719, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ169.jpg', 'highlights': ['The course involves building and deploying five projects, including the google.com homepage, a space exploration landing page, a digital business card, and a birthday site with virtual birthday presents.', 'The course includes over 75 coding challenges for hands-on learning.', 'The instructor, Per Borgen, is the CEO of Scrimba, a front-end developer, and a coding teacher, with over a million students having gone through his tutorials.']}, {'end': 1342.764, 'segs': [{'end': 325.029, 'src': 'embed', 'start': 300.11, 'weight': 6, 'content': [{'end': 305.213, 'text': "Now, if we want to do this in HTML, we'd simply create an HTML file, which you can see here.", 'start': 300.11, 'duration': 5.103}, {'end': 310.016, 'text': "it's called index dot HTML, as that is a common name to give your HTML files.", 'start': 305.213, 'duration': 4.803}, {'end': 313.518, 'text': 'And here I would write I code.', 'start': 310.976, 'duration': 2.542}, {'end': 316.504, 'text': 'therefore I am Now.', 'start': 313.518, 'duration': 2.986}, {'end': 325.029, 'text': 'if we open up a browser and point to this browser, to our HTML file, and then run it, then we can see that the text indeed appears in the browser.', 'start': 316.504, 'duration': 8.525}], 'summary': 'Creating an html file named index.html and running it displays text in the browser.', 'duration': 24.919, 'max_score': 300.11, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ300110.jpg'}, {'end': 609.656, 'src': 'embed', 'start': 575.56, 'weight': 7, 'content': [{'end': 576.301, 'text': 'rerunning the code.', 'start': 575.56, 'duration': 0.741}, {'end': 579.643, 'text': 'And there we go, we have achieved this exact layout.', 'start': 576.501, 'duration': 3.142}, {'end': 580.543, 'text': 'Great job.', 'start': 580.063, 'duration': 0.48}, {'end': 581.364, 'text': "Let's move on.", 'start': 580.824, 'duration': 0.54}, {'end': 591.011, 'text': "Now you're going to learn about images, because I really think our Mars article needs an image.", 'start': 585.569, 'duration': 5.442}, {'end': 594.512, 'text': 'The way to do that is by using the IMG tag.', 'start': 591.351, 'duration': 3.161}, {'end': 600.093, 'text': 'So we start with our angle brackets, and then write simply IMG inside of those.', 'start': 595.152, 'duration': 4.941}, {'end': 603.975, 'text': "And what's unique about this tag is that you don't need a closing tag.", 'start': 600.494, 'duration': 3.481}, {'end': 609.656, 'text': 'So there is no closing IMG as there is a closing h1 or closing paragraph.', 'start': 604.255, 'duration': 5.401}], 'summary': 'Achieved exact layout, learning about images with img tag', 'duration': 34.096, 'max_score': 575.56, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ575560.jpg'}, {'end': 823.992, 'src': 'embed', 'start': 778.981, 'weight': 1, 'content': [{'end': 782.824, 'text': 'So if you find an image you like, you can borrow it and use it in your project.', 'start': 778.981, 'duration': 3.843}, {'end': 783.905, 'text': 'Let me show you how.', 'start': 783.224, 'duration': 0.681}, {'end': 791.993, 'text': 'So if we Google Mars, for example, and click on the images tab and then click on whatever image we think is cool, for example this one right here,', 'start': 784.366, 'duration': 7.627}, {'end': 797.538, 'text': 'and then in this image view on the right hand side here you can right click and choose copy image address.', 'start': 791.993, 'duration': 5.545}, {'end': 802.943, 'text': "once you've copied that, you can simply paste it into the source attribute.", 'start': 798.058, 'duration': 4.885}, {'end': 808.99, 'text': "So I'm going to remove mars.jpg and paste in the image address, which I just copied.", 'start': 803.524, 'duration': 5.466}, {'end': 816.739, 'text': 'If we now run the code, you can see, there we go, we have borrowed this super cool image from another website online.', 'start': 809.23, 'duration': 7.509}, {'end': 819.53, 'text': "So it's time for a challenge.", 'start': 818.01, 'duration': 1.52}, {'end': 823.992, 'text': 'What I want you to do now is add a second image to our article.', 'start': 819.931, 'duration': 4.061}], 'summary': 'Learn how to borrow and use online images for projects with code.', 'duration': 45.011, 'max_score': 778.981, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ778981.jpg'}, {'end': 1102.98, 'src': 'embed', 'start': 1079.858, 'weight': 0, 'content': [{'end': 1091.679, 'text': "So what we're gonna do now is change the news on BBC Sports so that you then can show this page to a Man United fan and thus make them really upset while you get a good laugh.", 'start': 1079.858, 'duration': 11.821}, {'end': 1093.935, 'text': "So let's go ahead and do this.", 'start': 1092.674, 'duration': 1.261}, {'end': 1099.858, 'text': "Here on the BBC sports page on this top article here, I'm going to right click on the text.", 'start': 1094.535, 'duration': 5.323}, {'end': 1102.98, 'text': 'And then you can see it gives me the option to choose inspect.', 'start': 1100.298, 'duration': 2.682}], 'summary': 'Changing news on bbc sports to upset man united fan', 'duration': 23.122, 'max_score': 1079.858, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ1079858.jpg'}], 'start': 150.228, 'title': 'Learning html and css fundamentals', 'summary': 'Introduces the basics of html, css, and web development, emphasizing the practicality of learning html. it covers writing html tags, inserting and styling images, and illustrates practical applications such as altering news articles. it provides a hands-on demonstration and a simple design challenge.', 'chapters': [{'end': 449.447, 'start': 150.228, 'title': 'Html and css basics', 'summary': 'Introduces the basics of html, css, and web development, emphasizing the importance of learning html and its practicality in the job market. it also provides a hands-on demonstration of using html tags to format text and a simple design challenge.', 'duration': 299.219, 'highlights': ['HTML is the content of the website, while CSS is the styling, and JavaScript allows websites to solve problems. The chapter explains the roles of HTML, CSS, and JavaScript in web development, emphasizing their respective functions in creating website content, styling, and problem-solving.', "Knowing HTML is valuable in today's job market and is the most natural first step in web development. The chapter underscores the value of learning HTML in the current job market and as the initial step for individuals venturing into web development.", 'Demonstration of using HTML tags to format text and a simple design challenge with the h2 tag. The chapter provides a practical demonstration of using HTML tags to format text and presents a simple design challenge using the h2 tag, showcasing hands-on application of HTML.']}, {'end': 1051.733, 'start': 449.847, 'title': 'Learn html basics and image handling', 'summary': 'Covers the basics of writing html tags, including h1, h3, and p, and introduces how to insert and style images using the img tag, as well as the concept of nesting html elements using div tags.', 'duration': 601.886, 'highlights': ['The chapter introduces writing HTML tags, including h1, h3, and p, to create a news article. The chapter instructs on writing HTML tags, h1 for title, h3 for subheading, and p for text to create a news article about humans reaching Mars.', 'The chapter demonstrates inserting and styling images using the IMG tag, including self-closing tags and using the width attribute for scaling. The chapter demonstrates inserting images using the IMG tag, explaining self-closing tags and using the width attribute to scale the image with the browser size.', 'The chapter explains the concept of nesting HTML elements using div tags for grouping and targeting sections of the article. The chapter explains nesting HTML elements using div tags to group sections of the article, enabling targeting for styling and manipulation.']}, {'end': 1342.764, 'start': 1055.788, 'title': 'Change bbc sports news', 'summary': 'Illustrates how to prank a manchester united fan by changing the bbc sports news article, including altering the text and image, to create a practical joke.', 'duration': 286.976, 'highlights': ['The steps to change the news on BBC Sports are demonstrated, including altering the title and text of the article, and replacing the image. The chapter explains the process of changing the news on BBC Sports, involving altering the title and text of the article, and replacing the image with a new one of Jeff Bezos.', 'The consequences of refreshing the page are explained, emphasizing that the changes are only local and do not affect the actual BBC website. The chapter emphasizes that refreshing the page results in losing the changes made, as they are only local and do not affect the actual BBC website.', 'The usage of developer tools in the Chrome browser is demonstrated to modify the HTML elements of the webpage. The chapter demonstrates the usage of developer tools in the Chrome browser to modify the HTML elements of the webpage, including changing the title, text, and image.']}], 'duration': 1192.536, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ150228.jpg', 'highlights': ['The chapter underscores the value of learning HTML in the current job market and as the initial step for individuals venturing into web development.', 'The chapter provides a practical demonstration of using HTML tags to format text and presents a simple design challenge using the h2 tag, showcasing hands-on application of HTML.', 'The chapter introduces writing HTML tags, including h1, h3, and p, to create a news article.', 'The chapter demonstrates inserting images using the IMG tag, explaining self-closing tags and using the width attribute to scale the image with the browser size.', 'The chapter explains nesting HTML elements using div tags to group sections of the article, enabling targeting for styling and manipulation.', 'The chapter explains the process of changing the news on BBC Sports, involving altering the title and text of the article, and replacing the image with a new one of Jeff Bezos.', 'The chapter emphasizes that refreshing the page results in losing the changes made, as they are only local and do not affect the actual BBC website.', 'The chapter demonstrates the usage of developer tools in the Chrome browser to modify the HTML elements of the webpage, including changing the title, text, and image.', 'HTML is the content of the website, while CSS is the styling, and JavaScript allows websites to solve problems. The chapter explains the roles of HTML, CSS, and JavaScript in web development, emphasizing their respective functions in creating website content, styling, and problem-solving.', 'The chapter instructs on writing HTML tags, h1 for title, h3 for subheading, and p for text to create a news article about humans reaching Mars.']}, {'end': 2962.681, 'segs': [{'end': 1526.252, 'src': 'embed', 'start': 1499.585, 'weight': 0, 'content': [{'end': 1503.167, 'text': 'However, we have to specify what kind of type our input should be.', 'start': 1499.585, 'duration': 3.582}, {'end': 1508.672, 'text': 'So it has this type attribute, just as the image has a source attribute.', 'start': 1503.727, 'duration': 4.945}, {'end': 1511.576, 'text': 'And the value of the type can be a range of different options.', 'start': 1509.033, 'duration': 2.543}, {'end': 1514.78, 'text': "But we're going to start off with the most common one, and that is text.", 'start': 1511.676, 'duration': 3.104}, {'end': 1519.045, 'text': 'If we run this, you can see we get this nice little text box in the browser.', 'start': 1515.4, 'duration': 3.645}, {'end': 1521.988, 'text': 'Another handy attribute is the placeholder.', 'start': 1519.626, 'duration': 2.362}, {'end': 1526.252, 'text': "that's where we can give the user a hint about what kind of data we're asking for.", 'start': 1522.589, 'duration': 3.663}], 'summary': 'Specifies input type and attributes with examples.', 'duration': 26.667, 'max_score': 1499.585, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ1499585.jpg'}, {'end': 1678.155, 'src': 'embed', 'start': 1648.512, 'weight': 1, 'content': [{'end': 1651.715, 'text': "And I'm not going to tell you what kind of type that input field has.", 'start': 1648.512, 'duration': 3.203}, {'end': 1658.079, 'text': "I'm just going to show you how it looks, which is like this, you've probably seen that online before, it's basically a button.", 'start': 1652.495, 'duration': 5.584}, {'end': 1662.042, 'text': 'And when you click it, it lets you choose an image from your local file system.', 'start': 1658.259, 'duration': 3.783}, {'end': 1670.988, 'text': 'And the reason I want you to figure out what the type attributes should be here is because being good at googling is actually a huge part of being a good programmer.', 'start': 1662.662, 'duration': 8.326}, {'end': 1674.711, 'text': 'And the two are actually not that easy to separate from each other.', 'start': 1671.408, 'duration': 3.303}, {'end': 1678.155, 'text': 'So this gives you a way to practice those googling skills.', 'start': 1675.191, 'duration': 2.964}], 'summary': 'Demonstrates an input field for image selection, emphasizing the importance of googling skills for programming.', 'duration': 29.643, 'max_score': 1648.512, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ1648512.jpg'}, {'end': 2316.827, 'src': 'heatmap', 'start': 1737.128, 'weight': 0.869, 'content': [{'end': 1743.776, 'text': 'And it also says input elements with type file, let the user choose one or more files from their device storage.', 'start': 1737.128, 'duration': 6.648}, {'end': 1744.997, 'text': 'sounds pretty good.', 'start': 1744.336, 'duration': 0.661}, {'end': 1747.099, 'text': "So far, let's zoom in on the code here.", 'start': 1745.037, 'duration': 2.062}, {'end': 1751.423, 'text': 'And there you can see that they are actually using the profile picture example themselves.', 'start': 1747.119, 'duration': 4.304}, {'end': 1756.928, 'text': 'choose a profile picture with this button, which looks suspiciously similar to what I just showed you a couple of minutes ago.', 'start': 1751.423, 'duration': 5.505}, {'end': 1761.552, 'text': "So I think we've found it, what we're looking for is type equals file.", 'start': 1757.589, 'duration': 3.963}, {'end': 1764.575, 'text': "Let's add this up above the signup button.", 'start': 1762.233, 'duration': 2.342}, {'end': 1769.774, 'text': 'type equals file like that.', 'start': 1767.27, 'duration': 2.504}, {'end': 1771.055, 'text': 'We run this code.', 'start': 1770.395, 'duration': 0.66}, {'end': 1772.417, 'text': 'Yes, there we go.', 'start': 1771.316, 'duration': 1.101}, {'end': 1775.582, 'text': "We get this button, which looks like exactly what we're looking for.", 'start': 1772.638, 'duration': 2.944}, {'end': 1783.739, 'text': "Okay, now we're going to move on from using Google to building Google.", 'start': 1779.437, 'duration': 4.302}, {'end': 1792.502, 'text': "I mean, how cool is that? You've learned HTML for just about 30 minutes, and now you're going to build the most visited website in the world.", 'start': 1784.099, 'duration': 8.403}, {'end': 1793.862, 'text': 'That is just amazing.', 'start': 1792.662, 'duration': 1.2}, {'end': 1801.025, 'text': 'As you can see here, on the similar web overview, Google is at the very top amongst the most visited websites in the world,', 'start': 1794.062, 'duration': 6.963}, {'end': 1808.348, 'text': 'beating sites like YouTube, Facebook, Instagram, Wikipedia and all the way at 10th, a pornography site, of course.', 'start': 1801.025, 'duration': 7.323}, {'end': 1817.283, 'text': "And by the way, it's a little bit sad to see that this adult site has almost three times the average visitation of Wikipedia.", 'start': 1809.381, 'duration': 7.902}, {'end': 1820.684, 'text': 'So a pretty deep insight about humankind right there.', 'start': 1817.663, 'duration': 3.021}, {'end': 1826.006, 'text': "Anyway, we are going to build google.com and it'll look like this.", 'start': 1821.685, 'duration': 4.321}, {'end': 1832.432, 'text': "However, now you're probably wondering, how can we make a page look like this, this doesn't look like regular HTML.", 'start': 1826.946, 'duration': 5.486}, {'end': 1840.101, 'text': "And that is because I've cheated a little bit and added this line up here, which is a link tag to styles dot CSS.", 'start': 1833.013, 'duration': 7.088}, {'end': 1848.05, 'text': 'And if you look at the file menu in the left hand side, you can see that actually we have a file called styles dot CSS, which contains exactly that.', 'start': 1840.341, 'duration': 7.709}, {'end': 1855.613, 'text': "cascading style sheets, which is the language for styling websites, and what you're going to learn all about a little bit later in this course.", 'start': 1848.57, 'duration': 7.043}, {'end': 1859.094, 'text': 'However, for now, I want you to completely ignore this.', 'start': 1855.973, 'duration': 3.121}, {'end': 1866.397, 'text': 'What you should do instead is just create the four HTML tags we need in order to create a google.com clone.', 'start': 1859.474, 'duration': 6.923}, {'end': 1874.779, 'text': 'and then this CSS will be pulled in and take care of styling the elements as they should be so that it will look like this.', 'start': 1867.037, 'duration': 7.742}, {'end': 1885.562, 'text': "And to give you a hint, this is an image file pointing to Google dot PNG, the file I've added here, and PNG is just a file format, just like JPEG.", 'start': 1875.179, 'duration': 10.383}, {'end': 1888.823, 'text': 'you can use it in the exact same way as we use JPEGs earlier on.', 'start': 1885.562, 'duration': 3.261}, {'end': 1890.043, 'text': 'So you should know how to do that.', 'start': 1888.903, 'duration': 1.14}, {'end': 1895.085, 'text': 'And this is an input field, you have to figure out what kind of type it is, I think you might have a clue.', 'start': 1890.564, 'duration': 4.521}, {'end': 1897.285, 'text': 'This is a button on the left hand side.', 'start': 1895.825, 'duration': 1.46}, {'end': 1898.446, 'text': 'And this is also a button.', 'start': 1897.305, 'duration': 1.141}, {'end': 1905.087, 'text': "So basically, it is these four tags you need to create in order to build a clone of the world's biggest website.", 'start': 1898.946, 'duration': 6.141}, {'end': 1906.508, 'text': 'So go ahead and do that.', 'start': 1905.768, 'duration': 0.74}, {'end': 1909.589, 'text': 'Start down here and ignore the line up here.', 'start': 1906.728, 'duration': 2.861}, {'end': 1913.93, 'text': 'And then when you return back to me, I will of course show you the solution as well.', 'start': 1910.029, 'duration': 3.901}, {'end': 1915.03, 'text': 'Good luck.', 'start': 1914.67, 'duration': 0.36}, {'end': 1923.136, 'text': 'Okay, hopefully that went well.', 'start': 1921.334, 'duration': 1.802}, {'end': 1924.758, 'text': 'If not, no worries.', 'start': 1923.757, 'duration': 1.001}, {'end': 1925.92, 'text': "Let's do it together.", 'start': 1925.219, 'duration': 0.701}, {'end': 1930.465, 'text': 'So starting with the image tag for the Google logo.', 'start': 1926.861, 'duration': 3.604}, {'end': 1933.665, 'text': 'I want to do IMG like that.', 'start': 1931.383, 'duration': 2.282}, {'end': 1935.866, 'text': "And it's a self closing one.", 'start': 1934.345, 'duration': 1.521}, {'end': 1939.369, 'text': "So I don't need a closing tag, but I need a source attribute.", 'start': 1935.886, 'duration': 3.483}, {'end': 1942.271, 'text': 'And it should point to the google.png file.', 'start': 1939.89, 'duration': 2.381}, {'end': 1945.174, 'text': "So I'll just do google.png like that.", 'start': 1942.411, 'duration': 2.763}, {'end': 1946.535, 'text': "And let's run this.", 'start': 1945.714, 'duration': 0.821}, {'end': 1948.096, 'text': 'And oh, there we go.', 'start': 1946.675, 'duration': 1.421}, {'end': 1949.217, 'text': 'We got the logo.', 'start': 1948.356, 'duration': 0.861}, {'end': 1950.878, 'text': 'Okay, moving on.', 'start': 1950.117, 'duration': 0.761}, {'end': 1954.441, 'text': "Let's do the input field, also a self closing tag.", 'start': 1951.538, 'duration': 2.903}, {'end': 1959.07, 'text': 'running the code.', 'start': 1958.47, 'duration': 0.6}, {'end': 1960.171, 'text': 'And there we go.', 'start': 1959.29, 'duration': 0.881}, {'end': 1962.932, 'text': 'We have a input field looking pretty good.', 'start': 1960.191, 'duration': 2.741}, {'end': 1968.714, 'text': "Okay, next up, there's the two buttons, one saying Google search and one saying I'm feeling lucky.", 'start': 1963.652, 'duration': 5.062}, {'end': 1973.155, 'text': "So I'm going to add both of these button, Google search.", 'start': 1969.214, 'duration': 3.941}, {'end': 1978.577, 'text': "And then since I'm lazy, I'm going to copy it and do I'm feeling lucky like that.", 'start': 1973.775, 'duration': 4.802}, {'end': 1979.858, 'text': "Let's run this.", 'start': 1979.257, 'duration': 0.601}, {'end': 1981.318, 'text': 'And there we go.', 'start': 1980.658, 'duration': 0.66}, {'end': 1986.44, 'text': 'We have a Google clone with just four HTML elements.', 'start': 1981.658, 'duration': 4.782}, {'end': 1989.965, 'text': 'So if you did this, give yourself a pat on the back.', 'start': 1987.304, 'duration': 2.661}, {'end': 1991.665, 'text': 'It is fantastically well done.', 'start': 1990.085, 'duration': 1.58}, {'end': 1993.746, 'text': 'You should really be proud of yourself.', 'start': 1991.945, 'duration': 1.801}, {'end': 1996.266, 'text': "And if you didn't manage to do it, just try it again.", 'start': 1994.166, 'duration': 2.1}, {'end': 1997.527, 'text': "And I think you'll make it.", 'start': 1996.286, 'duration': 1.241}, {'end': 2002.648, 'text': "At this point, it might be a good idea to take a little break and digest everything you've learned.", 'start': 1998.447, 'duration': 4.201}, {'end': 2006.429, 'text': 'And then when you are ready to continue, I will see you in the next scrim.', 'start': 2002.788, 'duration': 3.641}, {'end': 2016.435, 'text': "Okay, now that you've built google.com, you probably want to showcase your project on some kind of portfolio page.", 'start': 2009.853, 'duration': 6.582}, {'end': 2019.256, 'text': "So let's pretend we're creating exactly that.", 'start': 2016.875, 'duration': 2.381}, {'end': 2023.997, 'text': 'Here we have the index dot html page, the main page of our portfolio.', 'start': 2019.956, 'duration': 4.041}, {'end': 2028.819, 'text': 'And as you can see, it has peer Harold Borgen, developers, teacher procrastinator.', 'start': 2024.297, 'duration': 4.522}, {'end': 2036.061, 'text': 'So a really good description of myself, though, what it lacks is some kind of page or section, which describes my projects.', 'start': 2029.219, 'duration': 6.842}, {'end': 2042.828, 'text': 'though, I have actually created the underlying page for exactly that over here on work dot HTML.', 'start': 2036.681, 'duration': 6.147}, {'end': 2047.192, 'text': 'As you can see, this is a few tags that describes my google.com project.', 'start': 2043.248, 'duration': 3.944}, {'end': 2050.456, 'text': "However, there's no way for the users to know this.", 'start': 2047.432, 'duration': 3.024}, {'end': 2057.402, 'text': 'the only way they can get to this page now is by actually typing work about HTML up in the browser here, and then it is rendered.', 'start': 2050.456, 'duration': 6.946}, {'end': 2058.44, 'text': "we don't want that.", 'start': 2057.88, 'duration': 0.56}, {'end': 2061.783, 'text': 'Instead, we want some kind of link from the index page.', 'start': 2058.561, 'duration': 3.222}, {'end': 2066.165, 'text': 'That is this one that points towards the work dot HTML.', 'start': 2062.443, 'duration': 3.722}, {'end': 2072.148, 'text': 'And in order for us to achieve that, you have to learn about anchor tags, aka links.', 'start': 2067.126, 'duration': 5.022}, {'end': 2076.17, 'text': 'An anchor tag is simply an HTML tag with an A.', 'start': 2072.789, 'duration': 3.381}, {'end': 2078.031, 'text': "So let's open and close an anchor tag.", 'start': 2076.17, 'duration': 1.861}, {'end': 2084.014, 'text': 'And right, for example, check out my projects here, like that.', 'start': 2078.331, 'duration': 5.683}, {'end': 2090.54, 'text': "If we run this, it seemingly looks just like our paragraph, and we can't click it either.", 'start': 2084.534, 'duration': 6.006}, {'end': 2096.405, 'text': 'And that is because for anchor tags, you also have to provide it with an age ref attribute.', 'start': 2090.56, 'duration': 5.845}, {'end': 2098.667, 'text': "that's short for hypertext reference.", 'start': 2096.405, 'duration': 2.262}, {'end': 2101.449, 'text': 'really fancy, scary looking word right there.', 'start': 2098.667, 'duration': 2.782}, {'end': 2102.35, 'text': "don't worry about it.", 'start': 2101.449, 'duration': 0.901}, {'end': 2105.812, 'text': 'all this attribute does is decide where the link should point to.', 'start': 2102.35, 'duration': 3.462}, {'end': 2115.799, 'text': 'So if we do equal, and then two quotes, we can inside the quotes, simply write work dot HTML, we now run this, you can see that it renders as a link.', 'start': 2106.233, 'duration': 9.566}, {'end': 2120.581, 'text': "And when we click it, boom, we're taken to the work dot HTML page.", 'start': 2116.199, 'duration': 4.382}, {'end': 2122.281, 'text': 'Really nice.', 'start': 2121.441, 'duration': 0.84}, {'end': 2130.224, 'text': 'Now, another thing I want to show you with with anchor tags is that you can nest them inside of other tags and actually in line in a text block.', 'start': 2123.042, 'duration': 7.182}, {'end': 2141.485, 'text': "So let's say that we want to link to google.com from this site, then we'll create a paragraph we can say something like check out the live demo here.", 'start': 2130.765, 'duration': 10.72}, {'end': 2145.128, 'text': 'And we only want the here word to be a clickable link.', 'start': 2142.185, 'duration': 2.943}, {'end': 2149.911, 'text': "Well, then we'll simply wrap the anchor tag round here as well.", 'start': 2145.608, 'duration': 4.303}, {'end': 2153.494, 'text': "And we'll close it before we close the paragraph.", 'start': 2150.652, 'duration': 2.842}, {'end': 2158.118, 'text': "And then we'll do the href, paste in the URL to google.com.", 'start': 2153.915, 'duration': 4.203}, {'end': 2162.882, 'text': 'Now, this is a link that points to an external website, not to any of our pages.', 'start': 2158.678, 'duration': 4.204}, {'end': 2167.383, 'text': 'So if we run this, you can see that the link is now only over the here word.', 'start': 2163.422, 'duration': 3.961}, {'end': 2173.484, 'text': 'However, if I click this link, now, the scrim bot mini browser will try to head over to google.com.', 'start': 2167.963, 'duration': 5.521}, {'end': 2177.285, 'text': 'And we only allow the mini browser to render scrim projects at the moment.', 'start': 2173.684, 'duration': 3.601}, {'end': 2178.165, 'text': "So that won't work.", 'start': 2177.365, 'duration': 0.8}, {'end': 2182.226, 'text': "Instead, what I'm going to do is make this link open in a new tab.", 'start': 2178.645, 'duration': 3.581}, {'end': 2184.886, 'text': 'And the way we do that is three new attributes.', 'start': 2182.246, 'duration': 2.64}, {'end': 2189.907, 'text': "So first, I'm just going to break this into a new line just to improve the readability a little bit.", 'start': 2185.066, 'duration': 4.841}, {'end': 2193.833, 'text': "And then here, I'm gonna write target Equals.", 'start': 2190.567, 'duration': 3.266}, {'end': 2196.107, 'text': 'underscore blank.', 'start': 2194.727, 'duration': 1.38}, {'end': 2203.03, 'text': 'Now that is a cryptic way of saying that you want the link to open up in a new tab, I know.', 'start': 2196.788, 'duration': 6.242}, {'end': 2212.392, 'text': "But if we now run this, if you click on this link, what you'll see is that in your main browser, a new tab will be opened at the google.com homepage.", 'start': 2203.31, 'duration': 9.082}, {'end': 2218.174, 'text': "So I'm not going to go deeper into why it's called target equals underscore blank.", 'start': 2212.912, 'duration': 5.262}, {'end': 2219.454, 'text': 'But this is the way to do it.', 'start': 2218.274, 'duration': 1.18}, {'end': 2228.817, 'text': 'I of course wish that HTML had a better solution for this, for example, new tab equals Yes, that would have made a lot more sense to me.', 'start': 2219.955, 'duration': 8.862}, {'end': 2232.378, 'text': 'But this is how it is, you just have to accept it.', 'start': 2229.477, 'duration': 2.901}, {'end': 2234.599, 'text': 'Okay, that was a lot of talking for me.', 'start': 2232.858, 'duration': 1.741}, {'end': 2236.079, 'text': "Now it's time for a challenge.", 'start': 2234.919, 'duration': 1.16}, {'end': 2241.821, 'text': 'I want you to create an anchor tag that links back to the index dot HTML page.', 'start': 2236.799, 'duration': 5.022}, {'end': 2246.762, 'text': 'Because if a user ends up on this page, they also need a way to get back to the main page.', 'start': 2241.981, 'duration': 4.781}, {'end': 2249.743, 'text': 'So create that link here however you want.', 'start': 2247.202, 'duration': 2.541}, {'end': 2252.504, 'text': 'And then I will show you the solution when you return back to me.', 'start': 2250.083, 'duration': 2.421}, {'end': 2266.64, 'text': "Okay, hopefully that went well, let's create this anchor tag, I'll wrap it inside of a paragraph, right turn to homepage.", 'start': 2258.433, 'duration': 8.207}, {'end': 2275.427, 'text': "And then I'll simply wrap the homepage word in an anchor tag like that, and point that anchor tag to index dot html.", 'start': 2267.281, 'duration': 8.146}, {'end': 2277.95, 'text': 'If we run this, you can see return to homepage.', 'start': 2275.728, 'duration': 2.222}, {'end': 2280.752, 'text': 'And if we click that, we are back at the homepage.', 'start': 2277.99, 'duration': 2.762}, {'end': 2281.953, 'text': 'Great job.', 'start': 2281.452, 'duration': 0.501}, {'end': 2282.894, 'text': "Let's move on.", 'start': 2282.353, 'duration': 0.541}, {'end': 2288.483, 'text': "Okay, we're back at our Google example here.", 'start': 2286.741, 'duration': 1.742}, {'end': 2291.226, 'text': 'And now I want you to add a anchor tag to the page.', 'start': 2288.883, 'duration': 2.343}, {'end': 2297.733, 'text': "Because sometimes you'll see that Google adds a little text underneath the buttons, for example, something about privacy.", 'start': 2291.787, 'duration': 5.946}, {'end': 2302.719, 'text': 'like we protect your privacy, then with a learn how link that you can click on to read more about that.', 'start': 2297.733, 'duration': 4.986}, {'end': 2305.181, 'text': 'So that is exactly what I want you to do.', 'start': 2303.279, 'duration': 1.902}, {'end': 2309.944, 'text': 'I want you to add an anchor tag that point to blog.html.', 'start': 2305.962, 'duration': 3.982}, {'end': 2313.305, 'text': "As you can see, I've added a blog.html file up here.", 'start': 2310.364, 'duration': 2.941}, {'end': 2316.827, 'text': 'And I want you to wrap the link inside of a paragraph tag.', 'start': 2313.486, 'duration': 3.341}], 'summary': 'The transcript covers html basics, building a google clone, adding anchor tags, and creating a portfolio page.', 'duration': 579.699, 'max_score': 1737.128, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ1737128.jpg'}, {'end': 1973.155, 'src': 'embed', 'start': 1942.411, 'weight': 3, 'content': [{'end': 1945.174, 'text': "So I'll just do google.png like that.", 'start': 1942.411, 'duration': 2.763}, {'end': 1946.535, 'text': "And let's run this.", 'start': 1945.714, 'duration': 0.821}, {'end': 1948.096, 'text': 'And oh, there we go.', 'start': 1946.675, 'duration': 1.421}, {'end': 1949.217, 'text': 'We got the logo.', 'start': 1948.356, 'duration': 0.861}, {'end': 1950.878, 'text': 'Okay, moving on.', 'start': 1950.117, 'duration': 0.761}, {'end': 1954.441, 'text': "Let's do the input field, also a self closing tag.", 'start': 1951.538, 'duration': 2.903}, {'end': 1959.07, 'text': 'running the code.', 'start': 1958.47, 'duration': 0.6}, {'end': 1960.171, 'text': 'And there we go.', 'start': 1959.29, 'duration': 0.881}, {'end': 1962.932, 'text': 'We have a input field looking pretty good.', 'start': 1960.191, 'duration': 2.741}, {'end': 1968.714, 'text': "Okay, next up, there's the two buttons, one saying Google search and one saying I'm feeling lucky.", 'start': 1963.652, 'duration': 5.062}, {'end': 1973.155, 'text': "So I'm going to add both of these button, Google search.", 'start': 1969.214, 'duration': 3.941}], 'summary': 'Created a google logo, input field, and two buttons for google search.', 'duration': 30.744, 'max_score': 1942.411, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ1942411.jpg'}], 'start': 1343.124, 'title': 'Html elements and layout', 'summary': 'Introduces interactive html elements, html layout challenges, input types, building a google clone, html document structuring, and lists. it covers the button tag, input tags with various attributes, and creating a google clone with minimal html elements. emphasizes the importance of html structuring and lists in web development.', 'chapters': [{'end': 1402.434, 'start': 1343.124, 'title': 'Interactive html elements', 'summary': 'Introduces the button tag as the first interactive html element, emphasizing its widespread use on the web and its potential for javascript integration, but clarifies that the current lesson will not cover its functionality beyond basic styling and text.', 'duration': 59.31, 'highlights': ['The button tag is presented as the first interactive HTML element, with a focus on its widespread use on the web.', 'The lesson clarifies that while the button has the potential for JavaScript integration, the course will not cover this functionality beyond basic styling and text.', 'The tutorial encourages experimentation with creating a button and suggests further learning in JavaScript for advanced functionality.']}, {'end': 1775.582, 'start': 1403.015, 'title': 'Html layout challenge and input types', 'summary': 'Covers creating a website layout using html tags for welcoming message, paragraph, and signup button, then introduces input tags with attributes like type, placeholder, and password, and explores various interactive input types like date, time, color picker, and file upload, emphasizing the importance of googling skills for programmers.', 'duration': 372.567, 'highlights': ['The chapter introduces creating a website layout with HTML tags for welcoming message, paragraph, and signup button, emphasizing correct HTML tag setup for rendering. The chapter guides on creating a website layout using HTML tags for welcoming message, paragraph, and signup button, emphasizing the correct setup of HTML tags for proper rendering on the page.', 'The chapter explains the input tag in HTML, including its type attribute for various options like text, and the use of the placeholder attribute for giving users a hint about the data being requested. The chapter explains the input tag in HTML, including its type attribute for various options like text and the use of the placeholder attribute for providing a hint to the user about the data being requested.', "The chapter demonstrates the use of the input tag's type attribute for creating interactive elements like date picker, time picker, and color picker, showcasing the versatility of the input tag. The chapter demonstrates the use of the input tag's type attribute for creating interactive elements like date picker, time picker, and color picker, showcasing the versatility of the input tag.", 'The chapter emphasizes the importance of googling skills for programmers and provides a challenge to search and find the appropriate type attribute for an HTML input field that lets users upload image files. The chapter emphasizes the importance of googling skills for programmers and provides a challenge to search and find the appropriate type attribute for an HTML input field that lets users upload image files.']}, {'end': 2411.729, 'start': 1779.437, 'title': 'Building google and creating links', 'summary': 'Discusses building a google clone using html, including creating the most visited website in the world and adding anchor tags for linking within the webpage, highlighting the process of creating a google clone with just four html elements and adding anchor tags for internal and external linking, and the importance of structuring html documents.', 'duration': 632.292, 'highlights': ["Creating a Google clone with just four HTML elements The speaker instructs to create a Google clone using just four HTML elements, namely an image tag for the Google logo, an input field, and two buttons for Google search and I'm feeling lucky.", 'Adding anchor tags for linking within the webpage The chapter emphasizes the addition of anchor tags to create internal links within the webpage, allowing users to navigate to different sections of the portfolio page and to return to the main page.', 'Importance of structuring HTML documents The chapter discusses the importance of structuring HTML documents correctly, highlighting the simplified yet functional structure used initially and the philosophy of first making it work and then improving it.']}, {'end': 2962.681, 'start': 2412.209, 'title': 'Html structure and lists', 'summary': 'Covers the proper structure of html documents, including the use of head, body, html, and doc type declaration, along with a detailed explanation of creating ordered and unordered lists, with examples and practical challenges.', 'duration': 550.472, 'highlights': ['The chapter covers the proper structure of HTML documents, including the use of head, body, HTML, and doc type declaration. It explains the importance of structuring HTML documents and demonstrates the placement of metadata and visible elements within the head and body tags.', 'Detailed explanation of creating ordered and unordered lists, with examples and practical challenges. It provides an overview of creating ordered lists using the

tag and unordered lists using the
tag, along with the demonstration of adding list items and their rendering.', 'Practical challenge to create an ordered list of top three favorite foods within the body tag. It presents a practical challenge for creating an ordered list within the body tag, showcasing the creation of an ordered list and filling it with specific items as an exercise.']}], 'duration': 1619.557, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ1343124.jpg', 'highlights': ['The chapter emphasizes the importance of googling skills for programmers and provides a challenge to search and find the appropriate type attribute for an HTML input field that lets users upload image files.', 'The chapter introduces creating a website layout with HTML tags for welcoming message, paragraph, and signup button, emphasizing correct HTML tag setup for rendering.', 'The chapter covers the proper structure of HTML documents, including the use of head, body, HTML, and doc type declaration.', "The chapter demonstrates the use of the input tag's type attribute for creating interactive elements like date picker, time picker, and color picker, showcasing the versatility of the input tag.", 'The chapter discusses the importance of structuring HTML documents correctly, highlighting the simplified yet functional structure used initially and the philosophy of first making it work and then improving it.']}, {'end': 4753.577, 'segs': [{'end': 3492.219, 'src': 'heatmap', 'start': 3085.094, 'weight': 4, 'content': [{'end': 3088.996, 'text': "And you've also filled up this body element here with HTML tags.", 'start': 3085.094, 'duration': 3.902}, {'end': 3092.618, 'text': "Next, you'll move on to part two of the challenge.", 'start': 3090.037, 'duration': 2.581}, {'end': 3096.859, 'text': "What you'll do there is take your existing design and modify it.", 'start': 3093.138, 'duration': 3.721}, {'end': 3100.68, 'text': 'So if we head over to the index dot JavaScript file,', 'start': 3097.539, 'duration': 3.141}, {'end': 3106.322, 'text': 'you can see that there are a bunch of so called JavaScript functions which probably look really scary at this point.', 'start': 3100.68, 'duration': 5.642}, {'end': 3107.422, 'text': "But don't worry,", 'start': 3106.622, 'duration': 0.8}, {'end': 3118.186, 'text': "the only thing you're going to do here is take the word that you see inside of the quotes right here and replace them with one of the words that are commented out in the line above.", 'start': 3107.422, 'duration': 10.764}, {'end': 3126.485, 'text': 'because this will give you the opportunity to change the styling on the page according to what word you change this argument to.', 'start': 3118.626, 'duration': 7.859}, {'end': 3131.187, 'text': "So what you're to do here is look at the name of this function, it says favorite movie genre.", 'start': 3127.065, 'duration': 4.122}, {'end': 3137.769, 'text': 'And what is that? Do you like space movies, scary movies, military movies, romantic movies, cowboy movies, and so on.', 'start': 3131.687, 'duration': 6.082}, {'end': 3141.571, 'text': 'And then just take your preference and change it like this.', 'start': 3138.45, 'duration': 3.121}, {'end': 3148.393, 'text': 'So if you choose cowboy, for example, what then will happen is that the font on the website suddenly became like a Western movie.', 'start': 3141.591, 'duration': 6.802}, {'end': 3149.474, 'text': "That's pretty cool.", 'start': 3148.593, 'duration': 0.881}, {'end': 3153.938, 'text': 'And moving on, here you are to answer what is your favorite fruit?', 'start': 3150.174, 'duration': 3.764}, {'end': 3156.54, 'text': 'Is it watermelon, tomato, banana??', 'start': 3154.438, 'duration': 2.102}, {'end': 3160.524, 'text': 'If it, for example, is banana, then you should replace regular with banana.', 'start': 3157.021, 'duration': 3.503}, {'end': 3166.049, 'text': 'And what will then happen? If you run the code, then suddenly, your page is banana colored.', 'start': 3160.884, 'duration': 5.165}, {'end': 3167.35, 'text': 'Really nice.', 'start': 3166.59, 'duration': 0.76}, {'end': 3169.953, 'text': 'Now you are a cowboy banana.', 'start': 3168.191, 'duration': 1.762}, {'end': 3170.894, 'text': "That's pretty cool.", 'start': 3170.233, 'duration': 0.661}, {'end': 3174.076, 'text': "Finally, there's two more parameters you can tweak.", 'start': 3171.974, 'duration': 2.102}, {'end': 3179.48, 'text': "First tell me it's your favorite mode on your computer light mode or dark mode.", 'start': 3174.576, 'duration': 4.904}, {'end': 3184.504, 'text': 'if you choose dark and run the code again, then you can see the colors have flipped.', 'start': 3179.48, 'duration': 5.024}, {'end': 3188.927, 'text': 'And now it is primarily dark, with the brown background and the light yellow color,', 'start': 3184.624, 'duration': 4.303}, {'end': 3193.631, 'text': 'as opposed to how it was previously with the yellow background and brown text color.', 'start': 3188.927, 'duration': 4.704}, {'end': 3201.574, 'text': 'And then at the very end, you are to choose what kind of style you like your edges to be sharp, soft or round.', 'start': 3194.807, 'duration': 6.767}, {'end': 3205.598, 'text': "Let's say you like round, well, then you'll simply replace sharp with round.", 'start': 3201.914, 'duration': 3.684}, {'end': 3206.659, 'text': 'And there we go.', 'start': 3205.939, 'duration': 0.72}, {'end': 3214.387, 'text': 'We have a nice round layout where the image and the input and button now have a much more round feeling to it.', 'start': 3207.06, 'duration': 7.327}, {'end': 3223.496, 'text': 'So what happens here is that these are JavaScript functions that execute code which you can see further down in the index.js file,', 'start': 3215.288, 'duration': 8.208}, {'end': 3225.237, 'text': 'and change the layout accordingly.', 'start': 3223.496, 'duration': 1.741}, {'end': 3232.664, 'text': "Though, you should ignore everything below this line, don't even try to understand it, it's far outside the scope of this course.", 'start': 3225.918, 'duration': 6.746}, {'end': 3236.327, 'text': "And you're gonna learn JavaScript later in the front end developer path anyway.", 'start': 3232.944, 'duration': 3.383}, {'end': 3238.69, 'text': "So it's nothing for you to worry about right now.", 'start': 3236.708, 'duration': 1.982}, {'end': 3249.546, 'text': "Now I'm going to reset all of these, set these two to regular and these two to light and sharp as that is the default styling that we should have.", 'start': 3239.96, 'duration': 9.586}, {'end': 3253.669, 'text': "And then I'll leave you with this image right here, as it.", 'start': 3249.566, 'duration': 4.103}, {'end': 3256.33, 'text': 'now is your turn to build this layout.', 'start': 3253.669, 'duration': 2.661}, {'end': 3261.714, 'text': 'personalize it with the JavaScript functions so that you have your very own completely unique website.', 'start': 3256.33, 'duration': 5.384}, {'end': 3264.415, 'text': 'So go ahead and do this right now.', 'start': 3262.954, 'duration': 1.461}, {'end': 3266.617, 'text': 'And then I will see you when you return back to me.', 'start': 3264.656, 'duration': 1.961}, {'end': 3273.4, 'text': 'Okay, hopefully, that went well.', 'start': 3271.88, 'duration': 1.52}, {'end': 3274.661, 'text': "Let's now do this together.", 'start': 3273.581, 'duration': 1.08}, {'end': 3276.381, 'text': 'First, we need the image tag.', 'start': 3274.901, 'duration': 1.48}, {'end': 3278.022, 'text': "So I'm gonna do IMG.", 'start': 3276.401, 'duration': 1.621}, {'end': 3282.983, 'text': "The source is the pierre dot JPEG, which I'd already added.", 'start': 3278.782, 'duration': 4.201}, {'end': 3285.884, 'text': 'Yes, there we can see it is rendering properly.', 'start': 3283.643, 'duration': 2.241}, {'end': 3288.225, 'text': 'Next up, there is an h1.', 'start': 3286.764, 'duration': 1.461}, {'end': 3292.526, 'text': 'I my name is pear like that.', 'start': 3289.625, 'duration': 2.901}, {'end': 3293.726, 'text': 'Very good.', 'start': 3293.266, 'duration': 0.46}, {'end': 3295.607, 'text': 'Moving on, we have the h2.', 'start': 3293.746, 'duration': 1.861}, {'end': 3300.627, 'text': 'fun facts about me, like that.', 'start': 3297.025, 'duration': 3.602}, {'end': 3304.43, 'text': "And then there's the unordered list and the list items.", 'start': 3301.228, 'duration': 3.202}, {'end': 3310.673, 'text': "So I'll do UL, close that UL because the list items need to be inside of the URL.", 'start': 3305.19, 'duration': 5.483}, {'end': 3314.336, 'text': 'And the first one is 36 years old.', 'start': 3311.114, 'duration': 3.222}, {'end': 3318.418, 'text': "I'm gonna copy this one, like that.", 'start': 3315.136, 'duration': 3.282}, {'end': 3321.48, 'text': 'And I live in Norway.', 'start': 3318.758, 'duration': 2.722}, {'end': 3324.182, 'text': 'And I sing in a choir.', 'start': 3322.241, 'duration': 1.941}, {'end': 3327.718, 'text': 'And there we go looking pretty good.', 'start': 3325.936, 'duration': 1.782}, {'end': 3331.461, 'text': 'Next up, there is the paragraph with the inline anchor tag.', 'start': 3328.418, 'duration': 3.043}, {'end': 3332.962, 'text': "Here's the paragraph.", 'start': 3332.102, 'duration': 0.86}, {'end': 3338.167, 'text': 'Connect with me on LinkedIn like that.', 'start': 3334.263, 'duration': 3.904}, {'end': 3342.09, 'text': 'Oops, it should say me on LinkedIn here.', 'start': 3338.868, 'duration': 3.222}, {'end': 3348.856, 'text': 'And then we are to wrap LinkedIn here into an href like that.', 'start': 3342.371, 'duration': 6.485}, {'end': 3353.582, 'text': "And then I'm going to paste in the URL to my LinkedIn right here.", 'start': 3350.319, 'duration': 3.263}, {'end': 3363.429, 'text': "And if you actually want to connect with me on LinkedIn, feel free to click on this link as soon as I've added the target equals underscore blank,", 'start': 3353.962, 'duration': 9.467}, {'end': 3365.01, 'text': 'so that it opens up a new tab.', 'start': 3363.429, 'duration': 1.581}, {'end': 3378.861, 'text': 'Okay, finally, we we need to add the input and the button input type text like that and button with join newsletter as the text.', 'start': 3365.751, 'duration': 13.11}, {'end': 3381.128, 'text': 'Yes, that worked.', 'start': 3380.148, 'duration': 0.98}, {'end': 3384.969, 'text': 'And we finally just need the placeholder in the input.', 'start': 3381.328, 'duration': 3.641}, {'end': 3392.05, 'text': "And here we're going to write enter email, enter email, like that.", 'start': 3386.549, 'duration': 5.501}, {'end': 3396.571, 'text': 'And actually looks pretty good to me.', 'start': 3392.31, 'duration': 4.261}, {'end': 3398.732, 'text': 'That is what we were looking for.', 'start': 3396.871, 'duration': 1.861}, {'end': 3402.613, 'text': 'Yes Okay, next step, we are going to personalize it.', 'start': 3399.112, 'duration': 3.501}, {'end': 3407.082, 'text': 'This will be easy for me I really love movies about space.', 'start': 3403.133, 'duration': 3.949}, {'end': 3409.623, 'text': "So I'm going to choose space here as my favorite movie genre.", 'start': 3407.102, 'duration': 2.521}, {'end': 3412.525, 'text': 'It gives me this really neat sci fi ish font.', 'start': 3409.964, 'duration': 2.561}, {'end': 3414.886, 'text': 'And I am a huge avocado fan.', 'start': 3413.205, 'duration': 1.681}, {'end': 3416.327, 'text': 'So gotta do that.', 'start': 3415.006, 'duration': 1.321}, {'end': 3419.108, 'text': 'Whoo, looking pretty good.', 'start': 3417.087, 'duration': 2.021}, {'end': 3422.17, 'text': 'I tend to prefer both light mode and dark mode.', 'start': 3419.128, 'duration': 3.042}, {'end': 3423.19, 'text': "But let's try dark.", 'start': 3422.19, 'duration': 1}, {'end': 3424.771, 'text': 'Yeah, not bad.', 'start': 3423.35, 'duration': 1.421}, {'end': 3431.986, 'text': 'And as for favorite edge style, not going to do completely round, not completely sharp, but something in between.', 'start': 3425.74, 'duration': 6.246}, {'end': 3434.969, 'text': 'As I think the answer often is something in between.', 'start': 3432.827, 'duration': 2.142}, {'end': 3437.252, 'text': 'And yes, there we go.', 'start': 3435.77, 'duration': 1.482}, {'end': 3438.693, 'text': 'Pretty cool website.', 'start': 3437.532, 'duration': 1.161}, {'end': 3444.619, 'text': 'Now, the final thing I want you to do is head back to your note where you created your website.', 'start': 3439.617, 'duration': 5.002}, {'end': 3454.883, 'text': "And then click on the bottom right icon, the cogwheel and choose download as zip, because that'll download your project through your local machine.", 'start': 3445.139, 'duration': 9.744}, {'end': 3458.725, 'text': 'And we need that in order to deploy this project over the next few scripts.', 'start': 3455.003, 'duration': 3.722}, {'end': 3468.172, 'text': "So what I'd recommend you to do is, on your computer, create a dev folder and move that zip file you just downloaded to this dev folder.", 'start': 3459.585, 'duration': 8.587}, {'end': 3469.893, 'text': 'double click on it to open it.', 'start': 3468.172, 'duration': 1.721}, {'end': 3471.855, 'text': "that'll give it this long, obscure ID.", 'start': 3469.893, 'duration': 1.962}, {'end': 3476.559, 'text': 'So if I were you, I would change that to something understandable, for example personal site,', 'start': 3472.215, 'duration': 4.344}, {'end': 3483.027, 'text': 'and just save it so that you have your project neatly placed with a good name on your local computer,', 'start': 3477.119, 'duration': 5.908}, {'end': 3486.531, 'text': 'so that we are ready to share it with the world over the next few scrims.', 'start': 3483.027, 'duration': 3.504}, {'end': 3488.013, 'text': 'It is going to be epic.', 'start': 3486.731, 'duration': 1.282}, {'end': 3492.219, 'text': "So I look forward to see you in the next room after you've done all of this.", 'start': 3488.334, 'duration': 3.885}], 'summary': 'Javascript functions modify website layout based on user preferences, creating a unique personalized website.', 'duration': 407.125, 'max_score': 3085.094, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ3085094.jpg'}, {'end': 3685.129, 'src': 'embed', 'start': 3661.908, 'weight': 3, 'content': [{'end': 3669.815, 'text': "And also feel free to mention anyone else who've been involved in this project and add a relevant hashtag, like Jess is doing here, for example,", 'start': 3661.908, 'duration': 7.907}, {'end': 3674.159, 'text': '100 days of code that that is a great hashtag to follow and to use,', 'start': 3669.815, 'duration': 4.344}, {'end': 3680.445, 'text': 'as it puts you in touch with a bunch of other people online who are going through the same learning journey as you are.', 'start': 3674.159, 'duration': 6.286}, {'end': 3685.129, 'text': 'So I am looking forward to see your personal site either on LinkedIn or Twitter.', 'start': 3680.905, 'duration': 4.224}], 'summary': 'Encourage project involvement, promote #100daysofcode, and share personal site on linkedin or twitter.', 'duration': 23.221, 'max_score': 3661.908, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ3661908.jpg'}, {'end': 4159.75, 'src': 'embed', 'start': 4111.662, 'weight': 0, 'content': [{'end': 4116.326, 'text': "at this point I'm going to choose a color called saddle brown, like that.", 'start': 4111.662, 'duration': 4.664}, {'end': 4122.131, 'text': 'And you might wonder well, how do I know that saddle brown is a color that CSS supports?', 'start': 4117.006, 'duration': 5.125}, {'end': 4131.103, 'text': 'Well, you might have noticed, as you wrote CSS values, that VS code, our editor, starts suggesting values for you as you start typing.', 'start': 4122.673, 'duration': 8.43}, {'end': 4133.005, 'text': 'So that is how I found saddle brown.', 'start': 4131.403, 'duration': 1.602}, {'end': 4137.546, 'text': "this suggestion box here isn't recorded by scrimba itself.", 'start': 4133.725, 'duration': 3.821}, {'end': 4141.846, 'text': "So you won't see it in recording, but you will see it as you interact with the code yourself.", 'start': 4137.747, 'duration': 4.099}, {'end': 4143.308, 'text': 'So we have the background.', 'start': 4142.227, 'duration': 1.081}, {'end': 4144.968, 'text': "Now let's move on to the color.", 'start': 4143.648, 'duration': 1.32}, {'end': 4148.087, 'text': "Here, I don't have red, I want to have something a bit more cookie ish.", 'start': 4145.308, 'duration': 2.779}, {'end': 4154.37, 'text': 'And it just happens to be a color called chocolate like that starting to look pretty cookie ish.', 'start': 4148.408, 'duration': 5.962}, {'end': 4157.37, 'text': 'The font size, I want to be larger.', 'start': 4155.41, 'duration': 1.96}, {'end': 4159.75, 'text': "So I'm gonna set that to 25.", 'start': 4157.39, 'duration': 2.36}], 'summary': 'Using css in vs code to choose colors and set font size to 25.', 'duration': 48.088, 'max_score': 4111.662, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ4111662.jpg'}, {'end': 4291.58, 'src': 'embed', 'start': 4266.874, 'weight': 2, 'content': [{'end': 4273.257, 'text': 'But if I change the recipe, for example, changing this eight to one, boom, you can see that the color is suddenly completely different.', 'start': 4266.874, 'duration': 6.383}, {'end': 4280.615, 'text': "Now, we're not going to go into how these hex color codes work on the inside, as that's outside of the scope of this lecture.", 'start': 4274.133, 'duration': 6.482}, {'end': 4286.838, 'text': "And it's certainly not expected that you remember what kind of colors the different hex codes refer to.", 'start': 4281.036, 'duration': 5.802}, {'end': 4291.58, 'text': 'So now you might be a little bit confused and overwhelmed about all of these properties.', 'start': 4287.278, 'duration': 4.302}], 'summary': 'Changing the recipe from eight to one alters color significantly.', 'duration': 24.706, 'max_score': 4266.874, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ4266874.jpg'}], 'start': 2963.122, 'title': 'Building personalized websites & basic html/css', 'summary': 'Introduces building a personalized website with basic styling and javascript functions for visual effects based on user preferences. it also involves adding various html elements, personalizing the website, deploying it using netlify, and covering html and css fundamentals, including core tags, document structure, and basic css styling properties.', 'chapters': [{'end': 3238.69, 'start': 2963.122, 'title': 'Building personalized website & custom styling', 'summary': 'Introduces building a personalized website about oneself with basic styling, followed by customizing the design using javascript functions, allowing for different visual effects based on user preferences such as favorite movie genre, fruit, mode, and edge style.', 'duration': 275.568, 'highlights': ['Building a personalized website with basic styling is the first part of the challenge. The chapter focuses on creating a simple website with minimal default styling, involving adding an image, name, fun facts, a link to LinkedIn, and a placeholder newsletter sign-up form.', "Customizing the design using JavaScript functions to create different visual effects based on user preferences. The section explains how JavaScript functions can be used to modify the website's appearance based on user preferences for movie genre, fruit, mode, and edge style, resulting in distinct visual changes.", "Introduction to JavaScript functions for modifying the website's appearance based on user preferences. Explanation of how JavaScript functions can be utilized to change the styling of the website based on user input, such as favorite movie genre, fruit, mode, and edge style preferences."]}, {'end': 3704.426, 'start': 3239.96, 'title': 'Building personalized website with html', 'summary': 'Involves building a personalized website by adding various elements including image, headers, list items, paragraph, anchor tag, input, and button, then personalizing the website with movie genre, font, dark mode, and edge style, followed by deploying the site using netlify and sharing it on social media.', 'duration': 464.466, 'highlights': ['Deploying the site using Netlify and sharing it on social media. The final step involves deploying the project through Netlify and sharing it on platforms like LinkedIn or Twitter to showcase it to the world.', 'Personalizing the website with movie genre, font, dark mode, and edge style. The personalization process involves choosing a movie genre, font, dark mode, and edge style to customize the website according to personal preferences.', 'Adding various elements including image, headers, list items, paragraph, anchor tag, input, and button. The process involves adding multiple elements to the website such as image, headers, list items, paragraph, anchor tag, input, and button to create a personalized layout.']}, {'end': 4304.734, 'start': 3704.906, 'title': 'Html and css fundamentals', 'summary': 'Covered the fundamentals of html, including core tags like h1, h2, and paragraph tags, nesting, buttons, input fields, anchor tags, document structure, lists, and deploying a website using netlify. then, it introduced the basics of css, including linking css to html, selecting elements, and styling properties like color, background, font size, weight, text align, and margin top.', 'duration': 599.828, 'highlights': ['The chapter covered the fundamentals of HTML Covered core HTML tags, nesting, buttons, input fields, anchor tags, document structure, and lists.', 'Introduction to CSS basics Introduced linking CSS to HTML, selecting elements, and styling properties like color, background, font size, weight, text align, and margin top.', 'Deploying a website using Netlify Demonstrated deploying a website using Netlify to make it accessible on the World Wide Web.']}, {'end': 4753.577, 'start': 4308.729, 'title': 'Css manipulation and google homepage styling', 'summary': 'Discusses using css to manipulate a wikipedia page and then proceeds to guide through the process of linking css to an html file and styling the google homepage, including setting widths for elements and addressing the behavior of inline and block elements.', 'duration': 444.848, 'highlights': ['The tutorial begins with using CSS to manipulate a Wikipedia page, demonstrating how to select elements, apply CSS directly, and alter the appearance of the page, providing a hands-on experience for the learners.', 'It then guides through the process of linking a CSS file to an HTML file, emphasizing the significance of practical learning and encouraging the learners to independently search for solutions, thereby promoting problem-solving skills.', 'The chapter explains the process of styling the Google homepage, focusing on setting the widths of elements using CSS selectors and pixel units, providing a clear understanding of the concepts and practical application of CSS properties.', 'It addresses the behavior of inline and block elements using a relatable example of showcasing a collection in a museum, effectively explaining the concept through an engaging analogy.']}], 'duration': 1790.455, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ2963122.jpg', 'highlights': ["Introduction to JavaScript functions for modifying the website's appearance based on user preferences. Explanation of how JavaScript functions can be utilized to change the styling of the website based on user input, such as favorite movie genre, fruit, mode, and edge style preferences.", "Customizing the design using JavaScript functions to create different visual effects based on user preferences. The section explains how JavaScript functions can be used to modify the website's appearance based on user preferences for movie genre, fruit, mode, and edge style, resulting in distinct visual changes.", 'Building a personalized website with basic styling is the first part of the challenge. The chapter focuses on creating a simple website with minimal default styling, involving adding an image, name, fun facts, a link to LinkedIn, and a placeholder newsletter sign-up form.', 'Personalizing the website with movie genre, font, dark mode, and edge style. The personalization process involves choosing a movie genre, font, dark mode, and edge style to customize the website according to personal preferences.', 'Adding various elements including image, headers, list items, paragraph, anchor tag, input, and button. The process involves adding multiple elements to the website such as image, headers, list items, paragraph, anchor tag, input, and button to create a personalized layout.', 'The chapter covered the fundamentals of HTML Covered core HTML tags, nesting, buttons, input fields, anchor tags, document structure, and lists.', 'Introduction to CSS basics Introduced linking CSS to HTML, selecting elements, and styling properties like color, background, font size, weight, text align, and margin top.', 'Deploying a website using Netlify Demonstrated deploying a website using Netlify to make it accessible on the World Wide Web.']}, {'end': 5346.393, 'segs': [{'end': 4798.131, 'src': 'embed', 'start': 4774.17, 'weight': 2, 'content': [{'end': 4782.599, 'text': 'Another way to look at this is that the block level element blocks out the rest of the available horizontal space so that nothing else can be placed there.', 'start': 4774.17, 'duration': 8.429}, {'end': 4791.126, 'text': 'And that is regardless of how why this images the content itself display block requires control over all the horizontal space in its given container.', 'start': 4782.759, 'duration': 8.367}, {'end': 4798.131, 'text': 'So when this block image is placed here, and you add a new image, it would have to be placed underneath the previous one.', 'start': 4791.467, 'duration': 6.664}], 'summary': 'Block level elements block out horizontal space, requiring new images to be placed underneath the previous one.', 'duration': 23.961, 'max_score': 4774.17, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ4774170.jpg'}, {'end': 4981.136, 'src': 'embed', 'start': 4948.74, 'weight': 5, 'content': [{'end': 4953.984, 'text': "I'm going to create an opening div, and then indent these two, and then a closing div below here.", 'start': 4948.74, 'duration': 5.244}, {'end': 4961.569, 'text': 'Now, if we run this code, seemingly nothing has happened, because the div actually does very little in itself,', 'start': 4954.724, 'duration': 6.845}, {'end': 4963.871, 'text': 'though it is indispensable for web developers.', 'start': 4961.569, 'duration': 2.302}, {'end': 4966.173, 'text': 'Just to show you how important it is.', 'start': 4964.371, 'duration': 1.802}, {'end': 4968.555, 'text': "Let's take a look at Facebook and my timeline.", 'start': 4966.653, 'duration': 1.902}, {'end': 4973.182, 'text': "Here I've opened up DevTools and inspected one of the timeline items.", 'start': 4969.215, 'duration': 3.967}, {'end': 4981.136, 'text': 'And you can see it is actually a div inside of a div, inside of another div, inside of yet another div, inside of a div, inside of a div.', 'start': 4973.723, 'duration': 7.413}], 'summary': "Importance of divs in web development illustrated using facebook's timeline structure.", 'duration': 32.396, 'max_score': 4948.74, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ4948740.jpg'}, {'end': 5016.239, 'src': 'embed', 'start': 4987.854, 'weight': 4, 'content': [{'end': 4996.062, 'text': "And the way we'll use this div now is by removing the margin top styling from the image, and then add it to the div itself.", 'start': 4987.854, 'duration': 8.208}, {'end': 5002.188, 'text': "And the reason this is important is, let's say that, for example, Google decides to create a video here instead,", 'start': 4996.462, 'duration': 5.726}, {'end': 5004.53, 'text': 'or a interactive doodle or some kind of game.', 'start': 5002.188, 'duration': 2.342}, {'end': 5006.552, 'text': 'they often play around with the Google logo.', 'start': 5004.53, 'duration': 2.022}, {'end': 5016.239, 'text': "Well, if so, it's a really bad idea that it is the image itself that controls the margin from the top of the browser and down to the content,", 'start': 5006.972, 'duration': 9.267}], 'summary': 'Adjusting margin styling to div for potential google logo changes.', 'duration': 28.385, 'max_score': 4987.854, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ4987854.jpg'}, {'end': 5214.636, 'src': 'heatmap', 'start': 5018.001, 'weight': 0.705, 'content': [{'end': 5020.603, 'text': 'So it is a solution that will get you into trouble in the future.', 'start': 5018.001, 'duration': 2.602}, {'end': 5025.326, 'text': "So what we'll do here is we'll simply instead, target the div.", 'start': 5021.283, 'duration': 4.043}, {'end': 5030.733, 'text': 'and then remove the margin top from the image and boom, it has popped up.', 'start': 5026.189, 'duration': 4.544}, {'end': 5032.635, 'text': 'Now we lost all of our whitespace.', 'start': 5030.974, 'duration': 1.661}, {'end': 5039.041, 'text': 'But if we add it back to our div, we are back at the design we started out with seemingly nothing has changed.', 'start': 5032.916, 'duration': 6.125}, {'end': 5043.105, 'text': 'But as you know, we have a better HTML structure.', 'start': 5039.182, 'duration': 3.923}, {'end': 5045.568, 'text': 'So we have definitely made good progress here.', 'start': 5043.426, 'duration': 2.142}, {'end': 5048.371, 'text': "So with that, let's move on to the next scrim.", 'start': 5045.868, 'duration': 2.503}, {'end': 5056.468, 'text': 'The reason you need to learn about classes now is because our current setup,', 'start': 5051.886, 'duration': 4.582}, {'end': 5065.03, 'text': 'where we simply have the elements like this and then selecting the elements using the element selector in CSS, will give us bugs down the line.', 'start': 5056.468, 'duration': 8.562}, {'end': 5072.333, 'text': "Because when we add the two buttons beneath the input field, we'll actually wrap these two in a div as well.", 'start': 5065.231, 'duration': 7.102}, {'end': 5074.734, 'text': "And let's see what happens at this point.", 'start': 5072.793, 'duration': 1.941}, {'end': 5081.036, 'text': "What I'll do now is simply add the HTML for these buttons down here beneath the input field.", 'start': 5075.474, 'duration': 5.562}, {'end': 5085.441, 'text': 'So it is a div with two buttons inside of it.', 'start': 5082.116, 'duration': 3.325}, {'end': 5089.647, 'text': 'And then you can see we are closing that div, the inner div.', 'start': 5086.182, 'duration': 3.465}, {'end': 5092.07, 'text': 'And then we are closing the outer div.', 'start': 5090.267, 'duration': 1.803}, {'end': 5093.352, 'text': "Let's run this code.", 'start': 5092.531, 'duration': 0.821}, {'end': 5094.313, 'text': 'Oh, wow.', 'start': 5094.013, 'duration': 0.3}, {'end': 5099.93, 'text': 'you can see is that the spacing between the input field and the buttons is totally off.', 'start': 5095.367, 'duration': 4.563}, {'end': 5109.015, 'text': 'And that is because our CSS element selector here selects any div it can find in the HTML document and applies the margin top to it.', 'start': 5100.13, 'duration': 8.885}, {'end': 5113.498, 'text': "So it doesn't just select the first one, but it can select 1000s of divs.", 'start': 5109.696, 'duration': 3.802}, {'end': 5118.261, 'text': 'So this is a very generic solution and likely not something we want to use,', 'start': 5114.098, 'duration': 4.163}, {'end': 5122.784, 'text': 'as we want to have multiple divs with different types of styling in our HTML element.', 'start': 5118.261, 'duration': 4.523}, {'end': 5127.25, 'text': "So let's now instead fix this by doing the following.", 'start': 5123.789, 'duration': 3.461}, {'end': 5134.832, 'text': "I'll write class equals, then for example, main, this here is an attribute called class.", 'start': 5127.51, 'duration': 7.322}, {'end': 5136.853, 'text': "So it's built into HTML.", 'start': 5135.192, 'duration': 1.661}, {'end': 5142.954, 'text': "And this here is the name I'm giving my class, I want to call this div, my main element.", 'start': 5137.113, 'duration': 5.841}, {'end': 5152.097, 'text': 'And now the way I select that in the CSS is by instead of just writing the element name, simply doing dot main like that.', 'start': 5143.695, 'duration': 8.402}, {'end': 5160.043, 'text': 'Now, if I rerun this code, you can see now the margin top is only applied to the outer div, our main class,', 'start': 5152.797, 'duration': 7.246}, {'end': 5162.946, 'text': 'and not to the div which wraps the two buttons.', 'start': 5160.043, 'duration': 2.903}, {'end': 5165.428, 'text': 'So that is exactly what we needed.', 'start': 5163.686, 'duration': 1.742}, {'end': 5170.873, 'text': "Now, I'm going to remove these two buttons here, because we don't want to deal with them just yet.", 'start': 5165.448, 'duration': 5.425}, {'end': 5173.175, 'text': "And then I'm going to give you a challenge.", 'start': 5171.393, 'duration': 1.782}, {'end': 5180.69, 'text': "first, you're going to add a class to each of these two elements, that is, the image and the input.", 'start': 5174.386, 'duration': 6.304}, {'end': 5185.032, 'text': 'you have to decide what you will call the two classes, but make sure to give them different names.', 'start': 5180.69, 'duration': 4.342}, {'end': 5192.715, 'text': "And then you're going to in the CSS, replace the element selectors with class selectors.", 'start': 5185.653, 'duration': 7.062}, {'end': 5196.798, 'text': 'So that is the IMG selector here and the input selector here.', 'start': 5193.175, 'duration': 3.623}, {'end': 5203.083, 'text': "And obviously, the CSS class selectors, you're going to replace them with as the ones you have added to the elements right here.", 'start': 5196.918, 'duration': 6.165}, {'end': 5205.425, 'text': 'So go ahead and do this right now.', 'start': 5203.703, 'duration': 1.722}, {'end': 5214.636, 'text': 'Okay, hopefully that went well.', 'start': 5212.955, 'duration': 1.681}], 'summary': 'Using class selectors in css to avoid generic element styling, resulting in better html structure and progress.', 'duration': 196.635, 'max_score': 5018.001, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ5018001.jpg'}, {'end': 5203.083, 'src': 'embed', 'start': 5174.386, 'weight': 3, 'content': [{'end': 5180.69, 'text': "first, you're going to add a class to each of these two elements, that is, the image and the input.", 'start': 5174.386, 'duration': 6.304}, {'end': 5185.032, 'text': 'you have to decide what you will call the two classes, but make sure to give them different names.', 'start': 5180.69, 'duration': 4.342}, {'end': 5192.715, 'text': "And then you're going to in the CSS, replace the element selectors with class selectors.", 'start': 5185.653, 'duration': 7.062}, {'end': 5196.798, 'text': 'So that is the IMG selector here and the input selector here.', 'start': 5193.175, 'duration': 3.623}, {'end': 5203.083, 'text': "And obviously, the CSS class selectors, you're going to replace them with as the ones you have added to the elements right here.", 'start': 5196.918, 'duration': 6.165}], 'summary': 'Add distinct classes to image and input elements, then replace element selectors with class selectors in css.', 'duration': 28.697, 'max_score': 5174.386, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ5174386.jpg'}, {'end': 5350.556, 'src': 'embed', 'start': 5326.062, 'weight': 0, 'content': [{'end': 5334.17, 'text': 'I mean, have you ever seen a more creepy creature than this three legged thing right here? Imagine having that thing running after you.', 'start': 5326.062, 'duration': 8.108}, {'end': 5336.807, 'text': 'that would not be fun.', 'start': 5335.686, 'duration': 1.121}, {'end': 5340.509, 'text': 'And this flag would be really hard to create in CSS actually.', 'start': 5337.187, 'duration': 3.322}, {'end': 5346.393, 'text': "So we're not going to create this one, we're going to start off at a much easier level with just some very simple shapes.", 'start': 5340.529, 'duration': 5.864}, {'end': 5350.556, 'text': "So let's have a look at those actually, here is what we're going to work with.", 'start': 5346.853, 'duration': 3.703}], 'summary': 'Discussion about creepy creature and starting with simple shapes in css.', 'duration': 24.494, 'max_score': 5326.062, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ5326062.jpg'}], 'start': 4754.157, 'title': 'Css display property and web development basics', 'summary': "Explains the css display property, highlighting that using 'display: block' causes elements to stack on top of each other and blocks out the available horizontal space, while 'display: inline' causes elements to stack horizontally. it also discusses the importance of adding white space, utilizing divs for element positioning, using classes instead of element selectors in css, and understanding margins through creating flags with css.", 'chapters': [{'end': 4836.93, 'start': 4754.157, 'title': 'Css display property', 'summary': "Explains the css display property, highlighting that using 'display: block' causes elements to stack on top of each other, and it blocks out the available horizontal space, while 'display: inline' causes elements to stack horizontally. it also emphasizes the need to convert elements into blocks, as demonstrated through the syntax 'display: block'.", 'duration': 82.773, 'highlights': ["The 'display: block' property causes elements to stack up on top of each other and blocks out the available horizontal space.", "The 'display: inline' property causes elements to stack up horizontally.", "The need to convert elements into blocks is emphasized, demonstrated through the syntax 'display: block'."]}, {'end': 5346.393, 'start': 4837.591, 'title': 'Web development basics', 'summary': 'Discusses the importance of adding white space, utilizing divs for element positioning, using classes instead of element selectors in css, and understanding margins through creating flags with css.', 'duration': 508.802, 'highlights': ['Understanding the importance of adding white space and utilizing margin to control spacing above elements is crucial for web development. The chapter discusses the importance of adding white space above the Google logo and instructs on using margin top to achieve this, emphasizing the significance of proper spacing in web design.', "Utilizing divs for element positioning and understanding their significance in web development is highlighted through practical examples and explanations. The chapter emphasizes the use of divs to indirectly control the positioning of elements and explains their significance in web development, using practical examples from Facebook's timeline structure.", 'Using classes instead of element selectors in CSS is essential to avoid potential bugs and maintain flexibility in styling elements. The chapter explains the necessity of using classes in CSS to avoid potential bugs and maintain flexibility in styling elements, demonstrated through replacing element selectors with class selectors for improved control and scalability.', 'Understanding margins through creating flags with CSS is introduced as a practical way to learn about margins in web development. The chapter introduces the concept of understanding margins through creating flags with CSS, providing practical examples and emphasizing the importance of grasping margin usage for effective web development.']}], 'duration': 592.236, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ4754157.jpg', 'highlights': ["The 'display: block' property causes elements to stack up on top of each other and blocks out the available horizontal space.", "The 'display: inline' property causes elements to stack up horizontally.", "The need to convert elements into blocks is emphasized, demonstrated through the syntax 'display: block'.", 'Understanding the importance of adding white space and utilizing margin to control spacing above elements is crucial for web development.', 'Utilizing divs for element positioning and understanding their significance in web development is highlighted through practical examples and explanations.', 'Using classes instead of element selectors in CSS is essential to avoid potential bugs and maintain flexibility in styling elements.', 'Understanding margins through creating flags with CSS is introduced as a practical way to learn about margins in web development.']}, {'end': 7631.572, 'segs': [{'end': 5751.513, 'src': 'embed', 'start': 5722.09, 'weight': 0, 'content': [{'end': 5730.154, 'text': 'So scary that this stack overflow question about how to horizontally center an element has been viewed 4.5 million times.', 'start': 5722.09, 'duration': 8.064}, {'end': 5735.137, 'text': 'So if you think this is a little bit confusing, you are in very good company.', 'start': 5730.935, 'duration': 4.202}, {'end': 5736.778, 'text': "So don't worry about it.", 'start': 5735.517, 'duration': 1.261}, {'end': 5740.941, 'text': "So with that in mind, let's move over to our example.", 'start': 5737.919, 'duration': 3.022}, {'end': 5743.988, 'text': 'You are going to center this dinosaur poo.', 'start': 5741.821, 'duration': 2.167}, {'end': 5751.513, 'text': 'as you can see in the CSS, it has just one property set at this point, which is a width of 200 pixels.', 'start': 5745.228, 'duration': 6.285}], 'summary': 'Stack overflow question on horizontal centering viewed 4.5 million times, demonstrating widespread confusion.', 'duration': 29.423, 'max_score': 5722.09, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ5722090.jpg'}, {'end': 5808.247, 'src': 'embed', 'start': 5784.938, 'weight': 4, 'content': [{'end': 5792.704, 'text': "If it's display inline and allows other elements to stack themselves besides the element, well then it won't be able to center itself,", 'start': 5784.938, 'duration': 7.766}, {'end': 5795.226, 'text': 'because that space now is busy with other things.', 'start': 5792.704, 'duration': 2.522}, {'end': 5801.071, 'text': 'So in order to center this pool, it needs to control all the horizontal space.', 'start': 5796.007, 'duration': 5.064}, {'end': 5806.204, 'text': 'so it needs this a block like that.', 'start': 5802.478, 'duration': 3.726}, {'end': 5808.247, 'text': "Now that didn't change anything.", 'start': 5806.765, 'duration': 1.482}], 'summary': 'To center a display inline element, it needs to control all the horizontal space.', 'duration': 23.309, 'max_score': 5784.938, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ5784938.jpg'}, {'end': 6080.943, 'src': 'embed', 'start': 6057.569, 'weight': 1, 'content': [{'end': 6064.352, 'text': "And as a rule of thumb, you never want to have pure black on pure white, because that's not a pleasant experience for the eyes.", 'start': 6057.569, 'duration': 6.783}, {'end': 6066.373, 'text': 'So instead, we went for this.', 'start': 6064.813, 'duration': 1.56}, {'end': 6067.754, 'text': 'But that was a digression.', 'start': 6066.653, 'duration': 1.101}, {'end': 6070.896, 'text': "Let's move on with turning this into a nice looking card.", 'start': 6067.834, 'duration': 3.062}, {'end': 6073.237, 'text': 'So a card needs a background color.', 'start': 6071.696, 'duration': 1.541}, {'end': 6078.081, 'text': "So let's just do background light gray, for example, like that.", 'start': 6073.437, 'duration': 4.644}, {'end': 6080.943, 'text': "And we also don't want our card to be full width.", 'start': 6078.541, 'duration': 2.402}], 'summary': 'Avoid pure black on pure white for a pleasant visual experience. use light gray background for the card and avoid full width.', 'duration': 23.374, 'max_score': 6057.569, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ6057569.jpg'}, {'end': 6495.468, 'src': 'embed', 'start': 6463.982, 'weight': 3, 'content': [{'end': 6468.624, 'text': "So let's start with a border eight pixels here looks a bit too thick for me.", 'start': 6463.982, 'duration': 4.642}, {'end': 6472.025, 'text': "So let's try for instead, like that.", 'start': 6468.744, 'duration': 3.281}, {'end': 6474.386, 'text': 'I think that matches better.', 'start': 6472.045, 'duration': 2.341}, {'end': 6482.959, 'text': 'Yes And the color, I gave you a hint was just the blackish color we have for our text like that.', 'start': 6474.566, 'duration': 8.393}, {'end': 6485.961, 'text': 'And the border radius is much smaller.', 'start': 6483.739, 'duration': 2.222}, {'end': 6487.222, 'text': "Let's try 10.", 'start': 6486.101, 'duration': 1.121}, {'end': 6490.504, 'text': "It's this still looks a little bit rounder.", 'start': 6487.222, 'duration': 3.282}, {'end': 6493.126, 'text': "So let's try 20.", 'start': 6491.205, 'duration': 1.921}, {'end': 6495.468, 'text': 'Yes, there, I think we got it.', 'start': 6493.126, 'duration': 2.342}], 'summary': 'Adjusted border to 20px for better fit and look.', 'duration': 31.486, 'max_score': 6463.982, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ6463982.jpg'}, {'end': 6567.133, 'src': 'embed', 'start': 6542.699, 'weight': 5, 'content': [{'end': 6550.345, 'text': 'So if I hover over the margin here, you can see up here in the mini browser, it is marked in orange, and the values are provided down in the box here.', 'start': 6542.699, 'duration': 7.646}, {'end': 6554.667, 'text': 'If I move over to the border, you can see that border is now selected in the browser.', 'start': 6550.505, 'duration': 4.162}, {'end': 6557.768, 'text': "And it's indeed four pixels as we coded up a minute ago.", 'start': 6555.187, 'duration': 2.581}, {'end': 6563.131, 'text': 'If I move over to the padding, you can see that is also indeed 20 on each side, just as we want it to be.', 'start': 6558.189, 'duration': 4.942}, {'end': 6567.133, 'text': 'And finally, if I hover over the center here, the content is highlighted.', 'start': 6563.151, 'duration': 3.982}], 'summary': 'Demonstrating margin, border, padding, and content highlighting with specific measurements.', 'duration': 24.434, 'max_score': 6542.699, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ6542699.jpg'}, {'end': 7550.141, 'src': 'embed', 'start': 7517.336, 'weight': 2, 'content': [{'end': 7519.237, 'text': 'Whereas this one has got has a border.', 'start': 7517.336, 'duration': 1.901}, {'end': 7523.662, 'text': "So let's just remove it border, none like that.", 'start': 7519.938, 'duration': 3.724}, {'end': 7524.523, 'text': 'Okay, good.', 'start': 7523.802, 'duration': 0.721}, {'end': 7530.369, 'text': 'Now, we can see that the text is much more crammed into this box than it is this one right here.', 'start': 7525.204, 'duration': 5.165}, {'end': 7531.63, 'text': 'So that is the padding.', 'start': 7530.549, 'duration': 1.081}, {'end': 7537.056, 'text': "And also, you can notice that there's more padding on the left and right hand side than on the top and bottom.", 'start': 7531.931, 'duration': 5.125}, {'end': 7542.522, 'text': "So I'm going to try to add, for example, padding top five pixels.", 'start': 7537.697, 'duration': 4.825}, {'end': 7550.141, 'text': 'Yeah, it actually looks like this one here has more than five pixels, because this space is still pretty crammed.', 'start': 7543.755, 'duration': 6.386}], 'summary': 'Adjusting padding to improve text box layout and spacing.', 'duration': 32.805, 'max_score': 7517.336, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ7517336.jpg'}], 'start': 5346.853, 'title': 'Css styling fundamentals', 'summary': 'Covers css fundamentals including the box model, margin manipulation, centering elements with css, and button styling, emphasizing practical applications and challenges. it also demonstrates a design spec walkthrough and google search button styling, highlighting the use of specific css properties and techniques for achieving desired visual outcomes.', 'chapters': [{'end': 5743.988, 'start': 5346.853, 'title': 'Css box model and margin manipulation', 'summary': 'Explains the css box model and margin manipulation, including the automatic addition of margin by the browser, the impact of margin manipulation on the positioning and appearance of elements, and a challenge to create flags using margin manipulation. it also covers the concept of collapsing margins and a challenge to add space between elements in a project.', 'duration': 397.135, 'highlights': ['The automatic addition of margin by the browser The browser automatically adds a margin of eight pixels to the body tag, creating a white space around the elements.', 'Creating the flag of Monaco using margin manipulation Adding 100 pixels of margin to the bottom of the red box creates the flag of Monaco.', 'Adding margin to create the flag of the Gambia By applying margin to the blue box, a challenge is given to create the flag of the Gambia using margin manipulation.', 'Understanding collapsing margins The concept of collapsing margins is explained, where margin top and margin bottom can collapse into each other, affecting the positioning of elements.', 'Challenge to add space between elements using margins A challenge is given to add space between the logo and the search field using margin manipulation in a project.']}, {'end': 6020.03, 'start': 5745.228, 'title': 'Centering elements with css', 'summary': 'Explains the technique of centering elements using margins in css, emphasizing the three conditions required: display block, width, and margin left and margin right set to auto. a practical example is provided, resulting in the logo and search field being centered.', 'duration': 274.802, 'highlights': ['The three conditions required to center an element using margins in CSS are display block, width, and margin left and margin right set to auto. The chapter emphasizes the importance of three conditions required to center an element using margins in CSS: the element must be displayed block, have a width, and have margin left and margin right set to auto.', 'Practical example of centering the logo and search field using margin left auto and margin right auto. A practical example is provided, demonstrating the use of margin left auto and margin right auto to center the logo and search field, resulting in an element being centered in the browser.', 'Introduction to the CSS concept of padding through a practical example. The chapter introduces the CSS concept of padding through a practical example, providing a simple div as an illustration.']}, {'end': 6596.527, 'start': 6020.751, 'title': 'Css styling basics', 'summary': 'Covers the basics of css styling, including setting color, background, width, padding, margin, and border properties, also emphasizing the importance of maintaining proper spacing for a better visual experience, and highlighting the use of dev tools for inspecting and debugging css properties.', 'duration': 575.776, 'highlights': ['The chapter emphasizes the importance of maintaining proper spacing, advising against using pure black on pure white for a better visual experience.', 'The chapter covers the basics of setting color, background, width, padding, margin, and border properties in CSS.', 'The speaker demonstrates the use of dev tools for inspecting and debugging CSS properties, showcasing the ability to verify and modify styling in the browser.']}, {'end': 6943.843, 'start': 6597.307, 'title': 'Box model and button styling', 'summary': 'Introduces the box model in web development, explaining its components and the practical application of css properties to style a button, providing specific values for padding, border radius, and font weight adjustments, resulting in a neat-looking button similar to the one on twitter.', 'duration': 346.536, 'highlights': ['The box model in web development involves spacing around the element, border spacing on the inside of an element, and the content itself, commonly referred to as the box model.', 'The practical application of CSS properties involves styling a button to resemble the one on Twitter, with specific instructions for adjusting padding, border radius, border color, and text color.', 'Specific values for padding adjustments include 10 pixels for both top and bottom, and 20 pixels for both left and right, to achieve the desired button appearance.', 'The process also involves adjusting the border radius to 20 pixels to achieve the desired rounded edges, along with setting the font weight to bold for a better visual effect.']}, {'end': 7219.416, 'start': 6944.244, 'title': 'Css design spec walkthrough', 'summary': 'Demonstrates a walkthrough of a design spec for an input field, specifying dimensions, padding, border, and border radius, and the recommended method for setting input field height using css, with a suggestion from stack overflow.', 'duration': 275.172, 'highlights': ['The design spec specifies the dimensions, padding, border, and border radius for the input field, with the width at 400 pixels, content height at 24 pixels, padding of 10 pixels at the top and bottom, 30 pixels on the left and right, a one-pixel border, and a border radius of 24 pixels.', 'The chapter recommends using line height instead of setting the height property for input fields, based on a suggestion from Stack Overflow, due to variations in browser support for the CSS height rule.']}, {'end': 7631.572, 'start': 7220.057, 'title': 'Styling google search button', 'summary': 'Discusses adding and styling a button for a google project, including centering the button, adjusting contrast for accessibility, and matching the button design with specified css properties.', 'duration': 411.515, 'highlights': ['The chapter discusses adding and styling a button for a Google project, including centering the button, adjusting contrast for accessibility, and matching the button design with specified CSS properties. It covers adding the first button to the Google project, centering the button with CSS, adjusting the contrast for accessibility, and matching the button design with specified CSS properties.', "The contrast ratio between the button and the website background is checked for accessibility, with Google's button failing the test with a ratio of 1.05, below the required 4.5 or more. It highlights the contrast ratio failure of Google's button, which scored 1.05 instead of the required 4.5 or more for accessibility.", 'The button is styled to match the design, including setting the background color, removing the border, adjusting padding, setting border radius, and font size, with an emphasis on practicing making design-based CSS decisions. It details the steps to style the button, including setting the background color, removing the border, adjusting padding, setting border radius, and font size, while emphasizing the practice of making design-based CSS decisions.']}], 'duration': 2284.719, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ5346853.jpg', 'highlights': ['The chapter emphasizes the importance of maintaining proper spacing, advising against using pure black on pure white for a better visual experience.', 'The box model in web development involves spacing around the element, border spacing on the inside of an element, and the content itself, commonly referred to as the box model.', 'The automatic addition of margin by the browser The browser automatically adds a margin of eight pixels to the body tag, creating a white space around the elements.', 'The three conditions required to center an element using margins in CSS are display block, width, and margin left and margin right set to auto. The chapter emphasizes the importance of three conditions required to center an element using margins in CSS: the element must be displayed block, have a width, and have margin left and margin right set to auto.', 'The design spec specifies the dimensions, padding, border, and border radius for the input field, with the width at 400 pixels, content height at 24 pixels, padding of 10 pixels at the top and bottom, 30 pixels on the left and right, a one-pixel border, and a border radius of 24 pixels.', 'The chapter discusses adding and styling a button for a Google project, including centering the button, adjusting contrast for accessibility, and matching the button design with specified CSS properties. It covers adding the first button to the Google project, centering the button with CSS, adjusting the contrast for accessibility, and matching the button design with specified CSS properties.']}, {'end': 8840.166, 'segs': [{'end': 7861.441, 'src': 'embed', 'start': 7829.556, 'weight': 0, 'content': [{'end': 7835.641, 'text': 'we used something called text align in order to align our text either to the left, right or center.', 'start': 7829.556, 'duration': 6.085}, {'end': 7842.393, 'text': 'Now, the text align property actually works on all inline elements, not just on text.', 'start': 7836.021, 'duration': 6.372}, {'end': 7847.485, 'text': 'So what we can do is remove the display block from our buttons.', 'start': 7842.894, 'duration': 4.591}, {'end': 7852.974, 'text': 'as you know, that turns them into inline elements, and they are crammed to the left.', 'start': 7848.45, 'duration': 4.524}, {'end': 7861.441, 'text': 'And as inline elements only take up the available space they need, according to their content, there is no available margin to use.', 'start': 7853.755, 'duration': 7.686}], 'summary': 'Text align property used to align text, including inline elements like buttons.', 'duration': 31.885, 'max_score': 7829.556, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ7829556.jpg'}, {'end': 8110.522, 'src': 'heatmap', 'start': 7908.454, 'weight': 0.954, 'content': [{'end': 7915.257, 'text': 'Here, the menu on the left-hand side is created with Flexbox, as with the tweet options menu and the timeline itself.', 'start': 7908.454, 'duration': 6.803}, {'end': 7920.16, 'text': "And guess what the trends for you and who to follow it's created with? You guessed it, Flexbox.", 'start': 7915.918, 'duration': 4.242}, {'end': 7922.702, 'text': 'So this is something you need to learn.', 'start': 7920.52, 'duration': 2.182}, {'end': 7930.242, 'text': "Let's imagine, then, that you have a ecommerce website which you can see here that sells shoes, hoodies and t shirts.", 'start': 7923.82, 'duration': 6.422}, {'end': 7937.345, 'text': "well then you'd probably have a navigation menu like this one, where users can click and then probably open up a sub menu or something like that.", 'start': 7930.242, 'duration': 7.103}, {'end': 7940.506, 'text': 'As you can see, the items stack on top of each other.', 'start': 7938.085, 'duration': 2.421}, {'end': 7944.787, 'text': 'that is to be expected, as these are devs and devs are display block.', 'start': 7940.506, 'duration': 4.281}, {'end': 7947.448, 'text': 'they want to take up all the available space in the width.', 'start': 7944.787, 'duration': 2.661}, {'end': 7951.27, 'text': "And if you're wondering how I styled these, we can head over to the styles.css.", 'start': 7947.908, 'duration': 3.362}, {'end': 7953.61, 'text': 'and just have a quick look at that.', 'start': 7952.37, 'duration': 1.24}, {'end': 7957.671, 'text': "you can see I've aligned the text to the center inside of all the items.", 'start': 7953.61, 'duration': 4.061}, {'end': 7959.732, 'text': 'had not done that, would have been aligned to the left.', 'start': 7957.671, 'duration': 2.061}, {'end': 7966.534, 'text': "Also, there's a border, as you can see, there's some padding on the inside, and there's some margin in between the elements.", 'start': 7960.652, 'duration': 5.882}, {'end': 7975.536, 'text': 'Now the question is what if I, instead of this vertical layout, wanted a horizontal layout, which is more common for so called navigation bars?', 'start': 7967.694, 'duration': 7.842}, {'end': 7981.58, 'text': 'So something that looks like this well, this is where flexbox comes to the rescue.', 'start': 7977.017, 'duration': 4.563}, {'end': 7988.123, 'text': 'And in order to turn this into a flexbox layout, I would first have to wrap these three items in a container,', 'start': 7981.96, 'duration': 6.163}, {'end': 7992.886, 'text': 'because a flexbox layout always consists of a container and its direct children.', 'start': 7988.123, 'duration': 4.763}, {'end': 7996.508, 'text': "So let's wrap it in a div.", 'start': 7993.707, 'duration': 2.801}, {'end': 8002.312, 'text': 'And give this a class of, for example, nav dash wrapper like that.', 'start': 7996.528, 'duration': 5.784}, {'end': 8008.942, 'text': 'if I run this now, nothing happens because divs as you know, are invisible unless you give them any styling or content.', 'start': 8003.12, 'duration': 5.822}, {'end': 8012.084, 'text': "So let's head over to the styles.css.", 'start': 8009.703, 'duration': 2.381}, {'end': 8015.185, 'text': 'And now target the nav wrapper like that.', 'start': 8012.664, 'duration': 2.521}, {'end': 8025.829, 'text': 'In order to turn this into a flexbox container, all I have to do is write display flex and boom, suddenly we have forced our three divs into one row.', 'start': 8015.745, 'duration': 10.084}, {'end': 8030.17, 'text': 'Now this layout flows from left to right along the horizontal axis.', 'start': 8026.129, 'duration': 4.041}, {'end': 8034.752, 'text': 'And that is pretty significant given that these items were displayed block by default.', 'start': 8030.431, 'duration': 4.321}, {'end': 8039.934, 'text': 'But flexbox as powerful as it is overrides that and forces them on to one line.', 'start': 8035.212, 'duration': 4.722}, {'end': 8043.155, 'text': "However, we haven't got quite the layout we want yet.", 'start': 8040.714, 'duration': 2.441}, {'end': 8046.917, 'text': "As you can see, it's centered and there's also some space in between the items.", 'start': 8043.615, 'duration': 3.302}, {'end': 8056.29, 'text': "Now let's start with the centering, because flexbox now has control over these items and can decide where, along the main axis,", 'start': 8047.901, 'duration': 8.389}, {'end': 8057.291, 'text': 'they should be positioned.', 'start': 8056.29, 'duration': 1.001}, {'end': 8063.158, 'text': "So we can do justify content that is a little bit of a weird name for a property, but that's just how it is.", 'start': 8057.552, 'duration': 5.606}, {'end': 8066.381, 'text': 'And then set that to center like that.', 'start': 8063.598, 'duration': 2.783}, {'end': 8068.925, 'text': 'now all of the items are centered.', 'start': 8067.265, 'duration': 1.66}, {'end': 8072.326, 'text': 'And the final step is just to get some spacing in between these items.', 'start': 8069.265, 'duration': 3.061}, {'end': 8077.927, 'text': "And that is done with our good old friend margin through the margin left, let's do 10 pixels.", 'start': 8072.526, 'duration': 5.401}, {'end': 8083.628, 'text': "And let's add the same thing on the margin, right, like that.", 'start': 8078.507, 'duration': 5.121}, {'end': 8086.369, 'text': 'And there we have the layout we wanted.', 'start': 8084.389, 'duration': 1.98}, {'end': 8091.83, 'text': 'Now, a final cool thing I want to show you is that we can do, for example, and here as well,', 'start': 8087.069, 'duration': 4.761}, {'end': 8100.018, 'text': "that'll push it all the way to the right hand side or start at the beginning or alternatively the space dash around.", 'start': 8091.83, 'duration': 8.188}, {'end': 8100.758, 'text': "that's pretty cool.", 'start': 8100.018, 'duration': 0.74}, {'end': 8105.34, 'text': "Now we've distributed all the white space around each of the items.", 'start': 8101.558, 'duration': 3.782}, {'end': 8110.522, 'text': 'And another one is space between now all of the available space is between the items.', 'start': 8105.62, 'duration': 4.902}], 'summary': 'Flexbox is used to create a layout for a navigation menu, aligning items, and distributing space, achieving a desired horizontal layout.', 'duration': 202.068, 'max_score': 7908.454, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ7908454.jpg'}, {'end': 8758.895, 'src': 'embed', 'start': 8729.864, 'weight': 1, 'content': [{'end': 8736.386, 'text': 'And finally, writing alt texts will help your site rank higher on Google, meaning you get more search traffic.', 'start': 8729.864, 'duration': 6.522}, {'end': 8744.668, 'text': 'And that is because the alt tag most likely provide important metadata about the image so that Google knows how to use it in a search results page.', 'start': 8736.606, 'duration': 8.062}, {'end': 8749.189, 'text': 'And if your site is not accessible, it might be punished in the form of ranking lower.', 'start': 8745.048, 'duration': 4.141}, {'end': 8752.89, 'text': "So with that in mind, let's look at how to write these alt texts.", 'start': 8749.609, 'duration': 3.281}, {'end': 8758.895, 'text': "And the first thing you need to know is that you should not include, for example, image of because that's simply not necessary.", 'start': 8753.49, 'duration': 5.405}], 'summary': 'Writing alt texts improves google ranking and search traffic by providing important metadata about images.', 'duration': 29.031, 'max_score': 8729.864, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ8729864.jpg'}, {'end': 8815.075, 'src': 'embed', 'start': 8783.812, 'weight': 3, 'content': [{'end': 8787.195, 'text': 'Here we have an iconic image of Muhammad Ali in a boxing match.', 'start': 8783.812, 'duration': 3.383}, {'end': 8795.163, 'text': 'And one way to write an old text for this could be just a boxing match, but it would actually be a pretty poor way of describing it,', 'start': 8787.716, 'duration': 7.447}, {'end': 8797.065, 'text': "because there's so much more going on here.", 'start': 8795.163, 'duration': 1.902}, {'end': 8799.788, 'text': 'you have plenty more characters you can use in order to describe it.', 'start': 8797.065, 'duration': 2.723}, {'end': 8804.732, 'text': 'So a better one would be two boxers in the ring, one lying down and the other standing up.', 'start': 8800.288, 'duration': 4.444}, {'end': 8807.774, 'text': "That's a good factual explanation.", 'start': 8805.433, 'duration': 2.341}, {'end': 8815.075, 'text': "But we're not quite there yet, because it isn't actually describing this iconic moment when Muhammad Ali knocked out Sonny Liston.", 'start': 8807.894, 'duration': 7.181}], 'summary': 'Iconic image of muhammad ali knocking out sonny liston in a boxing match.', 'duration': 31.263, 'max_score': 8783.812, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ8783812.jpg'}], 'start': 7635.234, 'title': 'Front-end development essentials', 'summary': "Covers adding a second button to the google project, encountering layout issues, using 'text-align' and 'flexbox' for layout alignment, introduction to css basics including syntax, margins, padding, and borders, and troubleshooting image rendering issues. it emphasizes the benefits of flexbox over traditional alignment techniques and encourages the use of flexbox as a tool for front-end developers.", 'chapters': [{'end': 7829.556, 'start': 7635.234, 'title': 'Adding second button and layout fix', 'summary': 'Covers adding a second button to the google project, encountering layout issues with stacked buttons, identifying the cause using dev tools, and the need to use flexbox for proper alignment.', 'duration': 194.322, 'highlights': ['Using dev tools to identify layout issues: The transcript emphasizes the use of built-in dev tools in the browser to identify layout issues, such as buttons stacking on top of each other, by inspecting the box model and understanding the display block property.', 'Need to use flexbox for proper alignment: It explains the necessity to use flexbox for proper alignment of elements, as opposed to the simpler yet inflexible method of using text align, preparing the audience for the upcoming discussion on flexbox.', 'Challenging the audience to add the second button: The speaker encourages the audience to add the next button as a challenge, promoting independent coding practice and skill development.', 'Exploring reasons for incorrect button behavior: The chapter prompts the audience to question the reasons behind incorrect button behavior, fostering critical thinking and problem-solving skills.']}, {'end': 8271.781, 'start': 7829.556, 'title': 'Flexbox for layout alignment', 'summary': "Discusses using 'text-align' and 'flexbox' to align elements, with a focus on centering buttons and creating a horizontal layout using flexbox, and it emphasizes the benefits of flexbox over traditional alignment techniques.", 'duration': 442.225, 'highlights': ["The chapter demonstrates using 'text-align' to center inline elements, removing 'display: block' from buttons, and aligning them using 'text-align: center', resulting in a centered layout for the buttons.", "It explains the advantages of using flexbox for creating a horizontal layout, showcasing how wrapping elements in a flex container and using 'display: flex', 'justify-content' and 'margin' properties allows for easy centering and spacing of items.", "The chapter provides a step-by-step guide for using flexbox to center buttons in a div, emphasizing the process of wrapping buttons in a flexbox container, applying 'display: flex', and using 'justify-content' to achieve the desired layout."]}, {'end': 8530.646, 'start': 8273.376, 'title': 'Introduction to css basics', 'summary': 'Covers the basics of css including syntax, inline vs block elements, margins, padding, borders, div tags, classes, centering, and flexbox, emphasizing the importance of flexbox as a tool for front-end developers and encouraging the learner to take a break before proceeding to the next section.', 'duration': 257.27, 'highlights': ['The chapter emphasizes the importance of flexbox as a tool for front-end developers and encourages the learner to feel proud of dipping toes into flexbox. The instructor emphasizes that flexbox is a super important tool for any front-end developer and encourages learners to feel proud of at least dipping their toes into flexbox.', 'The chapter summarizes the key concepts learned, including syntax, inline vs block elements, margins, padding, borders, div tags, classes, centering, and flexbox. The chapter summarizes the key concepts learned, including syntax, inline vs block elements, margins, padding, borders, div tags, classes, centering, and flexbox.', 'The chapter introduces the next section, where learners will build a business card, personalize it, and level up their design and CSS skills. The chapter introduces the next section, where learners will build a business card, personalize it, and level up their design and CSS skills.']}, {'end': 8840.166, 'start': 8531.346, 'title': 'Troubleshooting image rendering', 'summary': 'Discusses troubleshooting image rendering issues, including fixing file paths for images, adding alt text for accessibility, and optimizing alt text for search traffic and screen readers.', 'duration': 308.82, 'highlights': ["Images located in a different folder than the HTML file require the correct file path to render properly. The image was not rendering properly due to being located in a folder separate from the HTML file, and the correct file path 'images/' was needed to resolve the issue.", "Importing and displaying an image with proper file path and alt text for accessibility. The correct file path 'images/' was used, and the alt text 'smiling' was added to the image, resulting in successful import and display of the image.", "Importance of adding alt text for accessibility and as a fallback for image rendering issues. The alt text serves as a crucial accessibility feature for visually impaired users and also acts as a fallback in case the image doesn't render properly."]}], 'duration': 1204.932, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ7635234.jpg', 'highlights': ['Using dev tools to identify layout issues: The transcript emphasizes the use of built-in dev tools in the browser to identify layout issues, such as buttons stacking on top of each other, by inspecting the box model and understanding the display block property.', "The chapter demonstrates using 'text-align' to center inline elements, removing 'display: block' from buttons, and aligning them using 'text-align: center', resulting in a centered layout for the buttons.", 'The chapter emphasizes the importance of flexbox as a tool for front-end developers and encourages the learner to feel proud of dipping toes into flexbox. The instructor emphasizes that flexbox is a super important tool for any front-end developer and encourages learners to feel proud of at least dipping their toes into flexbox.', "Images located in a different folder than the HTML file require the correct file path to render properly. The image was not rendering properly due to being located in a folder separate from the HTML file, and the correct file path 'images/' was needed to resolve the issue."]}, {'end': 10034.231, 'segs': [{'end': 8889.814, 'src': 'embed', 'start': 8840.927, 'weight': 0, 'content': [{'end': 8848.833, 'text': 'So with that example in mind, I want you to write what you think is an appropriate alt text for this image.', 'start': 8840.927, 'duration': 7.906}, {'end': 8850.594, 'text': 'Go ahead and do that right now.', 'start': 8849.333, 'duration': 1.261}, {'end': 8854.017, 'text': 'And then I will show you what I would write when you return back to me.', 'start': 8850.734, 'duration': 3.283}, {'end': 8860.242, 'text': "Okay, let's do this.", 'start': 8859.301, 'duration': 0.941}, {'end': 8863.194, 'text': "we'll do alt equals quotes.", 'start': 8861.172, 'duration': 2.022}, {'end': 8866.858, 'text': 'And here, I would use my name, pear, Harold Borgen.', 'start': 8863.435, 'duration': 3.423}, {'end': 8871.664, 'text': "And you can see I'm smiling, and I'm looking at the camera, I think that's important.", 'start': 8867.839, 'duration': 3.825}, {'end': 8874.907, 'text': "So I'd write smiling at the camera.", 'start': 8871.884, 'duration': 3.023}, {'end': 8878.972, 'text': 'Finally, the background is really playful and colorful.', 'start': 8875.848, 'duration': 3.124}, {'end': 8885.891, 'text': 'So I want to include, for example, with a color full background like that.', 'start': 8880.307, 'duration': 5.584}, {'end': 8889.814, 'text': "So if yours was a bit simpler, or shorter, don't worry about it.", 'start': 8886.411, 'duration': 3.403}], 'summary': 'Discussion on writing appropriate alt text for an image, using example of smiling person with colorful background.', 'duration': 48.887, 'max_score': 8840.927, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ8840927.jpg'}, {'end': 8942.445, 'src': 'embed', 'start': 8915.338, 'weight': 4, 'content': [{'end': 8922.823, 'text': 'So I want you to head over to the styles dot CSS and solve this challenge, you are to set the width of the image to 150 pixels.', 'start': 8915.338, 'duration': 7.485}, {'end': 8926.926, 'text': 'And you need to use a class to select the image element.', 'start': 8923.564, 'duration': 3.362}, {'end': 8929.248, 'text': 'So go ahead and give this a shot right now.', 'start': 8927.527, 'duration': 1.721}, {'end': 8936.141, 'text': 'Okay, hopefully, that went well.', 'start': 8934.44, 'duration': 1.701}, {'end': 8937.582, 'text': "Let's now do it together.", 'start': 8936.661, 'duration': 0.921}, {'end': 8942.445, 'text': 'So first, we need to actually create the class that we are going to select from the CSS.', 'start': 8938.022, 'duration': 4.423}], 'summary': 'Set image width to 150 pixels using class in styles.css.', 'duration': 27.107, 'max_score': 8915.338, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ8915338.jpg'}, {'end': 9632.024, 'src': 'embed', 'start': 9602.761, 'weight': 3, 'content': [{'end': 9606.603, 'text': "If we run this code, nothing has happened because the class hasn't been created yet.", 'start': 9602.761, 'duration': 3.842}, {'end': 9613.487, 'text': 'But here we can create the italic class, do font style, italic like that.', 'start': 9607.083, 'duration': 6.404}, {'end': 9616.91, 'text': 'And now you can see the name is in italic.', 'start': 9614.128, 'duration': 2.782}, {'end': 9623.436, 'text': 'Now if we want to reuse this, we can just do class italic here as well.', 'start': 9618.011, 'duration': 5.425}, {'end': 9626.559, 'text': 'And the code and location is also italic.', 'start': 9624.077, 'duration': 2.482}, {'end': 9632.024, 'text': 'And if we want the entire card italic, we can even add the class here up on the container element itself.', 'start': 9627, 'duration': 5.024}], 'summary': "Creating and applying an 'italic' class for text formatting.", 'duration': 29.263, 'max_score': 9602.761, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ9602761.jpg'}, {'end': 9849.893, 'src': 'heatmap', 'start': 9652.577, 'weight': 0.766, 'content': [{'end': 9653.517, 'text': 'and delete this one as well.', 'start': 9652.577, 'duration': 0.94}, {'end': 9659.419, 'text': 'Now what I want you to do is create a utility class for the dotted blue border.', 'start': 9653.937, 'duration': 5.482}, {'end': 9661.32, 'text': 'This is the styling we have here.', 'start': 9660.039, 'duration': 1.281}, {'end': 9669.302, 'text': 'And then give the class to both flexbox children in the HTML, that is the flexbox items you can see here and here.', 'start': 9661.9, 'duration': 7.402}, {'end': 9674.964, 'text': 'And also, I think you should give the same class to the card as well so that you can remove this line 10 here.', 'start': 9669.922, 'duration': 5.042}, {'end': 9676.824, 'text': 'So go ahead and give this one a shot.', 'start': 9675.604, 'duration': 1.22}, {'end': 9679.185, 'text': 'And then I will show you how to do it afterwards as well.', 'start': 9676.924, 'duration': 2.261}, {'end': 9687.763, 'text': "Okay, hopefully, that went well, let's start off by creating the class.", 'start': 9684.46, 'duration': 3.303}, {'end': 9690.865, 'text': 'All right, border, blue hair.', 'start': 9688.704, 'duration': 2.161}, {'end': 9696.17, 'text': "And then inside of it, I'll just cut this away and paste it in here.", 'start': 9690.885, 'duration': 5.285}, {'end': 9699.332, 'text': 'Instead Now we have a utility class for blue borders.', 'start': 9696.19, 'duration': 3.142}, {'end': 9700.673, 'text': "I'll copy it.", 'start': 9700.053, 'duration': 0.62}, {'end': 9703.911, 'text': 'and added to this flex item.', 'start': 9701.65, 'duration': 2.261}, {'end': 9712.514, 'text': 'And as a second us to the image element, we run this code, you can see now both of these have the blue border around them.', 'start': 9704.271, 'duration': 8.243}, {'end': 9718.236, 'text': "Let's also add the border blue class to the flex box container, run the code and boom, there we go.", 'start': 9713.134, 'duration': 5.102}, {'end': 9722.237, 'text': 'Now we have an even better overview over how our elements are laid out.', 'start': 9718.676, 'duration': 3.561}, {'end': 9733.302, 'text': "Okay, with these blue borders around the flexbox children, it's pretty easy to see that our layout is pretty far from how we want it to be.", 'start': 9725.839, 'duration': 7.463}, {'end': 9738.905, 'text': "Because here you can see in the card that there's some space in between the two elements.", 'start': 9733.322, 'duration': 5.583}, {'end': 9745.168, 'text': "Whereas in our example, they're completely crammed together and also pushed all the way to the left hand side.", 'start': 9739.385, 'duration': 5.783}, {'end': 9753.671, 'text': "Whereas here they're kind of spaced out. there's some space on the left hand side in between the element and also some space on the right hand side.", 'start': 9745.768, 'duration': 7.903}, {'end': 9756.172, 'text': "So they're kind of spaced out in a nice way.", 'start': 9754.051, 'duration': 2.121}, {'end': 9760.513, 'text': 'And now I want you to add that horizontal space around the flex children.', 'start': 9756.652, 'duration': 3.861}, {'end': 9762.854, 'text': "There's a flex box property that does this.", 'start': 9760.953, 'duration': 1.901}, {'end': 9764.515, 'text': "And you've seen that property before.", 'start': 9763.014, 'duration': 1.501}, {'end': 9765.975, 'text': 'However, you might have forgotten it.', 'start': 9764.815, 'duration': 1.16}, {'end': 9770.037, 'text': 'If so, then Google justify content, and you might find the answer.', 'start': 9766.135, 'duration': 3.902}, {'end': 9772.538, 'text': "I'm not going to give you any more hints than that.", 'start': 9770.717, 'duration': 1.821}, {'end': 9775.88, 'text': 'Because if you have forgotten about it, it is a great practice to Google it.', 'start': 9772.658, 'duration': 3.222}, {'end': 9783.124, 'text': "Then once you've figured out the answer, go ahead and add the horizontal space so that our example becomes a little bit more like this layout.", 'start': 9776.92, 'duration': 6.204}, {'end': 9788.087, 'text': 'And just so you know, you only need to add one property for this not multiple.', 'start': 9783.884, 'duration': 4.203}, {'end': 9789.647, 'text': 'So give it your best shot.', 'start': 9788.407, 'duration': 1.24}, {'end': 9792.209, 'text': 'And then I will show you the solution afterwards as well.', 'start': 9789.728, 'duration': 2.481}, {'end': 9798.63, 'text': "Okay, let's do this.", 'start': 9797.569, 'duration': 1.061}, {'end': 9805.716, 'text': "So the property is called justify content, a little bit of a weird name, I agree, but that's how it is.", 'start': 9799.291, 'duration': 6.425}, {'end': 9808.919, 'text': 'And here, we can use a range of different values.', 'start': 9806.457, 'duration': 2.462}, {'end': 9813.283, 'text': "And the one we're looking for is called space around like that.", 'start': 9809.099, 'duration': 4.184}, {'end': 9817.346, 'text': 'And now you can see both elements now have some space around them.', 'start': 9813.683, 'duration': 3.663}, {'end': 9824.754, 'text': 'and also we can do space between, then all of the available space will be between the two items.', 'start': 9817.967, 'duration': 6.787}, {'end': 9831.34, 'text': "Or we could even do center as you've seen before, then there's no space in between them, but both of them are centered.", 'start': 9825.515, 'duration': 5.825}, {'end': 9834.704, 'text': 'And end, pushes it all the way to the end.', 'start': 9832.061, 'duration': 2.643}, {'end': 9837.806, 'text': 'And start keeps it at the start.', 'start': 9835.485, 'duration': 2.321}, {'end': 9840.708, 'text': 'So this is a super powerful property.', 'start': 9838.647, 'duration': 2.061}, {'end': 9844.25, 'text': 'And we want the space around value for it.', 'start': 9841.368, 'duration': 2.882}, {'end': 9849.893, 'text': "As you can see, it's at least getting closer to the layout we have in our finished design.", 'start': 9844.61, 'duration': 5.283}], 'summary': 'Create utility class for blue border and add justify content property for spacing. achieve desired layout.', 'duration': 197.316, 'max_score': 9652.577, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ9652577.jpg'}], 'start': 8840.927, 'title': 'Writing effective alt text and css layout', 'summary': 'Covers writing appropriate alt text for images, emphasizing descriptive details, and implementing a css layout for a business card. it includes examples and emphasizes the benefits of efficient development processes through css inheritance and utility classes.', 'chapters': [{'end': 8889.814, 'start': 8840.927, 'title': 'Writing effective alt text for images', 'summary': 'Discusses the process of writing appropriate alt text for images, emphasizing the importance of including descriptive details such as facial expressions and background, with an example of writing alt text provided.', 'duration': 48.887, 'highlights': ['The importance of including descriptive details such as facial expressions and background when writing alt text for images, illustrated with an example.', 'Emphasizing the significance of providing descriptive alt text for images to ensure accessibility and inclusivity.', 'Demonstrating the process of writing alt text for an image by describing the facial expression, eye contact, and background details.']}, {'end': 9519.414, 'start': 8890.234, 'title': 'Css business card layout', 'summary': 'Covers the importance of adding alt text, resizing images, adding css classes, implementing flexbox layout, and fixing broken column layout for a business card.', 'duration': 629.18, 'highlights': ['Developers should add alt text to separate themselves from beginners. Adding alt text can set developers apart from most other beginners.', 'Image width should be set to 150 pixels using a class in CSS. Developers are tasked with setting the width of the image to 150 pixels using a class in CSS.', "Adding a class 'card' and applying a dotted blue border with 20 pixels of padding to separate the card from the background. Instructs to add a class 'card' and apply a dotted blue border with 20 pixels of padding to create separation from the background.", 'Introduction to flexbox for creating columns in a business card layout. Introduces the use of flexbox for creating columns in a business card layout.', 'Problems with flexbox treating each element as a single child and the solution of wrapping elements inside a div to create two columns. Discusses the issue of flexbox treating each element as a single child and the solution of wrapping elements inside a div to create two columns.']}, {'end': 10034.231, 'start': 9520.094, 'title': 'Css layout and inheritance', 'summary': 'Discusses the implementation of utility classes for styling, adding spacing around flexbox children, centering elements using flexbox properties, and the importance of css inheritance, emphasizing the benefits of writing less code for a more efficient development process.', 'duration': 514.137, 'highlights': ['Utility Classes: The instructor demonstrates creating a utility class for a blue border, applying it to flexbox children and the card, resulting in a better layout overview. Demonstration of creating and applying utility classes for styling, resulting in a better layout overview.', "Adding Spacing Around Flexbox Children: The instructor guides the addition of horizontal space around the flex children using the 'justify-content' property, enhancing the layout to resemble the desired design. Guidance on adding horizontal space around flex children using 'justify-content' property to enhance layout.", 'Centering Elements: The instructor explains setting a fixed width for the card and centering it on the page using margin properties, providing a solution for the displayed block element behavior. Explanation of setting a fixed width for the card and centering it on the page using margin properties.', 'CSS Inheritance: The chapter explores the significance of CSS inheritance, promoting the concept of writing less code for a smaller bug surface area and improved efficiency in development. Exploration of the importance of CSS inheritance for efficient development and reduced bug surface area.']}], 'duration': 1193.304, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ8840927.jpg', 'highlights': ['Emphasizing the significance of providing descriptive alt text for images to ensure accessibility and inclusivity.', 'The importance of including descriptive details such as facial expressions and background when writing alt text for images, illustrated with an example.', 'Demonstrating the process of writing alt text for an image by describing the facial expression, eye contact, and background details.', 'Introduction to flexbox for creating columns in a business card layout.', 'Demonstration of creating and applying utility classes for styling, resulting in a better layout overview.', "Guidance on adding horizontal space around flex children using 'justify-content' property to enhance layout.", 'Explanation of setting a fixed width for the card and centering it on the page using margin properties.', 'Exploration of the importance of CSS inheritance for efficient development and reduced bug surface area.']}, {'end': 11632.221, 'segs': [{'end': 10077.103, 'src': 'embed', 'start': 10053.317, 'weight': 0, 'content': [{'end': 10061.299, 'text': 'So if we head over to the HTML here, you can see that we are using a bunch of different tags, h1, h4, h2, paragraph, and so forth.', 'start': 10053.317, 'duration': 7.982}, {'end': 10067.261, 'text': "And let's now say that we want the text in this article to be aligned to the center and not to the left side.", 'start': 10061.979, 'duration': 5.282}, {'end': 10075.583, 'text': 'Well, then a very poor way of solving that would be to target the age one first and then do text align center like that.', 'start': 10067.821, 'duration': 7.762}, {'end': 10077.103, 'text': 'And then the center is text.', 'start': 10075.683, 'duration': 1.42}], 'summary': 'Using multiple html tags; aligning text to center instead of left side.', 'duration': 23.786, 'max_score': 10053.317, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ10053317.jpg'}, {'end': 10196.97, 'src': 'embed', 'start': 10169.961, 'weight': 8, 'content': [{'end': 10174.644, 'text': "Other than that, don't worry about any of these at this point, you're going to learn some of them later.", 'start': 10169.961, 'duration': 4.683}, {'end': 10180.649, 'text': "But to be completely honest, there's a ton of CSS properties here I have never heard about before I recorded this scrim.", 'start': 10174.824, 'duration': 5.825}, {'end': 10184.193, 'text': "Okay, now it's time to get your hands on the keyboard.", 'start': 10181.289, 'duration': 2.904}, {'end': 10188.118, 'text': 'So I want you to navigate to this stack overflow,', 'start': 10184.574, 'duration': 3.544}, {'end': 10196.97, 'text': 'question this one right here and then pick a few random inherited CSS properties and then add them to the body tag up here to see how they work.', 'start': 10188.118, 'duration': 8.852}], 'summary': 'Learning css properties, explore stack overflow, and experimenting with inherited css properties', 'duration': 27.009, 'max_score': 10169.961, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ10169961.jpg'}, {'end': 11033.441, 'src': 'embed', 'start': 11007.055, 'weight': 6, 'content': [{'end': 11012.999, 'text': "so that it's pushed to more or less the center of a screen, given that the screen is as wide as it is right now.", 'start': 11007.055, 'duration': 5.944}, {'end': 11020.585, 'text': 'So I want you to translate this into using the margin shorthand instead, go ahead and do that right now.', 'start': 11013.36, 'duration': 7.225}, {'end': 11030.379, 'text': "Okay, hopefully that went well, I'm going to actually comment these lines out.", 'start': 11025.856, 'duration': 4.523}, {'end': 11033.441, 'text': 'Now you can see the circle is up in the left corner.', 'start': 11030.619, 'duration': 2.822}], 'summary': 'Demonstrating how to use margin shorthand to center an element on the screen.', 'duration': 26.386, 'max_score': 11007.055, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ11007055.jpg'}, {'end': 11331.47, 'src': 'embed', 'start': 11305.055, 'weight': 4, 'content': [{'end': 11312.179, 'text': 'which then sends you to this onboarding screen where you can add a little bit of information about yourself or just click on the skip personalization option.', 'start': 11305.055, 'duration': 7.124}, {'end': 11315.781, 'text': "If you are impatient, once you've done this, you'll see a dashboard.", 'start': 11312.579, 'duration': 3.202}, {'end': 11320.263, 'text': "yours is probably not as filled with information as mine, though that doesn't matter.", 'start': 11316.101, 'duration': 4.162}, {'end': 11327.668, 'text': "What we're going to do now is click on the plus icon in the top right corner there, it opens up a menu where you are to choose new repository.", 'start': 11320.464, 'duration': 7.204}, {'end': 11331.47, 'text': 'The repository is the backbone of any software project.', 'start': 11327.948, 'duration': 3.522}], 'summary': 'Onboarding screen allows personalization, then access dashboard. creating a new repository is crucial for software projects.', 'duration': 26.415, 'max_score': 11305.055, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ11305055.jpg'}, {'end': 11373.971, 'src': 'embed', 'start': 11342.876, 'weight': 2, 'content': [{'end': 11344.417, 'text': "though we're getting ahead of ourselves right now.", 'start': 11342.876, 'duration': 1.541}, {'end': 11348.839, 'text': 'we are just going to give it a name, which you type in here in the repository name field.', 'start': 11344.417, 'duration': 4.422}, {'end': 11350.479, 'text': "like that, I'm going to call it business card.", 'start': 11348.839, 'duration': 1.64}, {'end': 11356.082, 'text': "And then I'm not going to touch any of the options here, I'm just going to scroll down and click Create repository.", 'start': 11350.72, 'duration': 5.362}, {'end': 11357.022, 'text': 'And there we go.', 'start': 11356.282, 'duration': 0.74}, {'end': 11361.464, 'text': 'Now we have to upload our files, we can do that in many different ways.', 'start': 11357.523, 'duration': 3.941}, {'end': 11364.646, 'text': "Right now, we're just going to do the very simplest one.", 'start': 11361.725, 'duration': 2.921}, {'end': 11369.208, 'text': 'So what I want you to do is click on the uploading an existing file link right here,', 'start': 11364.946, 'duration': 4.262}, {'end': 11373.971, 'text': "as that'll take you to a drag and drop field quite similar to what we saw at Netlify earlier.", 'start': 11369.208, 'duration': 4.763}], 'summary': "Creating a repository named 'business card' and uploading files using a simple method.", 'duration': 31.095, 'max_score': 11342.876, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ11342876.jpg'}, {'end': 11585.81, 'src': 'heatmap', 'start': 11386.638, 'weight': 0.746, 'content': [{'end': 11390.441, 'text': "Once you've done that, you'll see all of your files listed, just scroll a little bit down.", 'start': 11386.638, 'duration': 3.803}, {'end': 11395.945, 'text': 'And then we have to do something called commit changes, which might seem a little bit weird and complicated.', 'start': 11390.721, 'duration': 5.224}, {'end': 11397.506, 'text': "But don't worry about that right now.", 'start': 11396.025, 'duration': 1.481}, {'end': 11404.071, 'text': "I'm just going to go with the recommended text, add files via upload, and then hit commit changes.", 'start': 11397.786, 'duration': 6.285}, {'end': 11405.812, 'text': 'And boom, there we go.', 'start': 11404.591, 'duration': 1.221}, {'end': 11411.296, 'text': 'We have a repository on GitHub, which includes all the code we need for our business card.', 'start': 11406.052, 'duration': 5.244}, {'end': 11418.581, 'text': 'Now, if you were to collaborate with other developers on this project, they would push their code up to this specific repository.', 'start': 11411.696, 'duration': 6.885}, {'end': 11424.084, 'text': 'And you would also probably create issues for tasks you want to do and work with something called pull requests,', 'start': 11418.761, 'duration': 5.323}, {'end': 11427.726, 'text': "which is when you want to merge someone's changes into the code base.", 'start': 11424.084, 'duration': 3.642}, {'end': 11429.968, 'text': "And there's also a ton of other things you can do here.", 'start': 11428.007, 'duration': 1.961}, {'end': 11432.51, 'text': "But we're not going to worry about any of that right now.", 'start': 11430.228, 'duration': 2.282}, {'end': 11438.814, 'text': 'Because the only thing we want to use this repository for right now is as an intermediate step before our deployment.', 'start': 11432.75, 'duration': 6.064}, {'end': 11445.076, 'text': "So let's head over to Netlify and make sure you're logged in so that you see the previous project we deployed.", 'start': 11439.474, 'duration': 5.602}, {'end': 11451.699, 'text': 'And right besides it, you can see this button called Add new site, click on it and choose import an existing project.', 'start': 11445.416, 'duration': 6.283}, {'end': 11454.56, 'text': "Here, you're able to choose GitHub, click on that.", 'start': 11451.999, 'duration': 2.561}, {'end': 11459.182, 'text': "And it'll open this pop up menu where GitHub asks where you want to install Netlify.", 'start': 11454.86, 'duration': 4.322}, {'end': 11460.303, 'text': "Because that's what you're doing.", 'start': 11459.262, 'duration': 1.041}, {'end': 11466.085, 'text': "Now we're installing Netlify on our GitHub profile, click on your GitHub username, in my case, peer Borgen.", 'start': 11460.343, 'duration': 5.742}, {'end': 11470.889, 'text': "And here, I'm just going to leave all the settings as they are scroll down and hit install.", 'start': 11466.445, 'duration': 4.444}, {'end': 11471.95, 'text': 'And there we go.', 'start': 11471.269, 'duration': 0.681}, {'end': 11478.075, 'text': 'Now you can see that Netlify has pulled in your GitHub profile and has your repositories listed.', 'start': 11472.19, 'duration': 5.885}, {'end': 11479.676, 'text': 'I have a bunch of repositories.', 'start': 11478.375, 'duration': 1.301}, {'end': 11481.398, 'text': "So I'll have to search for the business card.", 'start': 11479.716, 'duration': 1.682}, {'end': 11483.379, 'text': "I'll write the business and there we can see it.", 'start': 11481.678, 'duration': 1.701}, {'end': 11487.08, 'text': 'When I click on this repository, it is imported into Netlify.', 'start': 11483.559, 'duration': 3.521}, {'end': 11493.923, 'text': "And here I can adjust some settings, but I'm not going to do any of that as usual, just scroll down to the bottom and hit deploy site.", 'start': 11487.24, 'duration': 6.683}, {'end': 11495.063, 'text': 'And there we go.', 'start': 11494.063, 'duration': 1}, {'end': 11497.064, 'text': 'The deployment is now in progress.', 'start': 11495.363, 'duration': 1.701}, {'end': 11498.165, 'text': "So we'll have to wait a little bit.", 'start': 11497.104, 'duration': 1.061}, {'end': 11503.126, 'text': 'And then once this image turns into a screenshot of your site, it is deployed.', 'start': 11498.285, 'duration': 4.841}, {'end': 11506.568, 'text': 'So clicking on this link will open up our business card.', 'start': 11503.427, 'duration': 3.141}, {'end': 11514.591, 'text': 'really good job, though, I hope your business card looks a lot cooler than this, as you were to personalize it in the previous scrim.', 'start': 11507.088, 'duration': 7.503}, {'end': 11522.515, 'text': 'Actually, to prove to me that you end personalize this, I want you to head over to Twitter and share your deployed business card.', 'start': 11515.311, 'duration': 7.204}, {'end': 11529.537, 'text': 'Do as Michael Rocca does here and mention me if you want to alongside a link to your project and perhaps even a screenshot of it.', 'start': 11522.715, 'duration': 6.822}, {'end': 11531.138, 'text': 'That would be super cool.', 'start': 11529.678, 'duration': 1.46}, {'end': 11532.859, 'text': 'So go ahead and do that right now.', 'start': 11531.298, 'duration': 1.561}, {'end': 11534.84, 'text': "And then I'll see you in the next scrim.", 'start': 11533.039, 'duration': 1.801}, {'end': 11542, 'text': "Woohoo, you've just completed the business card section of this course.", 'start': 11538.399, 'duration': 3.601}, {'end': 11544.141, 'text': 'That is very well done.', 'start': 11542.261, 'duration': 1.88}, {'end': 11546.642, 'text': "Now, let's have a little look at what you've learned.", 'start': 11544.501, 'duration': 2.141}, {'end': 11553.485, 'text': "Starting out, you'll learn about image alt text, which is a really important HTML attribute that makes your sites more accessible.", 'start': 11546.962, 'duration': 6.523}, {'end': 11559.869, 'text': 'Next up, you learned about flex child containers, which means that we took this flex box layout here, the card,', 'start': 11554.085, 'duration': 5.784}, {'end': 11562.872, 'text': 'and made sure that it only had two direct children.', 'start': 11559.869, 'duration': 3.003}, {'end': 11569.757, 'text': 'So that is one container and two flex items so that these two stacked up besides each other on columns.', 'start': 11562.972, 'duration': 6.785}, {'end': 11573.84, 'text': 'However, we wanted the content inside of the second column to be on rows.', 'start': 11570.017, 'duration': 3.823}, {'end': 11581.206, 'text': 'And for that reason, we had to turn this flex child into a container in itself so that these three could stack on top of each other.', 'start': 11574.12, 'duration': 7.086}, {'end': 11585.81, 'text': 'you also learned about inheritance, for example here with the card class,', 'start': 11581.826, 'duration': 3.984}], 'summary': 'The transcript discusses github repository setup and netlify deployment, along with key learnings on html attributes and flexbox layout.', 'duration': 199.172, 'max_score': 11386.638, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ11386638.jpg'}, {'end': 11559.869, 'src': 'embed', 'start': 11529.678, 'weight': 9, 'content': [{'end': 11531.138, 'text': 'That would be super cool.', 'start': 11529.678, 'duration': 1.46}, {'end': 11532.859, 'text': 'So go ahead and do that right now.', 'start': 11531.298, 'duration': 1.561}, {'end': 11534.84, 'text': "And then I'll see you in the next scrim.", 'start': 11533.039, 'duration': 1.801}, {'end': 11542, 'text': "Woohoo, you've just completed the business card section of this course.", 'start': 11538.399, 'duration': 3.601}, {'end': 11544.141, 'text': 'That is very well done.', 'start': 11542.261, 'duration': 1.88}, {'end': 11546.642, 'text': "Now, let's have a little look at what you've learned.", 'start': 11544.501, 'duration': 2.141}, {'end': 11553.485, 'text': "Starting out, you'll learn about image alt text, which is a really important HTML attribute that makes your sites more accessible.", 'start': 11546.962, 'duration': 6.523}, {'end': 11559.869, 'text': 'Next up, you learned about flex child containers, which means that we took this flex box layout here, the card,', 'start': 11554.085, 'duration': 5.784}], 'summary': 'Completed business card section, learned about alt text & flex child containers.', 'duration': 30.191, 'max_score': 11529.678, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ11529678.jpg'}, {'end': 11625.58, 'src': 'embed', 'start': 11594.538, 'weight': 10, 'content': [{'end': 11596.961, 'text': 'the text elements that contain the data for the business card.', 'start': 11594.538, 'duration': 2.423}, {'end': 11605.63, 'text': 'And also you learned about shorthand, more specifically the margin and padding shorthand, where we, instead of specifying each margin like the top,', 'start': 11597.867, 'duration': 7.763}, {'end': 11612.752, 'text': 'left, right and bottom, we just use shorthand zero auto to set zero on the top and bottom and then auto on the left and right.', 'start': 11605.63, 'duration': 7.122}, {'end': 11615.597, 'text': 'And then you learned about web safe fonts,', 'start': 11613.717, 'duration': 1.88}, {'end': 11621.459, 'text': "which are these fonts that you can use pretty much without worrying about whether or not they are installed on the user's computer,", 'start': 11615.597, 'duration': 5.862}, {'end': 11625.58, 'text': 'because in the overall majority of cases they actually are, so they are safe to use.', 'start': 11621.459, 'duration': 4.121}], 'summary': 'Learned about business card data, margin and padding shorthand, and web safe fonts.', 'duration': 31.042, 'max_score': 11594.538, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ11594538.jpg'}], 'start': 10034.311, 'title': 'Css techniques and github deployment', 'summary': 'Discusses css inheritance, alignment, changing fonts, web safe fonts, margin shorthand techniques, and github deployment for a business card. it covers various css properties and techniques, emphasizing efficient coding practices. additionally, it provides insights into collaborating on code, creating repositories, and importing projects to netlify for deployment.', 'chapters': [{'end': 10547.793, 'start': 10034.311, 'title': 'Css inheritance and alignment', 'summary': 'Discusses css inheritance and alignment, explaining how certain properties are inherited, and how to align text using the text-align property, as well as how to add colors and borders to elements. it also presents a challenge to center text in specific elements using css inheritance.', 'duration': 513.482, 'highlights': ['The chapter discusses CSS inheritance and alignment, explaining how certain properties are inherited, and how to align text using the text-align property It explains that certain properties, such as text-align and font properties, are inherited, while most properties are not. It also demonstrates how to align text using the text-align property.', 'It presents a challenge to center text in specific elements using CSS inheritance The chapter challenges the reader to center text inside specific elements using CSS inheritance, allowing them to experiment with inherited CSS properties and apply them to elements.', 'It also presents how to add colors and borders to elements The chapter provides guidance on adding colors and borders to elements, including using hexadecimal values for colors and searching for solutions when facing new challenges, such as creating bottom borders.']}, {'end': 10909.759, 'start': 10553.016, 'title': 'Changing fonts and web safe fonts in css', 'summary': 'Discusses the process of changing background, text color, and border in css, and the importance of choosing appropriate fonts for different projects. it also explains the concept of web safe fonts and how to use them in css.', 'duration': 356.743, 'highlights': ['The process of changing background, text color, and border in CSS is discussed, emphasizing the importance of these changes. The speaker demonstrates changing the background, text color, and border in CSS, showing the impact of each change and emphasizing their importance in design.', 'The importance of choosing appropriate fonts for different projects is emphasized, with examples of how font choice can impact the perception of a brand. The importance of selecting suitable fonts for specific projects is highlighted, with examples of how font choice can impact the perception of a brand, such as a computer specialists company or a shop.', 'The concept of web safe fonts is explained, highlighting the benefit of using fonts that are pre-installed in most clients and do not require sending the font recipe over the network. The concept of web safe fonts is explained, emphasizing the benefit of using fonts pre-installed in most clients, minimizing the need to send the font recipe over the network.']}, {'end': 11244.789, 'start': 10910.079, 'title': 'Css margin shorthand techniques', 'summary': 'Discusses the usage of margin shorthand in css, covering the application of shorthand for same and different values, the concept of vertical and horizontal values, and reducing multiple lines to one, resulting in a more efficient and effective code. it also emphasizes the importance of maintaining the desired layout while using shorthand.', 'duration': 334.71, 'highlights': ['The chapter discusses the usage of margin shorthand in CSS, covering the application of shorthand for same and different values, the concept of vertical and horizontal values, and reducing multiple lines to one, resulting in a more efficient and effective code. The chapter delves into the application of margin shorthand in CSS, explaining its usage for both same and different values, while emphasizing the concept of vertical and horizontal values. It also highlights the significance of reducing multiple lines into one, leading to a more efficient and effective code.', 'The chapter emphasizes the importance of maintaining the desired layout while using shorthand. It underscores the significance of ensuring that the desired layout is maintained while utilizing margin shorthand, indicating the need for maintaining the expected visual arrangement.']}, {'end': 11632.221, 'start': 11248.297, 'title': 'Github deployment for business card', 'summary': 'Delves into deploying a business card using github as an intermediate step, providing insights into collaborating on code, creating repositories, and importing projects to netlify.', 'duration': 383.924, 'highlights': ['Collaboration using GitHub GitHub allows collaboration on code with other developers, enhancing teamwork and version control.', 'Creating a GitHub repository The process of creating a repository on GitHub, where all the project files are stored, is detailed, including naming the repository and uploading files.', 'Importing project to Netlify from GitHub The step-by-step process of importing a project from GitHub to Netlify, adjusting settings, and deploying the site is explained.']}], 'duration': 1597.91, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ10034311.jpg', 'highlights': ['The chapter discusses CSS inheritance and alignment, explaining how certain properties are inherited, and how to align text using the text-align property.', 'The chapter challenges the reader to center text inside specific elements using CSS inheritance, allowing them to experiment with inherited CSS properties and apply them to elements.', 'The chapter provides guidance on adding colors and borders to elements, including using hexadecimal values for colors and searching for solutions when facing new challenges, such as creating bottom borders.', 'The process of changing background, text color, and border in CSS is discussed, emphasizing the importance of these changes.', 'The importance of selecting suitable fonts for specific projects is highlighted, with examples of how font choice can impact the perception of a brand, such as a computer specialists company or a shop.', 'The concept of web safe fonts is explained, emphasizing the benefit of using fonts pre-installed in most clients, minimizing the need to send the font recipe over the network.', 'The chapter delves into the application of margin shorthand in CSS, explaining its usage for both same and different values, while emphasizing the concept of vertical and horizontal values.', 'It underscores the significance of ensuring that the desired layout is maintained while utilizing margin shorthand, indicating the need for maintaining the expected visual arrangement.', 'GitHub allows collaboration on code with other developers, enhancing teamwork and version control.', 'The process of creating a repository on GitHub, where all the project files are stored, is detailed, including naming the repository and uploading files.', 'The step-by-step process of importing a project from GitHub to Netlify, adjusting settings, and deploying the site is explained.']}, {'end': 12973.657, 'segs': [{'end': 11970.455, 'src': 'heatmap', 'start': 11774.287, 'weight': 0.712, 'content': [{'end': 11776.829, 'text': 'And you can use them freely however you want.', 'start': 11774.287, 'duration': 2.542}, {'end': 11781.518, 'text': "So if I search here for universe, we'll get a ton of nice images.", 'start': 11777.33, 'duration': 4.188}, {'end': 11782.759, 'text': "Let's scroll a bit down.", 'start': 11781.658, 'duration': 1.101}, {'end': 11784.961, 'text': "As you can see, there's plenty of good candidates here.", 'start': 11782.959, 'duration': 2.002}, {'end': 11787.403, 'text': 'But I think this one is particularly nice.', 'start': 11785.281, 'duration': 2.122}, {'end': 11788.644, 'text': "So I'm going to click in on it.", 'start': 11787.423, 'duration': 1.221}, {'end': 11790.886, 'text': 'It is created by Guillermo Ferla.', 'start': 11788.964, 'duration': 1.922}, {'end': 11794.589, 'text': "And you can see it's really popular have over 12 million views already.", 'start': 11791.206, 'duration': 3.383}, {'end': 11800.053, 'text': 'Now if we want to download this, you can click on the icon up here and download it range of different sizes.', 'start': 11794.829, 'duration': 5.224}, {'end': 11804.275, 'text': "And I've actually done that and placed it here in the images folder.", 'start': 11800.794, 'duration': 3.481}, {'end': 11806.256, 'text': 'So here you can see universe dot jpg.', 'start': 11804.356, 'duration': 1.9}, {'end': 11809.358, 'text': "So let's see how we can add this to our app.", 'start': 11806.757, 'duration': 2.601}, {'end': 11815.32, 'text': "What I'm going to do is target the body because we want the image to span across the entirety of our page.", 'start': 11809.898, 'duration': 5.422}, {'end': 11821.383, 'text': 'So we need to add the background image to the body, lose the background image property.', 'start': 11815.66, 'duration': 5.723}, {'end': 11824.564, 'text': "here we'll utilize something called a CSS function.", 'start': 11821.383, 'duration': 3.181}, {'end': 11826.505, 'text': "don't worry about why it's called a CSS function.", 'start': 11824.564, 'duration': 1.941}, {'end': 11836.207, 'text': 'just remember that the way to do it is by writing URL, open parentheses and then, inside of the parentheses, you refer to the image source,', 'start': 11827.245, 'duration': 8.962}, {'end': 11840.448, 'text': 'just as you do in the image with the IMG tag, it is using quotes.', 'start': 11836.207, 'duration': 4.241}, {'end': 11844.769, 'text': "So inside of the quotes, we'll write the path to this exact image.", 'start': 11841.228, 'duration': 3.541}, {'end': 11848.45, 'text': 'And the way we do that is first by navigating to the images folder.', 'start': 11845.209, 'duration': 3.241}, {'end': 11857.075, 'text': 'So images, then the slash going into the folder, using the universe at JPEG, and boom, there we go.', 'start': 11849.07, 'duration': 8.005}, {'end': 11858.897, 'text': 'Suddenly, our background changed.', 'start': 11857.456, 'duration': 1.441}, {'end': 11860.899, 'text': "However, there's a couple of problems here.", 'start': 11859.418, 'duration': 1.481}, {'end': 11867.505, 'text': 'Our H1 is now almost invisible, since by default, the text is black, and the background is very black as well.', 'start': 11861.4, 'duration': 6.105}, {'end': 11872.55, 'text': "So I'm going to change the color to white, like that much better.", 'start': 11867.826, 'duration': 4.724}, {'end': 11879.374, 'text': 'Also, this image is 1000s of pixels wide, whereas our browser is not that wide.', 'start': 11873.371, 'duration': 6.003}, {'end': 11885.658, 'text': 'So notice that if we make it super wide, we still only see the edge of the galaxy, more or less the center of the image.', 'start': 11879.415, 'duration': 6.243}, {'end': 11892.442, 'text': 'So what we need to do is shrink our browser down to like a couple of 100 pixels wide, which is what we want.', 'start': 11886.238, 'duration': 6.204}, {'end': 11899.186, 'text': "And then make our background image shrink so that it's squeezed into the width of this browser.", 'start': 11893.142, 'duration': 6.044}, {'end': 11907.288, 'text': 'The way we do that is background size, and value cover, boom, there we go.', 'start': 11900.026, 'duration': 7.262}, {'end': 11917.456, 'text': 'Now the width of the background image is exactly as the width of its container, which again is exactly as wide as the browser itself,', 'start': 11907.728, 'duration': 9.728}, {'end': 11920.679, 'text': 'meaning that the browser and the background image has the exact same.', 'start': 11917.456, 'duration': 3.223}, {'end': 11922.58, 'text': 'with that looks pretty good.', 'start': 11920.679, 'duration': 1.901}, {'end': 11930.366, 'text': "I'm not going to give you a challenge on how to do this right now, as you'll get plenty of practice using background images later in this course.", 'start': 11923, 'duration': 7.366}, {'end': 11933.209, 'text': "So with that, let's just move on to the next scrim.", 'start': 11930.567, 'duration': 2.642}, {'end': 11940.893, 'text': "Okay, in this two part challenge, you're going to improve the design of our app.", 'start': 11937.031, 'duration': 3.862}, {'end': 11947.516, 'text': 'First, I want you to center the text and button, and then style the button according to the provider design.', 'start': 11941.593, 'duration': 5.923}, {'end': 11949.777, 'text': 'And that is found here in the slide.', 'start': 11948.076, 'duration': 1.701}, {'end': 11953.959, 'text': 'As you can see, the button is slightly different from how it is right now.', 'start': 11950.378, 'duration': 3.581}, {'end': 11958.842, 'text': 'Not too different, but certainly it has some CSS properties applied.', 'start': 11954.5, 'duration': 4.342}, {'end': 11963.547, 'text': "And I'm not going to tell you which, because this is a good way for you to train your design.", 'start': 11959.522, 'duration': 4.025}, {'end': 11967.652, 'text': 'I, when you design the button, I want you to use a class in order to select it.', 'start': 11963.547, 'duration': 4.105}, {'end': 11970.455, 'text': 'So not just using an element selector like we do here.', 'start': 11967.952, 'duration': 2.503}], 'summary': "The image has over 12 million views and css is used to adjust its size and color, along with a challenge to improve the app's design.", 'duration': 196.168, 'max_score': 11774.287, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ11774287.jpg'}, {'end': 11821.383, 'src': 'embed', 'start': 11794.829, 'weight': 5, 'content': [{'end': 11800.053, 'text': 'Now if we want to download this, you can click on the icon up here and download it range of different sizes.', 'start': 11794.829, 'duration': 5.224}, {'end': 11804.275, 'text': "And I've actually done that and placed it here in the images folder.", 'start': 11800.794, 'duration': 3.481}, {'end': 11806.256, 'text': 'So here you can see universe dot jpg.', 'start': 11804.356, 'duration': 1.9}, {'end': 11809.358, 'text': "So let's see how we can add this to our app.", 'start': 11806.757, 'duration': 2.601}, {'end': 11815.32, 'text': "What I'm going to do is target the body because we want the image to span across the entirety of our page.", 'start': 11809.898, 'duration': 5.422}, {'end': 11821.383, 'text': 'So we need to add the background image to the body, lose the background image property.', 'start': 11815.66, 'duration': 5.723}], 'summary': "Demonstrating how to add a downloaded image to the app's body.", 'duration': 26.554, 'max_score': 11794.829, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ11794829.jpg'}, {'end': 11885.658, 'src': 'embed', 'start': 11861.4, 'weight': 1, 'content': [{'end': 11867.505, 'text': 'Our H1 is now almost invisible, since by default, the text is black, and the background is very black as well.', 'start': 11861.4, 'duration': 6.105}, {'end': 11872.55, 'text': "So I'm going to change the color to white, like that much better.", 'start': 11867.826, 'duration': 4.724}, {'end': 11879.374, 'text': 'Also, this image is 1000s of pixels wide, whereas our browser is not that wide.', 'start': 11873.371, 'duration': 6.003}, {'end': 11885.658, 'text': 'So notice that if we make it super wide, we still only see the edge of the galaxy, more or less the center of the image.', 'start': 11879.415, 'duration': 6.243}], 'summary': 'Adjusted h1 text color to white. image is too wide for browser.', 'duration': 24.258, 'max_score': 11861.4, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ11861400.jpg'}, {'end': 12554.639, 'src': 'heatmap', 'start': 12161.946, 'weight': 0.916, 'content': [{'end': 12169.29, 'text': "However, this font isn't one of the so called web safe fonts you learned about earlier, which is already installed in most operating systems.", 'start': 12161.946, 'duration': 7.344}, {'end': 12171.011, 'text': 'This is a very custom font.', 'start': 12169.73, 'duration': 1.281}, {'end': 12175.333, 'text': 'So we have to use Google fonts in order to bring it into our project.', 'start': 12171.311, 'duration': 4.022}, {'end': 12180.315, 'text': "And here you can see the Google fonts interface, it's located at fonts.google.com.", 'start': 12176.093, 'duration': 4.222}, {'end': 12184.838, 'text': 'And if we scroll a bit down, you can see it contains a range of very different fonts.', 'start': 12181.116, 'duration': 3.722}, {'end': 12188.683, 'text': 'Now it has a search feature up in the top left corner.', 'start': 12185.678, 'duration': 3.005}, {'end': 12190.786, 'text': "But it's actually not that good.", 'start': 12188.983, 'duration': 1.803}, {'end': 12195.573, 'text': "To be honest, it's better to just use regular Google search when searching for Google fonts.", 'start': 12190.826, 'duration': 4.747}, {'end': 12197.115, 'text': "So let's do that instead.", 'start': 12196.113, 'duration': 1.002}, {'end': 12201.381, 'text': "The way I found the font we're going to use now is just by googling sci fi.", 'start': 12197.776, 'duration': 3.605}, {'end': 12202.962, 'text': 'and then Google Fonts.', 'start': 12202.082, 'duration': 0.88}, {'end': 12205.644, 'text': 'And then Google suggested this Orbitron font.', 'start': 12203.443, 'duration': 2.201}, {'end': 12208.225, 'text': 'So if we click into it, you can see here it is.', 'start': 12206.004, 'duration': 2.221}, {'end': 12213.788, 'text': 'If we scroll a bit down, you can see we have to choose specifically which styles we want.', 'start': 12208.245, 'duration': 5.543}, {'end': 12219.891, 'text': "So I'm going to choose this 400 regular style by clicking on select this style like that.", 'start': 12214.408, 'duration': 5.483}, {'end': 12222.692, 'text': 'And you can see the panel on the right hand side.', 'start': 12220.391, 'duration': 2.301}, {'end': 12226.874, 'text': 'And it is clear that we have chosen the Orbitron font and the regular 400 font weight.', 'start': 12223.272, 'duration': 3.602}, {'end': 12233.038, 'text': "Also, let's click on this extra bold in case we want to bold some text on our site.", 'start': 12228.775, 'duration': 4.263}, {'end': 12235.079, 'text': 'And there we have that one as well.', 'start': 12233.698, 'duration': 1.381}, {'end': 12242.043, 'text': 'Now, if we want to use this on the web, we can embed it by simply copying a piece of code into the head of our HTML.', 'start': 12235.779, 'duration': 6.264}, {'end': 12244.985, 'text': 'And that is the code you want to copy.', 'start': 12242.563, 'duration': 2.422}, {'end': 12248.347, 'text': 'and then paste it in exactly here.', 'start': 12245.805, 'duration': 2.542}, {'end': 12251.389, 'text': 'Next up, we also have to specify it in our CSS.', 'start': 12248.727, 'duration': 2.662}, {'end': 12258.195, 'text': "And that's done by pasting this line into our CSS, for example, in the body tag.", 'start': 12251.85, 'duration': 6.345}, {'end': 12260.036, 'text': "I'm not going to do this for you, though.", 'start': 12258.735, 'duration': 1.301}, {'end': 12264.64, 'text': 'scrimba is all about you doing things on your own getting your hands on the keyboard.', 'start': 12260.557, 'duration': 4.083}, {'end': 12270.644, 'text': 'So now I want you to head over to Google Fonts, fetch the orbitron font in these two styles.', 'start': 12265.16, 'duration': 5.484}, {'end': 12275.929, 'text': 'and then do whatever you need to do in order to make the orbitron font render properly on our site.', 'start': 12271.545, 'duration': 4.384}, {'end': 12278.712, 'text': "I'm going to leave you here with this screenshot.", 'start': 12276.59, 'duration': 2.122}, {'end': 12284.737, 'text': 'Because make sure to compare this design with what you get in the mini browser.', 'start': 12279.232, 'duration': 5.505}, {'end': 12288.581, 'text': 'Because there might be something you need to do down in the BTN selector.', 'start': 12285.298, 'duration': 3.283}, {'end': 12290.943, 'text': "And hopefully you're able to spot that.", 'start': 12289.241, 'duration': 1.702}, {'end': 12295.267, 'text': "If not, no worries, because I'll be here showing you the solution when you return back to me.", 'start': 12291.183, 'duration': 4.084}, {'end': 12296.208, 'text': 'Good luck.', 'start': 12295.928, 'duration': 0.28}, {'end': 12305.094, 'text': "Okay, let's do this.", 'start': 12303.934, 'duration': 1.16}, {'end': 12311.777, 'text': "So first we're going to take this snippet of code right here and then paste it into our HTML.", 'start': 12305.835, 'duration': 5.942}, {'end': 12316.519, 'text': "like that, we'll then need to run the code so that it is imported into our project.", 'start': 12311.777, 'duration': 4.742}, {'end': 12325.642, 'text': "And then next up, it is the styles, which we're going to set here, let's copy that line of code, and then simply paste it in right here.", 'start': 12317.259, 'duration': 8.383}, {'end': 12330.544, 'text': 'And boom, during the exploration now looks like our project right here.', 'start': 12325.782, 'duration': 4.762}, {'end': 12335.863, 'text': 'However, this one also has the orbitron font applied to the button.', 'start': 12331.678, 'duration': 4.185}, {'end': 12340.087, 'text': "But we don't have that we still use that boring old font that we had previously.", 'start': 12336.664, 'duration': 3.423}, {'end': 12345.954, 'text': "Why is that? Well, that's actually because buttons don't inherit font families.", 'start': 12340.888, 'duration': 5.066}, {'end': 12351.944, 'text': 'So here, the H1 has inherited the font property from body, but the button has not.', 'start': 12346.761, 'duration': 5.183}, {'end': 12358.247, 'text': 'So what we need to do here is specifically tell the button to have this font family.', 'start': 12352.564, 'duration': 5.683}, {'end': 12360.148, 'text': 'And we can do that in two ways.', 'start': 12358.587, 'duration': 1.561}, {'end': 12367.292, 'text': "One way is through using a CSS value you haven't learned yet, and that is the inherit keyword.", 'start': 12360.548, 'duration': 6.744}, {'end': 12374.406, 'text': "as you can see now it does inherit from the body, but only because we've specifically told the button to do exactly that.", 'start': 12368.502, 'duration': 5.904}, {'end': 12381.87, 'text': "What I'm assuming you did instead, which works perfectly fine as well as simply to paste in the font family orbitron on the BTN class.", 'start': 12374.706, 'duration': 7.164}, {'end': 12384.212, 'text': 'As you can see, that also works well.', 'start': 12382.451, 'duration': 1.761}, {'end': 12386.753, 'text': 'So hopefully you were able to spot this.', 'start': 12384.652, 'duration': 2.101}, {'end': 12388.254, 'text': 'If not, no worries.', 'start': 12387.154, 'duration': 1.1}, {'end': 12390.116, 'text': 'It was just a little gotcha I left here.', 'start': 12388.354, 'duration': 1.762}, {'end': 12392.157, 'text': "Let's move on to the next scrim.", 'start': 12390.616, 'duration': 1.541}, {'end': 12400.241, 'text': "Before we move on from the subject of fonts, there's one more technique I want to teach you.", 'start': 12395.899, 'duration': 4.342}, {'end': 12404.203, 'text': 'Because in some cases, Google Fonts might actually not be enough.', 'start': 12400.821, 'duration': 3.382}, {'end': 12407.585, 'text': "And that's typically the case if you want very specific fonts.", 'start': 12404.523, 'duration': 3.062}, {'end': 12412.807, 'text': "For example, let's say that you are building a Godfather website in honor of the classic film.", 'start': 12407.885, 'duration': 4.922}, {'end': 12420.531, 'text': "Well, in that case you'd probably want to get a hold of the real Godfather font, though Google Fonts doesn't host that one,", 'start': 12413.168, 'duration': 7.363}, {'end': 12423.393, 'text': 'because it is simply too specific for them to care about.', 'start': 12420.531, 'duration': 2.862}, {'end': 12428.094, 'text': "So you'd most likely have to find this font somewhere on the World Wide Web.", 'start': 12424.033, 'duration': 4.061}, {'end': 12432.535, 'text': 'And there are great services for this example, 1001 fonts.com.', 'start': 12428.214, 'duration': 4.321}, {'end': 12436.076, 'text': 'There, if you search for Godfather, they actually have it.', 'start': 12433.015, 'duration': 3.061}, {'end': 12439.677, 'text': 'So you can click into it, scroll a little bit down and click Download.', 'start': 12436.336, 'duration': 3.341}, {'end': 12443.418, 'text': 'So what you then did is kind of downloaded the recipe for the font.', 'start': 12440.037, 'duration': 3.381}, {'end': 12449.14, 'text': "And if you open up the folder you got, you'll see a TTF file, that's a file format for fonts.", 'start': 12443.578, 'duration': 5.562}, {'end': 12455.925, 'text': 'What you then can do is simply drag and drop that file into your file system, like I have done right here.', 'start': 12449.56, 'duration': 6.365}, {'end': 12458.787, 'text': 'you can see I have the cordiality dot ttf file.', 'start': 12455.925, 'duration': 2.862}, {'end': 12462.87, 'text': 'Now what I can do is use the at font face rule in CSS.', 'start': 12459.187, 'duration': 3.683}, {'end': 12470.395, 'text': 'So simply writing an at and then font dash face and then open up the curly brackets and write two properties the source,', 'start': 12463.19, 'duration': 7.205}, {'end': 12475.739, 'text': "which should use the URL technique pointing to the TTF file, which I'm doing right here.", 'start': 12470.395, 'duration': 5.344}, {'end': 12480.482, 'text': 'And also I need to tell CSS what name I want to give this font in my style sheets.', 'start': 12476.019, 'duration': 4.463}, {'end': 12484.665, 'text': "And I'm just going to choose Corleone for now, but I could have chosen whatever name I wanted.", 'start': 12480.862, 'duration': 3.803}, {'end': 12489.147, 'text': "Now, I'm able to target the h1 and use this font family.", 'start': 12485.085, 'duration': 4.062}, {'end': 12491.509, 'text': "So I'll do font family.", 'start': 12489.808, 'duration': 1.701}, {'end': 12493.341, 'text': 'early owner.', 'start': 12492.861, 'duration': 0.48}, {'end': 12495.983, 'text': 'And there you can see I have the Godfather font.', 'start': 12493.541, 'duration': 2.442}, {'end': 12498.604, 'text': "So I'm off to a great start on my tribute page.", 'start': 12496.163, 'duration': 2.441}, {'end': 12506.909, 'text': 'So now what I think you should do is actually try and do this yourself find a random font online, download it so that you get a hold of the TTF file.', 'start': 12499.144, 'duration': 7.765}, {'end': 12515.133, 'text': 'drag and drop that TTF file into the file system here on scrim bar and use the add font face property to make that font available in your style sheets.', 'start': 12506.909, 'duration': 8.224}, {'end': 12518.075, 'text': "Once you've done that, I will see you in the next scrim.", 'start': 12515.473, 'duration': 2.602}, {'end': 12528.747, 'text': 'Now you are going to learn about the span tag, because in the next scrim, you are going to create an underline under the exploration word.', 'start': 12521.784, 'duration': 6.963}, {'end': 12531.728, 'text': 'And in order to achieve that you need the span tag.', 'start': 12529.267, 'duration': 2.461}, {'end': 12537.93, 'text': "So let's take a little step back from our space exploration site and learn all about this awesome tag.", 'start': 12532.168, 'duration': 5.762}, {'end': 12542.852, 'text': "The example we're going to use in order to learn the span tag is of banner ads.", 'start': 12538.63, 'duration': 4.222}, {'end': 12547.314, 'text': "you've probably seen these before you've browsed the web, for example, on new sites.", 'start': 12543.672, 'duration': 3.642}, {'end': 12554.639, 'text': "And many of these are actually so called HTML5 ads where they're built using HTML and CSS.", 'start': 12548.115, 'duration': 6.524}], 'summary': 'Using google fonts to fetch and embed orbitron font, also learning to add custom fonts through css with an example of adding the godfather font.', 'duration': 392.693, 'max_score': 12161.946, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ12161946.jpg'}, {'end': 12305.094, 'src': 'embed', 'start': 12271.545, 'weight': 3, 'content': [{'end': 12275.929, 'text': 'and then do whatever you need to do in order to make the orbitron font render properly on our site.', 'start': 12271.545, 'duration': 4.384}, {'end': 12278.712, 'text': "I'm going to leave you here with this screenshot.", 'start': 12276.59, 'duration': 2.122}, {'end': 12284.737, 'text': 'Because make sure to compare this design with what you get in the mini browser.', 'start': 12279.232, 'duration': 5.505}, {'end': 12288.581, 'text': 'Because there might be something you need to do down in the BTN selector.', 'start': 12285.298, 'duration': 3.283}, {'end': 12290.943, 'text': "And hopefully you're able to spot that.", 'start': 12289.241, 'duration': 1.702}, {'end': 12295.267, 'text': "If not, no worries, because I'll be here showing you the solution when you return back to me.", 'start': 12291.183, 'duration': 4.084}, {'end': 12296.208, 'text': 'Good luck.', 'start': 12295.928, 'duration': 0.28}, {'end': 12305.094, 'text': "Okay, let's do this.", 'start': 12303.934, 'duration': 1.16}], 'summary': 'Troubleshoot orbitron font rendering for site, with potential fixes in btn selector, to be reviewed in mini browser.', 'duration': 33.549, 'max_score': 12271.545, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ12271545.jpg'}, {'end': 12547.314, 'src': 'embed', 'start': 12521.784, 'weight': 0, 'content': [{'end': 12528.747, 'text': 'Now you are going to learn about the span tag, because in the next scrim, you are going to create an underline under the exploration word.', 'start': 12521.784, 'duration': 6.963}, {'end': 12531.728, 'text': 'And in order to achieve that you need the span tag.', 'start': 12529.267, 'duration': 2.461}, {'end': 12537.93, 'text': "So let's take a little step back from our space exploration site and learn all about this awesome tag.", 'start': 12532.168, 'duration': 5.762}, {'end': 12542.852, 'text': "The example we're going to use in order to learn the span tag is of banner ads.", 'start': 12538.63, 'duration': 4.222}, {'end': 12547.314, 'text': "you've probably seen these before you've browsed the web, for example, on new sites.", 'start': 12543.672, 'duration': 3.642}], 'summary': 'Learn about the span tag for creating underlines, using banner ads as an example.', 'duration': 25.53, 'max_score': 12521.784, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ12521784.jpg'}, {'end': 12596.969, 'src': 'embed', 'start': 12566.086, 'weight': 2, 'content': [{'end': 12568.407, 'text': 'more eye catching and more targeted.', 'start': 12566.086, 'duration': 2.321}, {'end': 12570.348, 'text': "But that's the name of the game.", 'start': 12568.927, 'duration': 1.421}, {'end': 12571.769, 'text': 'So we just have to accept it.', 'start': 12570.648, 'duration': 1.121}, {'end': 12577.093, 'text': 'And you are now going to do exactly that, you are going to make this ad more eye catching.', 'start': 12571.949, 'duration': 5.144}, {'end': 12581.236, 'text': "So that's hopefully more people click on it and visit our scammy casino.", 'start': 12577.133, 'duration': 4.103}, {'end': 12582.678, 'text': 'So how do we do this?', 'start': 12581.977, 'duration': 0.701}, {'end': 12585.2, 'text': 'Well, looking at the HTML,', 'start': 12583.018, 'duration': 2.182}, {'end': 12593.146, 'text': 'you can see the div wrapper has a class of add which sets the background color border and the text alignment inside of this green rectangle.', 'start': 12585.2, 'duration': 7.946}, {'end': 12596.969, 'text': 'And there are two elements inside of the ad that is the h1 and the h3.', 'start': 12593.567, 'duration': 3.402}], 'summary': 'Optimize ad to be more eye-catching to increase clicks and visits to the casino.', 'duration': 30.883, 'max_score': 12566.086, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ12566086.jpg'}, {'end': 12706.013, 'src': 'embed', 'start': 12672.099, 'weight': 4, 'content': [{'end': 12673.34, 'text': "Let's just see that it works.", 'start': 12672.099, 'duration': 1.241}, {'end': 12675.862, 'text': 'by doing color red.', 'start': 12674.221, 'duration': 1.641}, {'end': 12679.743, 'text': 'Yes There we can see we have now only targeted the here word.', 'start': 12676.182, 'duration': 3.561}, {'end': 12681.963, 'text': "This doesn't look particularly good, though.", 'start': 12680.203, 'duration': 1.76}, {'end': 12686.125, 'text': "So let's instead do something that makes it look a bit more like a button.", 'start': 12682.004, 'duration': 4.121}, {'end': 12691.467, 'text': 'For that, we need a border, in my opinion, for example, two pixels, and we want it to be solid.', 'start': 12686.565, 'duration': 4.902}, {'end': 12697.508, 'text': "And here, let's steal the color from the border around the ad so that we reuse it a little bit.", 'start': 12691.887, 'duration': 5.621}, {'end': 12698.709, 'text': 'I think that can look nice.', 'start': 12697.548, 'duration': 1.161}, {'end': 12706.013, 'text': "Yeah, you can see that it's added a border around the word is very crammed on the left and right hand side.", 'start': 12698.729, 'duration': 7.284}], 'summary': 'Styling adjustments made to target a specific word, adding a 2-pixel solid border and reusing color.', 'duration': 33.914, 'max_score': 12672.099, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ12672099.jpg'}], 'start': 11632.221, 'title': 'Web design techniques', 'summary': 'Covers setting up a repository on github, deploying code via netlify, building a space exploration site, improving app design, using google fonts, and employing span tag for styling, offering practical examples and resulting in a 0.02% increase in click-through rate for the ad.', 'chapters': [{'end': 11930.366, 'start': 11632.221, 'title': 'Github, netlify, and space exploration site', 'summary': 'Covers setting up a repository on github, deploying code via netlify, and building a space exploration site with a background image and google fonts, offering practical examples and guidance.', 'duration': 298.145, 'highlights': ['The chapter covers setting up a repository on GitHub and deploying code via Netlify. The chapter teaches about creating a repository for GitHub and utilizing Netlify deployment to take code from a local computer to the World Wide Web.', 'Guidance on building a space exploration site with a background image and Google fonts is offered. The section provides an example of building a space exploration site with an animated background image and custom space-themed fonts using Google fonts.', "The use of background images in CSS is explained, demonstrating its implementation and impact on the site's appearance. The transcript explains the process of adding background images in CSS, emphasizing the importance of considering the dimensions and color contrast for an optimal visual effect.", 'Recommendation for utilizing Unsplash to find high-quality images for web design is provided. The chapter recommends using Unsplash for obtaining high-quality images, specifically suggesting it as a reliable source for enhancing web designs.']}, {'end': 12113.864, 'start': 11930.567, 'title': 'App design improvement challenge', 'summary': 'Involves improving the design of an app, focusing on centering text and button, applying padding and background color changes, and using class selectors for styling.', 'duration': 183.297, 'highlights': ["The first step is to center the text on the button using various methods like margins, flexbox, or text align, with the easiest method being to apply 'text align center' in the body element.", "The next focus is on styling the button by adding a class 'BTM', adjusting padding to create a more rectangular design, and changing the background color to white for a cleaner look.", "The detailed examination of the button's design includes specific pixel adjustments for padding and background color, aiming for a cleaner and more visually appealing appearance."]}, {'end': 12518.075, 'start': 12114.285, 'title': 'Using google fonts for web design', 'summary': 'Covers using google fonts to access over 1000 different high quality fonts, how to import the orbitron font for a project, and the technique to use custom fonts through the @font-face rule in css.', 'duration': 403.79, 'highlights': ['Using Google Fonts to access over 1000 different high quality fonts Google Fonts provides access to over 1000 high-quality fonts for web projects.', 'Importing the Orbitron font for a project Demonstrates the process of choosing and importing the Orbitron font from Google Fonts, including specifying styles, embedding it into HTML, and using it in CSS.', 'Using custom fonts through the @font-face rule in CSS Explains the technique of using the @font-face rule in CSS to make custom fonts available for web projects, with a practical example of importing and using the Corleone font.']}, {'end': 12973.657, 'start': 12521.784, 'title': 'Using span tag for styling', 'summary': 'Covers the usage of the span tag to style specific words in html, including creating a button-like effect and an underline, resulting in increased eye-catching elements and a 0.02% increase in click-through rate for the ad.', 'duration': 451.873, 'highlights': ['Usage of span tag to style specific words in HTML The chapter explains how to use the span tag to target specific words in HTML for styling, enhancing the visual appeal and functionality of the content.', 'Creating a button-like effect using span and CSS Details the process of using the span tag and CSS to create a button-like effect for specific words, including adding a border, padding, and background color.', 'Creating an underline using span and class Demonstrates the process of using the span tag and a class to create an underline effect for a specific word, utilizing the border-bottom property to achieve the desired styling.', "Impact on click-through rate The changes made to the ad using the span tag and CSS resulted in a 0.02% increase in the click-through rate, contributing to the enhancement of the ad's effectiveness."]}], 'duration': 1341.436, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ11632221.jpg', 'highlights': ["The changes made to the ad using the span tag and CSS resulted in a 0.02% increase in the click-through rate, contributing to the enhancement of the ad's effectiveness.", 'The chapter covers setting up a repository on GitHub and deploying code via Netlify, teaching about creating a repository for GitHub and utilizing Netlify deployment to take code from a local computer to the World Wide Web.', 'Guidance on building a space exploration site with a background image and Google fonts is offered, providing an example of building a space exploration site with an animated background image and custom space-themed fonts using Google fonts.', 'Using Google Fonts to access over 1000 different high quality fonts Google Fonts provides access to over 1000 high-quality fonts for web projects.', 'Demonstrates the process of choosing and importing the Orbitron font from Google Fonts, including specifying styles, embedding it into HTML, and using it in CSS.', 'The chapter explains how to use the span tag to target specific words in HTML for styling, enhancing the visual appeal and functionality of the content.']}, {'end': 14349.327, 'segs': [{'end': 12997.803, 'src': 'embed', 'start': 12974.477, 'weight': 0, 'content': [{'end': 12986.16, 'text': 'Because this underlying here could perfectly fine be a part of our design system and also be applied at multiple other sections and paragraphs throughout our entire page as we build out this space exploration site.', 'start': 12974.477, 'duration': 11.683}, {'end': 12992.642, 'text': "So I want to have the freedom to be able to reuse this later as well, even though I'm only using it once now.", 'start': 12986.8, 'duration': 5.842}, {'end': 12997.803, 'text': "So I'm going to turn this into a class again, rerun the example now it's not applied.", 'start': 12993.002, 'duration': 4.801}], 'summary': 'Adapting design system for reusability, ensuring flexibility and scalability.', 'duration': 23.326, 'max_score': 12974.477, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ12974477.jpg'}, {'end': 13107.288, 'src': 'embed', 'start': 13075.978, 'weight': 1, 'content': [{'end': 13076.298, 'text': 'Like that.', 'start': 13075.978, 'duration': 0.32}, {'end': 13077.959, 'text': 'If we run this, you can see Oh, wow.', 'start': 13076.458, 'duration': 1.501}, {'end': 13082.101, 'text': 'that is not exactly what we were looking for.', 'start': 13080.02, 'duration': 2.081}, {'end': 13086.282, 'text': "It's far too big this image, so we have to reduce its size.", 'start': 13082.221, 'duration': 4.061}, {'end': 13088.903, 'text': "And to target it, we're going to use an ID.", 'start': 13086.822, 'duration': 2.081}, {'end': 13092.144, 'text': "And I'm going to call this main logo like that.", 'start': 13089.503, 'duration': 2.641}, {'end': 13098.606, 'text': "Now if we head to the styles of CSS, we'll do hashtag main dash logo.", 'start': 13093.024, 'duration': 5.582}, {'end': 13101.147, 'text': 'And here we have to reduce its width.', 'start': 13099.126, 'duration': 2.021}, {'end': 13107.288, 'text': "So let's try with for example, perhaps this is 200 pixels.", 'start': 13101.627, 'duration': 5.661}], 'summary': 'Adjust image size to 200 pixels using css id #main-logo.', 'duration': 31.31, 'max_score': 13075.978, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ13075978.jpg'}, {'end': 13713.064, 'src': 'heatmap', 'start': 13126.307, 'weight': 0.891, 'content': [{'end': 13128.648, 'text': 'So with that, we have solved the challenge.', 'start': 13126.307, 'duration': 2.341}, {'end': 13129.509, 'text': 'Great job.', 'start': 13129.048, 'duration': 0.461}, {'end': 13136.413, 'text': "Now we're going to breathe some more life into our example here.", 'start': 13133.231, 'duration': 3.182}, {'end': 13142.017, 'text': 'Because it works fine with this static JPEG as the background image,', 'start': 13136.814, 'duration': 5.203}, {'end': 13146.681, 'text': "but wouldn't it be a lot cooler if it was animated so you could see the stars flying around?", 'start': 13142.017, 'duration': 4.664}, {'end': 13154.386, 'text': 'And in our images folder, we now just happen to have a file called galaxy dot web p.', 'start': 13147.221, 'duration': 7.165}, {'end': 13161.071, 'text': "What's that? Let's just try to replace this universe JPEG here with the galaxy web p file.", 'start': 13154.386, 'duration': 6.685}, {'end': 13173.567, 'text': 'shall do galaxy dot web P and boom, the galaxy web P is an animated image in which you see a bunch of stars around the galaxy.', 'start': 13162.509, 'duration': 11.058}, {'end': 13176.913, 'text': 'And to me, this looks a lot cooler than what we just had.', 'start': 13173.888, 'duration': 3.025}, {'end': 13181.007, 'text': 'Now, you might wonder what this web P here is.', 'start': 13178.325, 'duration': 2.682}, {'end': 13186.03, 'text': 'And that is just an image format, pretty similar to so called GIFs GIF.', 'start': 13181.087, 'duration': 4.943}, {'end': 13192.755, 'text': "And GIF is what you recognize from all over the web in animated images like this one right here, which you've probably seen before.", 'start': 13186.371, 'duration': 6.384}, {'end': 13196.338, 'text': 'So web P is used exactly as gifts are on the web.', 'start': 13193.055, 'duration': 3.283}, {'end': 13198.439, 'text': 'However, it has a better compression.', 'start': 13196.598, 'duration': 1.841}, {'end': 13204.744, 'text': "So it's more compact and doesn't use as much data as gifts use when they're sent from a server to a client.", 'start': 13198.619, 'duration': 6.125}, {'end': 13208.174, 'text': 'So we want to use WebP where we can.', 'start': 13205.652, 'duration': 2.522}, {'end': 13217.181, 'text': 'And now you might wonder, well, where did you find this galaxy.webp image that is on a site called GIPHY.', 'start': 13208.854, 'duration': 8.327}, {'end': 13219.182, 'text': 'That is a search engine for GIFs.', 'start': 13217.521, 'duration': 1.661}, {'end': 13222.845, 'text': 'So I just navigated to it, searched for galaxy,', 'start': 13219.622, 'duration': 3.223}, {'end': 13228.469, 'text': 'scrolled a little bit down and found this neat looking galaxy GIF here created by the European Space Agency.', 'start': 13222.845, 'duration': 5.624}, {'end': 13230.33, 'text': 'Now, this is a slideshow.', 'start': 13228.949, 'duration': 1.381}, {'end': 13234.271, 'text': 'So you can see that this gif is now being animated,', 'start': 13230.61, 'duration': 3.661}, {'end': 13241.813, 'text': 'but it actually is because I just saved this image to my local computer and then uploaded it to the images folder right here.', 'start': 13234.271, 'duration': 7.542}, {'end': 13246.055, 'text': 'Now, if you want, you can also click on the share button here and click Copy gif link.', 'start': 13242.414, 'duration': 3.641}, {'end': 13250.237, 'text': 'And then you can simply paste that link into this URL.', 'start': 13246.755, 'duration': 3.482}, {'end': 13253.559, 'text': "And then that'll give as you see the exact same result.", 'start': 13250.838, 'duration': 2.721}, {'end': 13259.003, 'text': "But I prefer to rather use the version which we've imported into our project right here,", 'start': 13254.08, 'duration': 4.923}, {'end': 13262.065, 'text': 'in case the GIPHY file might change at some point or something.', 'start': 13259.003, 'duration': 3.062}, {'end': 13266.828, 'text': 'However, for experimentation purposes, I think you should head over to Giphy,', 'start': 13262.645, 'duration': 4.183}, {'end': 13272.253, 'text': 'search for a few images and just paste them in right here and see how that affects our example.', 'start': 13266.828, 'duration': 5.425}, {'end': 13278.998, 'text': "Just so you've gotten familiar with using Giphy and pasting external URLs into the background image property in CSS.", 'start': 13272.513, 'duration': 6.485}, {'end': 13281, 'text': 'So go ahead and do that.', 'start': 13279.699, 'duration': 1.301}, {'end': 13283.122, 'text': 'And then I will see you in the next scrim.', 'start': 13281.26, 'duration': 1.862}, {'end': 13294.672, 'text': 'One thing I like to do when working with images as backgrounds is to fetch colors from the image and use it in the design,', 'start': 13287.367, 'duration': 7.305}, {'end': 13296.674, 'text': 'because that can often look pretty cool.', 'start': 13294.672, 'duration': 2.002}, {'end': 13299.135, 'text': 'So let me show you exactly how to do that.', 'start': 13297.114, 'duration': 2.021}, {'end': 13305.52, 'text': "We can use coolers, the service you're already familiar with, because if you click on the more option in the nav bar,", 'start': 13299.896, 'duration': 5.624}, {'end': 13307.641, 'text': 'you can choose pick palette from photo.', 'start': 13305.52, 'duration': 2.121}, {'end': 13310.143, 'text': "That'll take you to this image picker,", 'start': 13308.282, 'duration': 1.861}, {'end': 13315.847, 'text': 'where you can choose an image by clicking on the browse an image and either upload the image or paste a URL to it.', 'start': 13310.143, 'duration': 5.704}, {'end': 13317.928, 'text': "Once you've done that,", 'start': 13317.188, 'duration': 0.74}, {'end': 13325.952, 'text': "you're taken to this nice tool where you can either drag and drop this picker around on the image until you find the color you like.", 'start': 13317.928, 'duration': 8.024}, {'end': 13332.475, 'text': 'Or you can use this range input here is that will automatically try to find interesting colors in the image for you.', 'start': 13326.232, 'duration': 6.243}, {'end': 13335.276, 'text': 'And then it generates a palette as you can see right here.', 'start': 13332.795, 'duration': 2.481}, {'end': 13341.879, 'text': "Now let's say we like this palette, then we'll click Export and Save palette and we have it in our dashboard.", 'start': 13336.096, 'duration': 5.783}, {'end': 13345.241, 'text': "Now it only has three colors, but that doesn't matter.", 'start': 13342.779, 'duration': 2.462}, {'end': 13353.349, 'text': "I'm only going to use one of these, that is, the blue one, because I think it would be cool to use this blue color as the text color on our site.", 'start': 13345.241, 'duration': 8.108}, {'end': 13357.853, 'text': 'So I want the age one and the button text to have that bluish color.', 'start': 13353.769, 'duration': 4.084}, {'end': 13364.159, 'text': "And the way I'm going to do that is change the color of the body here, because that is where the age one gets its color from.", 'start': 13358.253, 'duration': 5.906}, {'end': 13366.981, 'text': 'it is the only element inheriting from the body at this point.', 'start': 13364.159, 'duration': 2.822}, {'end': 13369.063, 'text': 'So I want to do like that.', 'start': 13367.822, 'duration': 1.241}, {'end': 13371.964, 'text': 'This is the hexadecimal value I got from coolers.', 'start': 13369.323, 'duration': 2.641}, {'end': 13374.385, 'text': 'And as you can see, I think it looks pretty cool.', 'start': 13372.504, 'duration': 1.881}, {'end': 13380.107, 'text': "And also, let's keep the underlying white, because I think it makes sense to have that in a different color.", 'start': 13375.225, 'duration': 4.882}, {'end': 13383.088, 'text': "Now moving on to the button, we'll do color.", 'start': 13380.547, 'duration': 2.541}, {'end': 13385.698, 'text': 'and paste it in again.', 'start': 13384.918, 'duration': 0.78}, {'end': 13386.679, 'text': 'And there we go.', 'start': 13385.718, 'duration': 0.961}, {'end': 13394.382, 'text': 'Now here, I think actually, this apply text could be a bit clearer, because the contrast with the background is just okay at this point.', 'start': 13386.959, 'duration': 7.423}, {'end': 13400.125, 'text': 'Because with this blue color, I think the thin letters became a bit too thin.', 'start': 13395.042, 'duration': 5.083}, {'end': 13407.128, 'text': 'Now a final thing I want to do with this apply text here is make it a little bit bolder, make it stand out a bit more.', 'start': 13400.845, 'duration': 6.283}, {'end': 13417.082, 'text': 'And luckily, we imported not only the regular font weight with the orbitron font family, but also the 800 font weight to the extra bold.', 'start': 13407.808, 'duration': 9.274}, {'end': 13426.128, 'text': 'So what we can do now is actually do font weight and then choose bold.', 'start': 13418.945, 'duration': 7.183}, {'end': 13428.629, 'text': 'And there you can see it actually bolded the text.', 'start': 13426.148, 'duration': 2.481}, {'end': 13432.891, 'text': 'Or we could use the value directly, which is 800.', 'start': 13429.509, 'duration': 3.382}, {'end': 13439.713, 'text': "That'll give us the exact same result as the font weight property can both take numerical values and named values.", 'start': 13432.891, 'duration': 6.822}, {'end': 13445.155, 'text': 'So the numerical values range from 100 200 300, 400, and so forth up until 900.', 'start': 13440.193, 'duration': 4.962}, {'end': 13449.256, 'text': 'And the named values are, for example, normal, bold, and so on.', 'start': 13445.155, 'duration': 4.101}, {'end': 13451.421, 'text': 'So we imported 800.', 'start': 13449.797, 'duration': 1.624}, {'end': 13453.167, 'text': "So let's just write 800 here.", 'start': 13451.421, 'duration': 1.746}, {'end': 13455.895, 'text': 'With that, I think our example looks pretty good.', 'start': 13453.708, 'duration': 2.187}, {'end': 13457.179, 'text': "So let's move on.", 'start': 13456.096, 'duration': 1.083}, {'end': 13463.56, 'text': 'going to space is definitely a risky affair.', 'start': 13460.879, 'duration': 2.681}, {'end': 13469.901, 'text': 'So I want to add this terms and conditions apply text underneath the main section of our site.', 'start': 13464.12, 'duration': 5.781}, {'end': 13471.721, 'text': "However, I don't want to add this.", 'start': 13470.241, 'duration': 1.48}, {'end': 13472.862, 'text': 'This is scrimball.', 'start': 13472.241, 'duration': 0.621}, {'end': 13479.303, 'text': "So you're going to do it, of course, but I'm going to give you a set of detailed instructions so that you know how to go about doing this.", 'start': 13472.882, 'duration': 6.421}, {'end': 13483.504, 'text': "So you're going to start with wrapping the hero section in a div.", 'start': 13479.983, 'duration': 3.521}, {'end': 13490.106, 'text': "And the hero section is the one you can see on top here, it's very often called a hero section in web design.", 'start': 13484.284, 'duration': 5.822}, {'end': 13500.708, 'text': "And it's probably called that because kind of serves as the user's first glimpse of the company and the offering and has this kind of prominent place towards the top and usually extends full width.", 'start': 13490.466, 'duration': 10.242}, {'end': 13502.809, 'text': 'So it is kind of the hero of the website.', 'start': 13500.728, 'duration': 2.081}, {'end': 13509.434, 'text': 'So in our case, it is these three elements right here, the logo, title, and the call to action button.', 'start': 13503.109, 'duration': 6.325}, {'end': 13511.695, 'text': 'And those should all be wrapped inside of a div.', 'start': 13509.694, 'duration': 2.001}, {'end': 13519.881, 'text': 'And then I want you to move the background image that is the animated galaxy image from the body and over into this div.', 'start': 13511.955, 'duration': 7.926}, {'end': 13527.507, 'text': "Now as you do that, you'll notice that you'll have to add some padding to this hero div as it'll look really crammed if you don't add that.", 'start': 13520.181, 'duration': 7.326}, {'end': 13532.971, 'text': 'then I want you to add the terms and conditions apply in an h3 below the hero section.', 'start': 13528.027, 'duration': 4.944}, {'end': 13542.157, 'text': "And then, finally, a problem you'll probably come across is that the body tag has some default margins, which right now doesn't bother us,", 'start': 13533.351, 'duration': 8.806}, {'end': 13545.159, 'text': 'but which will become apparent once you change this layout.', 'start': 13542.157, 'duration': 3.002}, {'end': 13547.401, 'text': 'So go ahead and give this one your best shot.', 'start': 13545.519, 'duration': 1.882}, {'end': 13550.523, 'text': "And when you return back to me, I'll show you how to do it as well.", 'start': 13547.721, 'duration': 2.802}, {'end': 13557.452, 'text': "Okay, let's go.", 'start': 13556.391, 'duration': 1.061}, {'end': 13559.933, 'text': "I'm going to start with the hero section div.", 'start': 13557.472, 'duration': 2.461}, {'end': 13561.874, 'text': "I'm going to add it right here.", 'start': 13559.953, 'duration': 1.921}, {'end': 13564.596, 'text': "I'll give it an ID of hero because it is unique.", 'start': 13562.515, 'duration': 2.081}, {'end': 13566.117, 'text': "So it's okay to use ID.", 'start': 13564.716, 'duration': 1.401}, {'end': 13573.742, 'text': "Then I'm going to indent this end and run the code and seemingly nothing has happened.", 'start': 13568.439, 'duration': 5.303}, {'end': 13578.465, 'text': "Because as you remember from previously, devs don't have any default styling to them.", 'start': 13574.142, 'duration': 4.323}, {'end': 13588.505, 'text': 'So what we need to do is target the hero and then move the background properties from the body to the hero.', 'start': 13579.065, 'duration': 9.44}, {'end': 13589.726, 'text': 'And there we go.', 'start': 13588.926, 'duration': 0.8}, {'end': 13592.787, 'text': "As you can see, it doesn't look particularly good.", 'start': 13590.666, 'duration': 2.121}, {'end': 13596.588, 'text': 'Now, as I said, we will be forced to deal with the padding in the hero,', 'start': 13592.827, 'duration': 3.761}, {'end': 13602.41, 'text': "because you can see here the logo is really crammed all the way up to the top and there's no space underneath the button.", 'start': 13596.588, 'duration': 5.822}, {'end': 13604.131, 'text': "So let's add padding.", 'start': 13602.931, 'duration': 1.2}, {'end': 13608.733, 'text': 'And on the top, maybe we want 10 pixels like that.', 'start': 13604.851, 'duration': 3.882}, {'end': 13612.474, 'text': "Yes On the right hand side, we don't need anything for now.", 'start': 13608.813, 'duration': 3.661}, {'end': 13617.637, 'text': "but on the bottom, we want a lot of padding, maybe we'll do 40 pixels like that.", 'start': 13613.154, 'duration': 4.483}, {'end': 13620.579, 'text': "And then on the left hand side, don't need anything either.", 'start': 13617.657, 'duration': 2.922}, {'end': 13622.601, 'text': 'So here we have the padding.', 'start': 13621.36, 'duration': 1.241}, {'end': 13627.905, 'text': "Now let's add the terms and conditions apply h3 below the hero.", 'start': 13623.902, 'duration': 4.003}, {'end': 13636.831, 'text': "That's just like this, adding an h3 terms and conditions apply like that from the code.", 'start': 13628.665, 'duration': 8.166}, {'end': 13644.743, 'text': 'And there we go, it has already the color we want, since we have set the blue color as the text color on the body.', 'start': 13638.28, 'duration': 6.463}, {'end': 13647.324, 'text': 'So it inherits the color property from the body.', 'start': 13644.763, 'duration': 2.561}, {'end': 13652.727, 'text': 'However, as you can see, are still not quite done, because something has happened with the margins on the site,', 'start': 13647.344, 'duration': 5.383}, {'end': 13660.511, 'text': "or at least the margins of the body has become more apparent because now the entire body isn't filled with the background image anymore.", 'start': 13652.727, 'duration': 7.784}, {'end': 13666.114, 'text': "So we're suddenly noticing that the body has some default margins on all sides, we don't want that.", 'start': 13660.751, 'duration': 5.363}, {'end': 13674.294, 'text': "So we're going to neutralize that by doing margin zero, and boom, there we go, we have completed the challenge.", 'start': 13667.173, 'duration': 7.121}, {'end': 13680.475, 'text': 'Now there is one more thing which is a little bit problematic, which is that if you watch this on a mobile, for example,', 'start': 13674.834, 'duration': 5.641}, {'end': 13684.596, 'text': 'so that the exploration word is located directly over the galaxy,', 'start': 13680.475, 'duration': 4.121}, {'end': 13689.197, 'text': 'the readability sinks quite a bit because the text color blends in with the background.', 'start': 13684.596, 'duration': 4.601}, {'end': 13693.177, 'text': 'And we will fix that is by using a shadow technique on this text.', 'start': 13689.437, 'duration': 3.74}, {'end': 13695.778, 'text': "So now you're going to learn exactly that.", 'start': 13693.477, 'duration': 2.301}, {'end': 13705.601, 'text': 'text shadow is a really nice tool to have in your web design toolkit, as it can make your designs much better.', 'start': 13699.158, 'duration': 6.443}, {'end': 13713.064, 'text': "So here, I've created a very simple imitation of the Netflix logo with the red background and white text.", 'start': 13706.661, 'duration': 6.403}], 'summary': 'Enhanced static jpeg with an animated galaxy webp image, utilized giphy for images, and extracted colors from images, improving the design.', 'duration': 586.757, 'max_score': 13126.307, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ13126307.jpg'}, {'end': 14186.089, 'src': 'embed', 'start': 14152.086, 'weight': 2, 'content': [{'end': 14156.929, 'text': "But if you now look at this, while I comment out that CSS rule, you'll see the difference.", 'start': 14152.086, 'duration': 4.843}, {'end': 14158.731, 'text': 'So keep looking at the exploration word.', 'start': 14157.049, 'duration': 1.682}, {'end': 14160.392, 'text': 'And I will comment it out.', 'start': 14159.351, 'duration': 1.041}, {'end': 14163.754, 'text': "Now Now I'll comment it back again.", 'start': 14161.072, 'duration': 2.682}, {'end': 14167.176, 'text': 'There I meant it out.', 'start': 14164.555, 'duration': 2.621}, {'end': 14169.338, 'text': 'I meant it back in again.', 'start': 14168.417, 'duration': 0.921}, {'end': 14171.86, 'text': 'So hopefully you saw that it changed here a little bit.', 'start': 14169.898, 'duration': 1.962}, {'end': 14175.102, 'text': 'So now the readability is a little bit better.', 'start': 14172.58, 'duration': 2.522}, {'end': 14176.363, 'text': 'Great job.', 'start': 14175.922, 'duration': 0.441}, {'end': 14186.089, 'text': "Now, I'm not sure if you're aware of this, but you're the best because you've completed this section.", 'start': 14179.764, 'duration': 6.325}], 'summary': 'Commenting and uncommenting css rule improved readability. great job on completing the section.', 'duration': 34.003, 'max_score': 14152.086, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ14152086.jpg'}], 'start': 12974.477, 'title': 'Implementing design elements and enhancing readability', 'summary': 'Discusses implementing a reusable design element for the spacex logo, using animated webp images for a visually appealing website, and enhancing text readability with shadow technique. it provides detailed instructions and benefits resulting in a successful implementation and visually enhanced design.', 'chapters': [{'end': 13136.413, 'start': 12974.477, 'title': 'Implementing reusable design elements', 'summary': 'Discusses implementing a reusable design element for the spacex logo, assigning it an id, and using css to reduce its size, resulting in a successful implementation.', 'duration': 161.936, 'highlights': ['The chapter discusses implementing a reusable design element for the SpaceX logo, assigning it an ID, and using CSS to reduce its size, resulting in a successful implementation.', "The SpaceX logo is given the unique ID 'main logo' to ensure its distinctiveness and is then targeted with CSS to reduce its size to 100 pixels, resulting in a successful design implementation.", 'Reusing the design element for the SpaceX logo throughout the entire page is emphasized for consistency and efficiency in the design system.']}, {'end': 13674.294, 'start': 13136.814, 'title': 'Using animated webp images and extracting colors from images', 'summary': 'Discusses using animated webp images for a visually appealing website, emphasizing the benefits of webp over gifs, and extracting colors from images using coolers, resulting in a visually enhanced design with detailed instructions for implementing changes.', 'duration': 537.48, 'highlights': ['The chapter discusses using animated WebP images for a visually appealing website, emphasizing the benefits of WebP over GIFs, and extracting colors from images using coolers. Emphasizing the benefits of WebP over GIFs for visually appealing websites.', 'The chapter provides detailed instructions for implementing changes, such as wrapping the hero section in a div, moving the background image, adding padding, and addressing default margins. Providing detailed instructions for implementing design changes, including wrapping the hero section in a div and addressing default margins.']}, {'end': 14349.327, 'start': 13674.834, 'title': 'Enhancing text readability with shadow technique', 'summary': 'Explains the use of text shadow property to improve readability and design aesthetics, outlining the process of creating shadows, adjusting their offset and blur, and utilizing them to enhance text visibility and design elements.', 'duration': 674.493, 'highlights': ['The text shadow property is used to create a shadow effect around text, improving readability and design aesthetics. Improves readability and design aesthetics.', 'Demonstration of adjusting the offset and blur of the shadow to achieve desired design effects, such as simulating the Netflix logo and improving text visibility over background images. Adjusting offset and blur for desired design effects.', 'Utilizing the text shadow property to create a glowing effect around text, aiding visibility when text color and background color are similar. Creating a glowing effect to aid visibility.', 'Introduction to various web design concepts, including background images, Google fonts, HTML tags, and IDs, in addition to the application of text shadow property for improved readability. Introduction to various web design concepts.']}], 'duration': 1374.85, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ12974477.jpg', 'highlights': ['Reusing the design element for the SpaceX logo throughout the entire page is emphasized for consistency and efficiency in the design system.', 'The chapter provides detailed instructions for implementing changes, such as wrapping the hero section in a div, moving the background image, adding padding, and addressing default margins.', 'The text shadow property is used to create a shadow effect around text, improving readability and design aesthetics.']}, {'end': 16314.865, 'segs': [{'end': 14585.038, 'src': 'embed', 'start': 14554.958, 'weight': 2, 'content': [{'end': 14557.48, 'text': "Now I'll have to rerun so that the font is embedded.", 'start': 14554.958, 'duration': 2.522}, {'end': 14559.021, 'text': 'And yes, there we go.', 'start': 14557.78, 'duration': 1.241}, {'end': 14563.284, 'text': 'That is as far as I can see exactly the design we were looking for.', 'start': 14559.502, 'duration': 3.782}, {'end': 14565.006, 'text': 'So great job.', 'start': 14564.025, 'duration': 0.981}, {'end': 14565.926, 'text': "Let's move on.", 'start': 14565.406, 'duration': 0.52}, {'end': 14579.215, 'text': 'Okay, your next challenge is to colorize the app, because I want it to look like this with a nice blue background, pink border and white text.', 'start': 14569.85, 'duration': 9.365}, {'end': 14585.038, 'text': "And as you can see, I've provided the hexadecimal values for the pink, blue and white colors here.", 'start': 14579.795, 'duration': 5.243}], 'summary': 'The design is approved. next task: colorize app with blue background, pink border, and white text.', 'duration': 30.08, 'max_score': 14554.958, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ14554958.jpg'}, {'end': 14628.288, 'src': 'embed', 'start': 14602.17, 'weight': 4, 'content': [{'end': 14610.552, 'text': "i'm going to start here in the body, taking the blue hexadecimal value and setting it as the background of the body.", 'start': 14602.17, 'duration': 8.382}, {'end': 14612.993, 'text': 'boom, there we go next up.', 'start': 14610.552, 'duration': 2.441}, {'end': 14621.082, 'text': "we want to set the color property here to white, just just six f's after each other, like that.", 'start': 14612.993, 'duration': 8.089}, {'end': 14626.126, 'text': 'Now that is inherited down from the body into all of these.', 'start': 14621.702, 'duration': 4.424}, {'end': 14628.288, 'text': 'Okay, final step is the image.', 'start': 14626.586, 'duration': 1.702}], 'summary': 'Setting blue hexadecimal value as background, white color property, and final step is the image.', 'duration': 26.118, 'max_score': 14602.17, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ14602170.jpg'}, {'end': 15464.96, 'src': 'embed', 'start': 15435.041, 'weight': 3, 'content': [{'end': 15436.923, 'text': 'So we need the display flex.', 'start': 15435.041, 'duration': 1.882}, {'end': 15439.495, 'text': 'like that in order to make this work.', 'start': 15437.833, 'duration': 1.662}, {'end': 15443.018, 'text': 'However, what we can do is change the flex direction.', 'start': 15440.075, 'duration': 2.943}, {'end': 15446.341, 'text': 'So first, let me just both of these two back to start.', 'start': 15443.879, 'duration': 2.462}, {'end': 15456.352, 'text': "And then I'll do flex, dash direction and it by default is a row, because, as I said, the stack up alongside of each other on a row.", 'start': 15446.801, 'duration': 9.551}, {'end': 15464.96, 'text': 'but if we change this to column boom, there you can see now they suddenly stack on top of each other as if they are in the same column,', 'start': 15456.352, 'duration': 8.608}], 'summary': 'Using display flex allows changing flex direction to stack items in a row or column.', 'duration': 29.919, 'max_score': 15435.041, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ15435041.jpg'}, {'end': 16219.142, 'src': 'heatmap', 'start': 16016.127, 'weight': 0.712, 'content': [{'end': 16022.393, 'text': "and that gift cover has been added up here in a images folder which I've just created, as we now have two images,", 'start': 16016.127, 'duration': 6.266}, {'end': 16024.816, 'text': 'so I wanted to gather them together in this images folder.', 'start': 16022.393, 'duration': 2.423}, {'end': 16027.939, 'text': "That means that I've also changed the image of Nick,", 'start': 16025.256, 'duration': 2.683}, {'end': 16035.146, 'text': 'or the source that is referring to the image of Nick in the HTML that now contains the correct path, into the images folder.', 'start': 16027.939, 'duration': 7.207}, {'end': 16037.889, 'text': 'So the challenge is described in detail here.', 'start': 16035.726, 'duration': 2.163}, {'end': 16043.916, 'text': 'I want you to start by creating a gift section div that will wrap all of the elements for the first gift.', 'start': 16037.889, 'duration': 6.027}, {'end': 16048.301, 'text': 'And then I want you to add the h2, h3, and IMG elements.', 'start': 16044.336, 'duration': 3.965}, {'end': 16053.126, 'text': 'So that is the title, which is an h2, the hint, which is an h3.', 'start': 16048.741, 'duration': 4.385}, {'end': 16055.269, 'text': 'And finally, the image itself.', 'start': 16053.627, 'duration': 1.642}, {'end': 16063.833, 'text': 'And I want you to give them all their own classes so that you can use the classes to select the elements when you are to style them according to the design.', 'start': 16055.749, 'duration': 8.084}, {'end': 16067.454, 'text': 'And as a final hint, the image should be 400 pixels wide.', 'start': 16063.853, 'duration': 3.601}, {'end': 16069.875, 'text': 'So go ahead and do this right now.', 'start': 16067.954, 'duration': 1.921}, {'end': 16077.078, 'text': 'Okay, hopefully that went well.', 'start': 16075.378, 'duration': 1.7}, {'end': 16081.22, 'text': "So I'll start by heading over to the HTML and create the markup.", 'start': 16077.499, 'duration': 3.721}, {'end': 16085.102, 'text': "So we wanted a div to begin with, I'm going to create that.", 'start': 16081.961, 'duration': 3.141}, {'end': 16089.287, 'text': 'and then give it a class of gift section like that.', 'start': 16085.506, 'duration': 3.781}, {'end': 16094.828, 'text': 'And inside of it, we wanted first an h2 for the title, which should contain the following text.', 'start': 16089.827, 'duration': 5.001}, {'end': 16097.729, 'text': "Let's run this and yeah, nice.", 'start': 16095.149, 'duration': 2.58}, {'end': 16103.371, 'text': 'We can see that the text already has the correct font and also the slight shadow around it.', 'start': 16098.429, 'duration': 4.942}, {'end': 16104.431, 'text': 'Okay, very nice.', 'start': 16103.671, 'duration': 0.76}, {'end': 16108.212, 'text': "Let's then give it a class as that was something we should do with all elements.", 'start': 16105.011, 'duration': 3.201}, {'end': 16112.688, 'text': "I'll call this gift ash title like that.", 'start': 16109.727, 'duration': 2.961}, {'end': 16115.229, 'text': 'And there was the h3 with the following text.', 'start': 16113.108, 'duration': 2.121}, {'end': 16118.671, 'text': "I'll give that a class of gift hint.", 'start': 16115.85, 'duration': 2.821}, {'end': 16121.712, 'text': "So you can see I'm using gift and then a description.", 'start': 16118.931, 'duration': 2.781}, {'end': 16125.714, 'text': 'I think that makes it easy to understand that these are all somewhat related to each other.', 'start': 16121.992, 'duration': 3.722}, {'end': 16137.656, 'text': 'Finally, the image element should have a source of images slash gift, cover dot JPEG, and also a class of gift IMG.', 'start': 16126.627, 'duration': 11.029}, {'end': 16139.457, 'text': "All right, let's run this code.", 'start': 16138.076, 'duration': 1.381}, {'end': 16143.681, 'text': 'And as you can see, everything is being rendered, though the image is far too large.', 'start': 16139.938, 'duration': 3.743}, {'end': 16146.603, 'text': 'So we need to get going with the styling.', 'start': 16144.441, 'duration': 2.162}, {'end': 16149.305, 'text': "All right, I'll start with the image.", 'start': 16146.623, 'duration': 2.682}, {'end': 16154.968, 'text': 'So dot gift IMD, and give it a width of 400 pixels.', 'start': 16149.846, 'duration': 5.122}, {'end': 16157.129, 'text': 'Yes, that is much better.', 'start': 16155.429, 'duration': 1.7}, {'end': 16160.611, 'text': 'And that is centered because of our text align center up here.', 'start': 16157.209, 'duration': 3.402}, {'end': 16161.691, 'text': 'Very nice.', 'start': 16161.131, 'duration': 0.56}, {'end': 16165.793, 'text': "Okay, let's just carry on with this one, you can see it has a white border.", 'start': 16162.111, 'duration': 3.682}, {'end': 16172.016, 'text': "So let's do order looks to be something like six pixels or something and solid white.", 'start': 16165.813, 'duration': 6.203}, {'end': 16173.897, 'text': 'Yep, pretty good.', 'start': 16172.876, 'duration': 1.021}, {'end': 16178.299, 'text': 'And finally, a border radius, because the corners here are a little bit rounded off.', 'start': 16174.297, 'duration': 4.002}, {'end': 16182.782, 'text': "So let's try order radius at 10 pixels, for example.", 'start': 16178.88, 'duration': 3.902}, {'end': 16188.005, 'text': 'And yeah, that looks pretty much like the design for the image.', 'start': 16183.102, 'duration': 4.903}, {'end': 16191.347, 'text': 'Nice Okay, next up is the spacing.', 'start': 16188.465, 'duration': 2.882}, {'end': 16196.55, 'text': 'As you can see, we have far too little space from the gift section itself to the header section above.', 'start': 16191.507, 'duration': 5.043}, {'end': 16205.175, 'text': 'and I could add that to the top element here, to the title, for example, but it makes a lot more sense to add it to the container element itself,', 'start': 16197.571, 'duration': 7.604}, {'end': 16209.677, 'text': 'because it should control how far it is between this container and the container above.', 'start': 16205.175, 'duration': 4.502}, {'end': 16212.019, 'text': "So let's do gift section.", 'start': 16210.098, 'duration': 1.921}, {'end': 16219.142, 'text': 'margin top, and for example, 50 pixels, that is much better and looks pretty much like what we have here.', 'start': 16212.979, 'duration': 6.163}], 'summary': 'Created a gift section with h2, h3, and image elements styled with specific classes and properties, including a 400-pixel-wide image and 50-pixel top margin for spacing.', 'duration': 203.015, 'max_score': 16016.127, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ16016127.jpg'}, {'end': 16157.129, 'src': 'embed', 'start': 16126.627, 'weight': 0, 'content': [{'end': 16137.656, 'text': 'Finally, the image element should have a source of images slash gift, cover dot JPEG, and also a class of gift IMG.', 'start': 16126.627, 'duration': 11.029}, {'end': 16139.457, 'text': "All right, let's run this code.", 'start': 16138.076, 'duration': 1.381}, {'end': 16143.681, 'text': 'And as you can see, everything is being rendered, though the image is far too large.', 'start': 16139.938, 'duration': 3.743}, {'end': 16146.603, 'text': 'So we need to get going with the styling.', 'start': 16144.441, 'duration': 2.162}, {'end': 16149.305, 'text': "All right, I'll start with the image.", 'start': 16146.623, 'duration': 2.682}, {'end': 16154.968, 'text': 'So dot gift IMD, and give it a width of 400 pixels.', 'start': 16149.846, 'duration': 5.122}, {'end': 16157.129, 'text': 'Yes, that is much better.', 'start': 16155.429, 'duration': 1.7}], 'summary': "Code renders with image source 'images/gift-cover.jpeg' and class 'gift-img', then resized to 400 pixels width.", 'duration': 30.502, 'max_score': 16126.627, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ16126627.jpg'}], 'start': 14349.447, 'title': 'Css design challenges and flexbox usage', 'summary': 'Covers challenges in app header design, colorization, and accessibility improvement using hexadecimal values and text shadow property, as well as the usage of css selectors and flexbox for organizing elements and achieving specific layouts.', 'chapters': [{'end': 14554.518, 'start': 14349.447, 'title': 'Header design challenge', 'summary': "Introduces a challenge to create a basic design for the app header, including centering elements, adjusting image size and shape, and embedding a google font, emphasizing the use of id selectors and the 'happy monkey' font.", 'duration': 205.071, 'highlights': ["The challenge involves creating a basic design for the app header, centering elements, adjusting image size and shape, and embedding the 'happy monkey' Google font.", 'The image of Nick needs to be rounded using the border radius property, with the maximum border radius set to 50% for a completely round image.', "The 'happy monkey' font is found by googling 'Google fonts birthday' and selecting it as the top result, then embedding it into the project.", "The ID selector 'BFF-IMG' is used to adjust the width of the main image and apply the border radius property to make it round."]}, {'end': 14773.681, 'start': 14554.958, 'title': 'Css colorization and accessibility improvement', 'summary': 'Demonstrates the colorization of the app using hexadecimal values for blue, pink, and white, as well as the improvement of accessibility by adding a thin black border using the text shadow property, resulting in improved readability.', 'duration': 218.723, 'highlights': ['The chapter demonstrates the colorization of the app using hexadecimal values for blue, pink, and white. The instructor provides the hexadecimal values for the pink, blue, and white colors and instructs to use them for colorizing the app.', 'Improvement of accessibility by adding a thin black border using the text shadow property, resulting in improved readability. The instructor explains the use of the text shadow property to add a thin blurred border around the h1, h2, and h4 elements, setting the blur to one pixel and the color to black, resulting in improved readability and contrast with the background colors.']}, {'end': 15092.37, 'start': 14774.142, 'title': 'Css selector and flexbox usage', 'summary': 'Shows how to use css selectors to style multiple elements at once and explains the usage of flexbox to organize elements, including an example with lab equipment emojis.', 'duration': 318.228, 'highlights': ['Using CSS group selector to apply styles to multiple elements at once By using a group CSS selector, multiple selectors can be added on one line to style elements simultaneously, reducing the need for separate rules for each element.', 'Applying flexbox to organize elements in a container Flexbox can be utilized to stack elements in a horizontal line or a column within a container, with the ability to align items using properties like align-items and justify-content.', 'Demonstrating the usage of flexbox with lab equipment emojis An example is provided to illustrate the application of flexbox with lab equipment emojis, showcasing how justify-content and align-items can be used to organize the elements within a container.']}, {'end': 15840.226, 'start': 15092.79, 'title': 'Understanding flexbox layout and properties', 'summary': 'Explains the concept of flexbox layout, including align items, justify content, and flex direction, and provides practical challenges to apply these concepts, achieving specific layouts using flexbox properties.', 'duration': 747.436, 'highlights': ['The chapter explains the concept of flexbox layout and its properties, including align items, justify content, and flex direction. It provides an overview of how divs behave when displayed as a block and how they can be arranged into a flexbox layout with individual columns.', 'Practical challenges are presented to apply flexbox properties, achieving specific layouts. The challenges involve modifying align items and justify content properties to achieve layouts such as bottom left corner alignment, centered alignment, and squeezed top alignment.', 'The importance of using flex direction to control the stacking of items in a flex container is emphasized. Changing the flex direction from row to column is demonstrated to stack items on top of each other, and the impact of this change on the main and cross axes is explained.']}, {'end': 16314.865, 'start': 15840.846, 'title': 'Styling challenge and creating gift section', 'summary': 'Covers styling elements like padding, border radius, margin, and classes, with a focus on creating a gift section with specific elements and styling, resulting in a completed first gift section.', 'duration': 474.019, 'highlights': ['The chapter covers styling elements like padding, border radius, margin, and classes, with a focus on creating a gift section with specific elements and styling, resulting in a completed first gift section.', 'The gift section is to contain an h2, h3, and IMG elements, each with their own classes, and the image should be 400 pixels wide.', 'The process involves styling the elements by adding padding, adjusting border radius, managing margins, and using classes for styling, resulting in a completed first gift section with specific design requirements.', 'Detailed instructions are provided for creating a gift section div that wraps all elements for the first gift, adding specific elements with their own classes, and ensuring the image is 400 pixels wide.']}], 'duration': 1965.418, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ14349447.jpg', 'highlights': ['Demonstrating the usage of flexbox with lab equipment emojis An example is provided to illustrate the application of flexbox with lab equipment emojis, showcasing how justify-content and align-items can be used to organize the elements within a container.', 'The chapter explains the concept of flexbox layout and its properties, including align items, justify content, and flex direction. It provides an overview of how divs behave when displayed as a block and how they can be arranged into a flexbox layout with individual columns.', 'Improvement of accessibility by adding a thin black border using the text shadow property, resulting in improved readability. The instructor explains the use of the text shadow property to add a thin blurred border around the h1, h2, and h4 elements, setting the blur to one pixel and the color to black, resulting in improved readability and contrast with the background colors.', "The challenge involves creating a basic design for the app header, centering elements, adjusting image size and shape, and embedding the 'happy monkey' Google font.", 'The process involves styling the elements by adding padding, adjusting border radius, managing margins, and using classes for styling, resulting in a completed first gift section with specific design requirements.']}, {'end': 17963.383, 'segs': [{'end': 16445.848, 'src': 'embed', 'start': 16421.841, 'weight': 0, 'content': [{'end': 16429.407, 'text': "So the only thing that's visible is the border, which spans 400 pixels starting from the left hand side and over towards the right hand side.", 'start': 16421.841, 'duration': 7.566}, {'end': 16431.109, 'text': 'So go ahead and give this a shot.', 'start': 16429.788, 'duration': 1.321}, {'end': 16433.69, 'text': 'And then I will show you the solution when you return back to me.', 'start': 16431.269, 'duration': 2.421}, {'end': 16440.425, 'text': "Okay, let's do this.", 'start': 16439.324, 'duration': 1.101}, {'end': 16445.848, 'text': 'First, it needs a height, and it should be a square, meaning equal width and height.', 'start': 16441.224, 'duration': 4.624}], 'summary': 'Border spans 400 pixels, needs square shape.', 'duration': 24.007, 'max_score': 16421.841, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ16421841.jpg'}, {'end': 16623.896, 'src': 'embed', 'start': 16601.578, 'weight': 1, 'content': [{'end': 16610.864, 'text': 'If we head over to the CSS, you can see that the only styling here is a set of rules that are applied to the divs, that is, the three menu items.', 'start': 16601.578, 'duration': 9.286}, {'end': 16613.486, 'text': "what I've done is simply align the text to the center.", 'start': 16610.864, 'duration': 2.622}, {'end': 16619.311, 'text': "I've set the text color to white, given it some margin, some padding on the inside of the menu items.", 'start': 16613.486, 'duration': 5.825}, {'end': 16623.896, 'text': "I've added this red background color, cranked up the font size and also made the font bold.", 'start': 16619.311, 'duration': 4.585}], 'summary': 'Css styles applied to menu items include center-aligned text, white color, red background, increased font size, and bold font.', 'duration': 22.318, 'max_score': 16601.578, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ16601578.jpg'}, {'end': 16798.713, 'src': 'embed', 'start': 16774.305, 'weight': 14, 'content': [{'end': 16781.167, 'text': "So the happy gift is added here in the images folder, I'm not going to show it to you, I want you to solve this challenge in order to see this gift.", 'start': 16774.305, 'duration': 6.862}, {'end': 16786.489, 'text': 'Now the gift paper image you are to swap out is this div right here.', 'start': 16781.868, 'duration': 4.621}, {'end': 16793.911, 'text': 'As you remember, we gave it a background image, which is the gift cover dot JPEG file, which also is in our images folder.', 'start': 16787.669, 'duration': 6.242}, {'end': 16796.152, 'text': 'So go ahead and solve this challenge right now.', 'start': 16794.131, 'duration': 2.021}, {'end': 16798.713, 'text': 'And then I will show you the solution when you return back to me.', 'start': 16796.232, 'duration': 2.481}], 'summary': 'Challenge to swap out gift paper image in div, using gift cover dot jpeg file.', 'duration': 24.408, 'max_score': 16774.305, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ16774305.jpg'}, {'end': 17213.021, 'src': 'embed', 'start': 17178.541, 'weight': 6, 'content': [{'end': 17187.243, 'text': "So I'm going to start in the HTML file because we're simply going to copy paste this one two times.", 'start': 17178.541, 'duration': 8.702}, {'end': 17192.086, 'text': "And then I'm going to add the titles.", 'start': 17190.165, 'duration': 1.921}, {'end': 17201.492, 'text': "I'll copy this one and paste it in here and copy this one and paste it in here.", 'start': 17192.706, 'duration': 8.786}, {'end': 17203.653, 'text': "Okay, let's run this.", 'start': 17201.972, 'duration': 1.681}, {'end': 17212.021, 'text': 'now you can see we have the hot gif and then the genius section, which still has the hot gif underneath it.', 'start': 17205.478, 'duration': 6.543}, {'end': 17213.021, 'text': "that's to be expected.", 'start': 17212.021, 'duration': 1}], 'summary': 'Html file copied and pasted twice, with titles added. hot gif and genius section displayed.', 'duration': 34.48, 'max_score': 17178.541, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ17178541.jpg'}, {'end': 17761.623, 'src': 'embed', 'start': 17740.636, 'weight': 5, 'content': [{'end': 17750.56, 'text': "Here's another example where it starts almost black at the top and then slowly fades over into purple and then again into a orange ish or light brown,", 'start': 17740.636, 'duration': 9.924}, {'end': 17752.36, 'text': "or I don't know what you want to call this color.", 'start': 17750.56, 'duration': 1.8}, {'end': 17753.721, 'text': 'But you get the point.', 'start': 17753.061, 'duration': 0.66}, {'end': 17756.021, 'text': "It's fading from one color to another.", 'start': 17754.081, 'duration': 1.94}, {'end': 17758.682, 'text': 'And this is very often used in web design.', 'start': 17756.702, 'duration': 1.98}, {'end': 17761.623, 'text': 'You can and you can do it with CSS pretty easily.', 'start': 17759.262, 'duration': 2.361}], 'summary': 'Demonstrates color fading from black to purple to orange, commonly used in web design with css.', 'duration': 20.987, 'max_score': 17740.636, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ17740636.jpg'}], 'start': 16318.317, 'title': 'Css techniques for hover feature', 'summary': 'Covers setting up the project for hover feature, utilizing hover pseudo class for visual feedback, creating custom gifs with unique ids, and front-end developer css techniques with practical examples, challenges, and completion requirements.', 'chapters': [{'end': 16560.757, 'start': 16318.317, 'title': 'Setting up project for hover feature', 'summary': 'Covers setting up the project by replacing the image tag with a div, setting background image through css, and centering the image within the div, with a requirement of equal width and height of 400px and utilizing the margin technique to achieve centering.', 'duration': 242.44, 'highlights': ['Replacing image tag with a div and setting the stage for the hover feature The project is prepared by replacing the image tag with a div to set the stage for the hover feature.', "Setting background image through CSS and addressing the issue of image size The background image is set through CSS, and the issue of image size is addressed by using 'background size: cover' to fit the image within the 400x400 pixel container.", "Centering the image within the div using the margin technique The image is centered within the div by utilizing the margin technique with 'margin: 0 auto;' to achieve the original design requirement."]}, {'end': 16843.333, 'start': 16561.296, 'title': 'Hover pseudo class for visual feedback', 'summary': 'Explains the use of hover pseudo class to enhance user experience by providing visual feedback on a website, demonstrated through practical examples and challenges, preparing for an upcoming project involving the hover class.', 'duration': 282.037, 'highlights': ["The hover pseudo class is used to provide visual feedback to users by changing the appearance of elements when hovered over, enhancing user experience and interactivity. The hover pseudo class is demonstrated through practical examples, showing how elements' appearance can be altered when hovered over, enhancing user experience and interactivity on a website.", 'Practical examples, such as changing background color and image on hover, are provided to illustrate the application of the hover pseudo class, preparing for an upcoming project involving the hover class. Practical examples, including changing background color and image on hover, are provided to illustrate the application of the hover pseudo class, preparing for an upcoming project involving the hover class.', 'A challenge is presented to swap the gift paper image with a happy gift image on hover, providing a practical exercise to apply the hover pseudo class. A challenge is presented to swap the gift paper image with a happy gift image on hover, providing a practical exercise to apply the hover pseudo class and enhance understanding of its implementation.']}, {'end': 17473.3, 'start': 16843.794, 'title': 'Creating custom gifs with unique ids', 'summary': 'Discusses creating custom gifs with unique ids, addressing hover effects, and overriding css properties, resulting in the completion of challenges and the addition of new sections, ultimately resulting in a comprehensive understanding of css concepts.', 'duration': 629.506, 'highlights': ['Creating custom GIFs with unique IDs The instructor discusses creating unique IDs for GIFs to control hover effects and background images, demonstrating the importance of unique IDs for individual elements.', 'Addressing hover effects and overriding CSS properties The need to address hover effects and override CSS properties is highlighted, emphasizing the importance of specificity in CSS selectors and the use of unique IDs to prioritize styling.', "Completion of challenges and addition of new sections The successful completion of challenges and addition of new sections, such as 'genius' and 'badass' GIFs, is emphasized, showcasing the practical application of CSS concepts.", 'Comprehensive understanding of CSS concepts The chapter concludes by emphasizing the development of a comprehensive understanding of CSS concepts, including unique IDs, hover effects, and CSS specificity, leading to the successful creation of custom GIFs.']}, {'end': 17963.383, 'start': 17473.76, 'title': 'Front-end developer: css techniques', 'summary': "Covers creating a footer with a paragraph and anchor tag, using css to center, style, and add gradient to elements, with a challenge to apply a gradient to the site's background.", 'duration': 489.623, 'highlights': ['Creating a footer with a paragraph and anchor tag, and configuring the anchor tag to open in a new tab.', 'Using CSS to center, style, and add spacing to the footer paragraph, including adjusting width, margins, and color.', "Applying gradients to elements using linear gradients in CSS, with an example of fading from one color to another and a challenge to apply a gradient to the site's background.", 'Encouraging learners to personalize the birthday gift site by thinking of someone with an upcoming birthday and providing a reference to onthisday.com for birthday ideas.']}], 'duration': 1645.066, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ16318317.jpg', 'highlights': ['Covers setting up the project for hover feature, utilizing hover pseudo class for visual feedback, creating custom gifs with unique ids, and front-end developer css techniques with practical examples, challenges, and completion requirements.', 'Replacing image tag with a div and setting the stage for the hover feature The project is prepared by replacing the image tag with a div to set the stage for the hover feature.', "Setting background image through CSS and addressing the issue of image size The background image is set through CSS, and the issue of image size is addressed by using 'background size: cover' to fit the image within the 400x400 pixel container.", "Centering the image within the div using the margin technique The image is centered within the div by utilizing the margin technique with 'margin: 0 auto;' to achieve the original design requirement.", "The hover pseudo class is used to provide visual feedback to users by changing the appearance of elements when hovered over, enhancing user experience and interactivity. The hover pseudo class is demonstrated through practical examples, showing how elements' appearance can be altered when hovered over, enhancing user experience and interactivity on a website.", 'Practical examples, such as changing background color and image on hover, are provided to illustrate the application of the hover pseudo class, preparing for an upcoming project involving the hover class. Practical examples, including changing background color and image on hover, are provided to illustrate the application of the hover pseudo class, preparing for an upcoming project involving the hover class.', 'A challenge is presented to swap the gift paper image with a happy gift image on hover, providing a practical exercise to apply the hover pseudo class and enhance understanding of its implementation.', 'Creating custom GIFs with unique IDs The instructor discusses creating unique IDs for GIFs to control hover effects and background images, demonstrating the importance of unique IDs for individual elements.', 'Addressing hover effects and overriding CSS properties The need to address hover effects and override CSS properties is highlighted, emphasizing the importance of specificity in CSS selectors and the use of unique IDs to prioritize styling.', "Completion of challenges and addition of new sections The successful completion of challenges and addition of new sections, such as 'genius' and 'badass' GIFs, is emphasized, showcasing the practical application of CSS concepts.", 'Comprehensive understanding of CSS concepts The chapter concludes by emphasizing the development of a comprehensive understanding of CSS concepts, including unique IDs, hover effects, and CSS specificity, leading to the successful creation of custom GIFs.', 'Creating a footer with a paragraph and anchor tag, and configuring the anchor tag to open in a new tab.', 'Using CSS to center, style, and add spacing to the footer paragraph, including adjusting width, margins, and color.', "Applying gradients to elements using linear gradients in CSS, with an example of fading from one color to another and a challenge to apply a gradient to the site's background.", 'Encouraging learners to personalize the birthday gift site by thinking of someone with an upcoming birthday and providing a reference to onthisday.com for birthday ideas.']}, {'end': 19303.046, 'segs': [{'end': 18394.477, 'src': 'embed', 'start': 18367.529, 'weight': 6, 'content': [{'end': 18370.87, 'text': 'click on it and then leave all the site settings as they are.', 'start': 18367.529, 'duration': 3.341}, {'end': 18373.931, 'text': 'just scroll to the bottom and click Deploy site.', 'start': 18370.87, 'duration': 3.061}, {'end': 18375.911, 'text': "then you'll see this familiar dashboard again.", 'start': 18373.931, 'duration': 1.98}, {'end': 18382.713, 'text': 'And, as always, the only thing you need to do here is wait until this image here turns into a screenshot of your site,', 'start': 18375.931, 'duration': 6.782}, {'end': 18386.274, 'text': 'which is now thus meaning that your site is available on this URL.', 'start': 18382.713, 'duration': 3.561}, {'end': 18391.656, 'text': "Now, hopefully your birthday site is not about Nick at this point, it's about someone else.", 'start': 18387.094, 'duration': 4.562}, {'end': 18394.477, 'text': 'And I definitely think you should send it off to that person.', 'start': 18391.916, 'duration': 2.561}], 'summary': 'Deploy site, wait for screenshot, site available on url, send to someone else', 'duration': 26.948, 'max_score': 18367.529, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ18367529.jpg'}, {'end': 18565.006, 'src': 'embed', 'start': 18534.172, 'weight': 5, 'content': [{'end': 18535.693, 'text': 'The change I want to do is just very simple.', 'start': 18534.172, 'duration': 1.521}, {'end': 18539.814, 'text': "I'm going to change this name from Nick's birthday into Pierce birthday.", 'start': 18535.753, 'duration': 4.061}, {'end': 18546.956, 'text': 'If I then save this with command plus s or Ctrl plus s, you can see that the file turns yellow means that it has changed.', 'start': 18540.074, 'duration': 6.882}, {'end': 18554.558, 'text': "And also to verify this, let's open up finder alongside a browser window and just drag and drop this index HTML into the browser.", 'start': 18546.976, 'duration': 7.582}, {'end': 18557.88, 'text': 'Because then we can see that it says today is Pierce birthday.', 'start': 18554.678, 'duration': 3.202}, {'end': 18565.006, 'text': 'So by pointing our browser to the local index HTML file, we have verified that yes, the changes have been saved.', 'start': 18558.1, 'duration': 6.906}], 'summary': "Changed name from nick's birthday to pierce's birthday, verified by opening file in browser.", 'duration': 30.834, 'max_score': 18534.172, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ18534172.jpg'}, {'end': 18915.091, 'src': 'embed', 'start': 18883.363, 'weight': 3, 'content': [{'end': 18885.503, 'text': "But for now, there's one thing you need to do.", 'start': 18883.363, 'duration': 2.14}, {'end': 18888.384, 'text': 'And that is to head over to figma.com.', 'start': 18885.803, 'duration': 2.581}, {'end': 18892.964, 'text': "Because figma is the design tool in which you'll get the design for your project.", 'start': 18888.664, 'duration': 4.3}, {'end': 18899.766, 'text': 'It is the most popular design tool these days, it can kind of be seen as the GitHub equivalent for designers.', 'start': 18893.364, 'duration': 6.402}, {'end': 18904.266, 'text': "So I want you to click on this image right here, and then you'll be taken to figma.com.", 'start': 18900.386, 'duration': 3.88}, {'end': 18907.187, 'text': 'There, click on sign up and create an account.', 'start': 18904.746, 'duration': 2.441}, {'end': 18915.091, 'text': "And I also want you to click on this image right here is that I'll take you to a quick 10 minute Figma tutorial, which Bob's role,", 'start': 18907.947, 'duration': 7.144}], 'summary': 'Head to figma.com, the popular design tool, to get project design and sign up for an account.', 'duration': 31.728, 'max_score': 18883.363, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ18883363.jpg'}, {'end': 19303.046, 'src': 'heatmap', 'start': 19108.599, 'weight': 0, 'content': [{'end': 19112.203, 'text': 'Because when you share it in the scrimba community, we will get to know you a little bit better.', 'start': 19108.599, 'duration': 3.604}, {'end': 19116.544, 'text': 'Secondly, if you use a different color palette, your site will be even more unique.', 'start': 19112.623, 'duration': 3.921}, {'end': 19121.185, 'text': "And if you had a Google font, you can really level up the design, because I've not done that.", 'start': 19116.944, 'duration': 4.241}, {'end': 19124.145, 'text': 'And as a result, the font here is a little bit boring.', 'start': 19121.485, 'duration': 2.66}, {'end': 19130.207, 'text': 'Also, if you want to go crazy, find a way to use the hover pseudo class on any of these elements that would be super cool.', 'start': 19124.425, 'duration': 5.782}, {'end': 19134.807, 'text': 'And finally, you could add an entire new sections that would be so cool.', 'start': 19130.447, 'duration': 4.36}, {'end': 19139.308, 'text': "However, do remember that these stretch goals are optional, you don't have to do them.", 'start': 19134.888, 'duration': 4.42}, {'end': 19142.129, 'text': 'But I would encourage you to give it a shot if you have the energy.', 'start': 19139.628, 'duration': 2.501}, {'end': 19146.875, 'text': 'So moving on to get to the actual Figma file, click on this image right here.', 'start': 19142.609, 'duration': 4.266}, {'end': 19154.224, 'text': 'And if you get confused, do remember the Figma tutorial I talked about in the previous scrim, you can click on this link right here to get to it.', 'start': 19147.535, 'duration': 6.689}, {'end': 19159.771, 'text': "Now if you're watching this on YouTube, these links have also been added to the description below the video.", 'start': 19154.564, 'duration': 5.207}, {'end': 19163.493, 'text': 'and they are in the corresponding GitHub repo for this course.', 'start': 19160.231, 'duration': 3.262}, {'end': 19168.717, 'text': 'Finally, you can do this solo project either locally on your computer or here at scrim bar.', 'start': 19163.994, 'duration': 4.723}, {'end': 19176.283, 'text': 'If you do it here at scrim bar, I would recommend you to click on the three dots in the bottom right corner and choose fork to new scrim,', 'start': 19169.077, 'duration': 7.206}, {'end': 19183.468, 'text': "as that'll give you your very own scrim to work on instead of just working on a note on the timeline of this specific lesson.", 'start': 19176.283, 'duration': 7.185}, {'end': 19188.211, 'text': 'So I will leave you with these requirements so that you can look back at them when you need to.', 'start': 19184.028, 'duration': 4.183}, {'end': 19190.452, 'text': 'With that, I wish you the best of luck.', 'start': 19188.491, 'duration': 1.961}, {'end': 19192.694, 'text': 'You got this happy coding.', 'start': 19190.652, 'duration': 2.042}, {'end': 19197.557, 'text': 'Hold on a second.', 'start': 19196.917, 'duration': 0.64}, {'end': 19204.989, 'text': 'Did you just complete a five hour long online course? Wow, that is phenomenally well done.', 'start': 19197.967, 'duration': 7.022}, {'end': 19212.49, 'text': 'You should be proud of yourself, because out of all the people who start this course, this is the amount of people who actually completed,', 'start': 19205.069, 'duration': 7.421}, {'end': 19213.911, 'text': 'and you belong in that group.', 'start': 19212.49, 'duration': 1.421}, {'end': 19215.651, 'text': 'You are not a quitter.', 'start': 19213.971, 'duration': 1.68}, {'end': 19218.712, 'text': 'However, at this point, you might wonder what now?', 'start': 19216.011, 'duration': 2.701}, {'end': 19220.072, 'text': 'What should I learn next?', 'start': 19219.272, 'duration': 0.8}, {'end': 19227.114, 'text': 'And I think you are ready now to get started learning JavaScript, the programming language that powers the web.', 'start': 19220.692, 'duration': 6.422}, {'end': 19229.415, 'text': 'And there are many ways to do that online.', 'start': 19227.474, 'duration': 1.941}, {'end': 19233.896, 'text': 'One of them is the front end developer career path that we have here at scrimba,', 'start': 19229.695, 'duration': 4.201}, {'end': 19237.797, 'text': 'which aim to take students from zero to hireable as front end developers.', 'start': 19233.896, 'duration': 3.901}, {'end': 19244.259, 'text': "And you've actually taken the second module of this career path, because module two consists of the course you've just gone through.", 'start': 19238.257, 'duration': 6.002}, {'end': 19249.421, 'text': 'So you can jump directly to module three, where I will teach you the basics of JavaScript.', 'start': 19244.479, 'duration': 4.942}, {'end': 19253.663, 'text': 'However, there are plenty of other resources out there where you can learn JavaScript.', 'start': 19249.901, 'duration': 3.762}, {'end': 19260.085, 'text': 'So this is just if you like my style and scrim bar in general, regardless of what you do, I think you should celebrate yourself.', 'start': 19253.823, 'duration': 6.262}, {'end': 19266.788, 'text': 'So go ahead and deploy the final project you created that is the hometown homepage and share it with the world.', 'start': 19260.286, 'duration': 6.502}, {'end': 19272.431, 'text': "And if you've already started creating an online portfolio, this project is a great first thing to add to that.", 'start': 19267.129, 'duration': 5.302}, {'end': 19276.512, 'text': 'If you have feedback for me regarding this course, I would love to hear it.', 'start': 19272.811, 'duration': 3.701}, {'end': 19280.914, 'text': 'you can click on this link to get to my Twitter profile and this link to get to my LinkedIn profile.', 'start': 19276.512, 'duration': 4.402}, {'end': 19285.795, 'text': "And if you're watching this on YouTube, I've of course added the links in the description below the video as well.", 'start': 19281.074, 'duration': 4.721}, {'end': 19290.717, 'text': "So with that, there's just one final thing I want to remind you and that is that you are awesome.", 'start': 19286.075, 'duration': 4.642}, {'end': 19298.559, 'text': 'The fact that you have completed this course gives me a lot of confidence in you on your journey towards becoming a professional web developer.', 'start': 19291.037, 'duration': 7.522}, {'end': 19301.043, 'text': 'Good luck with your learning journey going forward.', 'start': 19299.039, 'duration': 2.004}, {'end': 19303.046, 'text': 'And thank you for taking my course.', 'start': 19301.223, 'duration': 1.823}], 'summary': 'Encourages optional stretch goals, provides figma file access, and suggests learning javascript for front end development.', 'duration': 12.009, 'max_score': 19108.599, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ19108599.jpg'}], 'start': 17963.383, 'title': 'Creating and deploying web projects', 'summary': 'Covers creating birthday gift site, using visual studio code for editing, css flexbox, hover properties, and solo project, including deploying to github and netlify, setting up local dev environment, and building a hometown homepage with specific requirements and optional stretch goals.', 'chapters': [{'end': 18403.52, 'start': 17963.383, 'title': 'Deploy birthday gift site to github and netlify', 'summary': 'Covers creating a birthday gift site, making changes, downloading code files, using github desktop to create a repository, adding and publishing the code to github, and deploying the site to netlify, emphasizing the importance of sharing the site with others.', 'duration': 440.137, 'highlights': ['Using GitHub desktop to create a repository, add, and publish the code to GitHub The process of creating a repository, adding, and publishing code using GitHub desktop is emphasized, providing a practical approach to code management.', 'Deploying the site to Netlify and emphasizing the importance of sharing it with others The significance of deploying the site to Netlify and sharing it with others as well as the encouragement to send it to a specific person or share it with the world is highlighted.', 'Making changes to the birthday gift site and downloading the code files The importance of making changes to the birthday gift site and downloading the code files for local access is emphasized, highlighting the practical steps involved in site customization.']}, {'end': 18707.875, 'start': 18406.932, 'title': 'Using visual studio code for github code editing', 'summary': 'Covers setting up visual studio code for local code editing, committing changes to github via github desktop, and automating deployment to netlify, resulting in a powerful local dev environment and an automated deployment process.', 'duration': 300.943, 'highlights': ['Setting up Visual Studio Code for local code editing The tutorial guides on setting up Visual Studio Code for local code editing, essential for making changes and pushing them to GitHub and deploying them to Netlify.', 'Committing changes to GitHub via GitHub Desktop The process of committing changes to GitHub via GitHub Desktop is demonstrated, ensuring that changes are saved and reflected in the GitHub repository.', 'Automating deployment to Netlify The tutorial showcases the automated deployment process to Netlify, ensuring that changes pushed to GitHub are reflected on the World Wide Web, enhancing the development environment and deployment process.']}, {'end': 18882.863, 'start': 18708.356, 'title': 'Css flexbox, hover properties, and solo project', 'summary': 'Covers aligning items in a flexbox, flipping flex direction, using hover pseudo property, creating gradients, grouping selectors, setting up a repository with github desktop, and building a solo project for a hometown homepage.', 'duration': 174.507, 'highlights': ['You learned about aligning items in a flexbox and flipping flex direction between column and row. The align items property in flexbox allows you to align items along the cross axis, and flipping flex direction from row to column enables stacking items on top of each other.', 'You learned to use the hover pseudo property and create gradients. The hover pseudo property enabled the creation of a feature where hovering over an image exposes an underlying gif, and you also learned about creating gradients to slowly fade from blue to pink on the background.', 'You were introduced to grouping selectors and setting up a repository with GitHub desktop. Grouping selectors together with a comma and setting up a repository locally on your computer using GitHub desktop were covered.', 'You were tasked with building a solo project for a hometown homepage. The chapter concludes with the assignment of building a homepage for a hometown, requiring students to share their work in the community and providing an opportunity to showcase their skills.']}, {'end': 19303.046, 'start': 18883.363, 'title': 'Solo project: hometown homepage', 'summary': "Introduces the solo project 'hometown homepage' which involves creating a website with three sections and specific requirements including the use of classes, flexbox, background image property, and a provided color palette, with optional stretch goals, and encourages the use of a figma tutorial for guidance.", 'duration': 419.683, 'highlights': ["The solo project 'Hometown Homepage' involves creating a website with three sections: hero, activities, and a tourist guide card, with specific requirements including the use of classes, flexbox, background image property, and a provided color palette.", "The project provides optional stretch goals such as customizing the site to represent one's own hometown, using a different color palette, adding Google fonts, implementing hover pseudo-class, and adding new sections.", 'The chapter encourages the use of a Figma tutorial for guidance through the Figma interface, and suggests using it for the solo project and provides a link to access the tutorial.', 'The chapter congratulates the completion of the course and suggests moving on to learning JavaScript, either through the front end developer career path at scrimba or other available resources, and encourages celebrating the completion and sharing the final project as part of an online portfolio.', "The chapter provides links to the instructor's social media profiles for feedback and concludes by expressing confidence in the learners' journey towards becoming professional web developers."]}], 'duration': 1339.663, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_iQb1lnAEQ/pics/a_iQb1lnAEQ17963383.jpg', 'highlights': ['Automating deployment to Netlify', 'Deploying the site to Netlify and sharing it with others', 'Using GitHub desktop to create a repository, add, and publish the code to GitHub', 'Setting up Visual Studio Code for local code editing', 'Committing changes to GitHub via GitHub Desktop', 'Making changes to the birthday gift site and downloading the code files', "The solo project 'Hometown Homepage' involves creating a website with three sections: hero, activities, and a tourist guide card, with specific requirements including the use of classes, flexbox, background image property, and a provided color palette", "The project provides optional stretch goals such as customizing the site to represent one's own hometown, using a different color palette, adding Google fonts, implementing hover pseudo-class, and adding new sections", 'The chapter congratulates the completion of the course and suggests moving on to learning JavaScript, either through the front end developer career path at scrimba or other available resources, and encourages celebrating the completion and sharing the final project as part of an online portfolio']}], 'highlights': ['The course involves building and deploying five projects, including the google.com homepage, a space exploration landing page, a digital business card, and a birthday site with virtual birthday presents.', 'The course includes over 75 coding challenges for hands-on learning.', 'The instructor, Per Borgen, is the CEO of Scrimba, a front-end developer, and a coding teacher, with over a million students having gone through his tutorials.', 'Learn HTML & CSS course covers 5 projects with 75+ coding challenges, taught by Per Borgen, emphasizing practical learning and building projects like google.com homepage, space exploration landing page, digital business card, and birthday site with virtual presents.', "The 'display: block' property causes elements to stack up on top of each other and blocks out the available horizontal space.", "The 'display: inline' property causes elements to stack up horizontally.", "The need to convert elements into blocks is emphasized, demonstrated through the syntax 'display: block'.", 'Understanding the importance of adding white space and utilizing margin to control spacing above elements is crucial for web development.', 'Using classes instead of element selectors in CSS is essential to avoid potential bugs and maintain flexibility in styling elements.', 'The chapter emphasizes the importance of maintaining proper spacing, advising against using pure black on pure white for a better visual experience.', 'The box model in web development involves spacing around the element, border spacing on the inside of an element, and the content itself, commonly referred to as the box model.', 'The automatic addition of margin by the browser The browser automatically adds a margin of eight pixels to the body tag, creating a white space around the elements.', 'The three conditions required to center an element using margins in CSS are display block, width, and margin left and margin right set to auto.', 'The design spec specifies the dimensions, padding, border, and border radius for the input field, with the width at 400 pixels, content height at 24 pixels, padding of 10 pixels at the top and bottom, 30 pixels on the left and right, a one-pixel border, and a border radius of 24 pixels.', 'Using dev tools to identify layout issues: The transcript emphasizes the use of built-in dev tools in the browser to identify layout issues, such as buttons stacking on top of each other, by inspecting the box model and understanding the display block property.', "The chapter demonstrates using 'text-align' to center inline elements, removing 'display: block' from buttons, and aligning them using 'text-align: center', resulting in a centered layout for the buttons.", 'The chapter emphasizes the importance of flexbox as a tool for front-end developers and encourages the learner to feel proud of dipping toes into flexbox.', 'Emphasizing the significance of providing descriptive alt text for images to ensure accessibility and inclusivity.', "The changes made to the ad using the span tag and CSS resulted in a 0.02% increase in the click-through rate, contributing to the enhancement of the ad's effectiveness.", 'The chapter covers setting up a repository on GitHub and deploying code via Netlify, teaching about creating a repository for GitHub and utilizing Netlify deployment to take code from a local computer to the World Wide Web.', 'Using Google Fonts to access over 1000 different high quality fonts Google Fonts provides access to over 1000 high-quality fonts for web projects.', 'The chapter explains how to use the span tag to target specific words in HTML for styling, enhancing the visual appeal and functionality of the content.', 'GitHub allows collaboration on code with other developers, enhancing teamwork and version control.', 'The process of creating a repository on GitHub, where all the project files are stored, is detailed, including naming the repository and uploading files.', 'The step-by-step process of importing a project from GitHub to Netlify, adjusting settings, and deploying the site is explained.', 'The chapter congratulates the completion of the course and suggests moving on to learning JavaScript, either through the front end developer career path at Scrimba or other available resources, and encourages celebrating the completion and sharing the final project as part of an online portfolio']}