2

Assignment

COMP1234 - INTRODUCTION TO WEB DEVELOPMENT

Create a Retail Landing Page - Individual Assignment
Weight: 12.5% of Final Grade

Date: Wednesday, March 13 2024 (11:59 PM)

Contents
Introduction .......................................................................................... 3
Outcomes: ............................................................................................ 3
Task ..................................................................................................... 4
Example: ........................................................................................................... 7
Reflection .......................................................................................................... 8
Rubrics: ................................................................................................ 9
Uploading Your Profile Changes ........................................................ 10
My.GBLearn submission ....................................................................... 10
Introduction

In this assignment, you will create a landing page for a fictional retailer using HTML and CSS. You will use a
variety of HTML and CSS elements to structure the page, style the content, and create visual interest. By the end
of the assignment, you will have gained experience with semantic elements, anchor tags, lists, image tags, relative
paths, colors, combinator selectors, box model, margins, padding, borders, background image, and background
gradients.

Outcomes:

This assignment will demonstrate your ability to create a valid HTML5 referencing internal and external
resources.

1. How to use semantic HTML elements to structure a web page

2. How to style web page elements using CSS
3. How to use anchor tags to create links to external pages
4. How to use lists to display information on a web page
5. How to use image tags to display images on a web page
6. How to use relative paths to link to local images and pages
7. How to use colors to style web page elements
8. How to use combinator selectors to target specific elements
9. How to use the box model to layout web page elements
10. How to use margins, padding, and borders to adjust the spacing and appearance of web page
elements
11. How to use a background image to add visual interest to a web page
12. How to use a background gradient to add depth and dimension to a web page

Page 3 of 10
Task
You will need to create a single page called "index.html" within the
comp1234/assignments/assignment02/ folder (you may use your template.html file). On this page, you will
need to add four sections (Welcome, Reviews, Products, and Purchase) use bookmarks to traverse the sections
on the page. (The retailer you create must be fictitious, you can not use real companies for the
assignment.)
The webpage must be created from scratch, no copy and paste from other code . Make sure you
understand what the code is doing, if superfluous code (extra non-functional code) is found a penalty will
be applied. You are NOT allowed to use any external frameworks or web page builders to create your web
pages. (bootstrap etc.…) You can not use Flex Box or Grid to position elements , use float, position, margin
and any other methods learned in class.

Head Section:

1. Set up a basic HTML template.

2. Create a meta tag for description, keywords, and author.
3. Create a title tag for the webpage.
4. Link a stylesheet to the webpage.

Body Section:

Header:

1. Use the correct semantic tag.

2. Create an image tag that displays the retail logo. Use positioning to place the logo on the left-hand side.
(Create or find a fictitious logo for your retail company. Do not use a real company.)
3. Create a heading tag that says, "My Retailer". i.e., where My Retailer is the name of your fictitious retail
store.
4. Use the correct semantic tag.
5. Insert the sections in the semantic tag in the order of "welcome", "reviews", "product", and
“purchase”. Do not use any div tags.

Navigation:

1. You must use an unordered list for the menu and the navigation semantic element.

2. Create a horizontal menu of 6 list items with hyperlinks to different sections on the webpage and
external pages.
3. You must have a hyperlink to your reflection page and your CSS file in the menu.
4. The menu must stay at the top of the screen as you scroll down the page.

Welcome:

1. Create a list item 1 in the navigation with a hyperlink to Welcome.

2. Set up a section with the ID "welcome".
3. Add a heading element with the text "Welcome to the Retailer" inside the section. ". i.e., where
Retailer is the name of your fictitious retail store.

Page 4 of 10
 4. Add a paragraph element with text about The Retailer's focus on innovation and products.
5. Add an image of the Product.
6. Use Float so the image is on the left and the paragraph appears to the right of the image.
7. Add another heading element with the text "Why Choose this Product?" inside the section.
8. Add an unordered list with 4 list items that list various reasons to choose The Product. Use CSS to
make every other line’s background color different (Zebra stripe).
9. Add another heading element with the text "Purchase the Product" inside the section.
10. Add a paragraph element with text "Ready to join the product community? Purchase today!" inside
the section.
11. Add a link to apply with the text "Purchase Now" and use CSS to make it a button. (Link is to the
Purchase section)

Reviews:

1. Create a list item 2 in the navigation bar with a hyperlink to Reviews.

2. Create a section tag with an ID of "reviews".
3. Create a heading tag for the section titled "Reviews".
4. Create a paragraph tag that describes the product experience and what is offered.
5. Create another heading tag for the section titled "You are going to love this Product". i.e., where
Product is the name of your fictitious product.
6. Create an unordered list of 8 items that describe the product experience from different customers.
Use CSS to make every other line’s background color different (Zebra stripe).

Product:

1. Create a list item 3 in the navigation bar with a hyperlink to the Product.
2. Create a section with id "product".
3. Add a heading with text "Product”. ". i.e., where Product is the name of your fictitious product.
4. Add a paragraph describing the retailer's view on the importance of a well-rounded product
experience, and what the product is designed to provide.
5. Add a figure element with two images of the product.
12. Add a caption with some text e.g. "The Product". ". i.e., where Product is the name of your
fictitious product.
6. Images must be centered on the screen beside each other horizontally.
7. Add a paragraph that describes the product, along with information about the products uses.

Purchase:

1. Create a list item 4 in the navigation bar with a hyperlink to Purchase.

2. Create a section with id "purchase".
3. Add a heading "Purchase the Product" to the section. i.e., where Product is the name of your
fictitious product.
4. Add a paragraph describing the retailer's commitment to a straightforward and stress-free purchase
and return process. (Tell the customer how easy it is to purchase the product and if they do
not like the product they can return it at no charge and with hassle free help.)
5. Add a link to purchase with the text "Purchase Now" and use CSS to make it a button. (Link is to
the Top of the HTML page )

Page 5 of 10
Semantic footer:

1. Create a footer tag.

2. Create a paragraph tag that includes the copyright information.
3. Include any citing for the web page.

CSS Design Guidelines

Your Assignment Solution requires 1 external CSS. (Do not use embedded or in-line CSS.)
You must use the following three items:
1. linear gradient
2. background-image
3. hover(to change the color of a link when the mouse is used to select anchors in the menu)
The contents of the CSS must contain rule definitions for at least 12 of the following properties:
1. box shadow
2. font-family
3. font-size
4. text shadow
5. background-color
6. border
7. width
8. height
9. text-decoration
10. text-align
11. margin
12. padding
13. list-style-type
14. color
15. position
16. float

You must use at least one selector from each of the following selector categories:
• Simple selectors (select elements based on name, id, class)
• Combinator selectors (select elements based on a specific relationship between them)
• Pseudo-class selectors (select elements based on a certain state)
• Pseudo-elements selectors (select and style a part of an element)
• Attribute selectors (select elements based on an attribute or attribute value)

Page 6 of 10
Example (Whole page – is one web page split into sections):

Page 7 of 10
Reflection

In addition to the tasks outlined in the previous description, you will also need to create a file called
"assignment2-reflection.html" in the comp1234/assignments/assignment02 directory.

In your own words, write about what you learned while completing this assignment. Some questions you may
want to consider answering include:

 What did you find most challenging about this assignment?

 What did you find most interesting or enjoyable about this assignment?
 What would you do differently if you were to do this assignment again?
 What did you learn from this assignment that you think will be useful in the future?
 How confident do you feel in your ability to create a basic web page using HTML and CSS?

This reflection should be at least 250 words and written in proper English.

Page 8 of 10
Rubrics:

Your assignment will be evaluated based on the above-mentioned points and the following points.

# Description Point
1 Head section done correctly (Title, meta, links) 4
2 Semantic HTML elements used 5
3 Anchor tags used to link to on page bookmarks 5
4 Links to CSS and reflection added to menu 5
6 Lists used to display information about the retailer 5
5 Img tags used to display images of the product centered on page 5
6 Relative paths used to link to local images and pages 4
7 Float used correctly 4
8 CSS selectors used to target specific elements (pseudo, simple, combinator, 5
attribute, etc.…)
9 12 essential CSS rules applied 12
10 Margins, padding, and borders used to adjust spacing and appearance 3
11 Background image used to add visual interest 5
12 Background gradient used to add depth and dimension 5
13 Reflection questions answered thoughtfully - assignment02-reflection.html 5
(250 words)
14 Overall presentation and professionalism 5
15 Presence of validation script at the bottom of the page. 5
16 No Misspelled file or directory names 3
17 Valid HTML5 (no error, no warning) 15
18 For every non-functional (superfluous) piece of code -1
19 Use of Flex Box or Grid -15
20 For each use of div -1
Total 100

The webpage must be created from scratch, no copy and paste from other code . Make sure you
understand what the code is doing, if superfluous code (extra non-functional code) is found a
penalty will be applied.

You will receive a zero mark if one of the following occurs.

# Description
1 Placing your assignment files and directory in the wrong path.
2 Forgot to upload your code to your GBLearn account.
3 Forgot to submit your assignment via my.gblearn.com
4 Using any external frameworks or builders to create your webpages.(bootstrap etc…)
Late assignment 10% per day to a maximum of 5 days, including weekends.

Validation Script
<script src=https://my.gblearn.com/js/loadscript.js></script>

Page 9 of 10
Uploading Your Profile Changes
This next step outlines the steps you must perform to upload your changes back to the GBlearn server.

1. Make sure to open FileZilla and connect to your GBLearn account, using your GBLearn username/password
credentials.
2. Upload the following:

a. index.html to the public_html/comp1234/assignments/assignment02/ folder

b. assignment2-refelection.html to the public_html/comp1234/assignments/assignment02/ folder

3. Make sure you can access the assignment files and folder on your GBLearn via browser.

https://username.gblearn.com

My.GBLearn submission

4. Login to https://my.gblearn.com/ using your GBLearn username and password.

5. If you have not selected your lab instructor - please go to your profile and select your lab instructor before the
submission.
6. Select COMP1234 and assignment 2 to submit your assignment on my.gblearn.com (no file upload is required).

Congratulations you have completed Assignment 2!

Page 10 of 10