CIT Teaching & Learning Unit

Develop a client-side Web-based E-Commerce application

Part 1 Instructions

• Using Notepad++, open the file called index.html
• Carry out the following changes to the html file.
• Add your name Student ID to the title tag.
• Set up the following sections in the body of your html document.
  • Header
  • Navigation
  • Article
  • Footer
• Your aim is to achieve the basic layout shown here:
• Insert the image header.jpg into the header section of the page.
  • Add suitable alt text to image tag.
• In the article section add a heading size 1 with the following text:
  • Welcome to Rochestown Park Hotel.
• Add an unordered list into the <nav> section of the page to contain links to the following:
  • Home
  • Bookings
  • About Us
  • Links
  • Offers
• Add a paragraph with the following text to the article section:

The Rochestown Park Hotel has long been recognised as Cork’s premier city hotel. The Cork city hotel combines a wide range of luxury facilities for Corporate and Leisure Guests alike. Key features include 4 star luxury hotel accommodation - 163 bedrooms and suites, 10 conference and banqueting suites catering for 2 to 700 guests, suitable for weddings and conferencing, award winning Leisure Centre, Thalasso Therapy & Beauty Centre, Restaurant and Bar, 8 Executive Townhouses and complimentary parking for all guests. The perfect venue, in the perfect location... the perfect experience.

• Add the following text to the footer section:
  • Rochestown Road, Douglas, Cork, Ireland.
  • Telephone: +353 21 489 0800
  • contact:rph@rph.ie
• Add a line break to each line of text contained in the footer.
• Add a mail to link to email address contained in the footer.
• Add an appropriate tag that will create a link to the css file.

Part 2 CSS - Open the css file in notepad++ and add the appropriate css statements that will perform the following changes:

• Add a background color of #330000 to the body of the webpage.
•  Format the heading text to Arial and size 25px.
• Remove the text decoration from the list items and add text color black to the links.
• Change the background color of the footer to #AC7556 and align the text to the center.
• Add a text color of #AC7556 to the email address in the footer.
• Add padding of 20px to the right of the paragraph.
• Ensure that the finished page displays correctly in your browser.

Part 3 - Saving and uploading:

• Save the finished collection of files in a single zipped folder
• Make sure that the final folder has your name and student number as the folder name in the format:  Surname_First name_Number. And that your folder has been uploaded to the correct submission point on Canvas.

Please ensure that you also copy the zip folder onto your H drive at the end of the assessment.

CONTEXT:

Create a business-related client-side website for any one of the following:

• “Italy Foods”- Online store for Italian delicatessen foods. Main use case: ordering and paying food items.
• “Town Tours” – Information and booking facility for guided tours in towns. Main use case: Booking and paying for a tour. 
• “Vintage Weddings” - Website that showcases wedding locations vintage style. Main use case: booking and paying a location and services package for a wedding.
• An online sales platform for your own business. Main use case: ordering and paying goods.

TASKS

The site must consist of at least 6 pages, the entry (or landing) page should be significantly different from the rest of the pages. Those should have a more uniform look with regards to header, footer, and navigation. The main section of one of the uniform pages should be left empty, you will fill that page after having completed keyword research in the Digital Marketing module. 

The site must be built using HTML5, Cascading Style Sheets and JavaScript. Use of frameworks like Bootstrap or W3C are not allowed. The site should include appropriate use of images, videos, tables, and forms. 

Obligatory:

• Slideshow or Image Grid (10)
• Form with validation (7)
• Feed (4)
• Interactive Map (4)
• Table (styled) (4)

This means that with the marks for the features in milestone 2 included, there are 37 marks already accounted for, so you need to pick other features from the table above that will make up for the remaining 17 marks available for technical features.

Do not use pre-designed forms from w3schools.com.

The student must demonstrate good use of sectioning tags such as <section>, <header>, <footer>, <main> and <div> using ids and classes in connection with CSS, especially for the layout.

Your code should conform to the HTML5 standard and be validated using the W3C validation service.

Your website should display correctly in Google Chrome, Mozilla Firefox, and Microsoft Edge. 

The folder containing the website should be organised using at least one subfolder for images. Non-essential items should not be in the folder (e.g., pdf files)