art152 : Web Design Labs & Projects

Assignments

Labs and Projects

There will be 5 labs (0-4) and 2 website projects. I recommend that you backup all of your work on a flash drive and/or a cloud storage site such as Google Drive. Use a compressed folder to do this. I recommend you save your work in 2 methods, possibly including saving your work to a flash drive and emailing a zipped version of your coursework root folder to yourself so that you always have a backup. Data failure is not an excuse for late or missing assignments.

IMPORTANT

Follow the directions for each assignment AND upload your completed work to the ADA server during and at the end of each work session. Description of the method for FTP to the ADA server will be given by third class meeting.

CODE TUTORIALS

You will complete tutorials at Codecademy.com and at freecodecamp.org. You will create a screenshot of each list of completed lessons and post it in the discussion board for that week.

EXTRA CREDIT: Due December 10 (Finals Week)

Several in-class exercises (favicon, gradients, media, animated gif) will give you extra credit if you do these things:

  1. Add a descriptive - and short - one word is best - link to each extra credit page in the global navigation on your home page.
  2. Test the link functionality.
  3. Upload to your website on the server.
  4. Check your work in the browser at your url.

lab0 - Root Directory

In our first class, I will guide you to create a root folder structure for all of your course work during this semester. You will be building a website that will hold all of your labs and projects. (Find a diagram in the week 1 folder in Course Materials on Canvas)

  1. All web based coursework is contained in this one folder called yourname-art152-section number.
  2. This is your website root folder, your ROOT DIRECTORY.
  3. All folder and filenames will be lowercase with no spaces. -hyphens or _underscore is ok.
  4. Inside this folder you will create an index.html file and folders called img and css.
  5. We will create a template.html page from which all other html files will be created.
    Resource at FreeCodeCamp
  6. The index.html page - at the root level (meaning it is not inside any other folder) - is the homepage for your entire coursework and must contain links to all other pages. We will build these pages and links as we go.
  7. On index.html put your name, course section, instructor's name and a photo of yourself.
  8. Also create a folder called lab1 (no spaces and all lowercase) and additional folders for labs 2 and 4. ( Lab 3 is a horizontal navigation that will be on several pages. We don't need a folder for it.) Each lab folder will have an index.html file inside.
  9. Also create folders called project1 and project2 (no spaces and all lowercase)
  10. Inside each project folder create an index.html file and folders called img and css.
  11. The index.html file is the page the browser looks for when you link into a new folder. It will be the name of the first page/home page for each lab and project folder you create.

Requirements

  • All folder and filenames will be
    lowercase with no spaces
    -hyphen or _underscore is ok
  • html5 elements
  • div tags kept to a minimum
  • Save on a flash drive and cloud storage.

lab1 - Making the Invisible Visible

Mark up 1 poem, 1 recipe, 1 article in HTML5, one per page. The lab should have an intro page (index.html) and 3 more pages. All pages should be accessible via a persistent local navigation.
Place global navigation on Lab 1 index.
Copy and paste the CSS below in the <head> of the article, poem and recipe pages to show the position and overlap of elements.
The <style> element is an internal stylesheet.

  • <style>
    • header, article, nav, aside, figure, figcaption, section, footer, ul, li, p, h1, h2, h3 {
      • display: block;
      • outline: 2px solid red;
      • background: rgba(220, 150, 150, .2);
      • margin: 3px;
      • padding: 3px;
    • }
  • </style>

The Poem is marked up by using a p element for each stanza. Minimum of 3 stanzas. Use a line break <br> at the end of each line, but not on the last line. Your closing p tag will do that.

Requirements

  • Markup in HTML5 only
  • Use HTML5 template as outlined in the FreeCodeCamp article
  • internal stylesheets - style element copied from the left
  • div tags kept to a minimum
  • 1 poem with at least three stanzas
  • 1 recipe with an image, at least 4 ingredients (unordered list) and numbered instructions (ordered list) on how to prepare.
  • 1 news story (article) with 1 image marked up as a figure with figcaption and at least 4 h tagged subheads within the text that meaningfully describe the content. Use existing sub-heads, if present, or create your own.
  • Include your source in a footer on each page, make it a functioning link using target="_blank" to open in new tab.

Lab 2: Gallery of 3 Images

Uses large: 1000px, medium: 150px and small: 50px versions of each of 3 images.
All html pages are inside the lab2 folder.
The index.html main gallery page contains three medium thumbnails 150 px cropped to a square, each image has an alt attribute description.
Each 150px thumbnail links to a page on which you place the large version of the image 1000px wide and under it, four tiny thumbnails 50px square which are linked to the other large image pages and the main gallery page. 3 are details of the large image. One has a 'G' and links to the main gallery page, index.html.
The large images use the figure and figcaption elements with a caption and include alt text.
The tiny thumbnails use the a href tags around the img tag, to create hyperlinks. All three are in a single nav element. These are the local navigation for the gallery.

diagram of page content for Lab 2
  • Markup in HTML5 only
  • div tags kept to a minimum
  • Use figure and figcaption elements for the large image pages
  • All images have alt attributes with clear descriptions
  • Only index.html needs a link to your main home page.

Lab 3: PERSISTENT HORIZONTAL NAV BAR

Styled horizontal nav bar on your main homepage, index.html at the root level, and the index pages for Labs 1 & 2.

Here's an example. Make sure that you use different colors for each state of the a element. You can use the color picker in Chrome or another web tool for color. Please use rgb for the CSS for this lab. Make an external stylesheet for these nav styles and apply it to your main homepage, and the index pages for Labs 1 & 2.

  • Nav links in an unordered list
  • Include links to all lab and project index pages and extra credit pages.
    Check that all links work.
  • Separate external CSS stylesheet - nav.css
  • All text color/background-color combos must pass the color checker
  • Markup using semantic HTML5 elements
  • div tags kept to a minimum
  • Use no styles that change the size/position of the link

Lab 4: Grid - Everything in it's Place

CSS text stylesheet, responsive grid system

  • index.html:
    Using the zurb foundation xy grid, re-create the layout of this copy of the homepage of the New Yorker magazine.
  • Follow the steps as shown in the WEEK 7 class video.
  • First draw a simple diagram of the page, indicating each row and appropriate the zurb column widths. Then build the HTML, with zurb classes to structure the grid. Grab the content of the page. Choose a hierarchy of h elements for the different size headlines & bylines.
  • Create an external stylesheet called nyer.css, choose google webfonts and design styles for the page content to emulate this example of the New Yorker homepage, using it as a mockup.
  • Remember to style margins and padding.
  • Copy the global navigation on this index page and local navigation on all the Lab 4 pages.

  • lab4-2.html: Responsive images page. Create a page with images that change size at large, medium and small break points.
  • Markup using semantic HTML5 elements
  • Use Zurb Foundation 6 xy grid system
  • div tags kept to a minimum
  • Global nav on Lab 4 index & local nav on all Lab 4 pages.

Web Site Project 1: Artist/Designer Website

You will create a website about an artist. Your subject is assigned and you will find the name of your artist in a list on Canvas.

Build so that ALL contents of the site are contained within the project1 folder. Incude all images for the project in an img folder and all css stylesheets in a css folder, all inside the project1 folder.

Requirements:

Use these page names with the described content on them.

  1. index.html - Home page
  2. bio.html - Bio - at least 400 words. Correct spelling & grammar.
  3. gallery.html - Gallery - 5 to 9 images. 1 overview page with thumbnail details & each thumbnail linking to a page for each larger image or video with full caption. Caption includes title of artwork, date, and description. Use <figure> with <figcaption>
  4. sources.html - Bibliography with credits to all sources used and functioning links using target="_blank" for all external links.

  5. Use persistent global navigation on all main pages & local, contextual navigation in the gallery section.
  6. Create consistent branding, color use, and typography across all pages.
  7. 1 or 2 google webfonts
  8. Positioning - Use Zurb Foundation grid system.
  9. All code must be written by you. No templates, or copied code.
  10. Exception: You may use code that I've given you and/or code you used in the labs - but you MUST alter it for your specific purposes here.

Artist Subject Research

Create a separate folder called Project 1 Resources that is OUTSIDE of your coursework ROOT folder. Keep all images, sources files, text docs, etc. in here. Resize all images as needed and optimize.

Content of your sources.html page

Gather a minimum of four(4) reference sources. Include all sources: articles, images, sounds, youTube videos, ALL web urls, and any references to other media, such as books, magazines, newspapers, music recordings, that you have looked at or watched or read in this research process.

Text content for your bio.html page

Find and edit a 400-600 word biography of your subject. This can be put together from online sources, such as the artist’s website, Wikipedia, newspaper articles, etc. Read this over carefully, edit for clarity, and check spelling and grammar. Note: If you use Wikipedia as a source, you must remove all footnote indicators from your text. Then add subheads for most of the paragraphs, you can later code these with h tags when building your bio page.

DELIVERABLE

Submit a PDF with your name and your subject's name at the top.
Submit in the Project 1 Research discussion board.
Put the edited 400-600 word bio text next, with the minimum 4 sub-heads.
Add your list of reference sources below that. Include all reference sources visited, a minimum of 4. Have a description of the source, eg. artist website, what you found there, eg. images and bio, and the URL.

PROJECT 1 DUE DATES

  • Part 1.1: Artist subject research --- Week 7 --- March 5
  • Part 1.2: Sitemap ----------------------- Week 8 ---- March 12
  • Part 1.3: Wireframe & styletile --- Week 9 ---- March 19
  • Part 1.4: Completed Project on ADA server with working link from your main home page to Project 1 index page. ---------------------------- Week 11 ------ April 9
  • Semantic HTML5
  • One (1) External CSS stylesheet, linked to each page
  • Zurb foundation grid for responsive layout
  • Minimum one Google webfont
  • All pages validate without errors at w3c
  • Site must be functional on the server
  • Your site must have consistent navigation throughout.
  • All pages must have consistent code, look and feel: CSS.
  • All pages must use a single and shared css stylesheet.

Website Project 2: An Educational Long Scrolling page

A public service announcement (PSA), is a message in the public interest disseminated without charge, with the objective of raising awareness, changing public attitudes and behavior towards a social issue.

Choose a data-rich topic to research. Design and build a long-scrolling page that effectively conveys that information using primarily visual elements. In your research you will find data to support your PSA and choose how to visualize that information.

Requirements:

  1. index.html - PSA long-scrolling page.
  2. about.html - Put your concept statement here. Add an explaination about why you made these design choices. Correct spelling & grammar.
    In a bulleted list, describe three usability principles you used in your site.
    At bottom of page put your bibliography with credits to all sources used and functioning links using target="_blank" for all external links.
  3. Approximately 3-5 screen views, meaning your home page, index.html, must scroll down at least 3-5 page lengths.
  4. 3-5 content pieces (text, images, etc) per page/screen for 9-25 total. Content pieces are heading (h element), image or video, caption, or paragraph.
  5. Create consistent branding, color use, and typography across all pages.
  6. Persistent navigation (minimum: links to About page at top and return to top on last screen.)
  7. Positioning - Use Zurb Foundation grid system
  8. Design for mobile first
  9. All code must be written by you. No templates, or copied code.
  10. Exception: You may use code that I've given you and/or code you used in the labs - but you MUST alter it for your specific purposes here.

PROJECT 2 DUE DATES

  • Part 2.1: Concept Proposal ----- Week 12 ---- April 16
  • 100-200 words / Minimum of 4 research sources.
  • Describe your concept and your research to date.
  • Part 2.2: Project Development docs ------- Week 13 ---- April 23
  • Sketches -- Design for mobile first
  • Wireframes for mobile & desktop
  • Styletile
  • Part 2.3: Project 2 at 80% complete for Peer Reviews ----- Week 15 ----- May 7
  • Part 2.4: Final Project and Presentation due at start of class - Finals week ---- May 14
  • Completed Project on ADA server with working link from your main home page to
    Project 2 index page.
  • Semantic HTML5
  • Correct spelling & grammar
  • 1 linked external stylesheet
  • Zurb foundation grid for responsive layout
  • 1 or 2 google webfonts
  • All pages validate without errors at w3c
  • Site must be functional on the server
  • Your site must have persistent/consistent navigation throughout.
  • All pages must have consistent code, look and feel via CSS.
  • All pages must use a single css stylesheet linked to each page.

Project 2: Presentation

  1. Create a slide presentation with Google slides.
  2. Create 12 slides timed at 15 seconds each for a total of 3 minutes.
  3. Do this by chosing file --> publish to the web --> embed.
  4. Choose Medium size, auto-advance slides every 15 seconds.
  5. Copy the entire code for the iframe.
  6. Create a new page in your root folder, NOT inside the project2 folder. Call it p2slides.html.
  7. Paste the iframe into the body element. Test the page in browser and upload to the server.
  8. Create a link to this page in your global nav on your home page.

Presentations are mandatory and part of your grade.

  • Describe your PSA concept.
  • Show screen grabs of your website (all screens and pages), code and sketches. Tell a story, explain your approach to the project and your design choices.
  • Describe at least 2 design challenges and how you solved them. Illustrate these with code snips.
  • Present specific parts of code at large font size shown to illustrate a specific code/design solution.