DMIT1530 Web Design Fundament Assignment

Introduction

Assignment 2 is a two-page, fully responsive build with a sticky header, horizontal scrolling content, a parallax scroll background, and semantic forms. 

All SVG images are provided in the assets folder. The student is required to obtain the other images, color values, fonts, and measurements from the PSD. The completed site must demonstrate well-formed and structured HTML markup while writing clear and efficient CSS.The layout and styles will best match the PSD and adjust to different screen sizes using fluid and fixed layout techniques, and media queries. CSS properties used should have high global browser support (Edge, Firefox, Chrome, Safari, etc.) and the site will need to properly display on all screen widths starting at 320px wide.

 Instructions

Following the steps of a build methodology: 

1. Using your own choice of a CSS reset, and a standard framework folder, start by defining and marking up the content for the home page. Check the logic, and the hierarchy of the document structure in the HTML5 outliner tool. Other than nav elements, there should be no untitled sections. Create the HTML file for the second page, “How it Works”, and copy and paste both the header and footer content into the new page. Ensure that the pages can link to each other. Add the HTML markup for the second page. 

2. Markup all form elements semantically and using the most appropriate input types and attributes. Form elements should be accessible with linked labels and inputs. Use attributes such as disabled, autofocus, name, autocomplete, placeholder, required, minlength, and maxlength logically and where 

3. Once both pages have been semantically marked-up, outline checked, and validated for errors, the student will add the necessary CSS styling required to best match the look and layout of the PSD. 

Things to note regarding styling: 

1. The header element is a ‘sticky’ element. When scrolling the header element will always stay on the top of the page. The horizontal scroll area can be swiped to move on touch screens. Once there is enough space to fully display all of that content (no overflow), it will no longer The heading with a background image on the second page will have a parallax scroll effect.

2. The typography is consistence throughout both pages, therefore, there is an advantage to using global styling with the text Optimize all images to the best file size. 

3. Style the form and form elements to best match the PSD. Elements such as checkboxes, radio buttons, and select elements are styled by the browser and cannot be easily overwritten by CSS. The form has styling for both valid and invalid states. 

4. Style the mobile (smallest) screens first. The content will need to fit a screen size starting at 320px wide. The content is fluid and will grow to fill the screen size as it increases. Two media queries will be required to adjust the layout on wider screens. At the larger screen width, the content will no longer be fluid (stretching edge to edge) and will instead be contained in a centered, fixed width 

For any clarification or questions, please ask your instructor.