Scenario:

You work as a web developer at a software development company called New horizons. New horizons is famous for producing web solutions for businesses and individuals throughout the New Zealand.

Your company has been contacted by News agency called “NZ News” to build a website to manage their all news. The news agency is looking for a web page where they can categorize news into the separate columns. They also want an additional column on their website for the endorsement of the different products from different brands so that they could also make some money.

You have been approached by your manager to start building the wireframes for this webpage first on the basis of below mentioned requirements and once taking approval for the wireframe build a final webpage on the basis of approved wireframe.

Web page requirements are as follows:

It needs to be Three Column webpage

Web page would start with a header with title “NZ News” in the center along with the icon for NZ News on the right side of the header.

Add horizontal navigation bar right after header to give access to the items like Home, About us, Contact us.

Column 1: will hold the news for technology, sports and travel. This column would contain images for the events along with the descriptions.

Column 2 : will hold the news related to middle east and businesses. This column would contain images for the events along with the descriptions.

Column 3: will hold the space for advertisement.

Add a footer to provide the link of facebook, instagram, LinkedIn and Twitter handle of the News agency for the followers.

Link to Website: https://scrumble.co.nz/html-nznewswebsite/

Note: Due to using a WordPress platform with an installed theme, some code has been changed to accommodate specificity. For example the “body tag” has already been used by WordPress / theme and therefore can’t also be inside the code block used to display the HTML code. Likewise with “h1” (etc.) tags, these have been set in the overall theme and are different to the styling for the HTML page being displayed. Therefore, I have created classes for the “h” tags, wrapped the “header” in a “p” tag and then added the class to the “p” tag.

SR01: Create a Wire Frame For The News Site:

SR02: Create a header with title “NZ News” in the Centre and the Icon on the Right Aligned

SR03: Create A Horizontal Navigation Bar Which Includes Links To  Home, About Us and Contact Us etc. :

SR04, SR05, & SR06: Divide Page Into Three Columns Using <Section> Tags:

SR07 :  Create A Footer And Include  Social Media  Links and Handle:

SR08: Use CSS Styling Properties To Make The Website Eye-Catching: