All solutions

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

I am very proud of the fact that I was able to make the JavaScript work! I have struggled with implementing JavaScript correctly in other attempted projects. I know it was a very simple task, but being able to complete it and make it work the way it was supposed to was a big win for me!

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

I could not get the share icon to change colors. I tried doing it on hover and on click. I am able to change the background color but I could not get the arrow to change colors. I did a lot of searching without finding a solution that worked. I decided to submit my project anyway in hopes of reviewing others that might have working solutions.

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

I had trouble with getting the arrow icon for the share feature to change colors. I was able to change the background, but not the icon. I considered editing it in a photo program and just swapping the image when it was clicked, but I feel like there is a better way to do this. So I am looking for ways to make that color change happen. Any suggestions are welcome!

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

I am proud that I was able to make the design adjustments as the page shifts from desktop to tablet and to mobile.

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

I had some issues with getting the correct images to show up on the correct layouts. I was able to hide the images using media queries so that I only got the images needed based on the layout size.

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

I would love to know if there is a different way to lay out the images and have them swap at the different size breakpoints. (I used media queries and hid images at different breakpoints). Any suggestions for other ways to do this would be appreciated!

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

This was another challenge that I started a while back. I enjoyed coming back into the code and seeing the way I wrote it before and making adjustments based on additional things I've learned. It really helps show me how much I've learned and improved with my skills.

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

I had a little trouble getting the circles right around the social icons. I could get the 2nd and 3rd right, but the 1st kept looking different. I was finally able to get the shape right by making some size adjustments to the icon.

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

I used an absolute position to get the social icons in the right place. Did you do it differently? What solution did you use?

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

I started this challenge a while ago but didn't finish it because I got busy with other things. I am proud that I was able to come back to it and complete it faster than I have with previous challenges. I feel like it's easier for me to jump back into my code and figure out what's going on than it was when I first started.

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

I think my biggest challenge when I started this project was getting all of the elements lined up correctly within the card.

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

I don't have any specific areas where I am looking for feedback. Happy for any general comments on how I can improve my code to more closely match the original design concept!

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

I am most proud of the fact that I was able to get the JavaScript working in this project. That has definitely been a struggle for me and I feel like I am finally making some progress with it!

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

I struggle with JavaScript! I understand the basics and what I need to do, but I have a hard time sometimes getting it to work properly on my projects. I used Google to search for similar project solutions and I used some tutorial videos making accordions to help me find the errors in my code.

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

Always open to any feedback regarding the code and ways to make it more concise.

I don't think there is anything specific that I am looking for feedback on.

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

This was my first project using css grid. I combined it with Tailwind CSS again to continue building my skills there.

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

Since this was the first project I've used grid with and I was using Tailwind, it took me some time to look up the class names and get the setting right. I had a lot of trial and error to line things up correctly.

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

Nothing specific that I am looking for help with, but I am always open to other ideas/suggestions/improvements in the work I have done.

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

I am really proud of the fact that I completed this project on my own using Tailwind CSS. This is the first project I have used it in (outside of tutorial videos). There were a few times that I got stuck and wanted to just go back to regular CSS, but I kept pushing through.

I do want to go back and clean up some of the classes a bit. I have several sections where I reused the CSS. I am thinking that I can make custom classes to apply so the HTML looks cleaner.

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

I had a hard time getting some of the layouts to shift correctly in my css. Since I was using tailwind for the first time on my own, I had to find which the specific items that I needed to change to get my layouts to work. It was a different experience for me than using plain CSS like I have in past projects.

I used a Tailwind Cheat sheet for quick reference on my class names to try to help me complete this challenge faster. You can find it here (https://tailwindcomponents.com/cheatsheet)

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

I had a hard time getting the first and last card in the right positions. I used position absolute to move them but I was having a hard time getting my Tailwind classes to fully cooperate to adjust the spacing the way I wanted. I'd love to know if there's a better/easier way to do that part than the way I did it.

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

This was the first project I have completed with a mobile-first approach. All my other projects have started from a desktop approach and then adapted to mobile.

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

My biggest challenge was getting the spacing right when the layout changed. I just used some trial and error with the sizes until I got it the way I wanted.

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

I don't think there is anything I need help with. But I will always take any comments or suggestions for my code. :-)

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

I did this challenge from the design images only. I wanted to test my visual skills and see how close I could get to the design without using the figma file provided. I don't think I would do anything differently if I were to complete this challenge again.

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

I learned a few new things in this project. I had never created a list where I needed the bullet points/numbers to be a different color. So I enjoyed learning about using the li::marker in CSS.

I also went back and forth between trying to create a table or using flex box for the nutrition info displayed at the bottom of the page. I ultimately settled on flex box because it seemed like a simpler solution that was easier to read than trying to invert the row and columns of the table.

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

I would love to see other solutions to the Nutrition section at the bottom if anyone set it up in a table layout rather than using flex box.

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

I enjoyed trying to find different solutions on my own before looking for help. But I'm also glad that my search skills and reading solutions/documentation are improving so that I can find what works!

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

I had some trouble getting the block around the social links and the text to both change together on hover. I was able to search (and find) some solutions online that worked.

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

I don't think there are any particular things that I need help with on this one, but I am always open to any suggestions for any CSS stylings that could be combined or written differently to make it shorter and easier to read.

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

I was able to complete this challenge faster than the previous one. I think it was easier since the style was similar to the previous challenge.

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

I got stuck a little with trying to make the card responsive without using media queries. I did some research and found the clamp function to use in my CSS. I tried to use that but could not see any difference when I implemented it, so I changed my units back to rem. I will continue to experiment with different options to make this work.

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

I did try to implement the clamp function in my CSS to achieve the text size changes without using media queries but I could not get it to work correctly so I went back to rem units. If anyone has tips for using this or a better solution I'd love some input!

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

This was the first challenge I completed.

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

I had a little trouble with getting the image sized correctly inside the card. I used one trial and error to figure out how to get it to work.

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

I’d love to know if there are any “best practice” elements that I should incorporate for future challenges.

Hi! This is the first challenge I have completed. I'd love some feedback regarding my HTML structure. I want to make sure that I'm using best practices as I create new files.

I also had a hard time getting the "view icon" to show up correctly on the image hover. If anyone can tell me what I did wrong here, I'd appreciate it! I tried multiple solutions and couldn't manage to get that part right.