Students/Staff
Parents
ElevatEdIn today's digital world, having your own space on the internet is like owning a canvas where you can showcase your creativity, skills, and interests. Imagine having a website that reflects who you are, what you love, and achieved. It's not just fun; it's a step into the incredible world of web development! In this article, we'll embark on an exciting journey to learn HTML, CSS, and basic design principles while creating your very own personal portfolio website.
Understanding Web Development Basics
The internet is a global web of interconnected computers. Websites are like digital pages that live on the internet. They are made up of text, images, videos, and more, displayed on a screen when you visit them using a web browser like Chrome, Firefox, or Safari
What are HTML and CSS?
HTML (Hypertext Markup Language) serves as the foundational structure of a web page. It structures the content, creating headings, paragraphs, images, and links. CSS (Cascading Style Sheets) adds visual flair, controlling colors, fonts, layouts, and more.
Design Principles
Design is how things look and feel. It involves organizing elements, choosing colors, and creating a layout that's easy to navigate. A good design makes a website appealing and user-friendly.
Let's Dive into Building Your Website
Planning Your Website
Before jumping into coding, you must plan what you want your website to include. Sketch or jot down ideas for different sections like the homepage, about me, projects, and contacts. Planning helps you organize your thoughts before putting them into code.
Creating Your HTML Structure
Open a text editor like Notepad or TextEdit and start writing HTML tags. Every webpage starts with the `<!DOCTYPE html>` declaration, followed by `<html>`, `<head>`, and `<body>` tags.
CODE
<!DOCTYPE html>
<html>
<head>
<title>Your Name - Portfolio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to My Portfolio</h1>
<nav>
<ul>
<li><a href="#about">About Me</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>About Me</h2>
<p>Write a little bit about yourself here!</p>
</section>
<section id="projects">
<h2>Projects</h2>
<!-- Add your projects here -->
</section>
<section id="contact">
<h2>Contact</h2>
<p>You can reach me at myemail@example.com</p>
</section>
<footer>
<p>© 2023 Your Name</p>
</footer>
</body>
</html>
Styling with CSS
Generate a fresh file named "styles.css" and establish a connection to it in your HTML. This is where you'll add colors, fonts, layouts, and other visual elements to make your website look great.
CSS CODE
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
color: white;
text-decoration: none;
}
section {
padding: 50px;
margin: 20px 0;
background-color: white;
}
footer {
text-align: center;
padding: 10px;
background-color: #333;
color: white;
}
```
Adding Your Content
Fill in the sections you planned earlier with your information. Write about yourself in the "About Me" section, showcase your projects or hobbies in the "Projects" section, and provide contact information in the "Contact" section.
Sharing Your Website with the World
For your website to go live, you'll require the services of a web hosting provider. Platforms like GitHub Pages or Neocities can help you host your website for free. Once it's live, share the link with your friends and family to showcase your amazing work!
Conclusion
Congratulations! You've taken a fantastic journey into the world of web development by creating your personal portfolio website. Remember, web development is a continuous learning process, so keep exploring and experimenting to enhance your website further. By learning HTML, CSS, and basic design principles, you've unlocked the door to endless possibilities in the digital world. Keep coding and expressing yourself creatively! Happy website building!
Discover 98thPercentile Here
