Coding Challenge: Build a tag cloud with flexbox | CSS Practice

Key Takeaways

Hey folks, in this video we're going to do some more practice building CSS layouts. Today we're going to be building this tag cloud. The starter files are in the CSS layout GitHub repository that I have linked down below in the practice two folder. So, let's check it out. Right, so in VS Code I have that CSS layout repository open and we want to go down to the practice two folder. In this folder we have a readme first markdown file that has details of what we need to build. Then we have the starter files themselves in the problem folder which contains the index.html and style.css files. In the mockups folder you can see screenshots of how the finished layout should look on both mobile and desktop. All right, so I'm going to close the sidebar. I'm going to move the readme to the left side so we can see the readme with the screenshots of the uh mockups themselves. Okay, so if we go down to the functional requirements here, it tells us that the tags should be displayed in a cloud format like we can see here. I'm going to zoom in a little bit. And they should have 10 pixels of space between them, wrap onto multiple lines, and be horizontally centered in the container. And then if we go to the desktop version, you can see that it looks pretty much the same as the mobile except things are just a little bit wider because there's more viewport width. All right, so let's open the index.html file and see what our starter code looks like. Now if you want to pause the video, you can try to build this yourself first and then you can watch the rest of this video where I show you step-by-step how I would build it. In our HTML we have all the content in a section tag with a class of wrapper. Then we have an h1 tag and then all the tags for the tag cloud are in this unordered list which has a class of tags. And let's take a look at our CSS file. So, I do have some global styles already for sizing, fonts, and colors. And in the wrapper class, this is something that I like to do to limit the width of website content on really large screens and to also horizontally center it on the page with these two styles. Then if we go down to the tags class, this is the UL tag. I've also limited the width just so the tags don't go super wide and I've removed the bullet points. Then the list items have some general UI styles for color as well as the shape of them. So, we only need to focus on the actual layout styles. All right, so let's run our local website from the index.html file and I'm using the VS Code Live Server extension. So, I'm going to find that index.html file, right click, and then open with Live Server. So, I have the website running locally on the right now. And I also want to emulate an iPhone so we can do the mobile styles first. So, I'm going to right click, go to inspect in Firefox, and then this is going to open the Firefox DevTools. So, you want to click this icon in the top right to turn on responsive design mode and then just make sure you have the correct device loaded. Here I have the iPhone 14 loaded. Okay, so I'm back in the mobile mockup to decide how we want to build this. Now if we take a closer look at the tags in our mockup, you can see that we do have multiple rows, but it doesn't seem like we have a strict template where the columns are the same on all of the rows. You can see they're kind of each other and sort of staggered. So, this tells me that we don't want to use grid because grid does need a strict template, but instead we should use flexbox because with flexbox you can have this staggered look kind of like bricks in a wall. So, we know that we want to use flexbox for this. Now let's go back into our HTML and we want to identify which element the flex container is going to be. Since each of the tags is a list item tag and their direct parent is the unordered list tag, we want to make this tags class the flex container. And this is what we're going to target in our styles. So, we have the tags class already. And now I'm going to turn the UL tag into a flex container by adding display flex. So, when we save you can see now all the tags are in the same row, but we do need to wrap them because right now they're all in the same row and they're causing horizontal overflow. And we can do this in our styles by adding flex wrap and set it to wrap. So, now the tags are wrapping and we don't have horizontal scrolling anymore. Now the next thing we want to do is add that 10 pixels of gap between the tags. So, again in the flex container we'll add gap of 10 pixels. So, now we have space between the tags. So, this is looking pretty good. So, let's go back to our mobile mockup and I'll try to match the zoom here. Now we are getting pretty close, but you can see we still need to center the tags horizontally as a group. Right now they're aligned to the left. So, let's go back to our styles and we can align the tags horizontally on the parent using justify-content center. So, when we save, now you can see that they're horizontally aligned. So, again we're going to compare with our mockup and it looks like they match pretty well. So, I think that's good for mobile. Next, let's check out how this looks on desktop. So, I'm going to open that desktop mockup and then in our website I'm going to load a larger viewport width. I'm going to load this pre-saved one at 1200 pixels and I'm going to zoom in to try to match the zoom here. There we go. So, things actually look very close to the mockup. I'd say it matches it pretty good. So, I think that we're good on desktop. Didn't have anything different from our mobile styles. All right, and so that is how we can build this tag cloud using flexbox and it is responsive. So, I hope you found this video, even though it was short, helpful in explaining the thought process that I follow when I'm building layouts. If you like the video, please leave a comment letting me know as well as give this video a thumbs up. I would really appreciate it. So, thanks for watching and we'll see you in the next one.