Scribd
Upload
12 views

HTML, CSS, JS - Assessment 1

Dd bddddndbdb

Uploaded by

Hiten Vats
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
12 views

HTML, CSS, JS - Assessment 1

Dd bddddndbdb

Uploaded by

Hiten Vats
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

HTML, CSS, JS - Assessment 1

Instructions

1. You will be given 4 hours to complete the assessment.


2. Follow proper coding standards while indenting code, naming variables and functions. The
code styling across the submissions should be consistent

3. Try your best to replicate the exact layout an colours as mentioned in the assessment. You can
use colorpicker and the browser Inspect tool to get colors, image/icon links etc.

4. Ensure the code is well-structured, organized, and follows best practices for HTML, CSS, and
JavaScript.

Problem 1

Build a personal portfolio website with a focus on the following:

1. Structure and Layout (HTML + CSS)

Create a single-page personal portfolio website with the following sections:


1. Header:

Contains a navigation menu (Home, About, Portfolio, Contact)

2. About:

A section with a brief bio, a profile image, and some personal details.

3. Portfolio:

A grid of at least 6 projects (with images, titles, and descriptions).

4. Contact Form:

A form with fields for name, email, and message.

2. Styling (CSS)

Responsive design: Ensure the website works on both desktop and mobile.

Hover effects: Add hover animations to buttons, links, and portfolio items.

3. Interactivity (JavaScript)

Portfolio filtering: Add functionality to filter portfolio projects by category (e.g., Web
Development, Graphic Design).

Form validation: Validate the contact form fields (name and email) before submission.

Dark Mode: Add a toggle button to switch between Light and Dark mode. This button should
flip the background color and the text color to keep it simple.

You might also like