building a website using html and css
Background
In the class Intro to Web Authoring, I learned how to use HTML and CSS with the end goal of creating my own portfolio website. Throughout the process, I also became familiar with wireframing, using style tiles, as well as creating a mockup and a prototype. Additionally, I learned to use media queries to accommodate for computer, tablet, and phone screen sizes.
​
Prior to taking this class, I had no previous knowledge about coding, so the task of building my own website was both incredibly challenging, but also very intellectually stimulating. Through this class, I was also introduced to the concept and importance of web accessibility and attempted to implement it into my website.
​
This website is not available to view, as I never purchased a domain for it, but I have included multiple images of what it looked like down below!
The Process
style tile
The first step to creating my website was brainstorming the look of it all by using a style tile. With a style tile, I was able to preemptively choose a color palette, the fonts I wanted to include, how the buttons would look, as well as the overall feel of the website.
In addition, prior to creating my style tile, I had the chance to browse through various existing professional portfolio websites in order to garner a general sense of what a portfolio website should represent, along with the limitless possibilities of creativity that can be applied to a website.
​
Overall, my color scheme was inspired by Hayao Miyazaki's animated film Spirited Away. As for the overall feel, I wanted to go with mainly Serif fonts since they gave a rustic vibe. I think the softer, pastel colors complimented the vibe as well.
wireframe
With the feel and look of the website established, the next step was to create a wireframe in order to brainstorm the layout of the website. This process was done in two steps: first, I hand-drew five initial layout ideas (from left to right):
​
-
Left: This wireframe had the format of the descriptions alternating between the left and right side of each project
-
2nd to left: This wireframe was intended to make the text appear when you hover over the picture. However, I realized that it is done with JavaScript, which we were not going to cover in the course.
-
2nd to right: Here, I was debating whether or not to put the menu as a bar or in the corner. I especially liked the idea of having the text in the landing page overlap a picture in the background that took up half the space.
-
Right: I liked the idea of having an “Explore” button on the landing page and nothing else, so the user had to click the button in order to advance with viewing the rest of the content in the website
In the second (and final) wireframe, I chose three created a digitalized and more organized layout:
​
-
Left: The text in the landing page overlap a picture in the background that took up half the space combined with the descriptions of the projects appear on the sides of the pictures of the projects
-
Middle: The menu as a bar along with an explore button on the landing page plus text that appears when you hover over a picture
-
Right: The explore button on handing page combined with a condensed, collage type of display of projects
mock-up
With all my foundational ideas in place, the next step was to create a mock-up of my website, which was done on Microsoft Word. Here, I combined the colors, fonts, and layout to create a rough model of what I wanted my website to look like. I created a mock-up for a landing page, a menu page, and the explore page.
With the landing page, I envisioned a page with no other buttons to press except for a lone "Explore" button. Pressing it would lead the user to the explore page (bottom picture), where my projects would be displayed.
For the explore page, I wanted to include a menu button at the top left hand corner to access the menu of the website. I also wanted my projects to be displayed with alternating patterns of the project pictures on the left and a description box on the right. Along with a "View More" button that would allow users to view a more in-depth description of the project.
​
Lastly, my idea of the menu page would consist of it taking the entire space of the screen. From there, the user would be able to navigate from the landing page to the explore page, as well as the "About Me" section.
prototype
The final step before attempting to code the website was to create a prototype of it. With PowerPoint, I created an identical version of my mock-up and incorporated hyperlinks to certain buttons. This allowed for the slides to function as if a user was using the site, except it was through PowerPoint slides.
Final Product
With all the planning steps completed, I was able to code the website. Here is a video where I go through the final product of my website:
One thing that I added throughout the website were various drawings. All the drawings and animations are ones that I have done in the past. Instead on clumping all my artwork into one section of the explore page, I decided to spread them throughout the site to help express more of myself.
​
Although the colors may clash, the designs not professionally put together, and some of the elements misplaced or misaligned, I'm proud to have been able to build a website in the end, especially without having prior knowledge in coding. It's obviously not perfect, but a lot of time and effort was put into it to match the mock-up and prototype I made beforehand as closely as possible and I am happy with the overall outcome:)
Challenges
In the brainstorming phase of this project, I found it difficult to compromise with a single design; there were several color palettes and feels that I wanted to try out, so focusing on choosing one felt impossible. Furthermore, while creating my style tile, I found it very easy to get lost in the details and go off-track by focusing too much on one element. For me, the color scheme was the hardest part to choose. I always thought that I had an eye for design, that I knew what colors could complement each other, but after working on the style tile, I learned how difficult it is to do. I constantly wanted to add more colors that I thought looked good together, but when I got to the part of assigning colors to headings, subtitles, and buttons, I realized the importance and convenience of minimizing the number of colors.
One thing that definitely helped with the process was looking at other websites; it was hard for me to start from scratch, so by viewing people’s websites, it helped me to find inspiration. This course's introduction to style tiles allowed me to understand the importance of them, especially before jumping into making a website, or any other product that requires multiple design choices. Similarly, I found trouble while creating wireframes for my website. It was very easy to come up with a standard wireframe, but extremely difficult to map it out to make it unique website flow that was different from the average website. Again, by looking through people’s portfolio websites, it helped me become aware of the different ways of navigation that are used. I attempted to incorporate unique designs into my wireframe, but I think the end-product did not differ much from a typical website.
​
Another aspect of this project that was troubling to me was acclimating to the accuracy that is needed when coding. During the early stages of coding the website, the attention to detail and lack of autocorrect that was present during this stage led me to making countless mistakes. One frustration in particular that I ran into was inputing images. The most prominent one was typing in "scr" instead of "src" (a minor detail) and could not figure out why the image was not showing up. After carefully scanning through each line of my code, I realized the error and earned how sensitive capitalization and spellings were when it comes to coding.
​
Nevertheless, I expanded my knowledge in HTML and CSS over the course of this project.