Considerations when making an actual site.
Find websites that relate to the topic you’re interested in.
Spend the afternoon making loose sketches for your portfolio site. Your sketches should include the core content of your site and be influenced by research of existing sites. Be prepared to share your results.
We’ll walk down the river to visit Schoolyard, a web design and development company that specializes in websites for high schools. We’ll meet with owner Jason Pamental @jpamental to see and hear how they go from sketch to code. They’ve moved over to Drupal to manage their content.
We’ll be eating lunch with Jason, too.
Choose one of the Scandinavian countries (link to other countries at the bottom) and construct its flag in two ways: using absolute positioning and using floated divs. Apply the links to both from one post assigned to assignment 6. The size of the flag is up to you.
Design a button (use input, paragraph or list item for the HTML element) to encourage someone to download an image that sits above the button. In other words, pair an image with a download button. This is an opportunity to apply the css3 properties of a block element: border, border-radius, box-shadow, etc. Take a look at some of the links below to see how others are dong this and how they’re coding it, too.
Make a post linking to your creation. Categorize it as “Assignment 5“.
Using the examples below as inspiration, create a horizontal nav bar that can replace a site you like or could work for your own portfolio site. Consider pseudo classes, anchor states and the box properties. Make use of the Web Inspector to see what other sites are doing. Place your results in a new post on this site in category assignment 4.
Using Frank Stella, Josef Albers and Karel Martens as inspiration, create a page of web box art. Keep the principles of classes, inheritance and float in top of mind. Experiment wildly in code (not in your sketchbook), starting a new html file if one breaks or seems at a stopping point. Add a post with the category assignment 3 that links to 1 or 2 finished pieces. We’ll look at aesthetics and your style sheets as a class first thing tomorrow morning.
Create 5 different versions of your HTML from exercise 1. Make an internal stylesheet and duplicate your HTML document 5 times. The emphasis on this exercise is to get you used to CSS syntax and to get you accustomed to looking up properties. You may have aesthetic ideas for the content, or you may apply properties and see how the page reacts. Either is fine. Try to create 5 very different solutions given the presentation CSS we have reviewed so far.
Please FTP your finished html files to a folder called “assignment2” within your students directory and link to them from a post that you create on the class site. Be sure to assign the category “Assignment 2” to your post so it will show up alongside your classmates.
Create a new html document with TextWrangler. Save it in a folder on your computer as assignment1.html
Write the HTML for an article about the history of HTML markup by Jeremy Keith. You do not need to hyperlink every link. But do apply at least one example of every type of tag.
Add an image or a logo at the top of your document. Please FTP your finished html file to the /students/yourname/assignment1 directory and link to it from a post that you create here on the class site. Be sure to assign the category assignment 1 to your post so it will show up alongside your classmates.
Remember you can view source on Web pages or choose the “Web Inspector” from your browser if you need help.
Login using the same password as FTP and make a test post and assign it to the “Setup” category.
Add a Gravatar with the same email address on this site and so we can recognize you on the website. You may use something other than a self-portrait if you like.
Create a login at http://en.gravatar.com/ and upload an image.
In order to provide context to where we are now, I will present my work starting from 1995 until today.