CIS5570 Homework 1: HTML & CSS

Instructions:

Welcome to web development! In this assignment you will create:

• A single HTML document named index.html that will display images and text.
• A single CSS document named index.css to style your app.

In 5570, we expect you to use resources made available online and through lectures to solve issues you may encounter when completing the homeworks. When working in the industry and in this class, Google will be your best friend! Please do not hesitate to also ask questions on Ed and come to office hours.

HTML/CSS Specifications:

• The app should contain six box (div) elements aligned horizontally OR vertically.

  • Three boxes must contain images.
  • Three boxes must contain text.
  • All boxes must be centered horizontally and vertically.
  • You must use the CSS Flexbox layout.

• All boxes should be equally spaced. When the browser window is resized, the spacing between the boxes should change. However, the boxes themselves should never overlap or change size. If the browser window is too small, the boxes should not show.

• Each box should be 200x200 pixels, with a 2px black border. Text within the boxes should be centered horizontally.

• When hovering over a box containing text, the cursor should change to a hand (pointer), the font should change (your choice), and the background of the box should change to red.

• When hovering over a box containing an image, the cursor should change to a spinning ball, the border size of the box should grow to 10px, and the border's color should change to yellow.

• You should use both transitions and animations in your CSS.

• You should have shadows (text or drop shadow) OR apply a gradient to the page background.

Validation:

• Your CSS file must pass validation at http://jigsaw.w3.org/css-validator/validator. In addition, all your code must be clean, readable, properly indented, and well-structured.
• You may not use any JavaScript libraries or external stylesheets. You must write your own code.

Submission:

• The grading rubric is made available so you can check your work (please do not edit the document).
• Do not forget to regularly commit your work to GitHub.
• Only the last push (code) before the due date will be graded.
• Submit your repository on Gradescope when you are finished.

Useful links:

• https://guides.github.com/activities/hello-world/
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
• https://developer.mozilla.org/en-US/docs/Web/CSS/gradient
• https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow
• https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow
• https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts
• https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
• https://developer.mozilla.org/en-US/docs/Web/CSS/transition
• https://developer.mozilla.org/en-US/docs/Web/CSS/animation
• https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
• https://developer.mozilla.org/en-US/docs/Web/CSS/@media
• https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/proposing-changes-to-your-work-with-pull-requests