All solutions

Hello 👋,

I am submitting another little challenge. Although the project was very simple in terms of complexity, I spent a bit more time with the implementation as I was learning and applying some new things, including:

• Using a Modern CSS Reset by Andy Bell
• Applied CSS Nesting.
• Aligned CSS units more precisely. Previously, I used rem for most things, but it makes sense to keep rem primarily for font-sizes and use the ems for width/heights and px for some small units (letter-spacings, borders).
• Regarding colors, I also changed the definition and started using the more compact form for the variables containing just the value (e.g 228 9% 92%). The advantage of this approach is that once it's used, it can be just easily wrapped by hsl with opacity set as an extra value, e.g. hsl(var(--color-variable) / .7);.

It was fun to implement this project too. The only extra challenge for me was to try to position the background images as precisely as possible to the original Figma. It's probably slightly off, but I am happy with the result in general.

Hello 👋,

I am submitting another solution after a few weeks of having an irregular schedule caused by holidays/travelling.

I enjoyed solving this challenge a lot. When picking up the challenge, I liked most of the cards/rating components that hadn't been aligned in straight lines. I imagined the solution relatively quickly and was glad it worked well when implemented.

The project, in general, wasn't tricky. I used it as an opportunity to play more with the CSS Flexbox and Grid Gaps and tried to be more cautious about the best use case for it. The number of gaps was reduced and in lots of cases a simple justify-content: space-between was applied with the appropriate size of the flex container.

Have a wonderful day.

Hello 👋,

after a week of time off, I am submitting another solution of a challenge from the newbie category.

I took this particular challenge for one reason - to test the new developer mode in Figma and it went very well.

There was no particular difficulty during the implementation, but there were two particular highlights related to my approach I would like to point out.

• Looks like the DEV mode in Figma generates line-height with an unit (rem in my case). This is not optimal for the accessibility reasons and I just converted it to the actual ratio.
• I played more with the flex-basis. Looks like things get more complicated when flex items are aligned/justify in the non-start positions.
• I initially thought this challenge could be a perfect one for responsive image capability inside of the HTML. But after digging into that more I figure out that it's not necessary.
• Based on some feedback I received in my previous challenge, I put an empty description to the svg as this one here is just for decorative purposes.

It was a fun tiny challenge and happy to keep resolving more of them over time, that's for sure. :-)

Hello 👋,

after a small break, I am submitting another solution which is focusing on combining CSS Grid with Flexbox.

I found the implementation pretty straightforward and it was a good exercise to dig deeper into understanding how to utilise modern CSS for building good looking UI.

Hello 👋,

I am submitting another solution I had been working on in last week and half. It was a solid challenge which took me a bit longer than I had originally planned. But it was a big fun.

What did you find difficult while building the project

I think the biggest challenge was to implement the special shapes in a way specified in the design. I wanted to use pseudo-elements ::before and ::after exclusively (to avoid cluttering the template), but it took a bit of time to make sure all the extra elements are handled well.

I chose vanilla CSS too with a decent amount of CSS variables. It was fun and I learned a lot, but due to some extra repetition, I feel that for projects of this size is probably always better to use preprocessors. But I am still proud of the result.

CSS Filter generator

What could be extra useful for others is this CSS filter generator. I had always tweaked these values manually as most of the hover colors are similar. But it was quite neat to use this tool to get the exact color that was specified by the design.

So if somebody struggles to get the desired color filter for social media hover effect, I would definitely recommend to use this generator.

Hello 👋,

I am submitting another solution, which nicely tests various techniques of layout building.

It could be built exclusively in Flexbox in this case (as this is just a card component), but I decided to use a combination of Flexbox and Grid to have a chance to practise several vital concepts of both.

The starting point was to utilize the CSS variables for repeating elements like fonts, card dimensions, etc. At this time, I used the calc function with a combination of these variables. It helped me to be sure the result was always consistent.

I learned that the line-height should always be declared without a unit as a ratio. To make sure the scaling works appropriately. I used rem for the line-height in the past, but unfortunately, it doesn't scale properly when a font-size is changed.

In terms of CSS Grid. I tried to be more playful. It's easy to define the basic stuff, but I made sure at this time that things like flex-basis are set and calculated correctly to try to be as close to the original design as possible.

I learned that using flex-basis with gap really helps to position Flex children correctly.

The last thing I would like to mention is the usage of CSS inheritance more broadly. Sometimes I duplicated the border just because it wasn't inherited by default. At this time, I ensured the border-radius is defined only once and passed to the children via inherit option accordingly.

Hello there 👋,

I am submitting another solution that works with a simple card centred on the screen.

Challenges

I experienced two more significant challenges whilst implementing this project.

The first was the realization that applying a CSS variable as a part of the media query condition is not possible. I had always used SASS or TailwindCSS, so I had never actually realized this before, but it was good to learn about this: https://bholmes.dev/blog/alternative-to-css-variable-media-queries

The second challenge was a hover state and ensuring we could adequately display the eye icon, transparency and the original background image in the top part of the card component.

I struggled a bit as I initially applied the eye icon as a background image, but fortunately had a chance to catch up with my colleague, a very advanced CSS developer. He shared some tips, and I could implement them without any problem.

Overall experience

In general, implementing this solution was relatively straightforward, apart from small bumps on the road caused by challenges mentioned in the preview sections.

The cool thing was that the project contained, compared to the previous submission, a few responsive layouts, and I could utilize the power of CSS variables in a broader context.

Have a wonderful day.

Hello 👋,

At this time, I am submitting a straightforward solution written in vanilla HTML/CSS. There was no particular blocker and I utilized the implementation as a good way how to dig deeper into some properties of Flexbox.

Just a fun fact, I learned the gap one could be used as a Flexbox property. I haven't used it at the end, however, until today, I had thought the gap is mostly used for the Grid.

Have a wonderful day.

Hello 👋,

I am submitting another solution to the challenge. I deliberately chose a relatively simple one to focus on exploring more of CSS Reusability / Tailwind CSS capabilities for extensions.

Here is a bit of the breakdown. (More detailed explanation is available in the RespositoryURL).

What did you find difficult while building the project?

The project itself was relatively easy. However, one particular challenge took a bit more time than I expected - positioning the icon-music.svg object into a card header.

I could easily add an image and text content element into a flex container, but it would require adding an explicit image tag/empty div element with an image background.

I thought it might be better to experiment with ::before pseudoelement and avoid cluttering the HTML template with an extra element which could be avoidable.

Long story short, I followed my idea, and it worked well. It just took a bit longer than I expected.

Some general thoughts

I like this solution. I still strictly separate styling and HTML distinct, even when using Tailwind.

But compared to previous challenges, I focused more on reusability and extension, and I am happy with the outcome of using CSS variables with a combination of Tailwind extension capabilities.

In particular, I like how things like font-sizes could be extended:

// tailwind.config.js

// the variables are defined in the style,
// e.g: --text-size-small: 0.9375rem; /* 15px */

fontSize: {
'2xs': ['var(--link-size-small)', {
lineHeight: 'var(--link-line-small)',
fontWeight: '500'
}],
'xs': ['var(--text-size-tiny)', {
lineHeight: 'var(--text-line-tiny)',
fontWeight: '500'
}],
'sm': ['var(--text-size-small)', {
lineHeight: 'var(--text-line-small)',
fontWeight: '500'
}],
'base': ['var(--text-size-normal)', {
lineHeight: 'var(--text-line-normal)',
fontWeight: '500'
}],
'lg': ['var(--heading-size-medium)', {
lineHeight: 'var(--heading-line-medium)',
fontWeight: '900'
}],
'xl': ['var(--heading-size-large)', {
lineHeight: 'var(--heading-line-large)',
fontWeight: '900'
}]
},

It helped keep the CSS minimal and gave me enough confidence to apply this approach in future projects.

Hello 👋,

I am submitting my third challenge. Still from the newbie category on the one hand (as I try to polish the core principles of TailwindCSS), but it was a lot of fun on the other one.

Here is a bit of the breakdown. (More detailed explanation is available in the RespositoryURL).

What did you find difficult while building the project?

Initially, the most challenging part was managing specific position styles for the background images. It's not an issue in vanilla CSS; however, TailwindCSS applies many contains that didn't work by default for my requirements.

I could override these default utility classes for image background positions; however, I felt it would be overkill. Fortunately, I learned about a specific construct allowing it to be more precise whilst keeping the default constraints in place. Things like:

bg-[POSITION1_VALUE1_UNIT1_POSITION2_VALUE2_UNIT2]

e.g

bg-[right_-15rem_top_-14rem]

And learning this helped me to complete this project.

Which areas of your code are you unsure of?

Using Tailwind allows me to make the styles more compact. However, FrontendMentor designs always have a lot of tweaks in the original template.

It makes sense to update the configuration and override some values, but it could be counterproductive in most cases.

Therefore in quite a few places, I am using arbitrary values, like:

lg:w-[21rem]

The problem is that it becomes pretty repetitive after a while, and I feel it could be a problem if I decide to update these values.

Do you have any questions about best practices?

Given the repetitive arbitrary values, I will use more CSS variables for the repeating values, combining them with Tailwind new/altered/overridden utility values in tailwind.config.js.

I had worked with CSS variables before, but I had never done it in Tailwind. Is there any best practise related to this?

Hi there 👋,

I submitted my second challenge. The experience was also relatively smooth. And I had a great chance to play with TailwindCSS and more of its Grid attributes.

I put utility classes into a dedicated CSS file, whilst using standard class names in the template. I tried to use BEM as a naming convention, but I am still not sure whether this is a good idea to use in Tailwind CSS.

Thank you, and have a great day. Radek

Hi there 👋,

I submitted my first challenge. The experience was relatively smooth. And my approach was to build the layout in CSS Grid whilst using TailwindCSS.

I also put all utility classes into a style sheet rather than spreading them into the HTML template/s, which I find suitable for maintenance and extensibility (it's always easier for me/automation to target a specific class rather than a set of utility classes).

But I am not experienced in TailwindCSS, so I wondered whether there is a recommended convention.

When it comes to CSS styles, I like the BEM approach. But I am not sure if this is a good approach in TailwindCSS.

Thank you, and have a great day. Radek