Lab 03

Creating a Digital Portfolio

Objective:
The aim is to equip students with essential skills in website creation and customization using
Google Sites and Wix. For Google Sites, objectives include mastering content creation,
customization, integration with Google Workspace tools and analytics interpretation. On the other
hand, Wix objectives focus on navigating the platform, content creation and design customization,
integration of apps for enhanced functionality, mobile responsiveness, and security measures.
These objectives provide a structured approach for users to learn and apply key concepts,
empowering them to build professional and engaging websites tailored to their needs and
preferences.

Activity Outcomes:
After this lab, the students should be able to:
1. Understand the functionality of Wix & Google sites along with different uses.
2. Partially complete an e-commerce portfolio with at least one example of your work.

Instructor Note:
1. https://support.google.com/sites/?hl=en#topic=7184580
2. https://wixtoolset.org/docs/intro/
1) Useful Concepts:

Google sites:
Google Sites can be integrated with other Google Workspace tools. Google Sites seamlessly
incorporates features like Google Drive, Calendar, Maps, and Forms, allowing users to embed
content directly from these applications into their websites. This integration enhances
collaboration and productivity, as users can easily share documents, schedule events, display
location maps, and gather information through forms without leaving the site. Leveraging these
interconnected tools within Google Sites streamlines workflow processes and fosters efficient
communication among team members or website visitors. This concept not only simplifies content
management but also enriches the overall functionality and user experience of Google Sites.

Another valuable concept within Google Sites is its intuitive and user-friendly interface, which
empowers users of all skill levels to create professional-looking websites with ease. The platform
offers a drag-and-drop editor and customizable templates that simplify the website-building
process, eliminating the need for coding knowledge. Additionally, Google Sites provides real-time
collaboration features, allowing multiple users to edit and contribute to a site simultaneously. This
fosters teamwork and facilitates the creation of dynamic and engaging web content. With its
straightforward design and collaborative capabilities, Google Sites enables users to quickly bring
their ideas to life and share them with audiences, making it an invaluable tool for individuals,
businesses, and educational institutions alike.

Wix:

One of the most beneficial concepts within Wix is its extensive collection of customizable templates. Wix
offers a vast array of professionally designed templates across various industries and purposes, catering to
the diverse needs and preferences of users. These templates serve as a foundation for building stunning
websites, providing users with pre-designed layouts and elements that they can easily modify to suit their
branding and content. Furthermore, Wix employs a user-friendly drag-and-drop editor, allowing users to
customize every aspect of their site with ease, from colors and fonts to layout and functionality. This
concept of customizable templates streamlines the website creation process, enabling users to create
visually appealing and functional websites in a fraction of the time it would take with traditional web design
methods. Additionally, Wix's template selection ensures that users have access to modern and responsive
designs that are optimized for various devices, enhancing the overall user experience.
Another invaluable concept within Wix is its extensive App Market. The App Market offers a wide
range of third-party applications and integrations that users can easily add to their websites to
enhance functionality and user experience. These apps cover diverse functionalities such as e-
commerce, booking systems, social media integration, analytics, and more. By leveraging these
apps, users can add advanced features to their websites without the need for coding or technical
expertise. This concept empowers users to create highly customized and interactive websites that
meet their specific needs and goals. Additionally, the App Market constantly updates with new
apps and features, ensuring that users have access to the latest tools and technologies to optimize
their websites. Overall, the App Market is a key aspect of Wix that enables users to extend the
capabilities of their websites and create truly unique online experiences for their visitors.

2) Solved Lab Activites

Sr.No Allocated Time Level of Complexity CLO Mapping
1 45 Medium CLO-5
2 45 Medium CLO-5

Activity 1:
Create a digital portfolio in Google Sites

Solution:
Log in to your Gmail account or create a new account for free at accounts.google.com.

Once you are logged in, navigate to sites.google.com.

Note: If you are using the alternative option, skip to the alternative set of directions below the Google
Sites instructions.

From the Start a new site menu, select the Portfolio template.
Add a page

1. On a computer, open a site in new Google Sites.

2. At the right, click Pages.
3. At the bottom right, hover over Add .
4. Click New page .
5. Enter the page name.
6. Click Done.
7. To publish your changes, at the top right, click Publish.

Step 3: Structure your portfolio site

From the Pages menu, select the third webpage labeled Project Page. Change the title to “Sample
Work”.

On the Pages menu, click and drag the Sample Work page to the second position on the list.
Step 4: Edit your homepage

Your homepage will be the first page your website visitors experience when visiting your site. In the
text box, add a short description of who you are, including your job title.

To remove the template’s image, select the image and then click Remove (trash can icon).

Step 5: Edit your Sample Work page

Select the Sample Work page from the Pages menu. Select the Project Name title text and replace it
with "Design front end websites using HTML/CSS. " activity.

In the text box below the title, write a brief description of the project, including why you created it and
what it demonstrates. For example:

• I completed this activity as part of the E-commerce & Digital Marketing course at Comsats
University Islamabad. This completed activity demonstrates my ability to write, design, and
repurpose engaging front end websites using HTML/CSS. It also demonstrates my
knowledge of front end technologies.

Be sure to create your own original sentences for this section.

Step 6: Add your work sample link

To add a link to your work sample, select the Insert, then select Images.
Take images of your two mini projects that were given to you as practicing HTML & CSS on Assets
provided for YTS & PDF Candy. Take snapshots using sniping tool( shift+ windowskey+s) Use
Images to add your work

Navigate through the options and upload the images for your projects.

Step 7: Edit your About page

Next, select the About page from the Pages menu. In the page, replace the heading with “About” and
your first name.

Write at least three sentences about you to let employers know who you are. Include the following
information:

• Your first name

• Your desired position
• Your previous experience with digital marketing or e-commerce
.

Then, remove any unnecessary template elements that you did not use, including images and text
boxes.

Step 8: Preview your website

Select the Preview icon to view your unpublished website.

Review your website to see how it will appear to your digital portfolio’s viewers. When you’re
finished, select the Exit preview icon to return to the editor.

Step 9: Publish your portfolio website

When you’re ready to publish your website, click Publish. Then, create a web address. The URL that
appears in gray below the web address box is your portfolio’s URL.

Next, click Manage under the heading Who can view my site. Under the heading titled Links, click
Change. Ensure that Published site is set to Public so that your peers can view your website.

When you are ready, click Publish to publish your portfolio.

Note: You can always unpublish your website at any time. To unpublish your website, click the arrow
next to Publish and click Unpublish.
Output:

Activity 2:
Create a digital portfolio in Wix

Solution:
Step-By-Step Assignment Instructions

Step 1: Create a Wix account

To create a new Wix account:

• Go to the Wix.com signup page.

• Register with your email address, Facebook account, or Google credentials.
• Click Sign Up.
• Follow the sign up steps.

Step 2: Select a template

From the All Templates menu, select the Portfolios templates.

Select the Writer template and click Edit.

Step 3: Structure your portfolio site

From the Pages menu, delete all the pages except Home, Featured Work, About, and Contact. To
delete a page, select the page and click the three dots menu, then click Delete.

Delete all but one subpage under Featured Work.

Rename the Featured Work text with “Sample Work”. Rename the subpage “Design front end
websites using HTML/CSS”
Step 4: Edit your homepage

Your homepage will be the first page your website visitors experience when visiting your site.

Return to your homepage and replace the large text box sentences with a short description of who
you are, including your and professional title. Be sure to keep your personally identifiable information
(PII) to a minimum to protect your privacy.

Update the name at the top of the page. Change Writing Portfolio to “Portfolio.”
 E.g
A completed homepage on Wix that has the following text: Your Name is a digital marketer
based in Pakistan. Recently, He/ she has completed the E-commerce & Digital Marketing
Course from Comsats University Islamabad.

Step 5: Edit your “Design front end websites using HTML/CSS” page

From the Site menu, select the Design front end websites using HTML/CSS” sub page under the
Sample Work folder. Once on the page, select the header and replace it with the name of your work
sample: " Design front end websites using HTML/CSS " activity.

Write a brief description of the project, including why you created it and what it demonstrates. For
example:

• I completed this activity as part of the E-commerce & Digital Marketing. This completed
activity demonstrates my ability to write, design, and development using front end websites
using HTML/CSS. It also demonstrates my knowledge of brand voice.

Step 6: Add your work sample

Add your project pictures to demonstrate your work.

Open a new tab in your browser. Navigate to the work you completed for the front end websites
using HTML/CSS.
Step 7: Edit your “About” page

Next, select the About page from the pages menu. Replace the heading with “About” and your first
name.

Write at least three sentences about you to let employers know who you are. Include the following
information:

• A first name
• Your desired position
• Your previous experience with digital marketing or e-commerce

Then remove any unnecessary template elements that you did not use, including images and text
boxes.

Step 8: Preview your website

Select Preview to view your unpublished website.

Review your website to see how it will appear to your digital portfolio’s viewers.

Step 9: Publish your portfolio website

Output:

3) Graded Lab Tasks

Note: The instructor can design graded lab activities according to the level of difficult and complexity
of the solved lab activities. The lab tasks assigned by the instructor should be evaluated in the same lab

Lab Task 1
Crafting a Personal Portfolio Website using Google Sites

In this task, you'll embark on a journey to initiate your portfolio website, considering various
templates to best represent your professional identity. Your planning stage will involve meticulous
structuring, determining sections like an engaging "About Me," a project showcase, and a
comprehensive resume or CV. Throughout the process, customization and design play pivotal roles
as you tailor the layout, colors, and fonts to align with your personal brand while ensuring
responsiveness across diverse devices.

Lab Task 2
Create a simple e-tailer website on wix.com for a free trial period.

1. Following is required from you:

2. Create a website.
a. Pages Including a home page, product page, shopping cart, and contact page etc.
b. Add 10 Products per page.
c. Extra credit will be given for additional complexity and creativity.