javascript-training/javascript-practice

PROJECT

• This is a basic web application written by HTML5, CSS3, SCSS, Javascript, Firebase Realtime Database and Firebase Storage.

Overview

• Introduce: Build a website using HTML5, CSS3, SCSS, Javascript, Firebase Realtime Database and Firebase Storage.
• Design: Link
• Plan: Link
• Deploy: Link

Requirements

• Apply SCSS, Firebase Database on project.
• Apply knowledge about Javascript to build a web application.
• Apply MVC Design Pattern.
• Apply DOM Manipulation.
• Javascript code must be clean and apply Airbnb Javascript Style.

Target

• Get familiar with Javascript syntax.
• Know the basic differences between asynchronous and synchronous.
• Know how to use the basic DOM Manipulation.
• Understand the concept of MVC Design Pattern.

Technical

• HTML5: CSS (Cascading Style Sheets) consist of a group of formatting rules that you use to control the layout and appearance of the content on a web page.
• CSS3: Cascading Style Sheets (CSS) is a language used to illustrate a document’s look, style, and format in any markup language. In simple words, it is used to style and organize the layout of Web pages. CSS3 is the latest version of an earlier CSS version, CSS2.
• SCSS: Scss is a stylesheet language that’s compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects.
• JavaScript: is a multi-paradigm, dynamic language with types and operators, standard built-in objects, and methods. Its syntax is based on the Java and C languages — many structures from those languages apply to JavaScript as well. JavaScript supports object-oriented programming with object prototypes and classes. It also supports functional programming since functions are first-class objects that can be easily created via expressions and passed around like any other object.
• Firebase Realtime Data: The Firebase Realtime Database is a cloud-hosted database. Data is stored as JSON and synchronized in realtime to every connected client. When you build cross-platform apps with our Apple platforms, Android, and JavaScript SDKs, all of your clients share one Realtime Database instance and automatically receive updates with the newest data.
• Cloud Storage for Firebase: is a powerful, simple, and cost-effective object storage service built for Google scale. The Firebase SDKs for Cloud Storage add Google security to file uploads and downloads for your Firebase apps, regardless of network quality.

Information

• Timeline:
  • Estimate: 13 days
  • Actual: 17 days.
  • Calendar:
    • Start: 2023/08/21
    • End: 2023/09/15

Development Environment

• Node: v18.17.1
• Npm: v9.6.7

Getting started

• Step 1: Clone repository.
  • With HTTPS:
    • $ git clone https://github.com/Nez27/javascript-training.git.
• Step 2: Move to folder which just cloned in your computer.
  • cd ./javascript-training.
• Step 3: Move it to branch feat/javascript-practice.
  • $ git checkout feat/javascript-practice.
• Step 4: Move to folder javascript-practice.
  • $ cd ./javascript-practice.
• Step 5:
  • Open terminal > npm i.
• Step 6:
  • Run npm start.
• Step 7:
  • Open http://localhost:1234/ in browser.

Author

• Loi Phan.
• Email: phanhuuloi15@gmail.com.