INFORMATION TECHNOLOGY DEPARTMENT

2nd Semester 2024-2025

PROJECT 1 – PERSONAL WEBSITE

IT 110 – Web Systems and Technologies

Final Rating: _______

Name: ________________________________________________________________________ Section: ___________

TITLE:
Personal Website using HTML, CSS, and CSS Framework.

PURPOSE:

A personal website created using HTML, CSS, and a CSS framework is a digital platform designed to serve as an
online introduction and hub for an individual. This web page showcases the individual's identity, achievements, skills,
projects, and any other relevant information. The combination of HTML and CSS allows for structuring and styling the
content, while the integration of a CSS framework enhances the design, responsiveness, and overall user experience of
the page. By utilizing HTML, CSS, and a CSS framework, the personal website can be tailored to reflect the individual's
style and professionalism, making it an effective tool for personal branding, networking, and showcasing their work to
a wider audience.

In addition, students will gain further knowledge of the following:

• HTML, is the standard markup language for documents designed to be displayed in a web browser. It defines
the meaning and structure of web content.
• CSS, is the language we use to style an HTML document. It describes how HTML elements should be
displayed.
• Bootstrap, is a free and open-source CSS framework directed at responsive, mobile-first front-end web
development.
• Bootstrap Templates, utilize free, open source, MIT license, Bootstrap themes, templates, and code
snippets to use on any project, guides to help learn more about designing and developing with the Bootstrap
framework.
• Git, is a free and open-source distributed version control system designed to handle everything from small
to very large projects.
• Github, is a platform and cloud-based service for software development and version control using Git,
allowing developers to store and manage their code.
• Github Pages, is a free service that allows you to host static websites directly from a GitHub repository. It
supports HTML, CSS, and JavaScript, making it ideal for personal projects, documentation, or portfolios.

INSTRUCTIONS:

1. Create a Curriculum Vitae (CV), you can check instructor's website as a reference. Save it as a PDF document in A4
Paper Size. The CV must include the following content:
i. 1 Formal Photo
ii. Name and Contact Details
iii. Academic/Professional Highlights

Page 1
 iv. Work Experience (IT-related, if any)
v. Training and Seminars attended
vi. Certifications
vii. Club/Organization Affiliations
viii. Other Skills (IT-related skills)
ix. Educational Background (Don’t put Elementary and Secondary Education)
x. Project Portfolio
1. Project Name
2. Project Description
3. Project Screenshots

2. Begin crafting the Website by incorporating content from your CV. Familiarize yourself with essential web
technologies, such as HTML and CSS, and explore the CSS Framework (Bootstrap) by following the Full Stack Web
Development Guide.

3. To expedite development, leverage a Bootstrap 5 template and customize it to align with the theme and preferences
of your personal website. Incorporate designs from Canva or Figma, as well as images in various formats (GIF, PNG,
JPEG) found on the internet. Analyze color palettes to maintain consistent colors across all pages. Ensure that the
website is responsive on web, tablet, and mobile devices. Detailed demonstrations and discussions will be provided.

4. Please create a GitHub account and upload the source code to GitHub using Git. The created website will be
deployed using Github Pages. The instructor will provide guidance on how to utilize Git effectively.

SUBMISSION AND PRESENTATION:

DATE:
February 4th Week

SUBMISSION OF PRESENTATION:
Personal Website URL e.g. firstnamelastname.github.io or flastname.github.io will be inputted on the
given Google Sheet.

TYPE OF PRESENTATION:
The instructor will conduct individual evaluations of all personal website. The top 3 websites of each
section, as determined by their rubric scores, will be posted in the Facebook Group Chat.

RATING OF PROJECT:
The instructor and the external evaluator will utilize the Project Rubrics.

IMPORTANTE NOTE:

➢ Please complete this project individually. If you do not have your own computer (laptop), you can use laboratory or
library computers for development purposes. Make sure to secure a flash drive if you do not have access to a laptop.

Page 2
PROJECT RUBRICS:
Core Criteria

Performance Rating

Rating
Criteria Description
Exceeds Meets Needs No
Expectatio Expectati Improveme Impleme
ns ons nt ntation
The website design boasts an 35 28 20 1
exceptionally (1) attractive and
user-friendly layout, featuring an
(2) alluring color scheme that
runs consistently throughout the
pages. Its (3) design structure is
uniform across all pages, making
for a visually cohesive
experience. Furthermore, the (4)
responsive design ensures
seamless functionality on both
web and mobile views, with (5)
no discernible design issues or
interface errors. (7pts each)

The (1) font style and text on the 15 10 5 1

Creativity

website maintain a consistent

and legible appearance.
Navigation links (2) are clearly
labeled, consistently positioned,
enabling readers to easily access
related content. They (3)
effectively guide users to their
expected destinations. (5pts
each)

The Website provides (1) all CV 15 10 5 1

information requirements as
instructed. (2) Focus on
showcasing the projects you've
worked on or contributed to,
including descriptions and
screenshots. Also, include (3) at
least two formal photos of
yourself. (5pts each)

(1) HTML, CSS, and CSS 10 8 4 1

Frameworks (such as Bootstrap)
Prerequisites

were employed effectively.

Additionally, (2) CSS &
animations and JS plugins were
incorporated to enhance the
visual appeal of the website,
resulting in a more aesthetic
appearance. (5pts each)

Page 3
 The source code has been (1) 5 4 2 1
pushed to GitHub and properly
deployed using GitHub Pages.
The domain name for your
personal website should be in the
format:
firstnamelastname.github.io or
flastname.github.io
(5pts)

Total Rating
(out of 80)

List the negative aspect(s):

List the positive aspect(s):

Page 4