# [MSTU 5003] Final project documentation --- --- ## **This is the documentation for my final project, which you'll find in [this link](https://codepen.io/rfr2126/full/VwMjveq).** --- --- ## **1. What this project is about** ###### This project is a website for "Curbed Capitalism," a short documentary that is currently being produced. The film is an investigation about the practice of "stooping," that is collecting discarded goods and putting them into use again. "Stoopers" are usually folks who get those products for own use, but there is a nascent market around it this practice, fueled by social media. --- ## **2. Website structure** ###### I built a one-page, scroll-down website with three main sections: [hero](https://hackmd.io/@renatorusso/ry2XbDcct#/3) | [user interaction](https://hackmd.io/@renatorusso/ry2XbDcct#/4) | [about](https://hackmd.io/@renatorusso/ry2XbDcct#/5) --- ### hero ###### This is what the user first sees when they enter the website. Its background has an image to which a CSS `grayscale` filter is applied, as well as the value `cover` to its `background-size` property. In next iterations, this section will possibly contain a video, instead of the image. ---  --- ### user **interaction** ###### Below the hero, this is where JavaScript enters to offer users the ability to interact with the interface. Its 3 subsections follow CSS Bootstrap resopnsiveness rules to either stack, or to act as equal-width columns below the `medium` breakpoint --- ###### the user interaction section stacked and in columns  --- ###### This subsection uses Bootstrap button `classes` and a JS `alert` triggered by an `onclick` HTML mouse event:  --- ###### This subsection prints the whole array or a subset of filtered elements. It is a combination of a JS `filter-like()` function and a function that creates an `innerHTML` component  --- ###### An HTML form that uses the types `text` and `file`  --- ### **about** ###### A section containing text and image that uses Bootstrap grid system, along with `padding` utilities to ensure responsiveness across breakpoints.  --- ## **3. Short reflection** ###### This semester I went from a close-to-zero to being reasonably confident using HTML and CSS. For JavaScript, I feel that I learned much about its principles and mindset, plus a few *standards* that I have been practicing in labs, doodles, and the final project. --- ###### The most efficient learning approach that I tried for JS was two-folded: first, I watched online videos, making sure I could reproduce the code in codepen and, later, in Visual Studio Code. Then, I tried to replicate the code in new contexts, in small projects that were relevant to me. --- ###### In this project, I attempted to employ user interaction features as part of the experience of learning about a film and the ecosystem it seeks to capture. I understand that, throghout the semester, I learned enough to literatlly go from scratch (see below) to a [functional, hosted website](http://eqode.org/curbed-capitalism/curbed-capitalism.html).  --- # Thanks =)