jenziel / whats-for-dinner-jen-ziel Goto Github PK

• Have you ever had plenty of ingredients stocked in the pantry, but not known what to cook for dinner?
• This app randomly generates meal options to help the user get inspired to cook a meal.
• Users can add recipe names to the app to build a rolodex of meals that they want to be reminded to cook.

To get our app running, simply fork this repo and use 'git clone' with our SSH code to copy it down to your local machine. Open the local directory in VS Code or some other text editor. Use the command open index.html to start interacting with the app.

I am 3 weeks into Module 1 at Turing. This week we learned CSS and had the opportunity to create a CSS file from scratch. We were given five and a half days to work on it.

This project was just me, Jen Ziel. https://github.com/jenziel

The learning goals for the project were to:
1. Get experience building an application that utilizes HTML, CSS and JavaScript.
2. Practice working from a provided comp.
3. Understand how to listen and respond to user events.
4. Individualize your programming skill-set.

I worked with VS Code, devtools, and the aforementioned file types. I also worked with file paths to reference images stored in an assets folder.

• My first win from this project was improving my understanding of the Box model. My understanding of padding , border, and margins has improved through using devtools to hover over elements that aren't lining up how I would expect them to and comparing the different box models for each.
• Another win was fully grasping how the html elements need to nest within each other. In the beginning that wasn't clicking for me 100% of the time, but now it feels very intuitive that the child elements live inside the parent element. The element tags need to be indent further in from the parent, but ALSO be contained within those tags.
• Some challenges I faced were mostly related to organizing the CSS. My main focus was on getting the visual feedback to match the project spec, but this led to messy, inconsistent, and redundant code. I felt challenged by refactoring the css to all be in the same units for example, because I had the aesthetic pretty close with a mixture of em/vh/px but I know that it would be best to keep the units constant. I will continue to research how the different css units work to overcome this challenge.