Development #1
Development #1
Conversation
Add typeface to body, adjust font sizes and positions of text content. Add images to banners and boxes where it is helpful in order to make a visual comparison
Finish adjusting fonts for the remaining sections of the page. Use the header to link the original representation and it's heatmap together. Add backgrounds to different page sections giving weight to more prominent sections in term of visual hierarchy.
There was a problem hiding this comment.
Good Job! but I want you to address some things
The purpose of this project is to enforce design principles so you made a great job creating the grayscale heat map page and also the other page was great but is not needed for this project, you don't need to delete it it is just to put the focus in the grayscale page because there you are applying the key concepts for this project.
The things I want you to address are the followings:
- Apply the correction shown in the HTML validator here. This is for the
index.htmlfile but it is important that you have those corrections in mind. - Apply the corrections shown in the HTML validator for the
heatmap.htmlfile. - Please update your GitHub Page link because in the CSS validator it shows errors that you already solved. See here.
For point 1 and 2 pay more attention to the errors than the warnings.
When you are done with this changes, please, submit a new code review to check the changes.
styles/main.css
Outdated
| display: grid; | ||
| grid-auto-rows: 45em; | ||
| grid-template-columns: repeat(2, 1fr); | ||
| grid-template-rows: 5fr 4fr; |
There was a problem hiding this comment.
Same thing here and in all parts where this error appears.
Linter doesn't recognise "|" used to include multiple fonts in the same link tag. Also, make the heatmp the focus of the project by making it the index, rather than the original clone. Add alts to images where missing.
Replace min-max with legal function minmax
|
I have made all corrections as suggested. Awaiting your re-review. I have made the heatmap show up as index, so that is the focus and the original links from the heatmap page. Also the warnings ask me to include section headings that are not a part of the original markup so I ended up ignoring those. |
Awaiting your comments. We haven't done much for the header and footer sections as per the project requirements.
We have created 2 pages, one representing the original and the other it's grey-scale heatmap as per our perception.
Both are linked together via hyper links in the header.