/dog-party

First week FE Developer Project

Primary LanguageHTML

##Dog Party Exercise

Dog Party is a newbie front end programmer exercise in modeling a website based off of a visual comparison. Much of the challenge involved diagnosing a model template's code structure without the help of the inspector tool and then attempting to recreate the webpage while eventually adding in various javascript functionalities.


Much of this initial exercise (a first week project at Turing School of Software & Design) involved steep learning curves. I chose to do it in isolation without the help of others, which was a massive mistake. I was unable to complete the exercise and languished inefficiently for far too many hours on relatively insignificant aspects of the project. For example, rather than using proper grouping of elements within respective containers and then sort of bulk styling - I opted at first to spend so much time trying to situate everything in piecemeal fashion using relative positioning or by adjusting odd pixel values for height and width. This created a compounding set of issues once I learned that the styling would disintegrate once the browser size reached various breakpoints. Approaching the series of tasks involved with this project in a linear fashion was a mistake. It would have been more efficient to step back, assess the work in a holistic fashion, recruit the necessary wisdoms on initial approach strategies Furthermore, I lacked a sense of appropriate triage until near the end of project when I found myself struggling to get any of the javascript functions to run.



###My HTML & CSS in action, though things look a little different with altered screen viewpoints

###Here is an example of my thinned out webpage at a smaller breakpoint. Due to a lack of proportional positioning using appropriate groupings, etc, I chose to shed certain elements entirely so to preserve the readability of the main content on the page

And there you have it. Coming from no experience I'm happy to succeed in some marginal ways with this project despite leaving the later iteration aspects of it incomplete and failing to really get the javascript locked in. It's clear to me now just how valuable outside help and mentorship is to the process of ascending the web development learning curve.

The following represent incomplete aspects of the project:

  1. Tooltips
  2. JS functionality / Disappear & alterText (even though I think I got the syntax correct)
  3. Input and Textarea forms
  4. Well scaled CSS (without shedding large elements to accomodate content at small page sizes)