Live Site: http://samanthasolomon.com/RoosterGrin/
What you technologies you used and why (if you only used html, css, and js please explain any templates or frameworks you may have used i.e. bootstrap)
For this build, I used plain HTML, CSS, and JavaScrip, supported with Sass, Shoelace Web Components, and Font Awesome.
I went with this approach because this is a one-page app with no need for routing or creating an multi-page experience. I also built most of the component myself to allow for complete control of styling and functionality.
I did employ the Details component from Shoelace because it was nearly perfect for what I needed and Shoelace is easier to customize than other component libraries.
At the end of the project, the index.html file got a bit unweildy. I considered switching to a component baised frameword to create better readibility, but decided it was not a good use of time.
I did not achieve the mobile responsiveness due to running out of time. With the wireframe design better suited for desktop, I started styling for a larger viewport. However, going from desktop to mobile is always much more work than going from mobile to desktop.
In the future, I lean more into the component based file structure and design for mobile first.
I really enjoyed using Scss to it's full capacity. Previously, I had only used it for much smaller projects, but I was able to really utilize it's conciseness and modular nature with this project. I am sure I could make the code even more concise with a bit more practice.
For this build I referenced:
- CSS Tips and Tricks blog
- Kevin Powell, blogger and youtuber