Resources For HTML & CSS

Reference and Tutorial Websites

  • W3Schools
    A great quick reference when you need a 30-second refresher on a HTML tag or CSS property. Its reference section has less verbose descriptions than a tutorial website, and its try-it examples are short and to the point. There are also tutorials on W3Schools, but in my opinion the reference is where its at.
    HTML Tutorial - HTML Reference - CSS Tutorial - CSS Properties - CSS Selectors
  • TutorialsPoint
    Usually has more in-depth explanations than W3Schools, so might be better if you really want to learn a lot about a topic. The tutorial is verbose in its entirity, but it is organized into sections, so you can jump to very specific topics. If you pretty much know how to write CSS, but need a detailed lesson on a particular thing, TutorialsPoint is perfect.
    CSS - HTML
  • CodeAcademy
    Step by step instructions, with rendered content on the side. CodeAcademy has a nice learning environment, but I find it gives you too much help, and takes a long time to get through, relative to TutorialsPoint where you can skip sections you do not need.

Design Resources

  • Adobe Color
    With absolutely no knowledge of color theory, you can generate some really satisfying color palettes from this site. Just copy the hex colors into your CSS.
    Adobe Color
  • Google Fonts
    Free web fonts that save you a bunch of time and can be loaded from Google’s servers, reducing the strain on your machines. With Google Fonts, most small projects can be done without having to pay for fonts or serve them yourself.
    Google Fonts

CSS Frameworks

It is important that you understand how CSS works, and know how to mess around with CSS code, but it would be a waste of your time to write a ton of CSS yourself for a simple project page or side project. Since you can apply CSS to any webpage, there are a lot of frameworks available for use, that will come with custom components and convenience classes that will look nice right out of the box. For side projects, I like to start with a framework, then add on to it as needed. Usually frameworks incorporate some sort of layout model, allowing you to create dynamic content by just adding classes to your <div> tags.

  • Materialize
    A CSS framework to bring material design to your webpage, with absolutely minimal effort. It incorporates Material concepts such as cards, toasts, and wave animations, as well as Material color palette. It also comes with a large set of icons to use with it. Check out the vertical align helper class. Doing vertical align in CSS is so much easier with Materialize than with custom CSS.
  • Bootstrap
    Before Materialize, this was the go-to framework for making things look less shitty with minimal effort. It is older than Materialize so has a lot of support, some neat JS functionality, and a large number of SO posts to answer any questions you may have. That said, Materialize is usually regarded as much better looking than bootstrap.

Developer Tools

  • Brackets
    Awesome, lightweight web development environment with support for live previews!! Highly recommended for creating websites quickly; stop wasting time refreshing Google Chrome.
  • CodePen
    In-browser Web Dev playground that lets you work with HTML, CSS, and JS simultaneously. This is great for messing around and fiddling with CSS in a localized environtment, rather than your entire webpage.
  • Chrome Developer Tools View any website’s source, and experiment with its CSS using this feature in Google Chrome. For Mac, the keyboard shortcut is CMD+alt+i.

Previous Resources

This workshop has been run before. Here are the resources that were used last time.

From the Workshop

On the Web