CYF-ITP-South Africa Emmanuel| Module-User-Focused-Data Feature/wireframe- RESUBMISSION

[EmmanuelSiziba]

Learners, PR Template

Self checklist

• I have committed my files one by one, on purpose, and for a reason
• I have titled my PR with COHORT_NAME | FIRST_NAME LAST_NAME | REPO_NAME | WEEK
• I have tested my changes
• My changes follow the style guide
• My changes meet the requirements of this task

Changelist

Briefly explain your PR.

Questions

Ask any questions you have for your reviewer.

[netlify]

✅ Deploy Preview for cyf-ufd ready!

Name	Link
🔨 Latest commit	7139730
🔍 Latest deploy log	https://app.netlify.com/sites/cyf-ufd/deploys/6737264112dfc800089c5648
😎 Deploy Preview	https://deploy-preview-311--cyf-ufd.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[cjyuan]

Why did you create so many PRs?

I don't see much changes made to the webpage based on the comments I left for you in another PR. So I am just going to copy and paste those comments here:

• This is the URL to your deployed webpage: https://deploy-preview-311--cyf-ufd.netlify.app/wireframe/
  The page does not look like the wireframe.

  • The area with a cross in the wireframe represents an image. Can you add images to your page to make the page look more
    like the wireframe?
    In general, when given a wireframe, we should pay attention to
  • Text alignments and justification
  • Relative size and position of the elements

• The footer is not fixed at the bottom of the viewport (browser window). Supposedly it should not move when the page is scrolled.

• Using
  to create gap makes setting an exact amount of vertical space difficult. For example, what if you want to keep 1.8rem between the summary and the link? There are better ways to create space around elements.

• May I suggest using a HTML validator such as https://validator.w3.org/ to help yourself identify potential error in HTML?

[cjyuan]

This is an example of a webpage that looks like the wireframe.

[EmmanuelSiziba]

i have made the changes you requestedi treied to model it after the picture, hope this is okay

[EmmanuelSiziba]

[EmmanuelSiziba]

i have made the changes requested

[cjyuan]

Great job! Page looks much nicer now.

This is the deployed page: https://deploy-preview-311--cyf-ufd.netlify.app/wireframe/

• It does not quite look like the image you shared.

• The footer is not yet fixed at the bottom of the viewport. May I suggest looking up how to make an element fixed at the bottom of the viewport using CSS?

These are minor changes which I think you can fix relatively quickly. So after you have fixed them, you can closed the PR if you are satisfied with your changes. :)

[KudahShambare]

Please use child selectors for your h tags in CSs in place of descendant selectors

https://stackoverflow.com/questions/1182189/css-child-vs-descendant-selectors

Also please do make use of a CSS and HTML Validator

[EmmanuelSiziba]

Hi kuda to I used the child selectors, can you please check and see if I used them the right way.