All solutions

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

I couldn't put the background right

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

Hello, here I leave my resolution of the exercise and a couple of questions that I still cannot find an answer to.

Multistate page

First of all, I wanted to know what is the best way according to you when it comes to a page that has multiple states (2 in this case). My solution was to create a rating-component div and then create 2 more divs inside for each state and use a hidden class that sets the display:none attribute according to the state of the page you want to see. However this caused me to have to duplicate several styles. Perhaps a better way would have been to make a container with fixed dimensions and then draw the various states with absolute positioning

On the other hand, I wanted to know what you think about having made the score selection this way. By not using buttons or selection, I think it could undermine accessibility, but I can't find a way to use a form.

Thank you :)

HI! I hope you are very well. This is my last level 1 exercise :) I wanted to practice enough before tackling higher level exercises.

I didn't implement changing the color of the social icons, since I couldn't think of any other way than to do it with javascript (but the exercise specifies to only use html and css) Any suggest is welcome

Hi! :) I hope you have a good day. Here I post my resolution to this exercise.

I decided not to put the full image since it did not have a good resolution and I could not get it to fit 100% either, it forced me to scroll when I gave it an

inline-size:100%

. I also have to solve the validation since it is not validating correctly and I still don't know why (I even checked a previous solution that was perfect and gave me the same error with the regex)

Hi! I hope you have a nice day 😀

Here is my solution to the proposed exercise, any advice is welcome.

Hi!. After a while I went back to practice, although I am not entirely faithful to the design, it is quite similar. Any recommendation is welcome :)

It remains to insert the Pinterest plugin

Hi! 😀

After a while without doing any exercise I wanted to get the most out of it. I was really pleased with the results and the dynamism added

• You can enter your score
• The page will inform you how well you did compared to the other (fictitious) users loaded in a json file

(although the documentation and js functions need to be improved) Another aspect to improve could be to make the "Great" qualifier dynamic (which can be too optimistic 🥳 even if our rating is very low)

Any suggestion is welcome :) Have a good day!

The resolution of this exercise frustrated me a bit (mainly because of the desktop version and the lengthening behavior when answers are opened) I thought the best practice was to let a container mold to its content and grow with it, but this exercise makes me think that sometimes it's necessary to set the size of the container.

Even so, I find the change of colors that I implement very beautiful

Aspects to improve

• Size of the container uniform and independent of the open answers
• Restrict the number of open answrs simultaneously to 1

S.T.A.R.S!!!! ⭐⭐⭐⭐⭐ (Nemesis says)

HI!

Here is my solution for this exercise.

What cost me the most were the stars. ⭐

I wanted to avoid having to write 5 image elements in each rating div.

<div class=rating>
  <img src="star.png">
  <img src="star.png">
  <img src="star.png">
         ....

I inquired about defining counting patterns, and I came up with the following, a very elegant solution using my counting pattern with a single symbol (star), the value attribute, the functions:attr(),counter() and the pseudo element before. ...

@counter-style stars
{
    system:symbol;
    symbols: ' ⭐ ';

}

.ratings
{
counter-reset:starCount 0;
}

.rating-card__rating::after
{
    counter-set: starCount attr(value); //If this line worked it would be perfect, but no.
    content: counter(starCount,stars);
}

It didn't work (at least not in the automatic way I wanted with the function attr() ) I finally decided to use attribute selectors (using the value attribute).

Any suggestion is welcome! :)

Hi! here's my solution 😃

Any suggestion is welcome (especially if it is about how to set the height size of a container to the size of a contained image 😅)

Hi! I hope all of you are very well.

I was doing initial level exercises to consolidate my knowledge in html and css, and these helped me to realize that there are things that I am still not very clear about, I hope you can help me.

Regarding the html document, I was very satisfied with how I did it, but surely you can make me notice something to improve.

With respect to css, my main problem is that when I have to tackle an exercise of this type, I don't know whether to give the article static measurements or make it flexible so that it takes shape as I add margins to each of its children(as I did in this case).

Another thing I would like to know is if responsive text is necessary in every exercise (using clamp(1rem, 0.75rem + 1.5vw,2rem) )

(I had a huge headache defining the font-size of the :root with a clamp())

Thank you and I hope I have not made you dizzy, I am trying to identify my biggest difficulty

intro component with signup form

HI! The resolution of this exercise was very enriching to explore certain tags that I did not know and delve into certain DOM interfaces such as HTMLInputElement , EventTarget and Event. Regarding the labels, do you think it is correct to use the data label for prices? Thanks!

Solution for the proposed exercise using flexbox and grid, I still have to use the mobile first flow, surely in the next exercise

If you have advice to make the overlay of the image please let me know, because the only way I found to do it was to enclose the image in a div with the color of the card and then when detecting the hover reduce the opacity of the image and to change the color of the div to cyan.