I'm Yu Siang, a visual designer based in Singapore. I love making pretty and meaningful stuff, like illustrations, logos and magazines, and I'm particularly interested in UX design.

I graduated with a Bachelor of Business Administration (Accountancy). Which means I can converse with you about kerning, white spaces, conversion funnels and profit margins in the same breath—if I inhale deeply enough.

I created a project called Building Singapore, born out my love for the country. I also publish my own webcomic. This website is coded by me.



H
D

TEO YU SIANG

Standing on the shoulders of giants

Coding this website wasn't easy, but it could have been much, much more difficult if not for these amazing and free online resources.


Learning to code

Codecademy
Codecademy makes learning HTML, CSS, Javascript, and other coding languages easier and more fun (and free!). Plus, the site has incredible UI and UX design.



Coding your website


Brackets
Brackets is a clean, lightweight and modern text editor. What's great about Brackets is its live preview function, which allows you to edit your CSS and see the changes immediately. Also, when you mouse-over a particular CSS selector, the parts of the browser that it's applied to will be highlighted.



Coding and design resources

Stack Overflow
Most of my HTML/CSS/Javascript/Jquery troubleshooting is done by consulting this site, which is a Q&A forum for professional and enthusiast programmers.

W3Schools
W3Schools is an online web tutorial site, but I've used it mainly as a coding dictionary of sorts.

W3Schools' greatest resources are its HTML Validator and CSS Validator, which helps you check your lines of code for any errors (how cool is that)!

CodyHouse
Codyhouse is a great free library of HTML, CSS and Javascript nuggets, which you can integrate into your website to create pretty animations, forms, navigation bars, etc.

Awwwards
Sometimes you want to design a particular page, but just don't know where to begin. That's when I go to Awwwards. It's a useful place to go to get web design inspiration. The website regularly awards (duh) well-designed websites around the world, and even filters the winners by categories, tags, countries, etc.

Do note, though, that some websites on Awwwards might not be that well-designed, and award winners tend to be too graphically heavy, resulting in laggy websites.

Google Fonts
Google Fonts provides a great (but somewhat limited) font library for your website. All the font families listed are free (hence the limited range), and you can even check the impact of your font choice on page load time!

Wondering what font combinations would work on your website? 25x52's project, Google Web Fonts Typographic Project creates many font combinations (some are nice, some aren't) for you to consider and pick.



Share:






What to read next: