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.
- UI - User Interface
- UX - User Experience
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.
- Figma also provides terrific articles that are a great primer into designing for web.
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.