All solutions

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

Now it's time to dive into Responsivity and how to do it. This time I tried go into "mobile-first approach". And I heard your feedbacks in previous challenges. Now There are more max-width and max-height compared than before. There's still some in the code if you read it, but it's better than before;

I used the initial value in width and height in the media query of the desktop and the overflow: hidden to make the image get cropped and yet maintain its non-round corners.

Oh, and I also finally wrote my first `````` tag. Such a moment...

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

I struggled with the SVG. I usually go and paste svgs icons as inline because my IDE randomly decides just not to load SVG files, there wasn't any issue with that, the problem was that it wasn't scaling properly. So I added a viewbox to the icon because there wasn't. Yet it wasn't scaled so after that I just used transform: scale(); and call it a day. I also changed the fill attribute to match text's color, but I think I could do it in CSS anyway even if it was in a separated file.

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

Sometimes when the page is reloaded in desktop, the image is replaced by the mobile image. What is needed to make that replacement don't happen?

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

Oh, That was sure an simple-complex card. I finally used the width media query. My experience with media queries were the screen only and (orientation: portrait). So I'm kinda proud that the media query just worked in first try.

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

I spent a long time trying to import the font locally, but I couldn't do it. in the end I went to Google Fonts and got the link to import it through their API. I don't know what happened to the file. font-face syntax isn't wrong and the path is right.

I also spend some time in the list-style-type because the The design image didn't let me know whether the marker type was square or circle. I chose circle just because I thought they were a little too round to be squares.

Ordered and unordered list padding also made me scratch my head a little because of the spacing between markers and text. It's just another try and error situation, but I had spent more time since I'm not used to adding spacing to a list. Oh and by the way I couldn't figure out how to center the markers in the vertical center of the element. I made some reasearch and yet don't know how to do it.

I used border-bottom for the little almost imperceptible line diving the topics. I could have used ::before, ::after or even an decoration div for that. It can be an alternative but I think those are more for overlapping elements and animations (which is not the case here).

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

How to make the markers center in the y-axis of the list item text? I thought using flexbox like in the table, but I don't think that's the right way.

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

I thought using the unordered list tag in the links. It's mainly possible, because I did once before, and it is often used, but then I realized that there's which is semantically correct and its purpose is literally what is the design here. I remember that adding a list with links got me struggling in styling those elements in CSS so I decided to just get safe and simple in tag nesting here.

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

I was unsure if I should add a transition on the button link when hovered. Since there's nothing related to transition in the style guide so I just declined.

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

For this one, my prouds are mostly because the design being flat made me figure out most of what should I do in the design at first sight. About what to do next time... part of the code got scrambled because of inline svg.

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

A challenge for me is more about sizing the content to get as close as possible to the original design. This actually can't be overcomed easily because it's more of a "try and error" situation.