/anger-managment

Primary LanguageCSS

In this exercise you need to create your own web page. Use all what you’ve learnt.

There are some requirement you should fulfil.

  • The page should contain at least 3 subpages.
  • Its html should be W3C valid.
  • It should contain properly used HTML5 (new) elements
  • It should contain a navigation menu
  • It should contain a contact page with a form to send email to the author (you don’t need to create server side logic, only the front end) with input validation

Step by step:

Create your index page

  1. Before you start coding sketch up how your web pages should look like. You can do it on paper or with any wire frame application. This is your choice. The purpose is to visualize that what different sections and parts will be in your page and how should they be arranged.
  2. Create a new html file in your repository root directory named: index.html
  3. Set the doctype to HTML5 form
  4. Add <head> part and setup basic meta data and the <title> of the page
  5. Add <body> part
  6. Add <header> to the body which will contain <nav>igation menu. The first item of this should be a link to this page.
  7. Add a <div> element to the body which has a class named: content. This will contain the part of the pages which differs from each other.
  8. Add an image of you and a small introduction next to it about yourself.
  9. Add some content to it (e.g. the description of the exercise) to see where will it be. You can fill it with arbitrary content. Take care to use the different html tags properly so it can express your intent.
  10. Add *<footer> *and add some content to it. Take example from other sites.
  11. After you finish commit your changes into your repository with a descriptive comment.

Make it nice

Please remember not to use external libraries like Bootstrap

  1. Create a new folder named **css** in your repository’s root directory
  2. Create a **style.css** file in that newly created folder. This will contain all your rules about your site's appearance.
  3. Add a reference to it in your index.html file's head part.
  4. Define basic rules for the body element. (Default background, font, alignment...) These rules are inherited in the child elements (every element which located inside the body).
  5. Write css rules to make all the site like your sketch.
#### Create a contact page
  1. Copy your index.html file and give it the name: contact.html
  2. Add a link to your navigation menu which redirects to this html page
  3. Delete the inner content of div.content element
  4. Create a form inside it
  5. Add two <input> field and a <textarea> field to the form and proper *<label>*s to them. The first input field is the name which has a placeholder text: Enter your name. The second input field is the email with placeholder text: *Give your email. *The textarea will contain the message so give some handful instruction in the placeholder text. Do not forget add named all your form element.
  6. Add a submit button wich should has the text SEND on it. It should be disabled by default.
  7. Open your style.css file and at the bottom of it and write some rules which makes it nice. (e.g. horizontally centered and the fields has the same width). You can see an example on the https://codecool.pl/kontakt/ web site. Maybe it is familiar to you. ;)
  8. Commit your changes into your repository.

Add business logic to your contact page

Now it’s time to use some JavaScript features, you can learn more about this here: http://htmldog.com/guides/javascript/

Please don’t use here external libraries like jQuery

  1. Create new folder in your repository root directory named: **js.**
  2. In this folder create a new file named **main.js**
  3. Add a script tag at the bottom of all html pages’ body which refers to this file.
  4. Create a function named validateContactData().In this function you need to collect the field of the contact form and do some validation on them. The name is valid if its length bigger than 3 character (maximum 30) and contains at least one whitespace. The email address need to be a valid email adress which ending to .plor .com and have **@** sign. The message is valid if it longer than 20 char (maximum 500). If every field are valid make the send button enabled anyway highlight the border of the invalid data field.
  5. Attach the validateContactData function as event handler to the form fields (name, email, message) onChange event.
  6. Create a function named sendMessage(). In this function collect all the necessary data (name, email, message) from the form and pop up an alert window which shows these data and a text that: Your message was sent!.
  7. Create a function named sendMessage(). In this function collect all the necessary data (name, email, message) from the form and pop up an alert window which shows these data and a text that: Your message was sent!.
  8. Commit your changes into your repository!
#### Create your custom pages
  1. Create your new html file(s) based on the index.html
  2. Add the proper link to the navigation menu on every other html files.
  3. Fill it with custom content
  4. Extend your stylesheet if needed
  5. If you make some business logic locate it into the main.js file.
  6. Do not forget to commit and push your changes into your repository!

Validate your pages

  1. Go to https://validator.w3.org/ (Links to an external site.)
  2. Validate your sites
  3. Fix the issues