Fully responsive by applying the Responsive Web Design

136 views 9:13 am 0 Comments April 27, 2023

Project Objectives:

This final project will require students to demonstrate the skills they have learned in Web Design. Students will create a web site for a club they belong to, a business website or their own company website.

Students will plan, use, develop, analyze, and implement most of the web design tools they have learned throughout the semester. There are three deliverables for the Final Project, a detailed description of each part is highlighted in this document:

Project Parts Description:

I. Part 1 – The Website:  (HTML, CSS, and JS files)

Overview:

The website you will create has to be fully responsive by applying the Responsive Web Design (RWD) approach. In your website, create at least four HTML pages. These pages should be organized with internal navigation links between the pages and of which one page is the form registration to allow new members to register.  Also your website should include one external style sheet file that can be applied to all the web pages.

The Website should include the following elements:

Four webpages linked together with proper and an easy navigation. Each page should have meaningful title (using the same title for all the pages is not considered meaningful).

An external CSS file to define the style of your website.

Web Tables.

One of the web pages should include a club member registration form with validation.

Graphics and animations: Pictures, logo, video, audio, animations… A script: JavaScript function (optional).

A footer using the a copyright notice: © [year] [name] You should organize all the pages in a good structure.

If you’re using an image or some text from somewhere else, you must clarify the origin of that resource in a comment in your HTML or CSS file.

The website should work at all device sizes: desktop, tablets and phones (RWD).

Use of valid HTML tags to provide a fluid layout of the webpage

Working Navigation that changes based on the device type

Use of responsive image techniques (SVG, CSS Media Queries, viewport, etc.)  You’re allowed to use some CSS techniques or scripts developed by others, only in the circumstances that you adopted and modified it to fit your website. Copying is not allowed, and you will automatically get zero if such action is detected.

Each HTML page and CSS should pass the W3C validation. Be Creative…!

II. Part 2 – Website Planning Report:  (word or pdf document)

You are required to write a one page report about your website, the report should explain all aspects of the website design and development with emphasis on the web development life cycle, some key points to discuss in the report are:

The Goal and the purpose of the Website.

The Structure of the website and all its components.

The Intended Audience.

The team that will be working on developing the website.

The development process, with details and what is done in each step.

Where the website will be published.

How the website will be tested.

How the website will be updated and maintained.

III. Part 3 – Oral Presentation:  (PowerPoint, Prezi or Video file)

You are required also to present your website in class orally in no more than 10 min, answer the students and/or the professor questions, show a live demonstration of the website and the HTML/CSS coding used.

Create a PowerPoint, Prezi or video presentation with no more than 10 slides, the presentation may include elements from the planning report and or the website.

Slide 1 : Title

Slide 2:  Introduction

Slide 3: Goal and purpose of the Website

Slide 3 : Target Audience

Slide 4 :Website Development Process

Slide 5 : Style/Layout

Slide 6 : Testing/Maintenance

Slide 7 to 9: Web pages/technology and coding involved. Slide 10: Conclusion/References