Space exploration site
What I learned:
During this block of lectures I learned about:
- Google fonts and how to embed them
- background images and how to manipulate them in CSS
- WebP format, which provides superior lossless and lossy compression for images on the web.
- Span tag, which is similar to a div, but is an inline element primarily used for styling purposes.
- id attribute and its uniqueness in the document (there can't be 2 elements with the same ids)
- text-shadow (I also learned a cool trick on how to make a text stand out from a background if they have similar style and color: text-shadow: 0 0 5 black;)
Important takeaways:
Buttons don't inherit font-family. So it's important to use inheritance to style it properly.
To embed a custom font there is a font-face property.
Websites that were used:
1001fonts.com - one of the great websites with plenty of custom fonts
giphy.com - background image in WebP format
https://coolors.co - palette generator
An initial website made with a Scrimba teacher:
Going above and beyond:
How I enhanced it:
- I created this white block that makes a Call To Action section more attractive for a user.
In the process of creating it, I overcame an obstacle with a text losing opacity together with a changing white block opacity. I found a solution by making a white block positioned relative, while the text div is positioned absolutely.
- I provided a different style for the elements of CTA section on hover.
- I embedded a custom font.
- I choose matching colors with the help of coolors palette generator.
- I changed border-radius on a button element.
- I made the design of the hero section skewed to the left by using a clip-path generator. (https://bennettfeely.com/clippy/)