Week 20

Project: HTML Live Website

Started on: Mar 24, 2022

Completed on: Mar 24, 2022

Staff Guidance: Stacy

Description: For this project, I need to edit the design of the HTML Live website. I made a rough design in Figma of how the website looks like. After that, I implement the changes into the real site. There is one thing to note which is that in real site, the template that the conference website offers makes it really hard for me to implement the change because the site is divided into above the player, the player and below the player. I need to experiment with different elements in order to navigate myself through the HTML changes.

 

Figma Design.

Real Site:

 

 

Project: STA Presentation 

Started on: Mar 23, 2022

Completed on: Mar 24, 2022

Staff Guidance: Stacy

Description: For this project, I made a rough draft of the outline for the presentation.

I made a Word document to capture the changes.

https://utexas.box.com/s/7duqnjirpnrvkob8nf2dzczpdsl5qi3w

 

Project: Conference Website NS Cloner

Started on: Mar 23, 2022

Completed on: Mar 24, 2022

Staff Guidance: Stacy

Description: For this project, I need to figure out why  the cloning of the conference website doesn’t work properly. After much experimentation, I do not know why. Stacy fixed and figured out the bug. I need to ask him for this.

 

Week 19

Project: Conference Website

Started on: Mar 9, 2022

Completed on: Mar 10, 2022

Staff Guidance: Stacy

Description: For this project, I need to adjust the website to be more responsive.

1. Change the font-size and configurations of different elements to look visually reasonable when on different device sizes.
2. Adding patterns to the agenda section.
3. Make the agenda text to be center with align-items center and display flex in CSS.
4. Cloning the website so that I can implement the original website as a template

 

The website:

Demo

 

Project: Fake Data

Started on: Mar 7, 2022

Completed on: Mar 7, 2022

Staff Guidance: Stacy

Description: For this project, I help Stacy to input fake data for each different staffs. I completed on Tuesday almost all of the columns and some of the rows.

 

Week 18

Project: Master of Arts in Economics

Started on: Feb 28, 2022

Completed on: Mar 3, 2022

Staff Guidance: Stacy

Description: For this project, I will need to do the following:

1. Fixing the news and events section
2. Adding Accordion FAQ
3. Adding Documentations on how to help the client navigate through different pages.

Number 1: Fixing the news and events section

Before, the news and events section query and get data from all of the posts. Since the website eliminates all of the posts due to the confusion between posts and pages, the news and events section now is just a column of pre-determined pages.

Number 2: Adding Accordion FAQ

After the meeting with the client, the accordion FAQ is proposed to be implemented by the client. I went ahead and added a Spectra plugin that can help with displaying the accordion. The accordion looks something like this.

 

Number 3: Adding Documentation on how to help the client navigate.

There are a lot of different things that I need to add for the documentation including how to navigate the home page, how to edit the footer, header and how to navigate other pages. Moreover, I also need to show how to edit and add items in the navigation menu.

 

Project: Conference Website

Started on: Mar 2, 2022

Completed on: Mar 3, 2022

Staff Guidance: Stacy

Description: For this project, I added Schedule Plugin to shift between different days of the agenda.

Conference Website: 

Demo

 

Qualtrics Survey during the meeting:

Follow this link to the Survey:
Take the Survey

Or copy and paste the URL below into your internet browser:
https://utexas.qualtrics.com/jfe/form/SV_6lEn6uMwTdauaGi?Q_DL=fTqD9J2Vbqe9qSd_6lEn6uMwTdauaGi_CGC_RBJUHqpG2ohYQ3V&Q_CHL=email

 

Week 17

Project: TGDP

Started on: Feb 21, 2022

Completed on: Feb 24, 2022

Staff Guidance: Stacy

Description: For this project, I continue to work on the display of the testimonial section. The idea is that the design should not break even if the testimonial  text is longer than what was displayed. After contemplating the problem and asking Stacy for some suggestions, I tested out different options and eventually landed on this approach.

1. Change the content testimonial to display relative instead of absolute. Because of that, change the margin-top: -150px instead of top: 60%.
2. Change the margin-bottom to be less than before since the position relative already takes into account of the height of the div.
3.   The other problem I had is that I want to make the height of the content testimonial equally to match with the highest testimonial text. There are two options that I explored including displaying with grid and using JavaScript. For displaying grid, I have trouble of changing the placement of the cards in the mobile size, and it will break a lot of existing WordPress codes. Therefore, I try to investigate the problem and simplify it to see what approach should I do. Eventually, what I really need is just the height of the longest testimonial text and then I can set the height of all of the cards to match with the longest one. After that, I proceed to use jQuery to loop through each card, get the height and set the height of every three cards to match with longest card out of 3 of them. I used an array to store three cards and get the max height out of three. Then, I pop all three and set the height. I would do this iterations until I find no cards left.

The code:

$(function() {
function unifyHeights() {
var maxHeight = 0;
var arrayContentTestimonial = [];

$(‘.content-testimonial’).each( (index, element) => {

arrayContentTestimonial.push(element);

var height = $(element).height();

console.log(height);

if ( height > maxHeight ) {
maxHeight = height;
}
// if there are three testimonial then pop out each and set the height to match the max

if (arrayContentTestimonial.length === 3){
// check if the list is not empty
while (arrayContentTestimonial.length){
el = arrayContentTestimonial.pop()
$(el).height(maxHeight);
}
// reset max-height for the next iterations
maxHeight = 0;
}
});

}
unifyHeights();
});

 

TGDP Testimonials #2

 

 

Project: MA in Eco

Started on: Feb 24, 2022

Completed on: Feb 24, 2022

Staff Guidance: Maddy

Description: For this project, I added or changed some more contents based on the feedback from the clients.

• Add tagline Learn more about the process
• Change 10 months 10 course -> View our curriculum
• Add another information for international applicants
• Need to add some more contents to the news and events

https://www.figma.com/file/gg8inqItjNLN7MHnkUENgx/Master-of-Arts-in-Eco?node-id=23%3A35&t=Hzczrd8qHOvL0nAt-1

Project: Conference Website

Started on: Feb 24, 2022

Completed on: Feb 24, 2022

Staff Guidance: Maddy, Stacy

Description: For this project, I need to make a sample conference website. I translated the design into WordPress.

Demo