Style panels to have a background image and a heading. Used Flexbox to align everything, and then added a little bit of JavaScript so that on click, it changes the class to active, and expands with a CSS transition. Used JavaScript for the event listeners. Expanding Cards
Build progress steps and you might see these in different kinds of websites with forms, basically like multi level forms, shopping carts, things like that, just a progress bar that starts at one and just goes along here. Progress Bar
Here we have the little rotating navigation icon. We have two icons, open and close. We're going to position them so that when we click it rotates and shows the close button and the hidden Menu. We need a little bit of JavaScript to add and remove the specific class. Rotating Navigation
A hidden search widget, that has this button with a little search icon from Font Awesome, and as it's clicked, it fires off a JavaScript event that activates a specific class for the transition. We'll be using CSS along with JavaScript to add the event and toggle the class. Hidden Search Widget
Blurry loading page or loading image. We're just doing a blur effect on the image. And we'll have to map different number ranges to the 0 to 100 load. And there's a stack overflow function that we're going to use to help us do that, to help us map one number range to another. Blur Image Loading
Build a scroll animation. On some websites when you start scrolling and parts of the site images, pages or sections of the website start to come in. We've created these content blocks and you can see there are three to begin with.So we're going to use CSS transitions to have it come in smoothly. We're going to use JavaScript to tell where the trigger point is for the next box to come in. And then we're going to add a specific class to show and remove the class when it hits the trigger point and it'll all slide back out. Scroll Animation
We're going to use GitHub API to fetch users. We're going to be able to search for GitHub users to get some of their profile data and display it in a card. And we're also going to make a separate request to get at the user's latest five repositories or however many you want to add to add to the card. So these are the docs for the GitHub REST API. Other thing we're going to do is use Axios instead of the Fetch API. So Axios is a library. It's a promise based HTTP client library for the browser and node.js. The error handling is better. Let's go ahead and get into it. GitHub Profiles
We're going to createa split screen with a background image with an overlay with some content inside. And if we click on one side, it's going to stretch out to about 75%, the other side 25%. If I hover on the right side, it's going to do the same thing.We'll add a little hover effect onto these. It's going to be very CSS heavy. We'll do a little bit of JavaScript at the end for the hover effects, but lots of CSS in this project. Split Landing Page