assembler-institute · tamtran2885 · Sep 8, 2021 · Sep 8, 2021 · Sep 8, 2021 · Sep 8, 2021
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/README.md b/README.md
@@ -2,37 +2,42 @@
 
 # WebPack Basics <!-- omit in toc -->
 
+- [@haroon](https://github.com/haroonahmad12)
+- [@tam](https://github.com/tamtran2885)
+
 <p>
   <img alt="Version" src="https://img.shields.io/badge/version-1.0-blue.svg?cacheSeconds=2592000" />
 </p>
 
-> WebPack is a tool that allows you to manage the resources and dependencies of a website. 
+> WebPack is a tool that allows you to manage the resources and dependencies of a website.
 >
 > It mainly solves Javascript dependencies, although it can also work with css, images, Javascript preprocessors, CSS preprocessors, template systems, and much more.
 
 ## Index <!-- omit in toc -->
 
-- [Requirements](#requirements)
-- [Repository](#repository)
+- [Description](#description)
+- [Table of Contents](#table-of-contents)
 - [Technologies used](#technologies-used)
-- [Project delivery](#project-delivery)
+- [Installation](#installation)
+- [Usage](#usage)
 - [Resources](#resources)
 
-## Requirements
+## Description
 
 - You must make use of the new features of ECMAScript 6
 - You must import several files so that the final result is a single bundle for Javascript and a single bundle for sass
 - Verify that the output bundle generated by WebPack for the Javascript layer has made the transformation from ECMAScript 6 to ECMAScript 5
 - Create a clear and orderly directory structure
 
+## Table of Contents
 
-## Repository
-
-First of all you must fork this project into your GitHub account.
-
-To create a fork on GitHub is as easy as clicking the “fork” button on the repository page.
-
-<img src="https://docs.github.com/assets/images/help/repository/fork_button.jpg" alt="Fork on GitHub" width='450'>
+| File / Folder       | Description                                                |
+| ------------------- | ---------------------------------------------------------- |
+| `dist`              | Folder with assets created by webpack                      |
+| `src`               | Folder with necessary files                                |
+| `package.json`      | List the packages the project depends on                   |
+| `package-lock.json` | Keep track of the exact version of every package installed |
+| `.gitignore`        | Untracked files that Git should ignore                     |
 
 ## Technologies used
 
@@ -48,14 +53,55 @@ To create a fork on GitHub is as easy as clicking the “fork” button on the r
 
 \* ES6
 
-## Project delivery
+## Installation
 
-To deliver this project you must follow the steps indicated in the document:
+`npm i -D webpack webpack-cli sass html-webpack-plugin css-loader style-loader webpack-dev-server`
 
-- [Submitting a solution](https://www.notion.so/Submitting-a-solution-524dab1a71dd4b96903f26385e24cdb6)
+`npm install url-loader file-loader --save-dev`
 
-## Resources
+`npm install image-webpack-loader --save-dev`
 
+## Usage
+
+`npx webpack-dev-server`
+
+`npm run build`
+
+## Resources
 
 - [WebPack Official](https://webpack.js.org/)
 - [ECMAScript 6 compatibility](https://kangax.github.io/compat-table/es6/)
+
+## Steps
+
+- Creating Folders and Files
+  `JS`
+  `SCSS`
+  `IMG`
+  `Index.html`
+
+- Install Webpack and necessary Plugins
+- Webpack Configuration
+  `webpack.config.js`
+
+- Configure package.json
+- Install Dependencies
+- Coding in `module-a.js`:
+
+  - `Make use of an Arrow Function`
+  - `Make use of an ES6 Class`
+  - `Use Template String`
+  - `Use Let and Const to create Variables`
+
+- Coding in `module-b.js`
+
+  - `Import and use jQuery`
+
+- Import all Functions and Variables to `main.js`
+
+- Import Images to `main.js`:
+
+  - `Insert Images in HTML`
+
+- Compress all the Images (jpg, png, svg)
+  - `using webpack to compress image files`
diff --git a/dist/528e5a9b04034b9e179e6b1adb8c743e.png b/dist/528e5a9b04034b9e179e6b1adb8c743e.png
diff --git a/dist/8083e1ecbb910cc016a9432225fa8711.jpg b/dist/8083e1ecbb910cc016a9432225fa8711.jpg
diff --git a/dist/8a9cb2501eebf84abeaa8804dd8fa4f7.svg b/dist/8a9cb2501eebf84abeaa8804dd8fa4f7.svg
diff --git a/dist/d6f67e89764ef446e6b6df29f354be86.png b/dist/d6f67e89764ef446e6b6df29f354be86.png
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  <script defer src="main.bundle.js"></script></head>
+  <body>
+    <button id="btn">Btn</button>
+    <p class="paragraph-1">
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit
+    </p>
+    <p class="paragraph-2">
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit
+    </p>
+    <section class="img-container">
+      <div class="img"><img id="img-1" /></div>
+      <div class="img"><img id="img-2" /></div>
+      <div class="img"><img id="img-3" /></div>
+      <div class="img"><img id="img-4" /></div>
+    </section>
+  </body>
+</html>