STA Blog

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