这是一个美国的Web静态网页开发assignment代写
1. Objectives
- Become familiar with HTML, CSS, and JS
- Learn to imitate a static web page.
2. Description
- In this assignment, you are given the below screenshots of a page and a video of one (1) web page (<your_filename>.html) and your task is to reproduce the page as closely as possible, writing HTML, CSS and JS directly, that is, without using anything more than a text editor. The screenshots of the page and a video of the web page to be imitated, to be scrolled vertically, can be found at the following links:
- Important Note: use of CSS is required
- All the menu items are clickable. Instructions on each click of the menu item are as follows:
- Clicking on “Home” should redirect to the same page
- Clicking on “Explore” and “Contact” should redirect to a page that has a 404 image (with an overlay) and text as shown in the video.
- The section-wise instructions for the homepage are as follows:
- Section1: Banner image and text.
- Section2: A row of ‘Cards’ with image and text -> Use fetch() or XHR to get the data from the data.json
- Section3: Paragraph followed by Image in single row.
- Section4: Paragraphs with images in multiple rows -> Use fetch() or XHR to get the data from the data.json
- Section5: Footer with a quote on left and contact information of the developer (YOU!!!!) to the right. The contact information should be hyperlinks. That is, the number should be a tel uri and email should be a mailto uri. On clicking these, the browser should attempt to open appropriate applications that can handle these uris.
- You will need eight (8) images to help you complete the web pages:
Rodeo-drive.png -> Section1
LASkyLine.png -> Section 3
404.png -> Explore and Contact Page
beach.jpg -> Section 4
griffith.jpg -> Section 2
hollywood.jpg -> Section 4
mountains.jpg -> Section 2
universalstudios.jpg -> Section 2
Use JSON file for text and images for Section2 and Section4: json
- You should not use any other images.
- Please note that if you view the images of the sample web page in a browser, some browsers will automatically resize the image to fit within the browser window.
- To test your homework, please view your web page using Firefox. Resize your browser window to the same size as the Home Page PNG image and then see if you have used the correct font, color, and size and if the position of the text is correct. As long as the various items on the pages are “proportionally” correct, you will get full points.
- When grading, the graders will resize the browser so it shows your top picture in full, plus the extra white space as it is in the video and snapshots. Then they will scroll vertically to see if the rest of the site follows the same “proportions”. Lastly they will check if the site is “static” vs. “responsive”, by lowering the horizontal size.
- Your site should NOT be responsive, none of the elements should change in size. The site should “crop” starting from the right, and no items should move with respect to each other
- In general, do not use percentage or media queries in CSS, and your website will not be responsive. Responsive behavior will cause penalties.