Lab 18 - DIY
Goal
- Continue practicing HTML
- Create your own two-thirds one-thirds and one-thirds layout for desktop using CSS.
- Create your own animation using CSS
Learn
Use knowledge from previous labs.
Practice
This lab is a pick your own topic lab. Select a topic that is interesting to you that you would like to make a website about. You can use copy and images about the topic from other sources. This is not report you need to write, just an exercise on using CSS and HTML. So don't worry about copyrights. You will be required to have three html documents; an index file and at least two other html pages.
Required layouts for desktop
Two of your areas of content must be setup in a 2/3 1/3, and a 1/3 1/3 1/3 layout. You can use display flex, grid, or inline-block to achieve this requirement. You do not need these layouts on all three html files. They can be all on one or split up on separate pages.
Required HTML Elements
header
nav
main
img
a
p
h1
form
label
input
Your form on your website will not need to submit anywhere. You do not need to have an action attribute.
Optional HTML Elements
- h2-h6
- div
- span
- footer
- article
- section
- ol
- ul
- iframe
- textarea
- fieldset
- table
- thead
- tbody
- tfoot
- tr
- td
- th
Required CSS
a media query for the desktop layouts
animation-name
animation-duration
animation-timing-function
keyframes
You may use the animation shorthand property for the three required animation properties above.
Optional CSS
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
- background-color
- color
- padding
- margin
- width
- border
- font-family
- font-weight
- font-size
- text-align
- text-decoration
- display grid
- display flex
- display inline-block
- position
*This is not a comprehensive list of all CSS we have done. Feel free to use any other CSS we have learned.