Assignment 08.11: Portfolio Site


The goal of this assign­ment is to cre­ate a port­fo­lio web site to use as a por­tion of the over­all stu­dent portfolio.


The objec­tive of this assign­ment is to cre­ate a port­fo­lio piece that demon­strates the inter­me­di­ate use of HTML, CSS, CMS and then post it online for pub­lic usage.



Cre­ate a port­fo­lio web site using Word­Press as the foun­da­tion of a CMS. that show­cases stu­dent projects, pro­vides stu­dent con­tact infor­ma­tion, and presents a stu­dent resume to prospec­tive employ­ers. The sam­ple site must include a min­i­mum of one photo, video and web­page (site). The site can have the con­tent gen­er­ated via another CMS or third-party mech­a­nism (ie Behance, Vimeo, etc).

Part One

Col­lect port­fo­lio pieces and repro­duce them in dig­i­tal for­mat. High res­o­lu­tion PDF files are the best solu­tion, which allows a high qual­ity if desired, but also the abil­ity to cre­ate lo-res­o­lu­tion web images. Some work may require pho­tog­ra­phy. Each project should have a sim­ple two to three (2−3) sen­tence descrip­tion of the date, size, media, and para­me­ters of the project. This descrip­tion should rein­force the con­cep­tual and intan­gi­ble attrib­utes or influ­ences that may not be obvi­ous from the image (ie, type of paper, client restric­tions, photo credits). 

For at least one port­fo­lio entry, repro­duce and doc­u­ment the process used to cre­ate that par­tic­u­lar piece. This “process doc­u­men­ta­tion” should include sketches, wire­frames, mock­ups, dig­i­tal comps, ver­sions and/or fin­ished product/experience (updated 12.2.2022). If you do not already have a resume, write one using the links above. Using a pre-designed logo is optional, but not nec­es­sary. You may also revise your logo or cre­ate a sim­ple logotype.

While not explic­itly required, your non-web mate­ri­als are nec­es­sary to com­plete the site. Type selec­tions should coor­di­nate the site and resume. Color is per­mit­ted on the resume, but should not inter­fere with usabil­ity in black and white in case it is pho­to­copied. You should also con­sider cre­at­ing a printed “leave behind” that also uses coor­di­nat­ing graph­ics. This leave behind may also incor­po­rate any­thing appro­pri­ate for self pro­mo­tion. It is best to cre­ate dupli­cates of each project in mul­ti­ple for­mats. Doing so allows the most authen­tic for­mat, yet increases vis­i­bil­ity by allow­ing each poten­tial reviewer use the for­mat with which they are most comfortable.

Part Two

Select a Word­Press theme page, and cre­ate a port­fo­lio page (includ­ing nec­es­sary images and posts), and a resume page. Look for themes that are struc­turally sound for the lay­out you wish to use.

Cre­ate a dig­i­tal mockup or sketches of the pages listed above using the selected, and based on the WP theme cho­sen. Make sure to prop­erly cite your sources as described by the terms and con­di­tions of the source files. All cur­rent or future media should incor­po­rate sim­i­lar sizes color, type­faces, etc of this site but should not look iden­ti­cal. Estab­lish col­ors, sizes, impor­tant nota­tions, etc that you can use to mod­ify indi­vid­ual page ele­ments and style sheets.

Sub­mit JPG or PDF of dig­i­tal mockup based on screen shot show­ing what needs edit­ing (updated for use after 12.01.2022).

Part Three

Fin­ish build­ing your site. Test its oper­a­tion in as many dif­fer­ent plat­forms and browsers as pos­si­ble. Upload a place­holder file to acti­vate grad­ing, and leave link­able address in com­ments of appro­pri­ate D2L dropbox.

Site is a work in progress. Updates will con­tinue in the future.


The fol­low­ing rubric posted on D2L will deter­mine assign­ment score: Assign­ment 08.11: Port­fo­lio Site


Word­Press, CSS, HTML, plan­ning, con­vert­ing files, file hier­ar­chy, struc­ture, nam­ing conventions


Paper, pen­cil, server space, Word­Press instal­la­tion, Adobe XD, Pho­to­shop and Dreamweaver, pho­tog­ra­phy source, USB drive


As defined by cor­re­spond­ing cal­en­dar item, drop­box, dis­cus­sion or con­tent topic description.