Fact checked by Want to know how to build a professional portfolio page page using HTML? In this tutorial, I’ll walk you through this fun and practical HTML project step-by-step.
Whether you're just starting your HTML journey or looking to sharpen your skills, creating a professional portfolio page is a great project to learn real-world web development skills.
In this HTML tutorial, you'll:
- Structure your professional portfolio page with semantic HTML to ensure clear, accessible content.
- Use Bootstrap and CSS to style your page, focusing on layout, typography, and color to make a visually engaging online presence.
- Apply responsive design principles to make sure your page looks great on any device, from desktops to mobile phones.
- Implement modern web design techniques like Flexbox and CSS Grid to enhance the layout and user experience.
- Showcase your projects and skills effectively to potential employers or clients using Bootstrap's card components and tables.
- Include personal and professional details to make your portfolio stand out and highlight your unique strengths.
Through this tutorial, you'll not only develop a fully functional professional portfolio page but also gain valuable insights into the fundamentals of web design and Bootstrap styling.
To make the most of this tutorial, having basic knowledge of HTML and CSS is beneficial.
But you don't need to be a web development expert to follow along, nor do you need experience with Bootstrap.
I've designed this guide to be beginner-friendly, with clear explanations and practical examples.
I’ve also provided the full source code for this HTML project so you can follow along, experiment, and even build upon it for your own projects.
Let’s dive in and start building!
How To Create A Professional Portfolio Page Using HTML
Ready to start your web development journey with a hands-on HTML project?
Today, we're going to build a professional portfolio page, which is perfect for intermediate and improver web developers.
This project will demonstrate how to use HTML to structure professional web content effectively and leverage CSS and Bootstrap to enhance its visual appeal.
Check out the image below for a preview of what you’ll build!
Wondering if it's challenging? Not at all!
I’ve designed this HTML project to be easy to follow for all skill levels by dividing it into easy-to-follow steps.
Whether you're looking to showcase your projects or enhance your web development portfolio, this project is great for skill enhancement.
You can do all of this using our online HTML compiler, so you won’t need to fire up an IDE or text editor to follow along with me as we build this professional portfolio page.
By the end, you’ll have a functional and visually appealing portfolio page to impress potential employers or clients and a solid understanding of HTML, CSS, and Bootstrap basics.
Project Prerequisites
Before starting, ensure you’re comfortable with basic HTML and CSS. I will cover everything else you need.
Plus, if you need to brush up on any of these areas, you can always check out a web development course.
I should also mention that it’s important to be willing to experiment and learn from mistakes. Maybe that sounds obvious, but trust me, this is one of the best ways to learn.
Plus, if you get stuck, you can even consider using an AI coding assistant like GitHub Copilot to help out, but I’d recommend waiting until you’re 100% stuck, as this is where you really learn.
Remember, we're also here to help, so don’t hesitate to search hackr.io for help as you go along.
Step 1: Setting Up The Project
Let's kick things off by preparing your environment to develop the professional portfolio page using HTML and Bootstrap.
If you want to dive straight in, I'd recommend following along with me using our online HTML compiler.
This is pre-populated with the HTML and CSS files you need to build this project without switching on an IDE.
Alternatively, I've outlined the steps for you to create the necessary files and organize your workspace on your own computer.
Just follow these, and you'll have a solid foundation for your project.
i. Choose an IDE or Editor
Before you start, choose an IDE or editor tailored for web development. If you’ve read my article on the best web development IDEs, you’ll see I favor Visual Studio Code (VSCode).
This is excellent for HTML and CSS and a solid choice if you’d prefer to build on your own machine.
ii. Install Necessary Plugins
If you choose VSCode, consider installing VSCode extensions like "Live Server" to preview your HTML pages in real time and "Prettier" for code formatting.
These tools will make your development process smoother and more efficient.
iii. Create a New HTML Project
Once your editor is set up, it's time to create a new project:
- Open your editor and select the option to create a new project or folder.
- Name your project folder something descriptive, like "PortfolioPage."
- Inside this folder, create an index.html for your HTML content. Note that we’ll be using Bootstrap, so we don’t necessarily need a styles.css file for any CSS styles, but this is where we can add some customization if we’d like to do that.
iv. Set Up a Basic HTML Structure
Open your index.html file and set up a basic HTML structure. Here’s a simple template to get you started:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Professional Portfolio Page</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<!-- We'll add header content here -->
</header>
<main>
<!-- Main portfolio content will go here -->
</main>
<footer>
<!-- Footer content goes here -->
</footer>
<!-- Bootstrap JS and dependencies -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>This is the basic structure every HTML project and page starts with.
We've got our DOCTYPE, HTML tag, head section (with meta tags and title), and the body where our content will go.
We’ve also added a link to the Bootstrap CDN to enable our project to take advantage of this CSS framework without having to install it locally.
v. Prepare for CSS Styling
Make sure your styles.css file is linked correctly in your HTML file to start adding styles in the next steps.
vi. Verify Project Setup
To ensure everything is set up correctly, try opening your index.html with the Live Server plugin or directly in your browser.
You should see a blank page with the basic document structure ready to be filled with content.
And there you have it! You’ve successfully set up your environment to create a product landing page with HTML.
Let’s jump into Step 2, where we’ll create the HTML structure for your product landing page.
Step 2: Creating the HTML Structure
With your development environment set up, it’s time to construct the HTML skeleton of your professional portfolio page.
i. Create the Header Section
The header is the first thing visitors see. It should include your name, a navigation bar, and a brief tagline or your current professional role. Here’s how you might structure it:
<header class="bg-dark text-white text-center py-3">
<h1>My Portfolio</h1>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">MyPortfolio</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#projects">Projects</a></li>
<li class="nav-item"><a class="nav-link" href="#skills">Skills</a></li>
<li class="nav-item"><a class="nav-link" href="#testimonials">Testimonials</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</div>
</nav>
</header>ii. Add the About Section
This section should provide a brief introduction about yourself. Include things like your professional background, achievements, or a short personal story. Structure it like this:
<section id="about" class="text-center my-5">
<h2>About Me</h2>
<p>Write a brief paragraph or two about your professional background, what you do, and any personal details you wish to share.</p>
</section>iii. Include a Projects Section
Showcase your projects with descriptions and links to the project code on GitHub. Consider using a grid layout for clarity:
<section id="projects" class="text-center mt-5">
<h2>Projects</h2>
<div class="row">
<div class="col-md-4 text-center">
<h3>Project 1</h3>
<p>Description of project 1.</p>
<a href="https://github.com/yourusername/project1" target="_blank" class="btn btn-primary">View on GitHub</a>
</div>
<div class="col-md-4 text-center">
<h3>Project 2</h3>
<p>Description of project 2.</p>
<a href="https://github.com/yourusername/project2" target="_blank" class="btn btn-primary">View on GitHub</a>
</div>
<div class="col-md-4 text-center">
<h3>Project 3</h3>
<p>Description of project 3.</p>
<a href="https://github.com/yourusername/project3" target="_blank" class="btn btn-primary">View on GitHub</a>
</div>
</div>
</section>iv. Add a Skills Section
Highlight the professional skills or tools you’re proficient with. Consider using a list for clarity:
<section id="skills" class="text-center mt-5">
<h2>Skills</h2>
<ul class="list-unstyled">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Bootstrap</li>
<li>React</li>
<!-- Add more skills as needed -->
</ul>
</section>v. Include a Testimonials Section
Showcase feedback from clients or colleagues to build credibility:
<section id="testimonials" class="text-center mt-5">
<h2>Testimonials</h2>
<blockquote class="blockquote text-center">
<p class="mb-0">"Amazing developer with great skills!"</p>
<footer class="blockquote-footer">Client Name</footer>
</blockquote>
<blockquote class="blockquote text-center mt-4">
<p class="mb-0">"Delivered the project on time and exceeded expectations."</p>
<footer class="blockquote-footer">Client Name</footer>
</blockquote>
</section>vi. Add a Contact Section
Make it easy for people to reach out to you. Include your professional email address, LinkedIn profile, or other contact methods:
<section id="contact" class="bg-light text-center py-3">
<h2>Contact Me</h2>
<p>Email: <a href="mailto:your.email@example.com">your.email@example.com</a></p>
<p>LinkedIn: <a href="your-linkedin-link" target="_blank">your-linkedin-profile</a></p>
</section>Here’s a summary of what we've accomplished in this step, highlighting the specific HTML skills you've utilized:
- Structured the Page Content: We created distinct sections, such as the header, about, projects, skills, testimonials, and contact sections. This uses semantic HTML, which not only helps with SEO but also makes your site more accessible.
- Utilized Semantic HTML Tags: For each section, we employed semantic tags (<header>, <section>, <footer>), enhancing the meaning and readability of your HTML structure. These provide better structure compared to non-semantic tags like <div>, making it easier for search engines and accessibility tools to navigate.
- Embedded Multimedia and Links: We added multimedia elements with <img> tags and provided links in your contact section using <a>. This is fundamental in HTML for incorporating multimedia elements and hyperlinks.
- Organized Content with Lists and Headings: Projects and skills were listed using <ul> and <li> to clearly display items. We used headings (<h1>, <h2>, <h3>) to structure the content hierarchically, improving both the aesthetics and organization of the information.
- Prepared the Document for Styling and Interactivity: By assigning id attributes to sections and other elements, we've prepared the groundwork for future CSS styling and JavaScript interaction.
With the HTML structure in place, you now have a solid framework for your professional portfolio page.
Let’s move on to Step 3 to style your page using Bootstrap.
Step 3: Styling with Bootstrap
Bootstrap provides a wide range of classes to help you style your webpage quickly and effectively.
We'll now enhance the appearance of our professional portfolio page by using some of Bootstrap's more advanced components like cards, tables, and responsive layouts.
i. Style the Header
Enhance the header with Bootstrap classes for a modern look.
Note that we’ve also included a toggler button to hide/show the navbar for small screen sizes.
<header class="bg-dark text-white text-center py-3">
<h1>My Portfolio</h1>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">MyPortfolio</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#projects">Projects</a></li>
<li class="nav-item"><a class="nav-link" href="#skills">Skills</a></li>
<li class="nav-item"><a class="nav-link" href="#testimonials">Testimonials</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</div>
</nav>
</header>ii. Style the About Section
Use Bootstrap’s utility classes to center the content and add margins ot the about section. We can also add an image to make our portfolio more personable.
<section id="about" class="text-center my-5">
<h2>About Me</h2>
<div class="row justify-content-center">
<div class="col-md-4">
<img src="your-photo.jpg" alt="Your Name" class="img-fluid rounded-circle">
</div>
<div class="col-md-8">
<p>Introduce yourself and provide a brief overview of your background and expertise. Write a brief paragraph or two about your professional background, what you do, and any personal details you wish to share.</p>
</div>
</div>
</section>iii. Style the Projects Section with Cards
Utilize Bootstrap’s card component to create a professional layout for the projects.
<section id="projects" class="text-center mt-5 px-2">
<h2 class="text-center">Projects</h2>
<div class="row">
<div class="col-md-4">
<div class="card mb-4">
<img src="project1-image.jpg" class="card-img-top" alt="Project 1">
<div class="card-body">
<h5 class="card-title">Project 1</h5>
<p class="card-text">Description of project 1.</p>
<a href="https://github.com/yourusername/project1" target="_blank" class="btn btn-primary">View on GitHub</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4">
<img src="project2-image.jpg" class="card-img-top" alt="Project 2">
<div class="card-body">
<h5 class="card-title">Project 2</h5>
<p class="card-text">Description of project 2.</p>
<a href="https://github.com/yourusername/project2" target="_blank" class="btn btn-primary">View on GitHub</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4">
<img src="project3-image.jpg" class="card-img-top" alt="Project 3">
<div class="card-body">
<h5 class="card-title">Project 3</h5>
<p class="card-text">Description of project 3.</p>
<a href="https://github.com/yourusername/project3" target="_blank" class="btn btn-primary">View on GitHub</a>
</div>
</div>
</div>
</div>
</section>iv. Style the Skills Section with a Table
Use Bootstrap’s table component to create a professional-looking skills table.
<section id="skills" class="mt-5 px-2">
<h2>Skills</h2>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Skill</th>
<th scope="col">Proficiency</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML</td>
<td>Expert</td>
</tr>
<tr>
<td>CSS</td>
<td>Advanced</td>
</tr>
<tr>
<td>JavaScript</td>
<td>Advanced</td>
</tr>
<tr>
<td>Bootstrap</td>
<td>Intermediate</td>
</tr>
<tr>
<td>React</td>
<td>Intermediate</td>
</tr>
</tbody>
</table>
</section>v. Style the Testimonials Section with Cards
Use Bootstrap’s card component to style the testimonials.
<section id="testimonials" class="mt-5 px-2">
<h2 class="text-center">Testimonials</h2>
<div class="row">
<div class="col-md-6">
<div class="card mb-4">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>"Amazing developer with great skills!"</p>
<footer class="blockquote-footer">Client Name</footer>
</blockquote>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mb-4">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>"Delivered the project on time and exceeded expectations."</p>
<footer class="blockquote-footer">Client Name</footer>
</blockquote>
</div>
</div>
</div>
</div>
</section>Custom CSS (Optional)
While Bootstrap handles most of the styling, you can add custom CSS in your styles.css file to further personalize the appearance.
/* Custom styles for the portfolio page */
header h1 {
font-size: 2.5rem;
font-weight: bold;
}
section h2 {
margin-bottom: 1rem;
font-size: 2rem;
color: #333;
}
section h3 {
font-size: 1.5rem;
margin-top: 1rem;
color: #555;
}
footer p {
margin: 0;
}
footer a {
color: #007bff;
}Review
Now, let's review and ensure everything is styled correctly:
- General check: Open your index.html file in the browser, and verify that all sections are displaying as intended with the Bootstrap styles applied.
- Check Responsiveness: Resize your browser window to see how the page adjusts on different screen sizes.
- Verify Alignment and Spacing: Ensure all elements are properly aligned and spaced.
By leveraging Bootstrap’s advanced components and utilities, you’ve styled your professional portfolio page efficiently and effectively.
You can further customize the appearance by exploring more Bootstrap components and utilities as needed.
Next, let's move on to Step 4 to review and debug our project.
Step 4: Review and Debug
With the HTML structure and Bootstrap styling in place, it's time to thoroughly review your portfolio page and prepare it for public viewing.
i. Testing Across Different Browsers and Devices
Start by testing your page across various browsers (like Chrome, Firefox, Safari, and Edge) and devices (desktops, tablets, and smartphones):
Cross-browser Testing: Check for layout discrepancies, font rendering, and interactive features like modal pop-ups and image filtering.
Responsive Testing: Ensure that the page displays correctly in different screen sizes and orientations. Pay attention to touch interactions on mobile devices.
ii. Debugging Common Issues
Address common issues that might arise during testing:
- Broken Images: Ensure that the path to your images is correct. If an image is not displaying, check the src attribute.
- Misaligned Content: Check your Bootstrap grid classes. Ensure you are using the correct column sizes and that your rows and columns are properly nested.
- Unresponsive Layout: Make sure you have included the meta viewport tag in the head section of your HTML. This is crucial for responsive design.
- Missing Styles: Ensure that the Bootstrap CDN link is correctly added in the head section. Also, check that your custom CSS file is properly linked.
iii. Code Validation
Use HTML and CSS validators to ensure your code meets web standards and is free from syntax errors. The W3C Validator is a reliable tool for this purpose.
iv. Preparing for Deployment
Prepare your portfolio page for deployment:
- Final Review: Double-check all links, script sources, and image paths. Ensure everything is correctly referenced and functioning as expected.
- Backup Your Project: Before uploading your project to a server, make a backup to avoid any data loss.
v. Test Responsiveness
Adjust your browser window size to simulate different screen sizes, or use your browser’s developer tools to test various device resolutions.
Make sure your layout adjusts and looks good on mobile, tablet, and desktop views. Adjust your CSS using media queries if necessary to improve responsiveness.
vi. Improve Accessibility
Ensure your page is accessible to all users, including those with disabilities:
- Check color contrast ratios.
- Ensure that all interactive elements are keyboard accessible.
- Use semantic HTML to aid screen readers.
- Include alt text for images.
vii. Optimize Loading Times
Optimize your page for faster loading times:
- Compress any images used without losing quality.
- Check that your hosting solution loads your page quickly enough.
viii. Gather Feedback
Sometimes, it helps to get a fresh set of eyes on your project:
- Ask friends or colleagues to review your page.
- Gather feedback on the design, content, and functionality.
- Make adjustments based on the feedback to enhance user experience.
With your page polished and debugged, it's ready for the world to see.
The next step would be to consider how and where to publish it, so let’s take a look at that!
Step 5: Publishing Your Page
Now that your portfolio page is fully developed, tested, and ready, it's time to publish it and look into ways you can continue to expand your skills.
This final step will guide you through the process of publishing your page online.
i. Choose a Hosting Service
To make your product landing page accessible on the internet, you need to host it on a web server.
Here are a few popular, user-friendly options that offer free plans:
- GitHub Pages: Ideal for hosting simple, static websites. Plus, it integrates directly with your GitHub repository, making updates easy.
- Netlify: Offers a straightforward drag-and-drop interface for deploying your site and automatic HTTPS.
- Vercel: Similar to Netlify, it provides easy deployment options and is great for static sites.
ii. Prepare Your Files for Deployment
Before uploading your files, ensure everything is named correctly and organized:
- Your main HTML file should be named index.html.
iii. Upload Your Files
Depending on your chosen hosting service, the process will vary:
- GitHub Pages: Push your project to a GitHub repository, then enable GitHub Pages in the repository settings.
- Netlify/Vercel: Drag and drop your project folder onto their web interface or connect your GitHub account for continuous deployment.
iv. Set Up a Custom Domain (Optional)
If you have a custom domain, you can link it to your hosting provider to give your landing page a more professional look:
v. Test Your Live Site
Once your page is online, visit the URL provided by your hosting platform. Check everything once more to ensure:
- The page loads correctly.
- All links work as expected.
- The site is responsive across different devices and browsers.
vi. Share Your Product Landing Page
Now that your portfolio page is live, share the URL on your professional networks, email signatures, and social media profiles.
Congratulations! You've successfully created and published your HTML portfolio page.
This not only enhances your online presence but also demonstrates your ability to apply HTML and Bootstrap CSS skills in a practical project.
Next Steps & Further Learning
Congratulations on successfully building and publishing your own professional portfolio page!
While you've reached a significant milestone, there's still plenty to explore in web development.
First up, I’d highly encourage you to play around with the code I have provided, especially the Bootstrap styling and utility classes.
There is so much more you can do here, and it’s an excellent way to express your personality.
Beyond that, here are a few ideas to keep enhancing your skills:
Expand Your HTML, CSS, and JavaScript Knowledge
- Advanced Features: Consider enhancing your portfolio page with additional features such as a product carousel, interactive elements like modals or popovers, and forms for user feedback or subscription to a newsletter.
- Learn a Framework: To further improve your web development skills, consider learning a JavaScript framework or library such as React, Vue, or Angular. These tools can help you build more complex and scalable applications with enhanced interactivity and performance.
Explore Additional Web Technologies
- Explore Backend Development: Understanding server-side programming can greatly enhance your capability to build comprehensive web applications. Consider learning languages like Node.js for JavaScript and Python with frameworks like Django or Flask.
- SEO Basics: Learn the fundamentals of Search Engine Optimization (SEO) to increase the visibility of your web page. This involves optimizing your site’s content and structure to rank higher in search engine results.
Engage with the Community
- Feedback: Share your product landing page with peers, mentors, or online communities to get feedback and suggestions for improvement. Platforms like GitHub, CodePen, and Dev.to are great places to showcase your work and learn from others.
- Open Source: Consider contributing to open-source projects where HTML, CSS, and JavaScript skills are needed. This can provide real-world experience, improve your coding skills, and engage you with the broader developer community.
Keep Learning and Sharing
- Document Your Journey: Blog about the process of building your portfolio page. Share what you learned, the challenges you faced, and how you solved them. This not only helps you consolidate your learning but also assists others who are on a similar path.
- Stay Updated: Follow web development blogs, join webinars, and participate in online communities to keep up with the latest trends and best practices. Websites like MDN Web Docs, CSS-Tricks, and Smashing Magazine offer valuable resources and updates.
And if you're hungry for more HTML projects, check out the rest of our step-by-step tutorials, including how to create a product landing page.
Professional Portfolio Page: Full Source Code Example
HTML Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alex Carter - Professional Portfolio</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<!-- Header -->
<header class="bg-dark text-white text-center py-3">
<h1>Alex Carter</h1>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">My Portfolio</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#projects">Projects</a></li>
<li class="nav-item"><a class="nav-link" href="#skills">Skills</a></li>
<li class="nav-item"><a class="nav-link" href="#testimonials">Testimonials</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</div>
</nav>
</header>
<!-- Main Content -->
<main class="container my-5">
<!-- About Me Section -->
<section id="about" class="text-center my-5">
<h2>About Me</h2>
<div class="row justify-content-center">
<div class="col-12">
<img src="alex-carter.jpg" alt="Alex Carter" class="img-fluid rounded-circle" style="width: 15%; max-width: 150px; height: auto; margin: 0 auto;">
</div>
<div class="col-12">
<p>Hello! I'm Alex Carter, a passionate web developer with 5 years of experience creating dynamic & responsive web apps. I specialize in front-end, focusing on crafting clean, user-friendly interfaces. I am proficient in various web technologies and strive to stay up to date with industry trends.</p>
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="mt-5">
<h2 class="text-center">Projects</h2>
<div class="row">
<div class="col-md-4">
<div class="card mb-4">
<img src="thumbnail_1.png" class="card-img-top" alt="E-Commerce Platform">
<div class="card-body">
<h5 class="card-title">E-Commerce Platform</h5>
<p class="card-text">Developed a full-fledged e-commerce platform with product listings, a shopping cart, and payment gateway integration.</p>
<a href="https://github.com/alexcarter/e-commerce-platform" target="_blank" class="btn btn-primary">View on GitHub</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4">
<img src="thumbnail_2.png" class="card-img-top" alt="Portfolio Website">
<div class="card-body">
<h5 class="card-title">Portfolio Website</h5>
<p class="card-text">Created a personal portfolio website to showcase my projects and skills, featuring a modern design and responsive layout.</p>
<a href="https://github.com/alexcarter/portfolio-website" target="_blank" class="btn btn-primary">View on GitHub</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4">
<img src="thumbnail_3.png" class="card-img-top" alt="Blog Platform">
<div class="card-body">
<h5 class="card-title">Blog Platform</h5>
<p class="card-text">Built a content management system for a blog, inc. features for writing, editing, & publishing posts with user authentication.</p>
<a href="https://github.com/alexcarter/blog-platform" target="_blank" class="btn btn-primary">View on GitHub</a>
</div>
</div>
</div>
</div>
</section>
<!-- Skills Section -->
<section id="skills" class="mt-5 px-2">
<h2>Skills</h2>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Skill</th>
<th scope="col">Proficiency</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML</td>
<td>Expert</td>
</tr>
<tr>
<td>CSS</td>
<td>Expert</td>
</tr>
<tr>
<td>JavaScript</td>
<td>Advanced</td>
</tr>
<tr>
<td>React</td>
<td>Advanced</td>
</tr>
<tr>
<td>Bootstrap</td>
<td>Advanced</td>
</tr>
<tr>
<td>Node.js</td>
<td>Intermediate</td>
</tr>
<tr>
<td>MongoDB</td>
<td>Intermediate</td>
</tr>
<tr>
<td>Git</td>
<td>Advanced</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section id="testimonials" class="mt-5">
<h2 class="text-center">Testimonials</h2>
<div class="row">
<div class="col-md-6">
<div class="card mb-4">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>"Alex is an exceptional developer who always delivers high-quality work. Highly recommended!"</p>
<footer class="blockquote-footer">John Doe, CEO of TechCompany</footer>
</blockquote>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mb-4">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>"Working with Alex has been a fantastic experience. His attention to detail and expertise in web development are unmatched."</p>
<footer class="blockquote-footer">Jane Smith, Project Manager at WebSolutions</footer>
</blockquote>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="bg-light text-center py-3">
<h2>Contact Me</h2>
<p>Email: <a href="mailto:alex.carter@example.com">alex.carter@example.com</a></p>
<p>LinkedIn: <a href="https://www.linkedin.com/in/alexcarter" target="_blank">linkedin.com/in/alexcarter</a></p>
</section>
</main>
<!-- Footer -->
<footer class="bg-light text-center py-3">
<p>© 2024 Alex Carter. All rights reserved.</p>
<p><a href="#">Contact</a> | <a href="#">Privacy Policy</a></p>
</footer>
<!-- Bootstrap JS and dependencies -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>CSS Source Code:
/* Custom styles for the portfolio page */
header h1 {
font-size: 2.5rem;
font-weight: bold;
}
section h2 {
margin-bottom: 1rem;
font-size: 2rem;
color: #333;
}
section h3 {
font-size: 1.5rem;
margin-top: 1rem;
color: #555;
}
footer p {
margin: 0;
}
footer a {
color: #007bff;
}Wrapping Up
Building a professional portfolio page using HTML is a great way to level up your web development skills and delve into creating visually appealing and functional websites.
By creating this professional portfolio page, you've tackled a variety of challenges, including crafting a user-friendly layout, handling styling with Bootstrap and CSS, and ensuring your content is responsive and accessible across different devices.
In this tutorial, you’ve learned how to:
- Structure your content with HTML to create a clear, logical, and accessible web page.
- Use Bootstrap and CSS to enhance the visual appeal of your page, applying styles that bring your content to life.
- Implement responsive design techniques to ensure your portfolio page looks great on both desktops and mobile devices.
- Utilize advanced CSS features like Flexbox and Grid for sophisticated layout designs.
- Prioritize web accessibility, making your site usable for everyone.
You now possess the foundational tools and knowledge needed to further develop and refine your professional portfolio page.
Potential enhancements could include adding interactive elements with JavaScript, integrating with social media platforms, and incorporating a blog to share your professional insights and experiences.
Your journey into web development doesn't end here. With these new skills, you're well-equipped to tackle more complex projects, explore different aspects of web design and development, and continue building a diverse range of engaging web experiences.
Have fun and happy coding!
Want to sharpen up your HTML and web development skills? Check out:
Dr. Angela Yu's Complete Web Development Bootcamp
