Skip to main content

📖 References & Resources

Knowing how to find the info you need

The main skill of creating websites with HTML & CSS isn't memorizing all of the names of every tag and property. It's knowing how to search for and find the info you need to do what you want to do in a given moment. Searching on your preferred search engine, and knowing the search terms to use, is a good starting point. There are also many more specific collections of reliable reference materials, and online guides and tutorials. Below are some of the ones we've found most helpful; we'll keep adding to them as we find more.

References

W3Schools

The number one point of reference I'd recommend for both HTML and CSS is W3Schools. If you are looking to find info on a specific HTML tag or CSS property, there is a search function; or just visit the HTML or CSS sections and browse the lists of pages in the left sidebar.

There is also a pretty cool CSS demo page here.

https://www.w3schools.com/

Guides and Tutorials

General HTML & CSS Tutorials

Guides for Handmade/DIY Websites

Specific How-Tos

Advanced CSS Topics

CSS Fonts

Using web fonts (providing your own font file — this allows for more customization):

Using system fonts (using fonts already installed on whatever device the page is being viewed on — this allows for faster page load):

CSS Flex & Grid

Flex and Grid can be very powerful tools for creating layouts, but potentially confusing. Even after using them many times, I still always refer to these two pages:

These are some cute games to help you get the hang of using them:

Embedding Audio and Video

Many 3rd party websites, such as Youtube, Vimeo, and Bandcamp, offer an embed code that you can copy and paste into your HTML in order to include a video or audio embed on your site. However, since these are basically embedded frames of their website inside your website, there are a lot of limitations on how much control you have over the appearance and behavior of this type of embed. Additionally, since visitors to your website will also be loading the 3rd party's website, this can allow the 3rd party to track and monitor your visitors' activity.

It is also possible to embed video and audio files directly on your site with the HTML "audio" and "video" tags. This allows you to have more control over the embed, though the default appearance of the controls will be determined by the browser. This is also a more advanced option since it requires a deeper understanding of files and encoding types, and you will also need to host your own media files which can be a lot larger than plain HTML files.

To get started embedding your own media files using HTML tags, check out these links:

If you want to customize the appearance of the player, you'll need to use javascript, which is outside the scope of our class. But, here's a tutorial just in case anyone wants to dig into that:

Media Queries

Media queries are used to change how your webpage looks based on the size of the screen it's being viewed on. They can come in really handy, but if your layout is simple enough it should work well on all devices without needing a lot of them.

CSS :target Selector

A fancy CSS feature that lets you highlight or affect an element with a target ID in the current URL. If this doesn't make any sense to you please ignore it.

Back to top