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.
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.
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.
These resources are great places to look for information on your own, after the talk.
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.
CodeAcademy
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
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.
Materialize
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.
Bootstrap
Brackets
Awesome, lightweight web development environment with support for live
previews!! Highly recommended for creating websites quickly; stop wasting
time refreshing Google Chrome.
Brackets
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.
CodePen
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
.