All solutions

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

• I am proud of completing the challenge and simultaneously learning something new. Initially, I tried doing it a different way by using a single with the background-image property, but eventually decided to use five individual images for more control over spacing and layout. Although I mentioned that I could have used, it could also have been several elements. Here is the approach I considered but decided not to use due to the limitations in spacing control:

HTML:

  
  Rated 5 Stars in Reviews

CSS:

.ratings {
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
}

.rating__card {
  background-color: var(--clr-neutral-light-grayish-magenta);
  padding-block: 1.625rem;
  padding-inline: 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  border-radius: 0.6875rem;
}

.rating__card__img {
  background-image: url('../assets/images/icon-star.svg');
  width: 100px;
  height: 1rem;
  background-repeat: space;
}

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

Despite not having the design in Figma, I decided to use pixel perfect as much as possible using the PowerToys tool, and I am really happy with the result. The downside? The downside is that it took a lot of time and I struggled with taking accurate screenshots of the design. If I decide to do it conventionally, the resolution is not ideal. But if I use Developer Tools and/or device emulation, I face another "problem" where the Desktop (1368 x 768) and Mobile (375 x 667) designs sometimes appear completely different. To the point that on my real mobile device it looks as expected, but when trying to view the same on my laptop, it's not identical.

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

• What techniques, tricks, resources, or methods do you use to take screenshots of your designs? In my case, I do not have a monitor with 1440 or higher resolutions. While I can "adapt" or "modify" these differences compared to smaller sizes, it would also mean creating additional Media Queries, right?
• In emulation, there is usually a zoom but often comes with predefined values. How do you handle when you want to use a completely different zoom level? Is there an ideal or special zoom level for these cases?

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

I take pride in using the Tailwind framework for this project. Initially, I had doubts about its complexity, but it turned out to be a powerful and enjoyable tool. For future projects, I would delve deeper into exploring the classes offered by Tailwind.

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

Transitioning from pure CSS to Tailwind was a significant change. While I knew some CSS properties, adapting to Tailwind's syntax was a challenge. I researched the documentation and successfully tackled this obstacle. Although I'm not a fan of inline styles, I appreciate not having to worry about class naming, which has sometimes been my weak point.

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

• Regarding design, I noticed a "button" with the text "Sign Up." My question is whether I used the correct element. Should I have used an anchor () or a button ()?
• Additionally, is there a recommended folder or file structure for organizing CSS styles, such as naming conventions for input.css or output.css?

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

In this challenge, I am proud to have explored different techniques for assigning height to elements. Next time, I would like to find a more accessible solution and avoid wandering among methods such as padding, flex with gap, or line-height.

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

I faced the challenge of deciding whether to use the main element as the parent container to apply styles or to use a div with the .container class. I am still looking for the best practice in this regard.

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

I would like to improve in assigning height to elements and understand if it is correct to use main to apply styles. Additionally, I would like to know if I can use selector grouping without creating too much specificity.

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

I completed the project, managing gradients, custom variables, and transparency. Although it was a frustrating process, I achieved a functional result. In the future, I will look for other methods to implement these elements and improve my technique.

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

Adjusting the gradients to match the design was complicated. I opted for the HSL color system for better manipulation of transparency and tones, which allowed me to achieve the desired effect despite the difficulties.

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

I would appreciate advice on:

• Gradient Implementation: I'm looking for more direct and less complex methods to work with gradients and transparency.
• Custom Variables in Media Queries: Is it appropriate to change properties like --border-radius based on screen size?
• Workflow Different from Tailwind CSS: I want to learn how to define and use colors with transparency more efficiently and less confusingly.

P.S: This was one of my first projects that I worked on when I was just starting out.

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

I'm proud of having taken the initiative to implement a responsive design in this project. Although I'm sure there are many ways to achieve it, I chose to use media queries and grid lines, which was a great learning experience for me.

In future projects, I would like to explore other responsive design techniques to compare them with my current approach and determine which one best suits my needs. I would also like to improve in naming my custom properties in CSS and explore more "efficient" ways to use utility classes.

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

One of the challenges I encountered was styling the ordered list. The default styles of ordered and unordered lists do not provide an option to change their color and size.

To overcome this, I learned about the CSS properties counter-reset and counter-increment. These were necessary to perform a "trick" to style the ordered list. I also made use of the ::before pseudo-element. I considered several ways to achieve this, including "simulating" them using span or div. However, in the end, I decided on the aforementioned method. I'm not entirely sure if this was the "correct choice" and I would appreciate any suggestions or alternative solutions.

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

1. Responsive Design: I used media queries and grid lines to achieve a responsive design. However, I have doubts about whether this was the right approach. Did I do well in using a media query with grid lines instead of assigning a maximum width to the container? Is there a better practice or recommended approach for this?

2. Custom Properties in CSS: Although I used custom properties in CSS to keep my code DRY, I'm not sure if I'm naming these properties in the best way. Are there any standards or best practices for naming custom properties in CSS that I should follow?

3. Use of Utility Classes: I used utility classes in my project, but I would like to know if there is a more "efficient" way to use them. Is there a strategy or technique that I can use to make the most of utility classes?

These are the areas where I would like to receive feedback. Any suggestions or advice would be greatly appreciated. Thank you!