STA Blog

Thang Truong

Thang Truong

Week 12 and 13 – Thang

By

Week 12 and 13

Project: Master of Arts in Eco

Started on: Nov 7, 2022

Completed on: Nov 10, 2022

Staff Guidance: Maddy, Stacy and Marianne

Description: During the winter break, I have completed a Figma design for the master of arts in eco website. For the past week, I have translated the Figma design into a WordPress site. The actual website looks really close to the Figma including centering the icon in the features section on top of the rectangle, adding fancy corners to the testimonials post and including the news and events section with the events updating whenever the clients input a new event. This project really taught me how to design a website in Figma and how to implement my design into a working WordPress site. I felt grateful to learn so much about designing and coding with WordPress especially utilizing CSS to make changes.

Each day of last week, I worked slowly to build up a site from the Figma design with coding the header first and slowly touch upon the why UT and the feature section. I consider the feature section to be challenging to implement since it involves the use of position: relative and position absolute as well as understanding of transformation of different components in the X and Y direction. But at the end, I know how to search and ask the right question and how to implement what I learn and research into making the logo stays at the center on top of the rectangle div. After that, I work on the important dates and why MA program. From this point, it was much easier although at various points in coding, I felt a little bit challenged in order to implement like the news and events section with implementing a post list that the events can be updated whenever the clients added into the database. But WordPress made it easy with the code block.

This is the design from Figma.

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

This is the website for Master of Arts in Eco. (Pretty similar to the design, right? 😁)

https://ma-eco.development.la.utexas.edu/

Because I did not update my blog since the winter break, I also want to update a few things regarding the learning and implementing of Figma design. Figma is a powerful and convenient tool that can help designers quickly produce mesmerizing templates from scratch. I learn so much about doing different sections and experimenting with different colors and typographies. I also research on the branding of UT including the signature color, fonts, logo and heading styles. During the designing process, I want to go all out as a designer; therefore, there are a lot of periods where I do not know how to implement those designs into code. I want to bring forward the best design without sacrificing any parts to the implementation of the coding. I think I did well in order to bring out the aesthetic, clean and UT vibe website design. However, with both roles, there are some coding insights that I can take while I design so that I can know if it is viably possible to implement.

I want to thank you Maddy for the amazing mentorship regarding the designing process and Stacy for this opportunity to work on both designing and coding.

 

 

Orientation: Welcome Daniela Caballero

Started on: Jan 10, 2022

Completed on: Jan 10, 2022

Description: I become Orientation buddy for Daniela Caballero. I walk her around Basecamp, Slack and Harvest. I talk with her about her interests and show her different projects that LAITS team worked on and different tools that LAITS will use for web dev projects.

Training: React JS 

Started on: Nov 7, 2022

Completed on: Nov 10, 2022

Staff Guidance: Maddy, Stacy and Marianne

Description: For this training, I followed a tutorial on Youtube about creating React JS website from scratch. From this tutorial, I learnt how to implement React to build and run the website. I know how to use React in order to import and create  different components so that I can reuse it later on. I know how to insert a variable into HTML so that I can customize even more.

A little bit history for React JS:

Facebook created React JS in 2011 for their own use, and then they made it open-sourced. More people started to use it and liked the component-centric approach. Now, it is used by many Fortune companies.

Benefits for React JS:

  1. Flexible
  2. Broader Community Support
  3. Great Developer Experience

 

 

 

 

 

 

Week 11

By

Week 11

WordPress Training

Started on: Nov 14, 2022

Completed on: Nov 16, 2022

Description: It took me a lot of time to look around for WordPress Training. Eventually, I landed on one training that involves using Elementor Plugin and using some PhP for the backend of the customizable theme. The tutorial is about the legal website for some imaginary law firm and this is what I have so far. I have done the footer and header as well as the features for the law firm.

But upon completing the project, I talked to Stacy and I knew that I needed to take another training if I want to learn more about WordPress from a developer point of view. So Stacy directed me to the WordPress main website and helped me find different other resources to train.

 

 

Stacy’s Project 

Started on: Nov 16, 2022

Completed on: Nov 17, 2022

Description: This project involves me converting columns of different projects that Stacy has in the database into different text files for each project. I used Python to help me access to CSV files and query through different columns so that I can get a hold for different information that I want. Then, I convert each different column as a separate text files for Stacy.

Monfils Lab Projecy

Started on: Nov 28, 2022

Completed on: Nov 29, 2022

Description: This project is about updating the website for Dr. Monfils’ laboratory. It involves migrating the content from the old website that she has to the new one that uses Grav. Last week, I sent email asking if she was still interested in updating the website. She responded more and more with her feedback on the look of the new site. I updated the banner to the image that she attached and updated the title of the header to the name of her lab.

Other small tasks:

  1. Answering Email for Dr. Monfils Lab
  2. Completed the evaluation

Week 10 – Thang

By

Week 10

Project: Exposure Therapy Lab 

Started on: Nov 7, 2022

Completed on: Nov 10, 2022

Staff Guidance: Ruben, Marianne

Description: For this project, I wrapped up the project with updating all of the changes.

  1. Update search bar: The user can click and filter through the research posts.
  2. Display different words for the button
  3. Update the tags in clinical resources page. The users can click the tags and the clinical resources page will display accordingly with the updated tag in the search url parameter.
  4. Sending email to the clients to ask for feedback

 

 

 

Training: WordPress 

Started on: Nov 18, 2022

Staff Guidance: Ruben, Marianne

Description: For this training, I try to learn more about WordPress regarding update the design layout and change of the content. I looked around the Internet for a good tutorial, and I find the common pattern for it is that they all use Elementor Plugin in order to help with customizing the content. Some of the trainings with the help of Elementor are very beautifully designed without going deep into the coding or the backend of the software. Elementor is a plugin that helps the users can drag and drop different features into the website as they want. They can put on icons, google maps, and videos into the position they want on the website. But I wonder if we will ever use Elementor in our STA project. Regardless, it is good tutorial to let me know about customizing WordPress and changing different components of the websites. 

So for this tutorial, I follow each different steps in order to customize the design with Elementor. I am also doing another tutorials with Elementor right now that lets you to create your own theme with pHp that I will update in our next meeting. 

  1. From the tutorial, I know how to use the plugin to download a Starter Template which helps with installing different templates that makes the process of editing it extremely easy. The tutorial chooses Elementor to be the theme.
  2. I edited the home page the same design with one of the website I have before.
  3. I also edited the Testimonial section with the background as a video and change the overlay of the background to be darker in contrast with the white letter.

 

 

 

 

 

 

Week 9 – Thang

By

Week 9

Project: Exposure Therapy Lab

Started on: October 31, 2022

Completed on: Nov 2, 2022

Staff Guidance: Ruben, Marianne

Description: For this project, I was asked to fix up some stuff relating to Research Posts and Logo Walls.

  1. Finished the logo displaying as a carousel
  2. Display the Research Posts
  3. Emailed the clients and asked for more feedback. The clients were really impressed with the designs and all of the changes I made. The clients asked for two more changes relating to the search function of the research posts and the display of the button of the word.
  4. Edited the display word of the button.
  5. Working on Adding a Search Bar, and Selecting multiple topics at once

Project: French Website 

Started on: Nov 2, 2022

Completed on: Nov 3, 2022

Staff Guidance: Ruben, Marianne

Description: For this project, I was asked to add different layouts and designs based on Carrie’s website.

  1. Adding map and different modules to the Program Suite Destination Page.
  2. Adding Key Pedagogies and Key Technologies to the Page.

 

Week 8 – Thang Truong

By

Week 8

Project: Exposure Therapy Lab

Started on: October 24, 2022

Completed on: October 27, 2022

Staff Guidance: Ruben, Marianne

Description: For this project, I was asked to complete different things. 

  1. Display different research posts as rows like Maddy’s new designs.
  2. Fixing up the size for the consortium member banners in the home page.
  3. Moving the logo wall block and + subscribe to mailing list block to be after “consortium member” banner
  4. When clicking on the “read more” of the research posts, the user will see clinical instead of research like projects nested under research page.
  5. Tell the client how to change the title based on the type of resources as icons.
  6. Fixing up the layout of the About Us Section.
  7. Display the Research Posts
  8. I am still working on walls of logo as carousel.

Challenges: It took a lot of time for me to do the research post because there is another blog item that was done for the project, and I thought I could easily duplicate and use it, but no matter how much I tried. It cannot display accordingly. Therefore, after days at the problem, I took another approach to display it.

 

 

Project: LAITS Main Website

Started on: October 26, 2022

Completed on: October 26, 2022

Staff Guidance: Ruben, Marianne

Description: Recently, LAITS just changed its domain with laits at the end, and therefore the website has some broken links because the links are not updated accordingly. Therefore, I was asked to check the whole site if any of the links are broken, and if it does, update it.