Unit 08: Web Development
A Deep Dive into HTML, CSS, and JavaScript
Practice Your Skills!
The best way to learn is by doing. You can run and edit all the code examples from this page on our live HTML playground.
Go to Live Playground1. Discuss the fundamental differences between HTML, CSS, and JavaScript in the context of web development.
HTML
HTML is the standard language used to create web pages. To create a basic HTML application, follow these simple steps:
- Open a text editor (like Notepad, Notepad++, Sublime Text).
- Write your HTML code.
- Save the file with a .html extension (e.g., `MyWebSite.html`).
CSS
CSS allows web developers to control the colours, fonts, layout, and overall design of HTML elements. Its syntax is `selector { property: value; }`.
Styling Ways:
- Inline Styles
- Internal Styles
- External Styles
JavaScript
JavaScript is a programming language used to make websites interactive and engaging. It allows developers to create things like animations, games, and responsive features that react to user actions (clicks, mouse movements).
2. Explain the process of setting up a development environment for the web development. By discussing the necessary software and tools.
To start creating websites, you need a few basic tools and environments:
- Text Editor: This is where you write your HTML code. Popular text editors include Notepad++, Sublime Text, and Visual Studio Code.
- Web Browser: You will use this to view and test your HTML files. Common web browsers are Google Chrome, Mozilla Firefox, and Microsoft Edge.
Start with a simple text editor and a web browser. Once you are comfortable with HTML, you can explore more advanced tools.
3. Create a basic HTML page that includes a header, a paragraph, an image, and a hyperlink.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Basic HTML page</title>
</head>
<body>
<!-- Header -->
<h1>Welcome to My Web Page</h1>
<!-- Paragraph -->
<p>This is a simple HTML page created to demonstrate basic elements like headers, paragraphs, images, and links.</p>
<!-- Image -->
<img src="https://www.w3schools.com/html/img_girl.jpg" alt="A sample image" width="300">
<!-- Hyperlink -->
<p>Visit <a href="https://www.example.com" target="_blank">Example.com</a> for more information.</p>
</body>
</html>4. How do you style a table using CSS? Create a sample table and apply styles to it.
To style a table, you combine HTML for the structure and CSS for the appearance. Below is the complete code to create and style a table.
Full Code
<!DOCTYPE html>
<html>
<head>
<title>Styled Table</title>
<style>
/* General body styling for context */
body {
font-family: Arial, sans-serif;
display: grid;
place-items: center;
min-height: 100vh;
margin: 0;
}
/* Table styles from the document */
table {
width: 70%;
border-collapse: collapse;
margin: 20px auto;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
th, td {
border: 1px solid #ccc;
padding: 10px 15px;
text-align: center;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<div>
<h2 style="text-align:center;">Student Grades Table</h2>
<table>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Grade</th>
</tr>
<tr>
<td>Ali</td>
<td>Math</td>
<td>A</td>
</tr>
<tr>
<td>Ahmad</td>
<td>Science</td>
<td>B+</td>
</tr>
<tr>
<td>Ayesha</td>
<td>English</td>
<td>A-</td>
</tr>
</table>
</div>
</body>
</html>
Result
Student Grades Table
| Name | Subject | Grade |
|---|---|---|
| Ali | Math | A |
| Ahmad | Science | B+ |
| Ayesha | English | A- |
How This Code Works:
- The
<style>block inside the<head>contains all the CSS rules. border-collapse: collapse;makes the table borders look cleaner.tr:nth-child(even)selects every even table row for alternate background coloring (a “zebra-stripe” effect).tr:hoveradds a background color change when you move your mouse over a row.box-shadowgives the table a subtle floating effect.
5. Styling HTML Elements with Fonts, Colors, Backgrounds.
You can change the appearance of a web page using CSS. This includes changing the font family, size, weight, and style.
Example of Styling Fonts
p {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
font-style: italic;
}font-family: Sets the font to Arial. If not available, it uses a generic sans-serif font.
font-size: Sets the font size to 16 pixels.
font-weight: Makes the text bold.
font-style: Makes the text italic.
6. Explain the process of creating a responsive web page using CSS.
CSS Flexbox
Flexbox is a layout tool that helps in arranging items in a flexible and responsive way. It is useful for aligning items in a row or column.
.container {
display: flex;
justify-content:space-between;
}
.item {
padding: 20px;
background-color:lightgrey;
}Positioning
CSS positioning properties like position, top, left, right and bottom allow you to place elements exactly where you want them on a webpage.
.box {
position:absolute;
top:50px;
left:100px;
width:200px;
height:100px;
background-color:lightblue;
}7. Write a JavaScript function that changes the background color of a web page when a button is clicked.
<!DOCTYPE html>
<html>
<head>
<title>Change Background Color</title>
</head>
<body>
<h2>Click the Button to Change Background Color</h2>
<button onclick="changeColor()">Change Color</button>
<script>
function changeColor() {
document.body.style.backgroundColor = "lightblue";
}
</script>
</body>
</html>How It Works:
<button>creates a clickable button.onclick="changeColor()"tells the browser to run thechangeColorfunction when the button is clicked.- The JavaScript function
changeColor()changes the background color of the page to light blue.
8. How do you add animations and transitions using CSS?
CSS animations and transitions can make your web pages more engaging by adding movement and effects.
Adding Animations
Animations change how elements look or move over a set duration using @keyframes rules.
Full Code
<!DOCTYPE html>
<html>
<head>
<style>
.animated-box {
width: 100px;
height: 100px;
background-color: red;
/* Apply the animation */
animation-name: example-animation;
animation-duration: 4s;
animation-iteration-count: infinite; /* Loop forever */
animation-timing-function: linear; /* Constant speed */
}
/* Define the animation steps */
@keyframes example-animation {
from {background-color: red;}
to {background-color: yellow;}
}
</style>
</head>
<body>
<h1>Animated Box</h1>
<div class="animated-box"></div>
</body>
</html>Result
Adding Transitions
Transitions make style changes smooth and gradual, often triggered by pseudo-classes like :hover.
Full Code
<!DOCTYPE html>
<html>
<head>
<style>
.transition-box {
width: 100px;
height: 100px;
background-color: red;
/* Define the properties to transition */
transition: background-color 2s, width 2s;
}
/* Define the style change on hover */
.transition-box:hover {
background-color: yellow;
width: 200px;
}
</style>
</head>
<body>
<h1>Hover over the box</h1>
<div class="transition-box"></div>
</body>
</html>