NMIX 4010/6010

Web Development

View my full website for all projects and assignments at…

Artisanal hand-crafted website

The website, titled “Music is my therapy,” was the first project in the course. I was tasked to create a three-page website by hand using only HTML and CSS. From this project, I relearned content and put all of my skills into action! I focused on challenging myself by implementing qualitative elements I taught myself outside of class through W3 Schools and video courses. The most important detail of this website that I want to highlight is the navigation bar. I made the navbar horizontal from an unordered list and aligned it to the center using margins and padding. With every project, especially my first one, I walk away with more knowledge than I came in with.

Nhi, the Musical!

Bootstrap Triptych

The Bootstrap triptych project consisted of crafting three single page websites based on the same subject. The first panel used only Bootstrap components, the second used only the pre-created theme and the third used additional CSS to customize the theme. Of the three pages, the one that I loved most was the last page because it combined elements of both my first and second panels that I felt made the website unique. Having a strong foundation of HTML and CSS made this project go extremely smoothly; if anything, it strengthened my ability to grasp the interface components and the concept of responsive design that came along with the CSS framework.

Panel One

This panel was made using only Bootstrap. Since it was the first single-page I created, I found it challenging to understanding the components (i.e. carousel, captions, resizing containers and media queries). I was proud of the outcome regardless!

Panel One

Panel Two

This panel utilized a theme with no access to CSS customization. I loved the template, “Laura,” that I chose from BootstrapMade. I chose it because I wanted to keep hero/page header and the buttons on the ticket booking section.

Panel Two

Panel Three

This panel combined elements of both pages using CSS and the Bootstrap theme. I would say this took me the shortest to create, but that was because I knew which areas to change and how to change them. At this point, I knew where I was navigating!

Panel Three

WordPress Variety Pack

Of all the projects that I have done thus far, my favorite has been the WordPress variety pack. I chose to create two separate installs on my server titled “skin is きれい,” which translates to beauty in Japanese. I highlighted skincare routines, product recommendations and various personal blog posts that I wrote myself. For me, having a foundation in WordPress feels equally as important as HTML because it reinforces learning through a creative, short-cut of a tool. This project had potential to create its own brand, which I felt emulated my future aspirations.

Commerce

My e-commerce website used the Superb WordPress Themes with the WooCommerce plug-in. For this website, I decided to try out a plugin that would help with choosing typography to help my styling process. I categorized my products into three sections and I uploaded feature images/galleries for every aspect. The homepage implements three columns with cohesive photos, linking to their different categories.

E-commerce

Content

I used the Inspiro Lite Theme and I changed it to suit the style of a blog or news publication. I wrote most of the posts myself, which was what I enjoyed doing most. Another main component that I was proud about was the video in the background of the header and the overall aesthetic of the website. I tried to make a website that was actually usable for a skincare website, so I focused on minimalistic elements.

Content Blog

JavaScript Jamboree

The jamboree jukebox used a “heavy dose” of JavaScript, acquiring 30 second samples from the iTunes library and thumbnail images. JavaScript was hard to grasp initially, so I started by taking inspiration from previous codes, learning through YouTube tutorials and creating a concept. The background image used moving pictures from anime to further the visual element where I used additional CSS. I, then, focused on the functionality of it all. I learned through this assignment how to utilize buttons to make audio controls: play, pause, forward, and backward. Overall, my Jukebox project was well-executed, though it does lack functionalities of a media player.

Nhi’s Curated Playlist

Final Project: Freelance Art Portfolio

Creating a portfolio for my friend Daniel, an aspiring artist and graphic designer, was a fulfilling project that allowed me to showcase his talents in a digital format. Using WordPress for its adaptability, I customized themes and integrated plugins to suit our needs and Daniel’s unique style and personality. Selecting the “Astra” theme, originally tailored for photography, I adapted it to feature an “About Me” section and an art gallery showcasing Daniel’s work. This project proved to be relatively straightforward compared to others I’ve tackled. I’ve come to realize the importance of prioritizing the client’s vision over my design preferences in my future career. Thus, I opted for a simplistic and minimalistic approach, aligning with the standard format of art portfolios, which typically include just a few sections like work samples or contact information. The website aimed to highlight Daniel’s art and creativity, rather than the design of the website itself, emphasizing the intricacies of his work.

Daniel’s Exhibit