Phase 5 - Component identification

• Header
  • Simple Header Style
• Navigation (part of the Header)
  • Simple dark with menu button on left for my navbar style.
• Main (Dashboard)
  • Card: Card (Vertical) Style from Screencraft
  • Alignment:
    • Horizontal: Left to right
    • Vertical: Center
  • Note: The cards will contain some button or any indicator to enlarge and popup a Phase without routing to that page.
• Footer
  • Simple Footer Style from Screencraft

Others:

• Font/Text

  • Font Family: Mono (https://tailwindcss.com/docs/font-family)
  • Font Size: It would use text-sm by default for all screen sizes
  • Colors: To-Be-Decided

• Form:

  • Style: Split with pattern

• Mobile Layout:

  • The Navigation will use a Hamburger Menu on Top-Right.

civ-web-technologies-portfolio-phases

To use this folder structure

Fork the repository to your personall GitHub account

• change the name of your fork repository to civ-web-technologies-portfolio-phases-
• navigate to your local project directory e.g. cd /path/to/your/project

Add the files in your new local repository. This stages them for the first commit.

git add .

Commit the files that you've staged in your local repository.

git commit -m 'First commit'

Copy the https url of your GitHub repository

In the Command prompt, add the URL for the remote repository where your local repository will be pushed.

git remote add origin

Verifies the new remote URL

git remote -v

Push the changes in your local repository to GitHub.

git push -u origin main

Now you are ready to work on each individual phase

• finalise and push phase 1 when you are due to complete the assessment
• at this point download your zip file and submit the complete code and the assessment document to blackboard
• copy the files from phase 1 into phase 2
• then commit and push the start of phase 2

The assets folder should contain the images, css, JS, fonts and media for each of your phase

The screenshots required in each phase should be saved in the evidence folder for that phase

Example: you can have the following phase specific css files in your CSS folder

    - phase-1.css
    - phase-2.css
    - phase-3.css
    - phase-4.css
    - phase-5.css