All solutions

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

I am most pleased with the extra effort I put in to make the responsiveness look good between the two given design sizes.

Since I used grid templates and grid areas on this one, if I were to do it over, I'd probably try a subgrid or maybe named grid lines implementation.

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

The JSON file presented a new challenge to serve with Vite on Github pages. Lots of repetitive deployments while troubleshooting. I overcame that by automating it. I save a little shell script in my project that runs the following command:

$ pnpm run build && git add dist -f && git commit -m "Updated site." && git subtree push --prefix dist origin gh-pages

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

Can I do anything about the lower corners of the cards?

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

I am happy with how the confirmation using the `` element turned out. The only thing I would do differently would be to get the asset paths correct for deployment earlier in the process.

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

I did run into a couple of issues with selector specificity. I did eventually recognize what was going on and adjusted. Good learning experience.

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

Suggestions to improve the javascript for managing the dialog. Am I missing any obvious, well-adopted best practices, etc.?

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

I was happy to get some more experience with flexbox. Also, not getting as married to my mark up and refactoring it when necessary. Next time I would use showModal.

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

I spent a lot of time making it resizable while the popup is active. Lots of debugging, tracing, and persistence.

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

Anything that can be improved. Thanks for taking a look!

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

I am most pleased with how fluid the responsiveness is, and my persistence on the hero. Also the vertical line/section number design element... I think my implementation is accessibility friendly.

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

There was a lot of trial and error dealing with the left and right heros on the Desktop design.

And again, the vertical line/section number feature. The best implementation strategy wasn't immediately obvious to me.

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

Anything that improves accessibility, responsiveness, or elegance. I am also interested in thoughts on my implementations of the hero at different sizes, the vertical line/section number, and alternative implementation approaches as well.

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

I am most pleased about getting more comfortable using data- elements for minor variations and using grid areas for the first time.

I want to continue exploring the Cube CSS approach, both improving my understanding and applying it better.

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

I underestimated the variability that would be required for the Card component. I mostly solved the problems by throwing another property at it.

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

Overlooked design details, any suggestions with respect to Vue, and I am always looking for constructive criticism on responsiveness and accessibility. Like were there any opportunities to use aria- tags that would make a meaningful improvement?

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

I felt like I had better awareness of responsiveness throughout this challenge. I caught a mistake early on during the layout where I got some spacing to match the design, but quickly realized that approach wasn't going to resize how I would like. I think that's progress. :)

Differently? Deploy earlier. Also, I wouldn't add Svelte to a Vite project after the fact again (though that was a learning experience).

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

First time getting Svelte, Vite, PostCSS, and TailwindCSS all working together and deployed to github pages. Reading, googling, and some trial and error got it working eventually. Then I had to get the images to work, lol.

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

I would love to hear alternative approaches to achieving the desktop layout of 3 columns with two cards occupying the middle column and the other two cards middle aligned.

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

Just getting all the parts of Vue to work together. Next time I would like to write a Vue app from scratch rather than converting an html/css solution after the fact.

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

I took several wrong turns trying to decompose the styling for components. A little experimentation and reading docs helped me eventually get things working.

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

I would like to hear feedback on the property bindings for the Summary Item component. I initially wanted them typed, but reconsidered after finding a string example. Any general feedback is welcome, too.

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

I initially did this challenge in just CSS and HTML. I was happy with how relatively pain free it was to convert it to Svelte.

I think the styling would have been more succinct if I had been writing this as Svelte components from the start (fewer class names).

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

Just learning the path conventions for components and assets. I overcame them by reading the error messages and correcting them. Svelte error messages were great in this area.

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

Really just wanted to get a feel for Svelte, but am interested in hearing feedback in regards to accessibility (did I miss opportunities to use any aria- features?) and responsiveness.

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

I am "most proud" of completing my first challenge using tailwind, and the extending/customization to match the design.

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

I had some challenges with flex and grid with tailwind. I got through it with mix of time in the docs and experimenting. The biggest challenge was deploying to github pages with the PostCSS and Tailwind

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

Try different approaches on the nutrition info table.

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

Nutrition info table. Lots of iteration.

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

I was more methodical with regards to top and bottom margins and padding for vertical alignment when compared to my last challenge. Also, this was my first time self-hosting fonts and converting them to woff2.

Differently - I would take more of a mobile first approach. My media query strikes me as clunky. Perhaps a mobile first approach would have resulted in something different.

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

I was tripped up briefly on the "social links list" by default margins/padding on `` elements. It first presented by making everything look "too indented". Using the search term "ul no indent" gave me plenty of explanations. I later encountered an issue with the spacing on the bottom of the social links list, but I immediately suspected default padding/margin values and confirmed it with the dev tools.

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

I am interested to hear opinions on the media query.

• Should it have been decomposed into multiple media queries?
• Is there a standard practice for media query placement within a css file?
• I am always looking for feedback on markup structure. Opinionated and nitpicky things are welcome.

I have two uses of text-align: center. Are there better solutions?

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

I am pleased it works on both desktop and mobile with respectable accuracy. I was also happy about noticing the dropshadow effect on hover and having to google to find a solution (that being the has pseudo class).

As far as differences, if I had to do it again, I would probably experiment with different markup and/or layout strategies--specifically adding an addition wrapper type div and experimenting with a 3 column grid layout or possibly sub-grid. I'd also like to do more mobile first development.

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

The font scaling, understanding the CSS math functions. Kept breaking the layout. Got a little more comfortable with Figma, Firefox Dev Tools, and VisBug. Watched several videos on responsive fonts without media queries. Persistence, research, and experimentation paid off.

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

Would it have been better to implement the instructor avatar as a ::before element? Why or why not, or just a matter of taste?

My use of the hgroup tag... appropriate? Unnecessary? Or maybe you would have used it, but differently. (removed: no longer relevant)

Any other semantic elements that were used inappropriately or some that I missed an opportunity to leverage?

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

Pretty happy with the accuracy all things considered. I'd like to do a better a job of taking in all the design details and factor that into my code more deliberately.

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

Was closed to having a "final" product before I noticed the vertical centering. Simple searching provided the approach I went with.

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

I am particularly interested in hearing feedback related to layout and responsiveness, best practices, and tasteful markup.

Also, the rounded corners and the spacing between the QR code borders and the containing element.