Objective:

In this assignment, you will enhance your personal portfolio website by adding complex table structures, accessibility features using ARIA, advanced CSS styling and animations, and interactive JavaScript elements. This will give you experience with new CSS features, improve website accessibility, and introduce core JavaScript concepts.

Assignment Details:

Table Structure $(15$ points$)$:

Add a new section called "Experience" or "Education" with a table to display details such as job roles, dates, responsibilities, or academic history.

Use appropriate table elements $(,,,,101010$

Objective:

In this assignment, you will enhance your personal portfolio website by adding complex table structures, accessibility features using ARIA, advanced CSS styling and animations, and interactive JavaScript elements. This will give you experience with new CSS features, improve website accessibility, and introduce core JavaScript concepts.

Assignment Details:

Table Structure $(15$ points$)$:

Add a new section called "Experience" or "Education" with a table to display details such as job roles, dates, responsibilities, or academic history.

Use appropriate table elements $(,,,,101010$

CSS Transforms and Transitions $(15$ points$)$:

Add transformations $($e$.$g$.,$ scale, rotate$)$ and transitions to interactive elements, such as buttons or images, to create smooth animations.

Create at least two hover effects using transform and transition to enhance the user experience.

New CSS Features $(10$ points$)$:

Experiment with at least one new CSS feature $($e$.$g$.,$ CSS Variables, CSS Grid Level $2,$ CSS Subgrid, aspect$-$ratio property$).$

Apply the chosen feature to enhance your design and make it more visually appealing.

HTML & CSS Experimental Features $(10$ points$)$:

Use experimental HTML and CSS features supported by modern browsers $($e$.$g$.,$ custom properties, CSS backdrop$-$filter, clamp, min, max$).$

Ensure that these features degrade gracefully in unsupported browsers.

JavaScript: Core Concepts $(20$ points$)$:

Add basic JavaScript functionality to your website:

Implement a dynamic welcome message that changes based on the time of day $($e$.$g$.,$ "Good Morning" or "Good Evening"$).$

Add form validation for the Contact form to check if all required fields are completed before submission.

Include a simple interactive feature, such as a "Back to Top" button or a pop$-$up modal with additional information.

CSS Transforms and Transitions $(15$ points$)$:

Add transformations $($e$.$g$.,$ scale, rotate$)$ and transitions to interactive elements, such as buttons or images, to create smooth animations.

Create at least two hover effects using transform and transition to enhance the user experience.

New CSS Features $(10$ points$)$:

Experiment with at least one new CSS feature $($e$.$g$.,$ CSS Variables, CSS Grid Level $2,$ CSS Subgrid, aspect$-$ratio property$).$

Apply the chosen feature to enhance your design and make it more visually appealing.

HTML & CSS Experimental Features $(10$ points$)$:

Use experimental HTML and CSS features supported by modern browsers $($e$.$g$.,$ custom properties, CSS backdrop$-$filter, clamp, min, max$).$

Ensure that these features degrade gracefully in unsupported browsers.

JavaScript: Core Concepts $(20$ points$)$:

Add basic JavaScript functionality to your website:

Implement a dynamic welcome message that changes based on the time of day $($e$.$g$.,$ "Good Morning" or "Good Evening"$).$

Add form validation for the Contact form to check if all required fields are completed before submission.

Include a simple interactive feature, such as a "Back to Top" button or a pop$-$up modal with additional information.