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 portfolio by just using HTML. This portfolio might contain
- An image displayed as a profile photo
- Uses emphasis and strong tags for formatting
- Has tables to better display data
- Links to other pages like Hobbies and Contact(displayed at bottom of the page)
- A contact form that emails details.
- images folder(You will put your photo into this folder and use it as your profile photo)
1- For index.html file:
2- For hobbies.html file:
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>My Hobbies</title> </head> <body> <h3>My Hobbies</h3> <ol> <li><a href="https://www.telegraph.co.uk/content/dam/cricket/2019/04/01/TELEMMGLPICT000192546944_trans_NvBQzQNjv4Bq900leoZVuq6ru6F43OqP_mjnRw13ichYxOyPsROrpNM.jpeg">I love Playing Cricket</a></li> <li><a href="https://filmdaily.co/wp-content/uploads/2020/05/cbd-lede-1300x813.jpg">I love Watching Movies</a></li> <li><a href="https://static.toiimg.com/photo/67625374.cms">I love Listening To Music</a></li> </ol> </body> </html>
3- For the contact.html file
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>My Contact</title> </head> <body> <h1>My Contact Details</h1> <p>My Address: No:63(A) , Ground Floor, Ramani Illam,2nd Cross Street, Chandran Nagar, Chromepet,Chennai-44</p> <p>My Phone Number: 7358833533</p> <p>My Gmail: firstname.lastname@example.org</p> <form class="" action="mailto:email@example.com" method="post" enctype="text/plain"> <label>Your Name</label> <input type="text" name="Your Name" value=""><br /> <label>Your email</label> <input type="email" name="Your Email" value="" /><br /> <label>Your Message</label><br /> <textarea name="Your Message" rows="10" columns="30"></textarea><br /> <input type="submit" name="" /> </form> </body> </html>
Now the project is ready!
This is the output:
See it live: https://muthuannamalai12.github.io/CV/
Link To GitHub Repository: https://github.com/muthuannamalai12/CV
I hope you found this article valuable. If yes do let me know in the comments 😊
You can now extend your support by buying me a Coffee.😊👇
Thanks for Reading 😊
Top comments (2)
A few things to be aware of:
Don't use tables for layout (your profile picture bit and your skills bit). This is really important for people who use a screen reader (a piece of software that reads the page aloud, normally used by people with a vision impairment).
Instead of tables look into using semantic HTML with CSS.
Learn how to use the correct elements depending on content and you will already be better than 90% of developers and massively increase your job prospects when the time comes!
So swap the table at the top for some
<div>s and perhaps wrap them in a
Swap the table at the bottom for a
I will leave you to research those but if you need any help understanding any of them just let me know.
Along the same lines you contact form is not accessible either.
In the following example I have corrected a few things:-
for="IDofElement"to your labels and a corresponding ID to the input. This links them together which means people who use a screen reader here what the input is called (otherwise it will just read "input" which is not very useful!) and has the added bonus of making it so you can click the label to focus the corresponding input.
<input type="submit">to a
<button>. That is the correct way to do it in modern HTML.
type="email"to the email field as this offers some basic validation (to check someone entered an email in the correct format).
Navigation is really important on a site, every page should ideally have your main menu at the top.
Navigation should be something like:-
So we use a
<header>element to represent introductory content.
We then put a
<nav>element within the
<header>as that signifies navigation. This helps people who use a screen reader know that they have reached the site navigation.
We then use an
<li>to add each of the hyperlinks. Yet again this is really useful for people who use a screen reader as they will be told "item 1 of 3" when they enter the navigation so they know how many menu items there are.
One thing I didn't include was handling "current page" - there are numerous ways to do that but I didn't want to completely over load you!
Add navigation to each of the pages so that when someone visits your "hobbies" page they can still get to the contact page and the home page easily.
I hope I didn't overload you!
That is probably a couple of weeks worth of things to learn in one comment so don't be overwhelmed.
Just tackle them one at a time and as I said, if you need help, just shout!
Thank you for pointing it out I will surely work on these