.example-code {

background: #333;

color: white;

padding: 10px;

border-radius: 10px;

margin-top: 20px;

}

Our page template has now been created. From here on in it’s just a case of adding in the various sections and creating the subsequent pages from the same template. Congratulations on getting through this section. I know the JavaScript section we just looked at must have been particularly difficult, even if there wasn’t the expectation to work out the solution yourself The section introduced a lot of new methods and properties and introduced some concepts and logic that we haven’t seen before. I know this might seem a bit overwhelming at first, but once it’s broken down and you work through it line by line, it becomes much easier to understand. Even if you are still struggling with what exactly is happening, don’t worry – that example is a bit more advanced than a typical beginner exercise; however, it’s important that we have the more advanced code in our website to provide you with a goal to work towards with your understanding of JavaScript. Not to mention it also allows us the great functionality of being able to quickly and easily peek into the source code behind the examples that we are going to write into our website.

The JavaScript example also perfectly highlights how JavaScript can take your website to the next level of user experience. We now have a highly useful functionality piece on our website that we coded once, and can be used everywhere very easily. Now, instead of copying and pasting the code of our examples into another div directly into the HTML, and having to do that for each and every example we write, we can simply just change the string we pass into our click event handler, and the JavaScript will handle the rest for us. Just imagine how much time this has just saved us!

11.2

Right, now that we have our template file completed, let’s fill it with our content! The plan here is for this website to become your personal log of all the HTML, CSS and JavaScript that you have encountered and understand. Once we have finished our journey together, you then have a complete reference to everything web design related that you have encountered, which you can continue to update as you journey deeper and deeper into the rabbit hole of web design. Let’s start some of these examples together before you go off on your own and finish off the page by yourself.

Forms

We’re going to create a very simple web form that allows the user to input some information, and then provides a prompt that the form was submitted if the user clicks the submit button.

The steps:

• Copy the entire block of code we created for the tables section and paste it directly underneath the existing tables section.
• Replace the blocks id with ‘forms’.
• Replace the onClick method’s parameter value from ‘tables’ to ‘forms’.
• Replace the header and paragraph text with text relating to forms as per your understanding.
• Now clear out all of the content inside the ‘.example’ div.
• Inside the ‘.example’ div add the following:
  1. –  A form containing the following:
• text input type with a placeholder value of ‘name’
• another text input type with a placeholder value of ‘email’
• a submit input with the value ‘Submit’
• Now make the form show an alert box saying ‘Form was submitted’ when the submit button is clicked.

Expected result: so here, as with the previous sections, there are a couple of points in the list that we haven’t seen before. Just like with the previous examples, in this case, you should try your best to work out yourself how to overcome these obstacles using Google. If you are still struggling, then read on to see the solution.

Expected code: