Today’s Goals:
- Review CSS
- Start planning your first webpage project
Today’s Featured Site:
- http://snowflakes.barkleyus.com/– Make a fake snowflake online (thanks, Charlotte!)
CSS review game
First: let’s reflect on what we’ve learned with CSS
Do this in pairs at your table and then we’ll review together as a class:
- Step 1– copy this code into Notepad++ and start a new page (cssflashcards.html)
- Step 2– launch page in browser and begin playing!
- Important: “cards” don’t stay in place after you refresh page and you won’t know if you’re right until we review it; you’re not prevented from dragging the wrong answer.
- JavaScript and HTML5 make the drag and drop function possible. The cards are from http://codecards.io/
Planning your first webpage
- You are going to create a couple of webpages that link to each other (a home page and 1 sub-page). You can either create a webpage on a topic of your choice OR attempt to re-create an existing webpage that you really like (and you can try to make it look similar or different).
- Here are some examples from previous web design students: http://www.medfordpublicschools.org/MHS%20Web%20Design/Jenn/Jennswebsite.html http://www.medfordpublicschools.org/MHS%20Web%20Design/Lincoln/TEHG%20Website/ http://www.medfordpublicschools.org/MHS%20Web%20Design/Sam/Foodies/Foodies.html
- Step 1– come up with an idea today and let me know.
- Step 2a– begin to plan your site by sketching it out. This is includes the rough page layout (menu and sections), how many pages (2- a home page and a sub-page), and the content of each page. Do this on paper!
- Step 2b– decide if you want to use code from a previous project as a template (for example, the CSS3 photo gallery or the easy Thanksgiving recipes page). If you do, you will still have to add a menu and create a sub-page in addition to the home page.