Discussion on: Web Development: Build your Portfolio Website Design using HTML

View post

A few things to be aware of:

Tables

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 <section> element.

Swap the table at the bottom for a dl or similar.

I will leave you to research those but if you need any help understanding any of them just let me know.

Forms

Along the same lines you contact form is not accessible either.

In the following example I have corrected a few things:-

I added 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.
I changed your <input type="submit"> to a <button>. That is the correct way to do it in modern HTML.
I added type="email" to the email field as this offers some basic validation (to check someone entered an email in the correct format).

<form class="" action="mailto:xxxxDONT INCLUDE YOUR EMAIL IN EXAMPLES TO AVOID SPAMMERSxxx" method="post" enctype="text/plain">
    <label for="your-name">Your Name</label>
    <input type="text" name="Your Name" value="" id="your-name"><br />
    <label for="your-email">Your email</label>
    <input type="email" name="Your Email" value="" type="email" id="your-email"><br />
    <label for="your-message">Your Message</label><br />
    <textarea name="Your Message" rows="10" columns="30" id="your-message"></textarea><br />
   <button type="submit">Submit</button>
</form>

Navigation

Navigation is really important on a site, every page should ideally have your main menu at the top.

Navigation should be something like:-

<header>
<nav>
    <ul>
        <li><a href="https://muthuannamalai12.github.io/CV/">Home</a></li>
        <li><a href="https://muthuannamalai12.github.io/CV/hobbies.html">My Hobbies</a></li>
        <li><a href="https://muthuannamalai12.github.io/CV/contact.html">Contact Me</a></li>
    </ul>
</nav>
</header>

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 <ul> and <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.