Moving right along with this project, I have completed the basic coding for the contact page. Of course the main component for this page is the contact form. I have laid out all of the form elements, now the next step will be to set up the input validation.
I created a quick layout in Adobe XD:
I stuck pretty closely with this layout when coding, though I did change the submit button. I may still add some more elements to the page as it seems a little bit plain at the moment, but we’ll see.
Here is a screenshot of the current look of the page:
Of course you can still see the live version of the site [HERE]
and the Git Repo [HERE]
I have made many forms before, both for personal projects and school, but one thing I did come across while making this page was a CSS property I have never seen before, which is the box-sizing property. The box-sizing property allows you to set elements to calculate their size including padding and borders. So if you set an element to be 250 px wide, and have 5px of padding and a 1 px border, the overall width of the element will still be 250, rather than 262px.
Here is an illustrated example:
Without box-sizing:
With the box-sizing property set to border-box the total width for the element will be the size you set it to, so if you set a width of 250 px the total width will be 250 px.
With Box-sizing:
For more information you can read the W3 Schools article on the box-sizing property [HERE].
