Crash Course Logo

Introduction to HTML & CSS

build informative websites

The HTML and CSS talk will do two things. The first is to show your how to write HTML and CSS code that will render a webpage just the way you want. The second is to give you a basic understanding of the structure of webpages, known as the DOM. Both are important if you would like to learn to make more interactive websites using JavaScript.

How to Attend

No prior web development experience is required. Familiarity with programming in general is certainly useful but by no means required.

Bring a computer with a web browser and text editor installed. We recommend Chrome and Atom. If you prefer another text editor, such as Sublime Text, Notepad++ or Vim, feel free to use that editor instead.

Brackets is an editor specifically designed for web development. While we won’t be covering how to use it, it is a good thing to check out if you intend to do a lot of web development in the future.

Following Along with the Talk

To follow along, go to the demo website. As we introduce new topics during the talk, the companion website will show you examples of source code and its output to illustrate concepts.

The slides can be found here. The link to the the Lab can be found here.

External References

These resources are great places to look for information on your own, after the talk.

Design Resources

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.

Developer Tools