The following criteria should give you an idea of the expectations for the final website. You may notice that they are very broad. This is because I want you all to create a site for your unique purposes. I want you to dig deep and build something useful and beautiful for your audience.
- Semantic HTML
- Use the <article>, <header>, <nav>, <main>, <aside>, and <footer> tags at a minimum, with other tags to be used as appropriate.
- Valid HTML5 markup. Your site should validate without error (warnings are ok).
- Contain <HTML>, <head>, <title>, and <body> tags.
- a consistent layout look and feel between pages
- CSS
- Control the style and layout of elements on your pages through the correct usage of CSS
- Make use of external stylesheets (at least 2)
- Your site includes a reset style sheet
- make use of selector, classes, and IDs.
- make use of pseudo class elements and properties
- includes media query for at least 2 viewports (mobile and desktop)
- implement a flexbox and grid layout of at least 3 columns or containers per row.
- Navigation:
- A vertical or horizontal navigation bar that provides clear access to other pages on site and makes use of CSS and the <nav> semantic function
- Page elements and navigation will make use of responsive design (mobile and desktop at least)
- Unique styling scheme which includes pseudo-class :hover, :active, :onclick
- 6 Distinct Webpages :
- Six distinct webpages with at least 400 words of original writing per page.
- While the site should not use a table layout, you are required to have at least 1 table on your site
- table(s) layout and style controlled by CSS
- A homepage named index.html from which it is easy to determine the site author and purpose (these may be linked from homepage if not actually on homepage).
- Pages follow a responsive design for Mobile and desktop views.
- at least one form with a variety of input types (at least 1 from each type) including (text, datalist, choice control, select, radio buttons, button control, buttons, etc)
- Graphics: A least 3 graphics per page (sized appropriately and showing).
- Use a combination of vector and raster graphics
- Graphic layout controlled and styled by CSS rules
- graphics and images should include <figure> captions providing authorship information
- make use alt-text for accessibility
- External Links: At least 3 outside links (per page) that open in new windows (with descriptive names and not raw URLs)
- have a defined CSS style for links and link states including (hover, active, and visited (must differ from nav link styls)
- Embeddables: At least 2 embedded objects (like a YouTube video, a map, a poll, a Sribd document, etc.)
- JavaScript
- Use of one JavaScript function to enable a user to select and change the loaded CSS stylesheet to an alternate style set for a page styling and layout. For example, you may have a dark theme, or provide a selection for increasing or decreasing the font size on the site.
- To complete this requirement you will need to produce at least 2 alternate stylesheets that control all aspects of the page look and layout (including the nav).
- Alternate stylesheets must contain functioning responsive design.
- To complete this requirement you will need to produce at least 2 alternate stylesheets that control all aspects of the page look and layout (including the nav).
- Implement form validation
- implement a JavaScript based alert. The alert must follow a logical usage on the page. For example, an alert that appears once on first visit would be acceptable, but on subsequent visits the content of the alert would need to change or not present at all. Alerts for form validation are acceptable.
- One JavaScript function that calculates or updates DOM (cannot be combined with the above options).
- Implement and call an API with JavaScript.
- Use of one JavaScript function to enable a user to select and change the loaded CSS stylesheet to an alternate style set for a page styling and layout. For example, you may have a dark theme, or provide a selection for increasing or decreasing the font size on the site.
- Accessibility:
- 508 Compliance- Appropriate observance of Section 508
- Copyright & Fair Use – Appropriate observation of copyright and fair use principles.
- Publication
- Website is accessible via URL.
Deciding on Your Website Platform
By the beginning of module 4, you will want to have made a decision about what toolset you’ll be using for your website.
From Scratch: Code editor (like Brackets (Links to an external site.)) –> HTML and CSS pages; You can build on your HTML & CSS skills . You could use some popular front-end web development frameworks and toolsets like Bootstrap (Links to an external site.), Foundation (Links to an external site.), Pure CSS (Links to an external site.), and Normalize.css (Links to an external site.). You can make use of Javascript frameworks like Vue.js or Angulr, but if you are uncertain as to the acceptability of the framework for this class consult your instructor.
The use of Website Buildesr: (Wix, GoogleSites, Weebly, etc), is not permitted for use in this project and result of a grade of zero.
The use of prototyping to deployment platforms, site builder platforms, or code generators is not permitted.
0 comments