junior-devleague / greeting-card

[Beginner] HTML, CSS, JS - Positioning Elements, CSS Shapes, Design

greeting-card

Create a holiday greeting page!

Objective

Use CSS Shapes, Click Events, Audio and more to personalize a holiday greeting card for the web.

Prerequisites

To complete this this project, students should have the following:

• Beginner understanding of HTML elements (divs, images, general structure)
• Beginner understanding of CSS (shape creation, borders, position)
• Beginner understanding of JS (click events, DOM)

Your Challenge

Design your own web page! Here are some tips to get you started.

Get rid of the default margins (white space at the edges of the page):

body {
  margin: 0px;
}

Make something the full width and height of the screen:

element {
  width: calc(100vw);
  height: calc(100vh);
}

Resources:

• Color Scheme Designer: http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF
• CSS Shapes: https://css-tricks.com/the-shapes-of-css/
• CSS Positioning: https://www.w3schools.com/css/css_positioning.asp
• Full page background images: https://www.w3schools.com/howto/howto_css_full_page.asp
• Full page background video: https://www.w3schools.com/howto/howto_css_fullscreen_video.asp
• Click Events: https://www.w3schools.com/js/js_htmldom_eventlistener.asp