Objective
To learn to web development techniques by example. To learn CSS layout techniques by recreating this web site.
Discussion
Cargo Collective offers free starter portfolio web sites "by invitation." Cargo web portfolios are hosted in the cloud and come with many pre-designed templates that can be modified with custom CSS. But to use a custom URL (i.e. "yourname.com"), you have to upgrade your account for $99 per year (plus your domain registration fee, about $10 per year or less via namecheap.com).
Benefits of using Cargo include access to a robust content management system (CMS), access to well-designed templates and free cloud storage with no need to contract with a web hosting service.
Disadvantages of using Cargo include cost ($76 vs. $19 per year) and limited customization of templates.
Tip: If you customize any CSS on Cargo, save a copy of the code before you choose another template design. If you revert back to the original template later, all your customizations will be lost unless you have a back-up of your customized code.
Procedure
Prepping for the exercise
- download starter files
- examine downloaded files
- examine sample web site
- browse to cargocollective.com
- login as student (pw = •••••••)
- go to admin (upper right corner)
- read support FAQs
Setting up the web site
- go to admin (click upper right corner or SHIFT+A)
- go to settings > display options
• upload header and favicon
• thumbnail = 300x200
• turn on the following options:
• modify slide show text nav: "previous | next"
- go to settings > account details
• add tags and SEO keywords
Setting up the content
- go to admin > project list (click upper right corner or SHIFT+A)
- turn off "example project"
- add new page "Contact"
- upload new image "paul.jpg"
- add content from "content.html" (code view)
- edit "About...": add content from "about.html" (code view), shorten title
- add new projects (turn on):
• New
• Logos
• Illustrations
• Print
• Web
• Motion
- edit "New" project: upload images from "630x450/new" folder, make slide show, add captions from "630x450/new/captions.html" (code view)
- upload thumb image from "300x200" folder
- repeat with other projects
Customizing the CSS
- open "cargo.css"
- go to inspector (RMB upper right corner or SHIFT+I)
- click "New": replace with appropriate CSS from "cargo.css"
- repeat with "About", thumbnail links, etc (see comments for tips)
Grading
- generate an invite (admin > settings > membership invites)
- create your own cargo account and upload your portfolio images
- create a link from your process page to your published cargo web site