Press enter to see results or esc to cancel.

Secret meeting with Sayanee by Learnemy (CSS notes included!)

In the next instalment of our secret mission, we signed up for a CSS course at Learnemy! 

It was exciting because the course is conducted by the uber cool Sayanee Basu!

 

Sayanee is an independent full-stack web developer having a tonne of fun working with startups.

I like Sayanee because she designs amazing websites and she has this totally cool personal website which you should check here >> sayan.ee.

Right as usual I took down notes and secretly discuss with my mates and Joyce from Microsoft.

Ultra useful SEE-AS-AS (CSS) notes

Okays, let me run the auto-magic compiler to summarize the notes.

Compiled Notes For CSS with Sayanee

CSS with Sayanee

This is where we bombard sayanee with CSS questions

Paravel, the designer of flat design for Microsoft looks cool. Check it out here: https://paravelinc.com/
- delta
When designing CSS for a website, we should check how other great IT tech companies are scripting their CSS. Check google style guide or github style guide
 - delta
css lint is cool >> https://csslint.net/
 - aminwi
The better web standards >> https://w3fools.com/ seems to be better than w3c
Another standards resource>> https://developer.mozilla.org/en-US/
Check out fonts pairings at google web fonts (https://www.google.com/webfonts)
 - delta
Find really cool fonts here @ https://www.theleagueofmoveabletype.com/
 - aminwi
alternative of google web-font https://www.theleagueofmoveabletype.com/, www.dafont.com
 - delta
use pipe ("|") to combine web-font request -> save on HTTP requests
use @import to collate put all the css in one
 -  delta
To optimize font for other browsers and so on and so forth
https://www.fontsquirrel.com/tools/webfont-generator
 - aminwi
check crossbrowser compatibility: https://caniuse.com/ or https://prefixr.com/
 - aminwi
Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
https://modernizr.com/  
- aminwi
y-axis in CSS go down for (+) value
 - delta
background-clip to mask image background to font
 - delta
1. graceful degradation and 2. progressive enhancement
 - delta
lynx - a text based browser (an extreme content accessibility test)
 - delta
trello is using icon font! https://blog.fogcreek.com/trello-uses-an-icon-font-and-so-can-you/
 - delta
generate your font icon: https://icomoon.io/app/
 - aminwi

Quite rambling I know. But maybe it’s more useful if you had attended the course. Go to Learnemy to find something to learn! Then don’t forget to use qiscus while you’re at it!

ps. Sayanee and Simon, I’m going rock climbing this Sunday. Wanna come along?

Comments

Leave a Comment

Show Buttons
Hide Buttons