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 extra goodies if you are so inclined to dive deeper. We particularly recommend checking out some of the extra resources (such as CSS/JS Animations, 3D Graphics, and Web APIs) 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 and Validation

Your submitted work must follow the CSE 154 Code Quality Guide and pass validation standards for each language.

Ed / Gradescope / Canvas

Ed is the go to place for asking any questions about homework or course material. Gradescope and Canvas are for submitting course assignments and checking grades in this class. Reminder: Do not post homework solutions on Ed!

Language Cheatsheets

CSE 154 "Language Cheatsheets" are used to summarize what we cover (and help students identify what is within the scope of this course)

Tools

Course Tool Setup

In this course, we will be using Gradescope and Git for assignment submission and VS Code as a text editor. Here are the setup guides to get you started:

Setup Guide for Git & VS Code
- Mac
- Windows
Setup Guide for Node & Local ESLint
- Mac
- Windows

Browser Dev Tools

We strongly recommend using Chrome to view your web pages in this class:

Other development tools that exist but we will not use in this class:

Languages and Technologies

HTML

These are a couple great HTML resources. The first two links are massive lists of every HTML tag (check them out to see what's possible with HTML).

This is an amazing resource for learning about website SEO!

HTML Symbol Codes

Accessibility Resources

Resources on web accessibility and how to make accessible websites.

CSS

Here's a couple links for getting initially acquainted with CSS. Again the first two links are large lists of every CSS poperty.

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!

Google Fonts

CSS Layout and 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

JavaScript

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

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.

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.

Node.js

Run JavaScript on the server! Here's an intro to Node.

Introduction to Node.js
Node.js Reference
The Node.js Handbook
A General Intro to Server Side Programming:

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 resources 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.

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!

Fonts

Just as important as color are fonts. Once again here are some of our favorite resources.

Icons

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

Advanced Extra Goodies

Advanced HTML

Want to dive deeper into HTML? These are the resources for you.

Advanced CSS

Want to dive deeper into CSS? These are the resources for you.

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

Advanced JavaScript

Want to dive deeper into JavaScript? These are the resources for you.

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

Frontend JavaScript Frameworks

Frameworks and libraries are pre-written JavaScript code that make the job of creating user interfaces easier. Check out a couple of the most popular.

Advanced APIs

Let's dive deeper into the powerful APIs web browsers provide right out the box. From audio playback to vibrating a phone, browser APIs open up a whole world of fun!

Advanced Node.js

Want to dive deeper into Node.js? These are the resources for you.

Server Side Without Node.js

Although we will only teach Node.js in this course, when creating server side web applications we are not just limited to using Node.js. Explore some common alternatives for backend development.

NoSQL Databases

NoSQL Databases are just that! Databases that are not powered by the SQL programming language. Check out one popular alternative for storing your data: MongoDB.

The Cloud

Hop on the hypetrain and get an intro to developing web applications that live on the cloud using Heroku!

Desktop Applications

Did you know you can make desktop applications using HTML, CSS, and JavaScript? Well you can! Here's how.

Mobile Applications

Did you know you can make mobile applications using JavaScript? Well you can! Here's how.

WebAssembly

At the cutting edge of web technologies is WebAssembly, an assembly-like language that runs in the browser. By writing C/C++ or Rust programs that compile to WebAssembly the internet could eventually be capable of running AAA video games, photo/video editing software, and so on in the browser.