Initial commit

Author: rmamet

.github/workflows/static.yml

@@ -0,0 +1,43 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload entire repository
+          path: "./public/"
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -0,0 +1 @@
+node_modules/*

.lesson/assets/acdc.jpg

@@ -0,0 +1,27 @@
+# Getting Started
+
+This project is designed to make it easy to see three different things:
+
+1. The photo of the design you chose (upload it here)
+1. Your pixel-for-pixel imitation (in imitation.html/imitation.css)
+1. Your responsive adaptation (in responsive.html / responsive.css)
+
+_You should not have to modify the code in index.html or style.css or in script.js _
+
+Your first steps are:
+
+1. Pick a layout. Your layout needs to be the right level of complexity -- I recommend picking 2 or 3 alternatives and asking your teacher for help choosing before committing. Your layout should be a print design done by a professional (i.e. a published magazing layout, advertisement or product box)
+1. Upload an image of your layout (cell phone picture of print layout or image download)
+1. Rename the uploaded file something easy to type
+1. Modify the `<img src="original.jpg">` tag so the src= points to _your_ image. Then confirm
+   the "Original" tab works when you click "Run"
+
+Your second steps are:
+
+1. Set the _size_ of your layout in `imitation.css` so that you have a rectangle that is the
+   correct dimensions for your layout. Measure the original so you get this correct.
+1. Copy all the text from your layout into elements in `imitation.html`. If you have long paragraphs, you can use Lorem Ipsum as needed to fill in, but make sure any major text items are actually typed out correctly.
+1. Recreate the spatial layout correctly modifying `imitation.html` and `imitation.css` as needed to get the items positioned correctly.
+1. Use screenshots or image search to find images that you can use that will be equivalents to the images in your original ad. You can edit the images from the original if possible, or use google images searches to find something similar, or take pictures of your own to use as substitutes.
+
+Your final step is to continue modifying CSS, paying attention to fonts, colors, images, and layout.

.lesson/assets/inout.png

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "github.copilot",
+    "ms-vsliveshare.vsliveshare"
+  ]
+}

.lesson/assets/logo.png

@@ -0,0 +1,13 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+      {
+        "name": "Start Live Server",
+        "type": "node-terminal",
+        "request": "launch",
+        "command": "npm run start",
+        "cwd": "${workspaceFolder}"
+      }
+    ]
+  }
+  

.lesson/assets/scrabble.jpg

@@ -0,0 +1,30 @@
+{
+  "editor.tabSize": 2,
+  "editor.formatOnSave": true,
+  "editor.formatOnPaste": true,
+  "[html]": {
+    "editor.defaultFormatter": "vscode.html-language-features"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "prettier.htmlWhitespaceSensitivity": "ignore",
+  "files.exclude" : {
+    "node_modules" : true,
+    ".git" : true,
+    "*.json" : true,
+    ".gitignore" : true,
+    ".vscode" : true,
+    ".github" : true,
+    "screenshots" : true,
+  }
+}