Birthday Gift Website
What I learned:
- align-items flexbox property
- flex-direction
- :hover pseudo-class
- linear-gradient function
- grouping selector
Important takeaways:
When changing flex-direction to column, the main axis flips and becomes vertical, so justify-content and align-items change their direction, too.
Text-align centers only inline elements inside of its container, it doesn't center block elements. Block elements can be centered with a margin.
We can't set width and height on inline elements because they should always be the size of their content.
Websites that were used:
tota11y bookmarklet
https://coolors.co - palette generator
https://cssgradient.io/
An initial website made with a Scrimba teacher:
Going above and beyond:
- Well, the main this is I personalized it and congratulated my husband.
- I got to know tota11ly contrast checker and it helped me immensely in improving the contrast ratio and reminded me about an alt attribute on images.
- I animated gifs with transform property.
- I acknowledged myself with the transition property and used
transition-property, transition-duration, and transition-timing-function using shorthand property.