Skip to content

Project 3 - Part 2

Get started on project 3 immediately!

Do what you know and check it off, you can come back and finish more later. The point is to not leave it to the last minute, otherwise, you will not finish.

Overview

Project 3 is the culmination of all the content you have learned over the past many weeks. Because you will not be able to submit Project 3 more than once – it is critical that you take your time, and carefully review these specifications, as well as the feedback you have had from previous assignments and projects.

Directory Structure

In Project 3 Part 1, you created the outline of the following pages.

  • Homepage (index.html)
  • Join Us
  • Contact Us
  • Student Choice

Based on your topic, the above page names may be different. They should make sense for your organization or group. For example, if you are working on the local band website, you may have a "Become a Fan" page for the "Join Us" page.

Website Content

Your website will need images and content filler (text). You may not copy an existing website, its images, layout, or content. If you are struggling with filling in some of the text or images – there are options available to help! You may use “lorem ipsum” text generators if you’re stuck. There are many text generators online that you can find with a quick Google Search. Pick one you like (bacon ipsum, Bob Ross lorem ipsum, pirate ipsum, cupcake ipsum, etc) and have fun with it!

Images can be used if you own the rights to the image, or if the image is freely available (creative commons licensing). You can find many free images by using the links found on the Resources page

If you use images that are not yours or “free” from – you must cite your references appropriate to give credit to the content creator.

Requirements

  • Must provide an attractive and usable layout on all pages. Attractive is a subjective term, but overall the pages should have complimentary colors, appropriate fonts, well-formed layouts, adequately sized images, and meaningful content.
  • Must demonstrate the use of the float property on at least one page.
  • All images used must be responsive. Meaning, they should scale with the viewport size.
  • At least one page must include an HTML table.
  • All pages must have adequate margins and or padding so content is not crowded and is legible.
  • Each page should include a consistent header, footer, and navigation.

You must make an original layout and design

  • The layout and styles cannot be a copy of the Crown Coffee website
  • Do not copy paste Project 2 and make a few changes

There may be similarities between Crown Coffee and your website, i.e., the basic HTML structure (header, nav, footer) maybe in the same location. The point is that you may not duplicate the Crown Coffee site.

main.css

  • Must contain the styles for the header, footer, and navigation.
  • Any styles that are used on each page of your site should be included in the main.css.
  • Must include a media query for when the viewport is less than or equal to 40em (640px). Change some styles, so that when the viewport is reduced to mobile phone size, the site is improved. Some ideas or things you can consider:
    • Modify the heading sizes
    • Add or reduce margins or padding where appropriate
    • Increase the size of links to be more "finger-friendly."

Homepage

  • Must be named index.html
  • Must contain at least one image (which is responsive).
  • Provide content describing the organization's or group's purpose.
  • Any styles that apply to just this page should be in their own external style sheet.

Join Us

  • Must contain a form allowing users to join the group or organization.
  • Provide content describing the form's purpose

The form must contain the following:

  • At least one text input
  • Checkbox selections
  • Radio selections
  • At least one dropdown selection
  • At least one input should be required
  • Every input must have an associated label
  • Every input must include a for and id attribute to be connected to its corresponding label
  • Regular expressions are used to validate form input.
  • All input must make it to the http://itins3.madisoncollege.edu/echo.php and use the post method.
  • Any styles that apply to just this page should be in their own external style sheet.

Contact Us

  • Must include information on how users can contact the group or organization.
  • Must include hours of operation (this may be modified slightly if your website has different needs)
  • Must include a contact form with 4 or more fields
  • Every input must have an associated label
  • Every input must include a for and id attribute to be connected to its corresponding label
  • Regular expressions are used to validate form input.
  • All input must make it to the http://itins3.madisoncollege.edu/echo.php and use the post method.
  • Any styles that apply to just this page should be in their own external style sheet.

Student Choice

  • This page is up to you! This could be an "upcoming events" page or a "meet our staff" page. Think about what a good fit for your organization or group would be.
  • Must contain at least one image (which is responsive).
  • Any styles that apply to just this page should be in their own external style sheet.

Test!

Remember – Project 3 is a one-time submission. Here are some suggestions for you before you submit, although you can make a list of more ideas:

  • Check that every link works
  • Check that the forms submit all values (correctly) to the server.
  • Make sure all images are visible
  • Review past feedback on your assignments and compare that to your current work
  • Review all the Coding Standards carefully
  • Carefully review the HTML and CSS code for legibility, indentation, spacing, etc.
  • Make sure everything validates properly

HTML Validation

  1. Go to https://validator.w3.org/
  2. Click on the Validate by File Upload
  3. Click on the Choose file button and navigate to the location of your index.html document.
  4. Click the Check button
  5. Print it as a PDF and save it into a folder named validations in your project03 folder
  6. Name the PDF indexHTML.pdf.
  7. Repeat this process for each html pages, renaming the file per page.

CSS Validation

  1. Go to https://jigsaw.w3.org/css-validator/
  2. Click on the by File Upload option
  3. Click on the Choose file button and navigate to the location of your main.css document.
  4. Click the Check button
  5. Print and save as a PDF and save the validation in a folder called validations in your project03 folder
  6. Name the PDF cssMain.pdf
  7. Repeat this process for all CSS pages, renaming the file per page