## Introduction
Today, you will learn about the basics of web development. We'll build a personal portfolio webpage using three languages: HTML, CSS, and JavaScript.
HTML provides the structure, CSS adds style, and JavaScript enables interaction on your webpage. We will take a journey from creating a simple webpage with HTML to adding styles and cool effects with CSS and JavaScript.
## Setup
Create a folder in documents with your name
## Part 1: HTML Basics
### Goal: Create an "About Me" section
1. HTML, or HyperText Markup Language, provides the structure of a webpage. It uses tags to define the webpage content.
2. Open a new file in your text editor and save it as "index.html". When saving the file, change the dropdown from .txt to all files. This will be our HTML file.
3. Add the following basic HTML tags to your file:
```html
<!DOCTYPE html>
<html>
<head>
<title>My Portfolio</title>
</head>
<body>
<h1>About Me</h1>
<p>This is a little bit about me...</p>
</body>
</html>
```
4. The `<h1>` tag creates a heading, and the `<p>` tag creates a paragraph. Feel free to add your own content within these tags!
5. Save your changes and open the file in a web browser to see your work.
## Part 2: CSS Styling
### Goal: Add style to your webpage
1. CSS, or Cascading Style Sheets, styles the webpage. It can change the color, size, and style of your HTML elements.
2. Create a new file in your text editor, and save it as "style.css". When saving the file, change the dropdown from .txt to all files.
3. Link the CSS file to your HTML file by adding a `<link>` tag inside the `<head>` section of your HTML:
```html
<head>
<title>My Portfolio</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
```
4. In your CSS file, add some styles. For example:
```css
body {
background-color: lightblue;
}
h1 {
color: navy;
font-family: Arial;
}
```
5. Save your changes and refresh your webpage to see the style updates.
## Break
Take a 10-minute break!
## Part 3: Adding Multimedia
### Goal: Embed a video into your webpage
1. Add an `<iframe>` tag in your HTML where you want the video to appear.
```html
<body>
...
<iframe width="560" height="315" src="VIDEO_URL" frameborder="0" allowfullscreen></iframe>
...
</body>
```
2. Replace "VIDEO_URL" with the URL of the video you want to embed.
## Part 4: Creating a 'Favorites' Section
### Goal: Create a new section for your favorite things
1. Add a new section to your HTML file for your favorites:
```html
<body>
...
<h2>My Favorites</h2>
...
</body>
```
2. Style your 'Favorites' section in the CSS file as you wish.
## Optional Part 5: Guestbook Feature
### Goal: Add functionality to your website with JavaScript
1. JavaScript enables interactivity on webpages. For our guestbook feature, we'll use HTML to create a form and JavaScript to capture and store form data.
2. Add the following code in your HTML where you want the guestbook form:
```html
<body>
...
<form id="guestbook-form">
<input type="text" id="name" placeholder="Your name">
<input type="text" id="comment" placeholder="Your comment">
<input type="submit" value="Submit">
</form>
...
</body>
```
3. Create a new JavaScript file, "script.js", and link it in your HTML file:
```html
<head>
...
<script src="script.js"></script>
</head>
```
4. In "script.js", add code to capture the form data, store it and display it:
```javascript
document
.getElementById("guestbook-form")
.addEventListener("submit", function (event) {
event.preventDefault();
let name = document.getElementById("name").value;
let comment = document.getElementById("comment").value;
// Create a guestbook entry object
let entry = {
name: name,
comment: comment,
};
// Get existing entries from localStorage
let entries = JSON.parse(localStorage.getItem("entries")) || [];
// Add the new entry to the array
entries.push(entry);
// Save the updated entries array to localStorage
localStorage.setItem("entries", JSON.stringify(entries));
// Clear the form
document.getElementById("name").value = "";
document.getElementById("comment").value = "";
// Display the updated entries
displayEntries();
});
function displayEntries() {
let entries = JSON.parse(localStorage.getItem("entries")) || [];
// Get the guestbook entries section
let entriesSection = document.getElementById("guestbook-entries");
// Clear the entries section
entriesSection.innerHTML = "";
// Add each entry to the entries section
entries.forEach(function (entry) {
entriesSection.innerHTML += "<p>Name: " + entry.name + "</p>";
entriesSection.innerHTML += "<p>Comment: " + entry.comment + "</p>";
entriesSection.innerHTML += "<hr>";
});
}
// Display the entries when the page loads
window.onload = displayEntries;
```
5. Refresh your webpage and test the guestbook form. The data you entered will be displayed each time you load the webpage!
> **Remember:** The localStorage only stores data in your browser, so the data will be lost when you clear the browser data or close the browser.
> **Internet Safety Note:** If your website becomes public, be sure to moderate any kind of public comment or guestbook feature to ensure the safety of all users.
Happy Coding!
Sign in with Wallet
Connect another wallet