Directions:

The purpose of this portfolio is to showcase your web design skills. Creating a portfolio similar to the one made by ARC students will take time. The good thing is that you already have the skills to make each section.

Each image below represents one requirement for this online portfolio. Click on each image to be taken to the requirements. Everything in this template should be your own work. Avoid templates and create everything from scratch. Use only text and images that you create.

ARC Portfolio Index Page & Navigation Bar

Create a folder called "arc_port" inside your website folder. ALL ARC Portfolio work will be saved in this folder.

In Dreamweaver, create a new page titled index.html. This will be your temporary ARC Portfolio Navigation page. [IF you already have an index.html page, you can use it]

copy the below code into the <body> section

<h1>ARC Portfolio - YOUR NAME</h1>
<ul>
	<li><a href="tech_1.html">Tech 1</a></li>
	<li><a href="tech_2.html">Tech 2</a></li>
	<li><a href="tech_3.html">Tech 3</a></li>
	<li><a href="tech_4.html">Tech 4</a></li>
</ul>

This is a temporary page. We will replace it later in the unit with a much better index.html

Back to Nav Bar

Tech Assignment #1

In Dreamweaver, setup your site. Create a new page titled "tech_1.html" inside the arc_port folder

Extra Mile Ideas

  1. Go to the head of the document and use your name as the title
  2. Put your name as the metadata author contect and the appropriate description content.
  3. In CSS, change the background color & font color
  4. Add a READABLE Google font
  5. Add a <header> & <section> that is 80-90% width and centered on the screen (margins at auto) - the outline should look like THIS
  6. In the <section>, add a paragraph synopsis of yourself and why you're in this class
  7. You can make any other acceptable changes as long as you keep the above requirements.
    • pictures, layout, gradients, transformations, etc.
  8. Make sure your ARC Portfolio Navigation Bar (on index.html) links to this page BEFORE you upload.
  9. Use the syncronize button to upload changed files.
  10. Disconnect from remote site and check your work on teacherweaver.com

Back to Nav Bar

Tech Assignment #2

In Dreamweaver, setup your site. Create a new page titled "tech_2.html"

Extra Mile Ideas

  1. In CSS, change the background color and the font color - Use a color generator to pick complementary colors that are readable.
  2. In the head, create a title, and metadata for search engines using a description and author
  3. Create the basic html structure with a <header> & <section>
  4. In the <header>, create a vertically and horizontally center aligned Header <h1> with your full name.
    • Warning: make all style changes in CSS and NOT in html
    • The outline should look like THIS
  5. Create a justified aligned paragraph describing your favorite website:
    • what it is
    • why you like it
    • what you think of the overall design and functionality of the site-what do you love, what would you change
  6. Underneath that paragraph, make 2 links: one to teacherweaver.com, and one to your tech1.html
  7. Use CSS to change all the link colors, remove underline, background color, and stylize in 1 other way (link, visitied, hover, and active)
  8. Change the font of the header text and the section text with two distinct fonts from Google Fonts or Adobe Edge Fonts
  9. Make sure your ARC Portfolio Navigation Bar links to this page & all other pages link
  10. Use the syncronize button to upload changed files.
  11. Disconnect from remote site and check your work on teacherweaver.com

Back to Nav Bar

Tech Assignment #3

In Dreamweaver, setup your site. First, take your tech_2.html page and save a copy as "tech_3.html" within the same folder. HERE is a video explaining the video.

Extra Mile Ideas

  1. At the top of the page (right below <body>) insert a CSS navigation bar with the following requirements:
    • 4 links: teacherweaver.com, your main index.html page, your tech_2.html page, and tech_1.html
    • Put the links in <nav> tag
    • Make the navigation bar horizontal - use THIS website to make it look right
    • Change the CSS for all Pseudo-classes links - like THIS
    • Each button should have a "rollover" or hover effect that changes the background and text color
    • apply a 2 second transition-duration to each rollover effect- review HERE
  2. Create a new folder called "pix" inside the arc_port folder
  3. Put ANY and ALL images you plan on using in this folder. Pictures should have similar theme.
  4. Underneath your header, add a photo of yourself inside a <aside>.
    • Weaver can take your picture if you need a digital copy
  5. In GIMP, resize the image to be NO MORE THAN 400 pixels wide (don't make it too small)
  6. Float the image on the page with CSS so text wraps around it.
  7. Using GIMP, create small "image buttons" that will be linked to teacherweaver.com & your tech_1.html
  8. Replace your 2 original text links with image button links.
    • You can also create images for this at places like dabuttonfactory.com or other button making sites.
    • Make sure image button links are positioned in an attractive way that matches your color scheme
    • [if you have time, put a scale on these images so they expand when rolled over]
  9. Use a class to apply a scale transform (details HERE) to increate your 2 image buttons to 110-130% when hovered over.
  10. The outline should look like THIS
  11. Save and preview in browser before you upload
  12. Make sure your ARC Portfolio Navigation Bar links to this page
  13. Use the syncronize button to upload changed files.
  14. Disconnect from remote site and check your work on teacherweaver.com

Back to Nav Bar

Tech Assignment #4

In Dreamweaver, setup your site. Create a new page titled "tech_4.html". HERE is a video to explain this project.

Extra Mile Ideas

  1. <title> the page the same as this assignment, "Tech Assingment #4"
  2. Add appropriate metadata in head
  3. Create a <header>, <section>, & 2 <article> in the <section> that are centered and 80 to 90% width.
  4. In the first <article> add the words "Table Version" as a <h1> aligned to the center
  5. In the first <article>, create a table:
    • 500 pixels high and 750 pixels wide
    • 3 horizontal and 3 vertical cells
    • 3 pixel border
    • click HERE for help
  6. Center the table in the middle of the page
  7. Give the table the id "color_table_1".
  8. Merge any 2 cells and give the background of that merged cell a different color
  9. In another cell, create a link to your favorite website and give that cell a different background color
  10. In a third cell, insert a small (no more than 200x300 pixel) picture.
    • Center the picture (hint: select the cell to center, not just the photo).
  11. You may make other changes but the above requirements must be met.
  12. Results should roughly look like this...but NOT as an image map--must be a true table.
  13. In between the 2 <article> insert a horizontal ruler.
  14. In the second <article> add the words "CSS DIV Version" as a Header 1 aligned to the center
  15. In that second <article>, recreate the table using ONLY divs.
    • Hint: change the position of the aside to relative so all the div inside it stay within that container
  16. Your goal is to make it look EXACTLY like the above table but only using Divs and CSS
  17. Click HERE for help. If you need more help, use THIS website or THIS
  18. Make sure your ARC Portfolio Navigation Bar links to this page
  19. Use the syncronize button to upload changed files.
  20. Disconnect from remote site and check your work on teacherweaver.com

Back to Nav Bar

Design Assignment #1

In Dreamweaver, setup your site.

Watch this INTRODUCTION VIDEO to help clarify the assignment.

Create a new page titled "design_1.html" (this is a temporary name). On this page, you will create a NEW navigation bar. Choose whatever colors and links you want. You might want to consider how you want your 10 links to look before you start coding. You can also find information on how to make CSS nav bars HERE, HERE, HERE

  1. Make sure you have all previous assignments finished/saved as tech_1.html to tech_4.html
  2. Make sure your portfolio assignments are within folders called "portfolio1" and "portfolio2"
  3. Create proper head info: title, metadata keywords, and description
  4. Within design_1.html, create a center-aligned <header> that contains a banner with your logo or name (must be image and text together)
  5. Under the banner, create a rollover navigation bar <nav> with links to each of your 11 finished & unfinished assignments:
      6. <a href="tech_1.html">Tech 1</a>
<a href="tech_2.html">Tech 2</a>
<a href="tech_3.html">Tech 3</a>
<a href="tech_4.html">Tech 4</a>
<a href="design_1.html">Design 1</a>
<a href="design_2.html">Design 2</a>
<a href="design_3.html">Design 3</a>
<a href="design_4.html">Design 4</a>
<a href="final.html">Final Project</a>
<a href="portfolio1/index.html">People of Inspiration</a>
<a href="portfolio2/index.html">My Vanity Page</a>
  6. You must use at least 3 colors (in any combination of block and/or text color)
  7. Use CSS to change the nav/links:
    • background(s)
    • font - [color and style]
    • link and link hover colors
    • remove underline for links
  8. Add hover properties that are subtle and appropriate.
  9. Consider how the color combinations and sizes of fonts/cells as well as images or textures will enhance the design
  10. The entirely of the grade for this assignment will be based upon your ability to create a unique design. You should use text, css, images and your imagination to create a page that shows creativity, your personality, and demonstrates a competency of technical requirements. (Grade: 20% technical + 80% design elements)
  11. Preview in browser to make sure it works properly and all links function.
  12. Save the file as design_1.html
  13. RESAVE the file as "index.html" inside the "arc_port" folder. This will REPLACE that old navigation page with this new one. YES, you will have 2 files with the exact same content; index.html and design_1.html [it's okay]
  14. Make sure your ARC Portfolio Navigation Bar links to this page
  15. Use the syncronize button to upload changed files.
  16. Disconnect from remote site and check your work on teacherweaver.com

Back to Nav Bar

Design Assignment #2 - Image Gallery

Watch THIS video for an introduction to this assignment. In Dreamweaver, setup your site. Create a new page titled "design_2.html". In this assignment, you will design a thumbnail image gallery. The layout and look of the page is mostly up to you. Your job will to make it look as professional as possible. You can also transform the images so they look like the images laid out by hand. When you hover, they should change in some way.  You can use your own images or stock images from sites like Creative Commons, Pixabay or Unsplash. DO NOT use images that are copyrighted.

  1. Pick a color scheme and pictures that connect into a single theme.
  2. Set up your basic HMTL with an internal style sheet.
  3. In the <body> create a <header> and <section>
  4. Set the <header> 100% width. The height is up to you. Place a picture as the background-image that is set at 100% width. Add a <h1> title centered vertically and horizontally.
  5. Set the <section> a centered square (same width & height). Set the position as relative.
  6. Within the <section> add at least 9 images. Give the images a class that makes them the same size and border (similar look). Give them a second class that changes the position to absolute and transforms/skews them all in different ways. Change the position of each image so they look laid out within the <section>
  7. When each image is hovered, they should do SOMETHING (straighten, enlarge, opacity change, etc.)
  8. Change the background color and look and overall look of the page.

Back to Nav Bar

Design Assignment #3 - the Resume

Design3.html will be a business identity page, a combination of an About Me and a Resume, that you will create for your dream job. For example, if you want to be an interior designer, create a web page that talks about your credentials and your design firm's mission statement. Want to be a pastry chef? Write a webpage about the skills you learned from culinary school and specialties of your bakery.

The design for this assignment will focus on color and the power of fonts. What fonts you use for a page, their sizes, and the color combinations you use will influence the design and feel of the company/entity behind the webpage to an incredible degree. Use 2 different professional fonts, and altering size and styles of these fonts as necessary and css3 styles. Use at least 3 colors on your page (fonts, backgrounds) and make sure to consider the business identity when deciding colors. Consider complimentary, analogous, tertiary color schemes, but also think about the cultural color references...for example, hot pink would be great for a cupcake shop, but disastrous for a bank...

Other things to look for:

  1. Keep it simple. Web pages should be short, sweet, and truthful so keep your paragraphs short, use complete sentences, and be aware of the "white space"
  2. Have proper metadata and title--if you don't add these, a search engine will never show your page.
  3. If you use any images, buttons, or textures, make sure that you add them to your image folder first. USe only copyright free images. Don't steal others work.
  4. And last...pay attention to layout! This is a web page! It doesn't have to follow one long page structure like a sheet of paper. Use your style sheet to define the size of headers as well as different text and text links, and consider breaking up the text into different areas to keep it visually interesting.
  5. You should consider using DescritionLists, Text Decorations, etc.
  6. Look at several resume templates for ideas on style, layout, and content.
  7. The file should be called "design_3.html" and be linked properly from your index before uploading

Back to Nav Bar

Design Assignment #4 - the REVAMP

For this assignment, you will take one of your previous labs and change it up [not one of your porfolio or GIMP labs]. Go through your previous assignments an pick one that you think is impressive. Keep the basic layout format but change up the major components (images, text, colors, etc). It should be very different looking from the original assignment.

Back to Nav Bar

Final Project Requirements

Overview: Design and build a website for a small business. It could be your own business, or it could be for a friend, or you could make up a fictional business. The website should custom designed and have four to five pages that are all linked with consistent navigation. It should have features and imagery that is consistent with the needs of the business.

Your design should be appropriate for a specific set of users within the context of something those users are likely to use or enjoy using.

Samples

Meet The Following Requirements:

Design: Think about who the site is for. Who are the customers of this website and for this business and what is going to appeal to them? Think about the information these people need and make sure it is easy to find.

Development: Use what you have learned in class and make clean, semantic HTML and CSS that would be easy to untangle by someone else, or if you came back to the project in a year. Keep your coding neat and consistent.

File Management: Keep all your files organized and in the proper folders. Follow naming conventions, and make sure images have been optimized for the web.

Grading Rubric - 20% of Final Grade

Criteria Excellent Moderate Poor
Formal Elements of Design — Total: 40 points
Hierarchy Demonstrates hierarchy through clear use of headers, sub-headers and page content, styled for clarity. 
10 Points		 Some hierarchy present, but could be stronger. No more than one missing element. 
5 Points		 Weak hierarchy or inappropriate use of headers or styling of headers. 
0 Points
Typography Uses type appropriately and creatively in a way that enhances the overall communication of the page and helps unify the design. 
10 Points		 Uses type appropriately but could be applied in a more sophisticated way. 
5 Points		 Type is untreated or unsophisticated and lowers the quality of the design. 
0 Points
Formal Design Elements: Color, Alignment, Spacing & Balance Sophisticated use of formal elements to communicate. 
10 Points		 Minor improvments could be made with formal elements of design, including color, alignment, spacing or balance. 
5 Points		 Inappropriate use of formal elements make the design confusing or unsophisticated. 
0 Points
Graphics/Imagery Unique imagery adds appropriately to the tone. 
10 Points		 Imagery could use minor improvements. 
5 Points		 Imagery needs major improvements or is not properly sourced. 
0 Points
Coding HTML & CSS — Total: 40 points
Semantic HTML Proper use of HTML5 tags with zero errors. 
10 Points		 No more than one error or improperly used HTML tag. 
5 Points		 Mulitple HTML errors or improper use of tags. 
0 Points
HTML Formatting Properly indented code for easy reading. 
10 Points		 Code indenting could use minor improvements. 
5 Points		 Code is sloppy. 
0 Points
CSS CSS is well formed and does not contain any errors. No inline CSS. 
10 Points		 No more than one CSS error. 
5 Points		 Multiple CSS errors 
0 Points
CSS Efficiency & Organization CSS rules are efficient and organized on the stylesheet with appropriate commenting. 
10 Points		 Stylesheet organization could use small improvements. 
5 Points		 Stylesheet messy and disorganized. 
0 Points
Technical — Total: 20 points
Linked Files All required files are included and properly named and linked 
10 Points		 No more than one error linking files. 
5 Points		 More than one linked file does not load properly. 
0 Points
Optimized Images All images are properly sized and optimized for the web. 
10 Points		 No more than one image needs to be optimized. 
5 Points		 Multiple images have not been properly optimized or sized. 
0 Points

 

Back to Nav Bar