Final Project Requirements and Guidelines

Congratulations on reaching the final project stage of the web design

course! As part of this project, you have the opportunity to demonstrate your
understanding of web design principles and apply your skills in HTML, CSS,
JavaScript, and other relevant technologies.

Objective:
The objective of the final project is to assess students' understanding and
application of web design principles, HTML, CSS, JavaScript, and related
technologies. The project aims to showcase your ability to create a visually
appealing and functional website. You have the choice to either build the
website using WordPress or develop it from scratch using HTML, CSS, and
JavaScript.

Project Requirements:
1. Website Structure:
o Develop a website with a minimum of 5 pages, including a homepage,
about page, services page, portfolio or product page, and contact
page.
o Ensure consistent navigation across all pages.

2. HTML, CSS, and JS Usage:

o Develop a website with a minimum of 5 pages, including a homepage,
about page, services page, portfolio or product page, and contact
page.
o Ensure consistent navigation across all pages.

3. Interactive Menus:
o Develop a website with a minimum of 5 pages, including a
homepage, about page, services page, portfolio or product page, and
contact page.
o Ensure consistent navigation across all pages.
4. Slider:
o Develop a website with a minimum of 5 pages, including a
homepage, about page, services page, portfolio or product page, and
contact page.
o Ensure consistent navigation across all pages.

5. Contact and Email Forms:

o Develop a website with a minimum of 5 pages, including a
homepage, about page, services page, portfolio or product page, and
contact page.
o Ensure consistent navigation across all pages.

6. Content Boxes, Single Post Pages, Category Pages, Page Sections:

o Design and implement content boxes or cards to display different
types of content, such as blog posts, product listings, or services.
o Create single post pages with unique layouts for detailed content.
o Implement category pages to organize related content.
o Utilize page sections to structure and present different types of
information effectively.

7. Mobile Responsive Design:

o Ensure the website is responsive and adapts well to different screen
sizes, including mobile devices.
o Use CSS media queries and appropriate layout techniques to
optimize the user experience across devices.

8. Conversion of UI Template:
o If choosing to develop the project from scratch, create an UI/UX
template first and then convert it into a working website by
implementing the required functionality.

9. Hosting, Setup Analytics, and Optimization:

o Host the website on a web hosting platform (provided for free).
 o Set up website analytics to track user behavior, traffic, and other
relevant metrics.
o Optimize the website's performance by minimizing file sizes,
optimizing images, leveraging caching techniques, and following
SEO best practices.

Example Ideas:
1. Restaurant Website:
Develop a website for a local service provider, such as a plumber
or electrician. Include sections for services offered, contact details, and a
request a quote form. Focus on creating a professional and trustworthy
online presence for the business.

2. Local Service Provider:

Develop a website for a local service provider, such as a plumber
or electrician. Include sections for services offered, contact details, and a
request a quote form. Focus on creating a professional and trustworthy
online presence for the business.

3. Personal Trainer or Fitness Studio:

Design a website for a personal trainer or fitness studio,
showcasing services, class schedules, and testimonials. Include a
contact form for inquiries or class bookings. Use vibrant colors and
imagery to create an energetic and motivating atmosphere.

4. Online Resume/CV:
Build a simple website to showcase your resume or curriculum vitae
(CV). Include sections for personal information, work experience,
education, skills, and contact details. Focus on creating a clean and well-
organized layout that effectively presents your qualifications.

5. Online Photography Portfolio:

Create a portfolio website for a photographer to showcase their
work. Include galleries or slideshows for different photography genres, a
brief bio, and contact information. Design the website to emphasize the
visual aspects of the photographer's work.
 6. Freelancer or Consultant:
Develop a website for a freelancer or consultant, highlighting their
services, expertise, and client testimonials. Include a contact form for
inquiries or project requests. Use a professional design with clear calls to
action.
7. Event Venue:
Design a website for an event venue, providing information about
available spaces, pricing, and event planning services. Include a contact
form for inquiries or booking requests. Use high-quality images to
showcase the venue's ambiance and versatility.

Deliverables:
1. Working Website:

• Submit a fully functional website with a minimum of 5 pages.

• Include all required elements and features according to the chosen
concept or theme.

2. Source Code, Assets and Credentials:

• Submit the complete source code of your website, including HTML, CSS,
JavaScript (if developing from scratch), and any additional assets as a
GitHub repo.
• If using WordPress, Submit a WordPress admin login credential.

3. Project Documentation:

• Include a document explaining your design choices, technical

implementation, and any challenges faced during the project.
• Document any external resources, libraries, or frameworks used, along
with their purpose and how they enhance your website.
• If using WordPress, provide explanation for theme and each plugin used.
Grading:
Your final project will be assessed based on the following criteria:

1. Visual Design and Layout (30%):

o Creativity and aesthetics of the website design.

o Consistency and coherence in design elements.
o Effective use of color, typography, imagery, and whitespace.
o Overall visual appeal and user experience.

2. HTML Structure (if developing from scratch) / Theme Customization

(if using WordPress) (20%):

o Proper use of HTML elements and tags (if developing from scratch).
o Effective customization of a WordPress theme (if using WordPress).
o Semantics and accessibility considerations.

3. CSS Styling (if developing from scratch) / WordPress Customization

(if using WordPress) (20%):

o Effective application of CSS styles and selectors (if developing from

scratch).
o Customization of stylesheets and theme components (if using
WordPress).
o Consistency in design across different screen sizes.

4. JavaScript Interactivity (if developing from scratch) / Plugin Usage

(if using WordPress) (15%):

o Use of JavaScript to enhance interactivity (if developing from scratch).

o Effective utilization of WordPress plugins for extended functionality (if
using WordPress).
 5. Documentation (10%):

o Comprehensive documentation that explains design choices,

technical implementation, and any challenges faced during the project.
o Clear instructions on how to set up and run the project (if developing
from scratch).
o Inclusion of project overview, code explanations, and any external
resources used.
o Well-structured and organized documentation.

6. Additional Features/Creativity (5%):

o Incorporation of additional features beyond the minimum

requirements.
o Creative ideas or enhancements that demonstrate your ability to go
beyond the basic project scope.
o Effective utilization of third-party libraries or APIs (if applicable) to
extend functionality.
o Effective utilization of WordPress plugins, custom post types, or other
advanced features (if using WordPress).
o Demonstrated understanding of the project requirements and ability to
make valuable contributions.

Grades will be assigned based on the following scale:

• A: 75-100%
• B: 65-74%
• C: 55-64%
• S: 35-55%
• F: Below 35%

Deadline:
The final project submission deadline is 31st October 2023
Note:
Feel free to customize and expand upon the project requirements based
on your own ideas and creativity. Remember to seek guidance from your
instructor as needed and ask for clarification if any doubts arise during the
development process.

We wish you all the best with your final project! Showcasing your skills
and knowledge through this project will undoubtedly be a valuable experience
as you embark on your journey as a web designer.