Scribd
Upload
18 views

HTML - CSS Web Development Project

Okkkkkkkkkkkkkkkkkkk

Uploaded by

madeyeabhi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
18 views

HTML - CSS Web Development Project

Okkkkkkkkkkkkkkkkkkk

Uploaded by

madeyeabhi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

HTML - CSS Web Development Project

Creating a Portfolio Website

Develop a responsive single-page portfolio site with animated sections for skills,
services, projects, and contacts. Use semantic HTML and CSS focused on visual
design, animations, and responsiveness to showcase your personality and
offerings to visitors.

Task 1: Basic HTML Structure - 10 marks

● Create an HTML file with doctype, html, head, and body tags - 5 marks
● Include title, meta charset, viewport meta - 5 marks

Task 2: Header - 20 marks

● Semantic header tag - 5 marks


● Logo - 5 marks
● Navigation links (home, about, skills, services, contact)- 5 marks
● Static day/night toggle mode - 5 marks

Task 3: Home Section - 20 marks

● Heading and intro text - 2 marks


● Profile image (use Transition or Animation) - 8 marks
● Social icons(minimum 4 icon) - 5 marks
● Download resume button with hovering effect- 5 marks

Task 4: About Section - 10 marks

● Heading - 2 marks
● About content - 3 marks
● Profile image - 2 marks
● Read more button - 3 marks
Task 5: Skills Section - 15 marks

● Skills section heading - 5 marks


● Use Anyone either Linear Progress bar or Circular Progress indicators- 10 marks

Task 6: Certifications Section (Provide at least 3 cards) - 20 marks

● Relevant certifications heading - 2 marks


● Certification and details(in form of card) - 10 marks
● Create a button for certification & when someone clicks on the button it should
open the certificate but you can’t use event listener. - 8 marks

Task 7: Project Section (Provide at least 6-7 cards) - 20 marks

● Project section heading - 2 marks


● The project box contains 6-7 cards- 10 marks
● For interactive and responsive cards - 8 marks

Task 8: Contact Section - 10 marks

● Contact section heading - 2 marks


● Name, email, message inputs - 5 marks
● Submit button - 3 marks

Task 9: Footer - 10 marks

● Semantic footer tag - 2 marks


● Call & email buttons - 4 marks
● Hover effects on buttons - 4 marks

Task 10: CSS Styling - 55 marks

● Header and footer styling - 5 marks


● For creative content - 5 marks
● For interactive buttons- 5 marks
● For interactive cards - 5 marks
● Section styling - 5 marks
● Animations and transitions - 10 marks
● For Responsive design, you have to use media query and your website should be
responsive for the following devices: - 20 marks
○ For desktop/laptop
○ For iPad Mini
○ For Samsung Galaxy S8+

Task 12: Documentation - 10 marks

● Organized file structure - 5 marks


● Creativity and Presentation - 5 marks

Submission Guidelines:
● Submit a zip file containing all HTML files and any associated resources
(images).
● Ensure your HTML code is well-structured, and use comments to explain
complex sections.

Notes:
● Use semantic HTML tags for better accessibility.
● Test your forms to ensure they work as expected.

Evaluation Criteria:
Marks are assigned after each task.

Sample Portfolio:-

Warning: Only use these screenshots as a reference. Be original in your design to


showcase your creativity. If you copy the exact design, you'll lose marks
Static day/night toggle

For Navbar and Home section:-

Social icon
For About section:-

For Skills section:-


For certification/Services section:-

Card

For Project section:-


For Contact section:-

For the Footer section:-

Footer
Sample Portfolio Video Link:-

If you would like more details and an overview of the sample portfolio video, please refer to the
provided link:

https://www.loom.com/share/dbb26ae4ed734af7b39f7fb173bd2a25

Copy the highlighted link and open it in a new Chrome tab.

How to ZIP a PDF file:


● Put all of the files of your project you want to compress (or just one) into a new folder.
● Right click on that folder.

● Select the “Compress to ZIP file” option and then click “Compressed (Zipped) folder.”
● A new .ZIP file will be created that contains your files.

You might also like