Scribd Logo
Upload

Welcome to Scribd!

  • 3 views

    Task 2 Web Developement

    Uploaded by

    prtabi2002
    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Task 2 Web Developement

    Uploaded by

    prtabi2002
    3 views4 pages
    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.

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    3 views4 pages

    Task 2 Web Developement

    Uploaded by

    prtabi2002
    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    You are on page 1of 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