Web Development

Resources and documentation for contributing to YETI's websites

UI/UX Basics

What is UI/UX?

These are perhaps two of the most fundamental concepts in developing for the web, and can make or break a site/application.

Difference Between UI and UX

User Interface
User Experience
Colors & Fonts Target audience & users
Interactivity Flow of site/app
Layout  

Here's an article from Figma that explains the differences.

Fundamentals of UI/UX

The following is a great crash course into the world of UI/UX, and how to get started with learning design. 

Materials and Resources

Figma is a great, industry-standard resource with a free tier for learning how to design, and creating designs. 

UI Design

Resources

General resources for learning good UI design.

Figma

Figma provides a terrific set of resources for learning the basics of UI design. Some articles to pay particular attention to:

Web Development Quickstart

Overview

A variety of tasks are required to build websites, including design, programming, and delivering it to users. While web design is an often crucial step, web development usually refers to the latter two of those tasks. This guide provides an overview of the technologies YETI uses to develop websites, along with resources for learning more about them.

Resources

This guide goes over the YETI Robotics web tech-stack and provides resources for getting started with them. 

To learn web development, you need to know HTML, CSS, and JavaScript (to start out with). Below are some recommended resources for doing so.

HTML/CSS

For HTML and CSS, W3Schools and MDN are good. Then you can move onto TailwindCSS, which is a CSS library that makes styling easier.

JavaScript

Javascript.info is an excellent place to learn JavaScript thoroughly. Other places to learn more Javascript include: MDN (again) and The Odin Project where you can also learn server side programming and advanced uses of Javascript.

Typescript

Typescript adds stronger typings to JavaScript, similar to languages like Java or Go. You can read their docs here

React

React is a UI framework that uses JavaScript to build websites in a more declarative way. Learn it from the React website

Next.js

Next.js is a server side framework built on React used to more efficiently build web applications by adding features such as routing, data fetching, API routes, and more. Find their docs here.