Code First Girls CSS demo

This is just a little example HTML file for you to try to style. Put your code in style.css. If you want to see an example of the kind of stuff you can do, check out example.css - feel free to try linking it instead of style.css

Resources to use while you're working on your style

General references

• SitePoint CSS Reference and MDN CSS. The former is useful as it groups available properties by type, whereas MDN's reference is much more comprehensive but less usefully organised.
• OverAPI.com CSS Cheat Sheet

Concept-specific guides and tutorials

General layout

Useful and relatively short:

• All About Floats: basic guide to float
• Detailed guide to positioning: this explains position and float more thoroughly and gives a really good example of a columnar layout
• Creating a CSS Layout from Scratch - slightly outdated but still quite helpful
• The Anti-hero of CSS Layout - "display:table" - another way to do columnar layouts (still fraught with a few issues) is display:table - this is a good description of some ways you can use it

If you have more time / for later:

• Flexbox guide - a comprehensive guide to Flexbox, a really cool new way of laying stuff out that makes things 10x easier than floats or tables
• CSS Workshop - a detailed course on CSS layouts
• Comparison of layout techniques in CSS
• Skeleton - a really nice, simple grid system that makes columnar layouts way easier
• Fluid Grids

Text and Fonts

Must-reads:

• Basic text styling in CSS
• ilovetypography.com's guide to web typography - a slightly more concise guide
• Google Fonts, an amazing set of free typefaces that are hosted by Google (they're really easy to include - you just add an extra <link> to your HTML!)

If you're really interested, or if you're a typography nerd like me...

• How to use @font-face to include external fonts in your CSS
• Butterick's Practical Typography, an excellent general guide to typography in practice
• The Elements of Typographic Style Applied to the Web, a fairly depthy set of best practices when setting up typography
• Typekit, one of the best sources of beautiful fonts, mostly paid but some free

Images and backgrounds

• Basic guide to backgrounds: definitely read this!
• Introduction to opacity and RGBA - how to make stuff semitransparent!
• FontAwesome - this is a great set of icons that are implemented via a custom font, so you can include these without the user having to download any images at all.

Misc

• Listamatic - some really cool ways to style lists
• 10 Challenging But Awesome CSS Techniques