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.
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.
What’s on this page
- Tools & Resources
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
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.
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.
Any good web developer has a text editor that helps keep track of the coding languages they’re using.
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.
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.
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.
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.
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.
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.
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.