Skip to content
Mock-up for local painting company website
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
images
js
README.md
index.html

README.md

Photo Phinish Painting Website

A learning project focused on leveling-up with:

Table of Contents

  1. Demo
  2. Description
  3. Highlights and Discussion
  4. Author, Credits and Links

Demo

Try it out!

example

Description

This is a basic website for a local painting business, which uncoincidentally is run by my brother. This is the first website I've built that isn't a clone of a popular homepage like Apple or Mint. This is the first time I've used a front-end framework to build a website. I chose to work with Foundation for Sites.

How is Foundation used in this website?

  • For the basic organization of the content into a grid format.
  • To make the site more flexible and responsive.
  • All the cool behavior, like the testimonials slider and the responsive top bar.

Highlights and Discussion

On choosing a front-end framework.

I am writing this README a few months after building the website (SAD!), but I recall a lot of hemming and hawing about whether I should use Bootstrap or Foundation. I also recall there were some other options, and I also recall receiving some sage advice that I should not be hemming and hawing so much. The basic arguments I heard were: "Bootstrap has more features and a larger community, but it's a bit bloated. Foundation is lighter weight and offers more flexibility, but lacks support." Or something like that. In the end, I decided to go with Foundation for two reasons. First, I am a contrarian and typically choose to side with things that are less popular. But second--and more seriously and more importantly and very much worth noting if you are a professional web developer--I chose Foundation because I liked their docs better. As a newbie, I found Foundation's documentation accessible, easy to use and easy to understand. The content is overall really well organized, and they have lots of great videos and explanations of how the different parts of the framework function and fit together. Really, from my perspective it was a no-brainer (after all that hemming and hawing, of course).

On not understanding how your website works.

As mentioned above, prior to making this website I had done some clones of popular websites like Apple, Mint, Google, TNW and Smashing (basically all the tasks from The Odin Project) HTML and CSS section. While I had learned an awful lot, at the time I had almost no JavaScript under my belt and still considered myself a beginner at HTML and CSS. As such, much of the workings of the Foundation framework were a mystery to me. Anything on this website that moves or responds to user interaction or is in any way dynamic was simply code copied and pasted from the Foundation docs. I tested and tweaked and did some modifying around the edges, but I was careful not to penetrate the black box of functionality lest I unknowingly and irreversibly damage something under the hood. And of course this raises a serious question as to what it means to be a newbie web developer these days. You can learn to make really cool stuff very quickly with very little knowledge of how any of it works, and maybe even get paid for it. There isn't much short-term incentive to study web development deeply. In the long run, you have to find some kind of motivation to move beyond the surface and study in-depth. For me, Since the time that I made this site, I have continued to study HTML and CSS--as well as JavaScript, networking and internet protocols, algorithms and data structures, the DOM, Git, etc.--and I definitely have a much better grasp of what the web is, how it works, and how my websites and apps function therein. I am committed to continuing to learn the ins-and-outs of all these fascinating technologies, but I also have to admit that frameworks like Foundation are a godsend for abstracting away mundane tasks and helping developers focus on the details of customizing and enhancing websites and apps.

Author, Credits and Links

Author

  • Jeff Bothe, @jmbothe

Links

You can’t perform that action at this time.