How to Create Website Using ChatGpt

The goal of this assignment is to create a basic portfolio website using HTML and CSS with the guidance of ChatGPT. This project will help you understand how to structure a webpage, style it using CSS, and incorporate interactive elements.


  1. Basic Structure:
    • A header with navigation links.
    • A hero section with a welcome message and a round-shaped image.
    • An about section describing yourself.
    • A projects section showcasing your work.
    • A contact section with a form for users to reach out.
    • A footer with copyright information.
  2. Styling:
    • Use CSS to style the layout and elements.
    • Include a hover effect on the round-shaped image in the hero section.
  3. Additional Features:
    • Ensure the website is responsive and looks good on various screen sizes.
    • Use meaningful and accessible HTML elements.

Step-by-Step Guide:

Step 1: Set Up the Project

Create a new folder for your project. Inside this folder, create two files: index.html and styles.css.

Step 2: Create the HTML Structure

Open index.html and add the following basic HTML structure:


Step 3: Style the Website

Open styles.css and add the following CSS code to style your website:


Step 4: Add Your Image

  • Place an image file named your-image.jpg in the same directory as your HTML and CSS files. Ensure the image is appropriately sized for a 150px by 150px display.

Step 5: Review and Test

  • Open index.html in a web browser to view your portfolio website.
  • Check that all links work and the form can be submitted.
  • Verify the image hover effect and ensure that the website is responsive.

Step 6: Submission

Submit the following files:

  • index.html
  • styles.css
  • Any images used in the project

Grading Criteria:

  • Completeness: All required sections are included.
  • Styling: Effective use of CSS for layout and design.
  • Functionality: Navigation links and form submission work correctly.
  • Responsiveness: Website adjusts well to different screen sizes.
  • Code Quality: Clean, well-organized, and commented code.


  • Use semantic HTML tags to improve accessibility.
  • Keep your CSS organized by section.
  • Test your website on different devices and screen sizes to ensure responsiveness.

Conclusion: By completing this assignment, you will gain practical experience in web development using HTML and CSS, enhance your understanding of responsive design, and learn how to leverage ChatGPT for coding assistance and troubleshooting.

Daffodil International University

Mohammad Nizam Uddin Imran – Business Administration

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top