Technical Resources

Wireframes

• What is a wireframe?
• How to create a wireframe - Sketch
• How to wireframe - Figma

HTML & CSS

General

• Tutorial on HTML and CSS - recorded for the Comm Lab class at NYU Abu Dhabi
• HTML For People, a gentle introduction to HTML and CSS.
• Border CSS - how to style borders

Flexbox and layout

• A Complete Guide to Flexbox - how to lay out elements nicely
• An interactive guide to Flexbox - by Google's web dev tutorials
• Positioning in CSS - what the position attributes (relative, absolute, static, etc.) really work.

Responsive design and media queries

• Responsive Web Design - a guide on the principles of how to make a webpage work on desktop and mobile.
• Practical examples of width media queries - how to write some CSS to adapt to the size of the device it's being viewed on.
• A Beginner's Guide to Media Queries - the basics of changing the CSS when the screen changes.

React

• React in 100 seconds

Installing and running React

These following steps should only be done once, when you want to create a new project.

1. Install NodeJS.
2. Open a Terminal and type which node. You should see one single line showing you where Node is installed.
3. Navigate to the folder you want to create the React App in. Use cd to enter the folder, cd .. to go back to the parent folder, ls to list the contents of the folder, and mkdir NAME_OF_FOLDER to create a folder. For instance, cd Desktop goes to the Desktop and mkdir my-react-app creates a folder, and cd my-react-app enters that folder.
4. Once you're inside the desired folder, use to npm create vite@latest NAME_OF_PROJECT --template react
5. First choice, select React
6. Second choice, select JavaScript

That's it! The project is created inside the folder NAME_OF_PROJECT. To run an existing project, do the following steps:

1. cd NAME_OF_PROJECT
2. npm install (which should install all plugins needed)
3. npm run dev which will start the React server!

Tutorials

• React Tutorials
• React Documentation - general tutorials
• Download NodeJS
• Create a new react app - how to create a new react project
• Displaying inputs in React
• [useState and variables in React](https://react.dev/learn/state-a-components-memory
• React Router - how to make links in react
• React Leaflet - making maps in react
• Preparing the Leaflet CSS, JS and HTML

React Native

• Setting up a project