Create mp0

.gitignore

+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# production
+/dist
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*

.gitlab-ci.yml

+image: node:latest
+
+variables:
+  PUBLIC_URL: /mp0
+
+cache:
+  paths:
+  - node_modules
+
+stages:
+  - deploy
+
+pages:
+  stage: deploy
+
+  script:
+    - npm install
+    - npm run build
+    - mv dist public
+
+  artifacts:
+    paths:
+    - public
+
+  only:
+    - master

README.md

+# MP 0: The Basics
+### Due: Wednesday, Sep 08, 11:59PM
+
+## Table of Contents
+1. [Assignment](#assignment)
+2. [Environment Setup](#environment-setup)
+3. [Grading Breakdown](#grading-breakdown)
+4. [Rules](#rules)
+5. [Submission Details](#submission-details)
+
+## Assignment
+This assignment designed to help you set up your development environment. You will build a simple card using only HTML/CSS. The card will look like [this example](http://i.imgur.com/aeKrEga.png) except with your own details.
+
+#### Requirements
+1. The webpage should mirror the layout shown in the example.
+2. Elements: You should use at least one of all the following: image (`<img>`), link (`<a>`), paragraph (`<p>`), heading (`<h1>, <h2>, ...`).
+3. Layout: The image, heading, and link must all be horizontally centered. The biography text can be either left-aligned or horizontally centered.
+4. Styling: All styling must lie within the CSS file. (No inline styling!)
+5. The image should have a height and width of 150px.
+
+#### Optional
+If you'd like to get some hands-on experience with Javascript before the next MP, you may attempt to recreate [this example](https://uiuc-web-programming.gitlab.io/fa21/images/mp0.gif). Although this will not be graded, understanding this early-on will make your life significantly easier for the next MP! :)
+
+To get started, follow the [environment setup](#environment-setup).
+
+## Environment Setup
+1. Make sure you have [Node.js](https://nodejs.org/en/) and [git](https://git-scm.com/) installed.
+2. Create an account on [GitLab](https://gitlab.com/)
+3. Clone this repository:
+`git clone https://gitlab.com/uiuc-web-programming/mp0 mp0`, then `cd mp0`
+4. Install dependencies:
+`npm install`
+5. Start the dev server:
+`npm start`
+
+If the web browser does not open automatically, go to `http://localhost:8080/` to view your page. Note that if for some reason your port 8080 is occupied, it will default to 8081. If you can see "Hello World!", then you are all set!
+
+You should now be able to edit the files in the `src` folder and see the changes in your browser.
+
+## Grading Breakdown
+This assignment is worth 5% of your final grade. Breakdown is as follows:
+1. Correct HTML tags and content (2%)
+2. Correct CSS styling (%2)
+3. Correct Deployment and submission (%1)
+
+## Rules
+- This is an individual assignment. No collaboration is permitted.
+- It is not permitted to copy/paste code that is not your own. You are, however, free to look at different code sources for inspiration and clarity. All sources (code as well as reading material) that you reference to complete this assignment must be declared in the submission.
+- There must be no use of any library.
+- There should be no use of inline styling.
+- No inline script tags should be used.
+- HTML tables cannot be used for layout.
+- If you think something you’re doing might not be acceptable, please ask on Piazza.
+
+## Submission Details
+Here's what you will need to submit:
+1. Create a private repository on GitLab. Make sure "Initialize this repository with a README" is **not** checked.
+2. Change the remote url for the mp0 directory to the url of the new private repository you created.
+```
+git remote rename origin old-origin
+git remote add origin git@gitlab.com:<your-gitlab-username>/mp0.git
+```
+3. Commit and push your local changes to this new repository.
+4. `.gitlab-ci.yml` file automatically makes a Gitlab CI pipeline run to deploy your code. After the pipeline finishes, your site should be live at `https://<your-gitlab-username>.gitlab.io/mp0`. **It may take up to 10-30 minutes for the site to go live after the first deployment.**
+5. Invite `uiucwp` as a collaborator. This should be as a **reporter**, not as a *guest*, otherwise we can't see your code.
+6. Fill out and submit the form [here](https://forms.gle/MScXPxA2TThLNco76).

package.json

+{
+  "name": "mp0",
+  "version": "1.0.0",
+  "description": "CS498RK MP0",
+  "scripts": {
+    "build": "webpack",
+    "start": "webpack-dev-server --open",
+    "watch": "webpack --watch"
+  },
+  "keywords": [],
+  "author": "UIUC Web Programming Staff",
+  "license": "ISC",
+  "dependencies": {},
+  "devDependencies": {
+    "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^5.1.1",
+    "css-loader": "^3.4.2",
+    "file-loader": "^5.0.2",
+    "style-loader": "^1.1.3",
+    "webpack": "^4.41.5",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.10.1"
+  }
+}

src/css/main.css

+/* Your CSS here. */

src/index.html

+<!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>MP 0</title>
+</head>
+
+<body>
+  <h1>Hello World!</h1>
+  <img src="assets/image.jpg" />
+
+  <script src="bundle.js" type="text/javascript"></script>
+</body>
+
+</html>

src/index.js

+require('./css/main.css');
+require('./js/index.js');

src/js/index.js

+/* Your JS here. */
+console.log('Hello World!')

webpack.config.js

+const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+
+module.exports = {
+  mode: 'development',
+  devtool: 'inline-source-map',
+  devServer: {
+    contentBase: './dist',
+  },
+  entry: './src/index.js',
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+      },
+      {
+        test: /\.(png|svg|jpg|gif|woff|woff2|eot|ttf|otf)$/,
+        use: ['file-loader'],
+      }
+    ],
+  },
+  plugins: [
+    new CleanWebpackPlugin(),
+    new CopyWebpackPlugin([
+      { from: path.resolve(__dirname, 'src/index.html'), to: path.resolve(__dirname, 'dist') },
+      { from: path.resolve(__dirname, 'src/assets'), to: path.resolve(__dirname, 'dist/assets') }
+    ])
+  ],
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+};