SuperHi supports net neutrality.
Help stop ISPs from messing up the internet.

We’ve written a book about learning to code

We tried to recommend our students good books to read for learning HTML, CSS and Javascript but we found nothing great. Most guides were too technical, badly-written or just dull. So we made our own.

It's 440 pages long and we’ve aimed it especially at people who work in the creative industry but anyone can read it. We called the book “Learn To Code Now” and we really hope you enjoy it.

“Honestly I wish this book had been around when I started coding.”
Daniel Howells

Daniel Howells

Founder and curator of SiteInspire

What’s in the book?

We cover everything a creative person would need to know when learning to code with HTML, CSS + Javascript – the building blocks of web design.

  • Foreword by Frank Chimero
  • What are all the different programming languages?
  • How to pick the right code language for the right job
  • Five common mistakes when learning to code
  • How to make a website
  • Recapping front-end web development
  • But how do you write code?
  • Wait? The internet and the web are different?
  • So why not just build an app?
  • Let’s talk about HTML
  • Images + file types
  • White space + indentation
  • Connecting HTML + CSS
  • Typography using CSS
  • Search engine friendliness + meta tags
  • Styling with color
  • Backgrounds
  • Blurry backgrounds and retina screens
  • CSS parallax effects
  • Background gradients
  • Hover states + transitions
  • Classes in HTML and CSS
  • The box model – borders, paddings and margins
  • Rounded corners with border radius
  • Photoshop-style filters
  • Multi-column layouts with floats
  • Transparency with opacity and rgba colors
  • Drop shadows
  • Mobile-friendly designs with media queries
  • CSS displays – inline, block and inline-block
  • Positioning – fixed, absolute and relative
  • Cursors and mouse pointers
  • Transforms: rotations, scaling and skews
  • Vertical alignment
  • Head tags
  • Flexbox – complex layouts made easy
  • CSS animations with keyframes
  • Using steps to animate images
  • Forms and inputs
  • Audio, video and media
  • Video backgrounds
  • Web fonts using @font-face
  • Starting with Javascript
  • For loops
  • Functions
  • Adding your scripts to your pages
  • How to work with jQuery and why?
  • Javascript events
  • jQuery animations
  • Fade and transitions with CSS and jQuery
  • Timers, intervals and delays
  • Javascript parallax
  • Progress bar scroll
  • Ajax – get and send data after page load
  • What is JSON?
  • Animation using Javascript
  • Mouse + touch movements
  • Make your own light box
  • jQuery plug-ins
  • Fixing your own code
  • Integration with back-end code and 3rd party services like Squarespace, Wordpress and Tumblr

Get the table of contents and three samples

“Hover states and transitions”, “positioning” and “timers and intervals”

Read the book’s foreword

The house where I was raised was an ideal place for our family, except for one serious flaw: the house did not have my parents’ fingerprints on it. So began a constant construction project that lasted almost a decade. Bathrooms were moved and walls knocked down; skylights were installed, had their leaks fixed, then uninstalled for the trouble they caused. My parents removed the attic, raised the ceilings, bought a larger Christmas tree to take advantage of the new vertical clearance, then celebrated the New Year by re-tiling the bathrooms.

One day after arriving home from school, I saw my father hovering over a giant stockpot with wooden strips fanned out over the rim like uncooked spaghetti. He was boiling the planks, he said, to soften them. He’d then slowly form each strip along the curved edge of our built-in bookshelf to use as trim for the semi-circular shelves at the end. My father was taught this method by my grandfather, another amateur furniture maker, and now it was my turn to learn the process. “Pay attention to the wood, follow the grain, and if you take care, the wood will bend and not break,” he said. This was clearly intended to be a life lesson as well as a lecture in woodworking, the kind of practical inheritance that fathers like to provide their sons. Be patient. Be gentle. Got it.

Carpentry didn’t take. Ten years of growing up in a construction zone made me swear off woodworking. (Also, we got a computer the year after my lessons in woodwork. How could I resist?) Instead I design and build software, which has its own methods and tricks, but I still find myself returning to my dad’s lesson. All materials, whether wood or pixels, have a grain, and that grain suggests the best way to work. Go with the grain and one will find sturdiness combined with tremendous flexibility – a natural and exciting give that grounds decisions and excites with possibilities. Work against the grain and the work becomes precarious, difficult and fragile. Instead of the elegant bending that software requires to adjust to different screens, uses, and situations, the work breaks because it cannot adapt.

“Good work is grounded in attention to detail, and knowledge of and respect for the materials.”

This idea of a grain, however, flies in the face of our expectations for technology. Software is often presented as a wide-open, infinitely malleable material. We expect technology to help us overcome limitations, not produce more of them. Can’t I do what I want? Only to an extent.

We use teak for outdoor furniture because it is weather resistant. We use white pine for wood carving because it is soft. These kinds of rationale also go for designing software. On screen, we use flat colors and simple gradients, because they’re lightweight, easy to programatically draw, and can scale for areas of varying proportions. Sites have horizontal stripes of content stacked vertically, because that is how we read, and it is easier for most users to scroll vertically than horizontally. All of these design choices come from a knowledge of the materials at hand. What is the grain of software? It has to do with fluidity. People who work on software create flexible systems that can deal with variability: content of varying lengths, connections of different speeds, users with many kinds of ability and attention span. What does the page look like if it is empty? If it is full? And every possibility in between on a mobile device? Working with software is never designing towards a fixed artifact like a chair or book. Instead, it is defining and designing conditions for a whole set of possibilities.

The easiest way to explore and test these possibilities is by working with the raw materials themselves. Learn a bit of code and fiddle with things. A sturdy knowledge of HTML, CSS and Javascript goes a long way towards understanding what is possible with the medium.

You will make mistakes. Things won’t work. But you will be in good company. We all get it wrong on the first, second, even third tries, no matter how much experience we have. Getting your hands on the materials is a learning process for all of us. We feel the grain and discover the contours of the problem we are to solving, and revise when our efforts don’t work quite as expected. Luckily, code and pixels are free, so your trials and errors should be less expensive than the considerable amount of lumber I’d waste if I ever took up woodworking.

My father never fully understood what I did for a living, but we could always find common ground in craftsmanship. Good work is grounded in attention to detail, and knowledge of and respect for the materials. The more experience I gain, the more this proves itself. Pay attention, respect the material, listen to how it guides you, and be gentle. You’ll be surprised by what you can do and how flexible it all can be.

Frank Chimero

Our foreword was written by Frank Chimero. Frank is a designer, writer, speaker and illustrator.

Frank has written the acclaimed book The Shape of Design, was a co-founder at Abstract and has worked with clients such as The New York Times, Nike, Wired, Time Magazine, Microsoft and Starbucks.

He is currently running his own design practice based in Brooklyn.

You can read more about Frank on his website and you can follow him on Twitter.

About the author

Rik Lomas is the founder and CEO of SuperHi.

Rik was previously the co-founder and CTO of Steer, and the chief product officer at Picfair. He was one of the first instructors at General Assembly London and previously worked at several creative agencies including SapientNitro, Start Design and DigitasLBi.

He has spoken at international events, has written many popular articles and is an advisor to several startups. He is, like the Sting song, an Englishman in New York.

You can follow him on Twitter + Instagram, or email him at [email protected].

Rik Lomas

With help from...

Holly Holmes, Christine Lomas, Milan Moffatt, Lawrence Gosset, Adam Oskwarek, David Holmes, Simon Whybray, the team at Koto and Tony T the cat.

SuperHi Editor

Get the SuperHi Editor

Each copy of the book comes with the SuperHi Editor – an AI-powered code editor made especially for beginners (not nerds) that makes it easier to spot where you're going wrong.

You can see more of the SuperHi Editor in SuperHi Video, but it comes with version control, smart helpers, typo correction and Wilson – our intelligent assistant.

You can host your own sites on there too, just like Dani, Sarah, Marisa and Kevin did!

It's currently in beta but you'll get a special access code to it.

Buy the book

Digital only Print + digital Foundation course
PDF version Yes Yes Yes
EPUB version Yes Yes Yes
Kindle version Yes Yes Yes
Digital book updates Yes Yes Yes
Access to SuperHi Editor Currently in private beta Yes Yes Yes
SuperHi Video Exclusives Yes Yes Yes
Printed copy Shipping 1-3 weeks No Yes Yes
8-week structured course Hours of video content No No
Email + Slack support Get help quickly No No
1-to-1 video chat help with our expert instructors No No
Continued learning support As learning never stops No No
$29 Buy now $59 Buy now $499
Have a question about the book? Just ask!

We’ve taught students from...

Google
Airbnb
Adidas
Facebook
It's Nice That
Salesforce
The Guardian
Snapchat
ustwo
Huge
Pentagram
Bustle
Kickstarter
AIGA
Deliveroo
The New York Times
Vox Media
D&AD