Web Development
Using a combination of Hypertext Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript (JS), students can create interactive and responsive websites for projects and for whatever they choose to do. In the rapidly growing internet, it is easy to create projects to learn about how these sites are made and how they work.
HTML
It is the main front-end programming language to create the structure of a website, many HTML files start off in a similar way (seen in image gallery) and the part that changes is within <body>...</body>.
<body>
<div>
- Creates the beginning of a container under the class 'div.'
<button id='btn1'>On</button>
- Creates a button with the name 'btn1' labeled 'On.'
<button id='btn2'>Off</button>
- Creates a button with the name 'btn2' labeled 'Off.'
</div>
- Ends the container under the class: 'div.'
<img src="light-off.jpg">
- Adds the image with the source name 'light-off.jpg' from the same folder the HTML file is in.
<script src="script.js"></script>
- Links the JavaScript file called 'script.js.'
</body>
CSS
The stylesheet is used for adding a specific appearance to the HTML loaded in the browser. It uses the classes, labels, or types to change their style:
div {
text-align: center;
}
- This block is going to move the container class 'div' to be alligned to the center of the website.
button {
height: 50px;
width: 50px;
}
- This block will change the appearance of the buttons to a specific height and width of 50 pixels to make them squares.
img {
display: block;
width: 250px;
margin: auto;
}
- This block will change the appearance of the image to be a display block, by changing the width to 250 pixels and making the space between it and other objects around it to be automatic.
Don't hesitant to make your own style for how you want it to look! Try to figure out what each line can do by changing a little bit at a time.
JS
The script or set of commands for the HTML is altering how and when the website should change. If we were to click a button then something should happen, this can be accomplished using JavaScript.
let img = document.querySelector('img');
let btn1 = document.querySelector('#btn1');
let btn2 = document.querySelector('#btn2');
- Creates variables img, btn1, and btn2 to be called in the JavaScript code using the CSS selectors or Ids: img, #btn1 ('On'), #btn2 ('Off').
btn1.addEventListener('click', () => {
img.src = 'light-on.jpg';
})
- The variable btn1 (that is linked to the 'On' button) now has a function that will be activated once the button is clicked, it will then update the image in the HTML to the 'light-on.jpg' found in the same folder as the HTML file.
btn2.addEventListener('click', () => {
img.src = 'light-off.jpg';
})
- The variable btn2 (that is linked to the 'Off' button) now has a function that will be activated once the button is clicked, it will then update the image in the HTML to the 'light-off.jpg' found in the same folder as the HTML file.
Linking Them Together
Since the HTML, CSS, and JavaScript files are all separated, it is necessary to link them together by adding a couple lines of code to the HTML file.
Before <title> and within <head>...</head> of the HTML file:
<link rel="stylesheet" href="style.css">
This uses the CSS file called style.css as the reference for stylesheet or appearance for the website.
Before </body> of the HTML file:
<script src="script.js"></script>
This uses the JS file called script.js as the script or list of commands for the website.
Conclusion
In many curricula, JavaScript is often overlooked as an important part of web development and many students go without learning JavaScript to understand it. Let's teach our students to learn every essential part of the web development process so that they can have more freedom to create!
