Clear ideas with a curious touch.

exploring bootstrap

screenshot of project two, panel one website

Website: Project Two

The Problem.

We already know that the foundation of web development boils down to the basic understanding of HTML and CSS. So, what happens when you introduce structure, templates, and pre-fab features you can easily copy and paste into your code? Enter Bootstrap.

Hand-coding a website is cumbersome, but when you have a front-end framework at your disposal, it makes the process from conception to deployment incredibly quick. Bootstrap is mobile-first and responsive, and includes packages for JavaScript that provide virtually endless arrangements of design and animation.

My goal for this project was to learn Bootstrap and use the framework to expand my knowledge of HTML, CSS, and JavaScript.

The Solution.

Using Cyberduck, Visual Studio Code, and the Bootstrap framework, I developed three panels of the same website as a visual progression of the capabilities of Bootstrap: a hand-coded page using HTML, CSS, and JavaScript; a Bootstrap template using the same content as panel one with no custom CSS; and the same Bootstrap template using custom CSS to match the original website’s look and feel.

The Curiosities.

  • JavaScript animation of typed out code
  • Conversational storytelling with personality