Web Development (Front End) Track

Introduction

If you have always wanted to create a nice looking website to display some information about you or something you care about, this is the track for you! Whether you are a complete beginner or you have already made a few web pages, you should find something new to learn here. This track concentrates on Front End development (HTML/CSS/JavaScript) which is, in basic terms, what the users see when they load up your site. Take on our Create a Website classes if you are just starting and code your very first website, while learning the various concepts and features of the web languages, or look into our CSS Deep Dives for more advanced learning opportunities!

Upcoming Roots Sessions

Course Location Date Time

Roots Workshops

Active Courses

Tutorials

Rackmultipart20201106 9 w703c8

Audio, Video, Pictures: Use and Storage

Learn how to add pictures, videos, and audio to your page and how they are stored.

Learn More
Rackmultipart20200922 9 yy76pt

How to Reorder with CSS Grid

This short tutorial will walk you through the magic of CSS Grid

Learn More
Rackmultipart20210211 9 140zros

Vue.js

A tutorial on Vue.js basics covering introduction, installation, initializing a project, running, understanding vue structure, components, props and directives

Learn More

Exercises

Rackmultipart20210301 9 1nac2h6

Django

This tutorial covers the basics of Django including installation, initializing a project and understanding how Django works. 

Learn More

Inactive Courses

These are courses that we've offered in the past, and hope to offer again in the future. Check back again soon to see if we have a session planned for these courses, or sign up for our newsletter to hear when we announce new opportunities.

Course Graphic

Create a Website: Structure (Intro to HTML)

In this class, you will learn the basics of HTML, the content language of the web. We will explore HTML usage, its syntax and best practices when it comes to HTML file setups. We will also look into key features of HTML such as relationships between elements, the box model and specificities (classes, ids, attributes).

Learn More
Course Graphic

CSS Deep Dive: Break out of the Box with CSS Shapes

Come to this workshop to learn how to make text follow the curve of an image or create new shapes to build dynamic compositions on the web.

Learn More
Course Graphic

Intro to APIs

API is one of those terms we hear thrown around in the tech world a lot, but what are they? APIs are how our applications talk and interact with one another. In this workshop we will learn the basics of using a REST API over the web.

Learn More
Course Graphic

Intro to JavaScript I

What is Javascript? Is it related to Java? What is vanillaJS? Is it hard to learn? I know you have many questions, and this workshop is here to help you bust these myths.

Learn More
Course Graphic

Express Yourself: an Introduction to Node.js & the Express Framework

This class will go over the basics of the express framework using NodeJs. We will discuss various frameworks, and why you would want to consider Express. 

Learn More
Course Graphic

Create a Website: Interactivity with Javascript

In this workshop, we'll take the website you've been working on throughout the 'Create a Website' courses, and add dynamic features like sorting, hiding/showing displays, and image manipulation to turn your static pages into living documents.

Learn More
Course Graphic

Intro to JavaScript II

This is the second part of the Javascript courses. In this course, we're going to take your own website, and bring it to life!

Learn More
Course Graphic

CSS Deep Dive: the Power of Grid

Come learn how you can place html elements wherever you like, however you like on a page regardless of their html order with CSS Grid. Change the vertical and horizontal alignments of any item, and forget about all math calculations!

Learn More
Course Graphic

Create a Website: Styling (Intro to CSS)

In this class, you will learn the basics of CSS, the styling language of the web. We will explore CSS usage, its syntax and best practices when it comes to CSS file setups. We will also look into key features of CSS such as the cascading model, and the specificity model.

Learn More
Course Graphic

CSS Deep Dive: CSS Animations

Want to have super cool animated effects on your web pages without having to use JavaScript, gifs or videos? Well, look no further than this class, where you will get an introduction to the different types of CSS animations you can use.

Learn More
Course Graphic

Create a Website: Layouts (Responsive CSS)

In this class we will fine tune some of the previous CSS rules we worked as well as learn brand new things to create more complex and overall better layouts that can be experienced comfortably from any device.

Learn More
Course Graphic

Intro to React

If you have experience in HTML, CSS and Javascript, and you want to learn a framework to make it easier to organize website structure, you're at the right place.

Learn More
Course Graphic

Backing up and Sharing Code: Git

Tried to use Dropbox for sharing code with collaborators on a project, but accidentally deleted someone else’s work? Ever wished you could undo that “improvement” you made? Whether you’re working with others, or on your own, using git can make development a much more sane and enjoyable process.

Learn More