Simple Portfolio Website Design using HTML
Being a web developer and having a portfolio helps a lot while applying for opportunities and acts as a showcase of our talent, so in this article, we will learn how to make a simple one-page portfolio by just using HTML. This portfolio might contain some very important information of yours like:
- About us section
- Your projects
- Your achievements
- Your contact details
- Contact us Page
You can enhance your portfolio by adding more details and making it visually appealing. However, this article is specifically designed for beginners who want to create a simple HTML portfolio.
Follow the given link to Build and Host your own portfolio website.
Why do we create a Portfolio?
- Showcase Skills: Exhibit your skills and projects visually in a portfolio.
- Career Opportunities: Boost job and freelance prospects with a professional portfolio.
- Connections: Make lasting connections using your portfolio for job or service opportunities.
Who is a portfolio for?
- Graphic Designers
- Web Developers
- Photographers
- UX/UI Designers
- Artists
- Content Creators
- Software Engineers
- Videographers
- Fashion Designers
Example: In this example, we will see the implementation of the above approach with an example.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >HTML Project</ title > </ head > < body > <!--Header(start)--> < table id = "header" border = "0" width = "100%" cellpadding = "0" cellspacing = "0" bgcolor = "#4CAF50" > < tr > < td > < table border = "0" cellpadding = "15" cellspacing = "0" width = "90%" align = "center" > < tr > < td > </ td > < td > < font face = "Comic sans MS" size = "6" > < b >w3wiki</ b > </ font > </ td > < td width = "15%" > </ td > < td > < a href = "#home" style = "text-decoration:none" > < font face = "Verdana" size = "5" color = black > Home </ font > </ a > </ td > < td > | </ td > < td > < a href = "#about" style = "text-decoration:none" > < font face = "Verdana" size = "5" color = black > About </ font > </ a > </ td > < td > | </ td > < td > < a href = "#projects" style = "text-decoration:none" > < font face = "Verdana" size = "5" color = black > Projects </ font > </ a > </ td > < td > | </ td > < td > < a href = "#achievements" style = "text-decoration:none" > < font face = "Verdana" size = "5" color = black > Achievements </ font > </ a > </ td > < td > | </ td > < td > < a href = "#contact" style = "text-decoration:none" > < font face = "Verdana" size = "5" color = black > Contact </ font > </ a > </ td > </ tr > </ table > </ td > </ tr > </ table > <!--Header(end)--> <!--Home(start)--> < table id = "home" border = "1" width = "100%" cellpadding = "20" cellspacing = "0" bgcolor = "black" > < tr > < td > < table border = "0" cellpadding = "15" cellspacing = "0" width = "90%" align = "center" > < tr > < td align = "center" valign = "middle" > < h3 > < font face = "Times New Roman" size = "6" color = "#ffffff" > Hi Beginner! </ font > </ h3 > < h2 > < font face = "Verdana" size = "6" color = "#4CAF50" > <!-- Freelance Programmer --> </ font > </ h2 > </ td > </ tr > </ table > </ td > </ tr > </ table > <!--Home(end)--> <!--About(start)--> < table id = "about" border = "0" width = "100%" cellpadding = "0" cellspacing = "0" bgcolor = "black" > < tr > < td > < table border = "0" cellpadding = "15" cellspacing = "0" width = "80%" align = "center" > < tr > < td height = "180" align = "center" valign = "middle" colspan = "2" > < font face = "Verdana" size = "7" color = "#4CAF50" > About Me </ font > < hr color = "#4CAF50" width = "90" > </ td > </ tr > < tr > < td width = "40%" > < img src = "img.png" > </ td > < td width = "60%" > < font face = "Verdana" size = "4" color = "white" > Thanks for your interest, here is a quick story of me and this website. < hr color = "black" > Sandeep Jain An IIT Roorkee alumnus and founder of w3wiki. He loves to solve programming problems in most efficient ways. Apart from w3wiki, he has worked with DE Shaw and Co. as a software developer and JIIT Noida as an assistant professor. < hr color = "black" > I do my work mainly in C-Language, C++ and JAVA. C++ and Data Structure and Algorithm are my stronger section. Besides these I know Web Development, LINUX and database as well. < hr color = "black" > This website is basically one of my Web Development project which is built using HTML only. Here one can also find ideas for projects in different languages. Thanks again for reading this, because of people like you, it exists and prospers! < hr color = "black" > Cheers, < br > < b >w3wiki.</ b > </ font > </ td > </ tr > </ table > < hr color = "black" > < hr color = "black" > < hr color = "black" > </ td > </ tr > </ table > <!--About(end)--> <!--Projects(start)--> < table id = "projects" border = "0" width = "100%" cellpadding = "0" cellspacing = "0" bgcolor = "#c2c0c3" > < tr > < td > < table border = "0" cellpadding = "15" cellspacing = "0" width = "80%" align = "center" > < tr > < td height = "180" align = "center" valign = "middle" colspan = "2" > < font face = "Verdana" size = "7" color = "black" > Projects </ font > < hr color = "black" width = "90" > </ td > </ tr > < tr > < td height = "10" > < font face = "Times New Roman" size = "5" color = "black" > < ul > < li > BMI Calculator < a href = "#" style = "text-decoration:none" > ➲ </ a > </ li > < li > < hr color = "#c2c0c3" > Calculator < a href = "#" style = "text-decoration:none" color = "#c2c0c3" > ➲ </ a > </ li > < li > < hr color = "#c2c0c3" > Calendar < a href = "#" style = "text-decoration:none" > ➲ </ a > </ li > < li > < hr color = "#c2c0c3" > ChatBot < a href = "#" style = "text-decoration:none" > ➲ </ a > </ li > < li > < hr color = "#c2c0c3" > Contact Saver < a href = "#" style = "text-decoration:none" > ➲ </ a > </ li > < li > < hr color = "#c2c0c3" > Daily Quiz < a href = "#" style = "text-decoration:none" > ➲ </ a > </ li > < li > < hr color = "#c2c0c3" > Emplyoyee Record System < a href = "#" style = "text-decoration:none" > ➲ </ a > </ li > < li > < hr color = "#c2c0c3" > Guess the Number-Game < a href = "#" style = "text-decoration:none" > ➲ </ a > </ li > < li > < hr color = "#c2c0c3" > Random Password Generator < a href = "#" style = "text-decoration:none" > ➲ </ a > </ li > < li > < hr color = "#c2c0c3" > Stone Paper Scissor < a href = "#" style = "text-decoration:none" > ➲ </ a > </ li > < li > < hr color = "#c2c0c3" > Tic Tac Toe < a href = "#" style = "text-decoration:none" > ➲ </ a > </ li > < li > < hr color = "#c2c0c3" > Tic Tac Toe(GUI) < a href = "#" style = "text-decoration:none" > ➲ </ a > </ li > < li > < hr color = "#c2c0c3" > ToDo App < a href = "#" style = "text-decoration:none" > ➲ </ a > </ li > < li > < hr color = "#c2c0c3" > Travel Management System < a href = "#" style = "text-decoration:none" > ➲ </ a > </ li > </ ul > < hr color = "#c2c0c3" > < hr color = "#c2c0c3" > < hr color = "#c2c0c3" > < hr color = "#c2c0c3" > </ font > </ td > < td width = "45%" > < img src = "img.png" alt = "Project" width = "75%" > </ td > </ tr > </ table > </ td > </ tr > </ table > <!--Projects(end)--> <!--Achievement(start)--> < table id = "achievements" border = "0" width = "100%" cellpadding = "0" cellspacing = "0" bgcolor = "black" > < tr > < td > < table border = "0" cellpadding = "15" cellspacing = "0" width = "80%" align = "center" > < tr > < td height = "180" align = "center" valign = "middle" > < font face = "Verdana" size = "7" color = "#4CAF50" > Achievements < hr color = "#4CAF50" width = "100" > </ font > </ td > </ tr > < tr > < td > < font face = "Verdana" size = "4" color = "white" > < ul > < li > < b >Intern at w3wiki.</ b > < ul > < li > December,2020 - Present. </ li > < li > Write technical articles on programming related topics. </ li > </ ul > </ li > < li > < hr color = "black" > < hr color = "black" > < hr color = "black" > < b >Microsoft Learn Student Ambassador.</ b > < ul > < li > August,2020 - Present. </ li > < li > Conducted events and workshops on different technologies. </ li > </ ul > </ li > < li > < hr color = "black" > < hr color = "black" > < hr color = "black" > < b >Mentored HackTX.</ b > < ul > < li > October,2020. </ li > < li > Selected from Microsoft as Student ambassador where I mentored students in their projects. </ li > < hr color = "black" > < hr color = "black" > < hr color = "black" > < hr color = "black" > < hr color = "black" > </ ul > </ li > </ ul > </ font > </ td > </ tr > </ table > </ td > </ tr > </ table > <!--Achievement(end)--> <!--Contact(start)--> < table id = "contact" border = "0" width = "100%" cellpadding = "0" cellspacing = "0" bgcolor = "#c2c0c3" > < tr > < td > < table border = "0" cellpadding = "15" cellspacing = "0" width = "80%" align = "center" > < tr > < td height = "180" align = "center" valign = "middle" colspan = "2" > < font face = "Verdana" size = "7" color = "black" > Contact </ font > < hr color = "black" width = "90" > </ td > </ tr > < tr > < td align = "center" valign = "top" > < table border = "0" width = "50%" cellpadding = "15" cellspacing = "0" align = "center" bgcolor = "black" > < tr > < td width = "30%" > < hr color = "black" > < font face = "Verdana" size = "4" color = "#ffffff" > Name </ font > </ td > < td width = "70%" > < font face = "Verdana" size = "4" color = "#ffffff" > < input type = "text" size = "40" > </ font > </ td > </ tr > < tr > < td width = "30%" > < font face = "Verdana" size = "4" color = "#ffffff" > Email </ font > </ td > < td width = "70%" > < font face = "Verdana" size = "4" color = "#ffffff" > < input type = "email" size = "40" > </ font > </ td > </ tr > < tr > < td width = "30%" > < font face = "Verdana" size = "4" color = "#ffffff" > Number </ font > </ td > < td width = "70%" > < font face = "Verdana" size = "4" color = "#ffffff" > < input type = "number" size = "12" > </ font > </ td > </ tr > < tr > < td width = "30%" > < font face = "Verdana" size = "4" color = "#ffffff" > Message </ font > </ td > < td width = "70%" > < font face = "Verdana" size = "4" color = "#ffffff" > < textarea rows = "5" cols = "37" > </ textarea > </ font > </ td > </ tr > < tr > < td width = "30%" > </ td > < td width = "70%" > < button type = "Submit" > < font face = "Verdana" size = "4" color = "black" > < b >Submit</ b > </ font > </ button > < hr color = "black" > < hr color = "black" > </ td > </ tr > </ table > </ td > </ tr > < tr > < td colspan = "2" > </ td > </ tr > </ table > </ td > </ tr > </ table > <!--Contact(end)--> <!--Footer1(start)--> < table id = "footer" border = "0" width = "100%" cellpadding = "0" cellspacing = "0" bgcolor = "#4CAF50" > < tr > < td > < table border = "0" cellpadding = "15" cellspacing = "0" width = "90%" align = "center" > < tr > < td width = "13%" valign = "top" > < b >LinkedIn</ b > < a href = "#" style = "text-decoration:none" > ➲ </ a > </ td > < td > | </ td > < td width = "13%" valign = "top" > < b >GitHub</ b > < a href = "#" style = "text-decoration:none" > ➲ </ a > </ td > < td > | </ td > < td width = "13%" valign = "top" > < b >HackerRank</ b > < a href = "#" style = "text-decoration:none" > ➲ </ a > </ td > < td > | </ td > < td width = "13%" valign = "top" > < b >w3wiki</ b > < a href = "#" style = "text-decoration:none" > ➲ </ a > </ td > < td > | </ td > < td width = "13%" valign = "top" > < b >Twitter</ b > < a href = "#" style = "text-decoration:none" > ➲ </ a > </ td > < td > | </ td > < td width = "13%" valign = "top" > < b >Instagram</ b > < a href = "#" style = "text-decoration:none" > ➲ </ a > </ td > < td > | </ td > < td width = "13%" valign = "top" > < b >Email</ b > < a href = "#" style = "text-decoration:none" > ➲ </ a > </ td > < td > | </ td > < td width = "13%" valign = "top" > < b >Website</ b > < a href = "#" style = "text-decoration:none" > ➲ </ a > </ td > </ tr > </ table > </ td > </ tr > </ table > <!--Footer1(end)--> <!--Footer2(start)--> < table id = "footer" border = "0" width = "100%" cellpadding = "0" cellspacing = "0" bgcolor = "black" > < tr > < td > < table border = "0" cellpadding = "15" cellspacing = "0" width = "90%" align = "center" > < tr > < td width = "80%" valign = "top" > < font face = "Verdana" color = "#4CAF50" size = "5" > ©Copyright 2050 by nobody. All rights reserved. </ font > </ td > < td width = "10%" > < font face = "arial" color = "black" size = "5" > < a href = "#header" style = "text-decoration:none" > < font face = "Verdana" color = "#4CAF50" size = "6" > < b >TOP ☝</ b > </ font > </ a > </ font > </ td > </ tr > </ table > </ td > </ tr > </ table > <!--Footer2(end)--> </ body > </ html > |
Note: We have used two photographs as well. One in the about table and other in the project section.
Outputs:
Contact Us