Programming for Web Development
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 providesprimarily anfocuses overviewon the skills necessary to work with YETI's software stack (TypeScript, Next.js/React, and PostgreSQL). With that being said, there are plenty of other commonly used frameworks. Below is a table containing some of the technologiesmore popular choices:
| JavaScript/TypeScript | PHP |
Java |
Python | Ruby | C# |
| Next.js | Laravel | SpringBoot | Flask | Ruby on Rails | .NET |
| Remix | Django | ||||
| Astro | |||||
| TanStack Start | |||||
| Angular | |||||
| Gatsby | |||||
| SvelteKit |
JavaScript/TypeScript frameworks are currently very commonplace. One of the key driving factors of this is the choice of language. Browsers can only run JavaScript (and more recently, Web Assembly). JS/TS frameworks allow you to write your frontend and backend code entirely in one language. This allows these sites to get off the ground much faster, as developers need to spend less time learning new languages to work with the code. As a result, these frameworks are becoming increasingly common in industry (particularly Next.js and Remix). We
We chose Next.js due to our mentors' familiarity with the framework. Multiple YETI usesmentors use this framework for work or personal websites. We can provide substantial help with learning the framework and debugging issues that arise. Next.js is also a common framework to developsee websites,in alongthe withindustry, and several of the world's most recognizable sites (Nike, OpenAI, Claude, TikTok, Notion, Hulu...) currently use it (https://nextjs.org/showcase).
Learning HTML/CSS
HTML and CSS are the building blocks for the web. HTML controls the general layout/blocks of the page, while CSS controls the appearance and how those blocks are displayed. These aren't programming languages in the traditional sense. HTML (or Hypertext Markup Language) is a "markup language," which essentially means it encodes the structure of the text/content it contains. CSS (or Cascading Style Sheets) is a "stylesheet" language. Stylesheets are files documenting how the page should be displayed. CSS is a way of representing these styles in a text-based format.
Codecademy has great (free) resources for learning moreboth aboutwhat them.HTML and CSS do. To get started, check out the following courses:
- HTML Fundamentals: https://www.codecademy.com/courses/learn-html-fundamentals
- Learn CSS: https://www.codecademy.com/courses/learn-css
After completing these two courses, congrats! You'll be able to build a static website.
ResourcesLearning JavaScript
JavaScript is a language that lets you dynamically update content on websites. This guideis goesuseful overfor the YETI Robotics web tech-stackforms and providesother resourcesinteractive forparts gettingof startedwebsites. Together 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, W3Schoolsit andcreates MDNthe aretraditional good.web Thendevelopment youstack. can
The ontocourse TailwindCSS,on whichCodecademy is agreat CSSfor librarygetting that makes styling easier.started.
JavaScript
- Introduction to
learn JavaScript thoroughly. Other places to learn more Javascript include:JavaScript:MDNhttps://www.codecademy.com/enrolled/courses/introduction-to-javascript
Javascript.info is an excellent place
Typescript
TypescriptAfter addscompleting strongerthis, typingscongrats! toYou'll JavaScript,be similarready 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 fromfor the React website
Next.js
Next.js is a server side framework built on React used to more efficiently buildL1 web applicationsdevelopment bytest. adding