DEV Community: Aituos

Frotnend Mentor - 3 Column Preview Card Component

Aituos — Tue, 24 Aug 2021 19:09:07 +0000

3 Column Preview Card Component design from the website Frontend Mentor.

https://www.frontendmentor.io/challenges/3column-preview-card-component-pH92eAR2-

You can see my finished version here:

This was an easy challenge that didn't take long to complete. Sorry for the short post but I don't really think I've learned anything from it 😂

Well, maybe I could've set up variables for the colors, or create classes for more elements (like the paragraphs), which is something I'd definitely do in a bigger project... but for something this small and quick I just didn't bother.

Frontend Mentor - Order Summary Component

Aituos — Sun, 15 Aug 2021 18:41:49 +0000

Order Summary Component design from the website Frontend Mentor.

https://www.frontendmentor.io/challenges/order-summary-component-QlPmajDUj

You can see my finished version here:

Github repo | Live version

This design wasn't that difficult to create, but it was definitely fun.

The only problem I had was with the background, more specifically I didn't know how to position it to look exactly like the original design. So I looked at some of its' properties - background-position and background-size - more closely. I'm used to setting the position to center, and the size to cover, because it always did what I wanted 😆.

Turns out it's possible to fine-tune the background's position. You can read more about it here:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

In the end, I set the two properties like this:

background-position: top;
background-size: 100%;

And it worked like a charm. I think.

One more thing I wanted to mention is that I recently found out you can set aria-hidden="true" on any HTML elements that you want to hide from screen readers, such as decorative images, so I did just that. If you use it on images, you still have to include the alt text, but set it to an empty string:

alt=""

Frontend Mentor - Stats Preview Card Component

Aituos — Fri, 13 Aug 2021 15:38:02 +0000

Stats Preview Card Component design from the website Frontend Mentor.

https://www.frontendmentor.io/challenges/stats-preview-card-component-8JqbgoU62

You can see my finished version here:

Github repo | Live version

For me, there were two challenges in this... uh, challenge, that I didn't really know how to tackle.

First of all:

The image you get is in grayscale

Okay cool, I thought, the solution would be to throw it into something like GIMP and just colorize it - but there's nothing to learn from that really. I already know how to do it. I knew it was possible to do this with just CSS and I recently saw a video on the very subject. Obviously I couldn't remember anything from the video, so I searched for it with no luck.

(Takes a deep breath)
The next hours were full of convoluted ideas involving absolute positioning of precisely-sculpted half-transparent pinkish divs over the image or using ::after pseudo-elements to achieve the desired end result and it was all horrible.

After two or three days I finally caved and looked for a solution on YouTube. This is the video I selected:

https://www.youtube.com/watch?v=2tlbKm8_4mg

I watched the first few minutes, then decided to get distracted and look at the comments. One comment in particular casually mentioned background-blend-mode.

background-blend-mode...

😩

BACKGROUND BLEND MODE, oh my god.

It was relatively quick and painless after that. I simply created a div, set its' background-image and background-color, and background-blend-mode to soft-light. I then tweaked the color to make it look as close to the preview as possible. Done. Three lines of code (and I think it might be possible to do with just two).

Later on I also found out about mix-blend-mode, which would allow me to use an img element and colorize it, but for now I decided to just leave the divs.

And the second issue was...

The layout itself

The entire card is simple, but there's one element that changes its' position - the image. In the mobile version it's at the top, so naturally I'd place it at the beginning of html. But the desktop version has the image on the right, which means that in the html I'd place it at the end.

Since you are given two images anyway, I decided to create two elements and hide them with "display: none" when needed.

I'm honestly not sure how a problem like this could be solved otherwise. Imagine a website where the exact same image is supposed to appear in multiple places - depending on screen size and on what the user does. I mean, you can do it with just html and css, but I feel like javascript would be very helpful.

Anyway, this made me think of a few things. First of all - if I hide something with "display: none", is it still visible to screen readers? Because that could lead to a lot of confusion... Fortunately the short answer is no, it's as if the element was never there.

Second of all - if one of the images is hidden right from the start, is it still downloaded and loaded in the background? Well, yes. It is. But! There's a "picture" element that can be used to solve this problem. I haven't tried it myself yet, but there's a very good explanation of how it works on MDN:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

This is my fox den

Aituos — Wed, 11 Aug 2021 22:18:29 +0000

👀

Hey, welcome to my little blog. I'm learning HTML, CSS and javascript, planning to introduce things like SASS and React later on. My long-term goal is to find a job as a front-end developer, or become a freelancer.

So, that's what you can expect to find here - posts about my experiences, my progress, the projects I'm working on (or that I already completed), and so on!