All solutions

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

In this project I followed the BEM methodology. Thanks to it I have now a more structured code. From now on I will be using this methodology in my projects.

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

My image is not the same as the design. I'll appreciate any feedback about that, and any other thing too.

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

I'm very happy to have used CSS nesting. I was using it with SASS in a past project because I didn't know that it exist in CSS, but recently I found out and now I'm working faster.

I was using Font Awesome too. I like this icon library. Is too easy to set icons with it.

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

It was difficult to work with the image. I spent a lot of time on it.

The social networks container was difficult to work with, especially their styles in desktop. But hey, I learn how to make arrows with css...

.share-container::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -14px;
        margin-left: -16px;
        border-left: 16px solid transparent;
        border-right: 16px solid transparent;
        border-top: 16px solid var(--very-dark-grayish-blue);
}

and a nice transition...

.share-container {
        transition: top .4s, opacity .4s;
}

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

I need help with the image. Can you tell me how I can position the image so that it looks exactly like the design? I'll really appreciate it.

Any other thing would be nice :D

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

I'm proud to have used SASS for first time.

I'm proud to have used the clamp() function.

.preview-card-component > section
    width: clamp(308px, 80%, 440px)

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

I was stuck with the buttons, they were taking up the entire width. This happened because the buttons are children of a flex container with flex-direction: column, and apparently the default value of align-self is stretch. So I gave it a align-self: flex-start and it solved

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

I really appreciate any feedback you can give me

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

I haven't used javascript for a while now; For that reason this project was useful to me, since it refreshed what I had learned.

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

If you know of any improvement for my code, please tell me.

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

Bootstrap is a powerful and flexible CSS framework for styling purposes. In this project I was using this useful tool; from the main container, through the style of the texts, to the style of the buttons.

  Proceed to Payment
  Cancel Order

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

It took me a while to write all the HTML code with their respective classes, but as I practice with it, it will become easier and easier for me.

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

Like I always say: Any feedback is welcome.

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

I'm glad I used CSS Grid this time. I've used it before, but not many times.

I was using it for the price component layout:

@media only screen and (min-width: 600px) {
    .price-component {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    #join-our-community {
        grid-column: 1 / 3;
    }
}

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

Not this time.

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

Any feedback would be fine.

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

I used translate property with the view icon to center it. It was useful because I haven't worked so much with that tool.

.icon-view {
  translate: -50% -50%;
}

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

It was difficult to work with the active state of the main image. I found myself working with something relatively new. I tried using ::before pseudo-element, but it just didn't work for me. So, I used a layer above the main image to simulate that it changes its color. I apply a background color of cyan to it, and an opacity of 0.5.

.layer {
        display: none;
  background-color: var(--cyan);
  opacity: 0.5;
}
.nft-preview-card-component__img-container:hover .layer {
  display: inline-block;
}

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

I'll appreciate any improvement to my code. Feedback is always welcome!

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

In this project I added the results dynamically with an object in javascript. I didn't use the data.json file provided by frontendmentor because the web browser throws me an error when I try to load that file directly from the file system.

Also, I added classes to certain elements dynamically.

  Summary
  

.red-font {
	color: var(--light-red);
}

.yellow-font {
	color: var(--orangey-yellow);
}

.green-font {
	color: var(--green-teal);
}

.blue-font {
	color: var(--cobalt-blue);
}

const data = [
  {
    "category": "Reaction",
    "score": 80,
    "icon": "./assets/images/icon-reaction.svg",
    "color": "red-font"
  }
  // ...
]

const resultsList = document.getElementById("results-list");
    
data.forEach(item => {
  const li = document.createElement("li");
    
  li.innerHTML = `
    
      
      ${item.category}
    
    
      ${item.score}
      /
      100
    
  `;
    
  resultsList.appendChild(li);
});

Anyway, It was fun adding the text, images and classes of this way.

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

It was a bit difficult to work with the results numbers because in certain screen sizes they were placed one below the other due to lack of space.

The solution I find was to add the white-space: nowrap property to it

.text-box {
	display: flex;
	white-space: nowrap;
	gap: 8px;
}

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

If you have any suggestion for me, just tell me. I'll appreciate it!

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

This time I was working with hsl. When I try to get dark the add-to-cart button I had to change the parameters of hsl function like this:

:root {
	--dark-cyan: hsl(158, 36%, 37%);
}

.add-to-cart {
	background-color: var(--dark-cyan);
}

.add-to-cart:hover {
	background-color: hsl(158, 36%, 27%);
}

From now on I will be using this CSS function more often.

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

I had problems making the card image responsive, because I didn't use javascript in this project. So, trying and trying I code of this way:

.banner.mobile {
	display: inline-block;
	border-radius: 8px 8px 0 0;
}

.banner.desktop {
	display: none;
}

@media only screen and (min-width: 600px) {
	.banner.mobile {
		display: none;
	}

	.banner.desktop {
		display: inline-block;
		width: 50%;
		height: auto;
		border-radius: 8px 0 0 8px;
	}
}

There may be other better ways to code it, but at the moment this is my solution.

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

If you know a better way of do it, you can tell me. I will really appreciate it.

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

This is the first time I build a FAQ accordion. In this project I learned how to made it and how to make the background image of an element responsive.

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

When I tapped on a question, the #faq-container moved a little to the left because scrolling was activated. I solved it just adding a "overflow-y: scroll" to body, there will always be a scroll bar and therefore there will be no annoying scrolling.

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

In this project I worked with the rem unit, so it was very useful for me.

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

I had problems working with the scale of the profile container and its childrens. I solved the problem just changing the sizes to a lower number of pixels.

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

I'm proud to have completed this project in just 3 hours. Which is much less time compared to what it would have taken me to do a while ago.