The First Hour in Web Programming
The First Hour in Web Programming
New to program in HTML, CSS and JavaScript? The following shows the steps that you will take as well as the relevant web links.
Programming Languages
Programming languages used in most popular websites
Online Programming Environment
HTML, CSS and JavaScript
Online IDE
The result Tab
- Under the result tab, copy the page URL
- Open the page in a web browser
The index.html Tab
- Replace the text between `<title>` and `</title>`
- Click `Run` button on the top of window
- Reload the result page
- Insert new content:
1 <div>
2 <h1>This is My Home Page!</h1>
3 </div>
4
5 <h2 id="plan">What's the Plan for Today?</h2>
6 <button onclick="changeColor('blue','PLAY');">blue</button>
7 <button onclick="changeColor('red','STUDY');">red</button>
8
9 <div>
10 <img width="600px" src="http://www.jdatalab.com/assets/img/rules.jpg">
11 </div>
12
13 <div>
14 <table align='center'>
15 <th>Monday</th>
16 <th>Tuesday</th>
17 <th>Wednesday</th>
18 <th>Thursday</th>
19 <th>Friday</th>
20 <th>Saturday</th>
21 <tr>
22 <td>HTML</td>
23 <td>CSS</td>
24 <td>*</td>
25 <td>Python</td>
26 <td>HTML</td>
27 <td>JavaScript</td>
28 </tr>
29 <tr>
30 <td>CSS</td>
31 <td>JavaScript</td>
32 <td>HTML</td>
33 <td>Go</td>
34 <td>JavaScript</td>
35 <td>HTML</td>
36 </tr>
37 <tr>
38 <td>HTML</td>
39 <td>Swift</td>
40 <td>Go</td>
41 <td>HTML</td>
42 <td>Swift</td>
43 <td>Java</td>
44 </tr>
45 <tr>
46 <td>HTML</td>
47 <td>HTML</td>
48 <td>Python</td>
49 <td>*</td>
50 <td>HTML</td>
51 <td>HTML</td>
52 </tr>
53 </table>
54 </div>Edit style.css
1 body{
2 background-color: powderblue;
3 color: black;
4 text-align: center;
5 }
6
7 th {
8 background-color: white;
9 text-align: center;
10 border: 1px cornflowerblue solid;
11 }
12
13 button {
14 width:100px;
15 height: 50px;
16 font-size: 2em;
17 }Edit script.js
function changeColor(newColor,newText) {
var element = document.getElementById('plan');
element.style.color = newColor;
element.innerText = newText;
}
Share this post
Twitter
Facebook
LinkedIn
Email