Welcome to Day 6 of our journey to build a portfolio website with CodeIgniter! Today, we’re going to design/designing the homepage of our website. The homepage serves as the first impression for visitors, so it’s essential to make it visually appealing and informative.
So Start, Designing the Homepage for Your Portfolio Website
Planning the Homepage Design
Before diving into the code, let’s outline the key elements we want to include on our homepage:
- Header: Typically contains the website logo, navigation links, and possibly a call-to-action button.
- About Section: Introduce yourself briefly. Mention your skills, expertise, and what visitors can expect to find on your portfolio.
- Portfolio Showcase: Display your projects with thumbnails or images. Each project should link to its detailed view.
- Contact Information: Include your contact details or a contact form for visitors to reach out to you.
- Footer: Includes additional navigation links, copyright information, and possibly social media icons.
Creating the Homepage Views and Controller
Step 1: Create Controller Methods
- Homepage Controller: Navigate to
application/controllers/and create a new file namedHome.php. Add the following code:
<?php
class Home extends CI_Controller {
public function index() {
// Load necessary models and views here
$this->load->view('header');
$this->load->view('homepage');
$this->load->view('footer');
}
}
?>Step 2: Create Homepage Views
- Header View: Create
header.phpinapplication/views/directory:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Portfolio Website</title>
<!-- Include CSS and JavaScript links here -->
</head>
<body>
<!-- Navigation bar and logo -->
<header>
<h1>Your Name</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Login</a></li>
</ul>
</nav>
</header>- Homepage View: Create
homepage.phpinapplication/views/directory
<!-- About Section -->
<section>
<h2>About Me</h2>
<p>Welcome to my portfolio website. I am passionate about web development and excited to showcase my projects.</p>
</section>
<!-- Portfolio Showcase Section -->
<section>
<h2>Portfolio</h2>
<!-- Display projects -->
<div class="projects">
<div class="project">
<img src="path/to/project_image.jpg" alt="Project Name">
<h3>Project Name</h3>
<p>Project Description</p>
<a href="#">View Project</a>
</div>
<!-- Repeat for each project -->
</div>
</section>
<!-- Contact Section -->
<section>
<h2>Contact Me</h2>
<p>Feel free to reach out to me via email at example@example.com</p>
</section>- Footer View: Create
footer.phpinapplication/views/directory:html
<!-- Footer -->
<footer>
<p>© 2024 Your Portfolio. All rights reserved.</p>
<ul>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Contact</a></li>
</ul>
</footer>
<!-- Include JavaScript files here -->
</body>
</html>Styling Your Homepage
- CSS: Create a
styles.cssfile inassets/css/directory and link it in yourheader.phpto style the elements and layout of your homepage.
<link rel="stylesheet" href="<?php echo base_url('assets/css/styles.css'); ?>">- JavaScript: Include any necessary JavaScript files for interactive elements or animations.
Conclusion
Congratulations! You’ve designed the homepage for your portfolio website using CodeIgniter. This page introduces visitors to who you are, showcases your work, and provides a way for them to contact you. In Day 7, we’ll integrate user-specific features such as editing profile details and managing projects.
Feel free to leave any questions or comments below. Keep refining your homepage design and exploring CodeIgniter! Happy coding!
