Scribd Logo
Upload

Welcome to Scribd!

  • Portfolio Website Creation

    Uploaded by

    Nilesh Mhaske
    39 views10 pages
    The document outlines requirements for creating a portfolio website, including: - The main page should have navigation to other pages like "About", "Experience", "Achievements", and "Contact". - Other pages should include back buttons to the main page. - Pages can include images, videos, lists, tables, and forms. - The website should be styled attractively using CSS or basic formatting and made in a unique way.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document outlines requirements for creating a portfolio website, including: - The main page should have navigation to other pages like "About", "Experience", "Achievements", and "Contact". - Other pages should include back buttons to the main page. - Pages can include images, videos, lists, tables, and forms. - The website should be styled attractively using CSS or basic formatting and made in a unique way.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    39 views10 pages

    Portfolio Website Creation

    Uploaded by

    Nilesh Mhaske
    The document outlines requirements for creating a portfolio website, including: - The main page should have navigation to other pages like "About", "Experience", "Achievements", and "Contact". - Other pages should include back buttons to the main page. - Pages can include images, videos, lists, tables, and forms. - The website should be styled attractively using CSS or basic formatting and made in a unique way.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 10

    Portfolio website creation

    Create a Portfolio website, with following requirements:


    ● The website should have a main/home page that has a navigation list to other pages.
    ● Other other pages should have a back button to navigate to the main/home page.
    ● The navigation titles can be (this has to be in separate pages):
    ○ About Me, Experience, Achievement, Contact Me - For Portfolio Website.
    ● You can include:
    ○ Links for navigating from one page to another page
    ○ Images/Videos
    ○ List in Experience page
    ○ Table in Achievements comments page
    ○ Form in Contact page
    ● Make your website more attractive as possible, yes you can style them after learning
    CSS but you can add little styles by doing some research. Create your portfolio website
    in a unique way.

    Outline:
    You can customize the website, add your creativity and make the website more attractive.

    Outline to understand the requirement - Portfolio website

    1
    Sample Outputs:

    Main/Home page - index.html


    ● This is the sample page, you can add your creativity and make the page more attractive.
    ● You can add images, more text content with different text colors and backgrounds colors.

    About Me page - about.html

    ● This is the sample page, you can add your creativity and make the page more attractive.
    ● You can add images, more text content with different text colors and backgrounds colors.
    ● Add your image, name and your professional details in the About me page.

    2
    Education and Experience - education.html

    ● This is the sample page, you can add your creativity and make the page more attractive.
    ● Add your Educational details. You can add your school and college images to make this
    page more attractive.

    Achievements and Awards page - achievements.html

    ● This is the sample page, you can add your creativity and make the page more attractive.
    ● Add your achievements in the table, try different text color to the contents.

    3
    Contact Me page - contact.html

    ● This is the sample page, you can add your creativity and make the page more attractive.
    ● You can add any other input fields if required. You can add different text colors and
    background colors to the form.

    4
    Process for Submission
    Please upload your assignment files via this Google Form before the deadline (3rd February,
    2022 11:59 pm).

    Steps to submit the assignment:


    1. Open the Google Form.
    2. Enter your email id, name, assignment name.
    3. And upload the assignment file by clicking the Add file button.

    4. You can upload the file by clicking Select file from your device or by dragging the file
    and dropping it in the window opened.

    5. Select your assignment file and click the Open button.

    5
    6. After selecting the file click on the Upload button.

    7. Once the file is uploaded, click on the Submit button.

    6
    Hint

    How to navigate from one page to another?


    The following step will help to recall links and lists which will help you in creating your own
    website.

    Steps:
    ● Open VS code.
    ● Select New File in the opened folder…
    ● Save the file in the appropriate folder/ create the folder and save the file with extension
    as index.html
    ● Add links as a list in the index. html file.

    <!DOCTYPE html>
    <html>
    <head>
    <title>Website</title>
    </head>
    <body>
    <nav>
    <ul>
    <!-- link one that redirects to About page-->
    <li> <a href="">About</a> </li>
    <!-- link two that redirects to Services page-->
    <li> <a href=""> Services </a> </li>
    <!-- link three that redirects to Menu page-->
    <li> <a href=""> Menu </a> </li>
    <!-- link four that redirects to contact page-->
    <li> <a href=""> Contact Us </a> </li>
    </ul>
    </nav>
    </body>
    </html>

    7
    ● Add separate files for about(about.html), services(services.html), menu(menu.html), and
    contact(contact.html) in the same folder where the index.html file is located.

    ● And add some identification text in all newly added files. Example:
    ○ <p> About Us </p> in about.html page.

    ○ <p> Services provided </p> in the service.html page.

    ○ <p> Our Menu </p> in the menu.html page.

    8
    ○ <p> Contact us </p> in the contact.html page.

    ● Add the links of the file in the respective href attribute of the <a> tag in the index.html
    page.

    <!DOCTYPE html>
    <html>
    <head>
    <title>Website</title>
    </head>
    <body>
    <nav>
    <ul>
    <!-- link one that redirects to About page-->
    <li> <a href="about.html">About</a> </li>
    <!-- link two that redirects to Services page-->
    <li> <a href="service.html"> Services </a> </li>
    <!-- link three that redirects to Menu page-->
    <li> <a href="menu.html"> Menu </a> </li>
    <!-- link four that redirects to contact page-->
    <li> <a href="contact.html"> Contact Us </a>
    </li>
    </ul>
    </nav>
    </body>
    </html>

    ● View the file in the browser, by right click on the file name in the left pane.

    9
    ● View of file in browser.

    When clicked on the links it will navigate to the respective pages. You can differentiate them with help of the text added in
    the pages.

    10

    You might also like