Description
Objective: Provided three Responsive CSS Templates from the w3schools site, you will create a CSS Responsive template with (a) an automotive slide show, (b) a horizontal dropdown menu, and (c) a uniform visual style according to the following direction and rubric, for 50 points:
Unformatted Attachment Preview
IT 3603 | Project 4 Assignmnet|50 points
Objective: Provided three Responsive CSS Templates from the w3schools site, you will create a
CSS Responsive template with (a) an automotive slide show, (b) a horizontal dropdown menu,
and (c) a uniform visual style according to the following direction and rubric, for 50 points:
Direction:
1. Go to the following W3schools Responsive index page (RDW Intro )
https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_col-s
2. Then, go to the following W3Schools slide show index page (Automatic Slide Show)
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto
3. Leave both pages open.
4. Copy-past the style …/style codes of the slide show page into the bottom of the style code
of the RDW page.
5. Copy-past the dive… /div codes of the slide show page into the bottom of the code of the RDW page.
6. Copy-past the script… /script codes of the slide show page before , at the end of the
RDW page.
7. Run the page, you should see the RDW page is now having the slide show in its heading but
images are not displaying. The reason is w3shools do not have the images in their server for
this particular example. Do not be worried, you will download these images later.
8. Now, create a folder on the desktop call it “IT3603_project4.”
9. Go back to the RDW page, select all codes and paste them in a Notepad file and save it as
“slideshow.html.” Now, take the HTML file and place it in the “IT3603_project4.” Folder.
10. Now, go to the slide show page and right-click on the images, and save pictures. Repeat this
for all three images.
11. Place these images in the “IT3603_project4.” Now, if you click on the slideshow.html, you
will see a complete project at the “C” level. Here is the outcome.
12. Repeat the same process (steps 1-11) and add a horizontal dropdown menu under the slide
show, for a complete project at the “B grade level.”
https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp
13. Use the style principles explained in the web stylebook:
A. Make all alignments — Make sure the header and the horizontal dropdown menu are
aligned.
B. Apply the proximity rule — spacing among the pieces are meaningful. They indicate
belonging.
C. Apply the consistency rule – color the background and the text between the
templates combined are the same. No one will know that you have used other templates.
They are uniformed and very professional
14. Post your work to the course’ CU Blackboard site.
Rubric
Provided three Responsive CSS Templates,
the learner will create a CSS Responsive
template with:
Points
Steps
Grade
(a) an automotive slide show
40-36 points
Steps 1- 11 and 14
C
(b) a horizontal drop down menu
45-41 points
Steps 1- 12 and 14
B
(c) a uniform visual style
50-46 points
Steps 1- 14
A
Purchase answer to see full
attachment
