Student Quick Reference Tool

Need help with navigating your learning journey? Feel free to browse around.

Module: User Centric Frontend

Milestone 1 Project Workflow

Start Milestone Project
Your Idea

What are you knowledgeable and passionate about? Keep it Simple Stupid (KISS). Describe the idea, using a couple of sentences or bullet points.

Development Planes
Milestone Project Part 1
Sketch It

What is the goal or problem? List three features to achieve a goal or solve a problem. Sketch it out using both pencil and paper. Use mobile-first approach.

Project Brief README
Milestone Project Part 2
User Stories

Create user stories using"As an X user, I want Y, to achieve Z". How will the information be organized? What will provide a positive user experience?

UX/UI Design Choices
Milestone Project Part 3
Minimal Viable Product

What are non-negotiable features to ensure a minimal viable product (MVP)? Implement each feature one by one. Test before deployment.

Validate Website

Concepts

Bootstrap4 Grid
Container Row Column

It takes a while to get the concept and then you recognize the pattern everywhere.

Bootstrap4 Grid Video
Absolute Relative Paths
Havoc Easy to Fix

Typos and incorrect paths will manifest "nothing happened" especially when you are tired. Easy fix.

Absolute Paths Video
Dev Tools and CSS
Sherlock's Dr Watson

Indispensable for solving the mysteries of CSS. Try, test and reset or copy and implement in yourcode.

Dev Tools and CSS Video

Tools

Wireframe
Idea to Concrete Product

Be creative translate ideas to solutions. Think people, process and product. Get user feedback. Keep iterating quickly.

Wireframe Video
Chrome Developer Tool
An Indispensible Tool

Use it to answer the question "How does it work?" Prototype on the fly and see the outcome immediately. Share real-time demos.

Developer Tools Video
Git Github
Save Commit Push

Backup frequently and revert back to a specific point in time, if necessary. Local and remote backup copies for extra security.

Git Github Video

Daily Tips

Gitpod Quick Start Annotated Screens

Gitpod Basics

Step 1 Create Gitpod workspace with local git repository using CI Template

Click CI gitpod full template to navigate to CI github page. On the page click the template name and create your remote github repository and then click Gitpod button to generate and access a workspace in GitPod.Important: Do not use this gitpod button to access existing Gitpod workspaces

Step 2 Activate http server

Port 8000 http server is used to preview wbepage. Important: to save files and click to browser refresh to view changes

Step 3 Access Port 8000 http server

Select the Open Port tab and click on Port 8000 Open browser button

Step 4 Open New Terminal

Go to the Gitpod Top Menu click on Terminal to render a drop down list and select New Terminal

Step 5 Access Existing Gitpod Workspaces

Navigate to Gitpod Workspace

Step 6 Request GitHub Unlimited Access

Email studentcare@codeinstitute.net with your GitHub Username to be added onto the Unlimited Team