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.
Find compatible colors
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?”
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.
Emmet is a plugin compatible with a large number of text editors that greatly improves HTML and CSS workflow.
Unsplash is a large collection of free to use high quality stock photos. Remember to give credit when you can.