Today (and tomorrow’s) goals:
- Review CSS you’ve learned by completing the Valentine’s Day Design Challenge
Today’s featured website:
- http://instanerd.me/– Learn something new right now! Or maybe try this app.
For Inspiration
- Check out- and vote for- designs created by students for Google’s Doodles
- www.webdesign-inspiration.com
- www.siteinspire.com
- www.thebestdesigns.com
Valentine’s Day Design Challenge
- Challenge: Can you make a one page webpage that looks like your card and/or piece of candy?
- Steps
- Pick a card and piece of candy.
- Really look at them in detail. Observe the design, colors, characters, text, etc.
- Review the inspiration above to get some ideas flowing.
- Sketch out by hand with pen/pencil/marker and paper an outline for your one page webpage and then show me.
- Find colors for your page that are similar to your card and/or candy. See the color resources below to help.
- Find images for your page that are similar to your card and/or candy. See the image resources below.
- Use this starter code.
- Start making your page. When you think you’re done, get a second opinion! Then revise.
- Resources
- Code for layouts, style sheets: All of the pages you’ve created in Notepad++ (use these for reference and/or to copy code)
- Colors:
- Animate CSS– add the style sheet to your head section (see Tuesday’s code) and then check out the different options here. Remember to add the animation as a class.
- Fonts: Google Fonts- go to the site or here for the directions
- Images: https://unsplash.com/, https://www.pexels.com/, or Bing.com (do image search, then search for free to share and use)
- Font Awesome icons: go to the site or here for directions (make sure to change 4.4.0 to 4.5.0)
- CSS positioning: Check out this reference page
- CSS cheat sheet: CSS you need to know in one place
- Page menu: Code for vertical or horizontal menus
- More CSS help: By property