All solutions

What are you most proud of, and what would you do differently next time?

Getting a pretty good handle on most of the main CSS for styling. Also starting to get used to Astro, even though I skipped the best practices for it in this challenge :p

What challenges did you encounter, and how did you overcome them?

Had a bit of trouble finding the best way to increase the indentation between a bullet point and the bullet point content. Looking online, it was interesting to see how the approach to this has changed over the years in CSS. Something that has existed for a long time in programs like MS Word seemed to have so many approaches in CSS

Also having a difficult time matching font sizes and margin when using the desktop and mobile images included in the design, so decided to leave them as is for now

What specific areas of your project would you like help with?

One thing I am interested in knowing is...

If we turned the recipe page into more of a web app, where users can upload their own Recipes, how would you structure the data? In Astro, it looks like we could pull the Markdown or HTML representation of the recipe, and apply some rendering on top of it. However, I am curious to hear what type of data structure would be used to force a clean consistent structure between recipes.

e.g.

recipe: { 
  title: string,
  description: string,
  preptime: string, // expect markdown and apply the purple styling on here
  ingredients: string,
  instruction: string,
  nutrition: array

Would this be on the right track? Is it over engineered? Any feedback would be appreciated! Thanks

What are you most proud of, and what would you do differently next time?

Started from the astro sample project this time. Beginning to have my own "starting point" for new projects using astro and static pages. Began to experiment with reusable components in astro.

What challenges did you encounter, and how did you overcome them?

Ran into a bit of trouble with the best way to componentize the links. Originally used an unordered list, but eventually decided to make a "SocialLink" component, and use the typical array.map to output a bunch of them.

What specific areas of your project would you like help with?

Would like to hear some opinions on the way I componentized the social profile. The idea is the data could be managed somewhere and updated without any updates needed for the UI

A slightly modified version of the component from the code:

What are you most proud of, and what would you do differently next time?

Was happy to do this small project using astro build environment. The documentation provided clear steps on getting a gitlab pages build automatically. Although the project did not require many of the features astro provided, at least this experience will help with future attempts

What challenges did you encounter, and how did you overcome them?

Was not able to perfectly match the mobile design. In particular, the image will truncate when in the mobile view while preserving the rounded edges.

To get the truncating behaviour, I thought I would need to put the image inside of a div with rounded border that changes size, and use overflow: hidden to visually truncate the image on mobile.

However, when I tried this approach, I could not get the rounded border of the surrounding div to perfectly match the height of the image. Unfortunately I decided the rounded corner on the image was more important than the truncation

What specific areas of your project would you like help with?

If anyone has any hints on how to truncate the edges of the image, I would like to hear the secret behind the magic trick :)

Thanks for reading!

What are you most proud of, and what would you do differently next time?

Good intro course. Good to work on a simple UI component without worrying so much about React Components, tailwind classnames and more. It was helpful to take a step back and style the raw HTML with CSS

Next time I would want to add a tiny bit more structure around the project. For example, separating style out into it's own file, or using a build / dev server from the get-go.

What challenges did you encounter, and how did you overcome them?

Finding a static site generator that worked on the raw HTML scenario. Most site generators expect us to be using proper build tools such as astro, vite or webpack.

Just took a little research and getting used to. Also got to experience some CI pipeline logic in gitlab.

What specific areas of your project would you like help with?

If you have time to leave a comment, I would like to hear what you think about the most "lightweight" way to get a simple demo app like this up and ready.

Building muscle memory around getting a quick demo app up and running could be very helpful when trying to do development on a small vertical of a larger project. What is your strategy for a quick feedback loop when working in a large codebase?