HTML + CSS

Everyone writes HTML & CSS, but do you really know it? Learn how to write modern, standards-compliant front ends for the web, and dive into the best tools for keeping it sane.

Lessons

Each lesson focuses on a single aspect of building the project, like modeling the data, building a GraphQL server in Elixir, or building a mobile client for it in Flutter.

free

HTML & CSS

A brief introduction to HTML & CSS.

free

What is HTML?

Learn how HTML lets you structure content for the web.

free

Semantic Markup

Semantic markup brings meaning to your HTML.

free

What is CSS

Learn the anatomy and basic usage of CSS.

free

Inheritance and Cascading

We explore inheritance, and learn why that C in CSS stands for Cascade.

free

Exercise - Character Sheet

Create a simple character sheet with HTML and CSS

free

HTML & CSS Weekly Drip #1

Sites every HTML & CSS developer needs for reference.

Semantic HTML5 Elements

We start exploring HTML5 semantic tags, and solution to our character sheet exercise.

CSS Resets

Why and how to use CSS Resets and Normalization to make your development life easier.

HTML5 Semantic Elements Part 1

Building a basic styleguide, starting with semantic containers.

IDs, Classes, and Specificity

Targeting elements with IDs, Classes, and how Specificity works

HTML5 Semantic Elements Part 2

Building a basic styleguide, continuing with semantic elements

Semantic Page Creation

An exercise to create a semantic blog post

free

HTML/CSS Weekly Drip #2

iframify challenges styleguides, learn what elements you can use, better 404 pages

Measuring Length in CSS

A survey of units, and a guide to the best ones to use for a given purpose.

Common Patterns for CSS Typography

Creating consistently styled text, readable typography, and open source projects to help

The Box Model

CSS Shorthand, The Box Model, and centering with margin auto

free

The Position Declaration

Learn the basics of position and z-index in CSS.

An Introduction to Floats

Using floats to wrap and stack content.

Exercise - Position and layout

A quick exercise to play with the position and float directives.

free

HTML/CSS Weekly Drip #3

New Foundation email templates, SASS Datatypes, and Flexbox patterns!

Best Practices Part 1

Best practices on organizing your CSS rules and declaration blocks.

Media Queries

An introduction to basic media query usage.

Flexbox Containers

An intro to flexbox and flex container rules

Flex Items

A deep dive into flex items, flex shorthand, and vertical centering

Flexbox Examples

When to use flexbox, real world layouts, and nested flexbox

free

Intro to Middleman

A look at Middleman, the Ruby based static HTML & CSS site builder

free

Middleman Data and Extensions

Installing extensions into Middleman, and using Middleman Data

free

Deploying Middleman

Deploying a Middleman site to GitHub Pages and S3

free

Blogging with Middleman

Five minutes or less to a basic blog

HAML Part 1

Exploring the basics of HAML with Middleman

Build a 2D Animation Using Only CSS

Building a simple 2D animation using only css

Build a simple 2D Hot Air Balloon animation using only CSS

Learn the concepts behind 2D drawing and animation using only CSS by building a simple 2D Hot Air Balloon animation

Build a 3D animation using only CSS

Learn the concepts behind 3D drawing and animation using only CSS by building a 3D animation of coins falling to the floor

Build a 3D Mobile using only CSS

Building a 3D Smartphone using only CSS

Animation Sub-properties and Their Effects

Learn how animation sub-properties affect your animation by applying different values of each one to a simple 2d animation.

Designing an Email Template

An overview of the best practices when designing email templates.

Building a Responsive Email

Build an email template while doing an overview of the best practices for developing emails

Building a Responsive Email using Fluid Technique Part I

Build an email template using fluid technique while reviewing best practices.

Building a Responsive Email Using Fluid Technique Part II

Build an email template using the fluid technique while reviewing the best practices for developing emails.

Testing, tools, utilities and tricks

Overview of some of the best tools for email development and how to apply some effects.

Introduction to Sass Part One

A brief overview and practical intro to Sass.

Introduction to Sass Part 2

Refactor our Sass project with Variables and Mixins.

Complex mixins in Sass

Learn how mixins, loops and conditionals work in Sass and how they can automate your style workflow.

Complex mixins in Sass Part II

Learn how mixins, loops and conditionals work in Sass and how they can automate your style workflow.

Build your own 8-bit character using Sass Part I

Functions in Sass Outline: functions, directives, loops, conditionals, sass methods.

Build your own 8-bit character using Sass part II

Styling the character using Sass.

Build your own 8-bit character using Sass part III

Animating the character

Build your own 8-bit character using Sass part IV

Automating character animation.

Authors

The code in the applications was produced by:

./adam dill

Adam Dill

Adam has over 19 years of software development experience, and has spent a good part of that educating new developers. He was previously CTO at inside.com and Development Director at Maxmedia . When Adam isn't coding, he is off hiking in Colorado mountains, or practicing some pretty fly martial arts. He thinks swords are cool.

./alexander pulido

Alexander Pulido

System Engineer with 5 years of experience in software development, Alex is passionate about programming and Computer Science and thinks that the proccess where the code transform into a great app is something fascinating. When Alex is not coding, he's practicing mma, playing drums or cooking.

Featured Lessons

Our content library is pretty great, here are a few lessons we think you might like.

What our Superusers are Saying!

Some other people were willing to publicly state that they like us!

Taylor Dolezal

Software Architect

Smooth Terminal has easily been one of the most helpful resources on my journey to better understand Elixir and the Phoenix web framework.

James Edward II

Developer

With any language there are so many details to learn. What functions are built-in? How should I structure my code? What tools are available for improving my workflow? It’s rare to find one source that can answer so many of these questions, but Smooth Terminal does this and more.

Rex Van Der Spuy

Game developer

Smooth Terminal is by far the best resource for learning Elm anywhere, and among the very best online learning platforms, period.