Today’s goals:
- Self-assess first quarter progress in class for grade
- Use cool CSS3 features to make a nice-looking photo gallery
Today’s featured website:
First quarter self-assessment:
- Sample rubric
- Your own rubric- email me at agoldsberry@gmail.com & I’ll respond with your link.
CSS3 photo gallery
- This is what you will make! Roll your mouse over the photos to see what happens.
- Tutorial link (start where it says body and #container; skip link sourcing)
- You will follow the tutorial. But first, set up a new page in Notepad++ and download the images:
- Remember, you need opening and closing tags for html, head, title, and body. Look at your other webpages for help.
- Images: click on the link, then right click on the image and save it to your own computer. You might want to make a separate folder just for this project. You could also just use the image links as your image source and you don’t have to download anything; your choice.
- If you’re stuck: check out this starter code or look at the demo and view the code
- Make sure to change the img src to your actual image name (don’t need images/ unless you put your images in a separate folder). Also, please be sure to change the alt tag to the correct description of your image.
- Finally, here is the link for photos 1, 2, 3, 4, 5: http://www.flickr.com/photos/claudio_ar/. Replace the # in your link code with that link.
- Here is the link for photo 6: https://www.flickr.com/photos/galego/3131005845/
- YOU MUST CLOSE THE LINKS AROUND YOUR IMAGES YOURSELF! Don’t forget to add the closing link tag (an a with a slash in front of it in pointy brackets) after the image name.