assembler-institute · ParisArcos · Sep 9, 2021 · Sep 9, 2021 · Sep 9, 2021
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/README.md b/README.md
@@ -1,61 +1,62 @@
-`#html` `#css` `#sass` `#javascript` `#webpack` `#es6` `#master-in-software-engineering`
+# Webpac Basics Pill
 
-# WebPack Basics <!-- omit in toc -->
+In this pill we learn the basics of the webpack tool to handle the
+dependencies, install and configure WebPack Plugins.
 
-<p>
-  <img alt="Version" src="https://img.shields.io/badge/version-1.0-blue.svg?cacheSeconds=2592000" />
-</p>
+## Appendix
 
-> 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.
+Any additional information goes here
 
-## Index <!-- omit in toc -->
-
-- [Requirements](#requirements)
-- [Repository](#repository)
-- [Technologies used](#technologies-used)
-- [Project delivery](#project-delivery)
+- [Documentation](#documentation)
+- [Lessons Learned](#lessons-learned)
+- [Running Tests](#running-tests)
 - [Resources](#resources)
+- [Links](#links)
 
-## Requirements
-
-- 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
-
+## Documentation
 
-## Repository
+-[Webpack basics Pill](https://docs.google.com/document/d/1k_gYz3x9EmL8-yyhDcvN8HplNU-mZxUBYNFnDxFho4g/edit)
 
-First of all you must fork this project into your GitHub account.
+## Lessons Learned
 
-To create a fork on GitHub is as easy as clicking the “fork” button on the repository page.
+- Use webpack
 
-<img src="https://docs.github.com/assets/images/help/repository/fork_button.jpg" alt="Fork on GitHub" width='450'>
+  -to use WebPack
+  -to deploy a web project that uses webpack to generate its assets
+  -to install plugins
+  -to uninstal plugins
 
-## Technologies used
+- To undestand ECMAScript 6
 
-\* HTML
+- Use SASS with webpack
 
-\* CSS
+- Optimize images automatically by applying various rules
 
-\* JS
+## Running Dev
 
-\* SASS
+To run Webpack-Dev, run the following command
 
-\* webpack
+```
+  npm run dev
+```
 
-\* ES6
+## Resources
 
-## Project delivery
+- [WEBPACK](https://webpack.js.org/concepts/)
+- [ImageMinimizerWebpackPlugin](https://webpack.js.org/plugins/image-minimizer-webpack-plugin/)
+- [CSS Loader](https://webpack.js.org/loaders/css-loader/)
+- [Style Loader](https://webpack.js.org/loaders/style-loader/)
+- [SASS Loader](https://webpack.js.org/loaders/sass-loader/)
+- [SASS](https://sass-lang.com/guide)
 
-To deliver this project you must follow the steps indicated in the document:
+## Authors
 
-- [Submitting a solution](https://www.notion.so/Submitting-a-solution-524dab1a71dd4b96903f26385e24cdb6)
+- [@ParisArcos](https://github.com/ParisArcos)
+- [@jaimealcalde](https://github.com/jaimealcalde)
 
-## Resources
+## 🔗 Links
 
+Paris Arcos[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/paris-arcos-martin-268708217/)
+Jaime Alcalde[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/jaime-alcalde-809531216/)
 
-- [WebPack Official](https://webpack.js.org/)
-- [ECMAScript 6 compatibility](https://kangax.github.io/compat-table/es6/)
+THANKS!
diff --git a/css/home.css b/css/home.css
@@ -0,0 +1,3 @@
+html {
+  background-color: red;
+}/*# sourceMappingURL=home.css.map */
diff --git a/css/home.css.map b/css/home.css.map
diff --git a/dist/92999556766137ab52d0.jpg b/dist/92999556766137ab52d0.jpg
diff --git a/dist/c4a65183535bff92dbe6.png b/dist/c4a65183535bff92dbe6.png
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,56 @@
+<!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>WEBPACK PILL</title>
+  <script defer src="main.bundle.js"></script></head>
+  <body>
+    <header>
+      <h1>WEBPACK PILL</h1>
+    </header>
+    <div class="container">
+
+        <div class="container__left--1">
+          <h2>Buttons</h2>
+        </div>
+        <div class="container__right--1">
+          <h2>Responses</h2>
+        </div>
+
+        <div class="container__left--2">
+          <button id="button__arrow">Arrow function</button>
+        </div>
+
+        <div class="container__right--2">
+          <p id="response__arrow"></p>
+        </div>
+
+        <div class="container__left--3">
+          <button id="button__rectangle">Rectangle function</button>
+        </div>
+
+        <div class="container__right--3">
+          <p id="response__rectangle"></p>
+        </div>
+
+        <div class="container__left--4">
+          <button id="button__templates">Templates string</button>
+        </div>
+
+        <div class="container__right--4">
+          <p id="response__templates"></p>
+        </div>
+
+        <div class="container__left--5">
+          <button id="button__letConst">Use of let and const</button>
+        </div>
+
+        <div class="container__right--5">
+          <p id="response__letConst"></p>
+        </div>
+    </div>
+    <div id="root" class="root"></div>
+  </body>
+</html>
diff --git a/dist/main.bundle.js b/dist/main.bundle.js