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
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!