2 Assignment COMP1223 Web Development Fundamentals Individual Assignment Due Date: Friday, March 18, 2022 (11:59 PM) Validate your HTML – An invalid HTML document will incur a 50% penalty. An HTML document without a validation script will not be marked and is worth zero. If your file is not in the correct folder, it will not be marked and is worth zero. Introduction - This assignment will demonstrate your ability to create a single-page website (multiple page site will not be accepted and are worth zero marks) using HTML5 and CSS3. This assignment will play multiple vital roles inside and outside of school, such as: 1. 2. 3. 4. 5. 6. 7. 8. Help you put together a product landing page Help you familiarize or improve your HTML5 and CSS skills. Learn how to use effective design in creating web pages. Gain experience using HTML5 semantic elements. Demonstrate your knowledge in HTML5 semantic tags, lists, images, links and text. Demonstrate your understanding of CSS. Utilize external fonts and icons. Follow instructions and pay attention to detail. Goals and Outcomes We are using only HTML5 and CSS3 to create a product landing page, counting the following sections. *landing page: A landing page is a standalone web page that a person "lands" on after clicking through from an email, ad, or other digital location.(Check reference section) Tasks: 1. Header o Must contain a few social platform icons ▪ No link is necessary. (You may use Social Icons from Font Awesome) o A phone number ▪ Use CSS to change the font and colour to make the phone number noticeable. ▪ Make the phone number a callable link (tel:) ▪ Review rubric for detailed requirements. 2. Navigation containing o A logo o And a few links to imaginary pages on your website (example: contact us, about us) o o o You are not required to create the imaginary pages. Include CSS rule to show the active menu option (related link to the current page). Review rubric for detailed requirements. Page 2 of 9 The picture contains dummy data - the menu options are only for samples. 3. A hero section (check referces) with two columns to show a product picture and short description plus a “call to action” link (Example: https://www.justinmind.com/blog/inspiring-hero-image-websites/) o Must use google or adobe font for the description title. o Must have a call-to-action link – (link should take the user to product feature section on the same page. o Review rubric for detailed requirements. 4. A product features section with four columns where each column lists a product feature. You must include o An icon related to the product feature (font awesome) o A title o A short description o Review rubric for detailed requirements. Page 3 of 9 5. A section contains three customer testimonials (reviews) -- A testimonial is an endorsement, recommendation, or statement by someone who is sharing a positive experience with a business or product. o Each testimonial must be wrapped in a ▪ Rounded box with a slight shadow. ▪ Must have the same height and width ▪ Must contain the customer photos (https://generated.photos/) ▪ Customer name ▪ Customer job ▪ customer quote ▪ Must use different google or adobe font section title (“what our customer says”) and customer names. ▪ Review rubric for detailed requirements. Page 4 of 9 Rubric: Section Header Marks 10 Navigation 10 Product (hero) 18 Product features 20 Customer testimonials 27 SEO 2 File names and location 9 CSS & Favicon 4 selector types (must use all selector types) Up to -5 deduuction per missing selector Breakdown (NO Grid allowed) Social platform icons mini three icons. Phone number o Colour & font o Call-able link (NO Grid allowed) logo menu items mini three menu items. active page CSS (NO Grid allowed) product title product picture product description product and description two columns (NO Grid allowed) google/adobe font call to action link design (colour, font, etc.) (NO Grid allowed) four columns (NO Grid allowed) font awesome feature title feature description google/adobe font (NO Grid allowed) three customer testimonials (NO Grid allowed) round boxes. same width and height customer round photo (CSS) customer name customer job customer quote google/adobe font section title google/adobe font customer name title meta description & keywords comp1223/assignments/assignment2/index.html comp1223/assignments/assignment2/assets/css/style.css comp1223/assignments/assignment2/assets/img/ - external CSS internal CSS inline CSS assignment 2 favicon * (universal selector) .class #id element element#id element.class element,element element element element>element element+element element1~element2 Page 5 of 9 - Any extra CSS will incur a -1 penelty for each superfluous decleration. You may use Float or Flex Box for the columns format. No CSS Grid may be used to format the web page or content. Use of pages or code from the internet will result in zero mark. Extra Design Criteria You are expected to use the following selector types. (Missing the implmention any of th individual selector may result in -5 marks deduction per missing selector). • • • • • • • • • • • * (universal selector) .class #id element element#id element.class element,element element element element>element element+element element1~element2 Submission Guidelines - This must be a NEW site you built for the 2022 course (cannot use a site you made a year ago) All the information must fit together. MUST BE VALID HTML5 (no other version accepted) All file names must be in lowercase, and only (a-z,0-9_.) can be used for the file names (universal standard), NO SPACE in the file name. Your webpage should be easy to read Your design should be welcoming for visitors (easy to read and navigate) Page represents a valid HTML5 page CSS must be utilized to format your page. External, internal and inline CSS must be used. Page 6 of 9 - Add assignment two favicon. Absolute URLs are not permitted unless you are linking to an external site Your HTML and CSS must be validated. To do that, you must add the following line of code to each of your HTML pages, right before the If your assignment file is not in the correct folder, it will not be marked and is worth zero. 1. Upload your file to your GBLearn (hosting) account: a. Upload directory public_html/comp1223/assignments/assignment2/ b. Assignment two file name must be index.html c. Validate your page. Make sure your page contains valid HTML5 code. d. Validate your page. Make sure your page contains valid CSS code. 2. My.GBLearn submission a. Login to https://my.gblearn.com/ using your GBLearn username and password. b. If you have not selected your lab instructor - please go to profile and select your lab instructor before submitting. (Only lab instructor. Please remove your lecture instructor) c. Follow the steps listed in the following screenshot to submit your assignment on my.gblearn.com (no file upload is required). References: - What is landing page: https://mailchimp.com/marketing-glossary/landing-pages/) Use Lorem Ipsum for dummy text: https://www.lipsum.com/ Font Awesome Free Icons: https://fontawesome.com/v5.15/icons?d=gallery&p=2&m=free Page 7 of 9 - Free product pictures: https://unsplash.com/s/photos/product Awesome Examples of Website Testimonials Done Right https://www.vandelaydesign.com/websitetestimonial-examples/ free model photos: https://generated.photos/ Hero section: https://www.awebco.com/blog/hero-section/ How to Add Telephone Links with HTML: https://www.w3docs.com/snippets/html/how-to-addtelephone-links-with-html.html - - Validate your HTML – An invalid HTML document will incur a 50% penalty. An HTML document without a validation script will not be marked and is worth zero. - If your file is not in the correct folder, it will not be marked and is worth zero. Sample picture of a finished web page. Page 8 of 9 Validate your HTML – An invalid HTML document will incur a 50% penalty. An HTML document without a validation script will not be marked and is worth zero. If your file is not in the correct folder, it will not be marked and is worth zero. Page 9 of 9 
Purchase answer to see full attachment