Assignments
05: Advanced CSS
Solution
Prompt:
Points: 15
Recreate six web pages using different advanced CSS properties including flexbox, transitions and animations.
Guidelines:
- Create a folder called 05-advanced-css in your assignments folder in your portfolio website
- Inside that folder, create the following folders, html files and css files:
- gallery.html (create an image gallery using <img> tags)
- flex-gallery.html (create a gallery using <img> tags inside a div container with flexbox)
- flex-menu.html (create a responsive <nav> menu using flexbox)
- smartphone.html (create a responsive “phone” with rows of apps using flexbox)
- loading-bar.html (create your interpretation of a loading bar using css animations)
- petting-zoo.html (create multiple objects with looping animations)
- css
- gallery.css
- flex-gallery.css
- flex-menu.css
- smartphone.css
- loading-bar.css
- petting-zoo.css
- images (put images in this folder you plan to use in any of your web pages. You can drag and drop images directly into this folder in VS Code)
- Do your best to recreate the screen captures below. Feel free to use whatever images, colors or styles you’d like. Your web pages don’t have to function exactly like the animated examples. (click each image to be brought to a page to see them animating)
- Make sure to link to all these pages on your assignments page so that I can look at them.
Click on an image to load a video of it moving. Your page doesn’t have to replicate exactly what is shown in the videos
Images should wrap as the page is resized. Hint: put <img> tags inside of a single <div>
Images should wrap and be spaced evenly in a <div>. Hint:The <div> that holds the <img> tags should be flexed, and flex-wrap set to wrap.
Menu items should wrap as the screen is resized. Hint: use a <nav> section to contain your links (which should be <a> tags
A “smartphone” that contains multiple rows of icons. Hint: the outer <div> container should be flexed in column mode.
use css animations to create your interpretation of a loading bar (it can look and behave however you want! Hint: set animation-fill-mode to forwards so your animation finishes without resetting
Create 3 or more objects (images, divs, text, etc.) that animate in different sequences on a loop Hint: you can use the same animation keyframes, just change how long each of the three animations takes to make it look like 3 different animations!
Tips for getting started:
- For help linking your files in your menu, check out the file-linking video in the catch-up guide
- Remember, if you can't figure something out, try to phrase what you're trying to figure out in human language, then Google it.
- Post questions or DM me in Slack if you need help!
How to submit:
Commit and Push your changes to GitHub using the GitHub Desktop app and paste the link to your Assignments page in Assignment 05 in Canvas. Make sure the link you post is the link to the website, NOT the link to your Live Server version hosted locally:
- http://127.0.0.1:5500/docs/assignments (this is your localhost link. It’s not accessible online, so don't share this to Canvas)
- https://username.github.io/your-repo/assignments (your home page link should look something like this! Share this one to the Canvas assignment.)
How to receive full credit:
- The link you submit should take me to your Assignments. MAKE SURE TO TEST YOUR LINK BEFORE SUBMITTING.
- Your assignments page should have 6 new links for this assignment
- Each link should go to the correct page
- Your pages should look similar to the screen captures posted, but if they don’t 100% accurately reflect the way my examples move, that’s okay!
- Here's a screenshot of my assignments page:
