In this project, our group aimed to redesign the official webpage for the Broadway musical "Wicked" to enhance website navigation and improve user experience. As a designer and programmer, focused on designing the website homepage UI by Figma and building the homepage through HTML and CSS.
Using HTML and CSS to create a functional website.
Use Illustractor to do graphic design and improve the user experience.
In our website, we have a function to let users take some small basic knowledge quizzes for Wicked. After the group discussion, we decided to use Javascript to achieve this function. For the first time using Javascript, the biggest challenge is learning how to use Javascript in HTML coding.
Just before the coding, I take some time to learn about how to use Javascript through the online tutorials. After watching these tutorials, I start the coding for the quiz part.
Create a specific file for Javascript and the code in this file.
Insert the Javascript function into the HTML code.
Set the style for the quiz part in CSS file to create quiz function for all different size of windows.
After Coding for the quiz part by using Javascript. The quiz part is created successfully in our website.
This project provided me with valuable lessons in creating websites using HTML and CSS, as well as understanding how to implement in-page changes with Javascript. Additionally, resolving issues related to window size changes enhanced my skills in using CSS for layout adjustments and font size changes — as a crucial aspect of website development based on HTML and CSS coding.
In the future, I believe the skills I get in HTML and CSS coding for creating a functional website for all different window sizes are important in website development. I also believe that the experience of using Javascript to enhance the user experience is also important in website development.