Welcome to Your First Web Development Adventure!
Hello, young developers! In this lesson, we'll embark on an exciting journey to create your first complete web page project using HTML5+. By the end of this lesson, you will have built a simple but functional web page that highlights your hobbies, interests, or anything you'd like to share with the world!
Lesson Objectives
By the end of this lesson, you will be able to:
- Understand the basic structure of an HTML document.
- Use essential HTML5+ tags to create web content.
- Add images and links to your web page.
- Apply some CSS for basic styling.
- Publish your web page using GitHub Pages.
Step 1: Setting Up Your Project
1. Create a New Project Folder
- Start by creating a new folder on your computer. You can name it
MyFirstWebPageor any name you prefer.
2. Open a Text Editor
- Use a text editor like VSCode, Notepad++, or any editor you prefer to write your HTML code.
3. Create an HTML File
- Inside your project folder, create a new file named
index.html. This file will be the main page of your website.
Step 2: Understanding HTML Document Structure
Every HTML document follows a specific structure. Here's an overview with a basic example:
HTML Structure Explained
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to My First Web Page!</h1>
</header>
<main>
<section>
<h2>About Me</h2>
<p>Hello! My name is [Your Name]. I love [Your Interests].</p>
</section>
<section>
<h2>My Hobbies</h2>
<ul>
<li>Reading</li>
<li>Coding</li>
<li>Gaming</li>
</ul>
</section>
</main>
<footer>
<p>Contact me at: <a href="mailto:your@example.com">your@example.com</a></p>
</footer>
</body>
</html>Explanation of Each Part
- <!DOCTYPE html>: Declares the document type and version.
- <html>...</html>: Contains all HTML content.
- <head>...</head>: Contains metadata, title, and links to stylesheets.
- <body>...</body>: Contains the visible content on your page.
Step 3: Adding Content
In the code above, we have already included some content about you. Let's break it down:
Sections of Your Page
- Header: The top part where the title of the page is displayed.
- Main: The main content area with sections like "About Me" and "My Hobbies".
- Footer: At the bottom, it contains the email contact info.
Practical Exercise
- Customize the text in the About Me section with your own name and interests.
- Add two more hobbies in the "My Hobbies" section. You can also change the hobbies to something unique to you!
Step 4: Adding CSS for Styling
Now, let's make your web page look awesome! We can create a CSS file to style our HTML document.
1. Create a CSS File
- Inside your project folder, create a new file named
styles.css.
2. Add Some Style
Here's a simple CSS style you can add to your styles.css file:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
line-height: 1.6;
}
header {
background: #007BFF;
color: white;
padding: 10px 0;
text-align: center;
}
h1, h2 {
margin: 0;
}
footer {
text-align: center;
padding: 20px 0;
background: #333;
color: white;
}Explanation of your CSS
- We set a background color and text color for the body.
- Styled the header and footer for better visibility.
Practical Exercise
Experiment with different colors and fonts. You can change:
- The background color of your body.
- The text color of your header and footer.
Step 5: Previewing Your Web Page
To see your hard work in action:
- Open your
index.htmlfile in a web browser (like Chrome, Firefox, or Safari). - You should see your customized web page!
Step 6: Publish Your Web Page
Now that you have created your web page, let's make it available to the world using GitHub Pages!
Steps to Publish
Create a GitHub account if you don't have one.Create a new repository named
MyFirstWebPage.Upload your
index.html and styles.css files to this repository.Go to 'Settings' of your repository, scroll down to the 'GitHub Pages' section, and select the
main branch for publication.You will be given a URL where your web page is published.
Recap
Congratulations! 🎉 You've just created your first complete web page project using HTML5+ and CSS. You learned about:
- The basic structure of an HTML document.
- Adding and styling content.
- How to make your page live on the web using GitHub Pages.
Next Steps
Continue to explore HTML and CSS by adding more sections, trying different styles, and learning about JavaScript for interactivity. Keep practicing and have fun!
Remember: The web is yours to explore, create, and share! Happy coding!