AndreBClark/WebStudentResources

DSCVR

Getting Started

1. Setting up Accounts

1. Create github accounts
2. send me your usernames so I can add you to the collaborators list

2. Github App

1. Download & Install Github Desktop App
2. set up default cli and editor File>Options>Advanced

3. Checking Dependencies

1. Using Your Terminal on mac or git bash on pc
2. check if git is installed git --version if not install git
3. check if node is installed node --version or npm --version Install node.js

4. Initial Build Process

1. Clone Repository
2. Open CLI at dscvr/src/ or using Github cmd + ` then cd src
3. enter npm install
4. enternpm run build --watch
5. Using Github cmd + shift + A Repository>Open in Editor Name

once your editor of choice is open you are ready to work on the project.

5. Verify Functionality

Once you've followed the Steps, verify if it worked by Viewing the Demo The result should look colorful and obviously styled.

Note: if either this page or the demo page look un-styled. that means you have not run your build yet or there is an issue preventing the build

6. Working on the project

1. Open github Desktop and open terminal
2. In terminal Enter cd src to move to development folder
3. enter npm run build --watch
4. leave the terminal open while working
5. --watch will auto update your changes to you the assets folder locally

7. Checking Out Branches

The origin/master branch is the main production branch. with this project we will divide up work as Individual Features or Tasks There Are a few things you need to do, before you begin working on a feature. from this point on Everyone else needs to be working on the Dev Branch.

1. Check the project board for tasks to complete, place your chosen task in the in progress stack.
2. move to the dev branch from Github Desktop or from your code editor
3. If Your Feature doesn't have a branch yet create one. You can do so in the Github Desktop Application.
4. switch to your code editor and in the lower corner there should be a line that says the name of the current branch.
5. If it's correct, you're all set.

Resources

Here is A list of links and Resources for learning more web design stuff. full list repo: Resource List Repository

UI/UX

• LearnUI.design

• King VS Pawn game UI Design

• 7 Rules For Creating Gorgeous UI

CSS

• BEM Block Element Modifier class naming system
• Organizing CSS Video (37:54)
• Layout Land Youtube Channel covering CSS Grid and Flexbox

HTML

• Semantic HTML

• Markdown Cheetsheet simplified rich text formating language that outputs to HTML

• Emmet Cheetsheet html shorthand for writing faster using css selector type notation

• 100 Days of Code

Image Optimization

• Optimize Images Webpack
• webpack for real tasks
• images guide)
• imgix
• fastly Image Optimizer
• Easy Dynamic Image Optimization with React and Webpack
• Webpack For Everyone -- Automatic Image Optimization

Notable Modules in this WebPack

• WebPack
• SASS
• jQuery
• Zurb Foundation
• Featherlight
• Font Awesome
• Slick Carousel
• Babel