Today was practice, practice, practice!
- SCSS
- Typography
- Effects and Animations
- Flexbox
But I confess - it was almost a weekend to forget in terms of studying. Although I was at my study desk the whole time, I felt I didn't make proper use of it - my mind was SO distracted. It must have something to do with the 28 October partial lunar eclipse!
Typography
I have only played around with fonts on my documents, WordPress websites, and Canva. It was good to study in detail how they are used in web development also.
Here is an example of a code to work on font styles:
p { font-size:2em; font-weight:900; font-family:'Noto Sans', sans-serif; }
h1 { font-size:3em; font-weight:100; font-family:'Courier New', sans-serif;
"em" helps you increase the font size in multiples of the default size of 16px.
For the font-family, I used Google Fonts for the first time!
- Go to Google Fonts and choose a font you want
- In the list of font sizes for that specific font chosen, click on + to open the menu that displays the embed info.
- Copy the "link rel" and paste it into the area.
- Then, come back to Google Fonts, copy the 2nd one above (CSS rules), and paste it into the Class element you are styling.
That should get you the font style you want.
Effects and Animations
This was fun but I don't remember any of the syntaxes I learned as I write this!
Anyway, one of my activities was to get these 5 boxes to change color and pop out the text in it when you hover over it.
So, I wrote this code to do the job:
.box:hover { font-size: 25px; color: blue; background: white; animation-name:colorful-box; animation-duration:2s; }
@keyframes colorful-box { from { background:white; } to { background:pink; } }
And it did the job:
As I worked on this animation, I wondered if I ever will use such animations in real life. Most of the websites today are simple and minimalist. Anyway, it's good to know.
From tomorrow, WEEK 3 commences!
Top comments (0)