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
./alexander pulido
Alexander Pulido
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.