Creating a Web Page for New Year Central WebsiteIntroductionIn this assignment you will be creating a home page for New Year Central website. The assignment is broken down into ‘Pa
html / css project
Requirements:
Prog1247 – Web Foundations – Assignment 1Creating a Web Page for New Year Central WebsiteIntroductionIn this assignment you will be creating a home page for New Year Central website. The assignment is broken down into ‘Part 1’ and ‘Part 2’ (see below). You are expected to write the code in the most optimal way by using the skills and the good coding practices we discussed in the course. Included with each Part 1 and Part 2 is a screenshot showing how your page should look like when completed.The starting files for this assignment are available in the Assignment1 Source Code.zip folder on eConestoga, under Evaluations ?? Assignments ?? Assignment #1. Included in the folder are the .html and .css files to use for the home page. The assignment instructions will instruct you when to use each of these files.Start by downloading and unzipping the assignment source files to your computer. Complete the assignment by working from this set of files. Note: you are to work with the original file/folder structure ? ie. do not to move the files/folders around. NOTE: Many of these files are not part of this assignment (ie. you won’t need to use them) – which simulates real-world conditions of working on production websites. Part of this assignment is being able todetermine what files to work on and which ones to leave alone.AssessmentYou will be graded by the rubric found at the end of this document. This is an independent work assignment- you may not work with others while working on this assignment or collaborate or share your answers, code or anything else.You may use the book and/or course notesYou may use the web, for generalized web development practices research. You may not use copied code from other people, the web or any other source. How To SubmitFollow the two steps below to submit your assignment:??Step 1: Once you have completed the assignment zip the whole assignment folder and submit it to the Assignment 1 Dropbox on eConestoga (Note: do not remove any of the files/folders from the directory, even if they are not used). Name your .zip folder as yourFirstName_student#_As1??Step 2: Save a copy of your index.html and main.css files as .txt files – and submit these two .txtfiles as well to the Assignment 1 Dropbox on eConestoga.
Part 1: Create the content for the home page for the New Year Central websiteIn this first part of the assignment you will use index.html file (found in the root folder of the project) to code the HTML for the home page. Note that index.html has the basic HTML elements pre-coded in it.Once you have completed Part 1, your index.html webpage should look as per the screenshot (provided below, following the instructions).Instructions:1.Start by adding the correct HTML5 semantic elements to structure the page so that it has:??a header section ??main content section, and ??a footer section.2.Add the image and the top two lines of text to the header section on the page.??Youll find the image, named ornament-logo.png, in the images folder. Specify its width at 400px.??Youll find the text for the two lines at the top as well as for the other sections of the page in content.txt file in text folder.3.Add the copyright text to the footer section on the page.4.Add the remaining content to the main section on the page.5.Code the main heading (Welcome to …?) for the page using the appropriate heading element.6.Code the subtitles Product categories and Shipping and Returns Policy using two h2 elements.7.Use an unordered list to display the product categories (under the Product Categories section). ??Each list item will contain an image, a product category name, and a paragraph of text??Images for this section are found in the images folder. Each image is sized at 100 x 100 px??Each product category name is to be coded as a link inside an
heading??The links are to link to the following internal web pages:??ornaments.html??wreaths-and-garland.html??stockings.html??Make sure to use the proper relative path when linking to each of the pages above:- The above three pages do not exist yet. Assume that once they are created they will be located in the products folder. Find where the products folder is located in the assignment project and use the information to code the path in links’ href attributes correctly.8.Use the appropriate HTML element for the last sentence under Shipping and Returns Policy so that it appears in bold.9.Code the character entity for the copyright symbol in the footer section, and add your name.10.Add comments and proper indentation and spacing to your code.11.Not required but highly recommended: validate your index.html file: https://validator.w3.org/
Part 2: Improve the appearance of the home page by using CSSIn the 2nd part of the assignment you will continue working on the same web page, be coding CSS rules to be used by index.html, to enhance the appearance of its content. An empty stylesheet, main.css, is located in the styles folder in the project. You are expected to code the CSS styles in main.css as needed so that the web page you worked on in the 1st part of the assignment looks as shown in the screen capture (provided below the Instructions section). Remember to use the stylesheet for adding the styles, and leave HTML code clean of CSS.Instructions:Link to main.css stylesheet and to normalize.css stylesheet from inside the home page. Both stylesheet files are located in the styles folder. Note: you are not to move the files around.Set the default font for the web page to a sans-serif font. Follow good practices re: setting a font.Adjust the font sizes for all of the headings (refer to the screenshot when deciding which size to use). Use % as the unit with the font size values. In the header, float the image to the left so that the two lines of text appear to its right. Style the first line of text in the header section as follows:??increase its font size??make it bold and italic??add a black shadow??change the text colour ? use #ecc03b as the colour value??indent the text as neededStyle the second line of text in the header section as follows:??increase its font size??make it bold??change the text colour ? use #488c32 as the colour value??indent the text as neededFormat the first letter of the main page title so that it is larger than the remaining letters in the heading.Remove the bullet beside Product Category image. To accomplish this code list-style-type: none; style for the
- element.Format the Product Category links so they are displayed in bold.Change the colour for visited and unvisited links; use #ecc03b colour value.If a link has focus (eg. when tabbing to it) or mouse is hovering over it, it should be displayed in #488c32 colour.Reduce the font size for the text in footer and center it.Add comments, proper formatting (indentation, etc) and spacing to your code.Not required but highly recommended: validate both your main.css (https://jigsaw.w3.org/css-validator/) and index.html (https://validator.w3.org/) file.Once you have completed the tasks above, your index.html page should look as per the screenshot below:
PROG-1247 Assignment 1 Rubric
Collepals.com Plagiarism Free Papers
Are you looking for custom essay writing service or even dissertation writing services? Just request for our write my paper service, and we'll match you with the best essay writer in your subject! With an exceptional team of professional academic experts in a wide range of subjects, we can guarantee you an unrivaled quality of custom-written papers.
Why Hire Collepals.com writers to do your paper?
Quality- We are experienced and have access to ample research materials.
We write plagiarism Free Content
Confidential- We never share or sell your personal information to third parties.
Support-Chat with us today! We are always waiting to answer all your questions.
