Welcome to Thimble

An introduction to the brand new Thimble editor, by Mozilla.

Hello and welcome to Thimble a web-based

code editor that makes it easy to create

and publish your own webpages. Let's

begin on the Thimble home page. We'll

remix the "Keep Calm" poster remix

Remixing creates a copy of a project that I

can edit and customize so here we are on

the Thimble editor with my own version

of the poster. Let's take a look around

on the left side is the file tree which

shows all the files in this project: the

index page, a stylesheet, as well as a

couple of images a thimble and a crown.

There's also the tutorial HTML file but

we'll get to that later if I want to add

additional files to my project. I can do

so by clicking this plus icon. Let's go

back to the index page. As I make changes

in the editor the preview updates

automatically because I've created an

account and signed in the changes I make

are auto saved I don't have to worry

about losing work. Thimble helps you learn

as you code. I'm pretty sure I know what

an <h1> tag is but if I ever forget I

could click on it then hit command or

CTRL K to get more help. If I want to

find out more I can follow this link for

additional information. Now let's change

the background color. I can do that in

the style.css file. Here's a cool tip

when you're editing a color hit command

or CTRL E to use a color picker like

this. Purple alright! Any project that

includes a tutorial.html file like this

one will have a tutorial mode that you

can access in the preview window. I could

switch between the tutorial and the

preview here. This project has

instructions I can follow that will help

me learn about HTML and CSS. Let's take a

look at step number three. It describes

how to change the crown image as I

follow along and edit the index file the

tutorial stays open. When I'm finished I

could switch back to the preview to see

the effect. Ok, this looks pretty good I

wonder how would look on a mobile device

I can switch between desktop and mobile

previews here. I'm ready to publish and

share my poster but before I do I want

to give it a different name. Ok now I

click the publish button and presto my

project is published and live on the web.

I can share this link with my friends

and family. Let's

take a look. Here's the finished product.

You'll notice at the top there is a

remix button. This allows me or anyone

else to create another version of the

poster for themselves. And that concludes

a tour. Thanks for watching. Click the

links in the video to get started with

your own project or visit us on GitHub

if you'd like to get involved.