All solutions

Another basic project I redid using Tailwind. 🍃

This time I added some responsiveness.

Any advices?

I decided to do this simple challenge again. This time I used the Tailwind framework. It was my first contact with Tailwind, the challenge was easy but I really liked the workflow that this framework provides.

I decided not to add any responsiveness, but I will in my next challenges.

I spent some time without doing the challenges because I was studying other things, so I decided to return.

In this one I had difficulties with the asymmetrical placement of the testimonials cards and rate cards, and I also couldn't handle the placement of the background images very well. They are ok for the Figma project viewports, but in the intermediate viewports they are quite offset.

Any advices?

Another challenge similar to the previous ones but this time I tried to use new things I'm learning, like improving semantic HTML5 markup, CSS Grid, custom Properties.

Since the mobile version doesn't have much difference from the desktop, I didn't use the mobile first method.

Any advices?

Another challenge similar to the previous ones but this time I tried to use new things I'm learning, like improving semantic HTML5 markup, CSS Grid, custom Properties and Mobile-first workflow.

Any advices?

The layouts in figma had the size of 1440x800 (desktop version) and 375x800 in the mobile version. I made the page based on these sizes, but the result on screens between these two sizes was not so good, with several parts breaking all over the page, I couldn't make the elements fluid enough to avoid this.

The background image took a lot of work, small changes in the screen size already made it break, even using the background-size property.

A "solution" I did was to put an intermediate breakpoint to solve this problem a little.

Some feedback would be great to make my layout more fluid between breakpoints.

Another challenge similar to the previous ones but this time I tried to use new things I'm learning, like improving semantic HTML5 markup, CSS Grid, advanced selectors, custom Properties and Mobile-first workflow.

Any advices?

I had a little trouble on the desktop version scaling the image correctly, so I had to put a very large breakpoint.

Another challenge similar to the previous ones but this time I tried to use new things I'm learning, like improving semantic HTML5 markup, CSS Grid, advanced selectors, custom Properties and Mobile-first workflow.

Any improvement tips?

Another challenge similar to the previous ones but this time I tried to use new things I'm learning, like improving semantic HTML5 markup, CSS Grid and Mobile-first workflow.

The main difficulty was creating the overlay effect when hovering the cursor over the image. I got a satisfactory result regarding the background color but I didn't get the same with the "view", it should have the solid bank color, and not be affected by opacity: 0.5;. Any better way to do this?

This challenge is very similar to the last one I did in Front End Mentor, but with a few more challenges, i.e. how to adjust the background image on the screen, the square appearance of the shadow on the card using box shadown, needing to use the filter: drop-shadow() and the title stroke, which I managed to implement only using -webkit-text-stroke.

This time I had the design model available in Figma, and as I had no experience with the tool, it took a little longer than it really looked, but the result was satisfactory, I was able to follow the model almost 100%.

I'm getting used to flexbox positioning, I'm still starting my studies with the CSS Grid, I'll use it in the next challenges.

I need to improve the responsiveness and the media queries I use, but I haven't delved too deeply into the subject yet.

My process

I started creating the page already having in mind to use flexbox for practically everything, I know that some things could be solved with inline-block and adjusting margins and padding, but I need to train more the positioning of elements by flexbox.

I used Photoshop a lot to confirm dimensions and pixel count. I defined the size (width x height) of several elements, perhaps I wouldn't have needed to do it that way, but this gave me more confidence, with time I improve more in relation to this topic.

What I learned

This time I correctly used the media queries to create the mobile version, but I had a lot of difficulty changing the images according to the version.

It took me a long time to find a solution, a lot of research and mistakes to find an acceptable way to accomplish this.

The solution I found was to create two tags, one for each image and then use media queries to "hide" the image from the other layout with display: none.

Using this mode, I believe the browser renders both photos, which is not good for performance and optimization. I would like to know a more efficient way to accomplish this.

On every page I create, I'm still unsure about the dimensions (width and height) of the page's components. In this project I literally counted the pixels with the Photoshop ruler to be sure.

I had difficulty with the spacing between the image, text and the borders. To try to get as close as possible to the model design I used "justify-content: space-around" and added margin/pading to the items individually.

I believe there must be a much easier way to do it than the one I used. But it was well worth the effort.