├── milestone-projects
    ├── docs
    │   ├── grading.pdf
    │   ├── ms1-loa.pdf
    │   ├── ms2-loa.pdf
    │   ├── ms3-loa.pdf
    │   └── ms4-loa.pdf
    ├── screenshots
    │   └── learningSupports.png
    ├── project-submission.md
    ├── ms1.md
    ├── ms2.md
    ├── ms3.md
    └── ms4.md
├── docs
    ├── screenshots
    │   ├── final-grade-calculation-01.png
    │   └── final-grade-calculation-02.png
    └── grading.md
├── html.md
├── userstories.md
├── portfolio-projects
    └── pp5-advfe.md
├── interview.md
├── sample-projects.md
├── readmes.md
└── resources.md


/milestone-projects/docs/grading.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CluelessBiker/mentoring/HEAD/milestone-projects/docs/grading.pdf


--------------------------------------------------------------------------------
/milestone-projects/docs/ms1-loa.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CluelessBiker/mentoring/HEAD/milestone-projects/docs/ms1-loa.pdf


--------------------------------------------------------------------------------
/milestone-projects/docs/ms2-loa.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CluelessBiker/mentoring/HEAD/milestone-projects/docs/ms2-loa.pdf


--------------------------------------------------------------------------------
/milestone-projects/docs/ms3-loa.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CluelessBiker/mentoring/HEAD/milestone-projects/docs/ms3-loa.pdf


--------------------------------------------------------------------------------
/milestone-projects/docs/ms4-loa.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CluelessBiker/mentoring/HEAD/milestone-projects/docs/ms4-loa.pdf


--------------------------------------------------------------------------------
/docs/screenshots/final-grade-calculation-01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CluelessBiker/mentoring/HEAD/docs/screenshots/final-grade-calculation-01.png


--------------------------------------------------------------------------------
/docs/screenshots/final-grade-calculation-02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CluelessBiker/mentoring/HEAD/docs/screenshots/final-grade-calculation-02.png


--------------------------------------------------------------------------------
/milestone-projects/screenshots/learningSupports.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CluelessBiker/mentoring/HEAD/milestone-projects/screenshots/learningSupports.png


--------------------------------------------------------------------------------
/milestone-projects/project-submission.md:
--------------------------------------------------------------------------------
 1 | # PROJECT SUBMISSION :
 2 | 
 3 | The following is the message sent out by C.I.:
 4 | 
 5 | ```
 6 | We hope you are well.
 7 | We just wanted to send a reminder on how to submit your projects.
 8 | When you have a project that is ready to submit, please go to your LMS dashboard and select the Diploma in Web App Development: Learning Supports option and follow the instructions.
 9 | Please see below an example of this in the LMS:
10 | Please remember also that all projects must be submitted by 12:00 PM (noon), Irish and UK time, on/before the deadline date.
11 | If there are issues with meeting your deadlines, you must inform Student Care in a timely manner and we can go through available options with you.
12 | If you have any questions about this or anything else, please feel free to reach out to us.
13 | ```
14 | 
15 | - Contact: studentcare@codeinstitute.net
16 | - LMS: [Dashboard](https://learn.codeinstitute.net/dashboard)
17 | 
18 | ![Where to click](screenshots/learningSupports.png)
19 | 


--------------------------------------------------------------------------------
/docs/grading.md:
--------------------------------------------------------------------------------
 1 | # HOW IS YOUR DIPLOMA GRADE CALCULATED??
 2 | 
 3 | ![Final grade calculation pt01](./screenshots/final-grade-calculation-01.png)
 4 | ![Final grade calculation pt02](./screenshots/final-grade-calculation-02.png)
 5 | 
 6 | ## ASSESSMENT CRITERIA :
 7 | - [PP1](https://learn.codeinstitute.net/courses/course-v1:CodeInstitute+CSSE_PAGPPF+2021_Q2/courseware/66cf361c769a41d496f5001fae6f9be7/3b5cd5dc8313462aa5975a3c9b9a1a3c/)
 8 | - [PP2](https://learn.codeinstitute.net/courses/course-v1:CodeInstitute+JSE_PAGPPF+2021_Q2/courseware/30137de05cd847d1a6b6d2c7338c4655/c3bd296fe9d643af86e76e830e1470dd/)
 9 | - [PP3](https://learn.codeinstitute.net/courses/course-v1:CodeInstitute+PE_PAGP+2021_Q2/courseware/40cd7850a24d454795ec611831b06b77/980b1952a3a64898ab4010759bd0bd6a/)
10 | - [PP4](https://learn.codeinstitute.net/courses/course-v1:CodeInstitute+FST_PAGP+2021_Q2/courseware/e5bc285d9a5448269dc29cefa3119d55/5672a8bbeb1240c1bbbe2b9bd77440b0/)
11 | - [PP5 - Advanced Frontend](https://learn.codeinstitute.net/courses/course-v1:CodeInstitute+AFE_PAGPPF+2/courseware/f05f0d6831504e4dba3b3868106a356a/c14fc37360f7419786cd57d6b65cfc95/)
12 | - [PP5 - eCommerce](https://learn.codeinstitute.net/courses/course-v1:CodeInstitute+ECOMM_PAGPPF+2021_Q2/courseware/c38cb7ad50e9443dbd94f4cef3fed1ae/0b467723b3f54a5db85c975fdf67116d/)


--------------------------------------------------------------------------------
/html.md:
--------------------------------------------------------------------------------
 1 | # HTML
 2 | ---
 3 | 
 4 | ### FORMAT YOUR CODE :
 5 | - Use this Gitpod shortcut to quickly correct your HTML indentation :
 6 |   - On Windows : `Shift`+`Alt`+`F`
 7 |   - On MAC OS: `Shift`+`Option`+`F`
 8 |   - On Ubuntu : `Shift`+`Ctrl`+`I`
 9 |   
10 | ( If it asks you to set up a configuration, just choose 'prettier'. )
11 | 
12 | ---
13 | 
14 | ### HTML FILE STRUCTURE : 
15 | - This is a code comment : `<!-- Hello : -->`
16 | - Each major section of your project should be commented.
17 | - Inside the `<body>`, there are three main elements, which you are expected to incorporate into your project (see below): `<header>`, `<main>`, `<footer>`
18 | 
19 | *( If your self-closing HTML tags end with an ```/>``` , eg: ```<meta />``` instead of ```<meta>``` this is put in place by **Prettier**. Please leave a comment in your README addressing this, as W3C will flag it with an **info** tag when you validate your files. The issue was raised in this [ticket](https://github.com/prettier/prettier/issues/5641), & closed by the dev as it was not considered to be an issue. )*
20 | 
21 | ```
22 | <body>
23 |     <!-- This is the header : -->
24 |     <header>
25 |         <h1>Your page title here</h1>
26 |         <nav>Navigation links here</nav>
27 |     </header>
28 | 
29 |     <!-- This is the main : -->
30 |     <main>
31 |         <!-- Hero image : -->
32 |         <section>
33 |             <h2>Your page content here</h2>
34 |         </section>
35 | 
36 |         <!-- About text : -->
37 |         <section>
38 |             <p>Add as many sections/divs as you need</p>
39 |         </section>
40 |     </main>
41 | 
42 |     <!-- This is the footer : -->
43 |     <footer>
44 |         <p>Social icons | address | disclaimer : here</p>
45 |     </footer>
46 | </body>
47 | ```
48 | ---
49 | 
50 | ### FORM DUMP : 
51 | - When adding a `<form>` to your project, upon submit, the user should receive feedback that their submission was successful.
52 | - This will be achieved by adding an `action` to your opening form tag:
53 | ```
54 | <form action="https://formdump.codeinstitute.net/">
55 | ```
56 | - The link above will route your user to a C.I. created form-dump page, however you can always build your own! A simple HTML file that says **"Thank You!"** will suffice.
57 |  - Should you decide to create your own form-dump page, a nice extra touch is to add this `<meta>` tag inside the head of that page, so that the page redirects back to the home page after a few seconds:
58 | ```
59 | <meta http-equiv="refresh" content="10; url=index.html">
60 | ```
61 | 


--------------------------------------------------------------------------------
/userstories.md:
--------------------------------------------------------------------------------
 1 | # USER STORIES :
 2 | 
 3 | - Stories must follow the MoSCoW method & be divided into *Must have*, *Should have*, *Could have* & *Wont have*. This status can be reflected by applying labels to the stories.
 4 | - Group stories into [Epics](https://www.atlassian.com/agile/project-management/epics-stories-themes#:~:text=Stories%2C%20also%20called%20%E2%80%9Cuser%20stories,drive%20toward%20a%20common%20goal.) (A combination of stories that relate to one another, example: Signup, Login, Logout). This status can be reflected by applying labels to the stories.
 5 | - Divide stories into [Iterations](https://www.productplan.com/glossary/iteration/#:~:text=In%20agile%20software%20development%2C%20an,iteration%2Dby%2Diteration%20basis.) (A group of stories that will take up a pre-determined measure of time). Iterations can be reflected by assigning Milestones to the stories.
 6 | - Assign stories [Story Points](https://www.simplilearn.com/story-points-in-agile-article#:~:text=Story%20points%20represent%20the%20complexity,approach%20estimates%20employing%20story%20points.)
 7 | 
 8 | ## PROJECT / KANBAN BOARD :
 9 | - To add a *Kanban board* to your repository:
10 |   - navigate to your project repo
11 |   - click on `Projects` up at the top
12 |   - on the big green button `Link a project` click the dropdown icon
13 |   - select `New Project`
14 | 
15 | ## ISSUES :
16 | - Below is a template that you may use to populate your own user stories in *Github Issues*
17 | - To add an Issues template to your repo : [Github docs](https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/configuring-issue-templates-for-your-repository)
18 |   - navigate first into your repo
19 |   - click on `settings`
20 |   - scroll down to `Features > Issues`
21 |   - click `Set up template`
22 |   - click `Add template`
23 |   - finally, select `Custom template`.
24 | 
25 |   - When creating a user story, from the panel on the right, you can link the issue directly to your project/kanban board by clicking on the gear icon next to `Projects`:gear:
26 | ```
27 | USER STORY:
28 | As a **role** I can **capability** so that **received benefit**.
29 | 
30 | Example:
31 | As a [warehouse employee], I can [select paper size for print], so that the [printed label size, matches parcel size].
32 | 
33 | ACCEPTANCE CRITERIA:
34 | (checklist for items that need to be accomplished)
35 | - criteria one:
36 | - criteria two:
37 | - criteria three:
38 | 
39 | Example: (login)
40 | - criteria one: user is rerouted to home page upon successful login
41 | - criteria two: UI updates to reflect logged-in status
42 | - criteria three: a warning message is given to display errors should an issue arise during login
43 | 
44 | TASKS:
45 | (the steps needed to accomplish this story)
46 | - [ ] task 1
47 | - [ ] task 2
48 | - [ ] task 3
49 | 
50 | Example:
51 | - [ ] Implement login form & html template
52 | - [ ] Install all auth package
53 | - [ ] create URL path
54 | 
55 | BUG TICKETS:
56 | - [ ] 
57 | 
58 | Example:
59 | - [ ] User cannot Signup. Issue resolved by renaming form input from password to password1
60 | 
61 | STORYPOINTS: 3
62 | ```
63 | 


--------------------------------------------------------------------------------
/milestone-projects/ms1.md:
--------------------------------------------------------------------------------
 1 | # MILESTONE #1 :
 2 | 
 3 | ### MANDATORY REQUIREMENTS
 4 | 1. Static front-end project: Write custom HTML5 and CSS3 code to create a website of at least 3 pages, or (if using a single scrolling page), at least 3 separate page areas.
 5 | 2. Information Architecture: Incorporate a main navigation menu and structured layout (you might want to use Bootstrap to accomplish this).
 6 | 3. Documentation: Write a README.md file for your project that explains what the project does and the value that it provides to its users.
 7 | 4. Version Control: Use Git & GitHub for version control.
 8 | 5. Attribution: Maintain clear separation between code written by you and code from external sources (e.g. libraries or tutorials). Attribute any code from external sources to its source via comments above the code and (for larger dependencies) in the README.
 9 | 6. Deployment: Deploy the final version of your code to a hosting platform such as GitHub Pages.
10 | 
11 | **This [document](docs/ms1-loa.pdf) contains the full list***
12 | 
13 | 
14 | ### README :
15 | - [ ] Written with [markdown](https://www.markdownguide.org/cheat-sheet/)
16 | - [ ] Commit the README the same way you commit your project : "doc(readme): added testing steps"
17 | - [ ] Screenshot of the finished site from [AM I RESPONSIVE](http://ami.responsivedesign.is/)
18 | - [ ] Explanation of the site's purpose - key project goals, target audience
19 | - [ ] User stories - As a **user** I want to **fill out the contact form** so that I can **contact the company**
20 | - [ ] Design : Wireframes (sketch is fine), colour palette, typography - & why you chose them
21 | - [ ] Screenshots of all site features (Nav bar | footer | tables | etc...) accompanied by an explanation of what each feature does.
22 | - [ ] Thorough testing steps & screenshots of validator testing
23 | - [ ] All deployment steps including initial steps to clone the repo (git add/commit/push | deploy to github pages)
24 | - [ ] Credit code & media sources
25 | - [ ] Pass README through a spell checker!
26 | 
27 | ### TESTING AS A TABLE :
28 | **TEST** | **ACTION** | **EXPECTATION** | **RESULT** 
29 | ----------|----------|----------|----------
30 | Home page | Size to 320px using Chrome Dev Tools	| Elements look good @ 320px | Works as expected
31 | Home page | Size to 1920px using Chrome Dev Tools | Elements look good 1920px | Works as expected
32 | Contact form | Click send button without data in form fields | Cannot submit form | Works as expected
33 | Nav bar - home page | Click nav buttons | That each nav element takes me to the correct page site page | Works as expected
34 | 
35 | - To achieve the above table, this is what the formatting your README will look like :
36 | ```
37 | **TEST** | **ACTION** | **EXPECTATION** | **RESULT** 
38 | ----------|----------|----------|----------
39 | Home page	| Size to 320px using Chrome Dev Tools	| Elements look good @ 320px | Works as expected
40 | Home page	| Size to 1920px using Chrome Dev Tools | Elements look good 1920px | Works as expected
41 | Contact form | Click send button without data in form fields | Cannot submit form | Works as expected
42 | Nav bar - home page | Click nav buttons | That each nav element takes me to the correct page site page | Works as expected
43 | ```
44 | 


--------------------------------------------------------------------------------
/milestone-projects/ms2.md:
--------------------------------------------------------------------------------
 1 | # MILESTONE #1 :
 2 | 
 3 | ### </ >Main Technologies
 4 | Required: HTML, CSS, JavaScript.
 5 | Optional: jQuery or any other JavaScript libraries, external APIs.
 6 | 
 7 | ### MANDATORY REQUIREMENTS
 8 | A project violating any of these requirements will FAIL
 9 | 
10 | 1. Dynamic Front End Project: Write custom JavaScript, HTML and CSS code to create a front-end web application consisting of one or more HTML pages with significant interactive functionality.
11 | 2. Site Responses: Use JavaScript to have the site produce relevant responses dependent on users' actions.
12 | 3. Information Architecture: Incorporate a main navigation menu (unless irrelevant) and structured layout (you might want to use Bootstrap to accomplish this).
13 | 4. Documentation: Write a README.md file for your project that explains what the project does and the value that it provides to its users.
14 | 5. Version Control: Use Git & GitHub for version control.
15 | 6. Attribution: Maintain clear separation between code written by you and code from external sources (e.g. libraries or tutorials). Attribute any code from external sources to its source via comments above the code and (for larger dependencies) in the README.
16 | 7. Deployment: Deploy the final version of your code to a hosting platform such as GitHub Pages.
17 | 
18 | **This [document](docs/ms2-loa.pdf) contains the full list**
19 | 
20 | ### README :
21 | - [ ] Written with [markdown](https://www.markdownguide.org/cheat-sheet/)
22 | - [ ] Commit the README the same way you commit your project : "doc(readme): added testing steps"
23 | - [ ] Screenshot of the finished site from [AM I RESPONSIVE](http://ami.responsivedesign.is/)
24 | - [ ] Explanation of the site's purpose - key project goals, target audience
25 | - [ ] User stories - As a **user** I want to **fill out the contact form** so that I can **contact the company**
26 | - [ ] Design : Wireframes (sketch is fine), colour palette, typography - & why you chose them
27 | - [ ] Screenshots of all site features (Nav bar | footer | tables | etc...) accompanied by an explanation of what each feature does & link to the relevant user story.
28 | - [ ] Thorough testing steps & screenshots of validator testing - Explain the principles of automated and manual testing and when each might be deployed.
29 | - [ ] All deployment steps including initial steps to clone the repo (git add/commit/push | deploy to github pages)
30 | - [ ] Credit code & media sources - Attribute any code from external sources to its source via comments above the code and (for larger dependencies) in the README.
31 | - [ ] Pass README through a spell checker!
32 | 
33 | ### TESTING AS A TABLE :
34 | **TEST** | **ACTION** | **EXPECTATION** | **RESULT** 
35 | ----------|----------|----------|----------
36 | Home page | Size to 320px using Chrome Dev Tools	| Elements look good @ 320px | Works as expected
37 | Home page | Size to 1920px using Chrome Dev Tools | Elements look good 1920px | Works as expected
38 | Contact form | Click send button without data in form fields | Cannot submit form | Works as expected
39 | Nav bar - home page | Click nav buttons | That each nav element takes me to the correct page site page | Works as expected
40 | 
41 | - To achieve the above table, this is what the formatting your README will look like :
42 | ```
43 | **TEST** | **ACTION** | **EXPECTATION** | **RESULT** 
44 | ----------|----------|----------|----------
45 | Home page	| Size to 320px using Chrome Dev Tools	| Elements look good @ 320px | Works as expected
46 | Home page	| Size to 1920px using Chrome Dev Tools | Elements look good 1920px | Works as expected
47 | Contact form | Click send button without data in form fields | Cannot submit form | Works as expected
48 | Nav bar - home page | Click nav buttons | That each nav element takes me to the correct page site page | Works as expected
49 | ```
50 | 


--------------------------------------------------------------------------------
/milestone-projects/ms3.md:
--------------------------------------------------------------------------------
 1 | # MILESTONE #4 :
 2 | 
 3 | ### </> MAIN TECHNOLOGIES :
 4 | HTML, CSS, JavaScript, Python+Flask, PostgreSQL OR MongoDB
 5 | 
 6 | Additional libraries and external APIs
 7 | 
 8 | ### MANDATORY REQUIREMENTS :
 9 | 1. Data handling: Build a Relational OR Non-Relational Database backed Flask project for a web application that allows users to store and manipulate data records about a particular domain.
10 | 2. Database structure: Put some effort into designing a database structure well-suited for your domain. Make sure to put some thought into the relationships between records of different entities.
11 | 3. User functionality: Create functionality for users to create, locate, display, edit and delete records (CRUD functionality).
12 | 4. Use of technologies: Use HTML and custom CSS for the website's front-end.
13 | 5. Structure: Incorporate a main navigation menu and structured layout (you might want to use Materialize or Bootstrap to accomplish this).
14 | 6. Documentation: Write a README.md file for your project that explains what the project does and the value that it provides to its users.
15 | 7. Version control: Use Git & GitHub for version control.
16 | 8. Attribution: Maintain clear separation between code written by you and code from external sources (e.g. libraries or tutorials). Attribute any code from external sources to its source via comments above the code and (for larger dependencies) in the README.
17 | 9. Deployment: Deploy the final version of your code to a hosting platform such as Heroku.
18 | 10. Make sure to not include any passwords or secret keys in the project repository.
19 | 
20 | ### !IMPORTANT NOTE! :
21 | - Feel free to reuse the authentication from the mini-project. The focus of this milestone project is on the data, rather than any business logic.
22 | 
23 | **This [document](docs/ms3-loa.pdf) contains the full list***
24 | 
25 | ### README :
26 | - [ ] Written with [markdown](https://www.markdownguide.org/cheat-sheet/)
27 | - [ ] Commit the README the same way you commit your project : "doc(readme): added testing steps"
28 | - [ ] Screenshot of the finished site from [AM I RESPONSIVE](http://ami.responsivedesign.is/)
29 | - [ ] Explanation of the site's purpose - key project goals, target audience
30 | - [ ] User stories - As a **user** I want to **fill out the contact form** so that I can **contact the company**
31 | - [ ] Design : Wireframes (sketch is fine), colour palette, typography - & why you chose them
32 | - [ ] Screenshots of all site features (Nav bar | footer | tables | etc...) accompanied by an explanation of what each feature does.
33 | - [ ] Show & explain your ERD model (your database structure & how your models relate to each other : I recommend using [DrawSQL](https://drawsql.app/) for this
34 | - [ ] Thorough testing steps & screenshots of validator testing
35 | - [ ] All deployment steps including initial steps to clone the repo (git add/commit/push | deploy to github pages)
36 | - [ ] Credit code & media sources
37 | - [ ] Pass README through a spell checker!
38 | 
39 | ### TESTING AS A TABLE :
40 | **TEST** | **ACTION** | **EXPECTATION** | **RESULT** 
41 | ----------|----------|----------|----------
42 | Home page | Size to 320px using Chrome Dev Tools	| Elements look good @ 320px | Works as expected
43 | Home page | Size to 1920px using Chrome Dev Tools | Elements look good 1920px | Works as expected
44 | Contact form | Click send button without data in form fields | Cannot submit form | Works as expected
45 | Nav bar - home page | Click nav buttons | That each nav element takes me to the correct page site page | Works as expected
46 | 
47 | - To achieve the above table, this is what the formatting your README will look like :
48 | ```
49 | **TEST** | **ACTION** | **EXPECTATION** | **RESULT** 
50 | ----------|----------|----------|----------
51 | Home page	| Size to 320px using Chrome Dev Tools	| Elements look good @ 320px | Works as expected
52 | Home page	| Size to 1920px using Chrome Dev Tools | Elements look good 1920px | Works as expected
53 | Contact form | Click send button without data in form fields | Cannot submit form | Works as expected
54 | Nav bar - home page | Click nav buttons | That each nav element takes me to the correct page site page | Works as expected
55 | ```
56 | 


--------------------------------------------------------------------------------
/portfolio-projects/pp5-advfe.md:
--------------------------------------------------------------------------------
 1 | ### README: backend
 2 | - document all deployment steps (including but not limited to: creating requirements.txt, procfile, terminal commands to install packages)
 3 | - thorough testing of all elements (CRUD)
 4 | - ERD that reflects model relations ([Draw SQL](https://drawsql.app/) or [Django database extension](https://medium.com/@yathomasi1/1-using-django-extensions-to-visualize-the-database-diagram-in-django-application-c5fa7e710e16))
 5 | 
 6 | ### README: frontend
 7 | - [ ] Written with [markdown](https://www.markdownguide.org/cheat-sheet/)
 8 | - [ ] Commit the README the same way you commit your project : "feat(readme): added testing steps"
 9 | - [ ] Screenshot of finished site from [AM I RESPONSIVE](http://ami.responsivedesign.is/)
10 | - [ ] Explanation of the site's purpose - key project goals, target audience
11 | - [ ] Wireframes
12 | - [ ] Colour palettes
13 | - [ ] Explanation of design choices, why you picked this theme, & how the concept is beneficial to others
14 | - [ ] Screenshots of all site features (Nav bar | footer | tables | etc...) accompanied by an explanation of what each feature does
15 | - [ ] Thorough testing steps & screenshots of validator testing
16 | - [ ] thorough testing of all elements (CRUD, page sizing, security, filling out forms)
17 | - [ ] All deployment steps (cloning repo | git add/commit/push | deploy to github pages)
18 | - [ ] Credit code & media sources
19 | - [ ] Pass README through a spell checker!
20 | 
21 | ### [AGILE](https://github.com/CluelessBiker/mentoring/blob/main/userstories.md):
22 | - create user stories for all features
23 | - assign stories to relevant sprints
24 | - record all stories/sprints to **github projects**
25 | 
26 | ### GIT:
27 | - a clean & informative git commit history
28 | 
29 | ### UI:
30 | - design an intuitive, user friendly site, that is relevant to the theme/topic chosen
31 | - UI must be responsive from 320px-1920px (290px if trying to impress assessors)
32 | - all interactive elements must be functional (button clicks, input forms, social links)
33 | - full CRUD must be available via the UI built, **_NOT_** just inside the Django admin panel
34 | - must have user login, that reflects logged-in status to the current user, & restricts the functionality of CRUD for said user)
35 | - provide notifications to reflect that posts have been created/edited/deleted, or that users have successfully signed in
36 | - restrict input fields to only accept relevant data (eg. type='number' or type='phone') & display error messages when incorrectly populated
37 | - TWO forms must be supplied (ed. creating a post form, editing a post form)
38 | 
39 | ### JSX:
40 | - doc strings above functions
41 | - code comments
42 | - properly indented
43 | - files must be PascalCase
44 | - files must have corresponding style sheets
45 | - try to keep components modular & to have a single purpose (eg. assets spinners, avatars, forms)
46 | - project **must** be built in react
47 | - deployed to Heroku
48 | - install & configure [ESLint](https://gist.github.com/ianmeigh/8e603b91a38d7829d959402bfcf29d3d) (a JSX linter)
49 | - remove all dead code (commented out code, or code that is no longer relevant to the project just as components that have not been implemented)
50 | 
51 | ### PYTHON:
52 | - doc strings inside functions & classes
53 | - code comments
54 | - properly indented
55 | - files must be snake_case
56 | - ensure all (secret)keys are saved to the env.py file & are **not** visible in your settings.py
57 | - deployed to Heroku
58 | - a minimum of one **_CUSTOM_** model must be implemented that is relevant to your concept
59 | - all files must pass through [PEP8](https://pep8ci.herokuapp.com/)
60 | - custom python code must be written (CRUD on your custom model, eg: views.py & serializer.py)
61 | - relevant fields inside your model (eg. integer fields for numbers, booleans for true/false, dates for dates, etc)
62 | - ensure DEBUG is set to False before submission
63 | - remove all dead code (commented-out code, or code that is no longer relevant to the project just as models that have not been implemented)
64 | 
65 | 
66 | ### CSS:
67 | - code comments
68 | - properly indented
69 | - files must be lowercase
70 | 
71 | ### ASSETS/MEDIA:
72 | - files must be kebab-case
73 | 


--------------------------------------------------------------------------------
/interview.md:
--------------------------------------------------------------------------------
 1 | # INTERVIEW PREP!!
 2 | 
 3 | ## GENERAL
 4 | Introductions - Introduce yourself and then ask them to give an introduction.
 5 | 
 6 | ## QUESTIONS ABOUT YOU :
 7 | - Tell me about yourself ?
 8 | - How did you hear about our company?
 9 | - Why are you interested in working for us?
10 | - Tell me about a time you experienced a problem with (specific project on resume) and how you solved it/overcame it ?
11 | - In a group setting, do you pin yourself as more of a leader or a follower? Why?
12 | - If you take on a leader role, what is your philosophy on leading others ?
13 | - If you take on a follower role, what is your philosophy on being a quality team contributor?
14 | - Do you see yourself as a leader eventually?
15 | - What makes you not take on leadership qualities now?
16 | - Why did you want to work in software development?
17 | - What skills do you think are important for a junior software developer?
18 | - What programming languages are you most familiar with?
19 | - How would you troubleshoot software bugs?
20 | - What part of software development do you think is the most difficult?
21 | - Tell me about your personal projects and why you chose to work on it. Which one is your favourite and why?
22 | - In the past 6 months, what have you done outside of work or school to learn more in the field? 
23 | - Where do you see yourself in 3-5 years?
24 | - How do you organize your workflow to complete web development projects?
25 | - How do you determine the scope of a project?
26 | - ***Do you have any questions about the position?***
27 | 
28 | ---
29 | 
30 | ## QUESTIONS FOR THE COMPANY :
31 | - What development options do you offer your employees so that they may further their abilities?
32 | - Does the company have plans to expand into a different industry?
33 | - How do you train new people in the team?
34 | - What is the primary tech stack used?
35 | - What is the work environment like?
36 | - How large is the team?
37 | - What are your expectations of me in the first year?
38 | - What are the company's plans for the person who fills this role?
39 | - How do you assess a persons progress?
40 | - What changes within the company have been implemented based on employee suggestions?
41 | - Is there an off boarding process with exit interviews?
42 |   - If so, what changes have been implemented based on those?
43 | - What is the onboarding process like, and when do you expect a new hire to be fully up to speed by?
44 | - Is there an official/unofficial mentorship program to foster professional growth/development?
45 | - What characteristics to the top performers in this role share?
46 | - Is there a common theme amongst employees who underperform?
47 | - What is ***your*** favourite thing about working here?
48 | 
49 | ### Additional questions if you feel you aren’t getting the job… :
50 | - What type of projects to you like to see from potential candidates?
51 | - What points in a Resume|CV makes a candidate stand out to invite them in for an interview?
52 | 
53 | ---
54 | 
55 | ## TECH QUESTIONS :
56 | - Explain the difference between classes and IDs.
57 | - What is CSS Specificity.
58 | - Can you explain the structure of a Django application.
59 | - Can you explain object relational mapping.
60 | - Do you have any experience with unit testing? 
61 | - Have you got any experience with test driven development or behaviour driven development?
62 | - What kind of data storage have you worked with before and how do you make the decision on what kind of storage to use with your applications.
63 | - Can you tell me about a recent project you worked on and any issues you had during development and how you came to resolve them.
64 | - Can you define the 4 main principles of Object Orientated Programming.
65 | - Encapsulation, Abstraction, Polymorphism and Inheritance
66 | 
67 | ---
68 | 
69 | ## THE STAR METHOD :
70 | - ***Situation*** : An event, project, or challenge you faced at work.
71 | - ***Task*** : The tasks and responsibilities you had in the situation.
72 | - ***Action*** : Steps you took to fix or complete the task.
73 | - ***Result*** : Results of the actions you’d taken.
74 | 
75 | ### QUESTIONS :
76 | - Can you tell me about a time you have ever had a disagreement with someone at work and  the steps you took to resolve it.
77 | - Tell me about a time you made a mistake at work. How did you handle it?
78 | - How do you approach a task that you’ve never done before?
79 | - Can you tell me about a time you ever had difficulty completing a task at work and how you overcame that to get the job done.
80 | 


--------------------------------------------------------------------------------
/sample-projects.md:
--------------------------------------------------------------------------------
 1 | ### PP1 - HTML & CSS :
 2 | - [Naka Tomato Society](https://github.com/Pelikantapeten/p1-nacka-tomato-society)
 3 | - [Survival Guild](https://github.com/Irishbecky91/survival-guild)
 4 | - [Horizon Gamepedia](https://github.com/AlexaH88/horizon-gamepedia)
 5 | - [Rhino Aid](https://github.com/Tony118g/rhino-aid)
 6 | - [Vincent Van Gogh](https://github.com/leoniemclaughlin7/Vincent-Van-Gogh#vincent-van-gogh)
 7 | - [Trave](https://github.com/conroy9068/project-1-trave-website)
 8 | - [At Lujain](https://github.com/SalMod91/project-1-at-lujain)
 9 | - [Space Fruit](https://github.com/ShaneDoyleDev/spacefruit)
10 | - [TG Portfolio](https://github.com/timgoalen/tg-composer-portfolio)
11 | - [North London Player Meetup](https://github.com/sjayawardena/p1-northlondon-multiplayer-meetup)
12 | - [Startup Academy](https://github.com/BOM-98/project_1)
13 | - [Indo Diving Collective](https://github.com/DebbieBergstrom/CI_PP1_DS)
14 | 
15 | ### PP2 - JavaScript :
16 | - [Piannotes](https://github.com/AlexaH88/pianotes)
17 | - [Leeds Quiz](https://github.com/andreas-ka/leeds-quiz)
18 | - [The Everything Quiz](https://github.com/Tony118g/the-everything-quiz)
19 | - [Memento](https://github.com/AndreeeasN/pp2-memento)
20 | - [quick mem](https://github.com/Pelikantapeten/p2-quickmem/tree/main)
21 | - [CyberCypher](https://github.com/ShaneDoyleDev/cybercypher/tree/main)
22 | - [Identify this chord](https://github.com/timgoalen/identify-this-chord)
23 | - [Capital Cities Quiz](https://github.com/sjayawardena/p2-capital-cities-quiz)
24 | - [Quiz App](https://github.com/conroy9068/project-2-quiz-app)
25 | - [Mental Maths](https://github.com/BOM-98/mental-maths-project-2)
26 | <!-- - [Odd or Even](https://github.com/SalMod91/project-2-odd-even) -->
27 | - [Tarantino quiz](https://github.com/DebbieBergstrom/tarantino_quiz)
28 | 
29 | ### PP3 - Python :
30 | - [Harry Potter Adventure Game](https://github.com/AlexaH88/harry-potter-adventure-game)
31 | - [Dad Jokes](https://github.com/Pelikantapeten/p3-dad-jokes)
32 | - [Doctor Diary](https://github.com/Tony118g/doctor-diary)
33 | - [Bigfoot Rage](https://github.com/andreas-ka/bigfoot-rage)
34 | - [Russian Roulette](https://github.com/DebbieBergstrom/Russian-Roulette/tree/main)
35 | - [Commandline Coffee](https://github.com/timgoalen/command-line-coffee)
36 | - [Recipe Selector](https://github.com/sjayawardena/p3-three-ingredient-recipe-selector)
37 | - [Tic Tac Toe](https://github.com/conroy9068/p3-Python)
38 | - [investIQ](https://github.com/BOM-98/investIQ-project-3)
39 | <!-- - [Text Land](https://github.com/SalMod91/project-3-text-land) -->
40 | 
41 | ### PP4 - Django :
42 | - [Anthemology](https://github.com/AlexaH88/anthemology)
43 | - [Bundu Restaurant](https://github.com/Tony118g/bundu-restaurant)
44 | - [MS Dashboard](https://github.com/Pelikantapeten/p4-ms-dashboard)
45 | - [Magical Places - London](https://github.com/timgoalen/magical-places-london)
46 | - [Culture Club](https://github.com/DebbieBergstrom/Culture-Club)
47 | - [QRSignInSignOut](https://github.com/conroy9068/p4-QRSignInSignOut)
48 | - [Tough GLove](https://github.com/BOM-98/tough-glove-project-4)
49 | 
50 | ### PP5 - ADVANCED FRONT END (React) :
51 | - [Snap Food](https://github.com/aleksandracodes/ci_pp5_snapfood) | [Backend API](https://github.com/aleksandracodes/snapfood-drf-api)
52 | - [The Winding Path](https://github.com/cornishcoder1/pp5-react-frontend-the-winding-path) | [Backend API](https://github.com/cornishcoder1/pp5-backend-DRF-the-winding-path)
53 | - [Globe Trotter](https://github.com/Stuffy33/globetrotter) | [Backend API](https://github.com/Stuffy33/globetrotter-drf-api)
54 | - [Carss](https://github.com/ErikHgm/carss-react-frontend) | [Backend API](https://github.com/ErikHgm/carss-drf-backend)
55 | - [Cozy Corner](https://github.com/mikakallberg/cozycorner) | [Backend API](https://github.com/mikakallberg/Project-Portfolio-5-DRF)
56 | - [Explore Stockholm](https://github.com/andreas-ka/explore-sthlm-react-frontend) | [Backend API](https://github.com/andreas-ka/explore-sthlm-api)
57 | 
58 | ### PP5 - ECOMMERCE (Django) :
59 | - [Sensical](https://github.com/davidcalikes/sensical.ie) <!-- Distinction -->
60 | - [Time Hoppers](https://github.com/ciaraosull/project-5-time-hoppers) <!-- Merit -->
61 | - [Green Planet](https://github.com/AnaMelisaGo/portfolio-5-green-planet) <!-- Pass -->
62 | <!-- - [Sweet Tooth](https://github.com/AndreeeasN/pp5-swetooth-candy-co) -->
63 | <!-- - [Live | Events](https://github.com/StaffanHynge/E-commerce-store-v1) -->
64 | <!-- - [Work Workouts](https://github.com/Rakdoslover/Project-5-first) -->
65 | - [MarketFlex](https://github.com/conroy9068/p5-eCommerce)
66 | - [Atlas](https://github.com/BOM-98/atlas-rogue-project-5)
67 | <!-- - [realDreamsCo](https://github.com/DebbieBergstrom/realDreamsCo) -->
68 | 
69 | 


--------------------------------------------------------------------------------
/milestone-projects/ms4.md:
--------------------------------------------------------------------------------
 1 | # MILESTONE #4 :
 2 | 
 3 | ### MANDATORY REQUIREMENTS
 4 | 1. Django Full Stack Project: Build a Django project backend by a relational database to create a website that allows users to store and manipulate data records about a particular domain.
 5 | 2. Multiple Apps: The project must be a brand new Django project, composed of multiple apps (an app for each potentially reusable component in your project).
 6 | 3. Data Modeling: Put some effort into designing a relational database schema well-suited for your domain. Make sure to put some thought into the relationships between entities. Create **at least 2 custom django models** beyond the examples shown on the course (changing the field names of the miniproject models is not customisation)
 7 | 4. User Authentication: The project should include an authentication mechanism, allowing a user to register and log in, and there should be a good reason as to why the users would need to do so. e.g., a user would have to register to persist their shopping cart between sessions (otherwise it would be lost).
 8 | 5. User Interaction: Include at least one form with validation that will allow users to create and edit models in the backend (in addition to the authentication mechanism). - FULL CRUD to at least one of the models in the UI
 9 | 6. Use of Stripe: At least one of your Django apps should contain some e-commerce functionality using Stripe. This may be a shopping cart checkout or single payments, or donations, etc. After paying successfully, the user would then gain access to additional functionality/content on the site. Note that for this project you should use Stripe's test functionality, rather than actual live payments.
10 | 7. Structure and Navigation: Incorporate a main navigation menu and structured layout (you might want to use Bootstrap to accomplish this).
11 | 8. Use of JavaScript: The frontend should contain some JavaScript logic you have written to enhance the user experience.
12 | 9. Documentation: Write a README.md file for your project that explains what the project does and the value that it provides to its users.
13 | 10. Version Control: Use Git & GitHub for version control.
14 | 11. Attribution: Maintain clear separation between code written by you and code from external sources (e.g. libraries or tutorials). Attribute any code from external sources to its source via comments above the code and (for larger dependencies) in the README.
15 | 12. Deployment: Deploy the final version of your code to a hosting platform such as Heroku.
16 | 13. Security: Make sure to not include any passwords or secret keys in the project repository. Make sure to turn off the Django DEBUG mode, which could expose secrets.
17 | 
18 | **This [document](docs/ms4-loa.pdf) contains the full list**
19 | 
20 | ### README :
21 | - [ ] Written with [markdown](https://www.markdownguide.org/cheat-sheet/)
22 | - [ ] Commit the README the same way you commit your project : "doc(readme): added testing steps"
23 | - [ ] Screenshot of the finished site from [AM I RESPONSIVE](http://ami.responsivedesign.is/)
24 | - [ ] Explanation of the site's purpose - key project goals, target audience
25 | - [ ] User stories - As a **user** I want to **fill out the contact form** so that I can **contact the company**
26 | - [ ] Design : Wireframes (sketch is fine), colour palette, typography - & why you chose them
27 | - [ ] Screenshots of all site features (Nav bar | footer | tables | etc...) accompanied by an explanation of what each feature does.
28 | - [ ] Show & explain your ERD model (your database structure & how your models relate to each other) : I recommend using [DrawSQL](https://drawsql.app/) for this
29 | - [ ] Thorough testing steps & screenshots of validator testing
30 | - [ ] All deployment steps including initial steps to clone the repo (git add/commit/push | deploy to github pages)
31 | - [ ] Credit code & media sources
32 | - [ ] Pass README through a spell checker!
33 | 
34 | ### TESTING AS A TABLE :
35 | **TEST** | **ACTION** | **EXPECTATION** | **RESULT** 
36 | ----------|----------|----------|----------
37 | Home page | Size to 320px using Chrome Dev Tools	| Elements look good @ 320px | Works as expected
38 | Home page | Size to 1920px using Chrome Dev Tools | Elements look good 1920px | Works as expected
39 | Contact form | Click send button without data in form fields | Cannot submit form | Works as expected
40 | Nav bar - home page | Click nav buttons | That each nav element takes me to the correct page site page | Works as expected
41 | 
42 | - To achieve the above table, this is what the formatting your README will look like :
43 | ```
44 | **TEST** | **ACTION** | **EXPECTATION** | **RESULT** 
45 | ----------|----------|----------|----------
46 | Home page	| Size to 320px using Chrome Dev Tools	| Elements look good @ 320px | Works as expected
47 | Home page	| Size to 1920px using Chrome Dev Tools | Elements look good 1920px | Works as expected
48 | Contact form | Click send button without data in form fields | Cannot submit form | Works as expected
49 | Nav bar - home page | Click nav buttons | That each nav element takes me to the correct page site page | Works as expected
50 | ```
51 | 
52 | ### TESTING / VALIDATORS :
53 | - [W3](https://validator.w3.org/) : HTML validator
54 | - [W3C](https://jigsaw.w3.org/css-validator/) : CSS validator
55 | - [JS Hint](https://jshint.com/) : JavaScript validator
56 | - [PEP8 Lintner : C.I.](https://pep8ci.herokuapp.com)
57 | - Install a python linter directly into your project following [these steps](https://code-institute-room.slack.com/archives/CPCT0MBKL/p1664380977854349) in Slack.
58 | 
59 | ### ADDITIONAL LEARNING : 
60 | - [Securing Django Views from Unauthorized Access](https://www.codu.co/articles/securing-django-views-from-unauthorized-access-npyb3to_) : blog post explaining how to prevent users accessing data through URLs that have not been secured.
61 | - [Django walkthrough series](https://www.youtube.com/watch?v=sBjbty691eI&list=PLXuTq6OsqZjbCSfiLNb2f1FOs8viArjWy) : YouTube
62 | - [Common reasons for failing PP4](https://www.youtube.com/watch?v=Q5cdZXomzVg) : Youtube - an assessor shares common reasons students fail this project, & and has an FAQ.
63 | - [Django database extension](https://medium.com/@yathomasi1/1-using-django-extensions-to-visualize-the-database-diagram-in-django-application-c5fa7e710e16) : Allows you to generate a schema of your database to visually see the connections.
64 | 


--------------------------------------------------------------------------------
/readmes.md:
--------------------------------------------------------------------------------
  1 | # README REQUIREMENTS :
  2 | 
  3 | - [README formatter](https://stackedit.io/app#) : very useful tool
  4 | 
  5 | ## ALL READMES :
  6 | - [ ] Written with [markdown](https://www.markdownguide.org/cheat-sheet/)
  7 | - [ ] Commit the README the same way you commit your project : "feat(readme): added testing steps"
  8 | - [ ] Screenshot of finished site from [AM I RESPONSIVE](http://ami.responsivedesign.is/)
  9 | - [ ] Explanation of the site's purpose - key project goals, target audience
 10 | - [ ] Screenshots of all site features (Nav bar | footer | tables | etc...) accompanied by an explanation of what each feature does. ***NOT FOR PP3***
 11 | - [ ] Thorough testing steps & screenshots of validator testing
 12 | - [ ] All deployment steps (cloning repo | git add/commit/push | deploy to github pages)
 13 | - [ ] Credit code & media sources
 14 | - [ ] Pass README through a spell checker!
 15 | 
 16 | --- 
 17 | 
 18 | ## PP1 | PP2 | PP3 : [C.I. Template](https://github.com/Code-Institute-Solutions/readme-template)
 19 | #### View the CI README in [Markdown](https://raw.githubusercontent.com/Code-Institute-Solutions/readme-template/master/README.md)
 20 | ***Additional Content :***
 21 | - [ ] Wireframes - [Balsamiq](https://balsamiq.com/) / Data schema - [Lucid chart](https://www.lucidchart.com/pages/landing?utm_source=google&utm_medium=cpc&utm_campaign=_chart_en_tier3_mixed_search_brand_exact_&km_CPC_CampaignId=1484560207&km_CPC_AdGroupID=60168114191&km_CPC_Keyword=lucid%20chart&km_CPC_MatchType=e&km_CPC_ExtensionID=&km_CPC_Network=g&km_CPC_AdPosition=&km_CPC_Creative=354596054350&km_CPC_TargetID=kwd-55720648523&km_CPC_Country=9061582&km_CPC_Device=c&km_CPC_placement=&km_CPC_target=&gclid=Cj0KCQjw06OTBhC_ARIsAAU1yOWd-aAfWgTzdJakjoJHLkdNiAJMRGWM6YcYIJWJl9zKQhzKJIGfYaQaAluFEALw_wcB) : a pen/paper sketch will suffice
 22 | - [ ] User stories: e.g. :
 23 | - As a **user** I want to **fill out the contact form** so that I can **contact the company**
 24 | - As a **user** I want to **view the about page** so that I can **learn more about the company**
 25 | - [ ] Design choices & the reason behind them : colour schemes | font selection | features added
 26 | 
 27 | --- 
 28 | 
 29 | ## PP3 :
 30 | - Any & all installed packages/libraries should be documented in your readme, along with an explanation of what it is & why you used it.
 31 | 
 32 | Testing for this project is limited as it is restricted to your user interactions that come in the form of inputs. Please document each & every input in the following manner:
 33 | 
 34 | **TEST** | **ACTION** | **EXPECTATION** | **RESULT** 
 35 | ----------|----------|----------|----------
 36 | Input - User name - Invalid data	| Entered in : blank space, return key, symbols, numbers	| app informs user of invalid data & prompts the user to try again | Works as expected
 37 | Input - User name - Valid data	| Entered in : characters in scope | app proceeds to next function | Works as expected
 38 | 
 39 | --- 
 40 | 
 41 | Alternatively, create it in google sheets / excel with the above headers. Copy the cells and paste into https://tabletomarkdown.com/ - This will generate the markdown for you.
 42 | 
 43 | ## PP4 :
 44 | - [ ] Wireframes
 45 | - [ ] Design choices & the reason behind them : colour schemes | font selection | features added
 46 | - [ ] User stories : either in an Agile tool & linked in the README, or directly in the README
 47 | 
 48 | ***Additional Content :***
 49 | - [ ] Detailed explanation of data schema
 50 | - [ ] Combine ***User stories*** into ***Epics*** : e.g. the user stories for `sign-up`, `login`, `logout` can be grouped into a single epic as they are related features.
 51 | - [ ] Document all bugs & their fixes + an explanation of any bugs left unfixed & why
 52 | 
 53 | --- 
 54 | 
 55 | ## PP5 - ADVFE :
 56 | 
 57 | If your backend & frontend are in separate repos, !! TWO READMES ARE REQUIRED !!
 58 | If you have combined BE & FE into a single repo, you may combine the README.
 59 | 
 60 | ### BACKEND :
 61 | - [ ] All deployment steps
 62 | - [ ] Thoroughly document manual testing
 63 | - [ ] Backend User stories in an Agile tool - link to stories & Kanban board in README (no need to repeat the individual stories again)
 64 | - [ ] Data schema
 65 | 
 66 | ### FRONTEND :
 67 | - [ ] All deployment steps
 68 | - [ ] Document reuse of React components to demonstrate understanding
 69 | - [ ] Wireframes
 70 | - [ ] Project goals
 71 | - [ ] Frontend User stories in an Agile tool - link to stories & Kanban board in README (no need to repeat the individual stories again)
 72 | - [ ] Thoroughly document manual testing
 73 | 
 74 | --- 
 75 | 
 76 | ## PP5 - ECOMM :
 77 | - [ ] Wireframes
 78 | - [ ] Colour Scheme - & why you chose this palette
 79 | - [ ] Typography choice - & why you chose these fonts
 80 | - [ ] Frontend User stories in an Agile tool - link to stories & Kanban board in README (no need to repeat the individual stories again)
 81 | - [ ] Thoroughly document manual testing as a table
 82 | - [ ] All deployment steps so good your mother could follow them
 83 | - [ ] A list of all installed packages & the purpose of each one
 84 | - [ ] Screenshots of your dummy-Facebook page (FB often deletes the page, screenshots are a failsafe if this is to occur)
 85 | - [ ] Screenshots of your Database Schema generated either by [Lucid chart](https://www.lucidchart.com) or [Django database extension](https://medium.com/@yathomasi1/1-using-django-extensions-to-visualize-the-database-diagram-in-django-application-c5fa7e710e16)
 86 | - [ ] Present a clear rationale for the development of the project - Who your target audience is, what are their needs, why would they choose your site
 87 | - [ ] Document your marketing strategy
 88 | - [ ] Provide your business model & clarify if you are a B2B or B2C company
 89 | - [ ] SEO section that includes sub-sections for : Keywords | Page titles | Robots.txt & sitemap.xml | Content | Surface
 90 | 
 91 | --- 
 92 | 
 93 | ## TESTING AS A TABLE :
 94 | **TEST** | **ACTION** | **EXPECTATION** | **RESULT** 
 95 | ----------|----------|----------|----------
 96 | Home page | Size to 320px using Chrome Dev Tools	| Elements look good @ 320px | Works as expected
 97 | Home page | Size to 1920px using Chrome Dev Tools | Elements look good 1920px | Works as expected
 98 | Contact form | Click send button without data in form fields | Cannot submit form | Works as expected
 99 | Nav bar - home page | Click nav buttons | That each nav element takes me to the correct page site page | Works as expected
100 | 
101 | - To achieve the above table, this is what the formatting your README will look like :
102 | ```
103 | **TEST** | **ACTION** | **EXPECTATION** | **RESULT** 
104 | ----------|----------|----------|----------
105 | Home page	| Size to 320px using Chrome Dev Tools	| Elements look good @ 320px | Works as expected
106 | Home page	| Size to 1920px using Chrome Dev Tools | Elements look good 1920px | Works as expected
107 | Contact form | Click send button without data in form fields | Cannot submit form | Works as expected
108 | Nav bar - home page | Click nav buttons | That each nav element takes me to the correct page site page | Works as expected
109 | ```
110 | 
111 | 
112 | 


--------------------------------------------------------------------------------
/resources.md:
--------------------------------------------------------------------------------
  1 | # LEARNING LINKS:
  2 | 
  3 | ### CSS & STYLING :
  4 | - [Flexbox guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) : a complete guide &  visual aide on flexbox.
  5 | - [W3Schools Flexbox](https://www.w3schools.com/css/css3_flexbox_responsive.asp) : a guide on CSS flexbox.
  6 | - [CSS Flexbox Froggy](https://flexboxfroggy.com/) : A game to teach you how CSS Flexbox works.
  7 | - [Quick Guide to CSS Flexbox - YouTube](https://www.youtube.com/watch?v=2uvyx4YK_rQ&list=PLXuTq6OsqZjYGLkK4d0RExJ98-m-IOIc2&index=1) : a demonstration on how to use flexbox.
  8 | - [CSS Grid Garden](https://cssgridgarden.com/) : A game to teach you how CSS  Gris works.
  9 | - [CSS - Inclusively Hidden](https://css-tricks.com/inclusively-hidden/) : how to resolve the WAVE error for the burger menu in PP1
 10 | ---
 11 | ### READMEs :
 12 | - [Markdown Guide](https://www.markdownguide.org/cheat-sheet/) : How to add markdown & styling to your README.
 13 | - [README template - C.I.](https://github.com/Code-Institute-Solutions/readme-template) : A template for how to compose your project README.
 14 | - [Project mock-up (techsini)](https://techsini.com/multi-mockup/) : Display your deployed link across different device screens.
 15 | - [AM I Responsive](http://ami.responsivedesign.is/) : Another mockup generator
 16 | ---
 17 | ### SEMINARS :
 18 | - [C.I. Seminars](https://www.youtube.com/playlist?list=PL_7334VduOHvzZYlgy_0kZLcic2NINCUt) : Informational videos presented by fellow students & alumni.
 19 | ---
 20 | ### WIREFRAMES / MOCKUPS :
 21 | - [Balsamiq](https://balsamiq.com/) : wireframes.
 22 | - [Figma](https://www.figma.com/) : wire frames.
 23 | - [Lucid Chart](https://www.lucidchart.com/pages/landing?utm_source=google&utm_medium=cpc&utm_campaign=_chart_en_tier3_mixed_search_brand_exact_&km_CPC_CampaignId=1484560207&km_CPC_AdGroupID=60168114191&km_CPC_Keyword=lucid%20chart&km_CPC_MatchType=e&km_CPC_ExtensionID=&km_CPC_Network=g&km_CPC_AdPosition=&km_CPC_Creative=354596054350&km_CPC_TargetID=kwd-55720648523&km_CPC_Country=9061582&km_CPC_Device=c&km_CPC_placement=&km_CPC_target=&gclid=Cj0KCQjw06OTBhC_ARIsAAU1yOWd-aAfWgTzdJakjoJHLkdNiAJMRGWM6YcYIJWJl9zKQhzKJIGfYaQaAluFEALw_wcB) : Flow chart mockup (PP2 & PP3)
 24 | - [Draw SQL](https://drawsql.app/) : ERD mockup (PP4 & PP5)
 25 | ---
 26 | ### PROJECT CREATION :
 27 | - [C.I. Project Setup](https://code-institute-students.github.io/codeanywhere-docs/workspace-setup/) : A setup guide on how to use CodeAnywhere 
 28 | - [C.I. repository template](https://github.com/Code-Institute-Org/gitpod-full-template): Repository template for PP1 & PP2
 29 | - [Git commit messages](https://cbea.ms/git-commit/#separate) : How to write a commit message.
 30 | - [Conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) : Writing conventional commit messages.
 31 | - [HTML formatting & indenting](https://granneman.com/webdev/coding/formatting-and-indenting-your-html) : how to properly format & indent your HTML markup.
 32 | - [HTML semantic markup](https://html.com/semantic-markup/) : a guide on what HTML semantic markup is.
 33 | - [File naming](https://www.thesitewizard.com/webdesign/create-good-filenames.shtml) : how to create proper file names within your project.
 34 | - [HTML input types - W3Schools](https://www.w3schools.com/html/html_form_input_types.asp) : assigning types to input fields.
 35 | ---
 36 | ### TESTING / VALIDATORS :
 37 | - [W3](https://validator.w3.org/) : HTML validator
 38 | - [W3C](https://jigsaw.w3.org/css-validator/) : CSS validator
 39 | - [JS Hint](https://jshint.com/) : JavaScript validator
 40 | - [Diff checker](https://www.diffchecker.com/#) : compare differences between file versions.
 41 | <!-- - [PEP8](http://pep8online.com/) : Python validator -->
 42 | - [PEP8 Lintner : C.I.](https://pep8ci.herokuapp.com)
 43 | - Install a python linter directly into your project following [these steps](https://code-institute-room.slack.com/archives/CPCT0MBKL/p1664380977854349) in Slack.
 44 | ---
 45 | ### CHROME EXTENSIONS :
 46 | - [WAVE](https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh/related) : website evaluation tool that checks everything from accessibility to contract in your site
 47 | - [Unicorn Revealer](https://chrome.google.com/webstore/detail/unicorn-revealer/lmlkphhdlngaicolpmaakfmhplagoaln) : Allows you to see the elements on your page, and the space that they take up so that you may understand how one item is affecting the rest.
 48 | - [Lighthouse](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk) : performance evaluation tool.
 49 | - [Eye Dropper](https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka) : Find the HEX values of colours on websites.
 50 | - [React Dev Tools - PP5 ADVFE](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) : Lights up when visiting a React page. Allows you to see the components tree.
 51 | ---
 52 | ### CONTENT :
 53 | - [Tiny PNG](https://tinypng.com/) : Image compression.
 54 | #### FREE STOCK PHOTOS :
 55 | - [Raw pixel](https://www.rawpixel.com/)
 56 | - [Stock Snap](https://stocksnap.io/)
 57 | - [Pik Wizard](https://pikwizard.com/)
 58 | - [Free Images](https://www.freeimages.com/)
 59 | - [Pic Jumbo](https://picjumbo.com/)
 60 | - [Stock Vault](https://www.stockvault.net/)
 61 | - [Unsplash](https://unsplash.com/)
 62 | - [Pexels](https://www.pexels.com/)
 63 | - [Midjourney](https://www.midjourney.com/home/?callbackUrl=%2Fapp%2F) : AI generative art
 64 | #### COLOUR
 65 | - [Adobe Color Wheel](https://color.adobe.com/create/color-wheel)
 66 | - [Contrast checker](https://webaim.org/resources/contrastchecker/)
 67 | - [Colormind](http://colormind.io/)
 68 | - [Color Space](https://mycolor.space/)
 69 | - [Eye dropper](https://eyedropper.org/) : a google chrome extension that allows you to find the HEX value of a colour on a website
 70 | - [Color Contrast](https://www.vandelaydesign.com/contrast-in-web-design/)
 71 | #### FONTS / ICONS / FAVICONS
 72 | - [Google fonts](https://fonts.google.com/)
 73 | - [Font Awesome](https://fontawesome.com/) : icons
 74 | - [UX Wing](https://uxwing.com/) : icons
 75 | - [Favic-o-matic](https://favicomatic.com/) : favicons
 76 | ---
 77 | ### ADDITIONAL LEARNING :
 78 | - [W3Schools](https://www.w3schools.com/) : a reference point for learning
 79 | - [Stack Overflow](https://stackoverflow.com/) : a community  to pose code related questions & answers
 80 | - [Code Wars](https://www.codewars.com/) : JS (& other languages) based games designed to help you improve.
 81 | - [JavaScript30](https://javascript30.com/) : 30 day vanilla JS challenge
 82 | - [HakerRank](https://www.hackerrank.com/) : practise for tech tests
 83 | - [CodeBar](https://codebar.io/) : tutorials, workshops, events
 84 | - [Github Student Developer Pack](https://education.github.com/pack) : github offers access to some excellent learning tools, especially a free subscription to Frontend Masters.
 85 | ---
 86 | ### HELPFUL TOOLS : 
 87 | - [Pseudoeditor](https://pseudoeditor.com/app/) : an online tool to aid you in writing pseudo code.
 88 | - [Goblin ToDo](https://goblin.tools/) : an online tool that breaks down your tasks into smaller pieces, making the job more manageable.
 89 | ---
 90 | 
 91 | ## PROJECT SPECIFIC :
 92 | 
 93 | ### PP3 - Python :
 94 | - [breakpoint()](https://www.python-engineer.com/posts/python-debugger-and-breakpoint/) : a method to debug your code
 95 | - [Termcolor](https://pypi.org/project/termcolor/) : add pops of color to your terminal output
 96 | - [PyFiglet](https://pypi.org/project/pyfiglet/0.7/) : helps render ASCII art
 97 | - [Tabulate](https://pypi.org/project/tabulate/) : Format data into neat tables
 98 | - [timedelta](https://docs.python.org/3/library/datetime.html#timedelta-objects) : Getting time between dates
 99 | 
100 | *-Do not use Pygame or any py guis-*
101 | 
102 | ### PP4 - Django :
103 | - [YouTube - Database Normalisation](https://www.youtube.com/watch?v=GFQaEYEc8_8) : Explains the "why" and "how" of normalization & what it is
104 | - [YouTube - Database Tutorial for Beginners](https://www.youtube.com/watch?v=wR0jg0eQsZA) : a bitesize explanation on databases & relations
105 | - [Securing Django Views from Unauthorized Access](https://www.codu.co/articles/securing-django-views-from-unauthorized-access-npyb3to_) : blog post explaining how to prevent users accessing data through URLs that have not been secured.
106 | - [Django walkthrough series](https://www.youtube.com/watch?v=sBjbty691eI&list=PLXuTq6OsqZjbCSfiLNb2f1FOs8viArjWy) : YouTube
107 | - [Common reasons for failing PP4](https://www.youtube.com/watch?v=Q5cdZXomzVg) : Youtube - an assessor shares common reasons students fail this project, & and has an FAQ.
108 | - [Django database extension](https://medium.com/@yathomasi1/1-using-django-extensions-to-visualize-the-database-diagram-in-django-application-c5fa7e710e16) : Allows you to generate a schema of your database to visually see the connections. A few extra commands may be needed:
109 | ```
110 | sudo apt update
111 | sudo apt-get install python3-dev graphviz libgraphviz-dev pkg-config
112 | ```
113 | Press `Y` to confirm
114 | ```
115 | pip3 install django-extensions pygraphviz
116 | ```
117 | Add to your `settings.py`
118 | ```
119 | INSTALLED_APPS = [
120 |     ...
121 |     'django_extensions',
122 |     ...
123 | ]
124 | ```
125 | And run the following commands in the terminal :
126 | ```
127 | python3 manage.py graph_models -a -o erd.png
128 | pip3 freeze --local > requirements.txt
129 | ```
130 | 
131 | - [login_required](https://www.fullstackpython.com/django-contrib-auth-decorators-login-required-examples.html) : Restricting view access to authenticated users
132 | - [Polls - Pretty Printed](https://prettyprinted.com/tutorials/creating-a-poll-app-in-django/) : a tutorial on how to implement a polling feature
133 | 
134 | ### PP5 - ECOMM :
135 | - [Facebook Mockups](https://code-institute-org.github.io/5P-Assessments-Handbook/files/Facebook_Mockups.zip) : a link to a zip file for pre-generated Balsamiq Facebook mockups that you may populate with your fictitious business data (if you do not wish to create an actual FB page)
136 | 
137 | ### PP5 - Advanced Front End (React) :
138 | - [ESLint installation & setup](https://dev.to/knowankit/setup-eslint-and-prettier-in-react-app-357b) - a package that can be installed in your React app to check your code. Requires configuration
139 | - [ESLint Playground](https://eslint.org/play/) : manually check your files through the online ESLint.
140 | - [Prettier](https://frontendmasters.com/courses/complete-react-v8/npm-prettier-setup/) - [ESLint(install)](https://frontendmasters.com/courses/complete-react-v8/eslint-git-setup/) - [ESLint(configuration)](https://frontendmasters.com/courses/complete-react-v8/configuring-eslint-react/) : Brian Holt demonstrates this in his FrontEnd Masters course.
141 | - [Postman](https://www.postman.com/) : Allows you to make API calls & view responses - [download desktop app](https://www.postman.com/downloads/)
142 | - [Collect static](https://code-institute-students.github.io/advfe-unified-workspace/deployment/02-compiling-the-static-files) : **combined repos ONLY** - If Heroku is deploying from an older commit & *will not* deploy from the latest one, follow the instructions listed.
143 | 
144 | #### Creating your PP5 in a single app :
145 | - How to combine your [Frontend & Backend](https://code-institute-students.github.io/advfe-unified-workspace/combining-workspaces/00-combining-workspaces) repositories : follow these instructions if you have already created two separate repos & wish to combine them
146 | - Initiate your [Frontend app](https://code-institute-students.github.io/advfe-unified-workspace/creating-an-app-in-a-workspace/00-creating-an-app-in-a-workspace) inside your Backend repo : If your DRF API is already created, follow these steps to create  your React app within the same repo
147 | - Steps for [deploying](https://code-institute-students.github.io/advfe-unified-workspace/deployment/00-deployment) the combined workspace (For all AdvFE students)
148 | *If you have combined your front/back-end into a single repo, please use the following [link](https://docs.google.com/forms/d/e/1FAIpQLSddZXGNJ8ZwZ2qy-MEd26scSLTFn75aXLG0pi1Jn9g_RYx6oQ/viewform) to submit your project*
149 | 
150 | #### ADVFE SUPPLEMENTAL LEARNING :
151 | - [Complete intro to React](https://frontendmasters.com/courses/complete-react-v8/) : a course by Brian Holt on FrontEnd Masters.
152 | - [Complete React Developer in 2023 (w/ Redux, Hooks, GraphQL)](https://www.udemy.com/course/complete-react-developer-zero-to-mastery/) : Udemy(**paid**) Course by Andrei Neagoie & Yihua Zhang in their Zero-to-Mastery series.
153 | - [Modern React](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d) : Youtube series by The Net Ninja
154 | - [React for Beginners](https://www.youtube.com/watch?v=Ke90Tje7VS0) : Youtube tutorial by Programming with Mosh
155 | - [React Crash Course](https://www.youtube.com/watch?v=jLS0TkAHvRg) : Youtube tutorial by Codevolution
156 | - [FireBase](https://firebase.google.com/) : a free DB tool should you wish to experiment in future, personal projects (**cannot** be used for PP5)
157 | 
158 |   ##### REACT PACKAGES :
159 | - [i18next](https://react.i18next.com/) : a package allowing you to integrate multiple languages into your project
160 | 


--------------------------------------------------------------------------------