Higher-resolution (2x) versions of all raster graphics should be oìered in conjunction with the srcset attribute.

At least one page should include web-formatted audio or video using the HTML <audio> or <video> element. The media íle should be 10 MB or less; edit and     compress accordingly.

Create and apply a 16 x 16 favicon to all your pages. Make sure each page has an appropiate HTML title.

Pay close attention to your HTML tags as you code them. You can also check your HTML code using the W3C Markup Validation Service.

Form

Create one external style sheet and link it to all of your HTML pages. Code a responsive layout for your website with CSS.

Your style rules should specify font family and font size for paragraph and heading text, and link states including link, visited, hover, and active.

Add a web font to your pages using Google Fonts.

Use the CSS Flexible Box Layout Module (Flexbox) for arranging items along one   axis and/or the CSS Grid Layout Module for the overall page structure.                   The viewport should be set on all HTML pages and the CSS should include at least one @media query with a breakpoint to optimize the layout for diìerent browser    widths.

Mobile-optimized layout should be limited to one column; desktop layout should

include two or more columns.

Allow the content of your website to guide decisions you make about its design.

Interaction

Using JavaScript, add custom interactivity to your website.

  Your script should include at least two DOM queries.

  There should be at least one function that is called in response to a DOM event.

  The function should update page content and/or change CSS properties. JavaScript should be externally applied in a .js document.

Design and Accessibility

Keep in mind that people access the web in many diìerent ways. Build your pages in a way that creates as few barriers as possible to experiencing your site, regardless of the user’s ability or the device used to access the web. One way to test the accessibility of your site is with the browser’s accessibility inspector. These tools do not necessarily catch all accessibility issues but an audit of your site should not indicate any serious

issues. If it does, try to resolve them before submitting your assignment.          Use the slides from our Design Lecture to help guide you about best practices.

Submitting Your Assignment

Publish your project on the i6 web server and submit the following via NYU Brightspace.

The text description of your topic and website—copied and pasted in the assignment text box

PDF íle(s) of your wireframe

The URL to your website on i6

A zipped folder containing all the íles (HTML, CSS, JavaScript, images, and media) of your web page

If you would like your website to be shared with the rest of the class, post it on

the discussion board on Brightspace so that they can see your cool creation.

Please note that you are required to submit íles along with URLs in order to receive credit for your work.

Grading

This assignment is worth 20 points.

Wireframing

  A paragraph of at least 100 words describing a professionally-oriented website

topic (1 point)

  Website wireframe of the page layout (1 point)

Content

Semantic text elements on each page (0.5 point)

There should be semantic 'section' elements on each page (1 point)

Pages should link to each other with “relative” URLs; longer pages should incorporate anchor links (1 point)

Each page should include properly formatted JPG, PNG, GIF, or SVG images; img elements should include src, width, height, and alt attributes with appropriate values (1 point)

Higher-resolution (2x) versions of all raster graphics should be oìered in conjunction with the srcset attribute (0.5 point)

Web-formatted audio or video, under 10 MB, using the HTML <audio> or <video> element. (1 point)

Create and apply a 16 x 16 favicon to your pages. Make sure each page has an appropiate HTML title.(1 point)