Coding Challenge #7 - Scrolling Words Animation

Key Takeaways

okay then gang so in this challenge I want you to try your hands at this effect right here where we have different words and they're being cycled between using a CSS animation so to begin with the word starts as JavaScript which we'll see in a second then to node then to python then to HTML CSS then to flutter and then it Scrolls all the way back to the top and it starts again and this animation is just on Loop it will continue and continue so there's no JavaScript involved in this purely CSS animations so I'm going to show you now how to get some starter files for this and hopefully you can have a good crack at it so you can find the starter files for this Challenge on GitHub and this repo coding challenge is I will leave this link down below I've already selected the challenge 7 start Branch right here which is what you need to select and then you can see we have an index.html file and a styles.css file you can download these by going to code and then downloading a zip right here unzipping the folder and just opening it up in some kind of text editor okay so once you've done that you'll see inside the HTML file we have a very simple template right here we have an H1 then we have a section and the section contains that kind of scroll a bit now the first word learn that's not part of the scrolling remember it says learn and then whatever it is so JavaScript node python Etc so that bit right here is just in its own div then we have a div down here which contains the word list if and inside that we have a bunch of spans with five different words so these are the things we need to kind of scroll and animate now you shouldn't need to change this index.html file one bit but you can do if you want to if you can think of a different way to solve this problem feel free to use that so if we go to the styles.css file we can see we already have a few Styles just a reset right here with a new Google fonts we style the background text align to the center color white and H1 with a bit of margin and then the section right here which is this section surrounding these two divs we grab that and we use the direct descendant selector to grab the divs which are direct children so this div and this div it won't grab this because it's not a direct child of the section just these two and what we say for those two is display them as inline block and that means that this is going to sit next to this so the left to right and we need that because it needs to be learn JavaScript learn node Etc then we say text align left height of each is 30 pixels and the line height of each is 30 pixels so this is important because I use these kind of values inside our CSS animation later on so pay attention to those alright so that is your starter file have a really good go at this and then in a day or so I'm going to post up my solution good luck