Skip to content

Instantly share code, notes, and snippets.

@gilcreque
Last active Jan 10, 2018
Embed
What would you like to do?

Google Fonts

Google has a number of non-standard fonts to use. The way the site works, you create a collection of fonts that you like. Google then gives you an HTML tag to put into your document that links to this collection, which then allows you to utilize the fonts through the font-family property, connecting to Google’s server for the font rather than looking on the user’s computer.

Color Lab

Find compatible colors

w3schools

w3schools in general is a great resource for anyone interested in HTML and CSS, but this page in particular is useful when it comes to using color. They have a simple color picker, similar to the one found in Microsoft Paint, that outputs the color’s hexadecimal value. This number is used as the value for the color property in CSS. So, for example, color: red can also be represented as color: #FF0000. It is good to get into the habit of using a color’s hexadecimal value rather than its name. It has a number of tutorials to help remind you of what a tag does in case you forget, or if you find yourself asking “how do I do this?”

Adobe Color

Making a site work is easy. Making it work is another matter. Sometimes it is difficult to know what colors to use, which is why tools like Adobe Color are so useful. It allows you to select a color, a color theory rule to follow (triad, complementary, etc.), and gives you other colors that match the one you started with. It also gives you the RGB and Hexadecimal values of the colors, which is great for CSS.

Bootstrap

Bootstrap is a front-end framework created by the Twitter team that combines HTML, CSS, and Javascript. It contains a number of built-in templates for forms, buttons, navigation, and other useful interface components. Rather than write all that HTML and CSS yourself, everything is done for you in the form of IDs and classes, so you can just pick and choose to create the site you want. It is an incredibly easy-to-use tool that really speeds up the webmaking process.

Emmet

Emmet is a plugin compatible with a large number of text editors that greatly improves HTML and CSS workflow.

Unsplash

Unsplash is a large collection of free to use high quality stock photos. Remember to give credit when you can.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment