Responsive Site Design Exercise
Description
Unformatted Attachment Preview
Download ResponsiveSiteDesign-ExamFiles.zip from the Exam section in eConestoga and extract the
files to a folder you can work on from Brackets. Complete the following steps to finish the practical
portion of the exam. Once completed, zip up your site files and submit them to the attached dropbox.
1. (10%) Move the CSS from the index.html to a main.css file. Create this file in a css folder from
the root folder.
2. (10%) Reference the main.css file in the index.html file.
3. (20%) Add the following ARIA roles to the stated elements:
a. ¡nner2ole to
b. ¡vigation2ole to
c. ain2ole to
d. ïntentinfo2ole to
4. (20%) In the CSS there are 2 sections of commented code for media queries. Place the code in
the appropriate media query with the following properties:
a. Media Query 1
i. @media
ii. îly!nd ãreen-edia types
iii. ax-width/f 1024px
b. Media Query 2
i. @media
ii. îly!nd ãreen-edia types
iii. ax-width/f 768px
5. (40%) Add menu.html, directions.html, contact.html pages to the root folder. Use the
index.html as a template then make the following changes to each of the new pages:
a. Add the page name to the title tag (eg. Lighthouse Island Bistro ewPage)
b. Add your name to the copyright info in the footer
c. Change the text in the first in to the name of the page, then delete the
directly under the first tag and its text
d. Add CSS %xt-shadow/f °x 2px #eaeaea4o the
e. Add CSS %xt-shadow/f px 1px #eaeaea4o the #tag
NOTE: Make sure all page links work and the site is responsive at the 2 specified widths.
Purchase answer to see full
attachment
Have a similar assignment? "Place an order for your assignment and have exceptional work written by our team of experts, guaranteeing you A results."