Transcript for:
CSS Mastery Course Summary

Master CSS by Building 24 projects throughout the 24 challenges treasure por will teach you how to recreate components and layouts from popular applications like GitHub codin and Instagram you'll also build loading animations progress bars flashcards and more using pure CSS hey there I'm treasure and in this course you'll find 25 fun and practical CSS challenges meant to help you develop and test your CSS prowess working through these challenges you'll be tasked to create a really fun variety of projects this includes many projects inspired by real world elements like this button inspired by code pen and this contributions graph inspired by GitHub you'll also create common web components like progress bars and loading animations as well as fun challenges meant to stretch your knowledge of flexbox in Grid like recreating playing cards and country flags using pure CSS remember all of these challenges are open so you're free to Google and research whatever you need to accomplish the challenge be sure that you're frequently referring back to the challenge examples so you know what you're trying to achieve and try to match the examples as closely as possible but remember that pixel Perfection is a stretch goal so if you want to really challenge yourself try to make it look exactly like the example but your overall goal is to get as close as possible finally if you run across a challenge that seems Advanced or you're unsure of how to begin try to break it down into smaller shapes or think about it in terms of rows and columns let me show you an example let's look at this empty progress bar if I were to try to figure out how to start making this I might say to myself well this could be a div of a certain height and width with the background color of gray and the div has rounded Corners so I'm breaking it into its smaller pieces based on what I can observe about what it's supposed to look like similarly one of your challenges will be to recreate this archery target so what can You observe about this you might think well it's three rings with a circle in the center but in terms of CSS it's actually a larger circle with a smaller circle on top with yet a smaller circle on top of that with the smallest Circle in the middle and you might also observe that each circle is perfectly vertically and horizontally aligned within its Outer Circle and one more example if I were to look at this playing card the first thing I might do is break it down into columns and rows so for example when I look at this card I see three three columns this is the First Column with the four and the heart this is the second column with these four hearts and this is the third column with the upside down heart and upside down four I might also look at this middle column and say well this is two rows this is the top row and this is the bottom row so make sure to ask yourself how you can split things into smaller shapes and into columns and rows and that should help you out a couple more things to remember my solution is always there to help if you get stuck I do provide most of the HTML for these challenges but feel free to modify the structure and add your own class names if that's what you'd like to do and I also provide the colors and fonts using CSS variables which if you're unfamiliar you can click on this link to read a little bit more about it finally keep in mind that your approach the way that you solve these challenges will likely be different than my solution and that's totally okay and to be expected the act of recreating these challenges as closely as possible is one of the best ways to improve your CSS knowledge it's going to help you improve your observational skills creativity and might lead you to discover CSS tools and tricks that you didn't know existed so go ahead and get started be creative and above all have fun hello and welcome to the colorful button challenge here's the button you're going to be building as you can see we have this lovely kind of sunset themed radiant border and on Hover it gets slightly bigger the gradient flips horizontally or from one side to other so as you can see we begin with the yellow border on the left and we flip it so that it's on the right on Hover for this challenge I have included Your basic HTML so we have a button border there is perhaps a hint on how you might want to get started and then in your CSS file I have all of the colors set up that you can use and I put them on the root pseudo element so you can use CSS variables if you want to or you can just copy and paste it's up to you going back back to the slides you'll find an outline of the requirements so as discussed the button should have a gradient border you can use the provided colors or choose your own and the gradient should be 115° which has to do with the angle of the colors of the gradient this will make more sense when you look up the linear gradient function which we'll get to in a second the button's hover State should have the gradient colors flip horizontally meaning from one side to the other the button should grow slightly in size so if we take another look at it you can see on Hover it gets just ever so slightly bigger and finally the text changes from a subtle gray to White the last requirement is that the button be completely centered on the page both horizontally and vertically on the final slide I have some hints for you so to achieve a gradient border you can do that using a wrapping div which is what I'm going to do in my solution or you can use the Border image property if you choose to do that route you'll want to research border image and Border image slice and to create a gradient you'll want to look at the linear gradient CSS function be sure to refer back to the animation as much as you need to and try to match the styles of the button as closely as you can have fun welcome to the solution for the colorful button challenge hopefully it went well and you were able to accomplish the task let me show you my solution let's first take a look at the index. HT ml so we have a button and the button is inside of a wrapping div called button border which is inside of a container so the first thing I'm going to do is use this container to Center the button both horizontally and vertically on the page here is my favorite way to do that going to Target the container class and then I will say display flex and that will allow me to justify content Center and align items Center now align item Center isn't going to do anything until I set a height for the browser window so I'm going to set the height of this container to be 100% viewport height meaning 100% of whatever the height of the current window is now as my browser window gets larger and smaller my button is always centered the next thing I'm going to do is create my gradient border as I said I'm going to use this wrapping div and I'm going to set the background to a linear gradient the first argument is the angle that you want your gradient to follow so I'm going to say I want it to be at 115° angle and this is a lot of colors so I'm just going to copy and paste them in and so far we can see nothing but if I add some padding you'll be able to see the gradient border peeking out around the box so there is our gradient border now let's work on the button Styles before we start styling the button what I would like to do is add the background color so I'm going to come here and grab this body background variable I'll add it as a background color to my body now let's work on the button Styles so I'm going to Target button class and the first thing I'm noticing now that we have this gradient border is the default border that's around the button so I want to get rid of that and I can do that by just setting that to border none and then I want to set my background color and and my font color I'll grab those from up here so here's my background variable and my button color variable next I'm going to give it a little padding so we'll say 1 M on the top and bottom and 1.5m on the left and right and that is roughly what it should look like but you may have noticed that we need to do a little work on the typography in the list of variables I included a Google font and I'm going to go ahead and add that to my body but there's one more thing that we need to do because button elements are a little bit strange they will keep the browser default font unless you specify otherwise I'll come back down to my button and I'm going to say font family inherit and this is how I specify that the button should inherit from its parent most element which is body and then finally if you have a good eye you may have noticed that the letter spacing is a little bit wider than default and I have set that to 2.1m so we're getting pretty close the final thing to do would be to write the hover state but before I do that let me show you the other way that you can achieve a gradient border so what I can do is I can ignore my button border completely so I'm going to comment it out for now what I can do on my button is I can say border image and that's where I want to put my linear gradient and we'll have to come up here and comment out border none as you can see once we've set border image we can see our gradient border sort of peeking out from the corners that's because we need to set border image slice border image slice basically has to do with defining how you want the image that you're using as a border to be sliced up in different quadrants of your element it definitely has its place but it's a little hard to grock if you ask me it's a pretty strange property that I don't find to be particularly userfriendly and its other limitation is that it is compatible with border radius so if we wanted to round these Corners we would not be able to do that using border image so it's up to you which one you would prefer to use I'm going to comment that out for now and go back to my gradient border with the wrapping div now let's write a hover state if we look at the example three things are happening on Hover the gradient is flipping the button is growing ever so slightly bigger and the font color is changing so we're actually going to need to write write two hover States we need a hover State on button border to flip that gradient but we'll also want to specify what we want to happen to the button class when button border is hovered over so that would be button border hover button in other words when button Border's hover state is active Target the button class and do something so we want the buttons font color to change and I'll come up here and grab the button color on Hover variable now the font color is changing on Hover and I'm going to increase the button size by making the padding ever so slightly larger we'll say we want it to grow to 1.1 M on the top and bottom and 1.6m on the left and right so now all that's left is to flip that gradient border on button border hover I want to change the background let's grab this linear gradient and what I could do here is I could manually switch the colors the last color first this color second this color third and so on or I could flip it by saying that I want the angle to be 230° let me make the background of the button transparent for a second so that you can see this a little better so as you can see we're flipping from one side to the other I'll delete that and that is everything that we needed to do we have a button with a nice gradient border and hover State great work see you in the next one hello and welcome to the expanding search bar challenge you've probably seen an expanding search bar somewhere on the internet if you'd like to see one in the wild you can go to github.com they have an expanding search bar so what you'll do for this challenge is build a search bar that when you click into it it expands to the full width of its container and when you click out of it it goes back to its original size as a bonus challenge I'm going to ask you to make this placeholder text go away when you click inside the search bar I've outlined these requirements in the slides for you to refer back to so your default search input should take up about a third of the width of its container we look at the HTML you'll see that we have the search input inside of a container and when the user clicks into the search bar you want the input to grow to the entire width of its parent container in the example the container is set to be most of the width of the browser window and the search is expanding to fill that space as I said it should shrink back to its original size when the user clicks out of or away from the search input the Border should turn blue and as a bonus the placeholder text should not be visible when the user clicks inside of the search bar there's also an accessibility requirement all form inputs should have a label for screen reader accessibility so you'll need to create a label for your search input that has a valid four attribute and then I'd like you to look up a CSS rule or a group of CSS styles that hide the search inputs label visually so you cannot see it on the page but it still keeps it accessible to screen readers there's no need to try to write this yourself there's plenty of resources out there that specialize in accessibility that have written a little code snippet that you can use so this is a research challenge if you will finally here are some hints you'll want to use a transition to make sure that the search bar expands smoothly if we take a final look at this example you'll see that when it is clicked inside it smoothly expands to fill up the container it's not happening instantly so you want to look at the transition property and finally some things to research you'll want to familiarize yourself with the focus pseudo selector and you'll also want to find a pseudo selector that lets you change input placeholder Styles I hope you enjoy this Challenge and good luck welcome back here is how I solved the expanding search bar challenge I'm going to start by creating a label for my search bar my input has an ID of search field so I will add a four attribute called search field my label will be search and to my label I'll add a class called hide in my CSS I'll create my hide class and into hide I will copy and paste these Styles which which I got from w3.org or the web accessibility initiative now my label is hidden but will still be accessible via screen reader the next thing I will do add some styles to my container so that my search bar isn't stuck up in the corner I'm going to give it a little bit of padding and I also want my container to have a width of 80% and I'll set my margin to Auto and if I give this a background you can see that I've made my containers slightly less than the width of the browser window I'll add some styles to my search bar I want my search bar when it's unfocused to take up 30% of the width of my container I'm going to give it a little space by adding a line height of two I also want to give it a little bit of Border radius and a slightly thinner border that is one pixel Sol and then I'll come up here and grab my border color variable you may have noticed that when my window was smaller my placeholder text starts to disappear so I want to make sure that my search bar doesn't get too small I'm actually going to do that by giving my container a minimum width and I'll just give that a hard pixel value of 320 pixels which if we were doing responsive styling is roughly the size of the smallest screen width that we would want to account for that is going to prevent my search box from getting too small now I want to Define what happens when I click into the search we can use a pseudo element called Focus I want to style search bar poon focus when we focus in on the search bar I want its width to become 100% of its container I also want to change its border color and I'll come up here and grab the Border color variable as you can see the size changes when we click in a out of it I want this transition to happen smoothly though so to my search bar I'm going to add a transition property and I'm going to say I want all of these changes to happen and I want them to take 3 seconds and that gives us a smoother animation effect aside from the bonus challenge that's really all we needed to do with our search bar if you have a good eye you may have noticed that in the example the font weight of the placeholder text is slightly thinner than the default to be able to style the placeholder text I'm going to Target my search bar class along with two colons and then placeholder and that's going to allow me to style the placeholder text inside my search bar input so I'm going to make the font weight 200 and now this matches the example and the final thing left is to see if we can get the placeholder text to disappear when we click into the search bar and the way I can do that is first to Target the search bar class with a focus State and then I want to Target placeholder and now that I'm targeting the placeholder text when we're in Focus I can say I want the color to be transparent which will effectively make the placeholder text disappear as we click in and out of it the placeholder text disappears congratulations you've built a NIC looking expandable search bar that is also screen reader accessible this challenge is a simplified version of a card or tile that you might find on codepen if you were to go to codepen and look at their pen galleries you'd see something that looks something like this the idea being that you have a thumbnail of what the pen looks like the title of the pen the username of the person who created the pen and their Avatar and on Hover it shows you some more information about that Pen's stats in this case how many times it's been liked or commented on your challenge will be to recreate this design as closely as possible I've also included some stills of the Pen's two states so we have the default and on Hover as well as an outline of the requirements you're going to match the examples as closely as possible present the like and comment stat so they appear on Hover and we're not going to worry too much about responsiveness because this is one tile that in a real world situation would be part of a gallery of tiles but do make sure that the main code pen thumbnail image is responsive and you'll want to prevent the tile from growing too wide as the browser gets wider so you're going to want to restrain how much the tile will stretch relative to the size of the browser window I'm starting off with all the HTML you need as well as the images and if we look at the index. CSS file I've included the colors and fonts you need in the root property so that you can use CSS variables or copy and paste it's up to you good luck and I'll see you in the solution welcome to the solution to the code pen tile challenge I'm going to start by resetting the padding and margin of a few elements we have this H3 here and we have a paragraph and both of them have default padding and margin that we don't need I'm going to Target the py and the heading and I'll say margin zero and padding zero I'm also using an unordered list to display the pen stats so I'm going to need to get rid of the padding that is default on the left as well as the bulleted list style type on the list items so that gets rid of some styling things that will get in my way later let's get started on the cart I'm going to start by making sure everything is sized correctly because these large images are a little overwhelming so on the card I'm going to set a Max width of 300 pixels and then I'm also going to Target the thumbnail image and set that so it has a max width of 100% let's go ahead and put a background color on the card so that we can see where it is I'll grab card background color variable now you can see the background but our image sizes are a little out of control still I'm also going to set the size of the Avatar image and because it's very small I'm going to give it a hard pixel value tight and width of 50 pixels there we go so now our card is roughly the right size I'll go ahead and Center it and add some padding you'll notice that adding a Max width to this image has made it responsive so it's going to shrink and grow with the size of its container but what I also want to do is add an object fit property of cover and this is going to help us out if we were to put an image here that was a different size object fit cover allows the image to take up the entire space of its container without stretching it's always going to maintain its aspect ratio and so if it's container were to get too wide or too long it would clip the image to still fit in that space without stretching it now we can move on to the bottom half of the card but before we do that I want to give card and all of our images a border radius and we'll do 10 pixels let's start by making the text the right color so that it's easier to see I'm going to come up to my HTML and body tags and I will just make all the text white for now and while I'm up here I'm going to add the main background color and there we go we're getting closer my little Avatar here and my details about this pen are in a container called card details and I want to set that to flex so that these two elements are Set Side by Side so I'll put that here because I like to keep my Styles in order from top to bottom then I'll set card body to display Flex now the Avatar and the details are side by side and we just have to take care of some spacing and typography issues let's add some margin to the right of the Avatar and also some padding between the thumbnail image and the card details now down here at the bottom of the file I'm going to adjust the font size of the H3 and the paragraph tag I'll Target our details H3 and we'll give that a font weight of 900 and a font size one R just to make it a little bit smaller into the paragraph I make the font size slightly smaller and change the color so I'm going to scroll up and grab my username color fix my typo and there we go because we've removed all of the padding and margin everything's a little squished so I'm going to come up here and set the line height of card details one .5 just to give things a little more breathing room I think that's it for that section of the card now we can work on our hover State notice that the stats are in these little boxes that are a little bit darker in background and have a border radius so I'll Target the card stats list items and we'll grab that background color we'll also want to make sure that this unordered list is a flex container and now to our list item we can add some padding and some margin to make things look a little better and the final thing we'll do is add some border radius and that is looking pretty good our last task is to take care of the hover state so we need this to only be visible on Hover so I'm actually going to set card stats to display none and then I will come down here and what I want to do is if the user hovers anywhere on a card I want to Target card stats and I want to display Flex so now our default is that this bottom part isn't visible but when I hover over it the display is set so that it's visible you may have noticed that there is a little bit too much space along the bottom here and that has to do with the padding that we set on the card itself so to get rid of that I'm going to say on card hover set the padding bottom of card to zero and we'll add some padding to card stats and that way we end up with half as much padding the very last thing we need to do is make sure that we are using the correct font so I'm going to scroll up to the top of my file and grab my font variable which we will add as a font family to the body and with that we have our finished code pen tile this is a project that seems pretty simple at first but can actually be pretty fiddly so great work and I'll see you later in this challenge you're going to be building a fun little loading animation this is an example of something that you might see as you're waiting for a large website to load for example let's go through the requirements you're going to match the example as closely as you can the animation should be on an infinite Loop meaning there's nothing that is going to start or stop the animation it's just going to keep going and keep going and finally the animation should be perfectly centered on the page regardless of how large or small the browser becomes here are a couple of hints to help you on your way you're going to want to look into or be familiar with the CSS animation property and using key frames as long as you're fairly comfortable with CSS it shouldn't be too big of a lift to research CSS animation if you're not already familiar sometimes I find it helpful to describe what the animation is doing to figure out how to recreate it so in this animation three dark circles are growing larger and lighter in color at a fairly slow pace we're starting with dark circles they're expanding a little bit and as they expand they're turning light gray and then they shrink back up again have fun and best of luck welcome back this is the solution to loading animation number one let's start by defining some circles so we have something to work with here in my HTML you see we have a container with three divs with the class of circle so in my CSS I'm going to Target Circle and we'll set a height width and background color I'll start with the background color of black for now and if we add some margin you'll see this gives us three squares stacked on top of each other to make them round I will give them some border radius and now I want them to be in a row so can work on some styles for my container container I'm going to start by setting my display to flex and then I'll give my container a height of 100 view Port height and that will allow me to Center my content horizontally and vertically with align items and there we go we have three circles centered on the page so we're ready to write an animation on each circle I'm going to create an animation called pulse I want the animation to last for 1 second now that I've named my animation I'm going to need to create it so down here I'll Define my pulse animation I want to create some key frames called pulse and inside of key frames I can Define my animation in a variety of ways I'm going to use from and to so if we take a look at the animation we're starting with some smaller darker circles and we're expanding out into some lighter gray circles so I want the background of my circles to go from dark gray and let me actually use the variables that I defined up here so I want my background to go from my dark color to my light color now you can see when I run that my animation happens once so I need to Define that I want my animation to be infinite now we have pulsing circles but we need them to enlarge we want it to go from default size so I don't need to put anything in the from category but we want it to go from the default size to just ever so slightly expanding in height and width so this is almost what we're after but as you can see the circles are expanding and then immediately snapping back to their default State before expanding again we can get the pulsing effect by telling the animation that we want it to play backward and forward and we can do that with the keyword alternate and there is the effect that we're looking for this is a really fun exercise to play around with try to change the color and timing and the rates of the animation and see what kind of loading effects you can come up with see you later welcome this is loading animation number two I love loading animations I think that it's a really great practical real world project that is also a ton of fun where you can endlessly EXP experiment with all of the powerful things that CSS has to offer a loading animation is a simple mesmerizing animation that plays when you are waiting for a website or a web app to load for this challenge I'd really like you to experiment and see what you come up with so your requirements are three shapes rotating slowly in unison and the animation should Loop continuously so nothing starts it or stops it it's just going forever you can match the example or you can use your own shapes just make sure that the rotation and the timing is as close as you can get it a few nudges to get you started you're going to want to look into the CSS animation property and using key frames and if you're comfortable with CSS I have faith that you can research CSS animation and get going you'll also want to look at the CSS transform property which allows you to move stretch and rotate HTML elements finally as I mentioned before feel free to use your own colors and shapes be creative have fun I'll be back to show you my solution hey there this is my solution to the Loading animation Challenge number two if I have a look at my HTML I have a container div and three divs each with a class of square and with a unique class of square one two or three I'm going to build my squares by targeting this Square class I'll give each square a height of width and a background once I add a background you can see that my three squares need a little bit of margin to create some space between them now that I can see my individual squares let's give them their proper colors square one is red square two has a background of orange and square three has a background of blue now I can get rid of my black background what I'll do next is arrange my three squares in a row I'll do that by targeting the container class I'll give the container a height of 100 viewport height set the display to flex then I can justify content Center and align items Center let's animate these squares I want to animate all three so in my Square class I'll add an animation property let's say I'm going to name my animation rotate and I want it to take 1 second I'll come down here and Define my rotate animation I'll use the from and to properties the effect I'm looking for if we have a look at the example is for the boxes to rotate from corner to corner this means rotating the box at a 45 degree angle let me show you what that looks like if I come up to square and I use the transform property the value I want is I'm going to use the rotate function which takes a value of how many degrees that you want to rotate that rotates the squares onto its corner or changes them into diamonds I want these squares to rotate from one corner to the other so what I want is for them to transform and rotate from - 45° to 45° you'll see that that animation is happening once so I'll come up here and I'll say I want it to be infinite there we go the squares are rotating corner to corner this looks a little fast so I'll say I want it to take 1.5 seconds that is the effect that we are looking for I hope you had fun and that you created some amazing loading animations hello again this is the archery target challenge you are going to build a CSS only archery target we have three rings with a yellow Bullseye in the middle the requirements for the archery target you should try to match the example as closely as you can make sure that the target is centered on the page you don't need to worry about making it responsive and I don't know if this really qualifies as a hint or not but I find it really helpful to describe what is actually happening here with this archery target so these are four circles on top of each other and each circle is centered within the larger Circle when I first tried this challenge I made it a little complicated by looking at these as rings and in fact if we take a look at the HTML I have given them the class of rings and technically that's what they are but it may help you to think about these as full circles they're just piled on top of each other in the CSS I have included some colors for you to use feel free to use them as CSS variables or copy and paste it's up to you and have fun I think this exercise is a really good way to practice centering objects see you in the solution welcome back let's create an archery target using only CSS we'll start by taking a quick look at the HTML so we have this sort of parent class called rings and nested inside is three rings and the Bulls ey let's start by creating each individual ring we know that each ring is going to have a different height and width and it's going to have a different background color but one thing that every ring will have will be border radius because these are going to be boxes with a 50% border radius which will make them a circle so I'll Target the ring class to put border radius on every single ring our outer ring is ring one which I will give a height of 200 pixels a width of 200 pixels and we want that to have the black background so I will copy and paste the variable nothing is showing up because I have a typo here we need a dash and there we go a 200x 200 pixel black circle next let's define ring two and what I'm going to do is decrease each ring by 50 pixels so this one will have a height and width of 150 pixels and it's background from looking at the example should be blue and I have ring three which will have a height of 100 pixels width of the same and a background of red finally we have the bullseye which will have a height and width of 50 pixels and a yellow background this actually looks kind of cool like that but what we need to do now is Center all of these and we also need to Center the Rings container as a whole I'm going to come up near the top here and Target rings and we'll Center by setting 100% viewport height setting the display to flex and then we can justify Center and align items Center so now our parent div is centered we just need all of these circles to be centered in their parents and their parent is the next largest Circle so the yellow circle's parent is the red Circle the red circle's parent is the blue circle and the blue circle's parent is the black circle we essentially want to do all of this to every individual ring so I'll also give the ring class these Styles and there we go a perfectly centered archery target have fun and see you in the next one hey there in this challenge we're going to build a word Carousel this is a CSS only animation no JavaScript where we are swapping out different words on a regular looping Cadence for this challenge you'll want to match the Styles as closely as you can I would love for you to personalize the carousel I've added four things that I love I'd like you to change out the words for four things that you love and it's okay if they overlap who doesn't love scriba or cats or coding the words should rotate in an infinite Loop and as I said before you won't use any Java jaas script for this challenge in the next slide I have some hints so if you don't want hints go ahead and get started here they are you can Define the steps of an animation in a key frame using percentages with 0% being the beginning of the animation and 100% being the end of the animation with this information think about how you can use a pseudo elements content property to swap out words in combination with animation key frames have fun making this your own I will see you in the solution hello and welcome to the word Carousel solution I hope you had fun personalizing this project let's get started as usual the first thing I want to do is Center my project in the middle of the browser taking a look at the HTML you see I have a container element so I'll Target that give the browser a height of 100 viewport height change the dis play to flex and justify content Center as well as align items Center and we're centered so here is the plan I am going to Target this H1s after pseudo element which I will give a Content property H1 after content and we will set that to very for now just so you can see now I can swap in whatever words I want here so the basis of how this is going to work is I'm going to use animation key frames to keep swapping out the value of content so for now let's make content blank then I'll add an animation which I will call Swap and let's say we want it to take about 6 seconds now down at the bottom of the file I will Define Swap and what I'm going to want to do is Define what the content properties value should be from 0% which is the beginning of the animation to 100% which is the end of the animation and all the steps in between and I'll go in steps of 25% so that'll be 25% 50% and 75% here's a part where it gets a little bit strange I'm going to go ahead and start adding things that I love so singing cats hoding and scrimba now you may think that I would want to add a fifth item here another thing I love is karaoke which I guess is also singing but what can I say I'm obsessed and if I run that and let's remember we want this animation to be infinite so if we watch this you'll see that we'll get to the end and it will kind of skip and that's because the the animation is immediately starting over once it's finished which causes this weird little skip to occur ideally what we would do is we would say display all of these words for 2 seconds for example then pause for 2 seconds and start over again and that would give us a nice smooth rotation but unfortunately when we're infinitely animating like this there isn't a way to delay the animation in between iterations so we kind of have to fake it and that's why both my first and last item is going to be singing and if you watch this rotate you'll see that the effect is that it's a nice smooth rotation let me make sure my syntax is correct here that's the animation let's move on to styling I want my rotating word to have a background I want the color to be white and we also need some padding so first I'll set a back ground I'll grab my variable and I'll add 10 pixels of padding I'll make the color white I'll add some border radius and finally a bit of margin on the left here to create some space between our rotating word and the rest of the sentence and there we go fun little word Carousel I'll see you in the next challenge hello this is the French flag challenge using pure CSS you're going to recreate the French flag which is three equal width Stripes of blue white and red an important part of recreating a country flag is making sure that the flag has the correct proportions and the way that we can do that is with aspect ratio the French flag has an aspect ratio of 2 to three the first number represents width and the second number represents height and the way that I like to think about it is if we were to divide the height by the width so 3 / 2 that would give us 1.5 which is another way of saying that a rectangle with an aspect ratio of 2: 3 has a height that is 1.5 * the size of its width for every flag challenge we are going to start with the height of the flag and use aspect ratio to calculate what the flag's width should be here is what that formula looks like we'll take the height and we will multiply that by the ratio height divided by the ratio width here is an example if I have a flag with a ratio of 5 to 4 and I start with a flag height of 200 pixels then this would be my calculation for the width using the CSS calc function would take my height and multiply it by 4 / 5 or 4 fths this would give me a60 so if I have a flag height of 200 pixels my width would be 160 pixels another way that might be helpful to think about it is 4 divid 5 or 4 fths is 80% so this calculation is giving me a width that is 80% of my height as you're creating your French flag you'll want to plug these numbers in accordingly let's take a quick look at the starter files I've started you out with all the HTML that you're going to need for your flag if you feel compelled to change any class names or the HTML itself feel free to do so but keep in mind that this is the HTML I'll be using for my solution in the CSS file I have included as CSS variables all of the colors that you're going to need as well as a starter flag height of 150 pixels because I found that that is what fits nicely in the mini browser but feel free to make your flag as big or as small as you'd like as long as it has the correct proportions have fun with this Challenge and I'll see you in the solution hello and welcome back this is the solution to the French flag CSS challenge we're going to need three equal width columns inside of a flag container I'll show you two ways to approach this one using Flex box and one with grid I'll start by selecting my flag container and adding a height and width for the height I'll use my flag height variable and for the width let's take a look at this formula I want to take my flag height multiplied by the ratio height divide by the ratio width my aspect ratio is 2: 3 so opening up a cal function my formula would be 150 pixels * 3 / 2 this Cal function would evaluate to 225 pixels or 1.5 times the height of the div I'll go ahead and put my height variable here for a little more flexibility let's give this a quick background just so we can see the rectangle there it is the beginnings of our flag with the proper proportions let me give this a little bit of space by adding some margin then I will make sure that my flag container is a flex container if we look at the HTML you'll see that each one of my three stripes has a class called stripe which I can use to style all three stripes so I will select that class and to it I will add a Flex grow of one and that is essentially going to tell each one of my stripe Dives to take up one portion of the available space of the container so if I were to give each stripe a temporary background and some margin then you can see that I do in fact have three separate Columns of equal width taking up the full space of the container so the final thing I'll need to do is make sure that all of my columns have the correct colors so I'll delete my temporary backgrounds and temporary margin and I will select each stripe color and set its background to the correct color variable so I have red blue and white that is my French flag complete let me show you how I would do this in Grid I'll comment out my Flex grow as well as my Flex container and I will instead set the display of my container div to grid this immediately gives me three horizontal stripes that's because grid without any other options will automatically make me a one column grid so we have one column here that stretches the entire width of the container and each one of my divs within that grid are stacked one on top of the other what I'll need to do is Define some columns so I'm going to tell grid I want three equalized columns and I can do that with grid template columns I can say that I want each of the divs nested with in my grid container I want each of these to be a column that takes up an equal amount of space the way that I would Express that is to say I want three columns that all take up one fraction or one portion of the available space the other way I could do this is by using the repeat function and I would say I want three three times one fraction that would give us the same result I hope you had fun with this Challenge and I'll see you in the next one hello and welcome to the flag of Germany challenge where you will create a pure CSS German flag it's three equal Stripes of black red and yellow with an aspect ratio of 3 to 5 the aspect ratio represents the flag's height in relation to its width so to calculate what a flag's width should be in CSS you're going to take the flag's height multiplied by the ratio height divided by the ratio width here's an example if I have a flag with a ratio of 5 to 4 and I start with a flag height of 200 pixels then I would calculate the width like this 200 pixels * 4 / 5 or 4 fths and that will give me a German flag with the proper proportions I've already set up the HTML that you'll need and if we look in the CSS I have included as variables the correct colors of the German flag go ahead and get started and I'll see you soon hello again this is a solution to the flag of Germany CSS challenge I hope it went well let's get started I'm going to show you two solutions one in flexbox and one one in Grid because I thought the grid solution was pretty magical I'll start by targeting my flag container div I'll set a height using my flag height variable and my width using the provided formula so I'll use my flag height me not forget the dashes I use my flag height variable and then I want to multiply that by 5 / 3 now let me set a quick background so we can see our flag there it is I'm also going to give it some breathing room with some margin here we go we have the proportions of the German flag now we need to get some colors going so I'll do a black stripe a red stripe and a yellow stripe we can see nothing yet because our black red and yellow rows have no height but and here's the magical part I'll come up to my container div and I will set the display to grid and like magic a German flag when I set grid I automatically get a one column grid and so it will take each one of my divs and stack them one on top of the other very fun oneline solution if I were to solve this using flexbox which is also a great solution I'll set the display to flex and then I will Target every stripe and set Flex grow to one and this will tell each of my divs to take up an equal amount of the space provided but it does that in three column colums so I'll need to tell flexbox that I want to switch the direction of my Flex elements so I can come up here and say Flex Direction column giving me three horizontal stripes and a pure CSS German flag fabulous work I'll see you in the next one hello scrimba students and welcome to the flag of Madagascar challenge your task will be to build a pure CSS version of the bright and beautiful flag of Madagascar the flag has an aspect ratio of 2 to three and all of its three stripes are of equal area meaning they are rectangles of the exact same height and width it may look like the white stripe is a little bit thinner but that is an optical illusion it is as thick as the horizontal stripes are high to make sure that your Madagascar flag has the proper proportions be sure to look at the following two slides for how you can calculate with using the aspect ratio I have the formula here and an example here so take a look if you need to Let's also take a look at the index.css I've provided all the colors that you need as CSS variables as well as a variable for the flag height be sure to familiarize yourself with the HTML before you get started have fun and I'll see you in the solution welcome to the flag of mad Madagascar solution let's build a Madagascar flag let's start by taking a look at the flag and kind of making a plan I know that all of my rectangles have equal area but I still need to figure out what their heights and widths should be I know that my flag height is going to be 150 pixels and I also know that these two rectangles take up equal space I know the height of my flag then I know the height of both of these rectangles because they each take up 50% of the height of the flag so I've decided to start my flag with a height of 150 pixels so I know that each of these rectangles has a height of 75 pixels and because I know that all of these rectangles are the same size that means that this white rectangle will have a width of 75 pixels and it also takes up the entire height of the flag so I know that the height of the white stripe is 150 pixels and the width of both the green stripe and the red stripe is 150 pixels all three stripes will be 75 by 150 pixels so let me start by creating my flag I'll select my flag div and assign it a height using my variable then I'll calculate the flag's width by using the height times essentially the aspect ratio backwards so we have an aspect ratio of 2 to 3 which means I want to multiply the height by 3 / 2 another way to read this is the height times 3 seconds which simplifies to 1 and A2 or 1.5 so in other words the width is going to be 1.5 * the size of the height so this will calculate to 150 pixels * 1.5 which is 225 pixels let's add a quick background so we can see this and we'll give this a little space and add a bit of margin just so it's not stuck in the corner now I'll quickly add my stripe background colors now that our background colors are set we can set some height and width on these Stripes so that we can see them before I do that I'm going to come up here and I'm going to set the display of the container div to flex as we discussed earlier I'm starting with a flag height of 150 pixels and I know that each rectangle takes up exact ly 50% of those 150 pixels so each one is 75 pixels High which means that the white stripe is 75 pixels wide because remember all of these rectangles are the exact same size the white rectangle is the height of the entire flag which we know is 150 pixels so each rectangle is 75 by 150 but no matter how big or small this flag gets we know that we want the the red and green stripe to take up 50% of the total height of the flag so I'm going to go ahead and set the height of each to 50% I know the width of the red and green rectangles is the same as the height of the white rectangle which is the height of the flag 150 pixels so to each stripe I will set a width of flag height now this might look like we what we need backwards but this is actually the red and green divs taking up the space that we've told them to take with some white space over here so if I were to change this background to Blue you'll see that this is not in fact the white stripe it is the background of our container div so let me get rid of this background completely and to complete this flag we'll need to set a width for the white stripe we know from the red and green stripes that the width of the white stripe should be half of the flag's height the white stripe is as wide as these rectangles are tall so we can calculate the width as the flag height divided by two and actually this is probably a better measurement for the height of the red and green stripes so let's do that you can calculate the height of the red stripe as flag height divided by two and we'll do the same for the green stripe and the nice thing about this is is say we wanted a flag that was 300 pixels tall it'll automatically adjust all of the proportions and Heights and widths making it really easy to scale this flag that is the flag of Madagascar challenge done I will see you in the next challenge hello there this is the Swiss flag CSS challenge the Swiss flag is one of the only flags in the world that is square meaning it has an aspect ratio of 1: one but the fun part can be figuring out how large the cross should be warning spoilers ahead so if you want to look this up yourself go ahead and get started on the challenge now here are the proportions of the cross on the Swiss flag if you think about the cross as two rectangles sitting on top of one another the height of this rectangle would be 316 of the total height of the flag and 5/8 of the total width of the flag how do I arrive at these numbers well if we look at this diagram the Swiss flag is split up into 32 parts and each of the 32 Parts follows the 67 pattern where in this Square takes up six parts this one takes up seven Parts this one takes up six parts and so on so we can see if we're looking at the height of this rectangle that it takes up 630 seconds of the total height of the flag 632s can be simplified as 316 so to find the height of this rectangle you would need to find 316 of the total height of the flag flag similarly with the width we can see that this Square this square and this Square are taking up seven six and seven portions of the total width of the flag so they take up together 20 portions or 20 302s which can be simplified to 5/8 if you find this confusing if your eyes are crossing no worries feel free to eyeball how big the cross should be the really important part is that you're practicing CSS positioning and things like that best of luck and I will see you in the solution scrim hello again this is the solution to the Swiss flag CSS challenge here's the plan I'm going to create a red square and inside the Red Square I'm going to create two horizontal rectangles of equal height and width I am then going to rotate one of the rectangles and absolutely position it so that it is directly on top of the other rectangle I'll get started by creating a variable for the height and width since they are square and will be the same I'll create a variable called flag height width and I'm going to make my Swiss flag 200 pixels I'll select my flag container and give it a height and width my height will be my flag height width variable as well the width I'll then give it a red background using my red color variable and finally I'll give it a little margin just so it's not not stuck up in the corner while I'm up here before I create my crosses I'm going to make sure to make my flag container a flex container now I will select my first cross which will be the cross that I plan to keep horizontal so for the height let's look at our chart here we said that this horizontal rectangle has a height of 630 seconds or 316 of the total height of the flag so this is what my calculation will be I'll create a CSS calc function and then I want my flag height which is 200 pixels times 316 and that will give me a height value that is 316 of 200 I'm going to replace this hardcoded value with my variable so that it can be easily changed later I'll then go for a width in which I will use the same calculation but I want the width to be 767 or 20 302s of the total width of the flag so that would be my flag width times 5/8 now what I should not forget to do is around every variable I need this variable function now I'll add a white background and we should be able to see the first part of a cross here it is up in the corner and I want to center it so in my flag container where I have set a display of flex I want to justify my content Center and I also want to align items Center there's the first half of our cross now let's do cross number two for the height of cross number two I'm going to use the width calculation the width I will use the height calculation and this will effectively rotate it 90° so that it is vertical instead of horizontal I give this a different background color and better see what's going on here so I have the horizontal part of my cross the vertical part of my cross next to each other because I need to remove my vertical cross from the flow of the document let me make this white too and then I will give that an absolute position I'll make sure to make its parent div relatively positioned there I have a completed Swiss flag the other thing that I could do here is I could Target both Crosses by using their common class name and I could give them the same height and width so for now let's comment this out and I'll copy and paste all of this stuff into the common class name and now I again have two parts of a cross right next to each other but I can Target the second cross and use the transform function to rotate the second cross 90° and if I give this a position of absolute and there is another way that I could solve the problem no matter how you solve the problem I hope you had fun I think this is a really good positioning exercise creating country flags certainly taught me a lot about CSS so I hope that you continue and I'll see you again soon for this challenge you will build a CSS version of the beautiful minimalist Japanese flag the Japanese flag has an aspect ratio of 2:3 and the circle is 3 FS the size of the flag to calculate what the height and width of your flag should be based on its aspect ratio you'll want to use this formula height times ratio height divided by ratio width as an example if we had a flag with the ratio of 54 and we started with a flag height of 200 pixels then we would calculate the width of the flag thusly 200 pixels * 4 / 5 or 45ths in the index.css I have provided the colors of the Japanese flag for you as well as a starting height and feel free to adjust this variable to whatever you want to depending on how big you want to make your flag as long as the proportions of the flag are correct it does not matter best of luck and I will see you in the solution welcome this is the solution to the Japanese flag CSS challenge I hope it went well let me show you my solution I'm going to start by giving my flag a height and width I'll select my flag container div and I'll set the height using my flag height variable and for the width I will follow the aspect ratio Formula so I want to take my height of 200 pixels and if the Japanese flag has an aspect ratio of 2: 3 that means I would want 200 pixels * 3 / 2 I'll use my flag height variable again and I want to make sure to wrap this in a calc function so my height times 3 / 2 another way to think about this is 3 seconds is 1.5 so I want my width to be 1.5 times bigger than my height 200 time 1.5 is 300 so this is the same as saying I want my height to be 200 pixels and my width to be 300 pixels go ahead and change that back let's set the white background so we can see it there's the beginning of my Japanese flag I'll select the outermost div and give it a little bit of margin now let's work on the circle as I said on the slide the circle is 3 fifths the size of the flag so to make a circle I'm going to make a square with the same height and width and then give it a border radius of 50% to calculate the height I'm going to use my flag height and multiply that by 3 fifths another way to think about this is as a decimal 3 fifths is 6 or another words saying I want my height to be 60% of the overall flat height and I want the same for my width because we're making a square add a background we have red square now let's make it a circle by adding some border radius and the final thing we'll need to do is Center it so I'll go up to my containing div set a display of flex so that I can then justify Center and Al line Center and that gives us a beautiful Japanese flag that we can make as big or as small as we want welcome to the flag of Sweden CSS challenge the Swedish flag is blue and yellow and has an aspect ratio of 5 to8 on these slides you'll find a reminder of how to calculate Dimensions from the aspect ratio so if the aspect ratio is 58s the first number represents the width and the second number represents the height so to calculate the DI Dimensions you will switch that and divide the aspect ratio height by the width before multiplying that by the total height of the flag here's an example if you have a flag with a ratio of 5 to 4 and you start with a flag height of 200 pixels then you would calculate your width thusly by dividing the height portion of the aspect ratio by the width portion this is another way of saying that the width should be 4 fths or 80% of the flag height using this as an example you'd end up with a rectangle that was 200 by 160 pixels so you can use this to figure out the proper proportions of your Swedish flag and the other problem that you'll have to deal with is how to properly place the stripes here's a chart that will hopefully help you out if we think of the flag as being 16 Parts Long and 10 parts high and each stripe as two rectangles one on top of the other then let's say we were trying to figure out what the height of this stripe should be we can see that it takes up two portions of the 10 parts in other words it takes up 2/10 of the height of the flag and when we're thinking about the placement of this vertical stripe we can see that of the 16 parts that comprise the width of this flag the stripe is five parts away from the edge of the flag figuring out the math can be a fun little challenge but if you're not into to it feel free to eyeball as best you can where the stripes should go and you can look at my solution to see how I've done it happy cating and I'll see you in the solution welcome this is the solution to the Swedish flag CSS challenge here's the general plan I'm going to create a blue field inside of which are two yellow stripes of similar Dimensions I will then rotate one of the stripes 90° and absolutely position position it taking it out of the flow of the document and allowing it to sit on top of the other rectangle I will then use absolute positioning and a bit of math to figure out where the vertical stripe should be placed in relation to the width of the flag so let's start by creating the blue background with its proper proportions I'll select the flag container and I'll start with a height of 150 pixels or I'll use my flag height variable I'll then calculate the width using my formula so if I have an aspect ratio of 5/8 then I will want to take my height multiplied by 8 / 5 this is another way of saying that I want a flag that has a width that is 1.6 times the height of the flag 1.6 times because that is the result you get if you divide 8 by five so I'll use my calc function and inside I will get the height of my Flag by using my height variable and I will multiply by 8 fths or 8 divided 5 now we'll add a background color so we can see what we've created we use my blue variable and here's the beginnings of our Swedish flag I know that I'm going to need two yellow stripes and that because I'm going to rotate one both of the stripes can have the same height so let's say I start by making my horizontal stripe I want to figure out what its height is and then I'll rotate it so looking at our diagram this stripe has a height of 210 of the total height of the flag 2/10 can be simplified to 1/5 so I will select both of my stripes and just as a reminder I have this stripe class on both of my stripes and that's what I'm selecting and to the stripes I will assign a background using my yellow variable and to calculate my height I'll use the Cal function then we want to calculate 1 of the height so my flag height times 1 this might look like a pretty thick rectangle but that's because it represents both Stripes let me add some margin bottom so I can show you that they are in fact two stripes I'll get rid of that and now I want to position my first stripe which as I can tell because it has four parts on top and four parts on the bottom is in the exact middle of the flag so I'm going to select my horizontal stripe which is called stripe yellow and I am going to align self Center in order for this to work I need to make my flag container a flex container so I'll come up here and say display flex and I'll also need to give my stripe a width of 100% and there it is my other stripe has disappeared because I have put display Flex on my container and I have yet to assign the other stripe a height and a width so before I continue let me get this flag out of the corner by going to my container and adding a bit of margin there we go now I'll make my final stripe which is called stripe yellow 2 first I want to set the width of my stripe so if we think about this stripe rotated 90° then the width would be how long we want the stripe to be if it's going up and down and we want it to take the entire length of the height of the flag if I'm going to add a width and I'm want to say that I want my stripe to be the same width as the flag is high I'll use my flag height variable and now they're smushed together and wrapping because I need to take my yellow stripe out of the flow of the document so I will set a position of absolute and I will come up to my parent container and set a position of relative now I have a stripe of the correct height and width I just need it to be in the right location so the first thing I will do is I will use the transform property to rotate my rectangle 90° now it's pointing in the right direction we just need to use absolute positioning to put it in the right place so if we look at our chart again we want the stripe to be four parts from the top of the flag and 516 from the left of the flag so what I'll do is I will set top position and I will calculate flag height times 4/10 to make sure that the stripe is properly positioned on the left side I'm going to create a variable for the flag width so I'll grab this calculation here then I'll grab my variable let's go ahead and put it here too just to be cons consistant and then to calculate my left position I'm going to use the flag width times 516 this is actually the opposite of what we want which probably has to do with the fact that this stripe is rotated so I'm going to say that we want calculation to be from the right and there we go a Swedish flag with the proper proportions and the stripes most definitely in the right place this is one of the trickier ones so if you completed it super excellent work I will see you later this country flag CSS challenge is to create the flag of Niger niger's flag has an aspect ratio of six to 7 which is pretty unusual and means that the flag is almost Square it's about 1 one six times as high as it is long all of the stripes have equal area meaning they are all the same size and the circle in the center is about 85% the size of the height of the white stripe you can calculate the flag's proportions by using the following formula it'll start with the height and you'll multiply that by the ratio height divided by the ratio width here's an example if we had a flag with the ratio of 5 to 4 and we started with a height of 200 pixels we would calculate the width by multiplying 200 pixels * 4 / 5 you can also think about 4 FS as a fraction so we're calculating a width that is 4 fths of 200 pixels or you can think about it as a decimal or percentage 4 fths expressed in a decimal is 80% or8 which would give us a width of 160 pixels so our flag would be 200 by by 160 pixels I've started you off with all of the HTML you should need to construct the flag and I've also provided the colors of the flag as CSS variables go ahead and give this a shot and I'll see you soon hello again let's build a Nigerian flag using only CSS My overall strategy will be to get these three stripes going then if we have a look at the HTML the circle is already inside of the white stripe so I'll use the Cal function to make sure that the circle has the proper height and width and it will be a square with a border radius of 50% and then I will Center it within the white stripe so let's get started in my index.css you can see that I started us out with a flag height of 200 pixels so I'm going to go ahead and I'll select my flag container div and let's go ahead and start with a background so we can see what we're doing just a temporary color and then I will give my flag a height and width for the height I'll use my flag height variable and for the width I'll use the formula in the slides so if our aspect ratio is 6 to 7 then we want the height of our div multiply by 7 / 6 and that will give us a WI width that is about 1.16 times the size of the height using my CSS calc function grab the flag height times 7 / 6 this is the same as say we want a width that is 1.1 16666 times the height of the flag let me also give the flag a little space next we'll want to select our three stripes and give give them their proper colors so we have these three stripe divs orange white and green I'll assign the orange background to the orange class and now I want three equal siiz Stripes so I'll go to my container div and I will set a display of grid what that does is create a one column grid of three equal sized elements stacked on top of each other the last step is to add the circle so at the bottom of my file I will select my circle div and give it its orange background now what about setting the height and width as I specified in the slides the circle is about 85% of the height of the stripe but what is the height of the stripe well the stripe is 13 the size of the total flag height right because all of these stripes are the same size in other words that would be the flag height and I'll use my flag height variable divide div by three now that I have the height of one stripe I know that my circle should be 85% of that height so I'm going to multiply by 85 because I'm trying to create a square the width will be the exact same calculation now I'll make my shape round by assigning a border radius of 50% and that gives me the properly sized Circle but it is taking up space so I need to take it out of the flow of the document so that it can sit inside of the white stripe without stretching it out so I want to give it a position of absolute I want to make sure to set its parent container the white stripe to have a position of relative the last thing to do is Center the circle inside the white stripe which I will do by making it a flex container just to find the content to Center and also aligning items to Center here is our lovely Nigerian flag this can be a tricky one but it's a great use of both grid and flex box as well as learning about aspect ratio and proportions so I hope you had a good time I will see you in the next one great work on this challenge this is a fun real world challenge that is based on a simplified version of your profile which you would find on your GitHub page so if you were to go to GitHub right now and look at your profile on the left side you would see something like this there's a profile image your name your GitHub username a little description if you've added one and a button to edit your profile information on the right side here is an example of what the button hover State should look like for this GitHub profile challenge you should try to match the example as closely as you can be sure to include the button hover State and for responsiveness we're going to want to make sure that the profile image is fully responsive meaning that it grows and shrinks as the browser size changes and finally the entire profile should grow no longer than 400 pixels and Shrink no smaller than 250 pixels if we take another look at the example by profile I'm referring to this entire area which has a slightly lighter background than the browser background which is black this is a challenge that might seem pretty straightforward when you first look at it but there are some details that I would like to make sure that you notice notice that there is a subtle border around the profile image if we look at the username here you might notice that the font weight is a little different and that it's a slightly different color you may also notice that there is a subtle border around the button and as you're building this out make sure you're paying attention to the padding and the spacing between the different elements and things like that let's have a look at the starter files I'm starting you out with all of the colors that you should need as well as a Google font which is not exactly the font that they use on GitHub but it is one of their fallback fonts if you were to go and inspect your profile on GitHub which I encourage you to do you'll see that the main font that they use is an Apple font so we're going to go ahead and use the Google font for a little bit of consistency taking a look at the HTML the entire profile is within a container all of the profile content the image and all of the details are in another parent container and then I've kind of split the profile into two halves the image and the rest of the details including the name the username the information and the button definitely feel free to change around this HTML if you want to do it a different way you can add and remove or change classes also feel free to change the information and personalize it to make it your own the most important part of this challenge is to match the layout as closely as you can other than that feel free to go wild but do keep in mind that the HTML that I've included here is what I'm going to use to show you a solution go ahead and get started I'm sure you'll do great have fun and I'll see you when you're finished hello and welcome back to the GitHub profile layout challenge I hope that it went really well for you as I suggested in the last scrim there are a lot of details here that might seem pretty straightforward at first but can be a little fiddly so if you were able to successfully complete this challenge really well done let me show you how I approached it I want to start by styling my outer containers and constraining this image a bit so it's not so big and over overwhelming I'll start by selecting my parent most div which is the profile container going to set my container's width to be 80% One of the responsiveness requirements is that the profile grows no larger than 400 pixels and shrinks no smaller than 250 pixels so I'll set a minwidth of 250 pixels and a Max width of 400 pixels this doesn't seem to have much of an effect yet because my image is so huge I'll select my image by first selecting its parent div is profile content then I'll select the image and I'm going to set a Max width of 100% this will prevent my image from growing larger than its container and will also allow it to shrink and grow with the browser I want to Center my profile so I am going to add some margin on the top and bottom and then also Center using margin Auto on the left and right the next thing I'll do is add my Pro profile background color to make it a little bit easier to see I'll use a CSS variable to do that now that I've added that background color you can see really clearly that all of my content is butting up against the parent container and we need to give it a little space we look at the example we have a nice even amount of space around all of the content I want to do this without affecting the size of my overall parent container so instead I'll add padding to the div that holds all of the content come coming back to my CSS file I'll select profile content and we'll add 1 M of padding on the top and bottom and 2 m on the left and right this is starting to shape up pretty nicely let's make the image round and add that border to my image selector I'm going to add a border radius of 50% to make that round and then I will add a two pixel solid border I'll come up here and grab my border variable there's my image with my border that's looking pretty good what we have left is some work surrounding the typography and styling the button let's style the button and then we'll tweak the typography I'll select the button by first selecting its parent container in the example the button stretches across the entire width of the content so I will set a width of 100% I'll also add the background color and the font color I'll need to overwrite this default border and add some border radius I'll add a one pixel solid border with my border color variable a small border radius and a bit of padding just do a small amount of padding on the top and bottom that's looking good now I'll add a hover State we want to change the Border color and the background color go on Hover I will change the color of my background to my background hover color then we'll change the Border color as well test this out that is the hover State we're looking looking for we have a nice looking button now let's work on the profile details what I notice immediately is the name and the username are fairly close together and the username is a little bit thinner and a different color than the name above it currently they're pretty far apart and that is because they are heading tags which come with a lot of default margin I'll start by selecting those headings and zeroing out that margin I'm going to add that here because I like to keep my CSS in order from top to bottom so using my profile details selector again I want to select the heading two and the heading three and I'll just reset the margin to zero this moves the two headings closer together but as you can see we've introduced a new problem the image and the heading two are smushed together I'll address that issue by adding a little padding to the profile details div which again is the div that encompasses everything in the bottom half of the profile selecting the whole profile details div I'll add an M of padding to the top and bottom I'll select that heading three again I'll want to reduce the font size as well as the color and font weight we have quite a big thing left we need to make sure that we're using the right font family I'm going to go ahead and add the font family to the body so I'll come up here we'll use the font main variable now that we've done that we need to make sure that the button inherits this font family you may remember that buttons are a little unique in that they will inherit whatever the default browser font is unless you specify that it should inherit from a parent so I'll come down to my button selector and we'll say font family inherit that we ensure that the button font matches the rest of the text and with that the GitHub profile layout challenge is complete really super great job there was a lot that went into this so pat yourself on the back for doing it and I will see you in the next one hello and welcome this is the toggle switch CSS challenge you will be building a classic toggle switch you've probably seen these around the internet or on your mobile phone they tend to show up on settings pages and things like that where there are a lot of options that you have the ability to switch on and off the requirements for the toggle switch are on click the toggle switch should move from one side to another the cursor should become a pointer so you'll notice that I have a pointer cursor right now if we take a look at the example you'll see that when we're hovering anywhere on this toggle button component you can see that there's a pointer finger cursor you should try to match the toggle Styles as closely as you can and as I said this is a pure CSS challenge so no JavaScript whatsoever on the next slide I have some hints for you so if you don't want hints go ahead and get started but I think this is a pretty tricky challenge so it might be good to stay around for some hints let's take a look at the HTML in the HTML we have this wrapping div and then we have a label and nested within the label is a checkbox input and a div called toggle switch so we're beginning with just this little checkbox and your hint is that if you hide the checkbox you'll still be able to style and toggle back and forth between the checked and unchecked pseudo elements and the way that you can still do that is by clicking on the checkbox label let me show you a quick example let's say that I had a label my label is check the box now you'll notice that I can check on the label text to check and uncheck the check box I don't necessarily have to check on the box and this is true for anything that is nested within the label so I could put a heading one tag here and clicking on that checks and unchecks the box so keeping this in mind as I said even if you hide the checkbox you'll still have access to the checked and unchecked pseudo selectors and you can style those my second hint is to use a sibling selector to style the toggle switch class that is the other div that is nested within the label you can use that class when the input is checked or unchecked so essentially we're going to use a checkbox to let us know what state our toggle switch should be in and we'll style accordingly and probably use some kind of transition to go back and forth between the two so let that sink in for a bit give it a try and I will see you in the solution welcome back to the solution of the toggle switch CSS challenge I hope it went well this one can be kind of tricky I'll show you my solution but first let's talk overall strategy so my plan will be to style the label to be this outside portion of the toggle switch I'm then going to use that div that is nested inside of it as this button I'm going to style it as a circle and use the transform property to move it over however many pixels to the right every time that it's clicked and I'll put a transition on it so it happens smoothly that is the plan let's do it going to my CSS file I'm going to start off by centering my toggle on the screen and styling the label so first I'll select toggle wrap I'm going to make that a flex container I'm going to give it a height of 100 viewport height which will then allow me to justify the content so it's centered and align items center now we have our itty bitty centered checkbox now I want an oval label with a black black border and a white background so I'll select my label and I'll start by giving it a width of 100 pixels and a height of about 40 pixels and then going to give it a solid border using my border color variable and once I give this a border radius it'll look pretty close to what we're going for there we go so now let's hide the checkbox the checkbox has a class of toggle input so I'll select toggle input and we will display none and it disappears now let's create the actual toggle switch I'll select my toggle switch class I'm going to make it the same height as its outer container and because it's a square I also want to make it the same width I will give it a background color and for that I will come up and grab my Hoggle switch background variable add some border radius to make it a circle border radius 50% to my label I'm going to add a bit of padding to create some space between the switch and the container that looks good as I said when I was giving you a hint in the previous scrim even though we've hidden the check box because we've surrounded it with a label we can click anywhere on or inside the label to toggle the checked or unchecked pseudo class so let's select that pseudo class I'm going to to select toggle input checked and now we can use a sibling selector anything that is nested inside the label with the input is going to be a sibling so I can select the toggle switch as a sibling which I can check or uncheck by clicking anywhere on the label then select toggle switch and I can style it as I want so toggle switch is this circle right here remember and what I want to do is move it a certain number of pixels to the right just to show you that I'm toggling on and off let's first say we want to change the background to Blue what this will do is every time I click it will toggle from black to blue because when toggle input is checked I'm saying make the background blue and the default is unchecked so instead of changing the background I want to use the transform property and then I will use the translate X function to move the Circle and translate X basically means that I want to move something on an X AIS or left to right so how far do I want to move it to the right well I know that my container is 100 pixels long and my switch is 40 pixels wide so I'll do a calculation and I want that calculation to be 100 pixels minus 40 pixels now as I check and uncheck the Box the circle moves from right to left it's moving over 60 pixels going back to its default position moving over 60 pixels hopefully that makes sense however I want this transition to be smooth I don't want it to happen instantly like it is now so I'll go to my toggle switch I'll use a transition and I want the transition to apply to all changes and I want it to take half a second that gives us a nice smooth transition now I'll come up to my body and I will add a quick background color match the style we want to make sure that our toggle switch container has a background using the toggle background color and that is this challenge solved but I do have a few things that I would like to make this a little bit more flexible I'm going to create a couple of CSS variables I'm going to create one called Circle size and I will set that to 40 pixels for now and one for toggle width which is 100 pixels now I'll plug in these variables instead of my hardcoded values I want the label to be the same height as the circle I will also replace my hardcoded circle size with a variable and I use a variable for the width of my label container not forgetting to use the VAR function that looks the same of course but if I come down to my transform property and replace the variables here now I'm saying I want the circle switch to move from however long the toggle width is minus the size of the circle and this will give me a lot more flexibility as far as how big or small I want to make my toggle so if I wanted to make the circle bigger and the toggle much longer and it's still going to work the same way I could also make it very small and that is it for the toggle switch challenge good work and I'll see you later hello and welcome this is the playing card CSS challenge in this challenge you're going to take this jumbled mess and turn it into a pure CSS Ace of Spades playing card your requirements are to match the layout as closely as you can make sure that the card's width is about 2/3 of its height so we want to make sure that the card has the proper proportions and finally keep in mind that the card can be of fixed size it does not need to grow and Shrink with the browser we're not not worried about responsiveness this is primarily a layout challenge this can be a really good challenge as far as working with flexbox or css grid I've started you out with a card height and all of the HTML that you should need so go ahead and get to it and I hope you have a lot of fun hello let's get started building an Ace of Spades playing card so here's my General plan I'm going to make the card itself a grid container and that's going to give me a one column container with three equal rows and then within each row I'll be able to place the items where I want them to be I'm going to make this upside down by using the transform property to rotate it so let's do it I first want to select my card class and make a card shape that is the right size I'll start with a border so I can see what I'm doing let's make that one pixel solid black I'll then give it a height using my card height variable for width I'll do a calculation what I want to do is the height which is 200 pixels times 2/3 and that will give me a width 23 the size of the height but I want to use my variable here for some flexibility let's also do a border radius and make the card class a grid container and that spaces out my content a little bit now I'll select my container class which I'll make a flex container and Center just so it's not stuck to the top of the browser window let's do a little bit of margin as well starting with my top row my item is already almost in the correct place just need to give it a little bit of space and breathing room so I'm actually going to add some padding around the entire card we still have a little bit of misalignment here but we'll take care of that in a second let's move on to the center row and for the center row I'm going to want to make this much bigger and also make sure that it is centered within its row so I'll select the center Dev make that a flex container and then I will Center all of the content and then we'll up the font size by quite a bit that looks good for my bottom row I am going to use the transform property to rotate it 180° which we flip it over and put it in this corner of the card so selecting my bottom class rotate 180° and there it goes we have one more slight tweak that we need to do and that is to make sure that the Spade is perfectly aligned with the a the Spade has a couple of pixels of space on the left side of it so I'm going to go ahead and add that space to the left side of the a as well and the way that I'm going to select the two A's is if we take a look at the HTML both of the A's are within these parent classes one called top and one called bottom and they're both the first child of their respective classes so to select them let's do the top one first I'm going to say I want all divs that are direct descendants of top were also first children I'll do the same for the bottom class and to both of them we'll add two pixels of padding left and that lines them up nicely this has been the Ace of Spades challenge it's a really good exercise and Alignment I think hope you enjoyed and I'll see you later hello and welcome for this challenge you'll create a four of hearts playing card it will look something like this and your requirements are to match the layout as closely as you can so notice that the bottom half of the card is upside down the card width should be 2/3 the size of its height and the card can be a fixed size meaning it doesn't need to grow and Shrink with the browser don't need to worry about any kind of responsiveness this is more of a layout challenge let's look at the starter files in the CSS I have a card height variable the rest is up to you and if we look at the HTML there's a container that contains a card class with three sections left middle and right if you want to approach The Challenge in a different way and need to change the HTML please feel free to do so you can also change the classes if you'd like just keep in mind that this is the HTML that I'm going to be using for my solution enjoy the challenge and I'll see you in the solution hello and welcome back to the four of hearts playing card challenge where we're going to build this four of Hearts using only CSS here's how I chose to look at this challenge when I'm looking at something that I want to build in CSS I try to look at everything in rows and and columns so when I look at this card I see three columns this is the First Column the four hearts are the second column and this four and heart are a third column and that is why in my HTML I have three sections a left a middle and a right my strategy will be to make the card a grid container and then I'm going to set a width for each of the grid columns I'll use the transform property to flip all of these hearts and I'm also going to use grid to position the four hearts in the middle column that's the plan let's get started first thing I want to do is get a general card shape going I'm going to select the card and we'll start with a solid black border I'll set the height using my card height variable I want the width to be 2/3 the size of my height so I will do a calculation I'll use my card height variable again and I want to multiply that by 2/3 there's our card shape so we can add a little bit of Border radius and now that I can see the card I will also style its parent container so that it's a little more centered and not stuck to the top left of the browser window we'll justify content Center and add some margin back in my card class I'm going to make the card a grid container by default that is going to give me one column and each of my items will be in its own row I wanted to find some columns and I'll do that using grid template columns I want want three columns and I want the First Column to take up 10% of the container div the middle column to take up 80% of the container div and the third column to take up 10% since I'm using percentages this needs to add up to 100 finally let's change the font color red let's now style column per columns the elements in the left column are more or less where I need them to be already I just need to give it a little bit of space and I'll do that by adding some padding all around the card we'll do half an M of padding that looks good moving on to the middle column I'll make this a grid container as well which gives me four evenly spaced rows of Hearts what I'll want to do is Define two columns I want four hearts that are in two columns again I'll use grid template columns I'll say I want each column to take up half of its parent space next let's make sure that everything is centered so I'm going to align items Center and text align Center let's make these Hearts much larger we're getting close let's move on to the third column flip it I'm going to use the transform property and I will rotate 180° everything is placed more or less correctly but if we look at the example the heart and the font size are looking a little bit small so I'll set my card font size to be a little bit bigger and that looks pretty good to me but I am going to skip scale down the padding a little bit and I think that's pretty close to where we want to be the last two things we need to do is take care of the tiny alignment issues that we have going on with the four and the heart not exactly matching up and then we need to flip these bottom Hearts so that they're upside down each one of these heart symbols has a bit of padding on the left that's kind of pushing it over a little bit so we want to add that same padding to the four so that they're aligned a little better if I look at my HTML each four is in a class called left or right and it is the first child of its parent class coming down to the bottom of my file I'm going to select all direct descendants of left at our first child divs and I'll do the same for right we just want to add a bit of padding that looks good to me so finally let's flip these bottom two hearts I'm going to select them using nth child so taking a look at our HTML they're in this middle div with the class of container in my CSS I'll select the div with the class of middle and it's nth child three and nth child 4 we could again use transform and rotate 180° that would give us some upside down Hearts the other thing that I can do is use the scale y function and the value to flip something upside down when you're using scale Y is ne1 and that has the same effect that's my solution to the four of hearts playing card CS s challenge hope you had fun and I will see you in the next one hello and welcome scrimba students this is the adjustable progress bar challenge progress bars appear everywhere on the internet and in applications on budgeting apps dashboards loading screens you name it a progress bar can be a very inspiring component to learn how to build because it has so many applications so I hope you have fun with this challenge fairly common when we're building different sorts of web components to be able to assign that component different classes that changes the look of it depending on the state of the component so we have our progress bar and as you can see in this example we're adding different classes to change the look so that we can represent the progress bar at different stages of being filled to complete this challenge you'll want to first start by creating a default empty progress bar and then you'll create a class for each of the four stages of that progress bar so we'll need a stage for 25% finished 50% finished 75% finished and 100% finished let's take a look at the starter files in the HTML we have a container that contains a progress bar element and inside of that is another element with a class of Prague status and this is where you will add the classes that show your progress bar at different stages definitely think about how to leverage this HTML structure to your advantage but you're also welcome to change it if you would like in the CSS I have as CSS variables all of the colors that you'll need to complete the progress bar or you can feel free to use your own colors definitely be creative and have fun with this now on the next slide are some hints so if you'd like to get started without any hints go ahead and pause it now and I will see you in the solution good luck if you do want hints here we go when you're thinking about how to implement this progress bar it may be helpful to think of it as two different elements one on top of another so you have an outer progress bar and an inner progress bar and you'll want to think about how you can use the width property of that inner progress bar to create the effect of the outer progress bar filling hopefully this helps but if you struggle I'll be right in the next scrim showing you the solution as I said before I think a progress bar is a really cool thing to learn how to build and you'll use this knowledge again and again good luck and I'll see you in the solution hello again this is the solution to the adjustable progress bar challenge I hope everything went great I'm sure you did an amazing job let me show you how I approached this problem here's what my overall strategy is going to be I have a progress bar div with another div inside of it I'm going to style the progress bar to look like an empty gray bar and I'll use the div inside it to create an element that is the exact same height with the same border radius and everything but it will be a different color depending on the class and I'm also going to use percentages to adjust the width of each one of these shapes so let's do it I'll start by going to my CSS and let's start with our default progress bar I'm going to give it a height of 40 pixels and for the background I will use my progress bar background variable that gives us a gray bar at the top of the mini browser let's add some border radius to create more of a progress bar shape I'll do a border radius of 20 pixels I now want to constrict the width of my outer progress bar but the way I'm going to do that is by adjusting the container I'll select my container class and I'm going to say I want my container to take up no more than 80% of the width of the browser then I'll add some top and bottom margin and auto the left and right so that my progress bar is centered that gives me a default gray progress bar now let's have another look at the HTML really quick I want to Target this progress status class that I can start working on the inner progress bar make the inner progress bar the exact same height as the outer so 40 pixels High Let me give it a background color we'll just do purple for now and that way you can see that I have element sitting on top of my default progress bar I want to give it the same border radius now look what happens when I adjust the width let's say 50% almost like magic I have a progress bar that I can adjust however I'd like by adjusting the percentage that is pretty cool but as we saw in the example we want to be able to add separate classes to adjust the width and what that looks like so I'll take the width off of this class I'll also remove the background I now want to create classes for each of my four stages create stage one I've created selectors for each of my four stages and that will let me add a background and a width to each so looking at our guidelines stage one should be 25% finish so I'm going to give that a width of 25% I'll also use my CSS variables to assign a background color let's go to the HTML and add this stage to test it out great so adding the stage one class makes my progress bar 25% full and red now I'll repeat for the rest of the stages adding the corresponding width and background colors that should do it let's test out the rest of our stages we have stage one stage two stage three and stage four that's looking good this is the adjustable progress bar challenge solved I encourage you to play around with the Styles and the colors and make it your own and also there is another progress bar challenge where you create an animated progress bar so definitely check that out great job and I'll see you again soon hello and welcome this is the CSS card flip challenge this card flip effect has a lot of fun real world applications you can use it to build a flashcard app you can use it to build a memory game a fancy hover effect for some kind of card Gallery layout there are so many possibilities for this particular challenge I've chosen a Jeopardy theme and if you're not familiar with Jeopardy the very popular game show here in the US it's been on the air for almost 60 years and it's essentially a trivia game in which you would have an entire wall of these blue screens and on each screen is a hint that is framed in the form of an answer so if we take a look at our unstyled HTML this is the front and this is the back so the front says this now deprecated HTML tag popular in the early days of the internet magically made text scroll across the screen and in Jeopardy the answer is always in the form of a question so you flip the card over and the answer is what is the Marquee tag if you weren't around for the early days of the internet and aren't familiar with the Marquee tag let me show you what it looks like as mentioned it is deprecated so definitely don't use it but as you can see it's kind of fun it sends your text scrolling across the screen I'll change that back and I'll change this back and let's take a look at the requirement your card should have two sides and flip from front to back on Hover try to match the Styles as closely as you can you'll use only CSS to complete this Challenge and you don't need to worry about responsiveness let's take a look at the starter files in the htl we have a card class and inside of that is a card front and a card back that has the content for each side of the card and in the CSS I have set up some variables for the colors that you'll need to complete the challenge on my final slide I do have some hints for you so if you don't want hints go ahead and pause and get started on this challenge I'm sure you'll do great however this challenge can be deceptively complex so I would recommend that you stay around for these hints and here we go conceptually I would think of this card flip effect as an element rotating 180° in 3D space so if you think about actually having some kind of playing card or something that you're rotating that is pretty much what is going to happen on the screen I'd recommend that you use the outer card class to create the flip effect and then you can show and hide the content of the front and back of the cards as it flips you want to use the transition property for a smooth flip effect and you may run into a couple of little quirks while you're working on this flip effect and if that happens look up the transform style property and its preserved 3D value and the CSS property backface visibility they will both help you get this challenge done good luck you got this and I'll see you in the solution hello again this is a solution to the CSS card flip challenge in the style of the popular Us game show Jeopardy we have created a card that flips back and forth on Hover as I said in the last scrim this challenge can be deceptively complex so if you got even part of the way there or if you have a card that mostly flips but has some weird little quirks and bugs you have done a fantastic job so definitely feel proud of yourself now let me show you my solution on a high level I'm going to create a transition effect on this card that uses the transform property to rotate the card 180° on Hover also on Hover I'm going to hide the front content and show the back content let's begin by making a card in my CSS I'm going to select the card class I want my card to be 200 pixels in height and 350 pixels in width I'll then create my Jeopardy blue background using my CSS variable we'll go ahead and change the color to white using the main font color variable give the card some padding and a bit of margin just to give it a little space I'll then add some border radius let's say about 10 pixels and let's take a look at the example so I want to make sure that absolutely everything is centered and capitalized I'll Center everything by setting a display of flex that reminds me I should probably point out up here that I already have display flex and just ify content on the body which is why the card is centered no matter how large the browser stretches I've set a display of flex so I can justify content Center align items Center and text align this looks a little strange because I have my front and back content all on one side of the card to address that I'll select my card back class and I'll set that to display none for now now up here in my card class I will text transform to uppercase everything and that is looking pretty close to what we're going for so I'm ready to do my transition effect below my card I am going to select card hover when we hover over the card I want to use the transform property I want to rotate on the Y AIS want to rotate y 180° now if we come up here and hover it appears as if I'm just making my text backwards but actually the entire card is flipping around it's just happening instantly so I want to write a transition effect so that this happens slowly and more smoothly up here in my card selector I'll use the transition property and I want to Target the transform property and let's say I want it to take 6 seconds the result is when we hover the card flips all the way around this gives us a flip effect we just need to make sure that the right content is showing at the right time when I'm not hovering I want the front of the card to show when I am hovering I want the back of the card to show so I'll create a couple more hover States on card hover I want to select card front and I will set the front of the card to display none I also want to on card hover select card back I have that currently set to display none so on Hover I'll set it back to display block over and see what that gives us we're getting closer but as you can see there are a couple of issues here when I hover you can see for a moment the front of the card flipped backwards also the text on the back of the card is backwards and that means that on Hover I want to flip the back of the card 180° so that it's facing the right way so in my card back hover state I'm going to use the transform property again once again I will rotate y 180° by the way I'm using rotate y that basically means that you want to rotate horizontally if I were to change this to rotate X my card would rotate from top to bottom to prevent these little glimpses we're getting of the backside of the content as it rotates I want to use a property that I mentioned in my hints down at the bottom of my file I'm going to select both card front and card back and I'm going to set backface visibility to Hidden adding backspace visibility almost solves the problem but there is one more step back up here in my my card class I'm going to add a property called transform style which I mentioned in my hints and we'll give that a value of Reserve 3D this property ensures that the children of the card class also exist in 3D space which ensures that here on Hover when we rotate the back of the card that that is honored in 3D space now if we hover the back of the card also rotates in 3D space and with that this challenge is complete I I want to say once again that this is a finicky little challenge so if you got some kind of flip effect and you were able to get more familiar with Transitions and using the transform property and the rotate function and all of that you have succeeded at this challenge so very well done and I hope to see you in the next one hello there in this challenge you're going to build this lovely loading animation if you find yourself feeling a mysterious sense of frustration as you watch this loading animation it's probably because this is the kind of Animation you might see if a video that you're streaming starts to buffer or if a website is taking forever to load but don't worry it's way more fun to build than it is to watch so let's look at some of the requirements I find when building a CSS animation that it's helpful to point out what the animation is actually doing to help you start to conceptualize how you might begin to build it so what's happening is that a portion of a colored circle is spinning around clockwise within another gray Circle for this challenge you want to match the Styles but you can feel free to choose your own colors and no JavaScript this is a CSS only challenge on the next slide I have some hints so if you do not want any hints go ahead and get started and I will see you later in the solution scrim good luck if you're still with me here are some hints to achieve this effect you'll want to use the animation property and key frames and it will help you to remember that the Border property is a shorthand CSS property you use it to style all four sides of a border at once and that makes it easy to forget that you can individually style each side of an element's border using properties like border top and border right Etc so do keep that in mind I did describe this as a circle earlier but if you think about it it's actually the border of a circle hopefully that helps but remember if you get stuck I'll be right in the next Grim with the solution before you go off let's take a quick look at the starter files in the CSS file I've added some CSS variables for the colors you need and in the index HTML we've kept it simple we have a container and a div class called loader this loading animation is a super fun effect it's one of my favorites I really like it I hope that you like it too and I'm sure you'll do great I'll see you in the solution scrim hey welcome back let's build this loading animation at a high level here's what I'm going to do I'm going to create a square shape I'm going to give it a border radius so that it is round and then I'm going to style the border so that it's thick and gray I will then Style just the top border portion to be a different color I'm going to set it to be purple and once I have that purple border I can write an animation to spin that purple border around and around let's see what that looks like in CSS I'm going to go to my index.css the first thing I'll do is create my circle I'll select my loader class and I'll start with a square shape so I want a width of 100 pixels and a height of 100 pixels then I will set a border so that we can see what we're doing here it'll be a solid border and I'll use my spinner color variable gives us a nice gray Square let's make it a circle by adding 50% border radius we're on our way I want to quickly Center this so I will select the container class and we'll do a height of 100 viewport height and display flex and that will allow us to horizontally Center using justify content and vertically Center using align items we go perfectly centered circle now in my loader class I will select just the Border top I want it to be the same size as my gray border and also solid but I will replace the gray spinner color with my active color the circle is divided into four pieces top right bottom and left and all I've done so far is I've colored the top border so that it's purple my next step is to create an animation to spin it around and around in my loader class I will create an animation I'm going to call it spin I want it to take 1.5 seconds and I want it to be NeverEnding or infinite down here at the bottom of my file I will create some key frames for my animation so I want to create key frames for the animation called spin in my animation I really just need one key frame when my animation is 100% done I want it to have rotated 360° in other words I want it to take 1.5 seconds to move back exactly to the location where it began you may have noticed though that we're pausing at the top before the animation starts to spin again whereas in the example we have a nice smooth even animation and that's because by default the animation timing is ease meaning that the animation starts out slowly speeds up a little bit and then slows down again as it wraps up we want the animation to move at the same speed from start to end I'll come up to my animation property We'll add the value linear that Smooths out the animation and also completes the challenge really great job on this animation it's a fun one but may your future be buffering free I'll see you in the next challenge hello this is another fun real world CSS challenge where we're going to build this Instagram menu if you're not super familiar with Instagram this is the stories menu each item represents a user that you follow and the idea is that you're able to click on this and view their story or a slideshow that typically contains pictures memes and videos the stories menu uses color to communicate the state of each user story if you see this rainbow gradient border that means that Julian has an unread story that you have not yet viewed if it's gray that means that you've already viewed their story if they have a live badge that means that they're currently live streaming what you'll do for this challenge is recreate this menu and also create a set of classes that will change the look of the menu items depending on their state you'll want to create three classes that can be added to the story element and we'll look at the h in just a sec to visually indicate the state of each story you want to be able to add a new class and that will add a gradient border to the menu item to show that a story has not yet been viewed you'll want to be able to add a viewed class which will add a gray border to show that the story has been viewed and the last class that you want to create is a live class and that will add the red notification badge to indicate that the user is currently live streaming the stories menu is an unordered list and each story is a list item with an image and a username and this Li is where you'll want to be able to add these classes to visually indicate that story's status I've set this up in the HTML already so we have one that is new that is viewed with a live stream and then another new one but the idea is that these classes are interchangeable you should be able to add and subtract them from any of these list elements to change how that element looks in the CSS I've provided all of the colors that you need as well as the Google font that I use in the example on the final slide I have some hints the gradient border effect that you see here can be accomplished using a wrapping div if you've already completed one of the other CSS challenges you might be familiar with the Border image property and how you can create a gradient that way but because the elements in this menu are round you're not going to be able to use the Border image property because it does not work with border radius my other hint is you may be wondering how you would add the live badge if that text doesn't already exist in the Dom so if we look in the HTML we actually don't have any text that says live we want that to appear only when we add the live class but this is a CSS challenge so we also can't use JavaScript so my recommendation for how to accomplish this is to use a pseudo element pseudo element has a Content property which will allow you to display text go ahead and get started on the challenge I think that one of the best ways to improve your CSS to find things that you like out in the real world and try to rebuild them this is a really great challenge for that so I hope that you have fun I'm sure that you'll do a fantastic job and I hope to see you in the solution good luck this is the solution to the Instagram stories menu CSS challenge I hope that this went well for you there's a lot going on in this little menu more than you might expect so if you completed the challenge super amazing work let me show you how I did it the very first thing I want to do is make sure that I have all of my fonts and colors more or less set up so to the body I'm going to make sure that I have the correct background color by using my background main variable I know that I want my font color to be white good and then want to set my font family that's good and I want to reset my unordered list by getting rid of the default padding and the list style type so that we don't have these bullet points here I'll select the class stories menu that is on my unordered list I'll zero out the left padding and add list style type none to get rid of the bullets great now let's constrain the size of these images going to select the class that is around the div wrapping my images apply called image wrapper and I want to constrain it as a square so I'll give it a height and a width of 60 pixels I'll then select my image and set the height to 100% and that will ensure that my image will never get any larger than its parent container which is image wrapper I'll also make my image round by adding a border radius notice if we look at the example that there is a black Border in between the status border and the image I'm going to go ahead and add that border to my image We'll add a two pixel solid black border to my image I'll add a two pixel solid black border to my image wrapper I'll create this outer border effect by adding a little bit of padding basic basically right now the image wrapper and the image are sitting right on top of each other and I'm going to make the wrapper slightly bigger so that you can see it peeking around the edges of the image I'll add four pixels of padding let's make the background color white for now so that you can see it that helps us see that we're creating a white square and that our image isn't exactly centered within that square I'm also going to add border radius to my image wrapper 50% to make the Border round and now I'll Center my image within it by making it a flex container which will allow me to justify content Center and align item Center to Center vertically that sets me up with a nice even border so that I will be able to use my other classes we look here my new and viewed classes to change the color of the Border let's do that now I'm down to the bottom of my file the way I want to do this with selectors is I want to say if there's a new class look for its immediate child which is a div with a class of image wrapper and then change the color of that image wrapper so I'll say new and I want to select a direct child of new called image wrapper and if it is a new story if it has a new class that's when I want this rainbow border because that indicates that the story has not yet been read I'll add the gradient border with my background property and then I'll use linear gradient and I want the linear gradient to go to top right so so the colors I list are going to start here and they're going to travel up in a gradient to the top right so this quite a long list of colors so I'm going to copy and paste them in rather than use my CSS variables and that gives me a nice rainbow border if I were to give my other list items the class of new so for my second list item I'll delete viewed and I will replace it with new then if we run all three of my menu items have this new class which gives them a rainbow border let's change this back and create a border for the viewed class when an item in the menu is viewed it has a gray Border in my CSS I'll do something very similar to what I've done above if there is a viewed class and it has a direct Child Called image wrapper and I want the background to be gray you come up here and grab my viewed variable for that and if we run that gives us the gray border that we were looking for excellent before we work on this live badge let's do the rest of the sort of structure of the menu we want to make sure that this menu is vertical and that everything is centered and evenly spaced coming back up to my stories menu unordered list I want to make this a flex container to display all of my items vertically and I'll go ahead and use justify content space around and I'll also go ahead and constrain the width of the stories menu so that everything doesn't stretch out too far if the browser is really wide we'll just give that a Max with about 320 pixels which is generally the smallest screen size that we need to worry about so let's just say for the sake of this challenge that we we want this to appear on a fairly small Mobile screen If This Were a real world scenario this is where you might write media queries to control the size I'll also add some margin let's add some margin to the top and bottom Auto on the left and right so it's nice and centered how do we make sure that the text under each user story is perfectly centered right now it's a little bit off the way I'm going to address that is to select each story I'll make each story a flex container and then I will change the flex direction to column so that the two items are stacked on top of one another to add a quick background to this so that you can see one of the issues that we're going to run into is that depending on the length of the username the image may not be centered in the containing story box so we want to make sure that it's always centered with within the story container itself I'll deal with that by coming to my image wrapper and I'm going to say align self Center that will ensure that my image is always centered and that will help me make sure that the username is also perfectly centered with the image returning to my story selector I can now Center Aline my text that's how we can make sure that everything is perfectly centered now I'll get rid of this purple background and we can add the live batch as I said in my hint the way that I'm going to do this you come down to the bottom here is I'm going to select the live class and use the after pseudo element and what that will do is if there's a list item with the class of live it's going to add a pseudo element which will allow me to use the content property to add that live text I'll add the content which will be live in all capital letters you'll see that appears after my item that has the live class on it let's style it now according to the example I'm going to make the font size slightly smaller I'll make it a little bold I'll add my background color you'll also notice that we have a black border let's add a two pixel solid black border a little bit of Border radius let's constrain the width to about 20 pixels and add a bit of padding on either side that is looking pretty good but how do I make sure that it is in the right place I'm going to place this using absolute positioning so the first thing I'll do is go to the live elements parent div and I'll add a position of relative every time we absolute position an element we need to make sure that its parent element has a position of relative I can then come down here and give my live badge a position of absolute and that is going to put it in the top right corner if I were to add a background again to this story class this helps us see the boundary of our absolutely positioned element if I want my badge to be right here I can see that it's roughly 50% from the top of my containing div I can say I want my element positioned about 50% from the top which puts it just where I want it to be I also want to center it and here is the trick to centering an absolutely positioned element do a margin Auto that's not going to do anything until I say I need a left position of zero and a right position of zero and that is how you Center an absolutely positioned item left zero right zero margin Auto great little trick let's get rid of the purple background so that we can admire how beautifully centered are light live badge is with that our Instagram stories menu is complete as I said at the beginning of this scrim there is a lot going on with this menu a lot more than you might expect really fantastic work in this challenge you'll build an animated progress bar as you can see this progress bar fills up and changes colors as it does so to complete this challenge you want to build a CSS animation of the progress bar filling to 100% the animation should keep looping with a small pause when the bar is filled to 100% so as you can see when the bar fills up the animation doesn't automatically start over there's a little pause there it may look like the progress bar is using a bunch of colors but it is actually only using three it begins at Red turns blue when it is 50% full and green when it's complete the other colors that you're seeing here are the blending as the animation flips from one color to another so just keep that in mind you'll only need to build this animation with three colors and finally no JavaScript for this challenge only CSS on the next slide I have some hints for you so if you don't want any hints go ahead and pause and get started right now here are the hints when you're building a progress bar it may be helpful to think of it as two different elements one on top of the other so you have an outer progress bar which is the gray bar and an inner progress bar and you're controlling the width of it to create the effect of the progress bar filling up so you want to think about how you can control the width of the inner progress bar to create that effect my second hint for you is that my second hint is to do this CSS only you're going to need the animation property and key frames but as you're building this animation you may notice that there is no way to pause an infinitely looping animation between iterations so to create the effect of a pause once the progress bar has filled to 100% you may need to include an extra key frame those are your hints now let's take a look at the starter files in your CSS I have all of the colors that I have used feel free to substitute your own colors to create a fun effect and also feel free to change up the HTML however you'd like just keep in mind that my solution will be using this starter HTML and CSS progress bars show up everywhere on the web so it is a really cool real life challenge to build a progress bar animation good luck and I'm sure you'll do great see you in the solution welcome back to the animated progress bar CSS challenge solution here is my plan if we take a look at the HTML I have a div with the class of progress bar and nested inside that is a div that also has a class of progress bar as well as an additional class called progress status I'm thinking about this as two different progress bars one inside of another the gray progress bar will always be one width whereas I will use animations to adjust the width of the inner progress bar which will create the effect of the progress bar filling I'll use this common progress bar class to make sure that both of my progress bars have the same height and Border radius then I'll use the progress status class to control the width and the background color of the inner progress bar let's do this I'll start by selecting that progress bar class I want my progress bar to have a height of 1.5 M and we'll also give it some border radius and I'll use my variable to give it that light gray background color here is our gray progress bar now let's use this container class to constrain the width of it and move it around a little bit I'll come up here and I'll select my container class I want to set my container so it takes up no more than 80% the width of the browser window I'll also add margin to make it a little more centered now I'll select that progress status class so that I can show you if I set a width for now let's set a width of 25% and we'll add a purple background and then you can see that I have the beginnings of a progress bar here and there are actually two elements sitting on top of each other I want to begin my animation at 10% and I want my animation to start with the color red so I'll use my start variable this will be the starting point for my animation I'm now ready to begin my animation so I'm going to use the animation property I want to create an animation that will take about 6 seconds I want it to be linear meaning that the speed will remain constant throughout the duration of the animation I'm going to call my Animation Show progress and I want it to run in an infinite Loop now I'll Define my show progress animation I'm going to use percentages to Define my key frames and here's how I'm going to create the effect of my progress bar pausing for just a little while at 100% I know from my requirements that the progress bar turns blue at 50% full so I'll start there and I'll say 50% of the way through the animation I want the width of my div with the class of progress status to be 50% and I want the background to use my middle color and I also know that I want at 100% for my width to be 100% % and my background to use the Finish color you can see that my animation gets all the way done and it immediately starts over so what I'll do I'll copy and paste this and I'll say I want this to happen at 75% as well and that's essentially a way to say finish the animation at 75% or at least the animation effect that I want and then keep it there until the animation is 100% finished this will you'll notice cause the animation to kind of be slow in the beginning and then speed up but I think that's okay progress bars often have variable speeds makes them a little more interesting to look at that's how I solved the animated progress bar CSS challenge I hope this inspires you to experiment with animated progress bars on all sorts of other kinds of CSS animations they're super fun and they really add a lot to a web experience thanks for building this with me and I will see you later this CSS challenge is inspired by github's contribution graph if you're at all familiar with GitHub you've probably seen this graph it's on your profile page and it shows you how many contributions you've made to GitHub repos on a daily basis each Square represents a day of the year each column represents one of the 52 weeks of the year and each row represents a day of the week starting with Sunday and ending on Saturday the graph uses color to communicate how many contributions were made on any given day the dark squares mean no contributions the dark blue squares mean some contributions the medium blue means some medium level of contributions and the light blue squares mean you've made a lot of contributions so the darker the color the fewer contributions you've made on a given day I've used a different color scheme I've used blue instead of a green color scheme but the idea is the same let's look at some more details about this challenge the HTML for the graph is generated by the code in index.js let's take a look at that you don't need to know how this code works but you're certainly welcome to have a look at it and read it and understand what it's doing it's generating all the HTML for the graph and also randomly assigning the contribution level to each and every Square the scale that I've chosen to use is three five or 10 three being the dark blue color five being the medium blue color and 10 being the lightest blue color what you'll want to do is style the graph first with default squares and then create selectors that will style each square based on the number of contributions per day if we take a look at index.html here's an example of the HTML that the JavaScript is generating it generates an unordered list for each of the 52 weeks of the year and each week list has a list item representing the day of the week each day of the week will have a random data value that will be either 0 3 5 or 10 you'll need to create selectors that will style each square based on the number of those contributions my final slide has some hints on it so if you don't want hints go ahead and pause the scrim and get started now good luck I'm sure you'll do great here are your hints this challenge is a really great candidate for CSS Grid in conjunction with the repeat function and your second hint is that for styling the squares look into using attribute selectors so go to MDM and look up attribute selectors go ahead and get to work you can do this and I'll see you in the solution hello this is the solution to the GitHub contributions graph CSS challenge where your goal was to build this contributions graph with generated HTML that is autogenerating different levels of contributions for each Square let me show you how I approach this problem firstly this is a bit hard to see so I'm going to select the UL and I'll temporarily make the font color white and you can see that I am starting off with a bunch of seemingly blank unordered lists with seven list items each a good place to start I think is to get rid of the default styles for the UL so I'm going to zero out the left padding and set the list style Type To None let's take a look at the generated HTML each Square has a class of square and I'll start by styling the squares so I can see them going back to index.css I'll select the square class and I'm going to make every square a height and width of 10 pixels and we'll give it the default Square background color a little bit difficult to see let me actually make the background color pink temporarily here all of my squares they're all stuck together let's get these into the right shape and the way I'll do that is by by targeting this parent graph class I'm going to make that a grid container up here I will select the grid class and we'll make it a grid container with display grid and then what I'll do is use grid template columns and I'll use the repeat function to say I want 52 elements all taking up one fraction of space this should actually be graph that gives me 52 Columns of 7 squares each the problem is that all the squares are still stuck together so in my Square selector I'll give each square a bit of margin but I'll zero out one side of the margin so that it's not doubled up on the right finally if we look at the example each square has a little border radius I'll add a border radius of about two pixels that is looking good let me get rid of this pink background and we are getting closer I want to make sure to add my graph background so I'll grab that variable and use it here and finally I want the graph to have a little padding this is very close to what we're aiming for now we just need to get some colored squares remember that if we look at the generated HTML each square has a data value that is randomly assigned a number and that number will be 0 3 5 or 10 this is where my attribute selectors come in I'll use an attribute selector to select that data value property and I'll say if the data property equals three I want the background color of the square to be my level three color gives us some dark blue squares and then I will just repeat this with the other data values so it if it has a value of five I want my level five color and if it has a value of 10 I Want My Level 10 color and that is our graph completed you'll see that every time I refresh I get new random colors for my graph I love real world world challenges like these because it can be really fascinating and really educational to try to figure out how the developers at GitHub may have accomplished this I've probably done it in a different way than they did but you can still learn so much by recreating these cool features that you see in web applications every day really excellent work on this challenge you've done a great job see you later congratulations you have reached the end of the CSS challenges you've done great work so pat yourself on the back and do a little dance if you attempted to complete all of these challenges you are truly a CSS wizard you've matched designs inspired by real life web components did the math to recreate perfect country flags and exercised your CSS animation prowess to create some really fun practical and useful visualizations here's what I suggest if you'd like to go further and continue honing your CSS skills find components or layouts that you love in your favorite apps and on on the internet and recreate them as closely as you can always a great exercise I also encourage you to customize and personalize what you built in this course by experimenting with different themes colors and fonts there's nothing that you can't do with CSS so go out and create something smooth creative and beautiful thank you for flexing your Flex box skills with me and happy coding