Program 1 ECS 162
Program 1 – Slant Step
Copyright By PowCoder代写 加微信 powcoder
Spring 2022
Due 10pm, Monday April 11
Please work on this assignment individually.
We’ll make a Website for one of the current exhibits at the Manetti-Shrem museum on the UC Davis campus, . Wiley and the Slant Step: All on the Line. Above
are two examples of what the Web page ought to look like, one on a particular phone and the other in a particular laptop window.
Different viewports will be different-shaped rectangles, and our goal is for our Website to look as if it was designed exactly for each possible viewport in which it appears; that is, it should be responsive.
Responsive Web pages
Here are some examples of what it means for a Web page to be responsive. While the user might have to scroll down to see the whole page, they should never have to scroll right. The title, logo or other heading material should be fully visible when the page is first loaded, certainly never cut off on the right. Elements should not overlap. The size of the fonts should (almost always) depend on the device (ie smaller on phones, larger on a laptop). Things that are lined up, or spaced similarly, in one viewport, should remain lined up or spaced similarly in another viewport; mobile and laptop might be different, but two laptop views should certainly have similar alignment and spacing. We will implement responsive behavior using the Flexbox layout module of CSS, and one media query.
Requirements
Here is the HTML file, museum.html.
You need to write and include a CSS file. You may modify the HTML, but try to keep the names of elements the same, since it will be much easier for us to talk in office hours if we agree on the names and arrangement of the elements.
Your Web page will consist of an HTML file, a CSS file, a reset.css file, the two image files, and the logo image. Please ZIP or gzip all the files together, and submit a single zipped file using the link in the Assignments section on Canvas. If you reference the images and reset.css using URLs, then you do not need to include them in your .zip file.
You may not use old-fashioned newspaper-type CSS layout properties such as float and columns, CSS modules such as JQuery, layout libraries such as Bootstrap, or UI libraries such as React. Use a media query only to switch between the mobile and desktop layouts. You may use the CSS Grid layout module if you want, but it is not required and will not appear on exams; the Flexbox module will, so be sure you know it.
In viewports with the same aspect ratio as the target images we have from Krithika, your Website should look exactly like the images (up to a few pixels of spacing, perhaps).
Your Web page should be responsive. Here are some examples of spacing and alignment that you should preseve in every viewport:
The header is noticably wider than the main content,
The width of text paragraphs and images match in the main content area,
The title and logo are carefully placed on the blue stripe,
The main content is centered on the page,
…what else can you notice?
We will grade in the Chrome browser; you do not have to check appearance in other browsers. You can use the Chrome emulator to check appearence on various phone viewports.
We will use the W3schools CSS validator to check CSS correctness.
Tips and Help
In your HTML file, include this
reset.css file before
including your CSS file. This removes any
default CSS provided by the browser.
Here are Krithika’s specs on the fonts, colors, and so on, the images, the text for the Website, and some hints.
Check your page as you go along by changing the width of the window on a laptop and seeing how the layout changes. Does it look OK at any width?
As always when coding, make small changes, test them, and don’t continue until they work. When asking for help, be ready to show your last working version and the change you are trying to debug. Do not write a big block of CSS and then try to figure out why it doesn’t work; that’s usually hopeless. Do not write some CSS and then add reset.css; you will have to go back and redo things.
In addition to debugging CSS using the Chrome debugger, it is helpful to give every element its own background color during development, which can be deleted after you’re done.
The easiest way to control the size of an image is to put it into a div, with the width of the image set to 100%, and then control the width of the div.
程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com