Web DesignFinal ProjectIn this assignment you will synthesize your knowledge of web design into a new,professionally-oriented website. Potential topics include a portfolio, a socialcause, a...

1 answer below »
Web Design assignment due in 10 hours. Please lmk if possible. This involves introductory HTML/CSS/JavaScript


Web Design Final Project In this assignment you will synthesize your knowledge of web design into a new, professionally-oriented website. Potential topics include a portfolio, a social cause, a small business, and an expanded résumé. Wireframing Once you’ve decided what your professionally-oriented website will be about, write a paragraph of at least 100 words describing your topic and how it will be presented on the web. Next, using pencil and paper or collage, create a page layout that represents the design of your next website. This is an opportunity for you to make design decisions before applying them with code. The layout should include text, images, and navigation. You need not concern yourself with specific content at this stage; instead, focus on the arrangement of compositional elements on the page. You’re welcome to use the same general layout for every page of the site; if you choose to vary the layout for different pages, create a separate wireframe for each. When you have completed your handmade wireframe, take a picture of it or scan it so that you have a digital image of your work. Content Begin building your website by creating a new project directory for its files. Using your wireframe as a guide, code your website with semantic HTML to describe page content. Your website should consist primarily of original content; any images or text that you use from other sources should be credited accordingly. ○ There should be semantic text elements on each page, including but not limited to paragraph (

) and heading (


,


, etc.) text. ○ There should be semantic section elements on each page, including but not limited to
,
, and
. ○ Pages should link to each other with “relative” URLs; longer pages should incorporate anchor links. ○ Each page should include properly formatted JPG, PNG, GIF, or SVG images. ○ All

elements should include src, width, height, and alt attributes with appropriate values ○ Higher-resolution (2x) versions of all raster graphics should be offered in conjunction with the srcset attribute ○ At least one page should include web-formatted audio or video using the HTML or element. The media file should be 10 MB or less; edit and compress accordingly. 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 with the CSS @font-face rule. ○ 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 different 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. https://validator.w3.org/ ○ 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. Accessibility Keep in mind that people access the web in many different 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. Submitting Your Assignment Publish your project on the i6 web server and submit the following: ○ The text description of your topic and website—copied and pasted in the assignment text box ○ A digital image of your handmade wireframe ○ The URL to your website on i6 ○ A compressed archive containing all the files (HTML, CSS, JavaScript, images, and media) of your web page Please note that you are required to submit files along with URLs in order to receive credit for your work. Grading This assignment is worth 15 points. Wireframing https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector ○ 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 offered in conjunction with the srcset attribute (0.5 point) ○ Web-formatted audio or video, under 10 MB, using the HTML or element. (1 point) Form ○ Style rules should specify font family and font size for paragraph and heading text, and link states (1 point) ○ A web font applied with the CSS @font-face rule (0.5 point) ○ 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 (1.5 points) ○ 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 different browser widths (1 point) ○ Mobile-optimized layout should be limited to one column; desktop layout should include two or more columns (1 point) Interaction ○ At least two DOM queries (0.5 point) ○ There should be at least one function that is called in response to a DOM event (1.5 points) ○ The function should update page content and/or change CSS properties (1 point) Points may be deducted for improperly formed HTML elements, CSS style rules, or JavaScript, as well as serious accessibility issues. Web Design Final Project In this assignment you will synthesize your knowledge of web design into a new, professionally-oriented website. Potential topics include a portfolio, a social cause, a small business, and an expanded résumé. Wireframing Once you’ve decided what your professionally-oriented website will be about, write a paragraph of at least 100 words describing your topic and how it will be presented on the web. Next, using pencil and paper or collage, create a page layout that represents the design of your next website. This is an opportunity for you to make design decisions before applying them with code. The layout should include text, images, and navigation. You need not concern yourself with specific content at this stage; instead, focus on the arrangement of compositional elements on the page. You’re welcome to use the same general layout for every page of the site; if you choose to vary the layout for different pages, create a separate wireframe for each. When you have completed your handmade wireframe, take a picture of it or scan it so that you have a digital image of your work. Content Begin building your website by creating a new project directory for its files. Using your wireframe as a guide, code your website with semantic HTML to describe page content. Your website should consist primarily of original content; any images or text that you use from other sources should be credited accordingly. ○ There should be semantic text elements on each page, including but not limited to paragraph (

) and heading (


,


, etc.) text. ○ There should be semantic section elements on each page, including but not limited to
,
, and
. ○ Pages should link to each other with “relative” URLs; longer pages should incorporate anchor links. ○ Each page should include properly formatted JPG, PNG, GIF, or SVG images. ○ All

elements should include src, width, height, and alt attributes with appropriate values ○ Higher-resolution (2x) versions of all raster graphics should be offered in conjunction with the srcset attribute ○ At least one page should include web-formatted audio or video using the HTML or element. The media file should be 10 MB or less; edit and compress accordingly. 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 with the CSS @font-face rule. ○ 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 different 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. https://validator.w3.org/ ○ 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. Accessibility Keep in mind that people access the web in many different 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. Submitting Your Assignment Publish your project on the i6 web server and submit the following: ○ The text description of your topic and website—copied and pasted in the assignment text box ○ A digital image of your handmade wireframe ○ The URL to your website on i6 ○ A compressed archive containing all the files (HTML, CSS, JavaScript, images, and media) of your web page Please note that you are required to submit files along with URLs in order to receive credit for your work. Grading This assignment is worth 15 points. Wireframing https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector ○ 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 offered in conjunction with the srcset attribute (0.5 point) ○ Web-formatted audio or video, under 10 MB, using the HTML or element. (1 point) Form ○ Style rules should specify font family and font size for paragraph and heading text, and link states (1 point) ○ A web font applied with the CSS @font-face rule (0.5 point) ○ 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 (1.5 points) ○ 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 different browser widths (1 point) ○ Mobile-optimized layout should be limited to one column; desktop layout should include two or more columns (1 point) Interaction ○ At least two DOM queries (0.5 point) ○ There should be at least one function that is called in response to a DOM event (1.5 points) ○ The function should update page content and/or change CSS properties (1 point) Points may be deducted for improperly formed HTML elements, CSS style rules, or JavaScript, as well as serious accessibility issues.





Answered Same DayDec 14, 2022

Answer To: Web DesignFinal ProjectIn this assignment you will synthesize your knowledge of web design into...

Anurag answered on Dec 15 2022
34 Votes
SOLUTION.PDF

Answer To This Question Is Available To Download

Related Questions & Answers

More Questions »

Submit New Assignment

Copy and Paste Your Assignment Here