Seattle CoderDojo’s ‘Build a Website’ room is pretty much what it sounds like. Kids learn how to build a web site.
How Do We Use It? – Browse through the list of tutorials below and pick the one that seems most exciting. Some have all the needed tools built in. Some will require additional tools (we have provided a list of tool options below the tutorials list). If you need help, look for one of our friendly mentors.
Key Terms
HTML is Hypertext Markup Language. It provides the structure or scaffolding for a website.
CSS is Cascading Style Sheets. Styles help you add important design elements/specifications to that structure.
JavaScript is the programming language that every browser understands. It is used to add interaction to the site.
What’s on this page
- Tutorials
- Tools & Resources
Tutorials
Beginner Tutorials
BEGINNERS: Basic HTML for Kids (video heavy) from Pluralsight is a 1 hour intro to coding that goes through basic elements and stuff like using a text editor. This uses a lot of videos, so please have & use headphones.
BEGINNERS: Welcome to Tuts Town
Over the course of 9 lessons, you’ll learn about how the web works, how web sites work, and build the official website for Tuts Town in Joni Trythall’s great series for kids at Tuts+.
BEGINNERS & UP: General Assembly’s Dash
Dash teaches 82 HTML, CSS, and JavaScript skills over 5 really fun lessons. Start with building a personal site, then a blog theme, then a business website, then a robot using CSS, then finally build a MadLibs game with JavaScript. Our ninjas really seem to like this one. (requires registration)
OLDER BEGINNERS & UP: Build a Photo Booth – From Code.org’s collection of great partner tutorials, learn from Code Avengers how to build a web-based photo booth. Starts easy, no experience necessary, gradually increasing in complexity. Has own built-in code editor. (Alternatively, Make a Digital Postcard.
OLDER BEGINNERS & UP: Khan Academy HTML & CSS
Khan Academy is one of the world’s best places to go learn things. This will take you from your first HTML tags to CSS layout, browser dev tools, and more as you build multiple sample web sites. This uses a lot of videos, so please have & use headphones.
OLDER BEGINNERS & UP: Udacity’s Intro to HTML & CSS – This is a more in-depth tutorial for older students who are interested in building a more solid HTML foundation. This uses a lot of videos, so please have & use headphones.
Intermediate Tutorials
Learn JavaScript with CodeMonster – Start from manipulating shapes to learning about JavaScript objects. If you complete this, you’ll be ready for Game Maven which will walk you through building some cool games.
Seattle CoderDojo Retro Gaming Workkshop – Learn some basics of the Phaser game framework, then learn how to build clones of Simon and Space Invaders that run in a web browser. You’ll either need to install Git and have some way of hosting a web server locally, or you can ask Greg or Chris to invite you for a student Cloud9 account.
Free Code Camp – This professional developer certification program has helped thousands and thousands of people get their first developer job. And IT’S FREE. You start with your first HTML element, as beginner and basic as you can get, then build on that to learn complex front-end web developer skills, then back-end web developer skills.
Create your first Angular app – requires you have node.js installed and a TypeScript friendly editor like Visual Studio Code (see below).
Tools
Free Text Editors
Any good web developer has a text editor that helps keep track of the coding languages they’re using.
Downloadable Editors
Pros: No internet needed to use since they’re installed. Tend to be better for working in multiple coding languages. Often have more features than online editors.
Cons: Must be installed on any machine you plan to work on, you need to own the machine and/or have administrator rights to install, usually don’t offer save/share/remix options.
Visual Studio Code – A lightweight code editor from Microsoft that comes without the hours of installation and gigabytes of space Visual Studio requires, but with many of Visual Studio’s best features. Open source, written in JavaScript on the Electron platform, plugins for improving coding in multiple languages, works on Windows, Mac, and Linux.
Atom – Visual Studio Code actually started from a much earlier version of this Open source editor by Github. They are similar in some ways, but different enough that most coders who’ve tried both have a favorite. Runs on Windows, Mac, and Linux.
Komodo Edit – Sort of a half-way point between text editor and IDE, the open source Komodo Edit has been around for 11 years and is still in active development. The User Interface is a bit more like an old school IDE, but it’s still a darn useful program. Works on Windows, Mac, and Linux.
Why isn’t [My Favorite Editor] recommended? Because it’s not free, not multi-platform, or we already have enough suggestions for this to be good. This isn’t a comprehensive catalog, just a few good suggestions.
Online Editors
Pros: Available anywhere you have connectivity on any computer with a web browser. Great for kids who are borrowing a laptop (from us, from their parent, etc.) but would like to save their work to keep going outside of dojo.
Cons: Requires a connection to the internet, may be limited in the languages and features it can work with.
CodePen – A basic pen is four panes: HTML, CSS, JavaScript, and the result. The result updates as you add more code. With their “Projects” feature, you can create more complex projects. Offers save/share/remix options.
Mozilla Thimble – Good editor with multi-file handling, preview pane, save/share/remix capabilities, sort of like CodePen’s projects, but more child friendly.
Cloud9 – We have used this in a number of workshops. It provides a very good text editor, file manager, and a free small-instance Linux server. Kids can work on web development, shell scripting, Python, PHP, node, and a wide variety of other options. There is a fee associated BUT if you are at one of our meetups you can ask Greg or Chris to send you an invitation for a free student account in Seattle CoderDojo’s organization.
Free Photos and Clipart
Pixabay – Pixabay offers lots of free photos you can use in your website. They also have vectors (drawing images you can edit with a SVG editor), and some cool videos.
Open Clipart – Dedicated to providing public domain drawings in SVG format. Quality is definitely mixed, but there are lots of gems.
Free Photo Editors
GIMP (download) – The oldest and most respected open source photo editing and painting tool. TONS of tutorials around the web.
Pixlr (online) – Full featured photo editor and painting tool that runs in your browser.
Free Drawing Programs
InkScape (download-only) – A free drawing editor similar to Adobe Illustrator. Open source, LOTS of tutorials online. Works on Windows, Mac, and Linux.
Gravit Designer (download and online) – A free drawing editor that’s online, but can also be downloaded as a packaged app from the Windows 10 App Store. The controls are a little confusing at first, but you can learn. We used this for the 2D Game Art session during the “Summer of Games” in 2017.