Creative Portfolio

Creative Portfolio

This site used HTML, CSS, and Bootstrap. It was an emulation of elements from this layout.

404 Page

404 Page

This used Bootstrap and was based on this UX advice. This site demonstrated the importance of giving the user a clear path when he or she is lost.

I originally wanted to build something amusing like Github’s 404 page

404

or something incredible like these 40(4) pages. But I learned that a 404 page that appears similar to the rest of the site is less disconcerting for the lost user. Also providing the user the option to contact you with feedback as well as a way to return to the Home page creates a better experience. Overall I learned that sometimes less is more when building a web page.

Microsemi

Microsemi

This site used HTML, CSS, and Bootstrap. It was an emulation of elements from this site.

Update:

This site was built much quicker than the previous Bootstrap sites. I think the more I use Bootstrap the more I can reuse code from previous sites. Furthermore the better and more quickly I recognize patterns, i.e. 3 columns means each column will have a width of 4, if there is a wide carousel maybe hide that for smaller phone screens.

On another note, I finished the coding challenges (Bonfires) at Free Code Camp. They did an amazing job of having the challenges progress from easy to medium to hard. As a result the JavaScript problems were actually enjoyable. I am now doing a problem each day from Code Wars.

At first I thought coding challenges were pointless, frustrating, and unpleasant. I now realize they can be enjoyable if they are bite size and not too easy but not too hard. They are also a way to warm up my mind and also to learn language and specific ways of solving problems. Furthermore after you solve a problem at Code Wars, you can gain access to others’ solutions. Viewing others’ solutions is eye-opening and informative.

Architects

Architects

This site used HTML, CSS, and Bootstrap. It was an emulation of elements from this Bootstrap 2 site.

Here are the links that helped me:

Hover Nav
Background Full Page
Semi-transparent footer

I am getting much more comfortable with Bootstrap and adjusting the columns to make the site look nice at different sizes. I am starting to be able to look at a page and be able to guesstimate the column widths, but not the pixel sizes just yet. Also I am much better at searching for the CSS and Bootstrap terms to build and edit the pages.