Resources - periode/augmenting-gallery GitHub Wiki
Technical Resources
Wireframes
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
Installing and running React
These following steps should only be done once, when you want to create a new project.
- Install NodeJS.
- Open a Terminal and type
which node
. You should see one single line showing you where Node is installed. - 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, andmkdir NAME_OF_FOLDER
to create a folder. For instance,cd Desktop
goes to the Desktop andmkdir my-react-app
creates a folder, andcd my-react-app
enters that folder. - Once you're inside the desired folder, use to
npm create vite@latest NAME_OF_PROJECT --template react
- First choice, select
React
- 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:
cd NAME_OF_PROJECT
npm install
(which should install all plugins needed)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