Ensomniacs | Eli Brewer

• Prototype HTML Assignemnt: Gordo
• CSS Demo
• Flexbox Froggy
• JQuery Cycle Lab

• Float 1
• Float 2
• Absolute 1
• Absolute 2

• Logo Assignment
• Bear Image Edit

Segway Centaur

click on the images below to expand

Review and Reflection

For the final revision, I asked three family members and my partners to interact with the initial design and provide feedback on what improvements that they would find necessary for a better UX. I also received feedback from Professor Wallace regarding validation of the code, better colour palette options for the contact form in the footer bar, and with the logo in the upper left corner. The initial design was built using only HTML and CSS with a small amount of javascript for the contact forms. At the time, I had forgotten to validate the code so there were some things that I missed that pertained to outdated html/css that I utilized more often circa 2009. On initial interaction, I was told that everything was easily legible, the dark grey background in the first information section with the white text made it easy to read, grabbing the reader's attention. There weren't very many suggestions from the five people that I had asked to interact with the page aside from being able to toggle a dark mode. However, seeing as I don't have much practice with JS currently and the methods I used within CSS and HTML in the past to provide this option were through filtered options on older websites.

The modified version now incorporates javascript on the main page for users to interact with the images under the section "Specs." This interactive feature came about after a suggestion from my mother who had a harder time reading the font associated with the diagrams using an older laptop with a lower resolution. No changed were made primarily to the majority of the layout other than to add this functionality and more validation of the code to consolidate the header properties. I ended up going into Wufoo and making two alternative forms for the contact to better sync with the overall colour scheme of the layout. One of the things I still had trouble tyring to do was the image replacement that was suggested by Professor Wallace. I tried most methods and could not get it to function the way I wanted to in the navigation bar.

A lof the furstration that I had with this project more so dealt with the fact that I wanted to do something more intricate that invloved a lot of JS that I had no knowledge of how it interacts with the page to bring a more comprehensive and professional look to it. However, I know that with my limited knowledge currently, it would be better to showcase what I do know and what I have learned as a part of this class rather than expanding into an area that I'm not 100% comfortable with executing just yet.

Please feel free to interact with both the intial designa and modified designs listed above.