I studied the way to create interactive web application, so I wanted to write this note to remember it for my future projects.
HTML
- HTML is a language to write static web page.
- This consists of various kinds of tags such as BODY, H, IMG, A and TABLE. People can express the information that they want to write on their web page in HTML.
- The HTML file includes CSS and Javascript as necessary to define the format and active objects on the web page.
- CSS defines the class to elaborate the text data in HTML files by adding colours, font-size, background colour, etc.
- JavaScript defined the movement of the text and format on the webpage.
- jQuery includes many Javascript, so creators can control actions of objects on our websites easily. However, if you use Bootstrap, you do not need to remember jQuery because Bootstrap includes jQuery automatically.
- You can study HTML here.
CSS
- CSS defines colours, font, font-size, background colour, etc. on the webpage.
- People can define their original classes in the CSS script.
- By defining classes, people can create formats for webpages.
- You can study CSS here.
Bootstrap
- Bootstrap consists of CSS and Javascript to manipulate static webpage written in HTML.
- HTML files need to include Bootstrap file to use it in the webpage.
- People can use Bootstrap by using classes defined by Bootstrap.
- For more information, you can check this documents.
Node.js and NPM
- You need to install Node and NPM on your server or local computer.
- Node is the application that run JavaScript on your server (backend) compared to HTML and Bootstrap that runs on users’ browsers (front end).
- NPM is the package manager that is necessary to install packages that connect database, google map API, google authentication, data cloud service API, etc. You can see the packages in the following sections.
- You can see how to install Node and NPM on your Mac computer here.
https://treehouse.github.io/installation-guides/mac/node-mac.html
https://medium.com/@lavitr01051977/node-express-js-aea19636a500
Package.json
- You need to create a package.json file to deploy your application from local computer to the Heroku server.
- NPM can create a package.json file that includes the list of packages used in your application.
- You need to record packages of your application into a package.json file as dependencies when you install the packages.
- You also need Git to deploy your application to the Heroku server.
- You can see the process to create a package.json file and deploy your application to the Heroku server here.
Express
- You need install and import Express package to define how your application respond to users’ requests.
- You can see how to use the Express package here.
EJS
- EJS is one of template engines for Express.
- You can pass variables to the EJS files where you write templates that consists of JavaScript and HTML and include the valuables.
- You can see how to use EJS here.
MongoDB and mongoose
- You need to pay a fee to create a database on Heroku.
- MongoDB provides free service for beginners to create databases that are necessary for their application.
- You can see how to connect your application with the MongoDB here.
Cloudinary
- Cloudinary is the free service that store various kinds of data inlcluding images and videos.
- By importing the Cloudinary package, you can connect your application to the Cloudinary and store users data there.
- Cloudinary create a URL for a stored image or video, so your application can retieve the URL to show the image or video on your website.
- You can study how to connect your application with Cloudinary here.
Google MAP API
- Google provides many APIs to put maps on your website.
- Before using the API, you need to create account for the Google Clound and get API key for it.
- A sample code of HTML and JavaScript are here.
Google Authentication
- You can put a link for users to log in with Google account.
- Using this package, you can allow authenticated users to submit videos and photos.
Git
- I don’t know how professional programmers use Git well, but you need to install Git and use it when deploying your application to Heroku.
- You can see how to install Git and create a repository here.
Heroku
- Heroku is a web hosting service.
- You do not need to pay a fee if you are beginner.
- Heroku provides information to install Heroku to your local computer, create your new application on Heroku server, and revise it.
