All solutions

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

I'm most proud of the learning that came with designing this form - from how to customize checkboxes to form validation to using fieldsets.

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

The most difficult challenge I encountered was getting the form to look how it did in the various active, error, and submitted state mockups. I overcame it with time, patience, and research when I was stuck.

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

Any feedback is appreciated!

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

I'm most proud of the input customizations that I implemented. That was probably one of the most challenging parts of the challenge for me.

Next time I will have the experience of what I did this time and be better equipped to solve something similar.

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

Early on I was faced with the problem of how to format the monthly payment or total repayment so that it would have commas where they are commonly put in monetary amounts. I knew there were functions to do this like .toLocaleString() or a .replace() regex expression could be used, but I guess I wanted a bit of a challenge. So I broke apart the problem into its most fundamental parts, tried lots of things that didn't work and eventually led me to learn how to format any monetary amount.

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

Any feedback is welcome!

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

I'm most proud of how closely I was able to match the mockups provided.

Next time, I would try to learn common CSS naming conventions to make my CSS less cumbersome.

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

A challenge I encountered was getting the wave/curve image to appear a little lower than the main hero's image. It required a lot of tweaking to get right and still I think I could have made it better around the 400-700px range because it goes well below the hero's image and under the button instead.

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

Open to any feedback.

Looking to hear if I could have made any choices that would have resulted in less CSS.

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

I am most proud of my application of the CSS grid.

Next time, I would use grid template areas instead of defining the grid columns and rows the way I did.

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

How to get the attribution footer to be at the bottom of the desktop page (a recurring struggle). I overcame it by doing some research and I found that the easiest way that allows for the most customization is by making the body element have a min-height: 100vh, display: grid, grid-template-rows: 1fr auto. Additionally, on the attribution itself define a min-height.

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

Any feedback is welcome!

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

I am most proud of the responsiveness of the credit cards.

Next time, I would spend more time learning about the position property in CSS as this would have cut down time in getting the credit cards hovering over the background.

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

The floating credit cards were the biggest challenge and took the longest time to implement because I had trouble conceptualizing how to allow them to be responsive and hover on top of each other in a static way.

I overcame the problem by researching how to use the position property and lots of experimentation with the Chrome dev tools using different CSS properties to get the floating cards how they were shown in the mockups.

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

I'd really like to know if there's a better or easier way to implement the cards than the way I did.

Also, I'm open to any feedback!

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

I'm most proud of the responsibility of the site because with these challenges we are provided with two mockups, one for the mobile and one for a desktop layout. The in-between sizes of the screen are also important to consider when developing a responsive website.

Next time, I would find a way to make the CSS file less cumbersome.

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

I was having trouble with some of the images overflowing with their parent elements.

What helped was adding this to my CSS to see the borders of elements and what exactly was causing the overflow:

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

I'd like to know if there's a better practice for developing a responsive website without a huge CSS file that has screen size-specific customizations.

I'm trying to find a way to minimize the amount of CSS I write. Typically I start developing the mobile layout of a site and afterwards move on to designing the standard 1920x1080 desktop layout. Already that requires some media queries. What adds more complexity to the CSS file are the in-between sizes. Most often the in-between sizes need certain customizations to make the site's responsiveness look natural and less like the in-between sizes were forgotten about.

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

The highlighted/underlined "Learn more" links were trickier than I thought.

After searching for how to achieve something similar I found out how to use ::after pseudo-element to achieve the effect. In my case, the text content of the ::after was empty, but had a height and a colour for the highlighter appearance on the link.

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

I am open to any feedback.

I think it would be helpful to hear from others who did this challenge if they had a similarly large CSS file or if it could be accomplished with much fewer than the 700+ lines I wrote.

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

I'm most proud that I learned how to use the Grid layout for the non-mobile screen size. Next time, I would probably take more time watching tutorials on the subject rather than just looking up watch I need to complete the challenge.

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

The biggest challenge I encountered was the responsive navigation bar that goes from standard page links on non-mobile devices to a hamburger menu that opens upon being pressed on mobile devices.

I overcame this challenge by looking a tutorials on YouTube on how other people approached designing responsive navigation bars.

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

I'm open to any feedback :)

I don't particularly like that the three images with links to articles at the bottom of the page resize awkwardly. I wanted to keep the aspect ratio of the images so I set their margin to auto; however, when the browser is resized between 800px and 1920px the text beside the images grows bigger than the image at some points and looks funny. I almost needed the images to grow in size proportional to the text's growth because of the screen shrinking due to resizing.

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

I really liked the dark mode design that was given for this challenge, so I am most proud of being able to implement that.

Next time, I will hide HTML elements using display: none, as opposed to visibility: hidden; this prevents the HTML element from taking up space on the page despite being hidden. This is something I learned during this challenge.

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

A challenge I encountered was how to store the state of the feedback so that when the user submits it, it is persisted into the next part of the feedback modal. I overcame it by searching how to store state for small apps like these and landed on using the browser'slocal storage.

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

I look forward to any feedback or criticisms. I would like to improve.

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

When I completed this project I was most proud of being able to replicate the original site. Next time, I would make this site responsive, but since this was my first challenge (and it wasn't required) I forgot about doing it.

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

A challenge was creating the inverted/transposed Nutrition table. I was able to overcome it with some help of Google and StackOverflow.

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

Any feedback is appreciated!

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

When I completed this project, I was most proud of learning how to use media queries to make sites responsive. What I would do differently next time is make the site for mobile first then adjust styles and create media queries as needed for non-mobile devices.

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

Previously I set the attribution's position: absolute with bottom: 10px. I was having trouble getting the attribution to stay at the very bottom of the page when viewing the page on different devices. When selecting a question to expand the answer, the card would, at times, cause the page to increase in size and show a scroll bar. But, the attribution would remain where it was before the page increased in size, rather than stay at the absolute bottom of the page.

As a better alternative, I set the attribution's position: fixed so it will always be at the bottom of the page, even when the page increased in size.

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

I look forward to any feedback that would help me improve as a developer.

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

I'm proud of the responsivity that I built into the site using CSS. I think next time I would try using the grid layout, not because it would be better suited for this site but to learn how to use it.

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

A challenge was finding the right widths and heights that allowed the non-mobile site to not overflow with a scrollbar. I wanted all of the content, and the attribution included, to nicely fit on the entire screen without scrolling

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

I'd appreciate feedback that concerns any aspect of the challenge. I would like to improve my projects.

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

The responsiveness of the site. It's previously taken me a long time to figure out how to set up the responsiveness of past challenges. Starting with a mobile workflow really helped speed up the process.

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

Form validation was cumbersome and, although I did not implement the best form validation, I learned some easy ways to validate minimal forms like this.

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

Any feedback would be welcome!

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

I am most proud of the responsiveness of the page. I am sure it could be better, but making the page both desktop and mobile-friendly and having different content layouts for each device was tricky.

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

Responsivity was a challenge and to overcome the difficulty I tried many different solutions.

Finding how to detect valid emails was also challenging but I knew the solution had to do with Regex.

When I got stuck, I'd search Google and land on Stack Overflow. Additionally, I found a few YouTube tutorials on the above challenges I encountered which helped me on my way.

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

I am open to any feedback. I'm most curious about if there was a better way to handle the layout variability and responsiveness for this certain page.