Scribd
Upload
12 views4 pages

Task 2 Web Developement

The document outlines the task of creating a responsive personal portfolio webpage using HTML and CSS, focusing on practicing responsive design and layout techniques. It includes specific sections to be developed such as Header, About, Skills, Projects, Contact, and Footer, along with detailed styling requirements. The task is expected to be completed within 3 days and includes optional bonus challenges for additional features.

Uploaded by

prtabi2002
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
12 views4 pages

Task 2 Web Developement

The document outlines the task of creating a responsive personal portfolio webpage using HTML and CSS, focusing on practicing responsive design and layout techniques. It includes specific sections to be developed such as Header, About, Skills, Projects, Contact, and Footer, along with detailed styling requirements. The task is expected to be completed within 3 days and includes optional bonus challenges for additional features.

Uploaded by

prtabi2002
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/ 4

DATAWIND DIGITAL SERVICES

INTERN ASSIGN WORK | TASK 2

Task 2: Build a Responsive "Personal Portfolio" Page

Objective

Create a personal portfolio webpage using HTML and CSS. This task will help you practice
responsive design, layouts, and working with flexbox/grid systems.

Reference Document for Assigned work : LINK 1


Reference Document for Assigned work : LINK 2
Reference Document for Assigned work : LINK 3

Task Details

1. HTML Structure

Your webpage should have the following sections:

Header

❖​ Add a header with your name as the title.


❖​ Include a navigation bar with links to the following sections of the page:
➢​ About
➢​ Skills
➢​ Projects
➢​ Contact

About Section

❖​ Create a section where you introduce yourself with a brief bio.


➢​ Include a professional photo of yourself (or a placeholder image).
➢​ Add details such as your profession, experience, and any personal interests.
Skills Section

❖​ Create a list of your top skills (at least 5).


➢​ Use a <ul> (unordered list) to display the skills.
➢​ Add progress bars (using a <div>) next to each skill to represent your proficiency
level (e.g., 80% skill in HTML, 70% in CSS).

Example of progress bar:​


<div class="skill-bar" style="width: 80%"></div>

Projects Section

❖​ Create a section that showcases your projects.


➢​ For each project, include:
■​ A project title.
■​ A short description.
■​ A link to the project (if applicable).
■​ Use images or screenshots to represent the projects.

Contact Section

❖​ Include a simple contact form with the following fields:


➢​ Name (Text input)
➢​ Email (Email input)
➢​ Message (Textarea input)
➢​ Submit button

Footer

❖​ Add a footer section with:


➢​ Your name or the text "Created by [Your Name]".
➢​ Optional: Links to your social media profiles (LinkedIn, GitHub, etc.).

2. CSS Styling

General Page Styling

●​ Set the background color to something subtle (light grey or white).


●​ Use a clean, readable font family (e.g., Google Font "Roboto").
●​ Add padding and margins around sections to improve layout.
Header Styling

●​ Make the header sticky at the top of the page with a background color that stands out.
●​ Use flexbox or grid to align the navigation items horizontally.

Sections Styling

●​ Use flexbox or grid to layout the sections (e.g., side-by-side layout for skills, responsive
grid for projects).
●​ Add spacing between sections to ensure they don’t feel cramped.
●​ Use media queries to ensure the layout is responsive on different screen sizes
(adjustments for mobile, tablet, and desktop).

Skills Section

●​ Style the skill bars with different colors depending on proficiency (e.g., green for high,
orange for medium).
●​ Ensure the bars have rounded corners for a more modern look.

Project Images

●​ Add a hover effect on project images (e.g., a slight zoom effect or a shadow effect when
hovered).

Example:​
.project-image:hover {
transform: scale(1.05);
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

Contact Form Styling

●​ Style the form fields to be full-width with some padding.


●​ Add a hover effect to the submit button (e.g., change color when hovered).

3. Bonus Challenge (Optional)

●​ Add animations when sections appear on scroll (using CSS @keyframes or


IntersectionObserver in JavaScript).
●​ Implement a "back to top" button that appears when the user scrolls down, which scrolls
the page back to the top when clicked.
●​ Create a smooth scrolling effect when navigating between sections using anchor links.
Expected Deliverables

❖​ A fully functional personal portfolio webpage.


❖​ Two files:
➢​ index.html: Contains the HTML structure.
➢​ style.css: Contains the CSS for styling.

Duration

●​ Complete this task in 3 days.

Good luck! Feel free to ask for help if you have any questions or need
clarification.

You might also like