title
Build a Simple Website with HTML, CSS, JavaScript – Course for Beginners

description
Improve your skills in JavaScript, HTML, and CSS by building a social media dashboard with a dark/light theme. Jess, who runs the popular Coder Coder YouTube channel, will guide you through a beginner Frontend Mentor challenge. ✏️ Course created by @TheCoderCoder Resources: 🔗 Responsive Design for Beginners! https://coder-coder.com/responsive/ 🔗 Source code on GitHub: https://github.com/thecodercoder/fem-dklt-toggle 🔗 Challenge on Frontend Mentor: https://www.frontendmentor.io/challenges/social-media-dashboard-with-theme-switcher-6oY8ozp_H 🔗 Andy Bell: Create a user controlled dark or light mode -- https://piccalil.li/tutorial/create-a-user-controlled-dark-or-light-mode/ ⭐️ Contents ⭐️ Part 1 ⌨️ (0:00:00) Intro ⌨️ (0:01:26) Functional requirements of design ⌨️ (0:11:31) Accessible form controls ⌨️ (0:15:37) Update CSS custom properties with JS ⌨️ (0:23:39) Screen reader-only text Part 2 ⌨️ (0:29:10) Creating GitHub repo ⌨️ (0:34:33) Set up SCSS and JS files ⌨️ (1:09:55) Set up Gulp workflow Part 3 ⌨️ (1:31:24) Studying the design ⌨️ (1:37:10) Building out the top bar ⌨️ (1:51:42) Using accessible markup ⌨️ (2:04:55) Styling top bar ⌨️ (2:23:26) Styling toggle and make accessible Part 4 ⌨️ (3:24:56) What is BEM? Planning out the class names ⌨️ (3:36:46) Adding the markup and the SCSS selectors for the cards ⌨️ (3:47:30) Styles for card ⌨️ (4:16:41) Layout for the card grid with flexbox, then CSS grid ⌨️ (4:33:26) Styling the top bars on the cards ⌨️ (4:49:36) Bottom cards markup and styles Part 5 ⌨️ (5:33:54) Changing the toggle based on comments ⌨️ (5:54:42) Use system preferences to load light or dark theme ⌨️ (6:18:24) Build the toggle logic to manually change light/dark theme ⌨️ (6:43:34) Save toggle settings in local storage 🎉 Thanks to our Champion and Sponsor supporters: 👾 davthecoder 👾 jedi-or-sith 👾 南宮千影 👾 Agustín Kussrow 👾 Nattira Maneerat 👾 Heather Wcislo 👾 Serhiy Kalinets 👾 Justin Hual 👾 Otis Morgan -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news

detail
{'title': 'Build a Simple Website with HTML, CSS, JavaScript – Course for Beginners', 'heatmap': [{'end': 2602.156, 'start': 1555.885, 'weight': 0.779}, {'end': 4673.769, 'start': 3109.342, 'weight': 0.779}, {'end': 5450.698, 'start': 5190.089, 'weight': 0.842}], 'summary': "A beginner's course guides in building a social media dashboard with html, css, and javascript, emphasizing practical website planning and problem-solving. it explores accessibility, dark mode implementation, github setup, front-end development, gulp, design review, dark mode dashboard, positioning labels, customizing ui, css naming, html card markup, web development techniques, instagram card design, layout optimization, styling, light and dark mode implementation, and color scheme toggle, with a focus on practical implementation and techniques.", 'chapters': [{'end': 475.855, 'segs': [{'end': 38.863, 'src': 'embed', 'start': 0.169, 'weight': 0, 'content': [{'end': 6.353, 'text': 'Practice your web development skills by building a social media dashboard with a dark-light theme.', 'start': 0.169, 'duration': 6.184}, {'end': 13.497, 'text': 'Jess, who runs the popular CoderCoder YouTube channel, will guide you through a beginner front-end mentor challenge.', 'start': 6.953, 'duration': 6.544}, {'end': 17.72, 'text': "You'll improve your skills in JavaScript, HTML, and CSS.", 'start': 14.017, 'duration': 3.703}, {'end': 25.005, 'text': 'just demonstrates her practical approach to planning a website project and her resourceful methods for researching solutions.', 'start': 18.34, 'duration': 6.665}, {'end': 31.41, 'text': "So it's time to dive in and unleash your coding potential as you build this dynamic social media dashboard.", 'start': 25.585, 'duration': 5.825}, {'end': 33.179, 'text': 'Hey, everyone.', 'start': 32.639, 'duration': 0.54}, {'end': 38.863, 'text': "In this video course for Free Code Camp, I'll be building a social media dashboard from a design by Front End Mentor.", 'start': 33.54, 'duration': 5.323}], 'summary': 'Build a social media dashboard with dark-light theme, guided by jess from codercoder youtube channel. enhance skills in javascript, html, and css.', 'duration': 38.694, 'max_score': 0.169, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI169.jpg'}, {'end': 87.883, 'src': 'embed', 'start': 58.784, 'weight': 4, 'content': [{'end': 61.085, 'text': 'We all have to look stuff up and use trial and error.', 'start': 58.784, 'duration': 2.301}, {'end': 63.426, 'text': "I'll be sharing my own techniques for doing this,", 'start': 61.705, 'duration': 1.721}, {'end': 68.049, 'text': 'so that you can walk away with some research and problem solving skills that you can use in your own projects.', 'start': 63.426, 'duration': 4.623}, {'end': 70.57, 'text': 'If you like this video and you want more.', 'start': 68.869, 'duration': 1.701}, {'end': 77.812, 'text': 'I am currently working on a course called Responsive Design for Beginners, where I build a custom website from a Figma design using HTML,', 'start': 70.57, 'duration': 7.242}, {'end': 79.153, 'text': 'CSS and JavaScript.', 'start': 77.812, 'duration': 1.341}, {'end': 82.894, 'text': 'You can find out more about the upcoming course linked down in the description.', 'start': 79.693, 'duration': 3.201}, {'end': 84.535, 'text': "All right, let's get into it.", 'start': 83.434, 'duration': 1.101}, {'end': 87.883, 'text': 'All right.', 'start': 87.403, 'duration': 0.48}], 'summary': 'Techniques for research and problem solving skills shared for practical application in projects.', 'duration': 29.099, 'max_score': 58.784, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI58784.jpg'}, {'end': 203.294, 'src': 'embed', 'start': 174.76, 'weight': 2, 'content': [{'end': 177.641, 'text': 'And, you know, obviously this is just a casual like note taking thing.', 'start': 174.76, 'duration': 2.881}, {'end': 179.521, 'text': "Let's kind of zoom in a little bit more here.", 'start': 177.901, 'duration': 1.62}, {'end': 181.662, 'text': 'OK, so functional requirements and notes.', 'start': 180.201, 'duration': 1.461}, {'end': 186.403, 'text': 'So the dashboard has a light and dark mode toggle.', 'start': 182.162, 'duration': 4.241}, {'end': 194.788, 'text': "So we're going to have to do a little bit of research in terms of what is the correct markup to use in HTML.", 'start': 187.703, 'duration': 7.085}, {'end': 203.294, 'text': 'So what HTML markup to use, as well as how to switch between light and dark mode.', 'start': 195.488, 'duration': 7.806}], 'summary': 'Dashboard requires light and dark mode toggle, needs html markup and mode switching research.', 'duration': 28.534, 'max_score': 174.76, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI174760.jpg'}, {'end': 276.518, 'src': 'embed', 'start': 247.29, 'weight': 3, 'content': [{'end': 250.414, 'text': "So here's the brief challenges about this landing page.", 'start': 247.29, 'duration': 3.124}, {'end': 253.377, 'text': 'Get as close to the design as possible, which is definitely important.', 'start': 250.434, 'duration': 2.943}, {'end': 256.261, 'text': 'The only JavaScript required is for the color theme toggle.', 'start': 254.118, 'duration': 2.143}, {'end': 260.285, 'text': "Users should be able to view the optimal layout depending on their device's screen size.", 'start': 256.821, 'duration': 3.464}, {'end': 263.149, 'text': 'So, you know, desktop versus mobile versus tablet.', 'start': 260.346, 'duration': 2.803}, {'end': 267.254, 'text': 'And then hover states, and then toggle the color theme to their preference.', 'start': 263.89, 'duration': 3.364}, {'end': 268.993, 'text': "So that's pretty straightforward.", 'start': 267.932, 'duration': 1.061}, {'end': 276.518, 'text': 'One thing I did was I actually tweeted about building this project, thinking about doing this dark light mode switcher challenge for a mentor.', 'start': 269.453, 'duration': 7.065}], 'summary': 'Challenges include replicating design, implementing javascript, optimizing layout for different devices, and creating a color theme toggle. also, considering a dark/light mode switcher challenge.', 'duration': 29.228, 'max_score': 247.29, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI247290.jpg'}], 'start': 0.169, 'title': 'Building a social media dashboard and frontend mentor challenge', 'summary': 'Guides beginners in building a social media dashboard using html, css, and javascript, emphasizing practical website planning and problem-solving skills. it also discusses analyzing and preparing for a frontend mentor challenge for a social media dashboard, including functional requirements, challenges, and suggestions from experienced developers, as well as the importance of accessibility considerations in web development.', 'chapters': [{'end': 93.206, 'start': 0.169, 'title': 'Building social media dashboard', 'summary': 'Guides beginners through building a social media dashboard using html, css, and javascript, including a dark-light toggle, following a design by front end mentor and emphasizes the practical approach to website planning and problem-solving skills.', 'duration': 93.037, 'highlights': ['Jess, from the CoderCoder YouTube channel, mentors beginners in building a social media dashboard using HTML, CSS, and JavaScript, including a dark-light toggle.', 'The course focuses on practical methods for planning a website project and resourceful techniques for researching solutions.', 'Emphasizes the importance of research and problem-solving skills in real-world projects, highlighting the need for looking up information and using trial and error.']}, {'end': 475.855, 'start': 93.206, 'title': 'Frontend mentor challenge: social media dashboard', 'summary': 'Discusses the process of analyzing and preparing for a frontend mentor challenge for a social media dashboard, including the functional requirements, challenges, and suggestions from experienced developers, as well as the importance of accessibility considerations in web development.', 'duration': 382.649, 'highlights': ['The dashboard has a light and dark mode toggle, requiring research on HTML markup, CSS variables, and switching between light and dark mode. The project entails implementing a light and dark mode toggle, necessitating research on HTML markup, CSS variables, and the process of switching between light and dark mode.', 'The importance of adhering to design details, minimal JavaScript usage, responsive layout for different devices, hover states, and color theme toggling for the project. Adhering to design details, minimal JavaScript usage, responsive layout for different devices, hover states, and color theme toggling are emphasized for the project.', 'The significance of considering HTML semantics, including proper use of headings and accessibility for screen readers in the development process. The development process should consider proper HTML semantics, such as the correct use of headings, and accessibility for screen readers to improve web accessibility.']}], 'duration': 475.686, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI169.jpg', 'highlights': ['Jess, from the CoderCoder YouTube channel, mentors beginners in building a social media dashboard using HTML, CSS, and JavaScript, including a dark-light toggle.', 'The course focuses on practical methods for planning a website project and resourceful techniques for researching solutions.', 'The dashboard has a light and dark mode toggle, requiring research on HTML markup, CSS variables, and switching between light and dark mode.', 'The importance of adhering to design details, minimal JavaScript usage, responsive layout for different devices, hover states, and color theme toggling for the project.', 'Emphasizes the importance of research and problem-solving skills in real-world projects, highlighting the need for looking up information and using trial and error.']}, {'end': 1740.202, 'segs': [{'end': 500.722, 'src': 'embed', 'start': 476.408, 'weight': 1, 'content': [{'end': 482.992, 'text': 'You know like when you look at a word and you look at it for so long that it starts to look weird? That may or may not be spelled correctly.', 'start': 476.408, 'duration': 6.584}, {'end': 485.213, 'text': 'Okay, so accessibility, make sure headings.', 'start': 483.012, 'duration': 2.201}, {'end': 489.135, 'text': 'Use correct heading tags.', 'start': 486.173, 'duration': 2.962}, {'end': 497.099, 'text': 'And then screen reader only text for, you know, card titles.', 'start': 490.235, 'duration': 6.864}, {'end': 500.722, 'text': 'Username So just things to keep in mind there.', 'start': 497.799, 'duration': 2.923}], 'summary': 'Emphasize accessibility: use correct heading tags and screen reader-only text for card titles.', 'duration': 24.314, 'max_score': 476.408, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI476408.jpg'}, {'end': 620.243, 'src': 'embed', 'start': 591.721, 'weight': 0, 'content': [{'end': 597.864, 'text': 'so this is saying that the toggle actually needs to have three states light, dark and system preference,', 'start': 591.721, 'duration': 6.143}, {'end': 600.745, 'text': 'which is what the user sets on their own computer.', 'start': 597.864, 'duration': 2.881}, {'end': 603.266, 'text': "and then there's a preferred color scheme media query.", 'start': 600.745, 'duration': 2.521}, {'end': 605.287, 'text': 'so this is mentioned again.', 'start': 603.266, 'duration': 2.021}, {'end': 609.969, 'text': "okay, so what i'm getting from this is that the toggle actually,", 'start': 605.287, 'duration': 4.682}, {'end': 620.243, 'text': 'so switching between light dark modes via javascript and then three option toggle light, dark and then system preference.', 'start': 609.969, 'duration': 10.274}], 'summary': "Toggle needs 3 states: light, dark, and system preference for user's computer. switching between light and dark modes via javascript with a 3-option toggle.", 'duration': 28.522, 'max_score': 591.721, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI591721.jpg'}, {'end': 710.619, 'src': 'embed', 'start': 674.956, 'weight': 3, 'content': [{'end': 676.357, 'text': 'So you can see that here.', 'start': 674.956, 'duration': 1.401}, {'end': 683.82, 'text': "And she made some notes here using an accessible component from this person, Scott O'Hara styled form controls.", 'start': 677.697, 'duration': 6.123}, {'end': 684.9, 'text': "So let's check that out.", 'start': 683.9, 'duration': 1}, {'end': 691.966, 'text': 'Okay, accessibility of styled form controls.', 'start': 689.964, 'duration': 2.002}, {'end': 693.707, 'text': 'So I know a little bit about this.', 'start': 692.046, 'duration': 1.661}, {'end': 702.433, 'text': 'Basically, you know, your form controls are like the checkbox, the radio buttons, form buttons, form text boxes, things like that.', 'start': 694.608, 'duration': 7.825}, {'end': 710.619, 'text': "And what people sometimes do when they're styling them to make them look prettier is to, instead of using the actual radio button or something,", 'start': 702.734, 'duration': 7.885}], 'summary': 'Discussion on accessibility of styled form controls and its components.', 'duration': 35.663, 'max_score': 674.956, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI674956.jpg'}, {'end': 963.625, 'src': 'embed', 'start': 931.868, 'weight': 2, 'content': [{'end': 936.45, 'text': "I think I have enough references that I can work from this later on when we're actually building.", 'start': 931.868, 'duration': 4.582}, {'end': 942.574, 'text': "So let's move on to look at using JavaScript to update CSS variables.", 'start': 937.011, 'duration': 5.563}, {'end': 950.918, 'text': "So I use DuckDuckGo update CSS variables with JavaScript and let's see what happens.", 'start': 943.034, 'duration': 7.884}, {'end': 953.061, 'text': 'A lot of times.', 'start': 952.421, 'duration': 0.64}, {'end': 955.342, 'text': 'I will just click on the first result here,', 'start': 953.061, 'duration': 2.281}, {'end': 963.625, 'text': 'but I also try to kind of filter the results based on if I know a website is considered a good source of information.', 'start': 955.342, 'duration': 8.283}], 'summary': 'Using javascript to update css variables, searching with duckduckgo for references.', 'duration': 31.757, 'max_score': 931.868, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI931868.jpg'}], 'start': 476.408, 'title': 'Enhancing accessibility and dark mode implementation', 'summary': 'Emphasizes the importance of accessibility in web development, focusing on correct heading tags and screen reader-only text, and explores the need for a three-option dark mode toggle. additionally, it discusses finding accessible html markup for the toggle, updating css variables with javascript, and researching light and dark modes with css variables to enhance user experience and accessibility.', 'chapters': [{'end': 650.863, 'start': 476.408, 'title': 'Accessibility and dark mode toggle', 'summary': 'Discusses the importance of accessibility in web development, emphasizing the use of correct heading tags and screen reader-only text, and explores the need for a three-option toggle for dark mode to accommodate user system preferences, in contrast to the traditional two-state toggle.', 'duration': 174.455, 'highlights': ['The importance of correct heading tags and screen reader-only text for accessibility is emphasized in web development. Using correct heading tags and screen reader-only text ensures accessibility for users with disabilities.', 'The need for a three-option toggle for dark mode is highlighted to accommodate user system preferences. A three-option toggle for dark mode (light, dark, and system preference) is suggested to align with user preferences and the prefers color scheme media query.', "The traditional two-state toggle for dark mode is deemed insufficient and may break the user's system preference for light or dark mode. The traditional two-state toggle is criticized for potentially breaking the user's system preference for light or dark mode, emphasizing the need for a three-option toggle."]}, {'end': 907.767, 'start': 651.023, 'title': 'Accessible html markup for toggle', 'summary': 'Discusses the need to find accessible html markup for a toggle, explores the potential accessibility issues with styled form controls, and identifies a suitable example of a three-option radio button toggle on codepen.', 'duration': 256.744, 'highlights': ['Identifying potential accessibility issues with styled form controls The chapter highlights the potential accessibility issues with styling form controls using div and CSS instead of traditional HTML form elements, which are not navigable by screen readers.', 'Exploring accessible HTML markup for a three-option radio button toggle The chapter explores the need for accessible HTML markup for a three-option radio button toggle and identifies a suitable example on CodePen for reference, which features multiple positions and uses radio button inputs.', "Discovering Grace Snow's challenge on accessible toggle in HTML, CSS and JS The chapter mentions Grace Snow's challenge on creating an accessible toggle in HTML, CSS, and JS, providing valuable insights and resources for developing accessible components."]}, {'end': 1073.909, 'start': 907.867, 'title': 'Javascript css variables update', 'summary': 'Discusses the process of updating css variables with javascript, utilizing code examples and comparing information from different sources.', 'duration': 166.042, 'highlights': ['The chapter discusses the process of updating CSS variables with JavaScript, utilizing code examples and comparing information from different sources.', 'The author references using DuckDuckGo to search for information and filter results based on reliable sources.', 'The process of updating CSS variables with JavaScript involves using the setProperty method on the document element, as demonstrated in the code examples.']}, {'end': 1740.202, 'start': 1075.319, 'title': 'Researching light and dark modes with css variables', 'summary': "Covers the research on light and dark modes with css variables, including understanding prefers color scheme media query and screen reader only text, to enhance user experience and accessibility, aiming to implement a system that automatically switches between light and dark modes based on the user's system preference.", 'duration': 664.883, 'highlights': ["Implementing a system that automatically switches between light and dark modes based on the user's system preference Aiming to use prefers color scheme media query to detect if the user has requested a light or dark color theme, enhancing user experience and accessibility.", 'Understanding the use of screen reader only text to provide more context to links for improved accessibility Researching and learning about adding additional text only readable by screen readers to enhance accessibility and provide more context to links.', 'Utilizing field set and legend structure for radio buttons to improve accessibility Exploring the use of field set and legend structure to provide a descriptive title for the set of radio buttons, enhancing accessibility for screen reader users.']}], 'duration': 1263.794, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI476408.jpg', 'highlights': ['The need for a three-option toggle for dark mode is highlighted to accommodate user system preferences. A three-option toggle for dark mode (light, dark, and system preference) is suggested to align with user preferences and the prefers color scheme media query.', 'The importance of correct heading tags and screen reader-only text for accessibility is emphasized in web development. Using correct heading tags and screen reader-only text ensures accessibility for users with disabilities.', 'The chapter discusses the process of updating CSS variables with JavaScript, utilizing code examples and comparing information from different sources.', 'Identifying potential accessibility issues with styled form controls The chapter highlights the potential accessibility issues with styling form controls using div and CSS instead of traditional HTML form elements, which are not navigable by screen readers.']}, {'end': 2669.643, 'segs': [{'end': 1821.582, 'src': 'embed', 'start': 1778.653, 'weight': 0, 'content': [{'end': 1783.734, 'text': "the other reason to create the repo at the beginning, of course, is when we're using source control like git.", 'start': 1778.653, 'duration': 5.081}, {'end': 1791.056, 'text': "it's just a good idea to make commits to your repository as you're developing, so to kind of save your coding as you go along.", 'start': 1783.734, 'duration': 7.322}, {'end': 1794.597, 'text': "so to create our repository i'm going to use github desktop app.", 'start': 1791.056, 'duration': 3.541}, {'end': 1800.198, 'text': "I know a lot of devs like using the command line for Git because it's kind of faster and easier,", 'start': 1795.217, 'duration': 4.981}, {'end': 1804.939, 'text': 'but I personally like the desktop app and just the graphical user interface that you get with that.', 'start': 1800.198, 'duration': 4.741}, {'end': 1813.96, 'text': "So in GitHub desktop, we're going to go to file and new repository, and we'll give it a name of FEM for front of mentor.", 'start': 1805.639, 'duration': 8.321}, {'end': 1821.582, 'text': 'And this is the social media dashboard, dark light toggle.', 'start': 1814.38, 'duration': 7.202}], 'summary': 'Creating a repository in github desktop for fem with a social media dashboard, dark light toggle.', 'duration': 42.929, 'max_score': 1778.653, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI1778653.jpg'}, {'end': 1873.264, 'src': 'embed', 'start': 1846.39, 'weight': 1, 'content': [{'end': 1850.653, 'text': "And right now there's nothing here except for this Git attributes file that Git just kind of generates.", 'start': 1846.39, 'duration': 4.263}, {'end': 1855.457, 'text': "So now let's start moving the files that we need into our project folder.", 'start': 1851.274, 'duration': 4.183}, {'end': 1861.461, 'text': 'So if you remember last time in the previous video, we created the notes Markdown file.', 'start': 1856.117, 'duration': 5.344}, {'end': 1867.414, 'text': "So I'm just going to take this and I'm going to copy it into our folder here.", 'start': 1861.501, 'duration': 5.913}, {'end': 1873.264, 'text': 'So now we can see that the notes that we created last time is here for our reference.', 'start': 1868.696, 'duration': 4.568}], 'summary': 'Moving the notes markdown file into the project folder.', 'duration': 26.874, 'max_score': 1846.39, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI1846390.jpg'}, {'end': 2042.268, 'src': 'embed', 'start': 2015.216, 'weight': 3, 'content': [{'end': 2023.2, 'text': "Okay, so now that we have our starter files, I'm going to do a couple of things to just configure things.", 'start': 2015.216, 'duration': 7.984}, {'end': 2025.44, 'text': 'So in this file, this is a gitignore file.', 'start': 2023.24, 'duration': 2.2}, {'end': 2027.301, 'text': 'This is from front of mentor.', 'start': 2026.121, 'duration': 1.18}, {'end': 2036.325, 'text': "So this will tell git to ignore any files or changes to files that you don't wanna commit to your repo.", 'start': 2027.341, 'duration': 8.984}, {'end': 2042.268, 'text': "So this is so that you don't commit the actual design files to GitHub, cause you know, it's for the paid plan.", 'start': 2036.345, 'duration': 5.923}], 'summary': 'Configuring gitignore file to exclude design files from github repo.', 'duration': 27.052, 'max_score': 2015.216, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI2015216.jpg'}, {'end': 2120.249, 'src': 'embed', 'start': 2090.467, 'weight': 4, 'content': [{'end': 2093.129, 'text': 'So in our root, we have the index.html file.', 'start': 2090.467, 'duration': 2.662}, {'end': 2096.411, 'text': "And usually what I do is I'm going to create a folder called app.", 'start': 2093.529, 'duration': 2.882}, {'end': 2101.075, 'text': "And this is where I'm going to store my working JavaScript and SAS files.", 'start': 2096.952, 'duration': 4.123}, {'end': 2106.699, 'text': "So in the app folder, I'm going to create another subfolder called SCSS for the SAS.", 'start': 2101.875, 'duration': 4.824}, {'end': 2111.782, 'text': "And I'm also going to create another folder called JS.", 'start': 2107.319, 'duration': 4.463}, {'end': 2115.705, 'text': "And I think you need to drag that so it's in the app folder.", 'start': 2112.643, 'duration': 3.062}, {'end': 2120.249, 'text': 'So here we have our JS and SCSS folders.', 'start': 2117.446, 'duration': 2.803}], 'summary': 'Creating a folder structure with index.html, app, scss, and js folders.', 'duration': 29.782, 'max_score': 2090.467, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI2090467.jpg'}, {'end': 2278.885, 'src': 'embed', 'start': 2251.341, 'weight': 5, 'content': [{'end': 2257.267, 'text': "So the way SAS works with when you're working with partials, meaning when we split up the styles into these multiple files,", 'start': 2251.341, 'duration': 5.926}, {'end': 2261.911, 'text': 'is we can load them through our main style.scss file.', 'start': 2257.267, 'duration': 4.644}, {'end': 2268.156, 'text': "So the way we're doing that here is we're using some, I guess, SAS functions, for lack of a better word.", 'start': 2262.311, 'duration': 5.845}, {'end': 2278.885, 'text': "And what we want to do on our main sass file, style.scss, is we want to load all the styles that we're going to create from components globals?", 'start': 2268.777, 'duration': 10.108}], 'summary': 'Sas allows loading partial styles into main style.scss file using functions.', 'duration': 27.544, 'max_score': 2251.341, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI2251341.jpg'}, {'end': 2416.527, 'src': 'embed', 'start': 2391.656, 'weight': 6, 'content': [{'end': 2396.979, 'text': "So what happens is when you're usually writing a media query, you write something like this.", 'start': 2391.656, 'duration': 5.323}, {'end': 2402.362, 'text': 'So media min dash width, and then something like 50 ems.', 'start': 2396.999, 'duration': 5.363}, {'end': 2404.883, 'text': "And then you're going to write your styles in here.", 'start': 2403.002, 'duration': 1.881}, {'end': 2413.324, 'text': "what we're going to do is we're going to use a mixin so that we can reuse the code every time we need to write a media query.", 'start': 2406.719, 'duration': 6.605}, {'end': 2416.527, 'text': "So we don't have to type all this out, you know, min width of 50 ems.", 'start': 2413.344, 'duration': 3.183}], 'summary': 'Using a mixin to streamline media query writing, saving time and ensuring consistency.', 'duration': 24.871, 'max_score': 2391.656, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI2391656.jpg'}, {'end': 2551, 'src': 'embed', 'start': 2525.655, 'weight': 7, 'content': [{'end': 2536.728, 'text': 'So, if we wanted to use this mixin in our code elsewhere, we would type in, include breakpoint and then parentheses,', 'start': 2525.655, 'duration': 11.073}, {'end': 2540.432, 'text': 'and then we would choose the size that we wanted to set this media query at.', 'start': 2536.728, 'duration': 3.704}, {'end': 2544.036, 'text': "So let's say we wanted to do large and up.", 'start': 2540.512, 'duration': 3.524}, {'end': 2551, 'text': "so we'll say include breakpoint large and then you know whatever rule you want to add in here.", 'start': 2545.197, 'duration': 5.803}], 'summary': "Using the 'breakpoint' mixin, we can easily set media queries for different screen sizes in our code.", 'duration': 25.345, 'max_score': 2525.655, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI2525655.jpg'}, {'end': 2655.991, 'src': 'embed', 'start': 2630.959, 'weight': 8, 'content': [{'end': 2636.461, 'text': "So if we wanted to write some styles for medium width and small, but we don't want to do it for large.", 'start': 2630.959, 'duration': 5.502}, {'end': 2639.822, 'text': 'Usually I try to just stick with the min width media query.', 'start': 2637.261, 'duration': 2.561}, {'end': 2649.106, 'text': 'So this breakpoint up mixin, because usually the desktop styles have additional rules that, you know, mobile and tablet may not have,', 'start': 2639.862, 'duration': 9.244}, {'end': 2652.308, 'text': "because The mobile design's usually a bit simpler than the desktop design.", 'start': 2649.106, 'duration': 3.202}, {'end': 2655.991, 'text': "For example, in mobile designs all the content's often stacked to one column.", 'start': 2652.568, 'duration': 3.423}], 'summary': 'Use min-width media query for medium and small styles. desktop styles may have additional rules compared to mobile and tablet. mobile design is usually simpler, with content stacked in one column.', 'duration': 25.032, 'max_score': 2630.959, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI2630959.jpg'}], 'start': 1743.809, 'title': 'Setting up github repository, project files, and using mixins for reusable media queries', 'summary': 'Covers creating a github repository, moving project files, setting up project files and folders, configuring gitignore, using scss syntax, organizing styles, and using mixins for reusable media queries, facilitating source control and development workflow with examples of breakpoints for different sizes.', 'chapters': [{'end': 2013.583, 'start': 1743.809, 'title': 'Setting up github repository and project files', 'summary': 'Covers the process of creating a github repository and moving necessary files into the project folder, emphasizing the importance of doing so at the beginning to facilitate source control and development workflow.', 'duration': 269.774, 'highlights': ['Creating a GitHub repository at the beginning facilitates source control and development workflow. Emphasizes the importance of creating a GitHub repo at the beginning to facilitate source control and make commits as coding progresses.', 'Moving necessary files into the project folder simplifies the development process. Explains the process of moving files, including notes and starter files, into the project folder for reference and development.', 'Importance of using GitHub desktop app for repository creation. Mentions preference for using GitHub desktop app over command line for creating repositories due to its graphical user interface.']}, {'end': 2390.796, 'start': 2015.216, 'title': 'Setting up project files and folders', 'summary': 'Covers setting up project files and folders, configuring gitignore to ignore certain files, creating folders for javascript and sas files, using scss syntax for sas, organizing styles into different folders and sas files, and loading styles through the main style.scss file.', 'duration': 375.58, 'highlights': ['Configuring gitignore to ignore certain files like design files and node modules folder to avoid cluttering the GitHub repo. design files, node modules folder', 'Creating folders for JavaScript and SAS files and organizing them into subfolders. JavaScript and SAS files', 'Utilizing SCSS syntax for SAS to maintain organization and facilitate easier style writing. SCSS syntax for SAS']}, {'end': 2669.643, 'start': 2391.656, 'title': 'Using mixins for reusable media queries', 'summary': 'Explains how to use mixins to create reusable media queries, allowing for easy code maintenance and updates, and provides examples of including breakpoints for different sizes.', 'duration': 277.987, 'highlights': ['Using a mixin for media queries allows for easy code reuse and maintenance The use of mixins for media queries allows for easy code reuse and maintenance, avoiding the need to type out repetitive code and enabling quick updates by changing the code in one place.', "Example of including breakpoints for different sizes using mixins The chapter provides an example of including breakpoints for different sizes using mixins, demonstrating how to use the 'include breakpoint' command and specifying the desired size for the media query, such as 'large', and adding the necessary styles within the mixin.", "Explanation of using 'breakpoint down' to apply styles for smaller sizes The 'breakpoint down' mixin is explained as a method to apply styles for smaller sizes, such as mobile and tablet, while avoiding styles for larger sizes, simplifying the styling process for different device types."]}], 'duration': 925.834, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI1743809.jpg', 'highlights': ['Creating a GitHub repository at the beginning facilitates source control and development workflow. Emphasizes the importance of creating a GitHub repo at the beginning to facilitate source control and make commits as coding progresses.', 'Moving necessary files into the project folder simplifies the development process. Explains the process of moving files, including notes and starter files, into the project folder for reference and development.', 'Importance of using GitHub desktop app for repository creation. Mentions preference for using GitHub desktop app over command line for creating repositories due to its graphical user interface.', 'Configuring gitignore to ignore certain files like design files and node modules folder to avoid cluttering the GitHub repo. design files, node modules folder', 'Creating folders for JavaScript and SAS files and organizing them into subfolders. JavaScript and SAS files', 'Utilizing SCSS syntax for SAS to maintain organization and facilitate easier style writing. SCSS syntax for SAS', 'Using a mixin for media queries allows for easy code reuse and maintenance The use of mixins for media queries allows for easy code reuse and maintenance, avoiding the need to type out repetitive code and enabling quick updates by changing the code in one place.', "Example of including breakpoints for different sizes using mixins The chapter provides an example of including breakpoints for different sizes using mixins, demonstrating how to use the 'include breakpoint' command and specifying the desired size for the media query, such as 'large', and adding the necessary styles within the mixin.", "Explanation of using 'breakpoint down' to apply styles for smaller sizes The 'breakpoint down' mixin is explained as a method to apply styles for smaller sizes, such as mobile and tablet, while avoiding styles for larger sizes, simplifying the styling process for different device types."]}, {'end': 4817.669, 'segs': [{'end': 2757.901, 'src': 'embed', 'start': 2722.879, 'weight': 2, 'content': [{'end': 2725.039, 'text': "And this is the only thing that's going to be in this file.", 'start': 2722.879, 'duration': 2.16}, {'end': 2728.761, 'text': "It's a function that will convert pixels to rems.", 'start': 2725.199, 'duration': 3.562}, {'end': 2731.582, 'text': 'You can see here, I included the link here.', 'start': 2729.981, 'duration': 1.601}, {'end': 2733.444, 'text': "It's from a CSS Tricks article.", 'start': 2732.043, 'duration': 1.401}, {'end': 2743.251, 'text': "So to use this function, let's say in another SAS file, we want to set the font size of an H1 to maybe like 30 pixels.", 'start': 2734.364, 'duration': 8.887}, {'end': 2750.396, 'text': "So in the past, if you've seen my other videos, I would pull out my calculator and divide 30 by 16 to get to rems.", 'start': 2744.412, 'duration': 5.984}, {'end': 2757.901, 'text': 'And this is because 16 pixels equals one rems by default on most browsers, unless you change that in your settings.', 'start': 2751.457, 'duration': 6.444}], 'summary': 'Function converts pixels to rems using 16 pixels as 1 rem.', 'duration': 35.022, 'max_score': 2722.879, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI2722879.jpg'}, {'end': 2940.813, 'src': 'embed', 'start': 2906.372, 'weight': 9, 'content': [{'end': 2912.356, 'text': 'So root and usually we call it dash dash.', 'start': 2906.372, 'duration': 5.984}, {'end': 2916.178, 'text': "And I think I'm just gonna, yeah, say the colors.", 'start': 2913.256, 'duration': 2.922}, {'end': 2918.84, 'text': 'Lime green.', 'start': 2917.799, 'duration': 1.041}, {'end': 2920.961, 'text': "Maybe we'll say lime green, one word.", 'start': 2918.86, 'duration': 2.101}, {'end': 2926.365, 'text': "I think that's right.", 'start': 2925.725, 'duration': 0.64}, {'end': 2927.286, 'text': 'Is that right? Okay.', 'start': 2926.525, 'duration': 0.761}, {'end': 2929.687, 'text': "Let's, uh, let's check here.", 'start': 2927.666, 'duration': 2.021}, {'end': 2931.048, 'text': 'CSS variables.', 'start': 2929.847, 'duration': 1.201}, {'end': 2935.07, 'text': "I haven't worked with these a ton.", 'start': 2931.908, 'duration': 3.162}, {'end': 2936.25, 'text': 'So yeah.', 'start': 2935.21, 'duration': 1.04}, {'end': 2937.571, 'text': 'Okay I was right.', 'start': 2936.45, 'duration': 1.121}, {'end': 2940.813, 'text': 'So dash dash name, the color, and then the value.', 'start': 2937.591, 'duration': 3.222}], 'summary': 'Discussion about using css variables, specifically dash dash for defining colors.', 'duration': 34.441, 'max_score': 2906.372, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI2906372.jpg'}, {'end': 3001.108, 'src': 'embed', 'start': 2967.411, 'weight': 3, 'content': [{'end': 2972.474, 'text': "It's a better way of changing the lightness or darkness of a color if you are using HSL.", 'start': 2967.411, 'duration': 5.063}, {'end': 2978.356, 'text': 'So I think it seems like people are just using HSL more nowadays than hex.', 'start': 2974.695, 'duration': 3.661}, {'end': 2981.178, 'text': 'So, you know, just trying to stay on top of stuff.', 'start': 2978.396, 'duration': 2.782}, {'end': 2983.899, 'text': "Okay, so we'll do Facebook.", 'start': 2981.938, 'duration': 1.961}, {'end': 2989.2, 'text': 'Instagram Oh, sorry.', 'start': 2986.798, 'duration': 2.402}, {'end': 2990, 'text': "Twitter's first.", 'start': 2989.24, 'duration': 0.76}, {'end': 2997.666, 'text': 'Instagram This is a linear gradient.', 'start': 2994.844, 'duration': 2.822}, {'end': 3001.108, 'text': 'So Instagram start.', 'start': 2998.326, 'duration': 2.782}], 'summary': 'Hsl is being used more than hex for color adjustments, especially on social media platforms like facebook, instagram, and twitter.', 'duration': 33.697, 'max_score': 2967.411, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI2967411.jpg'}, {'end': 4673.769, 'src': 'heatmap', 'start': 3109.342, 'weight': 0.779, 'content': [{'end': 3114.586, 'text': 'We would put the variables like here within this prefers color scheme media query.', 'start': 3109.342, 'duration': 5.244}, {'end': 3120.63, 'text': 'I think I want to find one for light dark mode toggle.', 'start': 3116.107, 'duration': 4.523}, {'end': 3128.936, 'text': "I think what I can do is what I'm guessing is going to happen is for the we'll make the light theme I guess the default.", 'start': 3121.671, 'duration': 7.265}, {'end': 3132.22, 'text': 'And then for the dark theme.', 'start': 3130.219, 'duration': 2.001}, {'end': 3139.524, 'text': 'if you set it to dark mode, then we would still need CSS variables for each color, but we would, you know,', 'start': 3132.22, 'duration': 7.304}, {'end': 3142.846, 'text': "set the background to this color when it's in dark mode.", 'start': 3139.524, 'duration': 3.322}, {'end': 3154.612, 'text': 'So I think we can still set all the colors in here and then we will separate them out with the dark and the light modes later on with other styles and using that prefers color scheme media query.', 'start': 3142.866, 'duration': 11.746}, {'end': 3156.273, 'text': "So we'll just go ahead and do this.", 'start': 3154.992, 'duration': 1.281}, {'end': 3163.588, 'text': "And in terms of the naming, naming is kind of the hardest part I've found.", 'start': 3159.486, 'duration': 4.102}, {'end': 3171.553, 'text': "Maybe not the hardest, but naming takes a lot more time than you might think to name things in a way that makes sense and that you'll remember later,", 'start': 3164.269, 'duration': 7.284}, {'end': 3176.776, 'text': "or that other developers will be able to understand if they take on a project that you know you're not working on anymore.", 'start': 3171.553, 'duration': 5.223}, {'end': 3189.36, 'text': 'So, because these are going to be the dark mode, I might just say dark dash and then these are actually named so very dark blues for the background,', 'start': 3177.156, 'duration': 12.204}, {'end': 3194.202, 'text': 'top background pattern card, background text and then other text.', 'start': 3189.36, 'duration': 4.842}, {'end': 3200.124, 'text': 'And then we have the same names with the light values on the second part.', 'start': 3195.222, 'duration': 4.902}, {'end': 3203.906, 'text': "So I'm going to say dark and then sort of use the same names here.", 'start': 3200.184, 'duration': 3.722}, {'end': 3204.946, 'text': 'So dark background.', 'start': 3204.106, 'duration': 0.84}, {'end': 3211.124, 'text': 'And then dark, uh, top background.', 'start': 3206.621, 'duration': 4.503}, {'end': 3213.305, 'text': 'Yeah, I think this should work.', 'start': 3211.144, 'duration': 2.161}, {'end': 3215.906, 'text': 'And dark, um, card.', 'start': 3213.645, 'duration': 2.261}, {'end': 3217.547, 'text': 'Or maybe just card.', 'start': 3215.926, 'duration': 1.621}, {'end': 3220.449, 'text': "Since there's only one card color given here.", 'start': 3218.568, 'duration': 1.881}, {'end': 3224.277, 'text': 'And then dark text one.', 'start': 3220.816, 'duration': 3.461}, {'end': 3230.66, 'text': "And then I'll say dark text two will be this.", 'start': 3225.498, 'duration': 5.162}, {'end': 3235.642, 'text': 'So we can always rename things later on if a different kind of name would make more sense.', 'start': 3231.98, 'duration': 3.662}, {'end': 3237.603, 'text': 'So we did the dark colors now.', 'start': 3236.042, 'duration': 1.561}, {'end': 3244.585, 'text': "So I think what I can do is control D to just duplicate that and we'll rename things for the light mode.", 'start': 3237.863, 'duration': 6.722}, {'end': 3248.147, 'text': "Oops Oh, I include the toggle and I didn't want that.", 'start': 3244.866, 'duration': 3.281}, {'end': 3251.212, 'text': 'Just select the lines you need.', 'start': 3250.231, 'duration': 0.981}, {'end': 3254.457, 'text': 'Control D will duplicate those lines.', 'start': 3251.553, 'duration': 2.904}, {'end': 3263.689, 'text': 'Light And then we will copy these.', 'start': 3256.199, 'duration': 7.49}, {'end': 3265.031, 'text': 'So the background light.', 'start': 3263.869, 'duration': 1.162}, {'end': 3274.849, 'text': 'top background, card background, and then text one and text two.', 'start': 3266.727, 'duration': 8.122}, {'end': 3276.75, 'text': 'Okay, awesome.', 'start': 3275.59, 'duration': 1.16}, {'end': 3278.851, 'text': "And we're done with these.", 'start': 3277.55, 'duration': 1.301}, {'end': 3281.752, 'text': 'So this is all the styles we need for our colors.', 'start': 3279.591, 'duration': 2.161}, {'end': 3286.473, 'text': "So now that we're done with this, we just want to make sure that we are doing the same thing.", 'start': 3282.552, 'duration': 3.921}, {'end': 3289.014, 'text': 'So forward colors.', 'start': 3286.553, 'duration': 2.461}, {'end': 3294.055, 'text': 'And the last thing we want to make sure we have is the font styles.', 'start': 3290.274, 'duration': 3.781}, {'end': 3300.094, 'text': 'So if we go into our style guide, the fonts is this inter font here.', 'start': 3295.076, 'duration': 5.018}, {'end': 3304.598, 'text': "So let's get that font.", 'start': 3300.114, 'duration': 4.484}, {'end': 3308.725, 'text': 'and weights 400 and 700.', 'start': 3306.182, 'duration': 2.543}, {'end': 3316.852, 'text': "So in Google Fonts, let's scroll down to 400, select the style and then we also want 700 bold.", 'start': 3308.725, 'duration': 8.127}, {'end': 3330.705, 'text': "So we've selected those styles and now we're going to just copy this stuff here and we're going to go into our nix.html file and we want to load the fonts here.", 'start': 3317.473, 'duration': 13.232}, {'end': 3338.963, 'text': "I don't know if I need to add this comment but Google fonts just so we remember.", 'start': 3335.52, 'duration': 3.443}, {'end': 3344.067, 'text': 'Then we need to add the font family.', 'start': 3338.983, 'duration': 5.084}, {'end': 3349.852, 'text': "And you know this might seem a little overkill but I'm gonna create a variable for the font.", 'start': 3345.608, 'duration': 4.244}, {'end': 3355.036, 'text': 'Font, enter.', 'start': 3353.535, 'duration': 1.501}, {'end': 3363.784, 'text': "And we just need the value and I didn't add it to the root element.", 'start': 3360.401, 'duration': 3.383}, {'end': 3369.089, 'text': 'There you go.', 'start': 3368.629, 'duration': 0.46}, {'end': 3377.655, 'text': "So now let's say in the body once you say font family, and we'll call that variable by saying var font, enter.", 'start': 3369.85, 'duration': 7.805}, {'end': 3381.397, 'text': "And that's kind of how you use CSS variables.", 'start': 3378.755, 'duration': 2.642}, {'end': 3383.238, 'text': "So we'll be adding those later on.", 'start': 3381.937, 'duration': 1.301}, {'end': 3386.06, 'text': 'Okay, so done with the fonts.', 'start': 3384.999, 'duration': 1.061}, {'end': 3386.94, 'text': "So let's close that.", 'start': 3386.12, 'duration': 0.82}, {'end': 3391.963, 'text': "Go into our index, make sure we're forwarding fonts.", 'start': 3387.701, 'duration': 4.262}, {'end': 3395.746, 'text': 'It was, I think it was plural.', 'start': 3393.144, 'duration': 2.602}, {'end': 3399.324, 'text': "let's check.", 'start': 3397.563, 'duration': 1.761}, {'end': 3401.144, 'text': 'yeah, fonts plural, okay.', 'start': 3399.324, 'duration': 1.82}, {'end': 3402.584, 'text': "so then let's just double check this.", 'start': 3401.144, 'duration': 1.44}, {'end': 3411.207, 'text': 'so in our util folder we got our index file, which is open here breakpoints, colors, fonts are there, functions are there?', 'start': 3402.584, 'duration': 8.623}, {'end': 3414.728, 'text': 'okay, perfect, so now we are done with the util styles.', 'start': 3411.207, 'duration': 3.521}, {'end': 3417.289, 'text': "So we're done with our util styles.", 'start': 3416.068, 'duration': 1.221}, {'end': 3421.011, 'text': "Okay, the next thing we're going to set up is our global style.", 'start': 3417.949, 'duration': 3.062}, {'end': 3428.174, 'text': "So kind of in the same way that we did with util styles, we're going to go into our global subfolder, and we're going to create some SAS styles.", 'start': 3421.091, 'duration': 7.083}, {'end': 3433.317, 'text': "So in globals, I'm going to say boilerplate.", 'start': 3428.614, 'duration': 4.703}, {'end': 3435.318, 'text': 'This is where I put a lot of default styles.', 'start': 3433.677, 'duration': 1.641}, {'end': 3439.1, 'text': "And I'm going to create another one for typography.", 'start': 3436.258, 'duration': 2.842}, {'end': 3447.809, 'text': 'this is for styles for the text elements like the h tags and the anchor links and things like that.', 'start': 3441.124, 'duration': 6.685}, {'end': 3449.97, 'text': "so i think it's just those two for right now.", 'start': 3447.809, 'duration': 2.161}, {'end': 3455.734, 'text': "we might add more later, but for now we'll stick with these two, okay.", 'start': 3449.97, 'duration': 5.764}, {'end': 3462.559, 'text': "so in our global index sas file we're going to do the same thing that we did in our util and use the forward rule.", 'start': 3455.734, 'duration': 6.825}, {'end': 3469.081, 'text': "so we'll say forward, And I'm just going to add them all, even before I add these styles into our globals.", 'start': 3462.559, 'duration': 6.522}, {'end': 3475.504, 'text': "So boilerplate and then we'll say typography.", 'start': 3470.062, 'duration': 5.442}, {'end': 3477.665, 'text': 'Okay, that should be good there.', 'start': 3476.425, 'duration': 1.24}, {'end': 3485.789, 'text': 'So for the boilerplate styles, one thing I do is HTML and I like to say font size 100%.', 'start': 3478.506, 'duration': 7.283}, {'end': 3488.39, 'text': 'This helps with accessibility.', 'start': 3485.789, 'duration': 2.601}, {'end': 3491.051, 'text': "And I'm going to say box sizing.", 'start': 3488.67, 'duration': 2.381}, {'end': 3501.271, 'text': 'border box and this ensures that if you add padding to an element, the total width is going to include the padding,', 'start': 3492.503, 'duration': 8.768}, {'end': 3503.754, 'text': 'not be in addition to the to the padding.', 'start': 3501.271, 'duration': 2.483}, {'end': 3510.86, 'text': "so let's say we had like a div and we said width is 300 and then we set a padding of 20 pixels.", 'start': 3503.754, 'duration': 7.106}, {'end': 3515.925, 'text': 'if we have box sizing border box, the width plus the padding is still going to be just 300 pixels.', 'start': 3510.86, 'duration': 5.065}, {'end': 3519.847, 'text': "Um, if you don't do it, I think content box is the other option.", 'start': 3517.086, 'duration': 2.761}, {'end': 3521.827, 'text': "Um, let's just, let's see here.", 'start': 3520.227, 'duration': 1.6}, {'end': 3523.948, 'text': 'Yeah, I think content box.', 'start': 3522.948, 'duration': 1}, {'end': 3526.049, 'text': 'So we want border box.', 'start': 3525.108, 'duration': 0.941}, {'end': 3532.25, 'text': "If you, if you don't use border box basically and you set the width 300 and the padding all around to 20 pixels,", 'start': 3526.129, 'duration': 6.121}, {'end': 3539.472, 'text': 'it would be the width would be 300 plus 20 pixels on the left, 20 pixels on the right, 40 pixels would be 340 pixels wide.', 'start': 3532.25, 'duration': 7.222}, {'end': 3542.833, 'text': 'Usually you want the width to be what you set it to.', 'start': 3540.112, 'duration': 2.721}, {'end': 3545.614, 'text': "So it's better to include the padding in there.", 'start': 3543.473, 'duration': 2.141}, {'end': 3551.219, 'text': 'Now we want to inherit this box sizing property from all elements.', 'start': 3545.914, 'duration': 5.305}, {'end': 3558.188, 'text': 'So before before And then after.', 'start': 3551.339, 'duration': 6.849}, {'end': 3564.512, 'text': "So box sizing inherit, it's going to inherit that from the HTML element.", 'start': 3559.529, 'duration': 4.983}, {'end': 3567.514, 'text': 'And for body, I usually like to do some reset.', 'start': 3564.772, 'duration': 2.742}, {'end': 3571.017, 'text': "So I'll say margin zero, padding zero.", 'start': 3567.554, 'duration': 3.463}, {'end': 3576.821, 'text': "And then we'll set the font family to that font that we just created.", 'start': 3571.657, 'duration': 5.164}, {'end': 3578.062, 'text': 'So font, enter.', 'start': 3576.941, 'duration': 1.121}, {'end': 3585.168, 'text': 'and I think that should be good for our boilerplate styles.', 'start': 3582.045, 'duration': 3.123}, {'end': 3592.916, 'text': "Okay, so we're done with that and now we're going to add our typography styles and we'll probably add some more stuff here.", 'start': 3586.069, 'duration': 6.847}, {'end': 3600.884, 'text': "but for now let's just start with the h tags, and I personally like to set the margin top to zero.", 'start': 3592.916, 'duration': 7.968}, {'end': 3605.616, 'text': "just because in your browser default, you'll have a margin on top and the bottom.", 'start': 3602.233, 'duration': 3.383}, {'end': 3609.358, 'text': "I like setting it to zero and then we'll set the bottom margins later on.", 'start': 3605.836, 'duration': 3.522}, {'end': 3618.966, 'text': 'The other thing I wanna do is for the anchor links, a visited and I think a active.', 'start': 3609.619, 'duration': 9.347}, {'end': 3624.292, 'text': 'Text decoration, none.', 'start': 3622.99, 'duration': 1.302}, {'end': 3626.615, 'text': "So we don't have the underline.", 'start': 3624.312, 'duration': 2.303}, {'end': 3628.057, 'text': 'Yeah, all right.', 'start': 3627.356, 'duration': 0.701}, {'end': 3630.5, 'text': 'So that is good for typography.', 'start': 3628.477, 'duration': 2.023}, {'end': 3633.223, 'text': "And let's just check one more time.", 'start': 3630.52, 'duration': 2.703}, {'end': 3635.666, 'text': "Make sure things are here and that's good.", 'start': 3633.924, 'duration': 1.742}, {'end': 3638.91, 'text': 'And then our styles, we are using globals.', 'start': 3636.507, 'duration': 2.403}, {'end': 3643.173, 'text': "okay, you might be wondering why i haven't done a use for the util styles.", 'start': 3639.591, 'duration': 3.582}, {'end': 3645.393, 'text': 'the reason for that is in utils.', 'start': 3643.173, 'duration': 2.22}, {'end': 3658.399, 'text': "i'm using things like sas, mixins and functions and variables, and actually i think i need to move these all the css variables into the globals,", 'start': 3645.393, 'duration': 13.006}, {'end': 3664.493, 'text': 'because What happens is for the util, something like the mixin is not going to.', 'start': 3658.399, 'duration': 6.094}, {'end': 3666.954, 'text': 'this is not going to, on its own, generate any CSS.', 'start': 3664.493, 'duration': 2.461}, {'end': 3673.257, 'text': "So we only need to include it when we're actually using this mixin in whatever SAS files.", 'start': 3667.555, 'duration': 5.702}, {'end': 3681.541, 'text': 'Whereas for things like colors, we actually do want this to get forwarded in the main sass file,', 'start': 3673.918, 'duration': 7.623}, {'end': 3685.482, 'text': 'because you know we need to access these variables and this is not a sass thing.', 'start': 3681.541, 'duration': 3.941}, {'end': 3691.604, 'text': "so any of the sass things, like functions which aren't going to generate css, is what i like to keep in the util.", 'start': 3685.482, 'duration': 6.122}, {'end': 3697.726, 'text': "so yeah, i'm just used to using sass variables, so we just need to change things out a little bit.", 'start': 3691.604, 'duration': 6.122}, {'end': 3705.489, 'text': "so i'm going to move the colors because we're using css variables and the fonts to the globals.", 'start': 3697.726, 'duration': 7.763}, {'end': 3712.944, 'text': "so that should be right and now we'll delete it from the util stuff.", 'start': 3705.489, 'duration': 7.455}, {'end': 3715.345, 'text': 'so yeah, things are, things are always changing.', 'start': 3712.944, 'duration': 2.401}, {'end': 3721.067, 'text': 'um so now i need to forward.', 'start': 3715.345, 'duration': 5.722}, {'end': 3722.987, 'text': 'i might actually put these on top.', 'start': 3721.067, 'duration': 1.92}, {'end': 3731.411, 'text': "i don't know if it matters, but forward fonts and colors okay.", 'start': 3722.987, 'duration': 8.424}, {'end': 3738.053, 'text': "so this should work and we'll find out when we start setting up our gulp workflow and compiling our sass files.", 'start': 3731.411, 'duration': 6.642}, {'end': 3742.396, 'text': 'Okay so we have our util and our global set up.', 'start': 3739.175, 'duration': 3.221}, {'end': 3744.836, 'text': 'And the last thing we want to do is our components.', 'start': 3742.836, 'duration': 2}, {'end': 3749.817, 'text': "So kind of in the same way we have, we're going to create a lot of components as we build this thing.", 'start': 3745.496, 'duration': 4.321}, {'end': 3752.257, 'text': "I'm just going to start with a couple that I think we're going to need.", 'start': 3749.877, 'duration': 2.38}, {'end': 3755.438, 'text': "So in the components folder, we'll create a new file.", 'start': 3753.118, 'duration': 2.32}, {'end': 3763.659, 'text': "And I'm just going to say, since we have those cards in the social media dashboard, I'll say card.scss.", 'start': 3756.278, 'duration': 7.381}, {'end': 3766.62, 'text': "And then we'll just create another one called toggle.", 'start': 3763.999, 'duration': 2.621}, {'end': 3768.812, 'text': 'Dot SCSS.', 'start': 3768.052, 'duration': 0.76}, {'end': 3774.796, 'text': 'This is mainly so that I can just add some test styles so you can see, you know what we need to do.', 'start': 3769.393, 'duration': 5.403}, {'end': 3781.4, 'text': "So we'll just make some sort of fake ish styles for element of class of card.", 'start': 3775.256, 'duration': 6.144}, {'end': 3784.562, 'text': "We'll just say, I don't know, padding REM.", 'start': 3781.42, 'duration': 3.142}, {'end': 3788.264, 'text': "So we're gonna use that function that we created REM.", 'start': 3786.023, 'duration': 2.241}, {'end': 3792.796, 'text': "Let's say 20.", 'start': 3788.284, 'duration': 4.512}, {'end': 3794.197, 'text': "So we'll 20 pixels all around.", 'start': 3792.796, 'duration': 1.401}, {'end': 3801.401, 'text': "And this is something that we can use to test when we're compiling our SAS and if it doesn't cause an error and it it outputs.", 'start': 3794.217, 'duration': 7.184}, {'end': 3804.383, 'text': "you know Ram of whatever 20 pixels is, then we'll know it works.", 'start': 3801.401, 'duration': 2.982}, {'end': 3812.108, 'text': "And for the other one, we'll also do toggle and we'll say, we'll add some nested stuff.", 'start': 3805.444, 'duration': 6.664}, {'end': 3814.129, 'text': 'So maybe toggle toggle button.', 'start': 3812.128, 'duration': 2.001}, {'end': 3816.164, 'text': "And we'll say..", 'start': 3815.563, 'duration': 0.601}, {'end': 3819.607, 'text': "We'll pretend this is the styles for that circle in the toggle.", 'start': 3816.164, 'duration': 3.443}, {'end': 3821.949, 'text': 'So border radius 50%.', 'start': 3819.627, 'duration': 2.322}, {'end': 3824.892, 'text': "Maybe we'll add the color too.", 'start': 3821.949, 'duration': 2.943}, {'end': 3826.113, 'text': 'So color..', 'start': 3824.952, 'duration': 1.161}, {'end': 3828.155, 'text': "We'll say width.", 'start': 3826.113, 'duration': 2.042}, {'end': 3830.637, 'text': 'And again this is just like made up styles.', 'start': 3828.975, 'duration': 1.662}, {'end': 3834.558, 'text': 'So 16 pixels.', 'start': 3830.997, 'duration': 3.561}, {'end': 3847.485, 'text': "we'll say this is the height of 16 pixels, border radius of 50, and let's just say background color and we'll use our what that color was.", 'start': 3834.558, 'duration': 12.927}, {'end': 3849.346, 'text': 'um, toggle.', 'start': 3847.485, 'duration': 1.861}, {'end': 3850.707, 'text': "so let's just toggle.", 'start': 3849.346, 'duration': 1.361}, {'end': 3853.409, 'text': 'There we go.', 'start': 3853.129, 'duration': 0.28}, {'end': 3859.336, 'text': 'Okay, so we have top we have card and now we want to add new components.', 'start': 3854.611, 'duration': 4.725}, {'end': 3867.003, 'text': "So I think we'll add forward card forward toggle.", 'start': 3859.356, 'duration': 7.647}, {'end': 3874.171, 'text': "Alright, so these are the starter SAS files, we're obviously going to be adding a lot more stuff in our SAS files later on.", 'start': 3868.325, 'duration': 5.846}, {'end': 3877.394, 'text': "But for now, let's just close all these out.", 'start': 3874.771, 'duration': 2.623}, {'end': 3884.134, 'text': 'And oh, actually one thing I forgot.', 'start': 3881.533, 'duration': 2.601}, {'end': 3892.258, 'text': 'So in our other SAS files, what we need to do in order to use this REM function here is we need to import the util styles.', 'start': 3884.194, 'duration': 8.064}, {'end': 3901.322, 'text': 'So what we usually do is at use, and then we need to get to the util, load utils from wherever we are here.', 'start': 3892.958, 'duration': 8.364}, {'end': 3903.743, 'text': "So we're in the components folder.", 'start': 3901.422, 'duration': 2.321}, {'end': 3907.925, 'text': 'So we need to go one up and then go to util.', 'start': 3903.763, 'duration': 4.162}, {'end': 3911.973, 'text': 'And I think we just load it like that.', 'start': 3910.37, 'duration': 1.603}, {'end': 3916.161, 'text': 'And when you use use, we have to give it a namespace.', 'start': 3911.993, 'duration': 4.168}, {'end': 3921.452, 'text': 'So I think by default it will add a namespace.', 'start': 3917.765, 'duration': 3.687}, {'end': 3929.785, 'text': 'of whatever the name is, but I kind of want to not have to say, you know, util dot whatever for all the styles that we wrote.', 'start': 3923.763, 'duration': 6.022}, {'end': 3935.007, 'text': 'So if you import it as a wildcard, then you can just use the names of.', 'start': 3929.885, 'duration': 5.122}, {'end': 3939.789, 'text': 'you know the variables or the other thing that you created, without having to use the namespace.', 'start': 3935.007, 'duration': 4.782}, {'end': 3941.29, 'text': "So it's a little bit easier.", 'start': 3940.069, 'duration': 1.221}, {'end': 3949.474, 'text': "But namespacing can come in handy if you're, say, importing styles from a library, or you just have so many styles that they kind of conflict.", 'start': 3941.67, 'duration': 7.804}, {'end': 3955.137, 'text': "You might have something like a variable or a mixin that's called the same thing from the two different styles.", 'start': 3949.694, 'duration': 5.443}, {'end': 3959.06, 'text': 'So in that case, if you have that many styles that are conflicting,', 'start': 3955.698, 'duration': 3.362}, {'end': 3962.982, 'text': 'then you can use a namespace to differentiate between which one you actually want to use.', 'start': 3959.06, 'duration': 3.922}, {'end': 3972.429, 'text': "But in this case, since this is just a one-page web app, we shouldn't have to use namespaces, but we can always add it later on.", 'start': 3963.222, 'duration': 9.207}, {'end': 3979.659, 'text': 'so we need to take this rule and we also want to add it to our toggle styles.', 'start': 3972.429, 'duration': 7.23}, {'end': 3984.051, 'text': "um, because we're using the rem stuff here, I'm thinking about this variable here.", 'start': 3979.659, 'duration': 4.392}, {'end': 3989.333, 'text': "So like, I'm wondering if we would also need to do a use of the globals.", 'start': 3984.131, 'duration': 5.202}, {'end': 3990.573, 'text': "I'm not sure.", 'start': 3989.933, 'duration': 0.64}, {'end': 3992.794, 'text': "So, you know, we'll see what happens.", 'start': 3990.693, 'duration': 2.101}, {'end': 3998.996, 'text': "Cause I think the way the variables for CSS work is it's set on the root element.", 'start': 3992.914, 'duration': 6.082}, {'end': 4003.917, 'text': "So since we're loading the global styles already in our main SAS file, it should be fine.", 'start': 3999.056, 'duration': 4.861}, {'end': 4008.739, 'text': "It should be able to read that, but we'll see what happens when we compile everything.", 'start': 4003.957, 'duration': 4.782}, {'end': 4011.961, 'text': 'Now we are actually done with our SAS styles.', 'start': 4009.219, 'duration': 2.742}, {'end': 4014.902, 'text': "It's going to exit out of everything here.", 'start': 4011.981, 'duration': 2.921}, {'end': 4020.385, 'text': 'And we already have our script file.', 'start': 4018.744, 'duration': 1.641}, {'end': 4021.286, 'text': "We're good with that.", 'start': 4020.425, 'duration': 0.861}, {'end': 4025.848, 'text': 'And the last thing I want to create is a new folder called dist.', 'start': 4021.506, 'duration': 4.342}, {'end': 4034.673, 'text': "This is where we're going to put our compiled CSS and minified CSS and JavaScript files to load that in our index.html.", 'start': 4026.508, 'duration': 8.165}, {'end': 4042.873, 'text': "So let me actually create a reference to the both of those files that we don't have in existence right now,", 'start': 4037.631, 'duration': 5.242}, {'end': 4045.555, 'text': 'but we are going to generate them with our gulp workflow.', 'start': 4042.873, 'duration': 2.682}, {'end': 4053.818, 'text': "So let's see okay this is in the head so after the fonts we'll load our styles.", 'start': 4046.895, 'duration': 6.923}, {'end': 4061.762, 'text': 'So link CSS, and this is coming from the dist folder, of course.', 'start': 4055.879, 'duration': 5.883}, {'end': 4074.61, 'text': "so we're going to say slash dist style.css and then we'll load script source.", 'start': 4061.762, 'duration': 12.848}, {'end': 4080.776, 'text': 'uh, dist script.js, and i think i want to either set.', 'start': 4074.61, 'duration': 6.166}, {'end': 4082.718, 'text': 'i think i might want to set this to defer.', 'start': 4080.776, 'duration': 1.942}, {'end': 4093.817, 'text': 'um, because in the past you would have to load the script tag at the bottom of your body, but i think but at the top it just said to defer to it.', 'start': 4082.718, 'duration': 11.099}, {'end': 4094.977, 'text': "So let's look that up.", 'start': 4094.157, 'duration': 0.82}, {'end': 4098.279, 'text': 'So load JavaScript file, defer.', 'start': 4095.778, 'duration': 2.501}, {'end': 4100.42, 'text': 'See what comes up.', 'start': 4099.779, 'duration': 0.641}, {'end': 4103.981, 'text': 'Flavio Copes.', 'start': 4103.261, 'duration': 0.72}, {'end': 4108.563, 'text': "You can always depend on Flavio to have written a blog post about something that you're looking at.", 'start': 4104.421, 'duration': 4.142}, {'end': 4114.305, 'text': 'Okay, so when loading a script on an HTML page, you need to be careful not to harm the loading performance of the page.', 'start': 4109.304, 'duration': 5.001}, {'end': 4117.787, 'text': 'Okay, so yeah, script is traditionally included in the page this way.', 'start': 4115.305, 'duration': 2.482}, {'end': 4120.749, 'text': 'Do, do, do, do.', 'start': 4117.807, 'duration': 2.942}, {'end': 4127.563, 'text': "Okay, so this is bad to put the script in the head because there's a lot of delay introduced.", 'start': 4122.358, 'duration': 5.205}, {'end': 4134.028, 'text': 'So a very common solution to this is to put the script tag at the bottom of the pages for the clothing body tag, which is what I usually do.', 'start': 4128.643, 'duration': 5.385}, {'end': 4139.893, 'text': 'So the best thing..', 'start': 4136.59, 'duration': 3.303}, {'end': 4142.015, 'text': 'Oh, I wonder if this is actually the best practice here.', 'start': 4139.893, 'duration': 2.122}, {'end': 4148.901, 'text': "So you have to do that if you need to support older browsers that don't support these new features async and defer.", 'start': 4142.035, 'duration': 6.866}, {'end': 4152.76, 'text': 'so these are the new things async and defer.', 'start': 4150.899, 'duration': 1.861}, {'end': 4160.682, 'text': 'if you specify both, async takes precedence on modern browsers, while older browsers that support defer but not async will fall back to defer.', 'start': 4152.76, 'duration': 7.922}, {'end': 4161.682, 'text': "so they're used.", 'start': 4160.682, 'duration': 1}, {'end': 4163.402, 'text': "they only make sense when you're using the script in the head.", 'start': 4161.682, 'duration': 1.72}, {'end': 4166.002, 'text': "okay, so let's see.", 'start': 4163.402, 'duration': 2.6}, {'end': 4167.564, 'text': 'so no defer or no async.', 'start': 4166.002, 'duration': 1.562}, {'end': 4170.564, 'text': "we don't want that.", 'start': 4167.564, 'duration': 3}, {'end': 4173.345, 'text': 'async blocks parsing on the page, while defer does not.', 'start': 4170.564, 'duration': 2.781}, {'end': 4176.046, 'text': 'neither async nor defer guarantee anything on blocking rendering.', 'start': 4173.345, 'duration': 2.701}, {'end': 4179.889, 'text': 'Okay, then the bottom to tell me the best way.', 'start': 4178.368, 'duration': 1.521}, {'end': 4184.453, 'text': 'Best thing to do to speed up your page is to put them in the head and add a deferred attribute.', 'start': 4179.908, 'duration': 4.545}, {'end': 4187.035, 'text': 'Okay Thank you, Flavio.', 'start': 4184.653, 'duration': 2.382}, {'end': 4191.919, 'text': 'There we go.', 'start': 4191.497, 'duration': 0.422}, {'end': 4202.189, 'text': "OK, so now that we're done with our SAS files and loading our JavaScript file, at least for now, we're going to set up our Gulp workflow.", 'start': 4194.505, 'duration': 7.684}, {'end': 4205.291, 'text': "And we're using Gulp to compile our SAS to CSS.", 'start': 4202.449, 'duration': 2.842}, {'end': 4214.855, 'text': "As you can see, the SAS files are very different from when you're writing styles with CSS with the functions, mixins, and also the nesting styles.", 'start': 4206.051, 'duration': 8.804}, {'end': 4223.1, 'text': "So browsers can't read SAS files, so you have to use some kind of tool, a build tool, to compile or convert your SAS files to CSS.", 'start': 4215.396, 'duration': 7.704}, {'end': 4225.562, 'text': 'There are VS Code extensions that you can use.', 'start': 4223.76, 'duration': 1.802}, {'end': 4228.004, 'text': 'I used to use the live Sass extension a lot.', 'start': 4225.862, 'duration': 2.142}, {'end': 4232.787, 'text': "However, it doesn't support the new Sass use and forward rules.", 'start': 4228.724, 'duration': 4.063}, {'end': 4240.134, 'text': 'It only supports the old import rules and those are getting deprecated by Sass sometime in the next couple years.', 'start': 4233.908, 'duration': 6.226}, {'end': 4243.857, 'text': 'So you kind of want to get used to writing the new syntax.', 'start': 4240.774, 'duration': 3.083}, {'end': 4248.981, 'text': 'Unfortunately, that extension, the Live Sass extension, has not been updated in, I think, two years.', 'start': 4244.837, 'duration': 4.144}, {'end': 4256.808, 'text': 'So, you know, you can find a different extension if you want to try the new syntax with Sass, or you can use the Sculp workflow.', 'start': 4249.341, 'duration': 7.467}, {'end': 4260.792, 'text': "So we don't really need this file.", 'start': 4259.071, 'duration': 1.721}, {'end': 4269.819, 'text': "so let's open our terminal window and we're going to set up gulp and install a bunch of npm packages for our workflow.", 'start': 4260.792, 'duration': 9.027}, {'end': 4275.103, 'text': "So the first thing you want to do when you're working with gulp is you want to make sure you have the gulp cli installed.", 'start': 4270.379, 'duration': 4.724}, {'end': 4280.533, 'text': "so you, if you don't have it, Um gulp dash CLI.", 'start': 4275.103, 'duration': 5.43}, {'end': 4288.078, 'text': "I already have this installed, but if you don't have gulp CLI installed, you can install it this way, using the dash G,", 'start': 4280.554, 'duration': 7.524}, {'end': 4289.819, 'text': 'and that will install it globally on your computer.', 'start': 4288.078, 'duration': 1.741}, {'end': 4294.342, 'text': 'So you can run gulp CLI from any, any folder on your computer.', 'start': 4290.319, 'duration': 4.023}, {'end': 4300.665, 'text': 'So now we want to first create our package JSON file.', 'start': 4294.702, 'duration': 5.963}, {'end': 4302.727, 'text': "So I'm going to say NPM.", 'start': 4301.346, 'duration': 1.381}, {'end': 4305.228, 'text': 'This is very long.', 'start': 4303.947, 'duration': 1.281}, {'end': 4306.649, 'text': "It's kind of bugging me actually.", 'start': 4305.508, 'duration': 1.141}, {'end': 4310.251, 'text': "Um, let's just rename our folder here.", 'start': 4308.69, 'duration': 1.561}, {'end': 4315.015, 'text': 'Uh, close folder.', 'start': 4313.174, 'duration': 1.841}, {'end': 4322.421, 'text': "I'm just going to rename this to social dashboard, I think.", 'start': 4318.578, 'duration': 3.843}, {'end': 4324.342, 'text': 'Or maybe just dark light toggle.', 'start': 4323.221, 'duration': 1.121}, {'end': 4326.504, 'text': 'Cause that was kind of the main thing I was thinking about.', 'start': 4324.402, 'duration': 2.102}, {'end': 4331.766, 'text': 'Okay, so now darklight toggle.', 'start': 4330.123, 'duration': 1.643}, {'end': 4333.87, 'text': 'We want to create our package JSON file.', 'start': 4332.267, 'duration': 1.603}, {'end': 4339.581, 'text': 'So npm install, sorry, npm init dash i.', 'start': 4333.95, 'duration': 5.631}, {'end': 4347.126, 'text': 'So now we have our package JSON file.', 'start': 4345.205, 'duration': 1.921}, {'end': 4351.829, 'text': 'We can now install a bunch of, uh, NPM packages that we need.', 'start': 4348.147, 'duration': 3.682}, {'end': 4359.554, 'text': 'So NPM install, and I am going to be using my gulp config that I have from previous projects.', 'start': 4352.49, 'duration': 7.064}, {'end': 4364.517, 'text': 'So I will, but I will still walk you through how all that works.', 'start': 4360.394, 'duration': 4.123}, {'end': 4367.159, 'text': 'So we want to install a bunch of packages.', 'start': 4364.937, 'duration': 2.222}, {'end': 4370.821, 'text': 'So the first one is babel core and babel.', 'start': 4367.199, 'duration': 3.622}, {'end': 4379.16, 'text': 'preset-env And this is used for autoprefixer.', 'start': 4372.574, 'duration': 6.586}, {'end': 4387.587, 'text': "There's some CSS properties that need to use browser prefixes like webkit for browsers that don't support the sort of full thing.", 'start': 4379.66, 'duration': 7.927}, {'end': 4390.389, 'text': 'So for example, one property for that is transform.', 'start': 4387.627, 'duration': 2.762}, {'end': 4399.017, 'text': 'So transform is a property that is supported in modern browsers, but for older browsers, they may need to use the dash webkit prefix.', 'start': 4390.91, 'duration': 8.107}, {'end': 4407.961, 'text': "So Babel will work with autoprefixer to determine which properties get prefixed automatically, so that way you don't have to type it out yourself.", 'start': 4399.557, 'duration': 8.404}, {'end': 4410.263, 'text': 'So just another way that you can save time.', 'start': 4408.662, 'duration': 1.601}, {'end': 4413.844, 'text': "So Babel, and then we're going to install PostCSS.", 'start': 4410.383, 'duration': 3.461}, {'end': 4419.127, 'text': 'This is a collection of plugins that autoprefixer is a part of.', 'start': 4414.304, 'duration': 4.823}, {'end': 4423.369, 'text': 'So you have to install both of them, I believe, to use autoprefixer.', 'start': 4419.867, 'duration': 3.502}, {'end': 4429.994, 'text': "Then we're going to install browser sync and this will, when we run gulp.", 'start': 4424.309, 'duration': 5.685}, {'end': 4436.94, 'text': "it's going to spin up a local server and it will sort of keep watching your files and reload the website anytime you make a change,", 'start': 4429.994, 'duration': 6.946}, {'end': 4439.202, 'text': "so you don't have to manually reload in your browser.", 'start': 4436.94, 'duration': 2.262}, {'end': 4447.129, 'text': "Then we're going to install css nano for minifying our css and we're going to install dart-sas,", 'start': 4439.443, 'duration': 7.686}, {'end': 4456.939, 'text': 'because this is the version of sass that supports this new syntax with the use and the forward and stuff like that.', 'start': 4448.971, 'duration': 7.968}, {'end': 4458.26, 'text': 'so we need to install that.', 'start': 4456.939, 'duration': 1.321}, {'end': 4463.465, 'text': "specifically, if we want to use those new rules, then we're going to install gulp, because we need gulp.", 'start': 4458.26, 'duration': 5.205}, {'end': 4466.989, 'text': 'gulp babel for the babel stuff.', 'start': 4463.465, 'duration': 3.524}, {'end': 4470.892, 'text': 'gulp, oops, gulp post css.', 'start': 4466.989, 'duration': 3.903}, {'end': 4480.978, 'text': "gulp sass that will do the sass compiling, and then gulp terser, which we're going to use to minify our JavaScript files.", 'start': 4472.514, 'duration': 8.464}, {'end': 4482.519, 'text': "So we'll hit enter.", 'start': 4481.858, 'duration': 0.661}, {'end': 4485.08, 'text': "Hopefully I didn't make any mistakes.", 'start': 4482.539, 'duration': 2.541}, {'end': 4490.523, 'text': 'And we should see all those NPM packages added here in our package.json file.', 'start': 4486.501, 'duration': 4.022}, {'end': 4494.574, 'text': 'All right, no errors installing, which is great.', 'start': 4492.614, 'duration': 1.96}, {'end': 4500.076, 'text': 'So now in our package JSON, we can see all the packages that we added in here.', 'start': 4494.635, 'duration': 5.441}, {'end': 4503.717, 'text': "Now, one thing you might've noticed is found three vulnerabilities.", 'start': 4500.596, 'duration': 3.121}, {'end': 4511.559, 'text': "So kind of a cool thing that NPM does when you install is it'll actually tell you if the versions you've installed have any security vulnerabilities.", 'start': 4504.397, 'duration': 7.162}, {'end': 4518.64, 'text': "So.. I don't know if this is the right way to do it, but I will just write npm audit fix if I can.", 'start': 4512.219, 'duration': 6.421}, {'end': 4522.781, 'text': "Sometimes I'll type in npm audit just to see which packages they're talking about.", 'start': 4518.72, 'duration': 4.061}, {'end': 4532.304, 'text': 'So it looks like yargs parser, which is used in gulp, and then glob parent, which is used in this gulp thing too.', 'start': 4522.801, 'duration': 9.503}, {'end': 4535.185, 'text': 'And then another dependency of gulp.', 'start': 4533.784, 'duration': 1.401}, {'end': 4539.826, 'text': 'So I usually will just type npm audit fix to see if this will work.', 'start': 4535.625, 'duration': 4.201}, {'end': 4544.509, 'text': 'but I think it may not because it says three vulnerabilities require manual review.', 'start': 4541.118, 'duration': 3.391}, {'end': 4546.917, 'text': 'Yeah, fix zero.', 'start': 4544.529, 'duration': 2.388}, {'end': 4554.184, 'text': "It's not great, but they're low and moderate, so I'm just going to kind of leave it.", 'start': 4548.922, 'duration': 5.262}, {'end': 4558.466, 'text': "They're not high security vulnerabilities, so I think it's kind of okay.", 'start': 4554.224, 'duration': 4.242}, {'end': 4564.788, 'text': "I'm not super familiar with this part of NPM and all the dependency securities,", 'start': 4558.806, 'duration': 5.982}, {'end': 4568.129, 'text': 'so feel free to flame me in the comments if this is a terrible thing to do.', 'start': 4564.788, 'duration': 3.341}, {'end': 4575.212, 'text': "But yeah, if it's not like a high level, I'm just going to leave it and keep going.", 'start': 4569.25, 'duration': 5.962}, {'end': 4577.133, 'text': 'Yeah, so now we have our dependencies installed.', 'start': 4575.552, 'duration': 1.581}, {'end': 4580.414, 'text': 'The next thing we want to do is start working with our gulp workflow.', 'start': 4577.153, 'duration': 3.261}, {'end': 4585.896, 'text': "So in our route, we're going to create a new file called gulp file.js.", 'start': 4581.114, 'duration': 4.782}, {'end': 4590.777, 'text': "And in here is where we're going to write all our configuration for gulp.", 'start': 4587.076, 'duration': 3.701}, {'end': 4598.38, 'text': 'And again, I am going to cheat a little bit and use a previous gulp file configuration and just copy and paste that here.', 'start': 4591.337, 'duration': 7.043}, {'end': 4601.401, 'text': "But let me kind of walk you through what's going on here.", 'start': 4599.12, 'duration': 2.281}, {'end': 4609.339, 'text': 'So in a Gulp file, this is a JavaScript thing that you run on the command line using Node.', 'start': 4603.757, 'duration': 5.582}, {'end': 4613.04, 'text': "And this is what we're going to use to compile and minify all our files.", 'start': 4609.659, 'duration': 3.381}, {'end': 4615.961, 'text': 'So, at the top of your Gulp file,', 'start': 4613.72, 'duration': 2.241}, {'end': 4625.443, 'text': 'we are importing all of the NPM packages that we just installed as modules into this file so that we can access them and any functions that they give us.', 'start': 4615.961, 'duration': 9.482}, {'end': 4626.864, 'text': "That's what this top section is.", 'start': 4625.804, 'duration': 1.06}, {'end': 4632.166, 'text': 'Then if you scroll down a little bit, this is setting the SAS compiler to use Dart SAS.', 'start': 4627.444, 'duration': 4.722}, {'end': 4636.888, 'text': 'And this is again, so that we can use that new use and forward syntax in our SAS rules.', 'start': 4632.486, 'duration': 4.402}, {'end': 4641.87, 'text': 'So the next thing we need to do is we need to actually compile our SAS and JavaScript files.', 'start': 4637.488, 'duration': 4.382}, {'end': 4644.451, 'text': "And that's what this next section here is.", 'start': 4642.33, 'duration': 2.121}, {'end': 4649.012, 'text': "So we have a SAS task, and it's a function called SCSS task.", 'start': 4644.551, 'duration': 4.461}, {'end': 4655.855, 'text': "And what this is doing is it's running, you know, multiple different things, and they are using this pipe function, that's a gulp function.", 'start': 4649.432, 'duration': 6.423}, {'end': 4658.257, 'text': 'to sort of run them one after the other.', 'start': 4656.475, 'duration': 1.782}, {'end': 4669.786, 'text': 'So what this is saying is this first line is taking the main SAS file, so app.scss.style.scss, and it is going to do stuff to this file.', 'start': 4658.797, 'duration': 10.989}, {'end': 4673.769, 'text': 'And in here, this option is setting source maps to true.', 'start': 4670.567, 'duration': 3.202}], 'summary': 'The transcript discusses setting up a css color scheme media query, using css variables for dark and light modes, naming conventions, setting up sass styles, creating components, and configuring a gulp workflow to compile sass and minify css and javascript files.', 'duration': 1564.427, 'max_score': 3109.342, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI3109342.jpg'}, {'end': 3163.588, 'src': 'embed', 'start': 3130.219, 'weight': 0, 'content': [{'end': 3132.22, 'text': 'And then for the dark theme.', 'start': 3130.219, 'duration': 2.001}, {'end': 3139.524, 'text': 'if you set it to dark mode, then we would still need CSS variables for each color, but we would, you know,', 'start': 3132.22, 'duration': 7.304}, {'end': 3142.846, 'text': "set the background to this color when it's in dark mode.", 'start': 3139.524, 'duration': 3.322}, {'end': 3154.612, 'text': 'So I think we can still set all the colors in here and then we will separate them out with the dark and the light modes later on with other styles and using that prefers color scheme media query.', 'start': 3142.866, 'duration': 11.746}, {'end': 3156.273, 'text': "So we'll just go ahead and do this.", 'start': 3154.992, 'duration': 1.281}, {'end': 3163.588, 'text': "And in terms of the naming, naming is kind of the hardest part I've found.", 'start': 3159.486, 'duration': 4.102}], 'summary': 'Css variables will be used for dark theme with color separation based on mode and prefers color scheme media query.', 'duration': 33.369, 'max_score': 3130.219, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI3130219.jpg'}, {'end': 3344.067, 'src': 'embed', 'start': 3308.725, 'weight': 7, 'content': [{'end': 3316.852, 'text': "So in Google Fonts, let's scroll down to 400, select the style and then we also want 700 bold.", 'start': 3308.725, 'duration': 8.127}, {'end': 3330.705, 'text': "So we've selected those styles and now we're going to just copy this stuff here and we're going to go into our nix.html file and we want to load the fonts here.", 'start': 3317.473, 'duration': 13.232}, {'end': 3338.963, 'text': "I don't know if I need to add this comment but Google fonts just so we remember.", 'start': 3335.52, 'duration': 3.443}, {'end': 3344.067, 'text': 'Then we need to add the font family.', 'start': 3338.983, 'duration': 5.084}], 'summary': 'Select google fonts styles 400 and 700 bold, then load into nix.html file.', 'duration': 35.342, 'max_score': 3308.725, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI3308725.jpg'}, {'end': 3600.884, 'src': 'embed', 'start': 3571.657, 'weight': 4, 'content': [{'end': 3576.821, 'text': "And then we'll set the font family to that font that we just created.", 'start': 3571.657, 'duration': 5.164}, {'end': 3578.062, 'text': 'So font, enter.', 'start': 3576.941, 'duration': 1.121}, {'end': 3585.168, 'text': 'and I think that should be good for our boilerplate styles.', 'start': 3582.045, 'duration': 3.123}, {'end': 3592.916, 'text': "Okay, so we're done with that and now we're going to add our typography styles and we'll probably add some more stuff here.", 'start': 3586.069, 'duration': 6.847}, {'end': 3600.884, 'text': "but for now let's just start with the h tags, and I personally like to set the margin top to zero.", 'start': 3592.916, 'duration': 7.968}], 'summary': 'Setting font family to newly created font and adding typography styles for h tags with margin top set to zero.', 'duration': 29.227, 'max_score': 3571.657, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI3571657.jpg'}, {'end': 4103.981, 'src': 'embed', 'start': 4074.61, 'weight': 6, 'content': [{'end': 4080.776, 'text': 'uh, dist script.js, and i think i want to either set.', 'start': 4074.61, 'duration': 6.166}, {'end': 4082.718, 'text': 'i think i might want to set this to defer.', 'start': 4080.776, 'duration': 1.942}, {'end': 4093.817, 'text': 'um, because in the past you would have to load the script tag at the bottom of your body, but i think but at the top it just said to defer to it.', 'start': 4082.718, 'duration': 11.099}, {'end': 4094.977, 'text': "So let's look that up.", 'start': 4094.157, 'duration': 0.82}, {'end': 4098.279, 'text': 'So load JavaScript file, defer.', 'start': 4095.778, 'duration': 2.501}, {'end': 4100.42, 'text': 'See what comes up.', 'start': 4099.779, 'duration': 0.641}, {'end': 4103.981, 'text': 'Flavio Copes.', 'start': 4103.261, 'duration': 0.72}], 'summary': 'Consider setting script to defer for improved page loading performance.', 'duration': 29.371, 'max_score': 4074.61, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI4074610.jpg'}, {'end': 4223.1, 'src': 'embed', 'start': 4194.505, 'weight': 1, 'content': [{'end': 4202.189, 'text': "OK, so now that we're done with our SAS files and loading our JavaScript file, at least for now, we're going to set up our Gulp workflow.", 'start': 4194.505, 'duration': 7.684}, {'end': 4205.291, 'text': "And we're using Gulp to compile our SAS to CSS.", 'start': 4202.449, 'duration': 2.842}, {'end': 4214.855, 'text': "As you can see, the SAS files are very different from when you're writing styles with CSS with the functions, mixins, and also the nesting styles.", 'start': 4206.051, 'duration': 8.804}, {'end': 4223.1, 'text': "So browsers can't read SAS files, so you have to use some kind of tool, a build tool, to compile or convert your SAS files to CSS.", 'start': 4215.396, 'duration': 7.704}], 'summary': 'Setting up gulp workflow to compile sas to css.', 'duration': 28.595, 'max_score': 4194.505, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI4194505.jpg'}, {'end': 4466.989, 'src': 'embed', 'start': 4439.443, 'weight': 5, 'content': [{'end': 4447.129, 'text': "Then we're going to install css nano for minifying our css and we're going to install dart-sas,", 'start': 4439.443, 'duration': 7.686}, {'end': 4456.939, 'text': 'because this is the version of sass that supports this new syntax with the use and the forward and stuff like that.', 'start': 4448.971, 'duration': 7.968}, {'end': 4458.26, 'text': 'so we need to install that.', 'start': 4456.939, 'duration': 1.321}, {'end': 4463.465, 'text': "specifically, if we want to use those new rules, then we're going to install gulp, because we need gulp.", 'start': 4458.26, 'duration': 5.205}, {'end': 4466.989, 'text': 'gulp babel for the babel stuff.', 'start': 4463.465, 'duration': 3.524}], 'summary': 'Installing css nano, dart-sass, gulp, and gulp babel for new syntax support.', 'duration': 27.546, 'max_score': 4439.443, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI4439443.jpg'}, {'end': 4522.781, 'src': 'embed', 'start': 4494.635, 'weight': 8, 'content': [{'end': 4500.076, 'text': 'So now in our package JSON, we can see all the packages that we added in here.', 'start': 4494.635, 'duration': 5.441}, {'end': 4503.717, 'text': "Now, one thing you might've noticed is found three vulnerabilities.", 'start': 4500.596, 'duration': 3.121}, {'end': 4511.559, 'text': "So kind of a cool thing that NPM does when you install is it'll actually tell you if the versions you've installed have any security vulnerabilities.", 'start': 4504.397, 'duration': 7.162}, {'end': 4518.64, 'text': "So.. I don't know if this is the right way to do it, but I will just write npm audit fix if I can.", 'start': 4512.219, 'duration': 6.421}, {'end': 4522.781, 'text': "Sometimes I'll type in npm audit just to see which packages they're talking about.", 'start': 4518.72, 'duration': 4.061}], 'summary': 'Three vulnerabilities found in npm packages; npm audit to fix.', 'duration': 28.146, 'max_score': 4494.635, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI4494635.jpg'}], 'start': 2670.481, 'title': 'Setting up front-end development environment', 'summary': 'Details importing breakpoints.scss and creating a function file for efficient style handling, setting css variables for colors with hsl and media queries for themes, implementing font styles, organizing sass files, creating components, and setting up gulp workflow for compiling sas to css with security measures and essential npm packages.', 'chapters': [{'end': 2804.943, 'start': 2670.481, 'title': 'Util folder: importing and using breakpoints.scss and functions file', 'summary': 'Details the process of importing breakpoints.scss file in the util folder to use its styles in other files, and creating a function in the functions file to convert pixels to rems, offering a more efficient way to handle styles and measurements, including an example of converting 30 pixels to rems.', 'duration': 134.462, 'highlights': ['The process of importing breakpoints.scss file in the util folder to use its styles in other files Importing breakpoints.scss file for utilizing its styles in other files', 'Creating a function in the functions file to convert pixels to rems, offering a more efficient way to handle styles and measurements Creating a function to convert pixels to rems for efficient style handling', 'Example of converting 30 pixels to rems using the function, resulting in 1.875 REMs Example of converting 30 pixels to rems resulting in 1.875 REMs']}, {'end': 3276.75, 'start': 2805.503, 'title': 'Creating css variables for colors', 'summary': 'Covers setting up css variables for colors using css custom properties, utilizing hsl instead of hex colors, and implementing the prefers color scheme media query for dark and light themes.', 'duration': 471.247, 'highlights': ['Setting up CSS variables using CSS custom properties and prefers color scheme media query The chapter explains the use of CSS custom properties instead of SAS variables, allowing the manipulation of CSS variables with JavaScript and the implementation of the prefers color scheme media query for dark and light themes.', 'Utilizing HSL instead of hex colors for better color manipulation The transcript highlights the use of HSL (hue, saturation, lightness) instead of hex colors as a better way of changing the lightness or darkness of a color, aligning with the current trend of using HSL over hex colors.', 'Naming conventions for CSS variables The speaker emphasizes the importance of naming conventions for CSS variables, indicating that naming takes more time than anticipated, and suggests using clear and memorable names for better understanding by other developers.']}, {'end': 3633.223, 'start': 3277.55, 'title': 'Setting up font and global styles', 'summary': 'Covers the process of selecting and implementing font styles using google fonts, setting up css variables for font families, and creating boilerplate and typography styles for global use in the project.', 'duration': 355.673, 'highlights': ['Selected inter font styles 400 and 700 from Google Fonts and implemented them in the nix.html file. The speaker selected specific font styles, 400 and 700, from Google Fonts and then proceeded to implement them in the nix.html file.', "Created a CSS variable for the font family and utilized it using the 'var' function for the body. The speaker created a CSS variable for the font family and demonstrated its usage by applying it to the body using the 'var' function.", 'Set up boilerplate styles including font size, box sizing, and inheritance for accessibility and consistent width management. The speaker explained the importance of setting up boilerplate styles such as font size and box sizing for accessibility and consistent width management.', 'Established typography styles including margin adjustments for h tags and removal of underline for anchor links. The speaker established typography styles, including margin adjustments for h tags and the removal of underlines for anchor links.']}, {'end': 4191.919, 'start': 3633.924, 'title': 'Organizing sass files and creating components', 'summary': 'Discusses organizing sass files, moving css variables to globals, creating components, and setting up gulp workflow for compiling sass files, with a mention of defer attribute for script loading.', 'duration': 557.995, 'highlights': ["The chapter discusses the rationale behind not using 'use' for util styles in SASS files, due to only needing to include them when using mixins in SASS files, and the need to forward colors and fonts to globals for access, with the mention of using CSS variables. Explanation of not using 'use' for util styles in SASS files and the need to forward colors and fonts to globals for access.", "The process of creating components in SASS files, starting with 'card.scss' and 'toggle.scss', along with adding test styles for elements of class 'card' and 'toggle button', using the 'REM' function and nested styles. Creation of components 'card.scss' and 'toggle.scss' with test styles for elements.", "The mention of importing util styles in other SASS files using 'use' and the explanation of using namespaces for importing styles from a library or to avoid conflicts, with a mention of the REM function and the use of globals in SASS files. Explanation of importing util styles using namespaces and the use of globals in SASS files.", "The process of setting up a 'dist' folder for compiled CSS and JavaScript files, along with creating references in the 'index.html' file for loading the compiled files, with a mention of the 'defer' attribute for script loading. Setting up a 'dist' folder for compiled files and creating references in 'index.html' for loading the compiled files."]}, {'end': 4817.669, 'start': 4194.505, 'title': 'Setting up gulp workflow for compiling sas to css', 'summary': 'Covers setting up a gulp workflow for compiling sas to css, including installing necessary npm packages, addressing security vulnerabilities, and configuring the gulp file with tasks for compiling sas and javascript files with source maps, babel, autoprefixer, and css minification.', 'duration': 623.164, 'highlights': ['Installing necessary NPM packages for Gulp workflow including babel core, babel preset-env, PostCSS, browser sync, css nano, dart-sass, gulp, gulp babel, gulp post css, and gulp terser. Installing necessary NPM packages such as babel core, babel preset-env, PostCSS, browser sync, css nano, dart-sass, gulp, gulp babel, gulp post css, and gulp terser for setting up Gulp workflow.', 'Addressing security vulnerabilities in installed packages and making decisions on whether to fix or ignore them. Addressing security vulnerabilities in installed packages and making decisions on whether to fix or ignore them, based on the severity of the vulnerabilities.', 'Configuring the Gulp file with tasks for compiling SAS and JavaScript files, including setting source maps, using Dart SAS for SAS compilation, running Babel for JavaScript, and adding autoprefixer and CSS minification. Configuring the Gulp file with tasks for compiling SAS and JavaScript files, including setting source maps, using Dart SAS for SAS compilation, running Babel for JavaScript, and adding autoprefixer and CSS minification.']}], 'duration': 2147.188, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI2670481.jpg', 'highlights': ['Setting up CSS variables using CSS custom properties and prefers color scheme media query', 'Configuring the Gulp file with tasks for compiling SAS and JavaScript files', 'Creating a function to convert pixels to rems for efficient style handling', 'Utilizing HSL instead of hex colors for better color manipulation', 'Established typography styles including margin adjustments for h tags and removal of underline for anchor links', 'Installing necessary NPM packages for Gulp workflow including babel core, babel preset-env, PostCSS, browser sync, css nano, dart-sass, gulp, gulp babel, gulp post css, and gulp terser', "Setting up a 'dist' folder for compiled CSS and JavaScript files, along with creating references in the 'index.html' file for loading the compiled files, with a mention of the 'defer' attribute for script loading", 'Selected inter font styles 400 and 700 from Google Fonts and implemented them in the nix.html file', 'Addressing security vulnerabilities in installed packages and making decisions on whether to fix or ignore them', 'Naming conventions for CSS variables']}, {'end': 5799.003, 'segs': [{'end': 4858.598, 'src': 'embed', 'start': 4818.269, 'weight': 0, 'content': [{'end': 4822.89, 'text': 'So things like that where people may not be able to, you know, use the most modern browsers.', 'start': 4818.269, 'duration': 4.621}, {'end': 4826.591, 'text': 'And the next line is using tracer to minify our JavaScript file.', 'start': 4823.25, 'duration': 3.341}, {'end': 4830.132, 'text': 'And then the last line is similar to what we had with the SAS task,', 'start': 4827.091, 'duration': 3.041}, {'end': 4838.494, 'text': "where it's setting the destination of the compiled file into our dist folder and then also having source map saved in the same location.", 'start': 4830.132, 'duration': 8.362}, {'end': 4840.496, 'text': "So that's JavaScript task.", 'start': 4838.894, 'duration': 1.602}, {'end': 4844.721, 'text': "So next thing we're going to do is we're going to add our browser sync functions.", 'start': 4840.897, 'duration': 3.824}, {'end': 4851.09, 'text': 'And this is, as I mentioned earlier, browser sync will spin up a local server and sync it to your files.', 'start': 4845.042, 'duration': 6.048}, {'end': 4854.894, 'text': "And anytime you make a change, it's going to automatically reload your local website.", 'start': 4851.27, 'duration': 3.624}, {'end': 4858.598, 'text': "So you don't have to manually hit, you know, control R every time you make a change.", 'start': 4855.515, 'duration': 3.083}], 'summary': 'Configuring javascript task with minification and setting up browser sync for automatic reloading.', 'duration': 40.329, 'max_score': 4818.269, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI4818269.jpg'}, {'end': 4968.556, 'src': 'embed', 'start': 4937.489, 'weight': 1, 'content': [{'end': 4942.512, 'text': "at the very bottom of your gulp file, we're going to export our default gulp task,", 'start': 4937.489, 'duration': 5.023}, {'end': 4948.276, 'text': 'and the default gulp task is what gulp will run when you type in gulp on the command line to start everything off.', 'start': 4942.512, 'duration': 5.764}, {'end': 4952.199, 'text': 'And so in our default gulp task we want to run all our tasks.', 'start': 4949.156, 'duration': 3.043}, {'end': 4960.327, 'text': 'So SAS task, JS task, then we want to serve up the browser sync server, initialize it, and we want to run our watch task.', 'start': 4952.459, 'duration': 7.868}, {'end': 4968.556, 'text': "And the watch task is what we'll keep running when we are doing development detect the changes and then reload our website and rerun all of our other tasks.", 'start': 4960.427, 'duration': 8.129}], 'summary': 'Default gulp task runs sas, js, server, and watch tasks.', 'duration': 31.067, 'max_score': 4937.489, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI4937489.jpg'}, {'end': 5067.389, 'src': 'embed', 'start': 5043.287, 'weight': 3, 'content': [{'end': 5053.833, 'text': "so let's just anyway copy this, go to firefox, do a search in duck.go for this error message and see what happens.", 'start': 5043.287, 'duration': 10.546}, {'end': 5056.095, 'text': 'okay, Good old Stack Overflow.', 'start': 5053.833, 'duration': 2.262}, {'end': 5059.499, 'text': 'So this happened eight days ago, so this is a very recent occurrence.', 'start': 5056.475, 'duration': 3.024}, {'end': 5062.603, 'text': 'gulp sass recently updated to version 5.0.', 'start': 5060.36, 'duration': 2.243}, {'end': 5067.389, 'text': "They describe that it doesn't use a compiler anymore and you have to install it in separately.", 'start': 5062.603, 'duration': 4.786}], 'summary': 'Gulp sass updated to version 5.0, removing compiler, 8 days ago.', 'duration': 24.102, 'max_score': 5043.287, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI5043287.jpg'}, {'end': 5450.698, 'src': 'heatmap', 'start': 5190.089, 'weight': 0.842, 'content': [{'end': 5190.549, 'text': 'Oh, here we go.', 'start': 5190.089, 'duration': 0.46}, {'end': 5194.532, 'text': 'Dart SAS is also distributed as the pure JavaScript SAS package on NPM.', 'start': 5190.589, 'duration': 3.943}, {'end': 5202.257, 'text': "All right, so I guess I don't have to explicitly say Dart SAS for the compiler.", 'start': 5196.233, 'duration': 6.024}, {'end': 5204.879, 'text': "Okay, so now let's see if this works.", 'start': 5202.517, 'duration': 2.362}, {'end': 5205.619, 'text': "We'll rerun Gulp.", 'start': 5204.919, 'duration': 0.7}, {'end': 5210.422, 'text': 'Uh oh.', 'start': 5207.56, 'duration': 2.862}, {'end': 5211.623, 'text': "Let's see what happened here.", 'start': 5210.462, 'duration': 1.161}, {'end': 5214.425, 'text': 'Module not found.', 'start': 5213.504, 'duration': 0.921}, {'end': 5221.322, 'text': 'not find module sass.', 'start': 5219.201, 'duration': 2.121}, {'end': 5226.344, 'text': 'wait, did i not even install sass itself?', 'start': 5221.322, 'duration': 5.022}, {'end': 5228.725, 'text': "oh, it's called dart sass, not sass.", 'start': 5226.344, 'duration': 2.381}, {'end': 5231.286, 'text': 'okay, i guess that was a mistake.', 'start': 5228.725, 'duration': 2.561}, {'end': 5237.869, 'text': "so let's npm install sass okay.", 'start': 5231.286, 'duration': 6.583}, {'end': 5241.25, 'text': 'so now i have sass in our package.json rerun gulp.', 'start': 5237.869, 'duration': 3.381}, {'end': 5247.106, 'text': 'Oh, so the okay.', 'start': 5245.245, 'duration': 1.861}, {'end': 5248.447, 'text': 'So this is our website, which is good.', 'start': 5247.146, 'duration': 1.301}, {'end': 5249.788, 'text': 'I did see an error.', 'start': 5248.988, 'duration': 0.8}, {'end': 5253.05, 'text': "So let's take a look at that, but I'm glad this worked.", 'start': 5250.629, 'duration': 2.421}, {'end': 5256.113, 'text': 'Um, here we go.', 'start': 5255.392, 'duration': 0.721}, {'end': 5263.598, 'text': 'Um, deprecation warning using the slash for division is deprecated and we removed in Dart SAS.', 'start': 5258.534, 'duration': 5.064}, {'end': 5264.258, 'text': 'Oh my gosh.', 'start': 5263.718, 'duration': 0.54}, {'end': 5270.963, 'text': "It's recommendation, recommendation, math dot div pixels, and then context.", 'start': 5265.179, 'duration': 5.784}, {'end': 5274.139, 'text': 'Oh, they actually fix it for you.', 'start': 5272.938, 'duration': 1.201}, {'end': 5276.161, 'text': "That's pretty smart.", 'start': 5275.5, 'duration': 0.661}, {'end': 5283.567, 'text': "So I guess for some reason, the slash, I'm guessing maybe this has to do with the maybe SAS module or something, I'm not really sure.", 'start': 5277.142, 'duration': 6.425}, {'end': 5289.692, 'text': 'So instead of division, you just go math dot div, and then say whatever.', 'start': 5284.448, 'duration': 5.244}, {'end': 5293.195, 'text': 'And instead of the division is just a comma.', 'start': 5289.712, 'duration': 3.483}, {'end': 5297.939, 'text': "So let's go back into our code and change that.", 'start': 5293.956, 'duration': 3.983}, {'end': 5300.281, 'text': 'Wow, lots of new changes in SAS recently.', 'start': 5298.299, 'duration': 1.982}, {'end': 5303.862, 'text': 'This is in our function SAS file.', 'start': 5302.261, 'duration': 1.601}, {'end': 5306.784, 'text': "So, okay, let's just make sure.", 'start': 5304.863, 'duration': 1.921}, {'end': 5315.249, 'text': "So instead of this thing here, we're going to say math.div.", 'start': 5306.804, 'duration': 8.445}, {'end': 5318.831, 'text': "Okay And then there's another error.", 'start': 5316.509, 'duration': 2.322}, {'end': 5320.632, 'text': "There's no module with a namespace math.", 'start': 5318.851, 'duration': 1.781}, {'end': 5322.473, 'text': 'So I think I need to import that.', 'start': 5320.772, 'duration': 1.701}, {'end': 5326.475, 'text': "It's like a separate SAS module thing.", 'start': 5323.594, 'duration': 2.881}, {'end': 5329.117, 'text': "Let's look that up.", 'start': 5328.496, 'duration': 0.621}, {'end': 5330.918, 'text': 'So SAS math.', 'start': 5329.157, 'duration': 1.761}, {'end': 5334.817, 'text': 'I think we need to do an explicit import.', 'start': 5332.355, 'duration': 2.462}, {'end': 5337.499, 'text': 'Okay, sass math.', 'start': 5336.398, 'duration': 1.101}, {'end': 5344.083, 'text': "So it's part of the built-in modules here.", 'start': 5342.222, 'duration': 1.861}, {'end': 5347.666, 'text': "So let's look if they tell you the best way to do this.", 'start': 5344.103, 'duration': 3.563}, {'end': 5349.847, 'text': "Okay, so here's an example.", 'start': 5348.727, 'duration': 1.12}, {'end': 5352.469, 'text': 'Use sass colon color.', 'start': 5350.868, 'duration': 1.601}, {'end': 5353.93, 'text': 'And this is for the color module.', 'start': 5352.629, 'duration': 1.301}, {'end': 5355.811, 'text': 'And this is the math module.', 'start': 5354.711, 'duration': 1.1}, {'end': 5359.294, 'text': "So I'm assuming use sass math.", 'start': 5355.832, 'duration': 3.462}, {'end': 5369.704, 'text': "So we'll have to add this at the top of this for use sass math so that this math.div is accessible.", 'start': 5360.717, 'duration': 8.987}, {'end': 5375.228, 'text': "Because before, since we didn't import the math module, it doesn't know what this math.div even is.", 'start': 5370.184, 'duration': 5.044}, {'end': 5379.791, 'text': "So hopefully, I think that's the only other error that we saw.", 'start': 5376.349, 'duration': 3.442}, {'end': 5382.393, 'text': "So now we've hopefully fixed this.", 'start': 5379.811, 'duration': 2.582}, {'end': 5389.078, 'text': "We're going to have to do a control C to exit out of our gulp task and rerun it.", 'start': 5382.593, 'duration': 6.485}, {'end': 5391.353, 'text': 'Alright, no errors.', 'start': 5390.632, 'duration': 0.721}, {'end': 5394.536, 'text': 'Yay So we loaded the website.', 'start': 5391.853, 'duration': 2.683}, {'end': 5398.64, 'text': 'So we just want to make sure that everything is loaded.', 'start': 5394.996, 'duration': 3.644}, {'end': 5400.562, 'text': "So I'm gonna go back to the right side.", 'start': 5398.66, 'duration': 1.902}, {'end': 5406.067, 'text': 'So I want to make sure that our console log messages Yep, hello.', 'start': 5401.523, 'duration': 4.544}, {'end': 5408.129, 'text': 'So that loaded, which is good.', 'start': 5406.888, 'duration': 1.241}, {'end': 5419.038, 'text': 'And then the second thing I want to check is going back into our code and opening up in our dist folder the script.js file.', 'start': 5408.83, 'duration': 10.208}, {'end': 5420.839, 'text': "so that's there, that's good.", 'start': 5419.038, 'duration': 1.801}, {'end': 5423.24, 'text': 'and then our final css file.', 'start': 5420.839, 'duration': 2.401}, {'end': 5425.461, 'text': "so let's take a look here.", 'start': 5423.24, 'duration': 2.221}, {'end': 5434.865, 'text': "i'll do an alt z to word wrap so we can see our files here we have our global files from the boilerplate, which is great,", 'start': 5425.461, 'duration': 9.404}, {'end': 5438.907, 'text': 'and then we have the card styles that i added and the toggle button.', 'start': 5434.865, 'duration': 4.042}, {'end': 5441.171, 'text': 'Hey, it looks pretty good.', 'start': 5440.35, 'duration': 0.821}, {'end': 5445.214, 'text': "Let's do another test in our index.html file.", 'start': 5441.591, 'duration': 3.623}, {'end': 5450.698, 'text': "I'm just going to use the h1 tag since I created some styles for that.", 'start': 5445.574, 'duration': 5.124}], 'summary': 'Troubleshooting and fixing issues with dart sas while working on website development.', 'duration': 260.609, 'max_score': 5190.089, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI5190089.jpg'}, {'end': 5655.869, 'src': 'embed', 'start': 5619.034, 'weight': 5, 'content': [{'end': 5624.336, 'text': "Because obviously you don't want to go all the way across, because then that kind of makes it not very readable.", 'start': 5619.034, 'duration': 5.302}, {'end': 5628.878, 'text': 'So if we look at the design here, we click on this rectangle.', 'start': 5625.497, 'duration': 3.381}, {'end': 5630.939, 'text': 'It tells us that it is 1110 pixels wide.', 'start': 5628.958, 'duration': 1.981}, {'end': 5635.822, 'text': "So that's what our container max width is going to be.", 'start': 5630.959, 'duration': 4.863}, {'end': 5642.105, 'text': "So we're going to come back to this when we start writing our styles, but just in general, it's good to see what this is set up.", 'start': 5635.982, 'duration': 6.123}, {'end': 5647.608, 'text': 'And I want to see how this grid layout changes from desktop to mobile.', 'start': 5643.526, 'duration': 4.082}, {'end': 5650.49, 'text': 'So on desktop, we have this four column grid.', 'start': 5647.689, 'duration': 2.801}, {'end': 5655.869, 'text': 'If we scoot over to the mobile design, it stacks to one column.', 'start': 5651.111, 'duration': 4.758}], 'summary': 'Web design uses 1110 pixels max width and switches from four to one column grid from desktop to mobile.', 'duration': 36.835, 'max_score': 5619.034, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI5619034.jpg'}, {'end': 5699.34, 'src': 'embed', 'start': 5672.796, 'weight': 7, 'content': [{'end': 5680.619, 'text': "If we look on the right side, it is using the inter font, which we added to the site already, and it says it's bold and 28 pixels tall.", 'start': 5672.796, 'duration': 7.823}, {'end': 5684.015, 'text': "So that's the desktop style.", 'start': 5682.355, 'duration': 1.66}, {'end': 5685.956, 'text': "So let's see if it's any different for mobile.", 'start': 5684.035, 'duration': 1.921}, {'end': 5690.997, 'text': "So we'll just go and Figma kind of click until we select just the headline text.", 'start': 5686.716, 'duration': 4.281}, {'end': 5694.838, 'text': 'And it looks like it is inter bold and 24 pixels.', 'start': 5691.498, 'duration': 3.34}, {'end': 5699.34, 'text': 'So the H1 tag, this is going to be the H1 tag goes from 24 pixels and mobile to.', 'start': 5695.459, 'duration': 3.881}], 'summary': 'The desktop headline is in inter bold at 28px, while the mobile version is 24px.', 'duration': 26.544, 'max_score': 5672.796, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI5672796.jpg'}, {'end': 5753.582, 'src': 'embed', 'start': 5722.296, 'weight': 8, 'content': [{'end': 5725.817, 'text': "And I think just the last thing was, let's look at the sort of body text for this.", 'start': 5722.296, 'duration': 3.521}, {'end': 5728.257, 'text': 'This is 12 pixels.', 'start': 5726.897, 'duration': 1.36}, {'end': 5728.897, 'text': "It's pretty small.", 'start': 5728.337, 'duration': 0.56}, {'end': 5731.798, 'text': "So I'm guessing it's not going to get any smaller on mobile.", 'start': 5729.677, 'duration': 2.121}, {'end': 5734.438, 'text': 'Uh, yeah, 12 pixels.', 'start': 5732.678, 'duration': 1.76}, {'end': 5737.259, 'text': 'So the numbers look pretty much the same as well.', 'start': 5734.578, 'duration': 2.681}, {'end': 5740.159, 'text': "So there's not a ton of changes between desktop and mobile.", 'start': 5737.519, 'duration': 2.64}, {'end': 5745.48, 'text': 'There are some layout changes, obviously going from the four column to one column on mobile.', 'start': 5740.759, 'duration': 4.721}, {'end': 5747.541, 'text': "Let's look at one more thing.", 'start': 5746.04, 'duration': 1.501}, {'end': 5753.582, 'text': "And that is, you know, when you have items in grid, whether you're building it with Flexbox or CSS grid.", 'start': 5747.561, 'duration': 6.021}], 'summary': 'Desktop and mobile have similar font size. layout changes from four to one column on mobile.', 'duration': 31.286, 'max_score': 5722.296, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI5722296.jpg'}, {'end': 5797.742, 'src': 'embed', 'start': 5761.683, 'weight': 9, 'content': [{'end': 5762.484, 'text': "It's probably going to be the same.", 'start': 5761.683, 'duration': 0.801}, {'end': 5765.185, 'text': 'So Facebook, Twitter, Instagram, YouTube on mobile.', 'start': 5762.784, 'duration': 2.401}, {'end': 5765.865, 'text': "So that's the same.", 'start': 5765.285, 'duration': 0.58}, {'end': 5772.568, 'text': "And I did want to check on the order of this bottom grid because you can see it's Facebook has two cards.", 'start': 5766.185, 'duration': 6.383}, {'end': 5773.548, 'text': 'Instagram is two cards.', 'start': 5772.608, 'duration': 0.94}, {'end': 5774.709, 'text': 'They each have two cards.', 'start': 5773.608, 'duration': 1.101}, {'end': 5777.49, 'text': "So let's see what they do on mobile for that.", 'start': 5775.409, 'duration': 2.081}, {'end': 5781.596, 'text': 'So if we scroll down here, it looks like the orders are the same.', 'start': 5778.695, 'duration': 2.901}, {'end': 5785.338, 'text': "So it's Facebook has two cars, Instagram, Twitter, and then YouTube.", 'start': 5781.676, 'duration': 3.662}, {'end': 5790.259, 'text': 'And I did want to check on that, just because, you know, I could imagine, maybe on mobile.', 'start': 5785.958, 'duration': 4.301}, {'end': 5797.742, 'text': "I don't know why they do this, but you know what if it was ordered by page views of Facebook and then profile views of Instagram and things like that,", 'start': 5790.259, 'duration': 7.483}], 'summary': 'Analyzing mobile layout for facebook, twitter, instagram, youtube, noting order and card numbers.', 'duration': 36.059, 'max_score': 5761.683, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI5761683.jpg'}], 'start': 4818.269, 'title': 'Setting up gulp, troubleshooting, and design review', 'summary': 'Covers setting up gulp for web development, including minifying javascript, using browsersync, troubleshooting gulp sass installation errors and reverting to version 4, and the importance of design review and implementation for desktop and mobile views, emphasizing layout, text sizes, and grid items.', 'chapters': [{'end': 4981.839, 'start': 4818.269, 'title': 'Setting up gulp for web development', 'summary': 'Covers setting up gulp for web development, including minifying javascript, using browsersync to sync a local server and files, and running tasks for sass, javascript, and watching for changes.', 'duration': 163.57, 'highlights': ['Setting up BrowserSync to sync a local server and files, automatically reloading the local website on any changes, saving time and improving efficiency. Automatic reload on local website changes', 'Exporting the default Gulp task to run all tasks, including Sass, JavaScript, serving up the BrowserSync server, initializing it, and running the watch task to detect changes and reload the website. Running all tasks in the default Gulp task', 'Using Gulp to minify JavaScript files, setting the destination of the compiled file and saving the source map in the same location for improved performance and debugging. Minifying JavaScript files and saving source map']}, {'end': 5490.681, 'start': 4981.879, 'title': 'Troubleshooting gulp sass installation', 'summary': 'Details troubleshooting the installation of gulp sass, encountering errors with version 5, reverting to version 4, and resolving deprecation warnings by updating syntax, importing modules, and ensuring successful website loading and style application.', 'duration': 508.802, 'highlights': ['Encountered error with Gulp Sass version 5, leading to a search for a solution online, and found that version 5 no longer includes a default compiler, necessitating a separate installation (relevance score: 9)', 'Discovered recent update to Gulp Sass version 5, requiring installation of the compiler separately and found documentation for resolving the issue (relevance score: 8)', "Resolved deprecation warnings by updating syntax from division to 'math.div' and importing the math module, ensuring successful loading and application of website styles (relevance score: 7)"]}, {'end': 5799.003, 'start': 5491.042, 'title': 'Design review and implementation', 'summary': 'Discusses the importance of reviewing the design before coding, examining the layout, text sizes, and grid items for desktop and mobile, and ensuring consistency between the two views, with a focus on container size, grid layout, text sizes, and item order.', 'duration': 307.961, 'highlights': ["The container max width is 1110 pixels, ensuring readability and content organization for wide monitors. The container's maximum width is 1110 pixels, providing a clear guideline for content width and ensuring readability and organization for users with wide monitors.", 'The layout changes from a four-column grid on desktop to a single column on mobile, reflecting a common design pattern for multi-column content. The layout transitions from a four-column grid on desktop to a single column on mobile, aligning with a common design pattern for multi-column content on different devices.', 'The headline text size shifts from 28 pixels on desktop to 24 pixels on mobile, maintaining a consistent font and adapting to different screen sizes. The headline text size adjusts from 28 pixels on desktop to 24 pixels on mobile, ensuring consistent font usage while adapting to varying screen sizes.', 'The body text remains at 12 pixels for both desktop and mobile, indicating minimal changes in text size between the two views. The body text maintains a 12-pixel size for both desktop and mobile, suggesting minimal alterations in text size between the two views.', 'The order of grid items remains consistent between desktop and mobile, maintaining the sequence of Facebook, Twitter, Instagram, and YouTube. The order of grid items remains consistent between desktop and mobile, preserving the sequence of Facebook, Twitter, Instagram, and YouTube, ensuring coherence across different screen sizes.']}], 'duration': 980.734, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI4818269.jpg', 'highlights': ['Automatic reload on local website changes', 'Running all tasks in the default Gulp task', 'Minifying JavaScript files and saving source map', 'Encountered error with Gulp Sass version 5, leading to a search for a solution online, and found that version 5 no longer includes a default compiler, necessitating a separate installation', 'Discovered recent update to Gulp Sass version 5, requiring installation of the compiler separately and found documentation for resolving the issue', "The container's maximum width is 1110 pixels, providing a clear guideline for content width and ensuring readability and organization for users with wide monitors", 'The layout transitions from a four-column grid on desktop to a single column on mobile, aligning with a common design pattern for multi-column content on different devices', 'The headline text size adjusts from 28 pixels on desktop to 24 pixels on mobile, ensuring consistent font usage while adapting to varying screen sizes', 'The body text maintains a 12-pixel size for both desktop and mobile, suggesting minimal alterations in text size between the two views', 'The order of grid items remains consistent between desktop and mobile, preserving the sequence of Facebook, Twitter, Instagram, and YouTube, ensuring coherence across different screen sizes']}, {'end': 9528.544, 'segs': [{'end': 5846.87, 'src': 'embed', 'start': 5820.277, 'weight': 0, 'content': [{'end': 5825.261, 'text': "obviously we could do that if we had to, but it's sort of nice when you don't have to worry about the order changing.", 'start': 5820.277, 'duration': 4.984}, {'end': 5828.065, 'text': 'And I think the toggle is the same as well.', 'start': 5826.024, 'duration': 2.041}, {'end': 5829.465, 'text': 'So yeah.', 'start': 5828.725, 'duration': 0.74}, {'end': 5830.165, 'text': 'So there we go.', 'start': 5829.665, 'duration': 0.5}, {'end': 5833.986, 'text': 'Okay So now we can start kind of building out our styles.', 'start': 5830.425, 'duration': 3.561}, {'end': 5840.348, 'text': "And I think I'm going to focus on just building the dark mode version of this dashboard in today's video.", 'start': 5834.667, 'duration': 5.681}, {'end': 5846.87, 'text': "And then we'll worry about the light mode and then the dark light toggle logic and all of that in the next video.", 'start': 5840.869, 'duration': 6.001}], 'summary': "Planning to build dark mode version of dashboard in today's video.", 'duration': 26.593, 'max_score': 5820.277, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI5820277.jpg'}, {'end': 6039.299, 'src': 'embed', 'start': 6013.663, 'weight': 1, 'content': [{'end': 6019.706, 'text': "So we're going to say class of container, and I'm just going to say max width.", 'start': 6013.663, 'duration': 6.043}, {'end': 6024.836, 'text': "And it's 1100 pixels, but we want to use REMs because it's more accessible.", 'start': 6021.055, 'duration': 3.781}, {'end': 6026.736, 'text': 'So we use our REM function.', 'start': 6024.956, 'duration': 1.78}, {'end': 6035.998, 'text': "So REM 1110, and we don't need to use pixels on that because it will automatically add the unit to it.", 'start': 6026.816, 'duration': 9.182}, {'end': 6039.299, 'text': 'And this is max width just in total.', 'start': 6037.098, 'duration': 2.201}], 'summary': 'Setting max width of container to 1100 pixels using rems for accessibility.', 'duration': 25.636, 'max_score': 6013.663, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI6013663.jpg'}, {'end': 6163.441, 'src': 'embed', 'start': 6134.679, 'weight': 2, 'content': [{'end': 6138.464, 'text': 'Now, this is going to be our mobile default styles.', 'start': 6134.679, 'duration': 3.785}, {'end': 6146.234, 'text': "We don't really want the padding for the desktop because then it's not going to be fitting the design and being 1110 pixels on desktop.", 'start': 6138.564, 'duration': 7.67}, {'end': 6148.977, 'text': "So I'm going to use my breakpoint.", 'start': 6146.294, 'duration': 2.683}, {'end': 6150.859, 'text': 'So breakpoint.', 'start': 6149.358, 'duration': 1.501}, {'end': 6153.503, 'text': 'And large and up.', 'start': 6152.541, 'duration': 0.962}, {'end': 6156.869, 'text': "And we're going to say padding here is going to be zero.", 'start': 6154.605, 'duration': 2.264}, {'end': 6158.332, 'text': 'So that looks pretty good.', 'start': 6156.889, 'duration': 1.443}, {'end': 6163.441, 'text': "And then I guess if you're curious, let's check out what the CSS, the final CSS looks like here.", 'start': 6158.893, 'duration': 4.548}], 'summary': 'Adjusting mobile default styles and setting padding to zero for large screens.', 'duration': 28.762, 'max_score': 6134.679, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI6134679.jpg'}, {'end': 6839.475, 'src': 'embed', 'start': 6803.619, 'weight': 3, 'content': [{'end': 6805.9, 'text': 'Okay So I think I might sort of copy this approach.', 'start': 6803.619, 'duration': 2.281}, {'end': 6808.461, 'text': "Let's check out this link.", 'start': 6807.56, 'duration': 0.901}, {'end': 6810.101, 'text': "I'm designing and building toggle switches.", 'start': 6808.681, 'duration': 1.42}, {'end': 6816.625, 'text': 'Sarah is a very like experienced, authoritative person in the world of CSS.', 'start': 6812.563, 'duration': 4.062}, {'end': 6819.446, 'text': 'So she is a good source for stuff like this.', 'start': 6816.645, 'duration': 2.801}, {'end': 6821.567, 'text': "Let's see.", 'start': 6819.466, 'duration': 2.101}, {'end': 6823.588, 'text': "I'm just trying to find what markup she was using.", 'start': 6821.627, 'duration': 1.961}, {'end': 6831.872, 'text': "Okay There's a code pen for it.", 'start': 6823.608, 'duration': 8.264}, {'end': 6837.835, 'text': 'There we go.', 'start': 6831.892, 'duration': 5.943}, {'end': 6839.475, 'text': 'Make a little space there.', 'start': 6838.635, 'duration': 0.84}], 'summary': 'Designing and building toggle switches with sarah, an experienced css authority.', 'duration': 35.856, 'max_score': 6803.619, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI6803619.jpg'}, {'end': 7063.237, 'src': 'embed', 'start': 7037.047, 'weight': 6, 'content': [{'end': 7042.672, 'text': "The background, which is this gray thing I'm guessing here, and then the switcher, which is the pink button thing.", 'start': 7037.047, 'duration': 5.625}, {'end': 7047.356, 'text': "And those are set to aria-hidden equals true because you don't need that with a screen reader.", 'start': 7043.593, 'duration': 3.763}, {'end': 7050.709, 'text': "So.. Yeah, I really like Sarah's approach here.", 'start': 7048.097, 'duration': 2.612}, {'end': 7055.392, 'text': "Kind of makes sense once you delve into it and look at the words that you don't understand.", 'start': 7050.969, 'duration': 4.423}, {'end': 7057.433, 'text': "So I think we'll maybe do the same thing.", 'start': 7055.412, 'duration': 2.021}, {'end': 7063.237, 'text': "I might actually put a div in here instead of a span just because I don't know, I do that.", 'start': 7057.453, 'duration': 5.784}], 'summary': "Discussion about setting aria-hidden to true for screen readers and considering sarah's approach for implementation.", 'duration': 26.19, 'max_score': 7037.047, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI7037047.jpg'}, {'end': 7589.843, 'src': 'embed', 'start': 7561.296, 'weight': 4, 'content': [{'end': 7564.578, 'text': "But in our case, we're going to say header and then headerTitle.", 'start': 7561.296, 'duration': 3.282}, {'end': 7570.34, 'text': "So now what we can do is for the toggle, I'm actually going to add another class using the header name.", 'start': 7564.978, 'duration': 5.362}, {'end': 7574.701, 'text': "And we're going to add the styles for the layout in the headerSass thing.", 'start': 7571.06, 'duration': 3.641}, {'end': 7578.363, 'text': 'So headerToggle, oops, not Tiggle, Toggle.', 'start': 7574.761, 'duration': 3.602}, {'end': 7587.842, 'text': "I know this seems a little bit redundant, but it's going to allow us to keep things here in the header styles.", 'start': 7579.898, 'duration': 7.944}, {'end': 7589.843, 'text': 'And this is to control the layout.', 'start': 7588.262, 'duration': 1.581}], 'summary': "Adding a new class 'headertoggle' to control the layout.", 'duration': 28.547, 'max_score': 7561.296, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI7561296.jpg'}, {'end': 8028.477, 'src': 'embed', 'start': 8000.249, 'weight': 5, 'content': [{'end': 8004.211, 'text': "Because if I add padding on desktop styles, it'll sort of cut into the width of the content.", 'start': 8000.249, 'duration': 3.962}, {'end': 8012.468, 'text': 'In the design file itself, this is like the whole is going all the way to the sides.', 'start': 8006.165, 'duration': 6.303}, {'end': 8015.95, 'text': "So yeah, let's adjust this.", 'start': 8012.909, 'duration': 3.041}, {'end': 8019.372, 'text': "So this is, again, something that's very common.", 'start': 8017.171, 'duration': 2.201}, {'end': 8023.054, 'text': "So let's change this to 1,110.", 'start': 8020.173, 'duration': 2.881}, {'end': 8028.477, 'text': "And then I'll just zoom out on my browser so you can see desktop styles better.", 'start': 8023.054, 'duration': 5.423}], 'summary': 'Adjusting desktop styles to 1,110 to prevent padding cutting into content width.', 'duration': 28.228, 'max_score': 8000.249, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI8000249.jpg'}], 'start': 5799.123, 'title': 'Building dark mode dashboard and styling components', 'summary': 'Discusses building a dark mode version of a dashboard, setting container size and padding, html markup and styling, designing toggle switches markup, and styling components such as toggle, header, and radio buttons. it covers various aspects including layout changes, container size, padding, responsive styling, toggle switch markup, and visually appealing website design.', 'chapters': [{'end': 5960.981, 'start': 5799.123, 'title': 'Building dark mode dashboard', 'summary': 'Discusses building a dark mode version of a dashboard, focusing on styling and layout changes for different social media platforms, with the intention to later address light mode and toggle logic.', 'duration': 161.858, 'highlights': ['The chapter discusses building a dark mode version of a dashboard The focus is on building the dark mode version of a dashboard, with the intention to address light mode and toggle logic in the next video.', 'Focusing on styling and layout changes for different social media platforms The approach involves grouping content by social media platform and tracking different metrics, with specific layout changes for mobile and desktop.', 'Emphasizing the intention to later address light mode and toggle logic The plan is to initially focus on the dark mode version of the dashboard and later address the light mode and toggle logic in a subsequent video.']}, {'end': 6206.505, 'start': 5960.981, 'title': 'Setting container size and padding', 'summary': 'Covers setting the container size to a maximum width of 1100 pixels using rem units, applying padding globally using a helper class, and utilizing media queries for different device sizes.', 'duration': 245.524, 'highlights': ['The chapter covers setting the container size to a maximum width of 1100 pixels using REM units, applying padding globally using a helper class, and utilizing media queries for different device sizes.', 'The media query for large and up sets the padding to zero, ensuring the design fits the 1110-pixel desktop size.', 'Applying a global padding of 25 pixels on the left and right for all elements to avoid specifying it individually, resulting in efficient and consistent styling.']}, {'end': 6727.784, 'start': 6207.605, 'title': 'Html markup and styling', 'summary': 'Covers the process of building html markup for a webpage, using semantic html elements, and applying responsive styling for mobile and desktop, including adjusting padding and breakpoints based on the design requirements.', 'duration': 520.179, 'highlights': ['Applying responsive styling for mobile and desktop, including adjusting padding and breakpoints based on the design requirements The speaker discusses the process of applying different padding for mobile and desktop, setting width limits, and centering content for desktop, while adjusting breakpoints based on design requirements.', "Using semantic HTML elements for building HTML markup The speaker emphasizes the use of semantic HTML elements such as main, section, and article to structure the webpage's content, ensuring it is directly related to the central topic of the document.", "Applying BEM approach for styling with SAS The speaker mentions using the BEM (Block Element Modifier) approach for styling with SAS, matching tag names with class names, and applying the 'header' class within the header tag to achieve consistent and organized styling."]}, {'end': 7240.411, 'start': 6727.784, 'title': 'Designing toggle switches markup', 'summary': "Discusses creating a toggle switch markup by referencing different sources, particularly sarah's approach, and implements a field set with aria-label and a role of radio group, as well as encapsulating both toggles in a div with appropriate labels and inputs.", 'duration': 512.627, 'highlights': ["The chapter references different sources and particularly focuses on Sarah's approach for creating a toggle switch markup. The speaker explores various sources, particularly referencing Sarah's approach for designing toggle switches.", 'The chapter implements a field set with aria-label and a role of radio group for the toggle switch markup. The speaker implements a field set with aria-label and a role of radio group for the toggle switch markup.', 'Encapsulating both toggles in a div and providing appropriate labels and inputs is a significant aspect of the markup creation. The chapter emphasizes encapsulating both toggles in a div with appropriate labels and inputs as a crucial aspect of the markup creation.']}, {'end': 7717.677, 'start': 7245.609, 'title': 'Styling toggle and header', 'summary': 'Covers the process of styling a toggle component and a header using sass, including setting classes, adding styles for layout, and using flexbox for alignment, aiming to create a visually appealing website.', 'duration': 472.068, 'highlights': ['The chapter covers the process of styling a toggle component and a header using Sass. The transcript discusses the process of styling a toggle component and a header using Sass for a visually appealing website.', 'Adding styles for layout and using flexbox for alignment. The speaker explains the process of adding styles for layout and using flexbox for alignment to create a visually appealing website.', 'Setting classes for the toggle and header elements. The speaker discusses the process of setting classes for the toggle and header elements to apply specific styles for each component.']}, {'end': 8526.774, 'start': 7717.697, 'title': 'Styling website header', 'summary': 'Details the process of styling the website header, including setting the background color, adjusting font sizes for different viewports, and adding spacing to achieve a more accurate visual representation of the design.', 'duration': 809.077, 'highlights': ['Adjusting font sizes for different viewports The chapter demonstrates adjusting font sizes for the h1 tag to 28 for desktop and 24 for mobile, ensuring responsiveness and visual consistency across different devices.', "Setting the background color and adjusting padding based on viewport width The process involves setting the background color of the entire page, adjusting padding when the viewport's width is below 1110, and making adjustments to ensure the content width matches the design file.", 'Adding spacing and aligning items to achieve vertical centering The chapter covers adding margin bottom of 36 pixels to the header element, aligning items to center vertically, and adding 46 pixels of space to the container class for improved visual spacing and alignment.']}, {'end': 9528.544, 'start': 8529.218, 'title': 'Styling toggle and radio buttons', 'summary': "Discusses styling a toggle and radio buttons, referencing sarah's code, and using figma to export css rules, with the goal of achieving a visually appealing design and improving accessibility for keyboard navigation.", 'duration': 999.326, 'highlights': ["The chapter discusses styling a toggle and radio buttons, referencing Sarah's code. The speaker explores the process of styling a toggle and radio buttons, referencing Sarah's code and studying the principles behind it to understand how it works.", 'Using Figma to export CSS rules for linear gradient, aiding in achieving a visually appealing design. The speaker utilizes Figma to export CSS rules for a linear gradient, enabling the creation of a visually appealing design for the toggle background.', 'The focus on improving accessibility for keyboard navigation by studying existing code and adding comments for bug fixing. The speaker emphasizes the importance of improving accessibility for keyboard navigation by studying existing code and adding comments to aid in bug fixing and efficient troubleshooting.']}], 'duration': 3729.421, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI5799123.jpg', 'highlights': ['The chapter discusses building a dark mode version of a dashboard with the intention to address light mode and toggle logic in the next video.', 'The chapter covers setting the container size to a maximum width of 1100 pixels using REM units, applying padding globally using a helper class, and utilizing media queries for different device sizes.', 'Applying responsive styling for mobile and desktop, including adjusting padding and breakpoints based on the design requirements.', "The chapter references different sources and particularly focuses on Sarah's approach for creating a toggle switch markup.", 'The chapter covers the process of styling a toggle component and a header using Sass, adding styles for layout and using flexbox for alignment.', 'Adjusting font sizes for different viewports and setting the background color and adjusting padding based on viewport width.', "The chapter discusses styling a toggle and radio buttons, referencing Sarah's code, using Figma to export CSS rules for linear gradient, and focusing on improving accessibility for keyboard navigation."]}, {'end': 10734.543, 'segs': [{'end': 9736.342, 'src': 'embed', 'start': 9701.381, 'weight': 0, 'content': [{'end': 9703.523, 'text': 'in relation to the headline in the header.', 'start': 9701.381, 'duration': 2.142}, {'end': 9706.485, 'text': 'For these styles for positioning the toggle elements.', 'start': 9703.683, 'duration': 2.802}, {'end': 9714.452, 'text': "I'm going to put them in the toggle SCSS file because it's not really related to the header layout, but it's only related to the toggle elements.", 'start': 9706.485, 'duration': 7.967}, {'end': 9716.234, 'text': 'component layout itself.', 'start': 9715.032, 'duration': 1.202}, {'end': 9716.815, 'text': 'this is useful.', 'start': 9716.234, 'duration': 0.581}, {'end': 9721.763, 'text': 'if we want to reuse a toggle on another page, we could just, you know, add the same markup again,', 'start': 9716.815, 'duration': 4.948}, {'end': 9725.449, 'text': 'and we know everything will be the same as on this page.', 'start': 9721.763, 'duration': 3.686}, {'end': 9736.342, 'text': "so toggle i'm going to say display grid, and we're doing this by default because we want the toggle to look the same on mobile and desktop.", 'start': 9726.019, 'duration': 10.323}], 'summary': 'Toggle elements positioned using scss for consistent display on mobile and desktop.', 'duration': 34.961, 'max_score': 9701.381, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI9701381.jpg'}, {'end': 9787.788, 'src': 'embed', 'start': 9751.995, 'weight': 1, 'content': [{'end': 9754.076, 'text': "because it's a little bit simpler in some cases.", 'start': 9751.995, 'duration': 2.081}, {'end': 9755.677, 'text': "but let's just try grid.", 'start': 9754.076, 'duration': 1.601}, {'end': 9761.361, 'text': "So repeat three, let's just do three, one FR for now.", 'start': 9755.957, 'duration': 5.404}, {'end': 9763.862, 'text': 'There we go.', 'start': 9761.381, 'duration': 2.481}, {'end': 9771.047, 'text': 'And now with grid, we need to kind of position the elements explicitly.', 'start': 9764.763, 'duration': 6.284}, {'end': 9773.741, 'text': 'Hmm, might be a bit complicated.', 'start': 9771.067, 'duration': 2.674}, {'end': 9787.788, 'text': "so it's going to be this is the parent and then the toggle wrapper, so label dark and then light and then system preference.", 'start': 9773.741, 'duration': 14.047}], 'summary': 'Testing grid with 3 repetitions, 1 fr. positioning elements explicitly may be complicated.', 'duration': 35.793, 'max_score': 9751.995, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI9751995.jpg'}, {'end': 9941.812, 'src': 'embed', 'start': 9912.804, 'weight': 3, 'content': [{'end': 9916.087, 'text': "Oh, we're back to the, this design and check out the layout.", 'start': 9912.804, 'duration': 3.283}, {'end': 9919.151, 'text': "So it's going to be first label is going to be in the first column.", 'start': 9916.227, 'duration': 2.924}, {'end': 9924.456, 'text': 'The toggle itself is going to be in the middle column and the last label will be in the last column.', 'start': 9919.511, 'duration': 4.945}, {'end': 9927.179, 'text': 'So this one will be in the first column.', 'start': 9925.738, 'duration': 1.441}, {'end': 9931.444, 'text': "So I haven't done this in a while grid column.", 'start': 9928.1, 'duration': 3.344}, {'end': 9936.189, 'text': 'And this will be the first column.', 'start': 9933.528, 'duration': 2.661}, {'end': 9941.812, 'text': 'So one and it ends in two, which I think is the correct syntax.', 'start': 9936.229, 'duration': 5.583}], 'summary': 'Designing a layout with first column, middle toggle, and last column.', 'duration': 29.008, 'max_score': 9912.804, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI9912804.jpg'}, {'end': 10382.697, 'src': 'embed', 'start': 10353.576, 'weight': 2, 'content': [{'end': 10355.757, 'text': 'So gap will be 12 pixels.', 'start': 10353.576, 'duration': 2.181}, {'end': 10360.12, 'text': "So that'll add space on all sides of each cell.", 'start': 10355.857, 'duration': 4.263}, {'end': 10362.021, 'text': "So let's do that.", 'start': 10361.34, 'duration': 0.681}, {'end': 10364.823, 'text': 'And this is something that you add to the grid parent.', 'start': 10362.961, 'duration': 1.862}, {'end': 10371.69, 'text': "So we'll go gap rem 12.", 'start': 10365.243, 'duration': 6.447}, {'end': 10373.671, 'text': "All right, it's looking better and better every time.", 'start': 10371.69, 'duration': 1.981}, {'end': 10378.755, 'text': 'Now the last thing I want to do is add the toggle like circle switch thing.', 'start': 10374.352, 'duration': 4.403}, {'end': 10382.697, 'text': "So that one is, looks like it's the same color as the background.", 'start': 10379.695, 'duration': 3.002}], 'summary': 'Setting gap at 12 pixels for space around cells and adding toggle switch.', 'duration': 29.121, 'max_score': 10353.576, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI10353576.jpg'}], 'start': 9528.564, 'title': 'Positioning labels, css grid, toggle elements and styling', 'summary': 'Covers positioning labels using css grid, altering markup, toggling between dark, light, and system preference modes, testing grid layout design, and styling toggle buttons in css to enhance appearance and achieve consistent layout on mobile and desktop.', 'chapters': [{'end': 9721.763, 'start': 9528.564, 'title': 'Positioning labels using css grid', 'summary': 'Discusses the process of positioning labels using css grid, with a focus on altering markup and using css grid for layout, to enhance the presentation of toggle elements.', 'duration': 193.199, 'highlights': ['The chapter discusses the process of positioning labels using CSS Grid, with a focus on altering markup and using CSS Grid for layout, to enhance the presentation of toggle elements.', 'The speaker considers using CSS Grid for layout, as it allows for positioning labels where desired, which could enhance the presentation of toggle elements.', 'The speaker considers using Flexbox as an alternative for positioning labels, but ultimately decides to implement CSS Grid for its potential benefits.', 'The speaker plans to create a grid with three columns, labeled as label, toggle, middle label, and last label, and two rows to achieve the desired layout for the toggle elements.']}, {'end': 9877.203, 'start': 9721.763, 'title': 'Css grid layout for toggling', 'summary': 'Discusses implementing css grid layout for toggling between dark, light, and system preference modes, aiming for a consistent appearance on both mobile and desktop, and experimenting with positioning elements explicitly.', 'duration': 155.44, 'highlights': ['The chapter focuses on implementing CSS grid layout for consistent appearance on mobile and desktop, with three columns and experimenting with one fr.', 'The author is considering using inline block instead of grid due to its simplicity in some cases.', 'The author is experimenting with explicitly positioning elements within the grid layout for toggling between dark, light, and system preference modes.', "The author is exploring using the attribute selector in CSS to apply different styles based on the 'four' attribute, such as 'dark' or 'light'."]}, {'end': 10382.697, 'start': 9877.203, 'title': 'Grid layout design testing', 'summary': 'Involves testing and adjusting the grid layout design, positioning labels and toggles within columns and rows, setting absolute positions for elements, and adding space to cells using the gap property.', 'duration': 505.494, 'highlights': ['Testing and adjusting the grid layout design The chapter involves testing and adjusting the grid layout design to position labels and toggles within columns and rows.', 'Setting absolute positions for elements The process involves setting absolute positions for elements to ensure proper alignment within the grid layout.', 'Adding space to cells using the gap property The gap property is used to add space on all sides of each cell within the grid layout.']}, {'end': 10734.543, 'start': 10383.358, 'title': 'Styling toggle button in css', 'summary': 'Discusses the process of styling a toggle button using css, including setting left and right properties, applying transition elements, and position alignment, to achieve a desired visual appearance.', 'duration': 351.185, 'highlights': ['The toggle button is styled using left and right properties, with a transition element to create a smooth effect.', "The height of the toggle button is explicitly set to 18 pixels, and the position is adjusted using 'top' and 'left' properties.", "The system label's grid column is adjusted to occupy all rows, and the width of the toggle background is modified for visual alignment.", 'Firefox may not update the inspector in real-time, requiring switching between tabs for updates.']}], 'duration': 1205.979, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI9528564.jpg', 'highlights': ['The chapter discusses the process of positioning labels using CSS Grid and altering markup to enhance the presentation of toggle elements.', 'The chapter focuses on implementing CSS grid layout for consistent appearance on mobile and desktop, experimenting with one fr and explicitly positioning elements within the grid layout for toggling between dark, light, and system preference modes.', 'Testing and adjusting the grid layout design to position labels and toggles within columns and rows, setting absolute positions for elements, and adding space to cells using the gap property.', "The toggle button is styled using left and right properties, with a transition element to create a smooth effect, and the system label's grid column is adjusted to occupy all rows."]}, {'end': 12282.883, 'segs': [{'end': 11253.033, 'src': 'embed', 'start': 11213.385, 'weight': 0, 'content': [{'end': 11218.648, 'text': "Okay So now the next thing I want to do is see if we can add that transition state and let's test it again in the browser.", 'start': 11213.385, 'duration': 5.263}, {'end': 11220.068, 'text': "We'll toggle button.", 'start': 11219.368, 'duration': 0.7}, {'end': 11229.373, 'text': "We'll just say transition all 150 milliseconds ease in out, which is my favorite one.", 'start': 11220.088, 'duration': 9.285}, {'end': 11235.076, 'text': "It's working.", 'start': 11234.636, 'duration': 0.44}, {'end': 11238.88, 'text': 'Okay, that looks pretty good.', 'start': 11237.219, 'duration': 1.661}, {'end': 11243.004, 'text': "So we'll do that.", 'start': 11242.203, 'duration': 0.801}, {'end': 11246.027, 'text': "And that's on the button itself.", 'start': 11244.285, 'duration': 1.742}, {'end': 11253.033, 'text': 'Nice And then we need to do the positioning for the center one.', 'start': 11249.63, 'duration': 3.403}], 'summary': 'Tested transition state with transition all 150 milliseconds ease in out, and positioned the center button.', 'duration': 39.648, 'max_score': 11213.385, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI11213385.jpg'}, {'end': 11311.71, 'src': 'embed', 'start': 11281.928, 'weight': 1, 'content': [{'end': 11289.172, 'text': "So we're not having to manually type out toggle button because it kind of goes against what them is supposed to be able to give you.", 'start': 11281.928, 'duration': 7.244}, {'end': 11295.405, 'text': "So for the center one, I guess we'll just do..", 'start': 11290.723, 'duration': 4.682}, {'end': 11296.245, 'text': 'Sorry, remind me again.', 'start': 11295.405, 'duration': 0.84}, {'end': 11297.605, 'text': 'This is position absolute.', 'start': 11296.265, 'duration': 1.34}, {'end': 11304.347, 'text': 'Okay So the center position absolute, you need to do the old left 50%.', 'start': 11297.705, 'duration': 6.642}, {'end': 11307.188, 'text': "And then I guess I'll say right auto.", 'start': 11304.347, 'duration': 2.841}, {'end': 11311.71, 'text': 'And then you need to do a transform translate.', 'start': 11308.109, 'duration': 3.601}], 'summary': 'Discussing positioning and styling for toggle button in web development.', 'duration': 29.782, 'max_score': 11281.928, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI11281928.jpg'}, {'end': 11812.124, 'src': 'embed', 'start': 11769.128, 'weight': 2, 'content': [{'end': 11772.251, 'text': 'if i want to use, put all those things up there.', 'start': 11769.128, 'duration': 3.123}, {'end': 11775.134, 'text': 'do i want justify content and line items to also be on mobile?', 'start': 11772.251, 'duration': 2.883}, {'end': 11775.855, 'text': "i don't remember.", 'start': 11775.134, 'duration': 0.721}, {'end': 11789.352, 'text': 'And then title is going to be width of 100%, but only for mobile.', 'start': 11782.588, 'duration': 6.764}, {'end': 11797.956, 'text': 'Include breakpoint medium, width auto.', 'start': 11792.573, 'duration': 5.383}, {'end': 11801.778, 'text': "Let's just see if that works for now.", 'start': 11800.478, 'duration': 1.3}, {'end': 11806.401, 'text': 'Oh, and then the toggle wrapper, or sorry, the header toggle.', 'start': 11802.319, 'duration': 4.082}, {'end': 11808.442, 'text': 'Better toggle.', 'start': 11807.742, 'duration': 0.7}, {'end': 11812.124, 'text': "We're gonna go margin left auto.", 'start': 11808.462, 'duration': 3.662}], 'summary': 'Configuring mobile-specific styles for website elements and testing functionality.', 'duration': 42.996, 'max_score': 11769.128, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI11769128.jpg'}], 'start': 10739.706, 'title': 'Customizing ui elements', 'summary': 'Covers adjusting radio button and toggle button styling and positioning, ensuring proper alignment and functionality across devices, and improving mobile style for better design balance and functionality.', 'chapters': [{'end': 11281.528, 'start': 10739.706, 'title': 'Radio button styling and positioning', 'summary': 'Discusses the process of adjusting radio button styling, including setting the width and height, removing margins, and implementing selected styles with sibling selectors, while also addressing issues related to positioning and z-index.', 'duration': 541.822, 'highlights': ['The process of adjusting radio button styling includes setting the width and height, removing margins, and implementing selected styles with sibling selectors.', 'Addressing issues related to positioning and z-index, such as the order of elements affecting z-index and the use of sibling selectors for styling.', 'Implementing transition states on the toggle button for a smoother user experience.']}, {'end': 11598.867, 'start': 11281.928, 'title': 'Styling and positioning of toggle buttons', 'summary': 'Discusses the positioning and styling of toggle buttons, including using position absolute, transform translate, and adjusting dimensions and margins, to ensure proper alignment and functionality across different devices and screen sizes.', 'duration': 316.939, 'highlights': ['Using position absolute, transform translate, and adjusting dimensions and margins to ensure proper alignment and functionality across different devices and screen sizes.', 'Explaining the use of transform translate to shift the element based on its own width for proper centering.', 'Adjusting dimensions and margins, such as setting width and height values and adjusting margins, to ensure proper alignment and functionality of the toggle buttons.']}, {'end': 12282.883, 'start': 11600.146, 'title': 'Mobile style adjustment', 'summary': 'Details the process of adjusting the mobile style, including flexbox properties, margin adjustments, and label alignments, to achieve better design balance and functionality for the toggle switcher.', 'duration': 682.737, 'highlights': ['Adjusted flexbox properties for mobile layout to achieve better design balance and functionality for the toggle switcher. Flexbox properties were modified for the mobile layout to improve the design balance and functionality of the toggle switcher.', 'Made margin adjustments to center the elements for better visual balance in the mobile layout. Margins were modified to center the elements and improve visual balance in the mobile layout.', 'Aligned the labels and adjusted column gap for better presentation and functionality of the toggle switcher. Labels were aligned and column gap adjusted to enhance the presentation and functionality of the toggle switcher.']}], 'duration': 1543.177, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI10739706.jpg', 'highlights': ['Implementing transition states on the toggle button for a smoother user experience.', 'Using position absolute, transform translate, and adjusting dimensions and margins to ensure proper alignment and functionality across different devices and screen sizes.', 'Adjusted flexbox properties for mobile layout to achieve better design balance and functionality for the toggle switcher.']}, {'end': 13241.036, 'segs': [{'end': 12390.485, 'src': 'embed', 'start': 12349.428, 'weight': 0, 'content': [{'end': 12352.451, 'text': "Let's move this over here so we can see better.", 'start': 12349.428, 'duration': 3.023}, {'end': 12358.04, 'text': 'So block element modifier, and what that means is, when we look at the design,', 'start': 12353.737, 'duration': 4.303}, {'end': 12361.783, 'text': "we're not writing styles for every single element in this design all in one place.", 'start': 12358.04, 'duration': 3.743}, {'end': 12370.15, 'text': 'What we do, especially with our SAS files and the SAS partials, is we kind of break apart each of the design components into their own file.', 'start': 12362.324, 'duration': 7.826}, {'end': 12375.034, 'text': 'So we did this in the previous video, creating the styles for the header and the toggle,', 'start': 12370.29, 'duration': 4.744}, {'end': 12379.237, 'text': 'and they each had the styles in the header were in header.scss.', 'start': 12375.034, 'duration': 4.203}, {'end': 12382.68, 'text': 'Styles for the toggle were in the toggle.scss file.', 'start': 12379.918, 'duration': 2.762}, {'end': 12390.485, 'text': 'So you can see that SAS and BEM are a really good combination in terms of writing your styles in an organized and structured way.', 'start': 12383.16, 'duration': 7.325}], 'summary': 'Using bem and sas for organized and structured styles.', 'duration': 41.057, 'max_score': 12349.428, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI12349428.jpg'}, {'end': 12962.324, 'src': 'embed', 'start': 12937.826, 'weight': 2, 'content': [{'end': 12944.492, 'text': 'And again, we might be adding some more styles, because, you know, we can see that the cards are in a grid.', 'start': 12937.826, 'duration': 6.666}, {'end': 12950.016, 'text': "So we'll probably use either flexbox or grid to make sure that there are four columns on desktop.", 'start': 12945.172, 'duration': 4.844}, {'end': 12953.038, 'text': "And then of course, when you get to mobile, it's stacked to one column.", 'start': 12950.296, 'duration': 2.742}, {'end': 12962.324, 'text': 'So We do need some additional styles for that, but we like make some more generic class names to control the layout because I think I did add.', 'start': 12953.118, 'duration': 9.206}], 'summary': 'Adding styles for 4 columns on desktop and stacked layout on mobile using flexbox or grid.', 'duration': 24.498, 'max_score': 12937.826, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI12937826.jpg'}], 'start': 12282.903, 'title': 'Css naming, structuring, and styling', 'summary': 'Explores challenges of naming class names in css, demonstrates how to structure styles in scss files, discusses css block, element, and modifier concepts, and focuses on implementing grid layout for cards using flexbox or grid for responsive design.', 'chapters': [{'end': 12390.485, 'start': 12282.903, 'title': 'Css naming conventions and structuring styles', 'summary': 'Explores the challenges of naming class names in css, especially when using sas and following the bem naming convention, and demonstrates how to structure styles in scss files, emphasizing the benefits of using sas and bem for organized and structured styles.', 'duration': 107.582, 'highlights': ['The challenges of naming class names in CSS, especially when using SAS and following the BEM naming convention, are emphasized. The speaker mentions that coming up with class names is a deceptively tricky part of working with CSS, particularly when using SAS and following the BEM naming convention.', 'Demonstration of how to structure styles in SCSS files and the benefits of using SAS and BEM for organized and structured styles. The speaker demonstrates how to structure styles in SCSS files and highlights the benefits of using SAS and BEM for organized and structured styles, citing the example of breaking apart design components into their own files.', 'Explanation of BEM (Block Element Modifier) and its role in organizing styles in SAS files. The speaker explains the concept of BEM (Block Element Modifier) and its role in organizing styles in SAS files, emphasizing the practice of breaking apart design components into their own files.']}, {'end': 12937.466, 'start': 12390.945, 'title': 'Css block, element, modifier', 'summary': 'Discusses the concept of css block, element, and modifier, with an emphasis on the structure and naming conventions for writing styles, and how the concept integrates with sas, including examples and rationale for using the naming conventions and nesting feature.', 'duration': 546.521, 'highlights': ['The chapter discusses the concept of CSS block, element, and modifier The chapter provides a comprehensive overview of the CSS block, element, and modifier, emphasizing their role in structuring and writing styles for components.', 'Examples and rationale for using the naming conventions and nesting feature of SAS The transcript includes examples and reasons for using naming conventions and the nesting feature of SAS, highlighting the benefits in ensuring unique class names and integrating with the parent selector.', 'Explanation of the structure and naming conventions for writing styles The chapter explains the structure and naming conventions for writing styles, such as starting with the block name, adding elements, and using modifiers, with detailed examples and reasoning for the approach.']}, {'end': 13241.036, 'start': 12937.826, 'title': 'Web design: card layout and styling', 'summary': 'Discusses implementing a grid layout for cards, using flexbox or grid to create four columns on desktop and one column on mobile, and focusing on writing html markup and getting individual card styles working before fitting them into the grid layout.', 'duration': 303.21, 'highlights': ['Implementing grid layout using flexbox or grid to create four columns on desktop and one column on mobile The cards are to be organized in a grid layout with four columns on desktop and one column on mobile, utilizing flexbox or grid for the implementation.', 'Focusing on writing HTML markup and getting individual card styles working before fitting into the grid layout The approach involves focusing on writing HTML markup and getting individual card styles working before fitting them into the grid layout, following a step-by-step process to avoid doing everything all at once.', 'Adding class names and selectors for layout and card-specific styles Adding class names and selectors for layout and card-specific styles, with a focus on creating a modular and adaptable structure for the design.']}], 'duration': 958.133, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI12282903.jpg', 'highlights': ['Demonstration of how to structure styles in SCSS files and the benefits of using SAS and BEM for organized and structured styles.', 'The chapter discusses the concept of CSS block, element, and modifier, emphasizing their role in structuring and writing styles for components.', 'Implementing grid layout using flexbox or grid to create four columns on desktop and one column on mobile']}, {'end': 14209.939, 'segs': [{'end': 13445.179, 'src': 'embed', 'start': 13411.257, 'weight': 0, 'content': [{'end': 13414.258, 'text': 'And I think I can just do card change for everything.', 'start': 13411.257, 'duration': 3.001}, {'end': 13417.339, 'text': 'Card change.', 'start': 13415.638, 'duration': 1.701}, {'end': 13422.02, 'text': 'Okay So now we kind of have our HTML elements set.', 'start': 13418.219, 'duration': 3.801}, {'end': 13427.321, 'text': "So let's move the actual text in there.", 'start': 13422.22, 'duration': 5.101}, {'end': 13430.862, 'text': 'So card platform contains the icon and then the username.', 'start': 13427.341, 'duration': 3.521}, {'end': 13432.923, 'text': 'So username is here.', 'start': 13431.002, 'duration': 1.921}, {'end': 13440.934, 'text': 'And then the count is 1987.', 'start': 13437.27, 'duration': 3.664}, {'end': 13445.179, 'text': "I think I'll just put it straight up in the card count element.", 'start': 13440.934, 'duration': 4.245}], 'summary': 'Html elements set for card platform, username, and count (1987).', 'duration': 33.922, 'max_score': 13411.257, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI13411257.jpg'}, {'end': 13563.974, 'src': 'embed', 'start': 13531.063, 'weight': 1, 'content': [{'end': 13534.884, 'text': "So it helps a lot with when you're debugging responsive websites.", 'start': 13531.063, 'duration': 3.821}, {'end': 13537.365, 'text': "And it's cool because it's like synced.", 'start': 13535.384, 'duration': 1.981}, {'end': 13543.847, 'text': "So for example, if I click on a toggle here on desktop, you can see it's also changing on the mobile and vice versa.", 'start': 13537.545, 'duration': 6.302}, {'end': 13545.387, 'text': "So everything's synced.", 'start': 13543.947, 'duration': 1.44}, {'end': 13552.25, 'text': "Also, you know, as we get more content on the page, you can scroll down on mobile and then it'll also scroll and match it.", 'start': 13546.168, 'duration': 6.082}, {'end': 13555.751, 'text': 'The position, the scroll position on desktop and vice versa.', 'start': 13552.67, 'duration': 3.081}, {'end': 13563.974, 'text': "So you know, i still like using firefox, but i think when you're comparing the mobile and desktop views, when you're developing a website,", 'start': 13556.191, 'duration': 7.783}], 'summary': 'Synced debugging for responsive websites, with cross-platform interaction and scroll syncing.', 'duration': 32.911, 'max_score': 13531.063, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI13531063.jpg'}, {'end': 13791.187, 'src': 'embed', 'start': 13762.267, 'weight': 2, 'content': [{'end': 13767.932, 'text': 'So again, looking at the design, the icon is on one side and the username is on the other side.', 'start': 13762.267, 'duration': 5.665}, {'end': 13776.02, 'text': "So let's see, we could do something where the icon, maybe we could say display inline block.", 'start': 13768.052, 'duration': 7.968}, {'end': 13783.407, 'text': 'And then card username is also display inline block.', 'start': 13779.383, 'duration': 4.024}, {'end': 13786.563, 'text': 'So that works to put them next to each other.', 'start': 13784.861, 'duration': 1.702}, {'end': 13789.185, 'text': 'However, we want to vertically center it.', 'start': 13786.743, 'duration': 2.442}, {'end': 13791.187, 'text': 'So right now you can see the text is kind of on the bottom.', 'start': 13789.225, 'duration': 1.962}], 'summary': 'Discussing design layout, aiming to vertically center icon and username.', 'duration': 28.92, 'max_score': 13762.267, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI13762267.jpg'}], 'start': 13241.056, 'title': 'Html card markup and styling', 'summary': "Involves creating html elements for a card, including the platform icon, username, follower count, and change, with specific details such as '1987' followers and '12' changes today. it also discusses using polypane, a browser for website development, and styling the card platform, followers section, and flexbox to center vertically and add space between elements.", 'chapters': [{'end': 13509.18, 'start': 13241.056, 'title': 'Html card markup and styling', 'summary': "Involves creating html elements for a card, including the platform icon, username, follower count, and change, with specific details such as '1987' followers and '12' changes today.", 'duration': 268.124, 'highlights': ['Creating HTML elements for a card, including the platform icon, username, follower count, and change Involves structuring the card with specific elements for platform icon, username, follower count, and change', "Specific details such as '1987' followers and '12' changes today Includes specific quantifiable data such as '1987' followers and '12' changes today", 'Utilizing images for platform icons, such as Facebook Incorporates the use of specific images, like the Facebook SVG, for platform icons']}, {'end': 13737.267, 'start': 13510.422, 'title': 'Using polypane for website development', 'summary': 'Discusses using polypane, a browser that allows syncing of multiple devices for debugging responsive websites, and making design adjustments based on the design specifications.', 'duration': 226.845, 'highlights': ['Polypane allows syncing of multiple devices for debugging responsive websites, aiding in comparing mobile and desktop views (synced toggle, scroll position), which can be helpful for website development.', 'Polypane offers similar dev tools to Chrome, facilitating familiarity for developers using Chrome browser engine.', 'The speaker discusses making design adjustments based on design specifications, such as centering and evenly spacing out content, and adding temporary styles like text alignment and padding for the card element.']}, {'end': 14209.939, 'start': 13737.287, 'title': 'Styling card platform and followers section', 'summary': 'Discusses the process of styling the card platform, with the icon and username, to center vertically using flexbox and adding space between the elements. it then details the styling of the followers section, adjusting font sizes, colors, and text styles to match the design.', 'duration': 472.652, 'highlights': ['The process of styling the card platform, including centering the icon and username vertically using flexbox and adding space between the elements.', 'Detailing the styling of the followers section, adjusting font sizes, colors, and text styles to match the design.', 'Exploring the usage of Figma for design work and its advantages compared to other design tools like Adobe XD.']}], 'duration': 968.883, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI13241056.jpg', 'highlights': ['Creating HTML elements for a card, including the platform icon, username, follower count, and change Involves structuring the card with specific elements for platform icon, username, follower count, and change', 'Polypane allows syncing of multiple devices for debugging responsive websites, aiding in comparing mobile and desktop views (synced toggle, scroll position), which can be helpful for website development.', 'The process of styling the card platform, including centering the icon and username vertically using flexbox and adding space between the elements.']}, {'end': 16362.494, 'segs': [{'end': 14241.306, 'src': 'embed', 'start': 14210.92, 'weight': 0, 'content': [{'end': 14212.161, 'text': 'The UI is just a little bit different.', 'start': 14210.92, 'duration': 1.241}, {'end': 14216.621, 'text': 'And I love how Figma gives you the actual CSS for stuff.', 'start': 14213.297, 'duration': 3.324}, {'end': 14218.543, 'text': "I don't think I could be wrong.", 'start': 14217.241, 'duration': 1.302}, {'end': 14223.608, 'text': "I don't think I ever saw that in XD unless it's just a feature that I never found out about.", 'start': 14218.583, 'duration': 5.025}, {'end': 14232.678, 'text': 'But another kind of pain point with XD when I was using it is the letter spacing thing, because they, if I can even get into here,', 'start': 14223.849, 'duration': 8.829}, {'end': 14237.363, 'text': "but Like it's telling you here, the letter spacing is five pixels.", 'start': 14232.678, 'duration': 4.685}, {'end': 14241.306, 'text': "I'm not sure what units they were using in Adobe XC, but it was like.", 'start': 14237.643, 'duration': 3.663}], 'summary': 'Figma provides actual css, unlike xd, which lacks letter spacing functionality.', 'duration': 30.386, 'max_score': 14210.92, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI14210920.jpg'}, {'end': 14760.917, 'src': 'embed', 'start': 14728.168, 'weight': 1, 'content': [{'end': 14731.77, 'text': "I'm kind of nowadays just using these multiple classes in HTML.", 'start': 14728.168, 'duration': 3.602}, {'end': 14740.733, 'text': 'my HTML, even though it seems kind of lengthy, just because I would rather have my CSS be a bit more structured and not, you know,', 'start': 14732.651, 'duration': 8.082}, {'end': 14743.493, 'text': 'unnecessarily share styles between selectors.', 'start': 14740.733, 'duration': 2.76}, {'end': 14745.594, 'text': 'Of course, this is my own preference.', 'start': 14744.373, 'duration': 1.221}, {'end': 14753.195, 'text': "If you want to use extend, you know, you're more than welcome to just if you do make sure you're not using it with super, super nested selectors.", 'start': 14745.974, 'duration': 7.221}, {'end': 14758.936, 'text': "And that's one of the guidelines when you're using SAS actually, is that I think they recommend not going more than like three layers in.", 'start': 14753.475, 'duration': 5.461}, {'end': 14760.917, 'text': 'So card is the first layer.', 'start': 14759.116, 'duration': 1.801}], 'summary': 'Prefer using structured css with limited nesting, not exceeding three layers, as recommended by sas guidelines.', 'duration': 32.749, 'max_score': 14728.168, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI14728168.jpg'}, {'end': 15041.694, 'src': 'embed', 'start': 15002.389, 'weight': 3, 'content': [{'end': 15007.731, 'text': 'So now we can set card change to display flex.', 'start': 15002.389, 'duration': 5.342}, {'end': 15015.646, 'text': 'And I usually try to put my flexbox and or CSS grid properties first.', 'start': 15012.205, 'duration': 3.441}, {'end': 15020.768, 'text': 'But you can do whatever order makes sense for you.', 'start': 15017.047, 'duration': 3.721}, {'end': 15036.768, 'text': 'Okay, now this is a problem, because having an image as a flexbox child will make it stretch automatically unless you explicitly Set align items,', 'start': 15021.308, 'duration': 15.46}, {'end': 15037.089, 'text': 'I think.', 'start': 15036.768, 'duration': 0.321}, {'end': 15038.39, 'text': "So let's see if that works.", 'start': 15037.549, 'duration': 0.841}, {'end': 15040.713, 'text': 'Align items center.', 'start': 15038.611, 'duration': 2.102}, {'end': 15041.694, 'text': 'There we go.', 'start': 15041.294, 'duration': 0.4}], 'summary': 'Setting card change to display flex and aligning items center resolved image stretching issue.', 'duration': 39.305, 'max_score': 15002.389, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI15002389.jpg'}, {'end': 15309.301, 'src': 'embed', 'start': 15273.379, 'weight': 4, 'content': [{'end': 15274.259, 'text': "Oh, looks like it's five.", 'start': 15273.379, 'duration': 0.88}, {'end': 15275.139, 'text': 'Five pixels.', 'start': 15274.559, 'duration': 0.58}, {'end': 15276.6, 'text': 'Corner radius.', 'start': 15276, 'duration': 0.6}, {'end': 15279.201, 'text': "That's why they call it corner radius.", 'start': 15276.62, 'duration': 2.581}, {'end': 15285.762, 'text': 'So corner radius of five, which is border radius in CSS speak of the card.', 'start': 15279.441, 'duration': 6.321}, {'end': 15292.004, 'text': 'So go all the way back up to the card selector and go border radius.', 'start': 15286.943, 'duration': 5.061}, {'end': 15294.084, 'text': 'Oh gosh.', 'start': 15293.584, 'duration': 0.5}, {'end': 15295.605, 'text': "Can't type at all.", 'start': 15294.565, 'duration': 1.04}, {'end': 15297.405, 'text': 'Rem five.', 'start': 15296.525, 'duration': 0.88}, {'end': 15299.786, 'text': "And it's, I think the same all the way around.", 'start': 15297.605, 'duration': 2.181}, {'end': 15309.301, 'text': "Okay So we can, it's kind of hard to see this, but you can see that it is a little bit rounded.", 'start': 15304.358, 'duration': 4.943}], 'summary': 'Setting a corner radius of five pixels for the card in css.', 'duration': 35.922, 'max_score': 15273.379, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI15273379.jpg'}, {'end': 15495.956, 'src': 'embed', 'start': 15459.419, 'weight': 5, 'content': [{'end': 15461.12, 'text': "I can see they're trying to sync the scroll.", 'start': 15459.419, 'duration': 1.701}, {'end': 15474.186, 'text': 'Seems a little bit buggy.', 'start': 15472.244, 'duration': 1.942}, {'end': 15476.988, 'text': 'Anywho, let me think about this.', 'start': 15474.846, 'duration': 2.142}, {'end': 15480.471, 'text': "So yeah, let's just let's do the grid layout now.", 'start': 15477.128, 'duration': 3.343}, {'end': 15485.496, 'text': 'So obviously, we mentioned before, this is going to be four columns.', 'start': 15480.992, 'duration': 4.504}, {'end': 15488.999, 'text': 'I guess we can add the space between them 30 pixels.', 'start': 15486.737, 'duration': 2.262}, {'end': 15495.956, 'text': 'I would usually use maybe grid for this, but I think you can also use flex box.', 'start': 15490.453, 'duration': 5.503}], 'summary': 'Discussing grid layout with 4 columns and 30 pixels space, considering flexbox as an alternative.', 'duration': 36.537, 'max_score': 15459.419, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI15459419.jpg'}, {'end': 16256.156, 'src': 'embed', 'start': 16229.573, 'weight': 7, 'content': [{'end': 16233.396, 'text': 'We got two columns on tablet and we got one column on mobile.', 'start': 16229.573, 'duration': 3.823}, {'end': 16235.538, 'text': 'Nice So the layout looks good.', 'start': 16234.016, 'duration': 1.522}, {'end': 16236.819, 'text': "I'm happy with that.", 'start': 16235.858, 'duration': 0.961}, {'end': 16241.202, 'text': 'The next thing I want to do is add these styles for the other social media platforms.', 'start': 16236.959, 'duration': 4.243}, {'end': 16247.948, 'text': "So let's go into our markup and the first card is Facebook.", 'start': 16241.663, 'duration': 6.285}, {'end': 16250.851, 'text': "And then second card's Twitter, Instagram, and YouTube.", 'start': 16248.448, 'duration': 2.403}, {'end': 16256.156, 'text': "So we're going to change the modifier classes to match, and then also the image, obviously.", 'start': 16251.711, 'duration': 4.445}], 'summary': 'Layout looks good with two columns on tablet and one column on mobile. adding styles for facebook, twitter, instagram, and youtube.', 'duration': 26.583, 'max_score': 16229.573, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI16229573.jpg'}], 'start': 14210.92, 'title': 'Web development techniques', 'summary': 'Covers various web development techniques including figma ui advantages over xd, css flexbox alignment, multiple classes in html, sas guidelines for nested selectors, and styling facebook cards and card grid with flexbox and css grid.', 'chapters': [{'end': 14564.717, 'start': 14210.92, 'title': 'Figma ui and css features', 'summary': 'Discusses the advantages of using figma over xd, including the ability to generate actual css, resolve issues with letter spacing, line height, and spacing, and ensure consistency in element styling during web development.', 'duration': 353.797, 'highlights': ["Figma provides the actual CSS for design elements, solving issues with letter spacing, line height, and spacing, enhancing the developer's workflow.", "XD lacked the feature to provide actual CSS, resulting in challenges with letter spacing and unit conversion, impacting the developer's efficiency.", 'The chapter highlights the process of adjusting line height, letter spacing, and margin spacing, showcasing the attention to detail in web development.', 'The importance of consistent element styling is emphasized, with a preference for margin bottom over margin top for adding space between elements.']}, {'end': 14745.594, 'start': 14565.257, 'title': 'Using multiple classes in html', 'summary': 'Discusses the use of multiple classes in html to maintain structured css and avoid unnecessarily shared styles, despite the tradeoff of having more classes in html.', 'duration': 180.337, 'highlights': ['Using multiple classes in HTML helps to maintain structured CSS and avoid unnecessarily shared styles. This approach separates styles for different elements, keeping the CSS more compact and organized.', 'The tradeoff of using multiple classes in HTML is having more classes in the HTML markup. While this approach may result in longer HTML markup, it helps in keeping the CSS structured and prevents unnecessary sharing of styles between selectors.', 'The chapter also discusses the caution around using the extend rule in SAS due to adding styles to multiple selectors. The caution arises from adding styles to three different selectors, which can lead to a less compact CSS.']}, {'end': 14893.794, 'start': 14745.974, 'title': 'Sas guidelines for nested selectors', 'summary': 'Discusses the guidelines for using sas, including not going more than three layers deep in nesting selectors to avoid long css and larger file sizes, and suggests using css classes to manipulate svg icons.', 'duration': 147.82, 'highlights': ['Not going more than three layers deep in nesting selectors SAS recommends not going more than three layers deep in nesting selectors to avoid long CSS and larger file sizes.', 'Using CSS classes to manipulate SVG icons Suggests using CSS classes to set the fill and transform properties for SVG icons to avoid creating additional CSS styles for different versions.']}, {'end': 15240.445, 'start': 14893.794, 'title': 'Css flexbox alignment', 'summary': 'Discusses using css flexbox to align elements vertically and horizontally, demonstrating the process of creating a new div and applying flexbox properties to achieve alignment, with specific pixel measurements and adjustments made throughout the process.', 'duration': 346.651, 'highlights': ['The chapter demonstrates the process of using CSS flexbox to align elements vertically and horizontally, with specific pixel measurements and adjustments made throughout the process.', 'The speaker discusses the use of position absolute and its drawbacks, advocating for the use of flexbox instead for alignment.', 'Specific pixel measurements and adjustments are made throughout the process, such as setting padding left and right, and using margin right to add space between elements.', 'The speaker emphasizes the benefits of using BEM (Block Element Modifier) methodology for CSS naming to avoid conflicts and ensure unique class names.']}, {'end': 15681.93, 'start': 15242.418, 'title': 'Styling facebook cards with css', 'summary': 'Explains the process of styling facebook cards using css, including setting border radius, adjusting stripe height, and implementing a grid layout using flexbox with a 30-pixel gap, achieving a consistent design across desktop and mobile views.', 'duration': 439.512, 'highlights': ['Setting border radius to five pixels for the card, achieving slightly rounded corners The transcript highlights the process of setting the border radius to five pixels for the card, resulting in slightly rounded corners for the design.', 'Adjusting stripe height to four pixels and applying the Facebook color The speaker discusses adjusting the stripe height to four pixels and applying the Facebook color, ensuring the visual consistency of the design.', 'Implementing a grid layout using Flexbox with a 30-pixel gap between items The chapter details the implementation of a grid layout using Flexbox, featuring a 30-pixel gap between items for a consistent design across desktop and mobile views.']}, {'end': 16362.494, 'start': 15681.95, 'title': 'Styling card grid with flexbox and css grid', 'summary': 'Discusses the process of styling a card grid using flexbox and css grid, including setting flex direction, flex properties, and using media queries for responsiveness, ultimately achieving a responsive layout with four columns on desktop, two columns on tablet, and one column on mobile.', 'duration': 680.544, 'highlights': ['The chapter explains the process of setting the layout of a card grid using Flexbox and CSS Grid, including setting flex direction to stack items for mobile and achieving a responsive layout with four columns on desktop, two columns on tablet, and one column on mobile.', 'The transcript discusses the use of flex properties, such as setting flex of one for each card to achieve an equal distribution of horizontal width, resulting in a responsive layout with four columns on desktop.', 'The speaker explores the use of media queries to ensure responsiveness, such as setting flex direction to column for mobile and row for medium and up, ultimately achieving a responsive layout with four columns on desktop, two columns on tablet, and one column on mobile.', 'The chapter highlights the process of setting flex basis to 50% and limiting the flex grow to zero to achieve a layout with two columns on tablet, utilizing CSS Grid to achieve a responsive layout with four columns on desktop, two columns on tablet, and one column on mobile.', 'The transcript discusses the process of adjusting modifier classes and images for different social media platforms within the card grid, as well as hard-coding values for likes and followers, emphasizing the need for a data-driven approach if it were an actual app.']}], 'duration': 2151.574, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI14210920.jpg', 'highlights': ["Figma provides actual CSS for design elements, enhancing developer's workflow.", 'Using multiple classes in HTML maintains structured CSS and avoids shared styles.', 'SAS recommends not going more than three layers deep in nesting selectors.', 'CSS flexbox aligns elements vertically and horizontally with specific pixel measurements.', 'Setting border radius to five pixels achieves slightly rounded corners for the card.', 'Implementing a grid layout using Flexbox features a 30-pixel gap between items.', 'Setting the layout of a card grid using Flexbox and CSS Grid achieves a responsive layout.', 'Using media queries ensures responsiveness and achieves a layout with four columns on desktop.']}, {'end': 18098.953, 'segs': [{'end': 16671.351, 'src': 'embed', 'start': 16641.864, 'weight': 1, 'content': [{'end': 16644.044, 'text': "Otherwise, it's not going to show up at all on the web page.", 'start': 16641.864, 'duration': 2.18}, {'end': 16645.967, 'text': 'And I learned that the hard way.', 'start': 16644.826, 'duration': 1.141}, {'end': 16649.848, 'text': 'Okay, so for pseudo element content is blank.', 'start': 16646.866, 'duration': 2.982}, {'end': 16655.553, 'text': "We'll set the height to, I believe it was five based on what we have up there.", 'start': 16650.149, 'duration': 5.404}, {'end': 16657.133, 'text': 'Width, I guess will be 100%.', 'start': 16655.992, 'duration': 1.141}, {'end': 16662.079, 'text': "And I'm gonna have to set this to, I think, Position..", 'start': 16657.133, 'duration': 4.946}, {'end': 16664.702, 'text': "actually let's just see what happens if we don't have anything.", 'start': 16662.079, 'duration': 2.623}, {'end': 16667.967, 'text': "I think I might need to use position absolute for this but I'm not sure.", 'start': 16665.183, 'duration': 2.784}, {'end': 16671.351, 'text': "I'll set the background to..", 'start': 16667.987, 'duration': 3.364}], 'summary': 'Setting pseudo element height to 5 and width to 100% for web page.', 'duration': 29.487, 'max_score': 16641.864, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI16641864.jpg'}, {'end': 17023.401, 'src': 'embed', 'start': 16993.403, 'weight': 3, 'content': [{'end': 16995.045, 'text': "Let's see how tall the Twitter one is.", 'start': 16993.403, 'duration': 1.642}, {'end': 17000.052, 'text': "I'm just testing my theory that the icon height is responsible for the weird alignment.", 'start': 16996.291, 'duration': 3.761}, {'end': 17002.073, 'text': "Yeah, it's 17.", 'start': 17000.112, 'duration': 1.961}, {'end': 17003.714, 'text': 'So I think I need to say..', 'start': 17002.073, 'duration': 1.641}, {'end': 17007.715, 'text': "Which one's the tallest one? Instagram looks pretty tall.", 'start': 17003.714, 'duration': 4.001}, {'end': 17013.177, 'text': '20 YouTube is..', 'start': 17007.735, 'duration': 5.442}, {'end': 17014.118, 'text': 'YouTube is 20.', 'start': 17013.177, 'duration': 0.941}, {'end': 17019.54, 'text': 'So if we say card platform height is 20 pixels, then you can see the Twitter one kind of went down a little bit.', 'start': 17014.118, 'duration': 5.422}, {'end': 17021.62, 'text': "And then let's see..", 'start': 17020.84, 'duration': 0.78}, {'end': 17023.401, 'text': "I'm just doing this to sort of debug.", 'start': 17021.62, 'duration': 1.781}], 'summary': 'Testing icon heights: twitter 17px, instagram 20px, youtube 20px for debugging.', 'duration': 29.998, 'max_score': 16993.403, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI16993403.jpg'}, {'end': 17184.675, 'src': 'embed', 'start': 17150.256, 'weight': 4, 'content': [{'end': 17150.996, 'text': "I don't need the calc.", 'start': 17150.256, 'duration': 0.74}, {'end': 17152.497, 'text': "I'm dumb.", 'start': 17152.117, 'duration': 0.38}, {'end': 17156.738, 'text': 'Ram 25 plus five is 30.', 'start': 17153.937, 'duration': 2.801}, {'end': 17157.018, 'text': 'So 30.', 'start': 17156.738, 'duration': 0.28}, {'end': 17157.919, 'text': 'There we go.', 'start': 17157.018, 'duration': 0.901}, {'end': 17158.319, 'text': 'There we go.', 'start': 17157.979, 'duration': 0.34}, {'end': 17158.819, 'text': 'OK, there we go.', 'start': 17158.379, 'duration': 0.44}, {'end': 17168.903, 'text': 'So now we use the guide here.', 'start': 17167.142, 'duration': 1.761}, {'end': 17171.045, 'text': 'This is actually a really cool feature of Polypane.', 'start': 17168.923, 'duration': 2.122}, {'end': 17172.806, 'text': 'Making sure things are aligned.', 'start': 17171.765, 'duration': 1.041}, {'end': 17175.168, 'text': 'Yes, everything is centered now.', 'start': 17173.246, 'duration': 1.922}, {'end': 17176.889, 'text': 'This is a wonderful day.', 'start': 17175.228, 'duration': 1.661}, {'end': 17180.271, 'text': 'Okay So we go back here.', 'start': 17176.909, 'duration': 3.362}, {'end': 17181.773, 'text': 'Tablet looks pretty good.', 'start': 17180.291, 'duration': 1.482}, {'end': 17184.675, 'text': 'Mobile looks pretty good.', 'start': 17183.674, 'duration': 1.001}], 'summary': 'Testing alignment feature in polypane, tablet and mobile views look good.', 'duration': 34.419, 'max_score': 17150.256, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI17150256.jpg'}, {'end': 17239.97, 'src': 'embed', 'start': 17212.729, 'weight': 0, 'content': [{'end': 17218.054, 'text': "But for Instagram, because it's a linear gradient, you can't make a border like a linear gradient.", 'start': 17212.729, 'duration': 5.325}, {'end': 17222.394, 'text': 'You have to use this Sort of hack your work around and put it in a pseudo element.', 'start': 17218.074, 'duration': 4.32}, {'end': 17226.078, 'text': "So here's the temporary color, the background thing.", 'start': 17223.275, 'duration': 2.803}, {'end': 17234.267, 'text': 'So I think I can just replace that with the linear gradient that I copied from the design file.', 'start': 17226.479, 'duration': 7.788}, {'end': 17235.889, 'text': "So we'll just copy that.", 'start': 17234.848, 'duration': 1.041}, {'end': 17239.97, 'text': "And then let's comment that out for now.", 'start': 17237.409, 'duration': 2.561}], 'summary': 'Using linear gradients in instagram requires a workaround due to its limitations.', 'duration': 27.241, 'max_score': 17212.729, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI17212729.jpg'}, {'end': 17434.718, 'src': 'embed', 'start': 17410.457, 'weight': 6, 'content': [{'end': 17416.563, 'text': 'so i might use something like css grid to create a template where it has two columns and then two rows.', 'start': 17410.457, 'duration': 6.106}, {'end': 17418.025, 'text': "yeah, let's do that with css grid.", 'start': 17416.563, 'duration': 1.462}, {'end': 17426.633, 'text': "So let's take a look at the markup and figure out how we want to build those that second grid of cards out.", 'start': 17419.389, 'duration': 7.244}, {'end': 17434.718, 'text': "Okay So this section tag is the first row of cards and let's kind of minimize each card so we can take a better look at everything.", 'start': 17426.653, 'duration': 8.065}], 'summary': 'Using css grid to create a template with two columns and two rows.', 'duration': 24.261, 'max_score': 17410.457, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI17410457.jpg'}, {'end': 17665.662, 'src': 'embed', 'start': 17615.377, 'weight': 7, 'content': [{'end': 17622.882, 'text': 'so i think my options are either creating another modifier to make that grid layout or i could create a helper class,', 'start': 17615.377, 'duration': 7.505}, {'end': 17632.729, 'text': "so meaning instead of doing card, and then, let's say, we make a modifier class for card dash dash grid for lack of a better word,", 'start': 17622.882, 'duration': 9.847}, {'end': 17635.351, 'text': 'and then making this be another modifier.', 'start': 17632.729, 'duration': 2.622}, {'end': 17641.974, 'text': "here we could do a helper class which is doing something like I don't know card desk grid.", 'start': 17635.351, 'duration': 6.623}, {'end': 17644.175, 'text': 'So this will be the second class name.', 'start': 17642.014, 'duration': 2.161}, {'end': 17648.056, 'text': "And then we'll set all those grid styles in this card grid class.", 'start': 17644.195, 'duration': 3.861}, {'end': 17658.219, 'text': "And it's kind of the same thing, I think, maybe for readability, because we have these modifiers already for the different social platforms.", 'start': 17648.616, 'duration': 9.603}, {'end': 17660.72, 'text': "I don't know if I want to just add another modifier.", 'start': 17658.239, 'duration': 2.481}, {'end': 17663.301, 'text': 'Maybe that would be better in terms of the BEM approach.', 'start': 17661.28, 'duration': 2.021}, {'end': 17665.662, 'text': "But I think, yeah, I don't know.", 'start': 17663.661, 'duration': 2.001}], 'summary': 'Considering creating a new modifier or helper class for grid layout, weighing bem approach', 'duration': 50.285, 'max_score': 17615.377, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI17615377.jpg'}, {'end': 17787.04, 'src': 'embed', 'start': 17757.369, 'weight': 9, 'content': [{'end': 17766.677, 'text': 'make a new sas file called card dash grid, scss, and put all the styles for that in that new file, and that is actually sort of appealing,', 'start': 17757.369, 'duration': 9.308}, {'end': 17769.699, 'text': "because then i'm separating out the different styles.", 'start': 17766.677, 'duration': 3.022}, {'end': 17776.446, 'text': "yeah, so it's just one of those things where you just got to kind of choose, choose one approach and and just follow it.", 'start': 17769.699, 'duration': 6.747}, {'end': 17787.04, 'text': 'Yeah, I think I might want to do that, just because adding more modifiers and elements along with the existing card elements and modifiers, I think,', 'start': 17776.686, 'duration': 10.354}], 'summary': 'Create a new sas file named card-grid.scss to separate styles for better organization.', 'duration': 29.671, 'max_score': 17757.369, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI17757369.jpg'}, {'end': 18014.887, 'src': 'embed', 'start': 17974.468, 'weight': 10, 'content': [{'end': 17978.67, 'text': 'i would basically be having to copy and paste the styles over there.', 'start': 17974.468, 'duration': 4.202}, {'end': 17983.354, 'text': 'so I would rather they just had the same classes and keep everything as minimal as possible.', 'start': 17978.67, 'duration': 4.684}, {'end': 17989.579, 'text': "So this is just this is pretty normal back and forth when you're building something because you don't always get it right the first time.", 'start': 17983.574, 'duration': 6.005}, {'end': 17991.501, 'text': "So there's a lot of trial and error.", 'start': 17990.24, 'duration': 1.261}, {'end': 18002.584, 'text': 'OK, so this is better and to take care of the the grid child items, because, you know, I do need to set some grid styles for these elements here.', 'start': 17992.782, 'duration': 9.802}, {'end': 18010.246, 'text': "I'm going to put it in card grid and I might do something like just you know, nth child one, nth child two, three and four,", 'start': 18002.944, 'duration': 7.302}, {'end': 18014.887, 'text': "so that I don't have to create additional classes for these in the card grid.", 'start': 18010.246, 'duration': 4.641}], 'summary': 'Minimize duplication by using same classes, allowing for trial and error during building, and implementing grid styles for elements.', 'duration': 40.419, 'max_score': 17974.468, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI17974468.jpg'}], 'start': 16365.094, 'title': 'Instagram card design and alignment', 'summary': 'Discusses adding linear gradient styles to an instagram card, aligning icons and elements, working on grid layout, and implementing bem methodology, focusing on css properties, pixel measurements, and consistency in styling across elements.', 'chapters': [{'end': 16900.201, 'start': 16365.094, 'title': 'Styling instagram card linear gradient', 'summary': 'Discusses adding linear gradient styles to an instagram card, utilizing pseudo elements and position settings to achieve the desired design, with a focus on step-by-step problem-solving and explanation of css properties.', 'duration': 535.107, 'highlights': ['The Instagram card linear gradient design is explored through the use of pseudo elements and position settings, demonstrating a step-by-step problem-solving approach with a focus on CSS properties. (Relevance: 5)', "The process involves setting the pseudo element's content to an empty string, defining its height and width, and utilizing position settings to create the desired effect, exemplifying a detailed breakdown of the design process. (Relevance: 4)", 'The use of position settings and overflow property is explained to control the positioning and space allocation of the pseudo element, showcasing a thorough understanding of CSS layout and design principles. (Relevance: 3)', 'The challenge of incorporating a linear gradient within the pseudo element is addressed, leading to a discussion of potential solutions and the step-by-step approach to problem-solving in CSS design. (Relevance: 2)', 'The chapter also delves into the practical application of CSS properties such as calc, as well as the consideration of relative and absolute positioning to achieve the desired design outcome, highlighting a comprehensive understanding of CSS techniques. (Relevance: 1)']}, {'end': 17184.675, 'start': 16903.976, 'title': 'Aligning icons and elements', 'summary': "Discusses the process of aligning icons and elements using guides and pixel measurements, including setting specific pixel heights for different icons and using the 'calc' function for combined units, ultimately ensuring the alignment of elements in desktop, tablet, and mobile views.", 'duration': 280.699, 'highlights': ['Using pixel measurements to set specific heights for different icons such as 20 pixels for Twitter and YouTube, and 17 pixels for Instagram.', "Utilizing the 'calc' function to combine units for measurements, such as setting padding top as 'calc(25px + 5px)' for specific elements.", 'Leveraging the guide feature of Polypane to ensure the alignment of elements in different views, ultimately achieving centered alignment.']}, {'end': 17519.725, 'start': 17184.695, 'title': 'Updating instagram card and working on grid layout', 'summary': 'Covers updating the instagram card by implementing a linear gradient, utilizing pseudo-elements and variables, and working on grid layout for the second set of cards using css grid.', 'duration': 335.03, 'highlights': ['Implementing linear gradient for Instagram card and using pseudo-elements and variables The speaker updates the Instagram card by replacing the temporary color with a linear gradient, utilizes pseudo-elements and variables for setting the gradient colors, and explains the angle and color percentage properties of the linear gradient.', "Utilizing figma's export option for easy style copying The speaker appreciates the ease of copying styles from Figma using its export option.", 'Exploring different layout options and preferences in polypane The speaker explores different layout options in Polypane, specifically comparing horizontal and vertical layouts and decides to stick with the vertical layout due to the tab creation feature.', 'Planning to use CSS grid for creating a template for the second grid of cards The speaker plans to use CSS grid to create a template with two columns and two rows for the second grid of cards, indicating the use of CSS grid for layout customization.']}, {'end': 17683.556, 'start': 17520.505, 'title': 'Styling card grid layout', 'summary': 'Discusses the process of creating a grid template for the second set of cards, considering options of using modifiers or helper classes, and highlights the complexity of naming and organizing styles.', 'duration': 163.051, 'highlights': ['The process of creating a grid template for the second set of cards involves considering options of using modifiers or helper classes, with the decision-making process highlighted as not having a single right answer.', 'The complexity of naming and organizing styles is emphasized, as it requires more thought than initially anticipated, particularly in determining class names and their placement.']}, {'end': 18098.953, 'start': 17684.016, 'title': 'Implementing bem methodology for card grid', 'summary': 'Discusses implementing bem methodology for the card grid, considering separating grid styles into a new sas file, and ensuring consistency in styling across elements, with a focus on minimizing class duplication and potential trial and error. it also includes considerations for accessibility and correcting copy errors.', 'duration': 414.937, 'highlights': ['Implementing BEM methodology for the card grid The discussion revolves around implementing the BEM methodology for the card grid, focusing on structuring the CSS classes and modifiers for improved organization and maintainability.', 'Considering separating grid styles into a new SAS file The speaker explores the option of segregating grid styles into a separate SAS file, aiming to enhance clarity and separation of styles.', 'Ensuring consistency in styling across elements There is a focus on maintaining consistency in styling between elements, particularly between the card grid and its child elements, aiming to minimize redundancy and enhance maintainability.', 'Minimizing class duplication and potential trial and error The chapter emphasizes the importance of minimizing class duplication and acknowledges the potential for trial and error in the development process, highlighting the iterative nature of building and refining styles.', 'Considerations for accessibility and correcting copy errors The speaker briefly touches on the importance of considering accessibility, specifically in relation to the layout and content, and addresses the need to correct copy errors, illustrating attention to detail and thoroughness in the development process.']}], 'duration': 1733.859, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI16365094.jpg', 'highlights': ['The Instagram card linear gradient design is explored through the use of pseudo elements and position settings, demonstrating a step-by-step problem-solving approach with a focus on CSS properties.', "The process involves setting the pseudo element's content to an empty string, defining its height and width, and utilizing position settings to create the desired effect, exemplifying a detailed breakdown of the design process.", 'The use of position settings and overflow property is explained to control the positioning and space allocation of the pseudo element, showcasing a thorough understanding of CSS layout and design principles.', 'Using pixel measurements to set specific heights for different icons such as 20 pixels for Twitter and YouTube, and 17 pixels for Instagram.', 'Leveraging the guide feature of Polypane to ensure the alignment of elements in different views, ultimately achieving centered alignment.', 'Implementing linear gradient for Instagram card and using pseudo-elements and variables The speaker updates the Instagram card by replacing the temporary color with a linear gradient, utilizes pseudo-elements and variables for setting the gradient colors, and explains the angle and color percentage properties of the linear gradient.', 'Planning to use CSS grid for creating a template for the second grid of cards The speaker plans to use CSS grid to create a template with two columns and two rows for the second grid of cards, indicating the use of CSS grid for layout customization.', 'The process of creating a grid template for the second set of cards involves considering options of using modifiers or helper classes, with the decision-making process highlighted as not having a single right answer.', 'Implementing BEM methodology for the card grid The discussion revolves around implementing the BEM methodology for the card grid, focusing on structuring the CSS classes and modifiers for improved organization and maintainability.', 'Considering separating grid styles into a new SAS file The speaker explores the option of segregating grid styles into a separate SAS file, aiming to enhance clarity and separation of styles.', 'Ensuring consistency in styling across elements There is a focus on maintaining consistency in styling between elements, particularly between the card grid and its child elements, aiming to minimize redundancy and enhance maintainability.', 'Minimizing class duplication and potential trial and error The chapter emphasizes the importance of minimizing class duplication and acknowledges the potential for trial and error in the development process, highlighting the iterative nature of building and refining styles.', 'Considerations for accessibility and correcting copy errors The speaker briefly touches on the importance of considering accessibility, specifically in relation to the layout and content, and addresses the need to correct copy errors, illustrating attention to detail and thoroughness in the development process.']}, {'end': 19661.971, 'segs': [{'end': 18127.106, 'src': 'embed', 'start': 18100.82, 'weight': 2, 'content': [{'end': 18105.141, 'text': 'OK, so the overview today, the sub headline.', 'start': 18100.82, 'duration': 4.321}, {'end': 18114.523, 'text': "I'm probably going to make that an H2 tag because the social media dashboard that's in an H1 tag and you want to kind of keep the hierarchy going down the page.", 'start': 18105.141, 'duration': 9.382}, {'end': 18119.284, 'text': "So because this is a subtitle, it's a bit of a smaller font.", 'start': 18115.544, 'duration': 3.74}, {'end': 18123.365, 'text': 'So that sort of tells you that sub headline and you only want one H tag per page.', 'start': 18119.305, 'duration': 4.06}, {'end': 18124.986, 'text': 'So this is going to be an H2 tag.', 'start': 18123.606, 'duration': 1.38}, {'end': 18127.106, 'text': 'And we figure out where we want to put this.', 'start': 18125.266, 'duration': 1.84}], 'summary': 'Overview and hierarchy of heading tags discussed for website optimization.', 'duration': 26.286, 'max_score': 18100.82, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI18100820.jpg'}, {'end': 18193.242, 'src': 'embed', 'start': 18157.807, 'weight': 1, 'content': [{'end': 18159.167, 'text': 'um, here we go.', 'start': 18157.807, 'duration': 1.36}, {'end': 18161.028, 'text': 'cards display grid yada, yada.', 'start': 18159.167, 'duration': 1.861}, {'end': 18165.725, 'text': 'Yeah, so all the child elements in cards is going to be part of this card grid.', 'start': 18162.423, 'duration': 3.302}, {'end': 18174.909, 'text': 'So what I could do is move the cards element to its own div here.', 'start': 18166.545, 'duration': 8.364}, {'end': 18183.008, 'text': 'So then in here is where the second row of cards would be.', 'start': 18174.929, 'duration': 8.079}, {'end': 18189.977, 'text': "And then that way, when we add this H2 tag with overview today, it won't be part of the grid.", 'start': 18183.328, 'duration': 6.649}, {'end': 18193.242, 'text': "It'll be full width and its own thing.", 'start': 18190.398, 'duration': 2.844}], 'summary': 'Rearranging elements for a card grid layout to accommodate additional content.', 'duration': 35.435, 'max_score': 18157.807, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI18157807.jpg'}, {'end': 18369.536, 'src': 'embed', 'start': 18326.749, 'weight': 0, 'content': [{'end': 18335.532, 'text': "yay, all right, here we have the card and everything's showing up.", 'start': 18326.749, 'duration': 8.783}, {'end': 18337.332, 'text': "it's taking the card styles.", 'start': 18335.532, 'duration': 1.8}, {'end': 18342.114, 'text': 'so now i need to add the css grid styles for the grid part.', 'start': 18337.332, 'duration': 4.782}, {'end': 18345.791, 'text': "So it's going to be card grid.", 'start': 18344.511, 'duration': 1.28}, {'end': 18355.313, 'text': "So in card grid, we'll say display grid because we're doing the grid for all breakpoints, mobile, tablet and desktop.", 'start': 18347.612, 'duration': 7.701}, {'end': 18357.874, 'text': "We'll say grid template columns.", 'start': 18355.613, 'duration': 2.261}, {'end': 18361.654, 'text': 'Oops Grid template.', 'start': 18358.974, 'duration': 2.68}, {'end': 18369.536, 'text': 'Repeat for, I guess, 1FR.', 'start': 18364.635, 'duration': 4.901}], 'summary': 'Adding css grid styles for the card grid with display grid and grid template columns for all breakpoints.', 'duration': 42.787, 'max_score': 18326.749, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI18326749.jpg'}, {'end': 18675.713, 'src': 'embed', 'start': 18649.786, 'weight': 6, 'content': [{'end': 18657.972, 'text': 'Okay, so we can see these styles are taking effect and they pretty much match and this number is smaller here, which is good.', 'start': 18649.786, 'duration': 8.186}, {'end': 18659.894, 'text': "Let's see what else we need to do.", 'start': 18658.433, 'duration': 1.461}, {'end': 18664.597, 'text': 'I think we need to align the things on the left to the left and align the things on the right to the right.', 'start': 18659.914, 'duration': 4.683}, {'end': 18669.02, 'text': 'Yeah, um, the padding looks about the same.', 'start': 18666.198, 'duration': 2.822}, {'end': 18675.713, 'text': "24 So it's about the same as the top card.", 'start': 18669.02, 'duration': 6.693}], 'summary': 'Styles are matching, need to align left and right, padding is same as top card.', 'duration': 25.927, 'max_score': 18649.786, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI18649786.jpg'}, {'end': 19172.879, 'src': 'embed', 'start': 19133.183, 'weight': 3, 'content': [{'end': 19135.404, 'text': 'So yeah, so the top row is centered vertically.', 'start': 19133.183, 'duration': 2.221}, {'end': 19138.565, 'text': 'Bottom row is aligned to the bottom.', 'start': 19136.464, 'duration': 2.101}, {'end': 19140.365, 'text': 'Okay, great.', 'start': 19139.765, 'duration': 0.6}, {'end': 19143.106, 'text': "Let's check the height of this card too.", 'start': 19141.666, 'duration': 1.44}, {'end': 19152.248, 'text': '114 So I think I need to add some space between the page views and then the number.', 'start': 19143.126, 'duration': 9.122}, {'end': 19155.769, 'text': "Yeah, there's a lot more space here.", 'start': 19154.589, 'duration': 1.18}, {'end': 19156.349, 'text': 'You can see this.', 'start': 19155.789, 'duration': 0.56}, {'end': 19163.253, 'text': '20, 21.', 'start': 19156.369, 'duration': 6.884}, {'end': 19172.879, 'text': "so i will add space and i kind of want i don't want the first row to be the same height as the second row.", 'start': 19163.254, 'duration': 9.625}], 'summary': 'Adjusting card layout: adding space and aligning rows', 'duration': 39.696, 'max_score': 19133.183, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI19133183.jpg'}, {'end': 19553.097, 'src': 'embed', 'start': 19429.542, 'weight': 4, 'content': [{'end': 19446.782, 'text': 'Cool, And this is the benefit of creating styles that you can reuse,', 'start': 19429.542, 'duration': 17.24}, {'end': 19454.288, 'text': 'because I create all the grid styles for the cards for the top row and I can just reuse the same classes for the bottom row.', 'start': 19446.782, 'duration': 7.506}, {'end': 19461.203, 'text': 'So it makes things efficient and it also makes things easier on me.', 'start': 19458.061, 'duration': 3.142}, {'end': 19464.025, 'text': "I don't have to, you know, write the styles every single time.", 'start': 19461.223, 'duration': 2.802}, {'end': 19467.868, 'text': 'So now we just need to update the copy in each card to match the design.', 'start': 19465.186, 'duration': 2.682}, {'end': 19472.351, 'text': 'So.. Second card is likes.', 'start': 19469.529, 'duration': 2.822}, {'end': 19480.237, 'text': '52 It is still Facebook.', 'start': 19472.372, 'duration': 7.865}, {'end': 19491.121, 'text': "52 And it's a down of 2%.", 'start': 19481.438, 'duration': 9.683}, {'end': 19492.221, 'text': 'And then we need to change this.', 'start': 19491.121, 'duration': 1.1}, {'end': 19500.883, 'text': 'Oops, I changed the wrong one, I think.', 'start': 19499.303, 'duration': 1.58}, {'end': 19508.625, 'text': "I'll just move that up.", 'start': 19500.903, 'duration': 7.722}, {'end': 19509.886, 'text': 'There we go.', 'start': 19509.366, 'duration': 0.52}, {'end': 19544.775, 'text': "Okay And it's likes Instagram 5462.", 'start': 19509.966, 'duration': 34.809}, {'end': 19553.097, 'text': "five, four, six, two, and the percentage was two, two, five, seven and it's green.", 'start': 19544.775, 'duration': 8.322}], 'summary': 'Efficiently reuse styles, update copy, and adjust numbers for card design.', 'duration': 123.555, 'max_score': 19429.542, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI19429542.jpg'}], 'start': 18100.82, 'title': 'Social media and web layout optimization', 'summary': 'Discusses optimizing social media dashboard layout, including adjusting heading tags for hierarchy, organizing grid layout, and implementing css grid styles, alongside the process of optimizing web layout design, focusing on presentation and functionality, with a detailed focus on css grid alignment and styling, including aligning grid items, justifying content and items, adjusting card height and spacing, and reusing styles efficiently.', 'chapters': [{'end': 18416.159, 'start': 18100.82, 'title': 'Optimizing social media dashboard layout', 'summary': 'Discusses optimizing the layout of a social media dashboard, including adjusting heading tags for hierarchy, organizing grid layout, and implementing css grid styles for display on different devices.', 'duration': 315.339, 'highlights': ['Adjust heading tags for hierarchy and designate sub headline as H2 tag to maintain page hierarchy. The speaker explains the importance of maintaining hierarchy on the webpage and designates the sub headline as an H2 tag to ensure proper formatting.', 'Organize grid layout by moving the cards element to its own div to have a separate section for the second row of cards. The speaker discusses organizing the grid layout by moving the cards element to its own div, allowing for a separate section for the second row of cards.', 'Implement CSS grid styles for display on different devices, specifying grid template columns and rows for mobile, tablet, and desktop breakpoints. The speaker demonstrates the implementation of CSS grid styles for display on various devices, specifying grid template columns and rows for mobile, tablet, and desktop breakpoints.']}, {'end': 18917.491, 'start': 18419.761, 'title': 'Web layout design optimization', 'summary': 'Details the process of optimizing the web layout design, including aligning elements and adjusting styles, with a focus on ensuring proper presentation and functionality, such as font size, alignment, and card layout.', 'duration': 497.73, 'highlights': ['The chapter discusses the process of optimizing the web layout design, including aligning elements and adjusting styles to ensure proper presentation and functionality.', 'Key points include adjusting font size, aligning elements, and organizing card layout.', 'The focus is on ensuring the proper presentation and functionality of the web layout design.']}, {'end': 19661.971, 'start': 18920.322, 'title': 'Css grid alignment and styling', 'summary': 'Focuses on using css grid to align and style card elements, including aligning grid items, justifying content and items, adjusting card height and spacing, and reusing styles efficiently.', 'duration': 741.649, 'highlights': ['The top row is centered vertically while the bottom row is aligned to the bottom, and the height of the card is adjusted to 114px. The top row is centered vertically, the bottom row is aligned to the bottom, and the card height is adjusted to 114px.', 'The rows are adjusted to take the height of the content and spacing is added using the gap property. The rows are adjusted to take the height of the content, and spacing is added using the gap property.', 'Grid styles for the top row are efficiently reused for the bottom row, making the process more efficient and easier. Grid styles for the top row are efficiently reused for the bottom row, making the process more efficient and easier.', 'The copy in each card is updated to match the design, including details such as likes, percentage change, and platform names. The copy in each card is updated to match the design, including details such as likes, percentage change, and platform names.']}], 'duration': 1561.151, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI18100820.jpg', 'highlights': ['Implement CSS grid styles for display on different devices, specifying grid template columns and rows for mobile, tablet, and desktop breakpoints.', 'Organize grid layout by moving the cards element to its own div to have a separate section for the second row of cards.', 'Adjust heading tags for hierarchy and designate sub headline as H2 tag to maintain page hierarchy.', 'The top row is centered vertically while the bottom row is aligned to the bottom, and the height of the card is adjusted to 114px.', 'Grid styles for the top row are efficiently reused for the bottom row, making the process more efficient and easier.', 'The copy in each card is updated to match the design, including details such as likes, percentage change, and platform names.', 'The chapter discusses the process of optimizing the web layout design, including aligning elements and adjusting styles to ensure proper presentation and functionality.']}, {'end': 21274.745, 'segs': [{'end': 19775.38, 'src': 'embed', 'start': 19736.308, 'weight': 0, 'content': [{'end': 19739.749, 'text': "Let's go back to design, make sure we didn't miss anything.", 'start': 19736.308, 'duration': 3.441}, {'end': 19742.169, 'text': "Yeah, it does seem like it's matching the design pretty well.", 'start': 19739.769, 'duration': 2.4}, {'end': 19750.251, 'text': "And I do need to do the hover state, so let's do that.", 'start': 19744.51, 'duration': 5.741}, {'end': 19756.313, 'text': 'So the hover state is on the cards.', 'start': 19751.612, 'duration': 4.701}, {'end': 19760.614, 'text': 'When you hover over a card, it looks like it just changes the background color.', 'start': 19756.353, 'duration': 4.261}, {'end': 19765.335, 'text': "Let's see if anything else changes.", 'start': 19760.634, 'duration': 4.701}, {'end': 19775.38, 'text': '338 a 33855.', 'start': 19772.717, 'duration': 2.663}], 'summary': 'Design review complete, hover state added to cards.', 'duration': 39.072, 'max_score': 19736.308, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI19736308.jpg'}, {'end': 19979.453, 'src': 'embed', 'start': 19896.426, 'weight': 1, 'content': [{'end': 19910.756, 'text': "um pseudo element or pseudo class, i think, is what it's called pseudo elements are the before and after, and then hover is a pseudo class.", 'start': 19896.426, 'duration': 14.33}, {'end': 19915.28, 'text': 'background var dark card hover.', 'start': 19910.756, 'duration': 4.524}, {'end': 19925.599, 'text': "and to make it look a bit nice we'll add a transition on that background 150 milliseconds.", 'start': 19915.28, 'duration': 10.319}, {'end': 19933.685, 'text': 'ease in out, this is kind of my default animation timing.', 'start': 19925.599, 'duration': 8.086}, {'end': 19940.73, 'text': 'so now, um, do any of the colors of the text change when you hover?', 'start': 19933.685, 'duration': 7.045}, {'end': 19951.649, 'text': "let's find out color is 8c9, 8c6, 8c9, 8c6..", 'start': 19940.73, 'duration': 10.919}, {'end': 19953.63, 'text': "So it's the same color.", 'start': 19951.79, 'duration': 1.84}, {'end': 19957.272, 'text': 'Okay So the text colors remain the same.', 'start': 19953.65, 'duration': 3.622}, {'end': 19961.033, 'text': "It's just the card colors that are changing when you hover.", 'start': 19957.512, 'duration': 3.521}, {'end': 19969.317, 'text': 'Cool And then I wonder if I should add a cursor property to card too.', 'start': 19962.254, 'duration': 7.063}, {'end': 19972.838, 'text': 'Cursor pointer.', 'start': 19970.417, 'duration': 2.421}, {'end': 19979.453, 'text': 'So this way, if you hover over any part of the card, it goes to the hand.', 'start': 19976.311, 'duration': 3.142}], 'summary': 'Styling pseudo elements and class with transitions; testing hover effects and cursor property.', 'duration': 83.027, 'max_score': 19896.426, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI19896426.jpg'}, {'end': 20018.525, 'src': 'embed', 'start': 19998.808, 'weight': 6, 'content': [{'end': 20009.657, 'text': 'So the next step is going to be we need to look at some of the accessibility things that we researched in our research video for the screen reader only text.', 'start': 19998.808, 'duration': 10.849}, {'end': 20018.525, 'text': 'And then we can start working on the light mode and getting the toggle working for switching between dark and light mode.', 'start': 20010.638, 'duration': 7.887}], 'summary': 'Next step: address accessibility features and implement light mode toggle.', 'duration': 19.717, 'max_score': 19998.808, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI19998808.jpg'}, {'end': 20147.248, 'src': 'embed', 'start': 20125.899, 'weight': 5, 'content': [{'end': 20134.642, 'text': "it's always good to go back to the design and we can see in the design that you know the original toggle was two options and it's really just a dark mode toggle.", 'start': 20125.899, 'duration': 8.743}, {'end': 20136.103, 'text': "So it's sort of like a light switch.", 'start': 20134.662, 'duration': 1.441}, {'end': 20140.445, 'text': "You're turning dark mode on or you're turning it off to go to light mode.", 'start': 20136.183, 'duration': 4.262}, {'end': 20147.248, 'text': 'so dark mode off is on the right position and then dark mode on is the left position.', 'start': 20141.445, 'duration': 5.803}], 'summary': 'Redesigned toggle now functions as a dark mode switch with two positions.', 'duration': 21.349, 'max_score': 20125.899, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI20125899.jpg'}, {'end': 20203.209, 'src': 'embed', 'start': 20172.194, 'weight': 4, 'content': [{'end': 20175.538, 'text': "So let me just make this a little bit smaller since we don't really need it right now.", 'start': 20172.194, 'duration': 3.344}, {'end': 20180.04, 'text': 'so here is the toggle.', 'start': 20177.578, 'duration': 2.462}, {'end': 20185.583, 'text': 'and yeah, we got these three options here system, dark and light.', 'start': 20180.04, 'duration': 5.543}, {'end': 20191.307, 'text': "so i'm going to remove system, and i think that's all i need to do.", 'start': 20185.583, 'duration': 5.724}, {'end': 20193.068, 'text': 'oh yeah, remove the labels too.', 'start': 20191.307, 'duration': 1.761}, {'end': 20196.41, 'text': "so let's save that and then go back to our site.", 'start': 20193.068, 'duration': 3.342}, {'end': 20203.209, 'text': "Okay, so now it goes from dark to light, and I think it's a little bit wider now than I really need it to be.", 'start': 20198.564, 'duration': 4.645}], 'summary': 'Adjust toggle options, remove system, and labels. toggle now transitions between dark and light.', 'duration': 31.015, 'max_score': 20172.194, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI20172194.jpg'}, {'end': 20397.873, 'src': 'embed', 'start': 20367.322, 'weight': 7, 'content': [{'end': 20375.747, 'text': "So I think maybe this shouldn't be the label for dark, but maybe it should be like the, the header kind of for the radio button.", 'start': 20367.322, 'duration': 8.425}, {'end': 20381.55, 'text': 'So I think I might need to look up what the correct element, like the semantic HTML element I want to use for that.', 'start': 20376.147, 'duration': 5.403}, {'end': 20386.413, 'text': "So let's see, let's check this link out.", 'start': 20381.65, 'duration': 4.763}, {'end': 20394.25, 'text': 'Okay, so legend.', 'start': 20391.408, 'duration': 2.842}, {'end': 20395.171, 'text': 'Oh, legend.', 'start': 20394.711, 'duration': 0.46}, {'end': 20397.873, 'text': "Maybe that's what is for like the sort of title of the radio button.", 'start': 20395.231, 'duration': 2.642}], 'summary': "Exploring using 'legend' as a header for the radio button.", 'duration': 30.551, 'max_score': 20367.322, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI20367322.jpg'}, {'end': 20532.044, 'src': 'embed', 'start': 20503.834, 'weight': 8, 'content': [{'end': 20505.896, 'text': 'I need to adjust the location of the cells.', 'start': 20503.834, 'duration': 2.062}, {'end': 20507.757, 'text': "So let's figure out what we're going to do.", 'start': 20506.776, 'duration': 0.981}, {'end': 20511.42, 'text': 'So I want to set header toggle to be two columns.', 'start': 20507.817, 'duration': 3.603}, {'end': 20513.601, 'text': 'The first column is going to be the legend element.', 'start': 20511.76, 'duration': 1.841}, {'end': 20516.063, 'text': 'Second column is going to be the toggle wrapper.', 'start': 20514.222, 'duration': 1.841}, {'end': 20517.544, 'text': "So let's do that.", 'start': 20516.704, 'duration': 0.84}, {'end': 20522.468, 'text': 'Toggle Oh, label.', 'start': 20518.325, 'duration': 4.143}, {'end': 20527.021, 'text': 'Um, oh yeah.', 'start': 20525.76, 'duration': 1.261}, {'end': 20528.602, 'text': 'So this, this is sorry.', 'start': 20527.081, 'duration': 1.521}, {'end': 20532.044, 'text': 'This is the CSS grid parent header toggle toggle.', 'start': 20528.622, 'duration': 3.422}], 'summary': 'Adjust cell location for header toggle to 2 columns.', 'duration': 28.21, 'max_score': 20503.834, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI20503834.jpg'}, {'end': 21108.646, 'src': 'embed', 'start': 21061.661, 'weight': 9, 'content': [{'end': 21081.668, 'text': "so i'll take this, put it in our boilerplate and then, if i add this visually hidden class to the span, Then I'll add back that label.", 'start': 21061.661, 'duration': 20.007}, {'end': 21093.72, 'text': 'And do the same thing for the dark mode off.', 'start': 21081.688, 'duration': 12.032}, {'end': 21103.489, 'text': "I know it seems maybe silly, because if you're using a screen reader you're not going to really be navigating this toggle,", 'start': 21096.102, 'duration': 7.387}, {'end': 21108.646, 'text': "but at least you'll be able to know that it's there, even if you're not selecting an option.", 'start': 21103.489, 'duration': 5.157}], 'summary': 'Adding visually hidden class to toggle span for accessibility improvement.', 'duration': 46.985, 'max_score': 21061.661, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI21061661.jpg'}, {'end': 21274.745, 'src': 'embed', 'start': 21243.326, 'weight': 10, 'content': [{'end': 21250.308, 'text': "field set can't be display grid, or at least the late, the legend tag doesn't seem to be working with display grid.", 'start': 21243.326, 'duration': 6.982}, {'end': 21253.109, 'text': "yeah, i guess that's a good lesson of like.", 'start': 21250.308, 'duration': 2.801}, {'end': 21254.29, 'text': "don't over complicate things.", 'start': 21253.109, 'duration': 1.181}, {'end': 21269.109, 'text': "You don't necessarily have to toss a grid or flexbox on every single thing, since this is working just fine with the label being set like that.", 'start': 21255.694, 'duration': 13.415}, {'end': 21271.652, 'text': 'Wait, I am doing display grid.', 'start': 21270.23, 'duration': 1.422}, {'end': 21274.745, 'text': 'Oh, so I guess grid does work.', 'start': 21273.524, 'duration': 1.221}], 'summary': "Lesson learned: don't overcomplicate, display grid works fine.", 'duration': 31.419, 'max_score': 21243.326, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI21243326.jpg'}], 'start': 19661.971, 'title': 'Styling and ui adjustments', 'summary': 'Involves styling card hover effects, implementing dark/light mode toggle, and improving design with semantic html, focusing on design consistency and layout adjustments.', 'chapters': [{'end': 19998.228, 'start': 19661.971, 'title': 'Styling card hover effects', 'summary': 'Involves styling and implementing hover effects for cards, including changing background color and adding cursor pointer, with a focus on matching the design and ensuring consistent color and transition properties.', 'duration': 336.257, 'highlights': ['The hover state involves changing the background color of the cards, with no scaling up or box shadow, and the color code used is 333A55.', 'Implementing a transition on the background with a duration of 150 milliseconds and ease-in-out timing for a smooth hover effect.', 'Adding a cursor pointer property to the cards to indicate interactivity and clicking functionality, ensuring a consistent user experience.', 'Matching the design of the cards and ensuring that the text colors remain the same while only the card colors change during hover.']}, {'end': 20316.028, 'start': 19998.808, 'title': 'Frontend mentor series: dark/light mode toggle', 'summary': 'Discusses incorporating feedback to remove the system preferences option from the dark/light mode toggle, reverting to two options, and adjusting the ui layout to align with the original design.', 'duration': 317.22, 'highlights': ['The toggle is updated to only include dark and light mode options, based on feedback to remove the system preferences option. The feedback from users Amar and Big Squeak prompted the adjustment, resulting in a more streamlined and user-friendly toggle interface.', 'The UI layout is adjusted to align with the original design, by reducing the width of the toggle to match the design specifications. The width of the toggle is adjusted from 60 REM to 48 REM, ensuring it aligns with the original design and provides a more consistent user experience.', 'The chapter discusses the initial plan of incorporating screen reader accessibility features and working on the light mode toggle functionality. The initial steps involve researching accessibility features and implementing the functionality to switch between light and dark mode based on system preferences or user control.']}, {'end': 20975.391, 'start': 20316.028, 'title': 'Improving design with semantic html', 'summary': 'Discusses improving the design by replacing a label with a legend element, adjusting css grid properties, and encountering limitations with display properties on field sets and legend.', 'duration': 659.363, 'highlights': ['Replacing a label with a legend element The speaker considers replacing a label with a legend element to improve design and ensure proper semantics.', 'Adjusting CSS grid properties The speaker discusses adjusting CSS grid properties to accommodate changes in the design, aiming to create a two-column layout.', 'Limitations with display properties on field sets and legend The speaker encounters limitations with display properties on field sets and legend, leading to the need to use display inline block and reflects on the challenges of controlling the display.']}, {'end': 21274.745, 'start': 20976.794, 'title': 'Styling dark mode toggle', 'summary': 'Details the process of styling a dark mode toggle with specific css properties and classes, including the use of display grid and inline block, and addresses the importance of accessibility for screen readers.', 'duration': 297.951, 'highlights': ['The chapter discusses switching back to a label for the dark mode toggle and adding a visually hidden class for screen readers, emphasizing the importance of accessibility (e.g., visually hidden class for screen readers).', 'It outlines the steps taken to align the label and toggle, including the use of display inline block and adjusting line height for proper alignment (e.g., using display inline block for alignment and adjusting line height for proper centering).', 'The author reflects on the learning experience and acknowledges that over-complicating styling with unnecessary CSS properties, such as display grid, is not always essential (e.g., reflecting on the unnecessary use of display grid and the simplicity of using label for styling).']}], 'duration': 1612.774, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI19661971.jpg', 'highlights': ['The hover state involves changing the background color of the cards with a color code of 333A55.', 'Implementing a transition on the background with a duration of 150 milliseconds and ease-in-out timing for a smooth hover effect.', 'Adding a cursor pointer property to the cards to indicate interactivity and clicking functionality, ensuring a consistent user experience.', 'Matching the design of the cards and ensuring that the text colors remain the same while only the card colors change during hover.', 'The toggle is updated to only include dark and light mode options, based on feedback to remove the system preferences option.', 'The UI layout is adjusted to align with the original design, by reducing the width of the toggle to match the design specifications.', 'The chapter discusses the initial plan of incorporating screen reader accessibility features and working on the light mode toggle functionality.', 'Replacing a label with a legend element to improve design and ensure proper semantics.', 'Adjusting CSS grid properties to accommodate changes in the design, aiming to create a two-column layout.', 'The chapter discusses switching back to a label for the dark mode toggle and adding a visually hidden class for screen readers, emphasizing the importance of accessibility.', 'The author reflects on the learning experience and acknowledges that over-complicating styling with unnecessary CSS properties, such as display grid, is not always essential.']}, {'end': 22824.375, 'segs': [{'end': 21326.029, 'src': 'embed', 'start': 21275.505, 'weight': 0, 'content': [{'end': 21282.188, 'text': "But yeah, it's like not trying to overcomplicate things and just controlling the alignment with the line height property.", 'start': 21275.505, 'duration': 6.683}, {'end': 21291.051, 'text': 'OK. so the next thing we want to do is I want to start getting the logic working so that if your system preferences are set to either light or dark,', 'start': 21282.208, 'duration': 8.843}, {'end': 21298.594, 'text': 'the website will automatically load either light or dark mode based on the media query for prefers color scheme.', 'start': 21291.051, 'duration': 7.543}, {'end': 21304.858, 'text': 'So I think One of the links from my notes was the prefers color scheme thing from MDN.', 'start': 21298.815, 'duration': 6.043}, {'end': 21306.719, 'text': 'So this is a media query.', 'start': 21305.358, 'duration': 1.361}, {'end': 21309.66, 'text': 'It can be set to either light or dark.', 'start': 21306.739, 'duration': 2.921}, {'end': 21311.761, 'text': 'Zoom in a little bit.', 'start': 21311.021, 'duration': 0.74}, {'end': 21314.563, 'text': "And then it's here.", 'start': 21313.302, 'duration': 1.261}, {'end': 21316.744, 'text': 'So media prefers color scheme dark.', 'start': 21314.623, 'duration': 2.121}, {'end': 21322.147, 'text': 'So I believe we can target that to set the background to be either light or dark.', 'start': 21316.944, 'duration': 5.203}, {'end': 21326.029, 'text': "Then there's another example on Piccadilly.", 'start': 21322.487, 'duration': 3.542}], 'summary': 'Implementing logic for automatic light/dark mode based on system preferences using media query for prefers color scheme.', 'duration': 50.524, 'max_score': 21275.505, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI21275505.jpg'}, {'end': 21379.059, 'src': 'embed', 'start': 21353.135, 'weight': 2, 'content': [{'end': 21358.715, 'text': 'So using CSS custom properties for the different colors, which is what I did.', 'start': 21353.135, 'duration': 5.58}, {'end': 21359.916, 'text': 'This is interesting.', 'start': 21358.735, 'duration': 1.181}, {'end': 21363.236, 'text': "He's setting a color mode variable, setting it to light by default.", 'start': 21359.956, 'duration': 3.28}, {'end': 21365.777, 'text': "That's interesting.", 'start': 21365.177, 'duration': 0.6}, {'end': 21367.437, 'text': "Let's see.", 'start': 21365.797, 'duration': 1.64}, {'end': 21370.217, 'text': 'Okay Here we go.', 'start': 21368.577, 'duration': 1.64}, {'end': 21379.059, 'text': 'So the background is set to VAR background, which is VAR background is set by default to a light color.', 'start': 21370.237, 'duration': 8.822}], 'summary': 'Using css custom properties for colors, setting color mode variable to light by default.', 'duration': 25.924, 'max_score': 21353.135, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI21353135.jpg'}, {'end': 22742.829, 'src': 'embed', 'start': 22714.912, 'weight': 4, 'content': [{'end': 22720.302, 'text': "For the toggle logic, what I want is to, I guess there's a couple of things.", 'start': 22714.912, 'duration': 5.39}, {'end': 22724.83, 'text': "One is we want the switch to actually control, you know, what mode you're using.", 'start': 22720.522, 'duration': 4.308}, {'end': 22737.966, 'text': "Two, I need to, if the user color preferences are set and we're loading the thing, we also need the toggle to be set.", 'start': 22725.972, 'duration': 11.994}, {'end': 22742.829, 'text': "So, like right now, I have my OS set to light mode and it's loaded the light mode,", 'start': 22738.026, 'duration': 4.803}], 'summary': 'Implement toggle logic to control mode and user color preferences.', 'duration': 27.917, 'max_score': 22714.912, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI22714912.jpg'}], 'start': 21275.505, 'title': 'Implementing light and dark mode with media queries', 'summary': 'Discusses implementing light and dark mode using media queries for prefers color scheme, including the logic to automatically load the website in light or dark mode based on system preferences and utilizing media queries for targeting light or dark backgrounds.', 'chapters': [{'end': 21352.374, 'start': 21275.505, 'title': 'Implementing light and dark mode with media query', 'summary': 'Discusses implementing light and dark mode using media queries for prefers color scheme, including the logic to automatically load the website in light or dark mode based on system preferences and utilizing media queries for targeting light or dark backgrounds.', 'duration': 76.869, 'highlights': ['The logic to automatically load the website in light or dark mode based on system preferences', 'Utilizing media queries for targeting light or dark backgrounds', "Media query 'prefers color scheme' can be set to either light or dark"]}, {'end': 21515.229, 'start': 21353.135, 'title': 'Using css custom properties for color modes', 'summary': "Explores the use of css custom properties for setting color modes, highlighting the process of detecting and applying the user's preferred color scheme and preventing default overrides, with a mention of using javascript and local storage.", 'duration': 162.094, 'highlights': ["The chapter explores the use of CSS custom properties for setting color modes, highlighting the process of detecting and applying the user's preferred color scheme and preventing default overrides, with a mention of using JavaScript and local storage.", 'The background is set to VAR background, which is VAR background is set by default to a light color.', "If the user prefers dark mode inside the media query, we're making the relevant theme changes. In the same media query, we're setting the color mode, which is color mode dark.", "He's setting this data field on the HTML element if there is a color scheme, either light or dark, detected and it's saying he's setting it with JavaScript.", "He's using local storage to save if you have this set."]}, {'end': 21854.907, 'start': 21516.823, 'title': 'Web design: dark and light mode', 'summary': 'Discusses implementing dark and light mode on a website, using prefers color scheme media query and setting variables for background and text color, with a default light mode and the ability to switch to dark mode.', 'duration': 338.084, 'highlights': ['The chapter discusses using prefers color scheme media query and setting variables for background and text color.', 'Implementing dark and light mode on a website, with a default light mode and the ability to switch to dark mode.', 'Demonstrating the ability to set variables to other variables, and seeing the changes reflect on the website.', 'The approach involves changing all the colors to be light by default, and then setting the dark mode colors and the light mode colors.']}, {'end': 22185.705, 'start': 21854.927, 'title': 'Color adjustment in figma design', 'summary': 'Discusses the process of adjusting colors in a figma design, including setting hsl values, creating variables for text and background colors, and addressing hover state colors.', 'duration': 330.778, 'highlights': ["The speaker attempts to set Figma to use HSL instead of hex, but finds that it's not a feature right now, indicating a limitation in the current functionality of Figma.", 'The process involves creating variables for text and background colors to achieve the desired design, exemplifying the use of variables in design customization.', 'The speaker addresses hover state colors, specifically mentioning the process of finding and adding each little item, showcasing attention to detail in design implementation.']}, {'end': 22824.375, 'start': 22186.906, 'title': 'Web design: fixing color modes and toggle logic', 'summary': 'Discusses fixing color modes, including changing colors and implementing the toggle logic for light and dark modes, while also addressing the challenges in navigating css properties and setting toggle preferences based on user color preferences.', 'duration': 637.469, 'highlights': ['Implementing toggle logic for light and dark modes. The chapter discusses implementing the toggle logic for light and dark modes.', 'Challenges in navigating CSS properties and finding actual color values. The transcript highlights the challenges in navigating CSS properties and finding actual color values.', 'Adjusting toggle preferences based on user color preferences. Addressing the need to adjust toggle preferences based on user color preferences.', 'Technical details of changing colors and fixing color modes. The technical details of changing colors and fixing color modes are discussed in the chapter.']}], 'duration': 1548.87, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI21275505.jpg', 'highlights': ['The logic to automatically load the website in light or dark mode based on system preferences', 'Utilizing media queries for targeting light or dark backgrounds', "The chapter explores the use of CSS custom properties for setting color modes, highlighting the process of detecting and applying the user's preferred color scheme and preventing default overrides, with a mention of using JavaScript and local storage", 'Implementing dark and light mode on a website, with a default light mode and the ability to switch to dark mode', 'Implementing toggle logic for light and dark modes. The chapter discusses implementing the toggle logic for light and dark modes']}, {'end': 25947.644, 'segs': [{'end': 22857.551, 'src': 'embed', 'start': 22824.916, 'weight': 6, 'content': [{'end': 22834.441, 'text': "So let's work on if I set the toggle to dark mode on to the left, it'll have dark mode and then switch to light mode.", 'start': 22824.916, 'duration': 9.525}, {'end': 22836.702, 'text': "So let's figure out how to do that.", 'start': 22835.361, 'duration': 1.341}, {'end': 22844.687, 'text': 'So I think what I want to do is I need to figure out how controlling the toggle will set the color scheme.', 'start': 22838.044, 'duration': 6.643}, {'end': 22851.389, 'text': 'Cause right now, all I did was change the color variables based on media prefers color scheme.', 'start': 22844.727, 'duration': 6.662}, {'end': 22857.551, 'text': "And let's see how people do that.", 'start': 22855.551, 'duration': 2}], 'summary': 'Developing a toggle to switch between dark and light mode for color scheme control.', 'duration': 32.635, 'max_score': 22824.916, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI22824916.jpg'}, {'end': 22972.567, 'src': 'embed', 'start': 22946.111, 'weight': 0, 'content': [{'end': 22951.713, 'text': 'All it does is sets the color mode variable to dark.', 'start': 22946.111, 'duration': 5.602}, {'end': 22963.66, 'text': "And then I think there's maybe a link between this variable and then if the Data user color scheme is set to dark because it's not setting color mode here.", 'start': 22952.634, 'duration': 11.026}, {'end': 22972.567, 'text': "So there's some link I'm guessing in the JavaScript that if it detects you've set your OS to dark, it'll set the color mode variable to dark.", 'start': 22963.68, 'duration': 8.887}], 'summary': 'Javascript sets color mode variable to dark based on os setting.', 'duration': 26.456, 'max_score': 22946.111, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI22946111.jpg'}, {'end': 23085.752, 'src': 'embed', 'start': 23050.501, 'weight': 1, 'content': [{'end': 23058.628, 'text': 'This is a condensed version of the function used in this tutorial, which I guess we need to read get a CSS custom property value with JavaScript.', 'start': 23050.501, 'duration': 8.127}, {'end': 23067.235, 'text': 'And that is used to get the value of color mode, get computed style.', 'start': 23059.388, 'duration': 7.847}, {'end': 23081.71, 'text': 'okay. so this example is using support scroll snap variable, support scroll snap, and then the javascript is saying getting the component,', 'start': 23069.645, 'duration': 12.065}, {'end': 23085.752, 'text': "so he's getting the css custom property.", 'start': 23081.71, 'duration': 4.042}], 'summary': 'Javascript function retrieves css custom property value for color mode.', 'duration': 35.251, 'max_score': 23050.501, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI23050501.jpg'}, {'end': 23191.924, 'src': 'embed', 'start': 23160.642, 'weight': 3, 'content': [{'end': 23162.303, 'text': 'A complete guide to the dark mode toggle.', 'start': 23160.642, 'duration': 1.661}, {'end': 23164.945, 'text': "Okay So we'll read, read a couple of these things.", 'start': 23162.323, 'duration': 2.622}, {'end': 23172.612, 'text': 'Toggling themes.', 'start': 23171.551, 'duration': 1.061}, {'end': 23180.155, 'text': "Okay, there's several approaches to do this using a body class, separate style sheets, custom properties, server side scripts.", 'start': 23175.031, 'duration': 5.124}, {'end': 23191.924, 'text': "Okay, if users want to override their system preference for a site, it looks like he's overriding it with the CSS class.", 'start': 23182.337, 'duration': 9.587}], 'summary': 'Guide to dark mode toggle with multiple approaches for implementation.', 'duration': 31.282, 'max_score': 23160.642, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI23160642.jpg'}, {'end': 23435.725, 'src': 'embed', 'start': 23400.954, 'weight': 4, 'content': [{'end': 23404.916, 'text': "Yeah So anytime you use JavaScript, it'll have that flash.", 'start': 23400.954, 'duration': 3.962}, {'end': 23410.878, 'text': "If it's different, maybe there's just not a great way to do it.", 'start': 23405.456, 'duration': 5.422}, {'end': 23414.461, 'text': "So let's think about this.", 'start': 23412.921, 'duration': 1.54}, {'end': 23419.502, 'text': "Um, so maybe we'll worry about the flash, not at all or another time.", 'start': 23414.961, 'duration': 4.541}, {'end': 23426.844, 'text': "Cause this is maybe a bit of an edge case, but let's at least figure out how we want the toggle logic to work.", 'start': 23419.562, 'duration': 7.282}, {'end': 23435.725, 'text': 'So Andy Bell did it by adding, um, a attribute on the HTML body on the HTML element.', 'start': 23427.004, 'duration': 8.721}], 'summary': 'Javascript may cause a flash; toggle logic via html attribute.', 'duration': 34.771, 'max_score': 23400.954, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI23400954.jpg'}, {'end': 23490.079, 'src': 'embed', 'start': 23456.703, 'weight': 5, 'content': [{'end': 23460.584, 'text': "And I don't know if I can because this is technically a media query.", 'start': 23456.703, 'duration': 3.881}, {'end': 23462.085, 'text': "Let's see if that's possible.", 'start': 23460.604, 'duration': 1.481}, {'end': 23470.228, 'text': 'See if you can do CSS selector media query or has class.', 'start': 23462.185, 'duration': 8.043}, {'end': 23472.189, 'text': "I don't think it's possible.", 'start': 23471.048, 'duration': 1.141}, {'end': 23476.848, 'text': "Um, let's think about this.", 'start': 23474.265, 'duration': 2.583}, {'end': 23480.551, 'text': "I just don't want to duplicate these rules.", 'start': 23476.868, 'duration': 3.683}, {'end': 23482.473, 'text': "I don't know if there's a way around that.", 'start': 23481.251, 'duration': 1.222}, {'end': 23490.079, 'text': "So maybe we'll let's figure out if how we want to set the color with the toggle.", 'start': 23484.855, 'duration': 5.224}], 'summary': 'Exploring the possibility of using css selector media query for color toggle.', 'duration': 33.376, 'max_score': 23456.703, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI23456703.jpg'}, {'end': 24269.886, 'src': 'embed', 'start': 24217.947, 'weight': 7, 'content': [{'end': 24220.429, 'text': 'And I guess people seem to be using a local storage for that.', 'start': 24217.947, 'duration': 2.482}, {'end': 24223.791, 'text': 'So if we manually change the mode.', 'start': 24220.529, 'duration': 3.262}, {'end': 24230.089, 'text': "And maybe we should add some logic for like, if I don't know if we have to,", 'start': 24225.487, 'duration': 4.602}, {'end': 24238.912, 'text': 'but I wonder if we have to add logic for if the checking if the local storage matches the prefers color scheme thing.', 'start': 24230.089, 'duration': 8.823}, {'end': 24240.073, 'text': "but maybe we don't have to do that.", 'start': 24238.912, 'duration': 1.161}, {'end': 24242.174, 'text': "So we'll start with checking.", 'start': 24240.453, 'duration': 1.721}, {'end': 24247.696, 'text': "We'll start with saving the mode, whether darker light to local storage.", 'start': 24242.694, 'duration': 5.002}, {'end': 24254.059, 'text': "Then when we reload the page, we want to check local storage and see if it's darker light.", 'start': 24248.436, 'duration': 5.623}, {'end': 24261.422, 'text': "And then I guess add the corresponding class to the body, because if we just load, the body doesn't have anything.", 'start': 24254.619, 'duration': 6.803}, {'end': 24263.103, 'text': "OK, so let's do that.", 'start': 24262.302, 'duration': 0.801}, {'end': 24265.084, 'text': 'So saving to local storage.', 'start': 24263.163, 'duration': 1.921}, {'end': 24269.886, 'text': "Let's go back to the handy dandy Andy Bell's thing.", 'start': 24266.224, 'duration': 3.662}], 'summary': 'Developing logic for saving and checking mode in local storage.', 'duration': 51.939, 'max_score': 24217.947, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI24217947.jpg'}, {'end': 24390.259, 'src': 'embed', 'start': 24338.534, 'weight': 8, 'content': [{'end': 24352.064, 'text': "so if it is dark we want to set local storage, set item and i guess we'll just say color mode and we'll set it to dark.", 'start': 24338.534, 'duration': 13.53}, {'end': 24371.344, 'text': "otherwise we'll set it to light and i guess maybe we'll also test it so that, um, When we first load the site we want to load the local storage,", 'start': 24352.064, 'duration': 19.28}, {'end': 24375.027, 'text': 'get item color mode.', 'start': 24371.344, 'duration': 3.683}, {'end': 24378.89, 'text': "OK Let's see how that looks.", 'start': 24375.047, 'duration': 3.843}, {'end': 24386.176, 'text': "So let's set it to light.", 'start': 24385.315, 'duration': 0.861}, {'end': 24388.137, 'text': "And now let's reload.", 'start': 24386.576, 'duration': 1.561}, {'end': 24390.259, 'text': "And it's set to light.", 'start': 24389.698, 'duration': 0.561}], 'summary': 'Setting local storage for dark/light mode, testing initial load: set to light.', 'duration': 51.725, 'max_score': 24338.534, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI24338534.jpg'}, {'end': 24629.665, 'src': 'embed', 'start': 24542.902, 'weight': 10, 'content': [{'end': 24544.683, 'text': "So then we're not duplicating code.", 'start': 24542.902, 'duration': 1.781}, {'end': 24550.347, 'text': "So we'll say set color mode.", 'start': 24548.666, 'duration': 1.681}, {'end': 24568.425, 'text': 'And then if color mode equals dark, Then set dark mode.', 'start': 24551.608, 'duration': 16.817}, {'end': 24575.112, 'text': 'Else set light mode.', 'start': 24572.89, 'duration': 2.222}, {'end': 24579.397, 'text': "And then we'll run color mode.", 'start': 24577.855, 'duration': 1.542}, {'end': 24599.271, 'text': "OK, so let's just.", 'start': 24598.05, 'duration': 1.221}, {'end': 24604.496, 'text': "I'm going to add some console log messages just to make sure everything's running.", 'start': 24601.533, 'duration': 2.963}, {'end': 24609.701, 'text': 'Set color mode.', 'start': 24608.299, 'duration': 1.402}, {'end': 24617.568, 'text': 'And then I guess we also want to get the local storage thing.', 'start': 24611.342, 'duration': 6.226}, {'end': 24629.665, 'text': 'OK, color mode is set to light.', 'start': 24628.024, 'duration': 1.641}], 'summary': 'Code sets color mode based on condition, with light mode set as default.', 'duration': 86.763, 'max_score': 24542.902, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI24542902.jpg'}, {'end': 24841.836, 'src': 'embed', 'start': 24795.744, 'weight': 9, 'content': [{'end': 24798.726, 'text': 'So if dark button is checked, then select dark.', 'start': 24795.744, 'duration': 2.982}, {'end': 24809.575, 'text': 'And then now I will do if color mode set to dark from the local storage, I will say dark button click.', 'start': 24800.087, 'duration': 9.488}, {'end': 24815.38, 'text': 'Otherwise I will say light button click.', 'start': 24812.277, 'duration': 3.103}, {'end': 24820.221, 'text': 'All right, see if this works.', 'start': 24818.82, 'duration': 1.401}, {'end': 24831.008, 'text': "So I'm set to light mode, so I want to do a hard refresh and hopefully it will select the light setting.", 'start': 24825.424, 'duration': 5.584}, {'end': 24841.836, 'text': 'OK Cool.', 'start': 24831.028, 'duration': 10.808}], 'summary': 'A script was written to select a color mode based on a check and local storage, with a successful outcome.', 'duration': 46.092, 'max_score': 24795.744, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI24795744.jpg'}, {'end': 25136.824, 'src': 'embed', 'start': 25045.333, 'weight': 12, 'content': [{'end': 25056.819, 'text': 'Hmm, How do I check the prefers color scheme with JavaScript and some of these things?', 'start': 25045.333, 'duration': 11.486}, {'end': 25074.96, 'text': "um, javascript check prefers color scheme, so it's the window get computed style, which i think andy was using.", 'start': 25059.546, 'duration': 15.414}, {'end': 25089.218, 'text': "hmm, Wait, where's the code?", 'start': 25074.96, 'duration': 14.258}, {'end': 25094.521, 'text': "Oh, that's interesting.", 'start': 25093.7, 'duration': 0.821}, {'end': 25095.722, 'text': 'Window match media.', 'start': 25094.601, 'duration': 1.121}, {'end': 25113.33, 'text': "That's interesting.", 'start': 25112.77, 'duration': 0.56}, {'end': 25114.231, 'text': 'Window match media.', 'start': 25113.39, 'duration': 0.841}, {'end': 25118.896, 'text': "Let's test it.", 'start': 25118.376, 'duration': 0.52}, {'end': 25120.077, 'text': "Let's change to dark mode.", 'start': 25118.916, 'duration': 1.161}, {'end': 25130.901, 'text': 'Oh Um.', 'start': 25128, 'duration': 2.901}, {'end': 25136.824, 'text': 'Hmm That was weird.', 'start': 25135.003, 'duration': 1.821}], 'summary': 'Using javascript to check prefers color scheme and test window match media.', 'duration': 91.491, 'max_score': 25045.333, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI25045333.jpg'}, {'end': 25343.959, 'src': 'embed', 'start': 25304.445, 'weight': 11, 'content': [{'end': 25313.092, 'text': "So how can you detect can you detect the change of your color mode like through JavaScript? There's a lot of levels of complexity to this.", 'start': 25304.445, 'duration': 8.647}, {'end': 25329.092, 'text': 'Can you detect the prefers color scheme change? How often would that actually.', 'start': 25313.112, 'duration': 15.98}, {'end': 25331.653, 'text': 'Oh, Flavio.', 'start': 25329.112, 'duration': 2.541}, {'end': 25341.638, 'text': 'I was wondering how often would it actually, would you actually need this? So if we delete this, do a hard refresh.', 'start': 25331.673, 'duration': 9.965}, {'end': 25343.959, 'text': 'I think I did set light as a default.', 'start': 25341.658, 'duration': 2.301}], 'summary': 'Detect color mode change through javascript, considering user preference.', 'duration': 39.514, 'max_score': 25304.445, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI25304445.jpg'}], 'start': 22824.916, 'title': 'Color scheme and dark mode toggle implementation', 'summary': 'Discusses controlling the color scheme toggle, dark mode toggle implementation, toggling classes and local storage in javascript, implementing dark/light mode switch using local storage and javascript functions, and javascript color scheme detection, addressing considerations for user preferences, challenges, and testing for persistent settings.', 'chapters': [{'end': 23129.885, 'start': 22824.916, 'title': 'Controlling color scheme toggle', 'summary': 'Discusses the process of controlling the color scheme toggle, including setting the color mode variable and data user color scheme attribute in javascript, using functions like getcomputedstyle to retrieve css properties.', 'duration': 304.969, 'highlights': ['The process involves setting the color mode variable and data user color scheme attribute in JavaScript, based on the OS setting, to switch between light and dark mode.', 'The tutorial discusses the usage of the getComputedStyle function to retrieve the computed value of CSS properties, such as the color mode variable.', 'The JavaScript function getComputedStyle is used to obtain the computed value of CSS properties, aiding in controlling the color scheme toggle.']}, {'end': 23650.402, 'start': 23129.905, 'title': 'Dark mode toggle implementation', 'summary': 'Explores the implementation of a dark mode toggle using css custom properties and javascript logic, including considerations for user preferences and potential flash effects, as well as the challenges in streamlining the toggle logic and css rules.', 'duration': 520.497, 'highlights': ['The chapter explores the implementation of a dark mode toggle using CSS custom properties and JavaScript logic. The chapter discusses the process of creating a dark mode toggle using CSS custom properties and JavaScript logic to switch between light and dark themes.', 'Considerations for user preferences and potential flash effects are discussed. The discussion includes considerations for accommodating user preferences and addressing potential flash effects when switching between light and dark modes based on OS settings and local storage.', 'Challenges in streamlining the toggle logic and CSS rules are highlighted. The chapter addresses the challenges in streamlining the toggle logic and CSS rules, particularly in avoiding duplication of rules and exploring efficient ways to apply the toggle logic.']}, {'end': 24338.534, 'start': 23652.804, 'title': 'Toggle class and local storage in javascript', 'summary': 'Discusses adding a toggle to switch between dark and light mode, implementing event handling for the toggle, and saving the mode to local storage for persistent settings.', 'duration': 685.73, 'highlights': ['Implementing toggle to switch between dark and light mode The chapter focuses on adding a toggle to switch between dark and light mode using JavaScript.', 'Implementing event handling for the toggle The chapter discusses the process of implementing event handling for the toggle, ensuring that clicking the radio buttons triggers the expected behavior.', 'Saving the mode to local storage for persistent settings The chapter explores the use of local storage in JavaScript to persistently save the selected mode (dark or light) and applying the corresponding class to the body when the page is reloaded.']}, {'end': 25009.906, 'start': 24338.534, 'title': 'Implementing dark/light mode switch', 'summary': 'Involves implementing a dark/light mode switch using local storage and javascript functions, where testing and logic adjustments were made to ensure the mode selection persisted even after a hard refresh.', 'duration': 671.372, 'highlights': ['Implemented local storage and JavaScript functions to set dark and light mode The speaker discussed setting local storage to store the color mode as dark or light, and creating JavaScript functions to retrieve the color mode and apply the corresponding dark or light class to the body.', 'Adjusted logic to ensure mode selection persisted after hard refresh The speaker made logic adjustments to ensure that the mode selection persisted even after a hard refresh, testing the functionality and adding console log messages to track the process.', 'Troubleshooted and resolved issues with default mode selection The speaker troubleshooted issues with the default mode selection by adding console log messages and adjusting logic to correctly set the mode as dark or light based on the local storage value.']}, {'end': 25947.644, 'start': 25009.926, 'title': 'Javascript color scheme detection', 'summary': 'Details the process of detecting and controlling color mode preferences using javascript, including setting the toggle position based on the color scheme and handling local storage to override the preferred color scheme, with a focus on achieving desired behavior through various scenarios of color mode changes.', 'duration': 937.718, 'highlights': ['The process focuses on detecting and controlling color mode preferences using JavaScript, including setting the toggle position based on the color scheme and handling local storage to override the preferred color scheme.', 'It involves checking the prefers color scheme using JavaScript, utilizing methods like window.getComputedStyle and window.matchMedia, and implementing event listeners to detect mode changes while using the website.', 'The code also addresses scenarios where local storage needs to override the preferred color scheme and considers the desired behavior in various color mode change scenarios, ultimately achieving a reasonably understandable and functional result.']}], 'duration': 3122.728, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/krfUjg0S2uI/pics/krfUjg0S2uI22824916.jpg', 'highlights': ['The process involves setting the color mode variable and data user color scheme attribute in JavaScript, based on the OS setting, to switch between light and dark mode.', 'The tutorial discusses the usage of the getComputedStyle function to retrieve the computed value of CSS properties, such as the color mode variable.', 'The JavaScript function getComputedStyle is used to obtain the computed value of CSS properties, aiding in controlling the color scheme toggle.', 'The chapter explores the implementation of a dark mode toggle using CSS custom properties and JavaScript logic.', 'Considerations for user preferences and potential flash effects are discussed.', 'Challenges in streamlining the toggle logic and CSS rules are highlighted.', 'Implementing toggle to switch between dark and light mode The chapter focuses on adding a toggle to switch between dark and light mode using JavaScript.', 'Saving the mode to local storage for persistent settings The chapter explores the use of local storage in JavaScript to persistently save the selected mode (dark or light) and applying the corresponding class to the body when the page is reloaded.', 'Implemented local storage and JavaScript functions to set dark and light mode The speaker discussed setting local storage to store the color mode as dark or light, and creating JavaScript functions to retrieve the color mode and apply the corresponding dark or light class to the body.', 'Adjusted logic to ensure mode selection persisted after hard refresh The speaker made logic adjustments to ensure that the mode selection persisted even after a hard refresh, testing the functionality and adding console log messages to track the process.', 'Troubleshooted and resolved issues with default mode selection The speaker troubleshooted issues with the default mode selection by adding console log messages and adjusting logic to correctly set the mode as dark or light based on the local storage value.', 'The process focuses on detecting and controlling color mode preferences using JavaScript, including setting the toggle position based on the color scheme and handling local storage to override the preferred color scheme.', 'It involves checking the prefers color scheme using JavaScript, utilizing methods like window.getComputedStyle and window.matchMedia, and implementing event listeners to detect mode changes while using the website.', 'The code also addresses scenarios where local storage needs to override the preferred color scheme and considers the desired behavior in various color mode change scenarios, ultimately achieving a reasonably understandable and functional result.']}], 'highlights': ['The course emphasizes practical methods for planning a website project and resourceful techniques for researching solutions.', 'The importance of adhering to design details, minimal JavaScript usage, responsive layout for different devices, hover states, and color theme toggling for the project.', 'The need for a three-option toggle for dark mode is highlighted to accommodate user system preferences.', 'Using correct heading tags and screen reader-only text ensures accessibility for users with disabilities.', 'Emphasizes the importance of creating a GitHub repo at the beginning to facilitate source control and make commits as coding progresses.', 'The use of mixins for media queries allows for easy code reuse and maintenance, avoiding the need to type out repetitive code and enabling quick updates by changing the code in one place.', 'Setting up CSS variables using CSS custom properties and prefers color scheme media query.', 'Configuring the Gulp file with tasks for compiling SAS and JavaScript files.', 'Automatic reload on local website changes.', 'The layout transitions from a four-column grid on desktop to a single column on mobile, aligning with a common design pattern for multi-column content on different devices.', 'The chapter discusses building a dark mode version of a dashboard with the intention to address light mode and toggle logic in the next video.', 'The chapter discusses the process of positioning labels using CSS Grid and altering markup to enhance the presentation of toggle elements.', 'Implementing transition states on the toggle button for a smoother user experience.', 'Demonstration of how to structure styles in SCSS files and the benefits of using SAS and BEM for organized and structured styles.', 'Creating HTML elements for a card, including the platform icon, username, follower count, and change.', 'Polypane allows syncing of multiple devices for debugging responsive websites, aiding in comparing mobile and desktop views (synced toggle, scroll position), which can be helpful for website development.', "Figma provides actual CSS for design elements, enhancing developer's workflow.", 'Implementing a grid layout using Flexbox features a 30-pixel gap between items.', 'The Instagram card linear gradient design is explored through the use of pseudo elements and position settings, demonstrating a step-by-step problem-solving approach with a focus on CSS properties.', 'The logic to automatically load the website in light or dark mode based on system preferences.', 'The process involves setting the color mode variable and data user color scheme attribute in JavaScript, based on the OS setting, to switch between light and dark mode.', 'The tutorial discusses the usage of the getComputedStyle function to retrieve the computed value of CSS properties, such as the color mode variable.', 'The process focuses on detecting and controlling color mode preferences using JavaScript, including setting the toggle position based on the color scheme and handling local storage to override the preferred color scheme.']}