Manchester | 26 ITP May | Szidi Bodo | Sprint 1 | Form Control

[bodoszidi]

Self checklist

• [x ] I have titled my PR with Region | Cohort | FirstName LastName | Sprint | Assignment Title
• My changes meet the requirements of the task
• [x ] I have tested my changes
• My changes follow the style guide

Changelist

Created the form with validation and basic style - only using HTML and CSS
Lighthouse accessibility check is 100%

Questions

Had difficulties with centring the content - I'm not quite sure why flex on my CSS was not working

[netlify]

✅ Deploy Preview for cyf-onboarding-module ready!

Name	Link
🔨 Latest commit	7cf1c6d
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/6a04d2f4d1a95f000860356e
😎 Deploy Preview	https://deploy-preview-1259--cyf-onboarding-module.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	2 paths audited Performance: 100 (no change from production) Accessibility: 100 (no change from production) Best Practices: 100 (no change from production) SEO: 84 (🔴 down 2 from production) PWA: - View the detailed breakdown and full score reports
🤖 Make changes	Run an agent on this branch

---

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

[Sambuxc]

Great start a few points to mention:

1. (minor) Your git commit messages all say "Updated index.html"
   This is not good practice because it doesn't give any idea of what was updated. Please bare that in mind for future commit messages.

2. (critical) You are missing the form submit button
   I am unable to check the required status of your form inputs because there is no submit button. Please add a submit button and check that the required fields work as expected

[Sambuxc]

Question Response

Q. Had difficulties with centring the content - I'm not quite sure why flex on my CSS was not working

What's important to understand with flexbox is depending on the flex-direction value (row/column), will change how justify-content and align-items work.

It's useful to play around with flex row and adjust the values of the other flex properties vs. flex column - compare how they work.

A useful tool I have used in my early days of learning flexbox - https://flexbox.malven.co/

Pay attention to the keywords "main axis" and "cross axis".

Have a read up and try to achieve what you were intending on this PR to make your form content central.

Just to show you it can be done, I have achieved centering the form content using only 3 css properties: