2026-09-29
Polished the site by adding smaller styling changes
-
Made the navbar use flexbox
-
Added the footer to all nested pages as well
-
Added new custom backgrounds to each of the pages
-
I learned how to use the !important keyword (takes precedence over even inline styling, used it to make the text white for the cake page as the background was black)
-
I learned how to make different patterns in the background (stripes, dots, concentric circles, etc)
2026-09-26
Header and footer added + filled out placeholder recipes + flexbox on home page, etc
Changes:
- Added the apple pie recipes + pages
- Filled in ingredient list and recipe step placeholders with real recipes on all pages
- Replaced table on main page with flexbox layout
- Added a global navigation bar including a random recipe button
- Made small spacing (padding and margin) changes around the website
- Added a small footer on the home page
What I learned:
- I practiced using combinators and specificity in css (for example, styling specifically the links inside each list option in the navbar with “.navbar li a {…}”)
- I learned about border box reset (padding and border and included in the assigned width/height, helps elements stay organized the same on the screen even if you increase the padding or border values)
- Practiced adding a navbar and footer and how to make the current page of the navbar highlighted (assign the active class)
- Did a little javascript for the random recipe button (picks a random recipe that is not the current one and navigates to that page)
- Practicing using css shorthand (border: 2px solid black)
- I learned about how margin collapses
- Inline vs block elements
- I learned how to use flexbox
2026-09-21
Styling added to home page and nested pages + added cake page
Changes:
- Changed the fonts and their weights site-wide
- Added the rich chocolate cake recipe + page
- Polished the table on the home page with colors and padding
- Added padding and margins in many areas across the site
- Added a striped background
- Replaced the “Go Back” link with a styled back button
- Added image borders
- customized bullet point type for unordered and ordered lists
- Featured recipe on home page
What I learned:
- I refreshed my memory on the basic css (classes, id, type selector, universal selector)
- I learned how specificity works in css and how it decides what styles take priority
- I learned about combinators
- I learned about list-style-position: inside and used it to place the bullet inside the text box for my unordered and ordered lists
- I learned how to make a striped background with repeating-linear-gradient
Next Steps:
- Adding more styling to the nested recipe pages
- Add the remaining 2 recipes to replace placeholders
- Filling in the ingredients and steps on the recipe pages
2026-09-17
Basic site html home page + recipe specfic pages
Changes:
- Added in the headers and descriptions on the home page
- Added in an image for each recipe
- Placed the recipe preview cards inside a table
- Linked the cards to their respective recipe pages
- Created recipe pages with placeholder lists for ingredients and recipe steps, and a return to home link
What I learned:
- I refreshed my memory on the basic html structure as well as common tags
- I learned how to make unordered and ordered lists (as I did for my ingredients and steps respectively)
- I learned how to link to different pages within the site with tags (for example, the back link on each recipe page)
- I learned how to add images with a defined width without squishing/stretching them
- How to add a table (as i did to hold the recipe cards on the home page)
Next Steps:
- Adding css (styling) so it looks better
- Replacing the bottom 3 placeholder recipes with 3 more ones
- Filling in the ingredients and steps on the recipe pages