coderdojo
Beginner HTML & CSS

Updated a day ago

  1. Go to dojo.soy/trinket and click "Sign Up For Your Free Account" if you do not already have an account. You will need an email address to sign up.
  2. Enter your email address and choose a password, or ask somebody to do this for you.
  3. Creating an account allows you to save your work and access it from any computer. It also allows you to make a copy of a project somebody else has shared with you so you can make your own changes to it!
  4. Go to dojo.soy/html-b-start. You will see a box containing an example website project. On the right hand side is the website, and on the left hand side is the code that makes the website.
    • If you are not signed in, you will need to enter your email address and password to be able to Remix the project.
  5. Click the "Remix" button at the top right of the project (if it is not green, you have to sign in and then click it again). This creates a copy of the project for you to work with. It should say "remixed" after you click it
  6. Next to the "Sign Out" button at the very top right corner of the page you should see your username and a drop-down menu (the tiny triangle tells you there is a drop-down). Click on it to show the menu and then select "My Trinkets".
    • In Trinket (this website), projects are called "Trinkets"
  7. The project you just remixed will be shown together with some example projects for other programming languages. It will be called "My First Website Remix". Click on it to begin editing!
  8. The main part of the page is broken into two panels. On the left is where you write your code. The different code files appear as tabs. On the right is your website! The grey bar in between them is a slider that you can drag to adjust the width of the website and code panels.
  9. To the top left above the code panel is the name of your project. If you want to change the name, click on it and type in a new name, then press Enter. The website in these Sushi Cards is about Ireland, but yours can be about anything you like.
  10. Click the triangle icon next to the button that says "Autorun" and select "Click To Run".
  11. You are ready to start coding!