The purpose of the project was to use only CSS-HMTL to create a project. On the WebApp, I tried to implement the information we review in the course and also the knowledge I gained in previous courses, specially one i did parallel to try to understand CSS-Grid in depth ( Domestika ). As I am interested in being able to challenge myself with Grid (as flex already knew how to use it) I mainly used it for the layout of the project.

• Try to implement the use of REM instead of pixels. Used a Rem calculator:

PX to REM Converter

• Below pages that i review to be able to understand Grid:

CSS-Grid in depth: Web Layout with CSS Grid, Flexbox and other Modern Techniques

GRID Containers

Grid by Example

freeCodeCamp: Build a Magazine / excersice on my codepen

>

>

Below the link to acces the planning i followed in Trello ( is need it to have an account but its free):

Trello Planning

To see the color palette to use first took a look on the colors was interest in use (blue, pink, white) and see the possible color that match with them using material design palette.

Material design palette

See bellow the 2 palettes took in consideration :

The colors decide to implement:

:root {
  --background: #faebd7;
  --background-color: #007fff;
  --background-color-rosa: #ffb6c1;
  --primary-text: #000000;
  --secondary-text: #575656ff;
  --text-white: #ffffff;
  --primary-color: #004e92;
  --secondary-color: #eea849;
  --contrast-color: #f3930a;
}

Review color selection with color review to see if was working according accessibility: