Situma / frontend_craft_project

My Approach

• I prioritized the desktop version first (This was to follow the design given without worrying about possible mobile design)

• Design plan;

  • Add background color
  • Add colors
  • Align layout
  • Align items in each component and beautify based on design
  • Align form items
  • Update navbar
  • Update Navbar dropdown
  • Update background with gradient
  • Make design responsive adding necessary media queries

• I started with the main color and since it is used in different components I placed it on a variables file along with anything else being to be inherited by majority of the components

• Since the imported material components were being used in majority of the components, it made sense to override their styles accordingly on the global style document.

Frontend Craft Project

This project was designed to test your abilities to take a typical work product from a developer and execute the user interface as designed by a UX/UI specialist.

Your goal is to use the existing Angular application code and modify the components HTML and Styling (LESS, SCSS, SASS, CSS) to meet or exceed the design mockup provided.

If you are not as familiar with Angular you may choose to do the project with a different framework, however you will have to do all the leg work setting up that framework. Keep in mind Angular is the main framework we work with.

Expectations

We are wanting you to spend no more than 4 hours, and do not expect 100% completion.

When submitting please include a brief overview of your approach and priorities (bullet point is great).

Design Mockup

Clone the Project, Don't Fork

In order to work on this craft project please clone this project into your own repository. We will not accept any pull requests or fork merge requests.

Craft Project Completion

When you are complete and ready to show the work you have done, send us a link to your github repository. If this doesn't work for you, please contact us for other ways to send us your code.

Angular Application Info

This project was generated with Angular CLI version 12.0.3.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

We do not require you to write all the unit tests for this project, however we do value an understanding of how unit testing works.

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

We do not require you to write E2E tests for this project, however we do value an understanding of how E2E testing works.

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.