As an example of iterative SDLC, students will create and improve their creative website through each Part of the course (HTML5, CSS3 and JS). For Part D of the project, create, validate, and submit the following website:*
* You can continue to work with vertical website or do a combination of “traditional and vertical. +10 points extra credit. Make sure all your code works. Remember, each project should be more sophisticated than the last.
- Use HTML5 in all that you do. Do NOT use deprecated tags or techniques.
- Web Convention
- A true website ( a collection of interconnected web pages with a common purpose and theme and anchored by a home page.)
- Home page
- Header-Banner with SITE title
- Main navigation- above the fold
- Page title for every page (not the same as the title tag in the head section of your web page.)
- Page title should “match” link title
- Use of headings and other appropriate tags to control paragraphs and other content and to promote Accessibility and usability.
- Readable content
- Footer with email link
- Highly accessible and usable
- Appropriately named files
- A 6 page site (or sections) based on your theme.
Make sure your website looks different – it should not be a copy of the exact same website as you turned in for project C. Use CSS to change the menus, color theme, layout etc..
- Home page of your website, the index.html which must include:
- Basic DOC TYPE for HTML5
- Basic tags including, but not limited to, web page title, body, address, horizontal rule
- Table with table attributes – accessible – create coding source table as described above. Do NOT use tables for layout for content OR navigation.
- Videos (Use HTML5 to control)
- List – lists of three or more other relevant sites or concepts
- Form – that validates/self-verifies – this form is a part of the interactive web page user’s feedback. Use at least five different types of form fields.
- Hyperlinks to sources, citations, resources.**
- HTML5 semantic tags are used appropriately
- HTML Comments
- Create a responsive website. All your measurements should be relative.
To evaluate your responsiveness, I will look at your website in Firefox View Source Mobile view (look for the two little boxes over there on the right in the tool bar.)
- Modal box with image or graphics, form or text
- Dropdown Menu
- HTML APIs (geolocation, drag.drop, local storage, App Cache, Web Workers, SSE)
- Have an idea you want to try? Check with the instructor.
- Put COMMENTS in everyday English in the code to summarize and explain what you are doing. Why are you using particular coding statements? What does this code help you accomplish? Be specific!
- Use 350 words minimum of text for entire site.
- Make sure your website project is aesthetic and highly usable and accessible in all aspects (except I do not expect you to caption, just be aware that it is the right thing to do!).