Quick Access - (You'll be using these a lot)
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!
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.
- Canvas
- GitGrade
- How to turn in assignments from Atom
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
Gettin' Git command line
- Gettin' Git for windows
- An older tutorial (from 18au) for how to setup Git on the command line
How to use Atom to add/commit/push... but don't forget to turn in!
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.
Using Git with Atom:
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
- Downloading Filezilla without the bloatware
- Uploading information to the student server
Browser Web Dev Tools
We strongly recommend Chrome as browsers to view your web pages in this class:
The following are other development tools that exist but we are not using for this class:
Local Servers
Use these to do server development all from your local machine
- Mac MAMP
- Windows MAMP
- Important! How to change your server location
- MySQL MAMP
- Configuring MAMP PHP to allow debugging
Another option is running PHP inside of Atom. You need PHP installed on your machine to use this, but just add the Atom php-server Package
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).
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!
- HTML Color Codes
- Khroma AI Color Generator
- Accessible Colors
- Color Pallete Generator
- With options to view with different types of color-blindness filters!
- Trendy Gradients in Web Design
- Web Gradients
- CSS Gradient
- Egg Gradients
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).
- HTML Reference
- MDN HTML Reference
- HTML5Doctor Element Index
- Meta Tags Generator & Previewer
- 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.
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.
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.
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.