Web Development
For an advanced web development class, I was tasked to create a personal website using HTML and CSS. This class also focused on web development principles and user experience.
Thought Processes
Since a simple box design did not excite me much, I decided for a layout with irregular cloud-like box shapes, each being a different size. I researched that to create uneven edges I could use border raiders and then implement the second value for the radius.
Construction
After selecting the tools to execute the layout, I worked on the content for the index page. I first edited the text in the HTML file, and then started to create the boxes around it. Then I added empty blobs to fill the empty space since the page seemed very bare. To reduce visual busyness, I decided to break up the empty boxes by putting drawings into a few of them, adding to the organic look of the layout. Looking for a color scheme that would complement the chaos of the uneven boxes, I ended up with a set of pastel colors. This provided variation to the boxes and created a warm impression.
Nav Bar
To give the overall appearance more uniformity, I chose the same style of boxes for the NavBar (navigation bar). I also added in the CSS code a hover element that darkens a box underlines the text to give the user feedback to know that a box is clickable. For resizing the NavBar, I put in the media query for it to become a block element
Media Queries
I changed the boxes’ width to be 100% of the site to make the design responsive. For the empty boxes I set the display to zero because the design would become too squeezed together and would take the focus away from the actual content. When working on the media queries in CSS, I decided to go back to add classes to most of my elements so I could easily change their dimensions all at once. I did however struggle with the classes not working on some elements so for future work I would like to revisit why it had not worked.
Learning
It turned out to be a mistake to first create the layouts and then add content. I eventually had to entirely redo the layout to adapt it to the content. A beneficial idea was to use the same heading layout for the two separate pieces of information on the project page. I also selected used the same colors for the following text boxes to make it obvious that there are two sections. Also, decreasing the margins in between the two sections visually underlined that there are two different sections.