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.

W3 Schools Bootstrap 2

W3 Schools Bootstrap 2

This used Bootstrap and was based on this course. This site demonstrates Bootstrap features such Navbars, Dropdown Menus, and Forms.

I think this site might be my formula for reviewing, learning, and mastering computer science concepts. I gained a great overview of Bootstrap by building with the sample code and adding short explanations. The next step will be lots of building and applying what I learned these last two days. But I think the formula will be to gain a quick overview by building and sharing, and then diving into the details with more building and applying.

W3 Schools Bootstrap

W3 Schools Bootstrap

This used Bootstrap and was based on this course. This site demonstrates Bootstrap features such Contextual Classes, Responsive Embed, and Badges.

Update: I decided that rather than simply reading the W3 Schools Bootstrap Tutorial, I could learn, practice, and master the material even better by building it while explaining it. Basically I am attempting to gain mastery by doing and teaching/sharing.

On another note, I started playing around with Free Code Camp. The lessons are well-organized, interactive, and succinct. Their explanation of what to do when you are stuck is a must read.

Furthermore, their Bonfires (JavaScript coding challenges) are actually enjoyable. They did a great job of making the challenges flow because they start off relatively easy and progressively increase in difficulty. Most other sites have coding challenges that require you to go from sitting to sprinting, while Free Code Camp’s challenges take you from sitting to crawling to walking and to eventually running. Check out Free Code Camp if you want to dive into JavaScript.