שלום אורח התחבר

טכנולוגיות צד לקוח: HTML, JavaScript and CSS

אורך הפרק כ-12 דקות

 

התקנת סביבת הפיתוח Brackets:
http://brackets.io

תיעוד HTML - רשימת כל התגיות ומשמעותן:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element

תיעוד CSS - רשימת כל המאפיינים ומשמעותם:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

אתר CodePen בו תוכלו לכתוב ולשתף קטעי קוד HTML, CSS, JS אונליין ולראות את התוצאה באופן מיידי:
http://codepen.io/

הקוד שכתבנו בוידאו:

intro.html

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
        <link rel='stylesheet' href='style.css' />
    </head>
    <body>
        <h1>Welcome To The Future</h1>
        <h2>HTML, CSS and JavaScript</h2>
        <p>HTML describes the document content and it's using tags (much like XML)</p>
        <button>Click Me</button>
        
        <script src='main.js'></script>
    </body>
</html>

 

style.css

h1 {
    color: red;
    text-align: center;
}

body {
    background: orange;
}

p {
    color: white;
}

 

main.js

var x = 10;
var y = 20;

var z = x + y;

function changeBackgroundColor() {
    document.body.style.backgroundColor = 'white';
}

document.querySelector('button').addEventListener('click', changeBackgroundColor);