All solutions

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

That I was able to finish the challenge

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

Z index. I think I should always check how I organize the user defined components

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

Again, I view the entire challenge as a single object, which led to my next step of normalizing the object, in order to get rid of duplicate properties. { id: 0, name: 'Basic', price: {monthly:19.99,yearly:199.99}, storage: '500 GB Storage', users: '2 Users Allowed', speed: 'Send up to 3 GB', pColor: 'black' }, The above object gave birth to an array. The real challenge was to dynamically populate 3 columns grid with a single user defined component name Price.

I'm proud that I was able to call only one price component from a parent page, than to have 3 duplicate components.

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

The challenge I had was to position the bottom and top background images with the unnecessary scroll bar. On the Desktop view I took an advantage of background color which blends well with the images and on the mobile device I had to use tailwind overflow-x-hidden on a main parent div to get rid of horizontal scroll bar that was unnecessary.

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

LOL, I really wanted to animate my home page to land like @koda solution. I suppose I need to spend time improving my animation skills on tailwind css. I must also give credit to @jen67 she really laid almost 100% expected prototype solution for me.

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

I'm proud that, at my first glance of this project, I saw an object that I had to normalize before I could start with actual coding. Like as John Johnson mantra says, "First Solve The Problem, Then Code After". That opened up an an opportunity to test my Vue3 and TypeScript skills as well as Tailwind CSS.

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

Well, I chose to show and hide the message box only on commented posts and sent messages. I had a challenge on a notification that had a picture on the far right and a red dot of unread messages, I only realized that when I was testing the mobile view of the site. And I realized that I was not applying the correct Relative and Absolute Position of Parent and Children containers.

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

The transition of the box message, does not translate the way I have imaged it. If anyone can take a look at it and advice on how to do it, I shall appreciate it. But this was a great challenge.

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

I'm proud that I was able to use an external API to fetch data

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

Not really

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

I'm proud that for the 1st time, I was able to create a drop down menu without calling it from a build it class of any material ui library. I should stop assuming that I fully understand concepts.

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

Z index, I thought I understand how it works, but it was until I had to put it into practice with other components and with other classes that I realized that I don't fully understand.

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

I was fortunate enough to take a look at @Cheosphere solution on this challenge. Which has a box shadow hover effect when you hover on a card title. So to me that was a real challenge, and I'm proud that I have overcame it.

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

A challenge that was to make a hover effect on a parent container (black box shadow) when hovering a child element (Card Title)

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

none

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

To be honest when I was coding the a tags element, I duplicated them and just changed the names and relevant links. But I ended up having one data object which I used on my template, which got rid of the duplication.

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

None, except applying an active background on each link, I assumed it was straight forward but I had to configure it under tailwind config file on variants property

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

none, I'm just glad this is my 3rd completed challenge.

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

I'm proud that I have submitted my second challenge, and I have learned new things again. I must work on making google fonts with NUXT to work properly as expected by a challenge specification.

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

None on this one, except making sure that when the sub header is sticky the background color should be able to hide the content that goes beneath it to make it look clean

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

None for now, I must just try and take a challenge with API and JS

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

What I am proud of was to be able to complete the entire challenge using Tailwind classes. I also had a chance to utilize Tailwind background gradient classes on a parent and child containers.

As a newbie my second step is to apply animation on this challenge and the 1st one I have completed.

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

The challenge that I encountered was the use of a grid for large screens. Both columns where equal sitting side by side on large screen and that was out of the expected results. The left hand column was suppose to be a little smaller than the right hand column, my first attempt was to span the columns but that did not cut, so I finally learned that in Tailwind, you can dynamically specify the width of the columns by making use of Arbitrary values.