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:
- 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
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):
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.
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: