A-420 Proj-1: HTML5 & CSS3 | SP ’15

Posted by: Ping

Project-1A: Basic HTML Page-1 – 10 points (Jan 15 – 22 / one week. Please check the project brief for details)
Project-1B: Basic HTML Page-2 – 10 points (Jan 15 – 22 / one week. Please check the project brief for details)
Project-1C: HTML5 & CSS3 – 60 points (Jan 22 – Feb 10)
HTML Quiz: 20 points (Feb 10, 2015)

Project Requirement of P1A, P1B, and P1C:

  1. Use required HTML tags and related attributes to create the HTML pages and mini HTML site
  2. Use valid HTML5 tags and attributes (Check the validation through W3Schools’ validation service)
  3. Do not use obsolete tags and attributes in your HTML pages
  4. Use column grid principle to construct each HTML layout
  5. Use basic CSS rules to style HTML tags and attributes, and to visualize color, graphic elements, and text
  6. Use responsive design to build fluid layouts
  7. Build a legible web typography and readable type content
  8. Build a correct site root, a clear site construction, and a friendly site management
  9. The mini site must include a home page (index), a navigation system, and five linked pages to demonstrate how the website appears and functions. All pages must have linear connections.

Project-1C: NY Solar – HTML Site (HTML5 & CSS3)

Project Description: Design a mini website using HTML5 and CSS3

Navigation System should include:

  • Home (Save the home page as “index.html”)
  • About Us
  • Service
  • Solar Energy
  • Tips
  • Contact Us

Required HTML Tags

<html></html>
<head></head>

  • <meta>
  • <title></title>
  • <link>
  • <style></style>
  • <script></script>

<body></body>
<a></a>
<img>
<hr>
<br>
<h1> – <h6>
<p></p>
<div></div>
<ul></ul> or <ol></ol>
<li></li>
<strong></strong> or <mark></mark>
<em></em> or <i></i>

Required HTML5 Tags (in addition to traditional HTML tags):

<!DOCTYPE html>
<!–xxx—>
<nav></nav>
<header></header>
<aside></aside>
<footer></footer>
<article></article>
<main></main>
<section></section>
<audio></audio> or <video></video>
<source>

Optional HTML Tags:

<iframe></iframe>
<embed></embed>
<menu></menu>
<table></table>
<abbr></abbr>
<cite></cite> or <blockquote></blockquote>
<code></code>
<pre></pre>
<ruby></ruby>
<meter></meter>
<svg></svg>
<track></track>
<wbr>
<figure></figure>
<canvas></canvas>
<progress></progress>

Project Working Process:

  1. Design a home page layout in Photoshop or Illustrator
  2. Create image slices for the header banner of each page and button graphics for main navigation and social media
  3. Rename the sliced images, and create an image folder
  4. Create a new site in Dreamweaver, and edit the site
  5. Add required HTML tags and attributes in code view
  6. Create CSS rules to build the page layout skeleton by building an external CSS
  7. Add CSS rules or apply Javascript swap image feature to rollover the navigation buttons
  8. Swap social media images by creating an external JavaScript file
  9. Validate both HTML and CSS for each HTML page
  10. Due the root folder of your project

Application for Project-1A and 1B: Brackets 1.1
Application for Project-1C: Dreamweaver CC 2014

Previous Student Works:
Project 1A / 1B: http://pxstudio.us/student-work/interactive/p1a-p1b/iframe/frameset.html
Project 1C: http://pxstudio.us/student-work/interactive/p1c/iframe/frameset.html

Project Theme: Solar Energy
Project Layout: Index Page + 5 Body Pages
Layout Type: Responsive Layout
Media Support: HTML5 Audio or Video
Project Dateline: February 10, 2015