Pen to Project to People #1

Goals

• Practice our Process of Pen-Project-to-People

• Modify other peoples' code

• Go from internal testing and Staging to external live Production website

Setup GitHub Project

• Create a new repo on GitHub named: pen-to-project

• Activate a new CodeSpace for this repo

  • Setup our file and folder structure for a project

    • index.html

    • style.css

    • script.js

• Create boilerplate for index.html

• Connect style.css and script.js

Migrate Pen to Project

• From the Pen : https://codepen.io/manikoth/pen/NWJzXjE

• See comments in HTML, CSS, and JS

• Copy HTML panel to index.html

• Copy CSS panel to style.css

• Copy JS panel to script.js

Modify Project

• Download this image of Swoop: https://assets.codepen.io/16425/swoop2.jpg

• Now, upload image to your CodeSpace

  • Edit index.html

  • Replace placeholder.png with the downloaded image of Swoop

• HINT: DO NOT add image of Swoop as absolute path. Use relative path.

Commit and Sync

• Write a commit message

• Commit to project

• Sync to repo

Deployment

• Setup Netlify deployment to your repo: ewu-swoop

  • https://www.netlify.com

• Get publicly accessible URL to deployed project

Submission

• Submit URL to your GitHub repo e.g. github.com/YourUserName/pen-to-project

• Submit URL to your Netlify deployment e.g. subdomain.netlify.app

• Double check submitted URLs are publicly accessible