All solutions

This was a awesome challenge. The first problem I faced was the line for the indented comments / replies. At first I did this by simply adding a extra div with a border on the left. That worked until I started getting the layout to work on the desktop version, I could not get spacing on the left of the line. I managed to solve this by switching the nested replies to a flex container where I have 1 div which has the line and another div which holds the replies themself.

Then the second problem appeared this was the vote button switching from the bottom to the side as well as the action buttons going to the top when trying to implement the layout for desktop from mobile. The comment layout was based on flexbox but I found that this was not suiting so I moved to a grid layout. I learned that you can add specific gaps for both rows and columns which came in really handy.

Any advice is welcome. (I am trying my best on using correct semantic HTML)

I've seen this challenge come by multiple times and every time I was not able to get new Advice data. So I thought I'd give this challenge a shot myself.

I also encountered this issue and managed to resolve it by using a cache prop in the request options.

async function refetch() {
  const response = await fetch("https://api.adviceslip.com/advice", {
    cache: "reload",
  });
}

Another great challenge for improving my CSS grid skills. I did have some trouble with the top border not being completely flat. I found that this was due to the border-width and the border-radius not being the same.

This is my solution for the Testimonials Grid Section challenge. I really had to dive into the CSS grid. I did some basic things with it in the past but nothing too complicated. This was a great challenge to learn more about the grid layout system!

I used Tailwind CSS to style the elements and had some issues in the beginning when trying to figure out the grid syntax. Eventually I got to understand more about the grid system and the class names started to make sense!

I also added a extra layout for the devices between mobile and desktop.

Let me know what you think and mention anything that I could improve!

First real challenge using TailwindCSS. I was amazed by how fast I was able to replicate the design. Not having to think about class names really reduces the coding time!

My solution for the Multi Step Form challenge. I wanted to learn the very basics of Framer-Motion so I tried to make some animation to make the UX better.

Also my first time with a global shared state in Astro, I ended up using nanostores as recommended by the Astro docs.

Let me know if you have any recommendation!

This is my solution for the job listings with filtering app. I created this with ReactJS and added a extra feature:

Selected tags keep the hover state (cyan background) to give the user a better indication of which tags they selected when scrolling down the list.

Happy to hear feedback and advice!

This is my 7th challenge and I'm noticing that my interpretation of the sizing is getting better. It takes less time to try and get the correct sizes e.g. border-radius.

The progress bar was a lot of fun. Especially the dot inside. Since I did not exactly know the height of the dot I came up with a solution which uses the aspect-ratio of 1 / 1 to keep the height and width the same.

.dot {
  background-color: var(--pale-blue);
  height: 100%;
  aspect-ratio: 1/1;
  border-radius: 100%;
}

The tooltips were a challenge. I first tried to do it with them as a child of the bar. But this did not work since I was adding a opacity to the bar when hovered which made the tooltip have the opacity as well. I managed to get them working by creating a container for the bar and when that container is hovered they appear. Using a visibility: visible to be able to have a fade effect with transition. I made the active bar the current day of the week which at the time of writing the is Saturday.

I had some difficulties when trying to add the hover effect for the image. I managed to get it right by using position: absolute. I am wondering is this a valid solution or should this be avoided?

I did not manage to get the bubbles on the background. I tried to do it 2 different ways.

1. img elements using position: absolute in the main element, this was not a success since they created a overflow on the web page.
2. with selectors ::before and ::after this way it could not manage to get the position right.

Great project to start with for my first front-end challenge here on Frontend Mentor.

I started all the html which gave me a overview of the bare bones for the component. I found the css to not be that hard although I had some difficulties getting the box-shadow right, still not entirely satisfied.