Resources

On this page you will find a combination of recommended tools and resources that will be useful for learning the course material, working on homework and creative projects, and some extracurricular material if you are so inclined to dive deeper. We particularly recommend checking out some of the extracurricular resources (like Animations and 3D Graphics) for experimentation in your creative projects! ;)

Also review our FAQ Page for answers to some commonly asked questions!

Quick Access - (You'll be using these a lot)

Code Quality Guide

The code quality guide for CSE 154.

Code Quality Guide

Code Validators

While these will not catch all code quality issues, they do go a long way towards finding some problems. Validating will be a required part of all creative projects and homework assignments.

Piazza Message Board

The go to place for asking any questions about homework or course material! Reminder: Do not post homework solutions on Canvas!

Piazza Message Board

Code Templates

Here's some links to suggested templates for starting projects in this class.

HTML: Basic HTML Template
HTML5 Semantic Tags: Basic HTML5 Template

Note: If saving the file, make sure to save as .html (not .htmls)!

JS Module Pattern: Basic JS Template
JS AJAX:

Canvas / GitGrade

The two resources for checking and submitting course assignments and grades in this class.

Code Examples

Examples for various topics and concepts covered in this course.

Code Examples

Tools

GitLab

We will be using GitLab to submit homework assignments this quarter.

Getting Started with GitLab on the Command Line

Here's handy command line basics tutorial for first-time users

Text Editors

We recommend Atom as the text editor for writing code in this class. However, if you prefer a different text editor (Sublime, VisualStudio, Vim, Emacs, etc.) you are free to use that instead.

File Upload Tools

We recommend Filezilla for uploading your files to a server, like your UW student server. (Use the link below to avoid "bloatware"). If you prefer a different tool (WinSCP for Windows or scp for on a terminal shell) you are free to use it instead.

Filezilla

Browser Web Dev Tools

We strongly recommend either Chrome or Firefox as browsers to view your web pages in this class. You can find useful development tools for either choice:

Local Servers

Use these to do server development all from your local machine

Mac MAMP
Windows MAMP
Atom php-server Package

You need PHP installed to use this, but there's a very easy way to run PHP programs directly from Atom!

MySQL MAMP

Windows Shells

Simulate a Linux machine on your Windows machine. Not needed for Macs because you can run Terminal on Macs (search for "Terminal" in your navigator tool).

Ubuntu for Windows 10
Cygwin

Colors & Gradients

Colors are pretty important in web design. Here are a couple of our favorite resources for finding just the right color. Bonus addition: gradients!

With options to view with different types of color-blindness filters!

Fonts

Just as important as color are fonts. Once again here are some of our favorite resources. (Google fonts is amazing just fyi).

Icons

Adding icons to your website can add an extra touch of professionalism. Here are a few libraries of premade icons.

Languages & Technologies

HTML

These are a couple awesome HTML resources. The first three links are HTML tag references (check them out and see which one you prefer).

This is an amazing resource for learning about website SEO!

Div vs. Semantic Tags
HTML Symbol Codes

HTML Inputs/Validation

Getting user input is important. Here are two great links for learning about the HTML input tag and how to validate user input once you have it.

CSS

Here's a couple links for getting initially acquainted with CSS.

CSS Reference
MDN CSS Reference
CSS Terms & Defintions
CSS Vocabulary
A CSS Selector Game!

Note, not all tags are "real", but this is great to practice different types of CSS selectors!

Web Style Guide (Lynch and Horton)

CSS Layout & Flexbox

Need to organize the elements of your website in a specific fashion? Check out these links to figure out how.

A Complete Guide to CSS Flexbox
Flexbox Ducky

Our very own custom themed CSE 154 game for practicing flexbox!

Flexplorer

A webpage to explore different flex layouts with colored boxes

CSS Layout Slides

Mobile Friendly CSS

With the majority of internet access happening from the screens of mobile devices, it's more important than ever to know how to design websites that are responsive.

Responsive Design with CSS Media Queries

CSS Animations

You can accomplish a stunning variety of animations with CSS. Begin to learn how with these links.

CSS Animation For Beginners
CSS Animation Generator
CSS Animation Chrome Extension

This is another amazing tool for creating and protoyping CSS animations. Here's a good tutorial on how to use it!

Animation on Scroll Library
Animate.css

Random CSS Things

An uncategorized list of random, but cool, CSS things.

Fancy Border Radius Generator

JavaScript

Incorporate some behavior and functionality into your website. Here are some links to get started with JavaScript.

JavaScript Animations

Fun fact, you can create JavaScript animations too! These are a couple awesome libraries that make animating way easier.

Anime.js - JS Animation Engine
Pts.js - Visualize points in space
Rellax.js - JS Parallax Library
Matter.js - 2D Physics Engine
Barba.js - Create Smooth Transitions Between Website Pages
Laxxx.js – Scroll Animation Library

Here's a nice tutorial as well.

3D Graphics Using JavaScript

A mind boggling web technology is the ability to render 3D graphics/models in the browser. Here's an introduction.

MDN Guide to WebGL
WebGL Example Websites
Three.js Library

Three.js is a JS library that simplifies the WebGL API.

Three.js Example Websites
Poly - Browse and Download 3D Objects

APIs

Application Program Interfaces (APIs) allow different programs to interact with each other and make up a key part of how the internet works. Here's an introduction and a list of cool APIs to check out.

PHP

PHP is the chosen back-end language of this class. Here are some helpful links for learning, debugging, and practicing the language.

PHP Language Cheatsheet
List of common PHP bugs and debugging tips
Interactive PHP Tutorial
A more thorough PHP Tutorial
Return True to Win

Fun way to practice "truthiness" in PHP

PHP CodeStepByStep Exercisess

Regular Expressions

Regular Expressions (regex for short) is a powerful way to search for specific strings based on a defined pattern. Here are some links to learn about and practice regex.

Extra Goodies

Website Inspiration

Here's a helpful catalog of websites for when you need that extra kick of inspiration.

Interesting Reads

Curious to learn more about various web development topics or the industry at large? Check out of some these quick reads in your free time.

Design & Prototyping Softwares

Web design and prototyping is a topic outside the scope of this course, but it is still a very worthwhile skillset to develop if you have the time or interest. Below are some industry standard design softwares.