Work | Web Design with HTML-CPG103

Web Design with HTML-CPG103

Posted on Wednesday, May 31, 2017

Dear students/juniors of Informatics College Pokhara, ,

            Here we you will get the guidance for this year (2017) HTML web project. Following are the few of the projects done by the past year (2016) students. There are two parts: Html Code and Documentation. Review them and get the idea for initiating your project. Start and complete ASAP. It is for your own benefit.

  1. Niraj Pun Magar
    1. Documentation:  "Documentation-NirajPunMagar"
    2. Code: "Code-NirajPunMagar"
  2. Sagar Thapa
    1. Documentation: "Documentation-SagarThapa"
    2. Code: "Code-SagarThapa"
  3. Raju Nepali
    1. Documentation: "Documentation-RajuNepali"
    2. Code: "Code-RajuNepali"
  4. Mamta Gurung
    1. Documentation: "Documentation-MamtaGurung"
    2. Code: "Code-MamtaGurung"

Note: They have used <table> element to design the layout. But in our case, use CSS for designing layout.

Following are few of the project ideas  that you can build on:

  • Institution-School, College, Kindergarden, Language institute,
  • Restaurant, Hotel & Resort
  • Movie Theatre (e.g. Qfx)
  • Ecommerce (Selling & Buying online)
  • Zoo
  • Aquarium
  • Universal Studios
  • JobSite and
  • Any available company in the market



These are the guidelines provided by the college. Your project work needs to be in congruence with it in order to achieve a good grade.

  1. Project guidelines: "Project Guidelines"

Follow these requirements as well:

  1. The website should include at least 7 web pages i.e. 7 html files.
  2. Out of 7 pages, at least 2 pages must consist <form> element (i.e. functionality from Update 2).
  3. Program Readability:
    1. Comments  in code
    2. Indentation in code
  4. Use at least 30% javascript in every single page. You can use the following javascript ideas. Remember, this is not the only ideas. For more great ideas, you need to research on your own.
    1. document.write(), window.prompt(), window.alert()
    2. image slider
    3. Date object to display today’s date, time, copyright year etc.
    4. dynamically change the content of the HTML elements (via innerHTML property).
    5. Don’t forget to use validation in pages that includes forms.
    6. Use javascript to validate email address, phone number, text field length, date range and so on.
    7. You can also use javascript to validate the login account.
    8. You can use javascript for mathematical calculation as well. For example, display total cost for the products, available hotel rooms after booking etc.
  5. You also need to use objects as much as possible. So, in addition to built-in browser and javascript objects, use custom objects in your website.



You will also need to include at functionality in your web project. Here are some of the functionalities that you can include in your project:

  1. Login
  2. Signup
  3. Contact
  4. Membership
  5. Buy & Sell
  6. Feedback
  7. Product Order
  8. Booking

Don't forget to include form validation in these functionalities and display appropriate output based on their actions.


   This is all of the codes that we did in our HTML classes: "Html Class Code"

Helpful link:

  1.    "Learning the basics of creating a website using HTML" available on YOUTUBE.

  2.    "Embed Audio and Video files in a HTML page" available on YOUTUBE. 

  3.    "Embed Youtube Video to HTML page" available on YOUTUBE.      

  4.    "Show more/less text with just HTML and JavaScript" available on

  5.    "Toggle (Hide/Show) an Element" available on


UPDATE 3 | Project presentation:

    Presentation details:

  • Presentation includes 10 marks out of 100.
  • Presentation must be done in roll number order.
  • Your presentation must be prepared in power point slide and it should include:
    • Introduction, Current system and Proposed system.
  • After slide show, display your web project (website) by describing its features simultaneously.
  • The maximum time for total presentation is 7 minutes.