title
Social Network Theme With Sass - Part 1
description
In this part we will setup Sass, create the landing page with navigation, image overlay, Sass variables, mixins and functions
Sponsor: DevMountain Bootcamp
https://goo.gl/6q0dEa
Code:
https://github.com/bradtraversy/devconnector_theme_sass
MERN Course With Full App:
https://www.udemy.com/mern-stack-front-to-back/?couponCode=TRAVERSYMEDIA
💖 Become a Patron: Show support & get perks!
http://www.patreon.com/traversymedia
Follow Traversy Media:
https://www.facebook.com/traversymedia
https://www.twitter.com/traversymedia
https://www.instagram.com/traversymedia
detail
{'title': 'Social Network Theme With Sass - Part 1', 'heatmap': [{'end': 308.168, 'start': 249.235, 'weight': 1}, {'end': 406.101, 'start': 376.065, 'weight': 0.863}, {'end': 1497.25, 'start': 1469.545, 'weight': 0.779}, {'end': 2506.181, 'start': 2480.309, 'weight': 0.822}], 'summary': 'Learn to build a social network ui theme with html, css, and sass, including css grid, flexbox, and utility classes, while also covering compiling sass, setting up a sass environment, styling nav bar in scss and flexbox, scss utility classes and mixins, css styling techniques, and styling text, buttons, and color classes.', 'chapters': [{'end': 219.114, 'segs': [{'end': 91.911, 'src': 'embed', 'start': 7.059, 'weight': 0, 'content': [{'end': 8.901, 'text': 'This video is sponsored by DevMountain.', 'start': 7.059, 'duration': 1.842}, {'end': 12.986, 'text': "If you're interested in learning web development, iOS or UX design,", 'start': 8.921, 'duration': 4.065}, {'end': 18.673, 'text': 'DevMountain is a 12-week design and development boot camp intended to get you a full-time position in the industry.', 'start': 12.986, 'duration': 5.687}, {'end': 22.578, 'text': 'To learn more, visit devmountain.com or click the link in the description below.', 'start': 18.973, 'duration': 3.605}, {'end': 24.078, 'text': "hey, what's going on, guys?", 'start': 23.118, 'duration': 0.96}, {'end': 31.001, 'text': "so in this video or this little series, we're going to be building a social network ui or website theme,", 'start': 24.078, 'duration': 6.923}, {'end': 37.403, 'text': 'and this is based off the dev connector application, which is the app that we build in my mernstack course on udemy,', 'start': 31.001, 'duration': 6.402}, {'end': 39.083, 'text': "and i'll put a link to that in the description.", 'start': 37.403, 'duration': 1.68}, {'end': 45.085, 'text': "but basically we build out the whole application but we don't do the html css stuff in the course.", 'start': 39.083, 'duration': 6.002}, {'end': 50.567, 'text': "so i figured i'd make a free series on youtube where we can build this using html, css and sas.", 'start': 45.085, 'duration': 5.482}, {'end': 57.43, 'text': "OK, we'll be using the SAS CSS preprocessor so we can use nesting and variables mixins.", 'start': 51.107, 'duration': 6.323}, {'end': 58.27, 'text': 'all that good stuff.', 'start': 57.43, 'duration': 0.84}, {'end': 62.953, 'text': "OK, and we'll also be working with CSS Grid, Flexbox.", 'start': 58.871, 'duration': 4.082}, {'end': 69.235, 'text': "We're going to create a bunch of utility classes for things like buttons and badges and all that stuff.", 'start': 63.373, 'duration': 5.862}, {'end': 72.097, 'text': 'So basically, almost like our own little framework, like Bootstrap.', 'start': 69.255, 'duration': 2.842}, {'end': 74.579, 'text': "OK, so let's just take a look real quick.", 'start': 72.657, 'duration': 1.922}, {'end': 78.462, 'text': 'This is the landing page, just a background with an overlay.', 'start': 74.599, 'duration': 3.863}, {'end': 80.223, 'text': 'And we have some call to actions.', 'start': 78.622, 'duration': 1.601}, {'end': 83.486, 'text': 'And if we click sign up, it takes us to the form here.', 'start': 80.884, 'duration': 2.602}, {'end': 84.427, 'text': 'So pretty simple.', 'start': 83.606, 'duration': 0.821}, {'end': 88.009, 'text': 'And the login form, I have an example of one of the alerts.', 'start': 85.087, 'duration': 2.922}, {'end': 89.591, 'text': "So we'll have some alert classes.", 'start': 88.17, 'duration': 1.421}, {'end': 91.911, 'text': 'uh, utility classes.', 'start': 90.251, 'duration': 1.66}], 'summary': 'Devmountain offers a 12-week boot camp for web development, ios, and ux design, aiming to secure full-time industry positions. the video series demonstrates building a social network ui based on the dev connector application, using html, css, and sas, with a focus on css grid, flexbox, and utility classes for buttons and badges.', 'duration': 84.852, 'max_score': 7.059, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IFM9hbapeA0/pics/IFM9hbapeA07059.jpg'}, {'end': 142.663, 'src': 'embed', 'start': 114.621, 'weight': 5, 'content': [{'end': 117.044, 'text': "And we're also using font awesome for the fonts.", 'start': 114.621, 'duration': 2.423}, {'end': 124.513, 'text': 'So if we go back to the landing page and I click on the logo here, it takes us to the dashboard, which is basically the logged in area.', 'start': 117.925, 'duration': 6.588}, {'end': 127.797, 'text': 'And you can see that the nav bar has changed up a little bit.', 'start': 124.833, 'duration': 2.964}, {'end': 132.739, 'text': 'So here we have experience, education, credentials, delete buttons.', 'start': 128.217, 'duration': 4.522}, {'end': 138.441, 'text': 'We have our edit profile button, which takes us to a form to create or or edit a profile.', 'start': 132.779, 'duration': 5.662}, {'end': 140.002, 'text': "Obviously, this stuff isn't functional.", 'start': 138.521, 'duration': 1.481}, {'end': 142.663, 'text': "This is just the theme, but we'll create that.", 'start': 140.042, 'duration': 2.621}], 'summary': 'Using font awesome for fonts, navbar changes, profile editing functionality to be created.', 'duration': 28.042, 'max_score': 114.621, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IFM9hbapeA0/pics/IFM9hbapeA0114621.jpg'}, {'end': 175.301, 'src': 'embed', 'start': 152.967, 'weight': 4, 'content': [{'end': 160.972, 'text': 'And then if we go to posts, we have this text area here and the posts with some like and unlike buttons, comments.', 'start': 152.967, 'duration': 8.005}, {'end': 164.094, 'text': "If we go to comments, it'll take us to the single post page.", 'start': 160.992, 'duration': 3.102}, {'end': 167.316, 'text': 'So we have like eight or nine pages to do here.', 'start': 164.534, 'duration': 2.782}, {'end': 169.598, 'text': 'So it will take a couple of different videos.', 'start': 167.716, 'duration': 1.882}, {'end': 173.9, 'text': "But like I said, it's going to sharpen your CSS skills, your SAS.", 'start': 170.418, 'duration': 3.482}, {'end': 175.301, 'text': "It's also responsive.", 'start': 174.221, 'duration': 1.08}], 'summary': 'The project involves creating 8 or 9 pages, requiring multiple videos, to improve css and sass skills, and ensure responsiveness.', 'duration': 22.334, 'max_score': 152.967, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IFM9hbapeA0/pics/IFM9hbapeA0152967.jpg'}], 'start': 7.059, 'title': 'Web development themes', 'summary': 'Covers building a social network ui theme with html, css, and sas, emphasizing css grid, flexbox, and utility classes. it also includes creating badges, using font awesome, responsive design, and developing profile, post, and comment pages.', 'chapters': [{'end': 91.911, 'start': 7.059, 'title': 'Building social network ui', 'summary': 'Discusses building a social network ui theme based on the dev connector application, covering html, css, and sas with a focus on using css grid, flexbox, and creating utility classes like buttons and badges.', 'duration': 84.852, 'highlights': ['DevMountain offers a 12-week design and development boot camp to help individuals secure full-time positions in the industry. DevMountain provides a 12-week design and development boot camp for securing full-time industry positions.', 'The video series focuses on building a social network UI or website theme, based on the Dev Connector application, using HTML, CSS, and SAS. The video series centers on creating a social network UI theme based on the Dev Connector app, using HTML, CSS, and SAS.', 'The tutorial includes using the SAS CSS preprocessor for features like nesting, variables, and mixins, along with working with CSS Grid and Flexbox. The tutorial incorporates the SAS CSS preprocessor for nesting, variables, mixins, and working with CSS Grid and Flexbox.', 'Creation of utility classes for elements such as buttons and badges is emphasized, akin to developing a personalized framework like Bootstrap. Emphasis is placed on creating utility classes for elements like buttons and badges, similar to building a personalized framework like Bootstrap.']}, {'end': 219.114, 'start': 91.911, 'title': 'Web development theme overview', 'summary': 'Covers the development of a web theme including creating classes for badges and using font awesome for fonts, implementing responsive design using css grid and media queries, and creating various forms and pages for profile, posts, and comments.', 'duration': 127.203, 'highlights': ['The chapter covers the development of a web theme including creating classes for badges and using font awesome for fonts. None', 'Implementing responsive design using CSS grid and media queries. None', 'Creating various forms and pages for profile, posts, and comments. 8 or 9 pages to be created']}], 'duration': 212.055, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IFM9hbapeA0/pics/IFM9hbapeA07059.jpg', 'highlights': ['The tutorial incorporates the SAS CSS preprocessor for nesting, variables, mixins, and working with CSS Grid and Flexbox.', 'Emphasis is placed on creating utility classes for elements like buttons and badges, similar to building a personalized framework like Bootstrap.', 'The video series centers on creating a social network UI theme based on the Dev Connector app, using HTML, CSS, and SAS.', 'DevMountain provides a 12-week design and development boot camp for securing full-time industry positions.', '8 or 9 pages to be created', 'The chapter covers the development of a web theme including creating classes for badges and using font awesome for fonts.']}, {'end': 598.032, 'segs': [{'end': 308.168, 'src': 'heatmap', 'start': 220.534, 'weight': 0, 'content': [{'end': 222.937, 'text': 'The way that you compile SAS is up to you.', 'start': 220.534, 'duration': 2.403}, {'end': 225.539, 'text': "I'll be using the extension here.", 'start': 223.057, 'duration': 2.482}, {'end': 227.12, 'text': 'Let me just open my extensions.', 'start': 225.559, 'duration': 1.561}, {'end': 229.943, 'text': 'Live SAS compiler, which is right here.', 'start': 227.681, 'duration': 2.262}, {'end': 232.745, 'text': 'So to me, this is the easiest way to do things.', 'start': 230.383, 'duration': 2.362}, {'end': 234.366, 'text': "It's built right into the text editor.", 'start': 232.805, 'duration': 1.561}, {'end': 235.748, 'text': 'But you could use whatever you want.', 'start': 234.647, 'duration': 1.101}, {'end': 240.971, 'text': 'If you want to use Node SAS, I have a bunch of videos showing you how to do how to create node SAS.', 'start': 235.768, 'duration': 5.203}, {'end': 245.173, 'text': "If I remember, I'll put a link in the description just in case you don't use VS code.", 'start': 240.991, 'duration': 4.182}, {'end': 247.114, 'text': 'But this is this is the easiest way.', 'start': 245.233, 'duration': 1.881}, {'end': 248.775, 'text': "So that's what I'll be using.", 'start': 247.214, 'duration': 1.561}, {'end': 254.018, 'text': 'Now, if you install the live SAS compiler, you just want to go to your settings.', 'start': 249.235, 'duration': 4.783}, {'end': 257.079, 'text': 'And if we search for SAS.', 'start': 255.158, 'duration': 1.921}, {'end': 263.685, 'text': 'and go down to live sas compiler and we say right here edit in settings json.', 'start': 258.26, 'duration': 5.425}, {'end': 268.109, 'text': 'i have a couple special settings just to show you guys which are these.', 'start': 263.685, 'duration': 4.424}, {'end': 271.312, 'text': 'so basically this settings dot formats.', 'start': 268.109, 'duration': 3.203}, {'end': 272.693, 'text': 'i have format compressed.', 'start': 271.312, 'duration': 1.381}, {'end': 283.963, 'text': "so it's going to compile it into a minified css file and it's going to have the dot min dot css extension and it's going to save it to a folder called dist slash css.", 'start': 272.693, 'duration': 11.27}, {'end': 288.665, 'text': "I also have generate maps set to false so that it doesn't create any source maps.", 'start': 284.804, 'duration': 3.861}, {'end': 294.806, 'text': 'So if you want to follow along exactly and have the exact same environment, then go ahead and add those to your settings dot Jason.', 'start': 289.065, 'duration': 5.741}, {'end': 299.767, 'text': "OK, so let's go ahead and start to create our structure here.", 'start': 295.686, 'duration': 4.081}, {'end': 302.647, 'text': "So I'm going to create a folder called Dist.", 'start': 299.807, 'duration': 2.84}, {'end': 308.168, 'text': "OK, that's where basically our public website is going to go, our UI.", 'start': 302.667, 'duration': 5.501}], 'summary': 'Using live sas compiler in vs code to compile sas with specific settings for css file and folder structure.', 'duration': 43.151, 'max_score': 220.534, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IFM9hbapeA0/pics/IFM9hbapeA0220534.jpg'}, {'end': 314.049, 'src': 'embed', 'start': 289.065, 'weight': 2, 'content': [{'end': 294.806, 'text': 'So if you want to follow along exactly and have the exact same environment, then go ahead and add those to your settings dot Jason.', 'start': 289.065, 'duration': 5.741}, {'end': 299.767, 'text': "OK, so let's go ahead and start to create our structure here.", 'start': 295.686, 'duration': 4.081}, {'end': 302.647, 'text': "So I'm going to create a folder called Dist.", 'start': 299.807, 'duration': 2.84}, {'end': 308.168, 'text': "OK, that's where basically our public website is going to go, our UI.", 'start': 302.667, 'duration': 5.501}, {'end': 314.049, 'text': "And then we're also going to have a folder called SCSS for for our SAS files.", 'start': 308.588, 'duration': 5.461}], 'summary': 'Creating a folder structure with dist for the public website and scss for sas files.', 'duration': 24.984, 'max_score': 289.065, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IFM9hbapeA0/pics/IFM9hbapeA0289065.jpg'}, {'end': 471.625, 'src': 'heatmap', 'start': 376.065, 'weight': 3, 'content': [{'end': 384.669, 'text': "so basically, this is going to be the file that gets compiled from sas and for now i'll just put an h1 in here and i'll just say whatever, hello.", 'start': 376.065, 'duration': 8.604}, {'end': 386.366, 'text': "So I'm going to save that.", 'start': 385.285, 'duration': 1.081}, {'end': 391.35, 'text': 'Now, to get this compiled, we have to run our SAS compiler.', 'start': 387.447, 'duration': 3.903}, {'end': 396.794, 'text': "And once you install live SAS compiler, you'll see this button down here that says Watch SAS.", 'start': 391.67, 'duration': 5.124}, {'end': 397.855, 'text': "So I'm going to click that.", 'start': 396.814, 'duration': 1.041}, {'end': 404.78, 'text': "And immediately, it's going to look at my SAS, and it's going to compile it into this CSS folder.", 'start': 398.495, 'duration': 6.285}, {'end': 406.101, 'text': 'It created it for me.', 'start': 405.121, 'duration': 0.98}, {'end': 410.165, 'text': "And you'll see style.min.css, which just creates this.", 'start': 406.442, 'duration': 3.723}, {'end': 413.066, 'text': "All right, and we don't want to touch this file at all.", 'start': 410.885, 'duration': 2.181}, {'end': 414.987, 'text': 'This is the compiled CSS.', 'start': 413.106, 'duration': 1.881}, {'end': 419.61, 'text': 'We want to strictly work within our SCSS directory.', 'start': 415.047, 'duration': 4.563}, {'end': 427.154, 'text': "OK, so now if I go to my HTML file, I'm going to use the live server extension to open it and run it.", 'start': 420.29, 'duration': 6.864}, {'end': 433.883, 'text': "And let's see, what did I do wrong here? Oh, I forgot the min.", 'start': 429.335, 'duration': 4.548}, {'end': 438.191, 'text': 'So it should be style.min.css.', 'start': 434.444, 'duration': 3.747}, {'end': 439.193, 'text': 'All right.', 'start': 438.893, 'duration': 0.3}, {'end': 442.82, 'text': 'So if we go back, now we get the red background, which is horrendous.', 'start': 439.213, 'duration': 3.607}, {'end': 444.263, 'text': "So we're going to get rid of that.", 'start': 442.88, 'duration': 1.383}, {'end': 447.896, 'text': 'OK, so now we have our environment set up.', 'start': 445.635, 'duration': 2.261}, {'end': 456.099, 'text': "So the next thing I'm going to do is I'm going to just start to create some of the HTML.", 'start': 448.656, 'duration': 7.443}, {'end': 458, 'text': 'I want to have the nav bar.', 'start': 456.119, 'duration': 1.881}, {'end': 461.761, 'text': "We'll style that and we'll kind of just go from top to bottom.", 'start': 458.34, 'duration': 3.421}, {'end': 462.682, 'text': 'All right.', 'start': 461.781, 'duration': 0.901}, {'end': 464.222, 'text': 'Now we do need font awesome.', 'start': 462.762, 'duration': 1.46}, {'end': 466.343, 'text': "So I'm going to grab that before I forget.", 'start': 464.322, 'duration': 2.021}, {'end': 471.625, 'text': "So we're going to go to font awesome dot com and start using free.", 'start': 466.363, 'duration': 5.262}], 'summary': 'Transcript details setup of sas compilation, css creation, and html styling.', 'duration': 79.955, 'max_score': 376.065, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IFM9hbapeA0/pics/IFM9hbapeA0376065.jpg'}], 'start': 220.534, 'title': 'Compiling sas and building sass environment', 'summary': 'Discusses compiling sas using live sas compiler in vs code, along with setting up a sass environment for web development including file structure, compiling sass to minified css, linking html to css, and creating a navigation bar with font awesome icons.', 'chapters': [{'end': 263.685, 'start': 220.534, 'title': 'Compiling sas using live sas compiler', 'summary': 'Discusses the process of compiling sas, with a focus on using the live sas compiler extension in vs code as the easiest approach, while also mentioning the availability of other options and providing guidance on installation.', 'duration': 43.151, 'highlights': ['The Live SAS compiler extension in VS code is presented as the easiest way to compile SAS, being built right into the text editor, and the speaker will be using this method.', 'Guidance is provided for using Node SAS as an alternative option, with the mention of existing tutorial videos for creating Node SAS.', 'Instructions for installing the Live SAS compiler involve accessing settings in VS code and editing the settings json file to configure the compiler.']}, {'end': 598.032, 'start': 263.685, 'title': 'Building sass environment for web development', 'summary': 'Covers setting up a sass environment for web development including creating file structure, compiling sass to minified css, linking html to the compiled css, and creating a navigation bar with font awesome icons.', 'duration': 334.347, 'highlights': ["Setting up the folder structure by creating 'Dist' for the public website and 'SCSS' for Sass files. The speaker creates folders 'Dist' and 'SCSS' for the public website and Sass files, establishing the file structure for the project.", "Compiling Sass to minified CSS and setting up the 'style.min.css' file in the 'Dist' folder. The speaker demonstrates the process of compiling Sass into a minified CSS file, generating 'style.min.css' in the 'Dist' folder for the public website.", 'Linking HTML to the compiled CSS and using the Live Server extension to run the HTML file. The speaker links the HTML file to the compiled CSS and uses the Live Server extension to run the HTML file, showcasing the effective connection between HTML and CSS in the development environment.', 'Creating a navigation bar with Font Awesome icons and utility classes for styling. The speaker demonstrates the creation of a navigation bar with Font Awesome icons and utility classes, showcasing the use of Font Awesome and custom styling for the navigation bar.']}], 'duration': 377.498, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IFM9hbapeA0/pics/IFM9hbapeA0220534.jpg', 'highlights': ['The Live SAS compiler extension in VS code is presented as the easiest way to compile SAS, being built right into the text editor, and the speaker will be using this method.', 'Instructions for installing the Live SAS compiler involve accessing settings in VS code and editing the settings json file to configure the compiler.', "Setting up the folder structure by creating 'Dist' for the public website and 'SCSS' for Sass files. The speaker creates folders 'Dist' and 'SCSS' for the public website and Sass files, establishing the file structure for the project.", "Compiling Sass to minified CSS and setting up the 'style.min.css' file in the 'Dist' folder. The speaker demonstrates the process of compiling Sass into a minified CSS file, generating 'style.min.css' in the 'Dist' folder for the public website.", 'Linking HTML to the compiled CSS and using the Live Server extension to run the HTML file. The speaker links the HTML file to the compiled CSS and uses the Live Server extension to run the HTML file, showcasing the effective connection between HTML and CSS in the development environment.', 'Creating a navigation bar with Font Awesome icons and utility classes for styling. The speaker demonstrates the creation of a navigation bar with Font Awesome icons and utility classes, showcasing the use of Font Awesome and custom styling for the navigation bar.', 'Guidance is provided for using Node SAS as an alternative option, with the mention of existing tutorial videos for creating Node SAS.']}, {'end': 1090.591, 'segs': [{'end': 651.44, 'src': 'embed', 'start': 624.035, 'weight': 0, 'content': [{'end': 627.078, 'text': 'And I usually call it config or underscore config.', 'start': 624.035, 'duration': 3.043}, {'end': 632.664, 'text': "So in our SCSS, let's create a file called underscore config dot SCSS.", 'start': 627.118, 'duration': 5.546}, {'end': 637.648, 'text': "And in here, I'm going to put all my variables, which I'm actually going to just paste in.", 'start': 633.684, 'duration': 3.964}, {'end': 642.152, 'text': 'So the primary color is going to be that light blue.', 'start': 639.469, 'duration': 2.683}, {'end': 645.815, 'text': 'We have a dark color, which is a very dark blue, almost gray.', 'start': 642.192, 'duration': 3.623}, {'end': 648.657, 'text': 'Light color is a very light gray.', 'start': 646.255, 'duration': 2.402}, {'end': 651.44, 'text': 'We have danger and success, which are red and green.', 'start': 648.917, 'duration': 2.523}], 'summary': 'Create a config file in scss with primary, dark, and light colors, and danger and success colors as red and green.', 'duration': 27.405, 'max_score': 624.035, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IFM9hbapeA0/pics/IFM9hbapeA0624035.jpg'}, {'end': 701.629, 'src': 'embed', 'start': 671.36, 'weight': 1, 'content': [{'end': 673.423, 'text': 'And the way we do that is with at imports.', 'start': 671.36, 'duration': 2.063}, {'end': 681.997, 'text': 'And we just need to import the name of the file, which is config, no underscore, no dots, SCSS, just like that.', 'start': 675.453, 'duration': 6.544}, {'end': 686.38, 'text': "OK, so if we do that, that'll bring the variables in.", 'start': 682.738, 'duration': 3.642}, {'end': 691.183, 'text': "I'm just going to add some basic resets and core styles.", 'start': 686.7, 'duration': 4.483}, {'end': 695.865, 'text': "So let's set box sizing to border box here.", 'start': 691.643, 'duration': 4.222}, {'end': 701.629, 'text': "And let's set margin and padding to zero just to kind of reset everything.", 'start': 696.806, 'duration': 4.823}], 'summary': "Import 'config' file to bring in variables; set box sizing, margin, and padding to reset styles.", 'duration': 30.269, 'max_score': 671.36, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IFM9hbapeA0/pics/IFM9hbapeA0671360.jpg'}, {'end': 759.584, 'src': 'embed', 'start': 729.866, 'weight': 2, 'content': [{'end': 731.546, 'text': "I'm just going to put it right in the HTML.", 'start': 729.866, 'duration': 1.68}, {'end': 735.567, 'text': "So we're going to put it in our head right under font awesome.", 'start': 732.306, 'duration': 3.261}, {'end': 751.11, 'text': "Okay, so now we can go back here in our body and we can use font family and we can now do railway and then I'm just going to do sans serif.", 'start': 737.587, 'duration': 13.523}, {'end': 754.983, 'text': 'okay, now the font size.', 'start': 752.702, 'duration': 2.281}, {'end': 756.123, 'text': "let's see font size.", 'start': 754.983, 'duration': 1.14}, {'end': 757.263, 'text': "we're going to use one ram.", 'start': 756.123, 'duration': 1.14}, {'end': 759.584, 'text': "i'm going to be using rem units a lot.", 'start': 757.263, 'duration': 2.321}], 'summary': 'Using 1rem font size with railway and sans serif font family in html.', 'duration': 29.718, 'max_score': 729.866, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IFM9hbapeA0/pics/IFM9hbapeA0729866.jpg'}, {'end': 811.935, 'src': 'embed', 'start': 783.499, 'weight': 5, 'content': [{'end': 793.132, 'text': "All right, we're going to do a line height of one point six and a background will do background color of white.", 'start': 783.499, 'duration': 9.633}, {'end': 797.357, 'text': 'OK, and then the color of the text is going to be almost black.', 'start': 793.152, 'duration': 4.205}, {'end': 798.799, 'text': "We're going to do a real dark gray.", 'start': 797.377, 'duration': 1.422}, {'end': 804.189, 'text': 'So if we save it so far, it should just look like this.', 'start': 800.126, 'duration': 4.063}, {'end': 808.172, 'text': "Let's remove the underline from the links.", 'start': 805.27, 'duration': 2.902}, {'end': 811.935, 'text': "And also, I'm going to use the primary color for the links by default.", 'start': 808.232, 'duration': 3.703}], 'summary': 'Styling with a line height of 1.6, white background, and dark gray text color. removing underline from links and using primary color for links.', 'duration': 28.436, 'max_score': 783.499, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IFM9hbapeA0/pics/IFM9hbapeA0783499.jpg'}, {'end': 892.935, 'src': 'embed', 'start': 840.93, 'weight': 3, 'content': [{'end': 844.653, 'text': 'OK, so we save that, we get rid of the underline and we get the primary color.', 'start': 840.93, 'duration': 3.723}, {'end': 850.596, 'text': "So for the ULs, I'm just going to remove the bullets with list style none.", 'start': 845.573, 'duration': 5.023}, {'end': 856.581, 'text': 'And for any images we have, I want them to take up the full width of their container without breaking out.', 'start': 851.577, 'duration': 5.004}, {'end': 860.543, 'text': "So I'm going to set the the default width of images to 100 percent.", 'start': 856.741, 'duration': 3.802}, {'end': 864.206, 'text': 'OK, and that should be it for the core styles.', 'start': 861.624, 'duration': 2.582}, {'end': 866.467, 'text': "Now we're going to move on to the actual nav bar.", 'start': 864.266, 'duration': 2.201}, {'end': 868.989, 'text': "So it's a nav bar.", 'start': 867.148, 'duration': 1.841}, {'end': 876.77, 'text': "And we have a class of nav bar and we're going to be using flex box here.", 'start': 870.968, 'duration': 5.802}, {'end': 886.473, 'text': 'So usually the way that I decide for flex and the grid, the grid I usually use for for main layouts you know, like, like,', 'start': 877.45, 'duration': 9.023}, {'end': 889.054, 'text': 'for instance the profile page, all the boxes.', 'start': 886.473, 'duration': 2.581}, {'end': 892.935, 'text': "I'll use the grid for that for things like aligning text inside of a nav bar.", 'start': 889.054, 'duration': 3.881}], 'summary': 'Styling includes removing bullets, setting image width to 100%, and using flexbox for the nav bar.', 'duration': 52.005, 'max_score': 840.93, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IFM9hbapeA0/pics/IFM9hbapeA0840930.jpg'}, {'end': 980.672, 'src': 'embed', 'start': 956.068, 'weight': 4, 'content': [{'end': 962.714, 'text': 'A lot of people will put a base 10, so they automatically know that, for instance, 0.7 is 7 pixels.', 'start': 956.068, 'duration': 6.646}, {'end': 964.615, 'text': '2 would be 20 pixels.', 'start': 962.734, 'duration': 1.881}, {'end': 967.678, 'text': "But I just, I don't know, I keep it at 16.", 'start': 964.715, 'duration': 2.963}, {'end': 968.679, 'text': 'Just preference, really.', 'start': 967.678, 'duration': 1.001}, {'end': 974.126, 'text': 'So we want this nav bar to be position fixed because I always want it to be at the top.', 'start': 969.882, 'duration': 4.244}, {'end': 978.27, 'text': 'So we want to do a position fixed and also a Z index of one.', 'start': 974.626, 'duration': 3.644}, {'end': 980.672, 'text': "So that's always on top of the rest of the content.", 'start': 978.33, 'duration': 2.342}], 'summary': 'Using a base of 16 pixels for preference, the position of the nav bar is fixed with a z index of one.', 'duration': 24.604, 'max_score': 956.068, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IFM9hbapeA0/pics/IFM9hbapeA0956068.jpg'}], 'start': 598.873, 'title': 'Styling nav bar in scss and flexbox', 'summary': 'Covers setting up variables like primary color, dark color, and max width in scss, and styling the nav bar with flexbox, including line height, background color, text color, and positioning, among other core styles.', 'chapters': [{'end': 783.499, 'start': 598.873, 'title': 'Styling nav bar and setting variables in scss', 'summary': 'Covers setting up variables such as primary color, dark color, light color, danger, success, and max width in scss, and styling the nav bar and core styles with resets, box sizing, font family, and font size.', 'duration': 184.626, 'highlights': ['Setting up variables such as primary color, dark color, light color, danger, success, and max width in SCSS. The speaker sets up variables for primary color, dark color, light color, danger, success, and max width in SCSS.', 'Styling the nav bar and core styles with resets and box sizing. The speaker styles the nav bar and core styles with resets and box sizing.', 'Adding font family and font size for the body using the Railway font and rem units. The speaker adds font family and font size for the body using the Railway font and rem units.']}, {'end': 1090.591, 'start': 783.499, 'title': 'Styling nav bar with flexbox', 'summary': 'Covers styling a nav bar using flexbox, setting line height, background color, text color, removing underlines, and positioning the nav bar with specific dimensions and opacity.', 'duration': 307.092, 'highlights': ['Setting line height, background color, and text color Setting a line height of 1.6, background color to white, and text color to almost black.', 'Removing underlines and setting color for links Removing underlines from links and setting the color to the primary color.', 'Styling ULs and images Removing bullets from ULs using list style none and setting the default width of images to 100%.', 'Using flexbox for nav bar alignment Using flexbox to align items horizontally and setting padding using rem units.', 'Positioning the nav bar with fixed positioning and opacity Positioning the nav bar with fixed positioning and setting an opacity of 0.9.']}], 'duration': 491.718, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IFM9hbapeA0/pics/IFM9hbapeA0598873.jpg', 'highlights': ['Setting up variables such as primary color, dark color, light color, danger, success, and max width in SCSS.', 'Styling the nav bar and core styles with resets and box sizing.', 'Adding font family and font size for the body using the Railway font and rem units.', 'Using flexbox for nav bar alignment and setting padding using rem units.', 'Positioning the nav bar with fixed positioning and opacity.', 'Setting line height to 1.6, background color to white, and text color to almost black.', 'Removing underlines from links and setting the color to the primary color.', 'Styling ULs and images by removing bullets from ULs and setting the default width of images to 100%.']}, {'end': 1809.375, 'segs': [{'end': 1215.749, 'src': 'embed', 'start': 1113.731, 'weight': 0, 'content': [{'end': 1125.839, 'text': "so we want to say utilities all right, and then inside utilities we're gonna add let's see, let's do some of our main utilities first.", 'start': 1113.731, 'duration': 12.108}, {'end': 1128.241, 'text': 'well, no, we will do it as we move along.', 'start': 1125.839, 'duration': 2.402}, {'end': 1130.422, 'text': "so let's do the backgrounds.", 'start': 1128.241, 'duration': 2.181}, {'end': 1134.165, 'text': "so we'll have backgrounds.", 'start': 1130.422, 'duration': 3.743}, {'end': 1142.642, 'text': 'Now backgrounds are going to be bg-primary, bg-light, all that stuff.', 'start': 1136.371, 'duration': 6.271}, {'end': 1145.046, 'text': "So let's add in here just .bg.", 'start': 1142.802, 'duration': 2.244}, {'end': 1154.52, 'text': "And then in these curly braces, I'm going to take the ampersand and then do a dash primary, for instance.", 'start': 1147.617, 'duration': 6.903}, {'end': 1161.643, 'text': "And what this means is, if you're not familiar with SAS, this ampersand is a placeholder.", 'start': 1155.64, 'duration': 6.003}, {'end': 1163.524, 'text': "It's going to be replaced with just bg.", 'start': 1161.683, 'duration': 1.841}, {'end': 1170.106, 'text': 'So when we add the class bg-primary in our HTML, whatever is in here will take effect.', 'start': 1163.964, 'duration': 6.142}, {'end': 1174.288, 'text': "And I'm going to set this to, let's say, background.", 'start': 1171.307, 'duration': 2.981}, {'end': 1184.123, 'text': "color and let's use the primary color and then we're going to want color white.", 'start': 1175.72, 'duration': 8.403}, {'end': 1184.443, 'text': 'All right.', 'start': 1184.143, 'duration': 0.3}, {'end': 1201.26, 'text': "So. What I'd like to do, though, is, instead of passing it, instead of putting a background color and a color for every one of these,", 'start': 1184.463, 'duration': 16.797}, {'end': 1204.482, 'text': "I'd like to create a mix in that we can use.", 'start': 1201.26, 'duration': 3.222}, {'end': 1208.164, 'text': 'that will set the text in the background.', 'start': 1204.482, 'duration': 3.682}, {'end': 1215.749, 'text': "So, in our config let's go to config SCSS and let's create a mix in.", 'start': 1208.784, 'duration': 6.965}], 'summary': 'Creating utility classes for backgrounds and color in scss using mixins and placeholders', 'duration': 102.018, 'max_score': 1113.731, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IFM9hbapeA0/pics/IFM9hbapeA01113731.jpg'}, {'end': 1311.625, 'src': 'embed', 'start': 1279.04, 'weight': 4, 'content': [{'end': 1287.946, 'text': "But I'm going to go above it, and I'm going to say set text color based on the background.", 'start': 1279.04, 'duration': 8.906}, {'end': 1298.008, 'text': "All right, so let's do at function and say set dash text dash color and that's going to take in a color.", 'start': 1289.201, 'duration': 8.807}, {'end': 1302.961, 'text': "And then we're going to use a conditional here.", 'start': 1301, 'duration': 1.961}, {'end': 1304.802, 'text': 'In SAS, you can have if statements.', 'start': 1303.001, 'duration': 1.801}, {'end': 1306.223, 'text': "So we're going to do at if.", 'start': 1304.842, 'duration': 1.381}, {'end': 1311.625, 'text': "And there's a function called lightness that will test the lightness of something.", 'start': 1307.363, 'duration': 4.262}], 'summary': 'Use a function to set text color based on background in sas using conditional statements and the lightness function.', 'duration': 32.585, 'max_score': 1279.04, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IFM9hbapeA0/pics/IFM9hbapeA01279040.jpg'}, {'end': 1497.25, 'src': 'heatmap', 'start': 1469.545, 'weight': 0.779, 'content': [{'end': 1478.353, 'text': "okay. so now i'm going to save this and now you can see our dev connector has the bg dark and we can use any of these classes now within our theme.", 'start': 1469.545, 'duration': 8.808}, {'end': 1480.575, 'text': 'so back in index.html.', 'start': 1478.353, 'duration': 2.222}, {'end': 1482.676, 'text': "i'm sorry, back in style scss.", 'start': 1480.575, 'duration': 2.101}, {'end': 1487.581, 'text': "let's uncomment the color white for the navbar And there we go.", 'start': 1482.676, 'duration': 4.905}, {'end': 1497.25, 'text': "Now you might be asking well, why did you put color white when we're looking at the background color and deciding the text color in our function??", 'start': 1488.301, 'duration': 8.949}], 'summary': 'Dev connector has dark background and various classes available for theme customization.', 'duration': 27.705, 'max_score': 1469.545, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IFM9hbapeA0/pics/IFM9hbapeA01469545.jpg'}, {'end': 1613.708, 'src': 'embed', 'start': 1585.767, 'weight': 1, 'content': [{'end': 1590.591, 'text': "Under the nav bar, we're going to have a section, and I'm going to give this a class of landing.", 'start': 1585.767, 'duration': 4.824}, {'end': 1600.795, 'text': "Okay. and then inside here we're going to have another class of dark overlay, because we're going to have a background image, but we need an overlay,", 'start': 1591.946, 'duration': 8.849}, {'end': 1605.24, 'text': 'a dark overlay, so that the text is readable, so that you could use basically any image.', 'start': 1600.795, 'duration': 4.445}, {'end': 1607.622, 'text': 'Otherwise, the text will get lost in the image.', 'start': 1605.5, 'duration': 2.122}, {'end': 1613.708, 'text': "You could darken it with graphic design software like Photoshop, but I'd rather do it within the CSS.", 'start': 1608.123, 'duration': 5.585}], 'summary': 'Creating a landing section with a dark overlay for better readability of text over background images.', 'duration': 27.941, 'max_score': 1585.767, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IFM9hbapeA0/pics/IFM9hbapeA01585767.jpg'}], 'start': 1090.671, 'title': 'Scss utility classes and mixins', 'summary': 'Covers creating background utility classes using ampersand as a placeholder for primary and light backgrounds, and creating mixins and functions to set background and text colors based on user input, and applying classes for color variations like light, dark, success, danger, and white.', 'chapters': [{'end': 1174.288, 'start': 1090.671, 'title': 'Creating background utility classes', 'summary': 'Focuses on creating background utility classes in scss by using the ampersand as a placeholder for primary and light backgrounds, allowing for easy application of background styles in html.', 'duration': 83.617, 'highlights': ['Using the ampersand as a placeholder in SCSS allows for easy application of background styles in HTML.', 'Creating a new file called underscore utilities dot SCSS to contain utility classes is a recommended practice when building with SAS.', 'Defining specific background utility classes such as bg-primary and bg-light provides a structured approach to styling backgrounds.']}, {'end': 1809.375, 'start': 1175.72, 'title': 'Creating mixins and functions in scss', 'summary': 'Discusses creating mixins and functions in scss to set background and text colors based on user input, along with applying classes for different color variations, such as light, dark, success, danger, and white.', 'duration': 633.655, 'highlights': ['Creating Mixin to Set Background and Text Color The speaker discusses creating a mixin in SCSS to set the background and text color based on user input, allowing for dynamic color application.', 'Applying Classes for Different Color Variations The process of applying classes for different color variations, such as light, dark, success, danger, and white, is explained to provide flexibility in color usage.', 'Using Conditional Statements to Determine Text Color The use of conditional statements and the lightness function in SCSS to determine the text color based on the background color is detailed, offering a dynamic approach to text color selection.']}], 'duration': 718.704, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IFM9hbapeA0/pics/IFM9hbapeA01090671.jpg', 'highlights': ['Creating a mixin in SCSS to set the background and text color based on user input.', 'Applying classes for different color variations, such as light, dark, success, danger, and white.', 'Using the ampersand as a placeholder in SCSS allows for easy application of background styles in HTML.', 'Defining specific background utility classes such as bg-primary and bg-light provides a structured approach to styling backgrounds.', 'The use of conditional statements and the lightness function in SCSS to determine the text color based on the background color is detailed.']}, {'end': 2076.706, 'segs': [{'end': 1867.245, 'src': 'embed', 'start': 1839.377, 'weight': 2, 'content': [{'end': 1841.72, 'text': "no matter how big or small it's stretched out.", 'start': 1839.377, 'duration': 2.343}, {'end': 1843.161, 'text': "So we'll save that.", 'start': 1842.321, 'duration': 0.84}, {'end': 1845.121, 'text': 'Now we have our background image.', 'start': 1843.221, 'duration': 1.9}, {'end': 1850.182, 'text': 'Now, as far as the text, we want this all to be centered.', 'start': 1846.062, 'duration': 4.12}, {'end': 1853.103, 'text': 'We want to make the text larger, stuff like that.', 'start': 1850.222, 'duration': 2.881}, {'end': 1855.763, 'text': 'So we have that class of landing inner.', 'start': 1853.643, 'duration': 2.12}, {'end': 1861.764, 'text': "So what I'm going to do is, within the landing class, I'm going to use ampersand dash inner.", 'start': 1855.983, 'duration': 5.781}, {'end': 1865.525, 'text': 'Because remember, the ampersand gets replaced with whatever is here.', 'start': 1861.784, 'duration': 3.741}, {'end': 1867.245, 'text': "So it's going to be landing inner.", 'start': 1865.605, 'duration': 1.64}], 'summary': 'Adjust background image and center text within landing class.', 'duration': 27.868, 'max_score': 1839.377, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IFM9hbapeA0/pics/IFM9hbapeA01839377.jpg'}, {'end': 1909.734, 'src': 'embed', 'start': 1884.911, 'weight': 3, 'content': [{'end': 1891.175, 'text': "Now, if I do display flex, you can't really see it up here, but it makes everything go in a row side by side.", 'start': 1884.911, 'duration': 6.264}, {'end': 1891.896, 'text': "And I don't want that.", 'start': 1891.195, 'duration': 0.701}, {'end': 1893.076, 'text': 'I want it to go up and down.', 'start': 1891.916, 'duration': 1.16}, {'end': 1899.561, 'text': "So I'm going to set flex direction to column, which will make it go vertical instead of horizontal.", 'start': 1893.096, 'duration': 6.465}, {'end': 1907.292, 'text': "Now to center everything, let's add a width of 80% and margin auto.", 'start': 1901.365, 'duration': 5.927}, {'end': 1909.734, 'text': "And then to center everything, we're going to do align items.", 'start': 1907.312, 'duration': 2.422}], 'summary': 'Setting flex direction to column creates vertical layout. adding width of 80% and margin auto centers the content.', 'duration': 24.823, 'max_score': 1884.911, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IFM9hbapeA0/pics/IFM9hbapeA01884911.jpg'}, {'end': 2055.629, 'src': 'embed', 'start': 1998.582, 'weight': 0, 'content': [{'end': 2004.688, 'text': 'overlay and watch, as soon as i put in height of 100, everything should get centered and there we go.', 'start': 1998.582, 'duration': 6.106}, {'end': 2009.133, 'text': 'okay, we also want a width of 100,', 'start': 2004.688, 'duration': 4.445}, {'end': 2020.484, 'text': "and the way that we're going to make this an overlay is by positioning the dark overlay absolute within the landing class,", 'start': 2009.133, 'duration': 11.351}, {'end': 2029.653, 'text': 'and we want it to start from the top zero and left zero and go 100 percent height and width, which we already put above there.', 'start': 2020.484, 'duration': 9.169}, {'end': 2031.114, 'text': 'All right.', 'start': 2030.273, 'duration': 0.841}, {'end': 2040.14, 'text': "So if I were to add a background color now, like let's say red and save, it's going to cover the entire thing.", 'start': 2031.134, 'duration': 9.006}, {'end': 2042.501, 'text': "Now, obviously, we don't want this.", 'start': 2041.221, 'duration': 1.28}, {'end': 2044.302, 'text': 'We need it to be translucent.', 'start': 2042.561, 'duration': 1.741}, {'end': 2049.766, 'text': "So instead of using a solid color like this, I'm going to use RGBA, which is red, green, blue alpha.", 'start': 2044.403, 'duration': 5.363}, {'end': 2053.428, 'text': 'And it allows us to to add a transparent color.', 'start': 2050.286, 'duration': 3.142}, {'end': 2055.629, 'text': 'So RGBA, red, green, blue.', 'start': 2053.828, 'duration': 1.801}], 'summary': 'Creating a translucent overlay with 100% height and width using rgba for web design.', 'duration': 57.047, 'max_score': 1998.582, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IFM9hbapeA0/pics/IFM9hbapeA01998582.jpg'}], 'start': 1809.395, 'title': 'Css styling techniques', 'summary': 'Covers setting background images, styling text with flexbox, centering content with justify content and text align, creating a dark overlay with absolute positioning, and using css rgba for translucent overlays with an alpha value of 0.7.', 'chapters': [{'end': 1909.734, 'start': 1809.395, 'title': 'Css background image and text styling', 'summary': 'Discusses setting a background image with no repeat and centered position, as well as styling text within a specific class using flexbox to achieve vertical alignment, with a focus on ensuring the text is centered and styled appropriately.', 'duration': 100.339, 'highlights': ['The chapter discusses setting a background image with no repeat and centered position, as well as styling text within a specific class.', 'The height of the landing is set to 100 viewport heights, ensuring the entire height of the browser is covered.', "Flexbox is utilized to align the text vertically, with the application of 'display: flex' and 'flex-direction: column' to achieve the desired layout.", "The text color is set to white within the specified class, 'landing inner', and the height is also set to 100% for use with Flexbox alignment."]}, {'end': 2029.653, 'start': 1922.836, 'title': 'Centering and styling dark overlay', 'summary': 'Covers centering content horizontally and vertically using justify content and text align, and styling the dark overlay with a height and width of 100% and absolute positioning within the landing class.', 'duration': 106.817, 'highlights': ['Styling the dark overlay with a height of 100% and absolute positioning within the landing class, resulting in centered content horizontally and vertically.', 'Using justify content and text align to achieve horizontal and vertical centering of the content.', 'Considering the dark overlay as a utility and adding it to the Utilities section for potential reuse.']}, {'end': 2076.706, 'start': 2030.273, 'title': 'Css overlay with rgba', 'summary': 'Demonstrates how to create a translucent overlay using css rgba, with an alpha value of 0.7, allowing for customization of color and transparency.', 'duration': 46.433, 'highlights': ['Using RGBA in CSS allows for creating a translucent overlay with customizable color and transparency, such as setting alpha value to 0.7.', 'RGBA, which stands for red, green, blue alpha, enables the addition of transparent color and can be used to create overlays with different levels of transparency.']}], 'duration': 267.311, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IFM9hbapeA0/pics/IFM9hbapeA01809395.jpg', 'highlights': ['Using RGBA in CSS allows for creating a translucent overlay with customizable color and transparency, such as setting alpha value to 0.7.', 'Styling the dark overlay with a height of 100% and absolute positioning within the landing class, resulting in centered content horizontally and vertically.', 'The chapter discusses setting a background image with no repeat and centered position, as well as styling text within a specific class.', "Flexbox is utilized to align the text vertically, with the application of 'display: flex' and 'flex-direction: column' to achieve the desired layout."]}, {'end': 2529.907, 'segs': [{'end': 2114.514, 'src': 'embed', 'start': 2077.967, 'weight': 0, 'content': [{'end': 2081.206, 'text': "Now, next thing I'm going to do is is this stuff here doesn't look very good.", 'start': 2077.967, 'duration': 3.239}, {'end': 2083.568, 'text': 'So we have a couple of classes.', 'start': 2081.768, 'duration': 1.8}, {'end': 2085.649, 'text': "I'm actually going to go to the top here.", 'start': 2084.088, 'duration': 1.561}, {'end': 2087.509, 'text': 'I like to organize this in a certain way.', 'start': 2085.668, 'duration': 1.841}, {'end': 2091.25, 'text': "So let's say text styles.", 'start': 2088.089, 'duration': 3.161}, {'end': 2104.592, 'text': "Um, so for instance, we have our extra large heading, which I'm going to make the font size for REM and let's make the line heights.", 'start': 2092.409, 'duration': 12.183}, {'end': 2114.514, 'text': "We're going to lessen the line height to 1.2 and then let's add a margin bottom, uh, of one round.", 'start': 2104.612, 'duration': 9.902}], 'summary': 'Adjusting text styles: setting heading font size to 4 rem, line height to 1.2, and margin bottom to 1 rem.', 'duration': 36.547, 'max_score': 2077.967, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IFM9hbapeA0/pics/IFM9hbapeA02077967.jpg'}, {'end': 2220.951, 'src': 'embed', 'start': 2169.225, 'weight': 1, 'content': [{'end': 2172.405, 'text': "So we're going to do something similar to what we did with the backgrounds.", 'start': 2169.225, 'duration': 3.18}, {'end': 2173.866, 'text': 'So put this.', 'start': 2172.925, 'duration': 0.941}, {'end': 2179.387, 'text': "Let's see, we'll go right below the backgrounds and say buttons.", 'start': 2174.966, 'duration': 4.421}, {'end': 2184.626, 'text': 'And this this is how I like to build themes and user interfaces.', 'start': 2180.563, 'duration': 4.063}, {'end': 2188.108, 'text': 'I like to have these utility classes that we can use all over the place.', 'start': 2184.686, 'duration': 3.422}, {'end': 2194.532, 'text': 'And then, you know, we have our main styles for specific components like the nav bar, the landing page.', 'start': 2188.588, 'duration': 5.944}, {'end': 2196.853, 'text': "But it's all preference, really.", 'start': 2195.492, 'duration': 1.361}, {'end': 2202.177, 'text': "I think it's better than just putting it into like one big monolithic file.", 'start': 2196.873, 'duration': 5.304}, {'end': 2214.907, 'text': "So buttons I'm going to display as an inline block and I'm going to add a background, a default background of the light color.", 'start': 2203.137, 'duration': 11.77}, {'end': 2220.951, 'text': "OK, we're going to add other classes like BTN primary and stuff to change the color.", 'start': 2214.927, 'duration': 6.024}], 'summary': 'Using utility classes and specific styles for components to build themes and user interfaces, including button styles and colors.', 'duration': 51.726, 'max_score': 2169.225, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IFM9hbapeA0/pics/IFM9hbapeA02169225.jpg'}, {'end': 2435.079, 'src': 'embed', 'start': 2399.668, 'weight': 3, 'content': [{'end': 2402.049, 'text': "It's button primary.", 'start': 2399.668, 'duration': 2.381}, {'end': 2407.75, 'text': "And we're going to actually, wait a minute, did I go? Yeah, right here.", 'start': 2402.349, 'duration': 5.401}, {'end': 2416.432, 'text': "All right, so we're going to do that's one, two, three, four, and that's it, four.", 'start': 2407.77, 'duration': 8.662}, {'end': 2418.473, 'text': "So primary, we're also going to have dark.", 'start': 2416.532, 'duration': 1.941}, {'end': 2422.815, 'text': 'where we just change this to dark.', 'start': 2419.454, 'duration': 3.361}, {'end': 2433.198, 'text': "And let's see, for the hover, we're going to just lighten the dark color 5%.", 'start': 2424.336, 'duration': 8.862}, {'end': 2435.079, 'text': 'And then this one will be success.', 'start': 2433.198, 'duration': 1.881}], 'summary': 'Design includes four button styles: primary, dark, hover, and success.', 'duration': 35.411, 'max_score': 2399.668, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IFM9hbapeA0/pics/IFM9hbapeA02399668.jpg'}, {'end': 2506.181, 'src': 'heatmap', 'start': 2480.309, 'weight': 0.822, 'content': [{'end': 2488.574, 'text': "So let's put in dark color as the background when we hover, but I'm going to lighten it 20%.", 'start': 2480.309, 'duration': 8.265}, {'end': 2491.616, 'text': "OK, I'm also going to change the text color to white.", 'start': 2488.574, 'duration': 3.042}, {'end': 2502.322, 'text': "Now, actually, you know what I put in the index HTML button light, but I'm actually going to not have a button light, just BTN is the button light.", 'start': 2493.757, 'duration': 8.565}, {'end': 2506.181, 'text': 'So if I save that and go and save my utility.', 'start': 2503.16, 'duration': 3.021}], 'summary': 'Change background color to dark, lighten by 20%, and text color to white.', 'duration': 25.872, 'max_score': 2480.309, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IFM9hbapeA0/pics/IFM9hbapeA02480309.jpg'}], 'start': 2077.967, 'title': 'Styling text, buttons, and color classes', 'summary': 'Covers organizing text styles with font sizes, line heights, and margins, creating utility classes for buttons with default styles, and defining different color classes for buttons including primary, dark, success, and danger colors, with hover effects and transitions.', 'chapters': [{'end': 2276.965, 'start': 2077.967, 'title': 'Styling text and buttons', 'summary': 'Discusses organizing text styles with specific font sizes, line heights, and margins and creating utility classes for buttons with default background and text color, padding, and cursor styles.', 'duration': 198.998, 'highlights': ['The chapter emphasizes organizing text styles with specific font sizes, line heights, and margins to create a consistent user interface.', 'It also highlights the creation of utility classes for buttons with default background and text color, padding, and cursor styles to ensure a cohesive design across components.']}, {'end': 2529.907, 'start': 2278.506, 'title': 'Creating color classes for buttons', 'summary': 'Explains the process of creating different color classes for buttons in a web development project, including setting primary, dark, success, and danger colors, as well as defining hover effects and transitions.', 'duration': 251.401, 'highlights': ['The chapter explains the process of creating different color classes for buttons in a web development project It covers the creation of color classes such as primary, dark, success, and danger for buttons.', 'Setting primary, dark, success, and danger colors for buttons The process involves defining specific color classes for different button types, such as primary, dark, success, and danger.', 'Defining hover effects and transitions for the buttons The explanation includes setting hover effects such as lightening the background color by a specific percentage and adding transitions for smoother effects, with the option to customize the duration.']}], 'duration': 451.94, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/IFM9hbapeA0/pics/IFM9hbapeA02077967.jpg', 'highlights': ['The chapter covers organizing text styles with specific font sizes, line heights, and margins to create a consistent user interface.', 'It emphasizes the creation of utility classes for buttons with default background and text color, padding, and cursor styles to ensure a cohesive design across components.', 'The chapter explains the process of creating different color classes for buttons in a web development project, including primary, dark, success, and danger colors.', 'It involves defining specific color classes for different button types, such as primary, dark, success, and danger, and setting hover effects and transitions for the buttons.']}], 'highlights': ['The tutorial incorporates the SAS CSS preprocessor for nesting, variables, mixins, and working with CSS Grid and Flexbox.', 'Emphasis is placed on creating utility classes for elements like buttons and badges, similar to building a personalized framework like Bootstrap.', 'The video series centers on creating a social network UI theme based on the Dev Connector app, using HTML, CSS, and SAS.', 'Instructions for installing the Live SAS compiler involve accessing settings in VS code and editing the settings json file to configure the compiler.', 'Setting up variables such as primary color, dark color, light color, danger, success, and max width in SCSS.', 'Creating a mixin in SCSS to set the background and text color based on user input.', 'Using RGBA in CSS allows for creating a translucent overlay with customizable color and transparency, such as setting alpha value to 0.7.', 'The chapter covers organizing text styles with specific font sizes, line heights, and margins to create a consistent user interface.']}