Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Let's start by taking a closer look at the HTML and CSS structure behind our infographic. We have three main files making up our markup in CSS, the index.html, base.css, and styles.css files. I'll go through our HTML first. At the very top of the file, we have a couple of lines here to include Typekit, which I mentioned in the last tutorial is optional. Continuing down to our HTML structure, we have one div that's containing our entire infographic. Then we have a header section holding our title and our coffee cup animation.
But feel free to poke around if you're curious of what I have in here. Moving to our styles.css, this is where the bulk of the CSS we'll actually be working with is. At the very top, we have an import line importing our base.css and then right below that I have a little comment with all my colors that I'll be using. I like to keep those handy. But our styles.css file is sectioned out mostly by the section on the infographic. For example, we have all our styles for our header right here at the top, then further down the styles for our nav, then the styles for our drink profiles, and so on.
We'll mostly be dealing with the header section, the profile section, and of course adding an animation section. So let's take a look at that in the next tutorial.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.