Mama Mia’s Pizzeria Stage 5 – Coding Part 2

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:

Web 1920 – 5

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:

contactscreenshot

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:

divsize

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:

divsize_boxsizing

For more information you can read the W3 Schools article on the box-sizing property [HERE].

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s