April 26, 2015

Session 1 + 2: HTML / CSS, Javascript

HTML


Lets start with the basics.

  1. open this link https://jsfiddle.net/
  2. type <h1>Hello TechConnect</h1> into the box that says html
  3. click "run"
      <h1>Hello TechConnect</h1>
          <p>This is where you would talk, in length, about how awesome this workshop is.</p>

          <form name="myform" onsubmit="return myFunction()" method="POST" action="test.php">
    First name:<br />
    <input type="text" name="firstname" />
            <br />
            Last name:<br />
    <input type="text" name="lastname" />
            <br />
    <input type="radio" name="sex" value="male" checked />Male
            <br />
    <input type="radio" name="sex" value="female" />Female
            <br />
        <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
            <br />
    <input type="checkbox" name="vehicle" value="Car" checked="checked" /> I have a car<br />
            <br />
        <input type="Submit" name="formSubmit" value="Submit" />
</form>

https://jsfiddle.net/wkqt8whd/

CSS


Step 1: Header

h1 {  
    color:blue;
    font-family:Arial;
    text-align: center;
    border: 2px solid black;
}

What does that do?
Makes the header blue by changing the color.
Changed the font to Arial.
Aligned the text to center.
Created a aolid black border that is 2 pixels wide.

Step 2: Paragraph

p {  
    text-align:center;
    font-family:Georgia;

}

Step 3: Form

form {  
    background-color:#3DB8DE;
    border: 1px dashed black;
}

What does that do?
Changes the form's background color to #3DB8BE. This hex triplet lets us chose a more unique color than just "blue"
Created a 1 pixel black dashed border around the form

All of this is just an example, play with any if it on your own and see what happens!

https://jsfiddle.net/wkqt8whd/1/

Javascript


<script>  
    function myFunction() {
    alert("The form was submitted");
    return false;
}
</script>  

https://jsfiddle.net/wkqt8whd/1/