Creating a portfolio website Kristina Courtnage Bowman [email protected] Twitter: @kris_bowman.

Creating a portfolio website

Kristina Courtnage [email protected]

Twitter: @kris_bowman

Planning your portfolio• Who is the audience?• Do you want a static site or dynamic site?• How often will your content change?• Will you incorporate other aspects of your

digital identity like Twitter, Facebook or LinkedIn?

Kristina Courtnage Bowman [email protected] Twitter:@kris_bowman

Personal online identity and brand1. What am I trying to accomplish?2. What values or adjectives do I identify with?

(name 3) How will I stay true to these online?3. What are my professional goals and how will

my web portfolio and related social media help me reach these goals?


Building your online brand (3 C’s)• Content – Status updates, news, links, photos, video,

geolocation data• Contacts – Friends, followers, fans, connections

• Consistency– Commit to contributing to your blog, Twitter feed,

Facebook page every _______ (day, week, month)


Site Map for portfolio page

Home page: Introduction/photo

Resume Portfolio Contact References


Site Map for Sadie

Home page: Introduction/photo

Foster Siblings

Portfolio Contact References


Copydeck for Sadie

LinkedIn Search• People search• Company search (follow companies)• Job search• Answers search• Groups search


LinkedIn Apps• Reading List by Amazon• SlideShare Presentations• Lawyer Ratings• Portfolio Display• Real Estate Pro• Wordpress• Events


Tips for LinkedIn• Fill out profile completely so contacts can find

you more easily• Use a professional-looking photo (only enough

space for a headshot)• Have a clearly defined goal.• Send personal notes when making

connections.• Get recommendations before you need them.


Hosting your site• UW web publishing (Activate Dante account)

– https://uwnetid.washington.edu/manage– Transfer files using Secure FTP (

http://www.washington.edu/itconnect/security/tools/#sftp)– Also access files from

https://catalysttools.washington.edu/filemanager/– URL is http://students.washington.edu/uwnetid

• Wordpress (http://www.wordpress.com)• Google sites (http://sites.google.com)• Workspace (

https://catalysttools.washington.edu/workspace/getstarted)


https://uwnetid.washington.edu/manage

http://www.washington.edu/itconnect/security/tools/#sftp

https://catalysttools.washington.edu/filemanager/

http://students.washington.edu/uwnetid

http://www.wordpress.com/

http://sites.google.com/

https://catalysttools.washington.edu/workspace/getstarted

Wordpress• Themes• Custom headers• Static or dynamic• Widgets• Post vs. Page• Linking


Wordpress Settings• General settings– Tagline

• Reading Settings – Front page: Static page

• Discussions Settings– Require moderation

• Privacy Settings– Enable or disable search engines


Accessibility• Make images accessible to readers who use

screenreaders, who have images turned off• Makes easier for mobile devices• Alt tags for images• Don’t use fixed font that can’t be changed in browser• Use flexible layout• Make header tags descriptive• Follow conventions (Search, no ad-like images)• Try different browsers


URLs• File and folder names become part of the URL

- keep them short• Use lower case letters• Don’t use spaces


Web terminology• HTML (Hypertext Markup Language): Controls

content and some structure of site• CSS (Cascade Style Sheets): Define styles such

as font, size, colors, margins, etc. (exp. http://csszengarden.com)

• Tags: < > defines structure of content. When editing content, don’t change anything inside tags.

• JPG, GIF, PNG: Image types


http://csszengarden.com/

Other resourcesCatalyst Web publishing resources• http://www.washington.edu/lst/workshops/web

Basic terminology useful for Web design:• http://www.washington.edu/lst/workshops/resources/terms.html

Top 10 Web Design Mistakes:• http://www.useit.com/alertbox/9605.html

Guidelines for Link Design:• http://www.designbyfire.com/deye_web/alertbox.htm

Learn to code:• W3 Schools• Webmonkey


http://www.washington.edu/lst/workshops/web

http://www.washington.edu/lst/workshops/resources/terms.html

http://www.useit.com/alertbox/9605.html

http://www.designbyfire.com/deye_web/alertbox.htm

http://www.w3schools.com/

http://www.webmonkey.com/webmonkey/index.html

Creating a portfolio website Kristina Courtnage Bowman [email protected] Twitter: @kris_bowman.

Documents

Transcript of Creating a portfolio website Kristina Courtnage Bowman [email protected] Twitter: @kris_bowman.