All solutions

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

Well, I am proud that I was able to grab the API fairly easy. Completing this project lets me know that I have a decent level of understanding in reference to getting the data that I was looking for.

I'm not sure that I would do anything different next time. I made sure that I 'console.logged' my way to the data, and ensured that it was randomly generating what I needed before trying to do anything with it.

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

Oh the challenges...

The first one that I had come across was getting my conditionals in order. The font was not rendering the way that I wanted at first. Whenever the quote was lengthy, I wanted the font to be smaller, and when the quote WASN'T lengthy, I wanted it to be bigger. I think I made it more complex when I threw width in as a comparison, but I ended up just getting rid of width as part of the conditional, and just went with the length of the quote. That seemed to work out better and the words are rendering like I wanted them to.

The second challenge that I had come across was the graphic design above the button. Whenever I converted the height of the quote to ems, the graphic design got completely out of wack, and things went wonky with the UI. I just stuck with pixels for the sake of keeping the content in place, just where I wanted it to be. Not sure if that was bad practice or not, but, I wasn't sure if there was another way to make that happen.

Also, I hope that I solved the problem of the app generating multiple quotes at once. I Googled the issue, and a lot of the resolutions pointed to the possibility of Chrome extensions causing some issues. I did disable them, but that didn't work. I took a closer look, and I had my event listener inside of my function that got the quote from. I moved it out of the function and set it above it (had a setTimeout feature that called the function, so there may have been an issue with it being INSIDE the function).

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

Not really, but if anyone would like to add anything to the short story that I have above, feel free. Trying to become as knowledgeable as I can in reference to putting these projects together. Thanks...

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

Not sure what I'd do differently next time. This was my first project implementing JavaScript, and I think I did ok. I did take the time to plan my approach on this project, as I was nervous about going into it and getting stuck. And while I DID get stuck, I learned a very valuable lesson about the developer tools in Chrome.

I can say that I'm most proud of the animations that I was able to include in this one. I just wanted to find a way to make this my own unique version. 'I' think it looks pretty cool :) .

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

GETTING THE VALUES FROM THE LIST OF ELEMENTS. I'm sure it was very easy for some, but everything that I had tried was amounting to errors and lots of repetitive 'undefined' alerts being thrown in my face. But then it occurred to me that maybe I should make sure that I'm grabbing the list elements the appropriate way in JavaScript. I opened my dev tools and 'console-logged' what I was grabbing. Once I got something back, I took a deeper look inside to see if I could find what I wanted, and I found the values that I was trying to get. After so many challenges and lessons with objects, it was smooth sailing from there. I also had to google search how to highlight one of the list elements while 'un-highlighting' any other selections. Did some digging in stack overflow and found what I was missing. AND, I actually could understand what the code was doing...

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

I think I got most of my answers that I had researched, but by all means, any productive input on how I can improve this is more than acceptable.

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

I'm most proud that I stuck with this project and made it as responsive as I could without sacrificing the overall layout. There was a specific way in that I wanted this project to look, and I just stuck with it until I constructed it to my liking.

In reference to what I'd do next time, I'm not sure actually. What I made sure that I did this time, was la out the content in HTML so I didn't always have to go back and reconstruct elements. This is essentially how I wanted to go about this project, which stemmed from some things that I ran into on the LAST project.

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

Making the image responsive was the challenge for me here. I've read the MDN articles, Stack Overflow...and I just couldn't figure out why I couldn't stretch the perfume image from the mobile layout without sacrificing the content of what I had already built. I basically had to familiarize myself with percentages in combination of the 'max-width', 'min-width', and 'width' properties. It took some fidgeting with the code in order for me to get it all put together, but eventually I found the solution. I also had a lot of issues getting the footer to view correctly in the mobile layout. I had the position at 'absolute' because I didn't know how to get it to align below the card. I took a break, a quick nap, and it occurred to me that I just needed to change the 'flex-direction' on my '.canvas' class to 'column'.

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

I don't think there is anything that I needed help with, but tips and comments are always helpful. I just want to get better every day...

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

There wasn't a lot of changes that I could make to this project...maybe just the color scheme. However, I was able to go into figma and change the color of the design to make it stand out from other designs. Not a HUGE deal, but I am proud that I made that change.

As far as what I would do differently next time, I would be sure to add all of my HTML first, and then style it all out at the end. I believe I had more trouble than I should have with the footer this go-around, but I was able to make it happen.

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

When converting from pixes to 'ems', I experienced some unexpected outcomes in which the font was to little or too small, or even when some of the widths became too small. This happened within my '.published' and '.foundations' classes. Here I just stuck with pixels, but made sure I tested the responsiveness to make sure everything was ok.

Another problem that I encountered was getting the footer in the appropriate place. For some reason, whenever I checked the design on my mobile phone, the footer was smashed up against the blog preview card. No matter what changes I made, the footer wouldn't adjust. I finally went back and reviewed a previous project that I did, and found that I didn't use 'align-items: center' for my '#canvas' (contains the card). Once I added that, I was able to adjust the footer to my liking.

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

I don't think that there is anything that I needed help with, but tips and comments are always useful. I don't think I had too many issues putting this project together, however.

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

With this project, I am most proud that I was able to get this to look appealing across all of my devices. The hover animations look fairly smooth, and I tried to add my own spin to the project by attempting to use slightly different shades of color. I also used a color change animation for my footer.

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

One challenge that I faced was trying to use a gradient for my profile card color. Because my links are in it's own div, I couldn't really figure out how to get it to blend in with the color of the profile card (some lines wouldn't merge with the lines in the container, so it made it look strange). As a result, I just decided to go with solid shades on this project.

Another problem that I always tend to have in the beginning is centering the project on the page. I think I've gotten better with it, but it's always something that I get stuck on longer than I'd like. To overcome this, I usually just make the make the parent container a flex container, and center the content using the 'justify-content' and 'align-items' properties.

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

I don't think that there is anything that I needed help with, but tips and comments are always useful. I don't think I had too many issues putting this project together, but feedback is always good...

I decided to take on this project to work on my HTML and CSS skills. I feel like I use Flexbox quite often, so I decided to complete this project to sharpen my skills a bit.

This one became a much bigger challenge than I had anticipated. I was attempting to utilize CSS Grid to put this project together (because I wanted to practice), but after dealing with additional whitespace with the photograph included with this project, I decided to switch back over to Flexbox. After doing so, I went through the project fairly smoothly, but I couldn't get my desktop design the way that I needed it to be. I ended up having to ditch the entire desktop solution and create another CSS file just so I could break away from any common connections with the original CSS file. Once I got the design the way that I needed it to be, I deleted the extra file and used a media query in the original. I tried cleaning up the code as much as I could as well...

With this project, I was made aware of SVG (Scalable Vector Graphics). If I only would have taken a look at my design files, I would have known that this 'curved' background, which I had so much trouble figuring out how to create, was there for me to use. I guess that's good because I used Figma to create that curve and used it in my design. It's not perfect, but it looks pretty ok. I tried minimizing my code in CSS as much as I possibly could, but it got to the point to where I didn't know what else to adjust. If anyone has any pointers, feel free to let me know! Thanks everyone...

This project turned out to be a little more difficult as I got deeper into the process of completing it. I'm not sure if I had the correct specifications for the mobile layout, as 'Figma.com' had measured the width to be 362px, but it looks as if the actual width was a little more than what was listed. I also had a problem centering this design, as I utilized percentages in order to keep it centered. However, as I shrank/grew my screen, I wasn't really satisfied with how the design creeped up and down the page. I elected to use volume height and width instead, and now the design looks stabilized while shrinking and enlarging the screen. In addition, I did my best to make the most efficient adjustments, but I feel that my code got a little messy on this one. I'm continuously looking through ways I could make it cleaner, but I'm unable to come up with anything. I'm happy with this project, but if there is anything that I could have done better, definitely let me know.

Although this is listed as a simple project, the 3-Column Preview Card really tested me on the concepts of the postioning of elements and the spacing between them. I really had to rely on the 'Inspect' tool within the browser in order to get an idea of where, and how, I could get things in the correct place. I also had a hard time creating the button that really wasn't a 'button' (lol). Toward the end of my project, I realized that it was missing a hover effect, but for some reason, I could not get the border visible around my anchor element. After a decent amount of googling, I found that there would actually NEED to be an ORIGINAL border in order to create the appropriate hover effect. Once I understood this, I was able to finish the project.

Hopefully, my HTML and CSS is up to par. If there are any questions or tips on what I could have done better in reference to writing cleaner code (or anything for that matter), please feel free to let me know. Thanks...

I think that the key for me to complete this project was using Figma to get the actual dimensions for the card. With this, I think I was able to code the project more accurately. The first time I tried this, I didn't have the dimensions, and wasn't using Figma (didn't even see that it was a 'thing' at first), so I found it to be a really big help once I started using it.

Second, I feel like I struggled a little with positioning containers using Flexbox. I'm still trying to get comfortable with CSS Grid, and as I continue to work on those skills, I feel like I will slowly start to implement it. But until then, I'm fairly comfortable using Flexbox to complete projects. Outside of that, just as I stated before, once I had the dimensions for this project, the tougher part was just positioning the containers and making sure that everything was aligned properly. I try to follow everything that I'm learning in reference to clean code ('do not repeat yourself' often stays in my head), and I want my code to be efficient. So if anyone has any tips on that, I would really appreciate it. Thanks...