Create a holiday greeting page!
Use CSS Shapes, Click Events, Audio and more to personalize a holiday greeting card for the web.
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)
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);
}
- 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