All solutions

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

In the header tag is the image and h1, and when the layout switches to mobile, the image is in the left column and h1 is in the right column. Although both labels are together using the header tag

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

In the desktop layout it is one image, and in the mobile layout it is another, for this I used the tag with the tag, where I used a media attribute, so I could change this image according to the device size.

I also used:

header {
        display: contents;
    }

Since and are inside the tag, in desktop mode the image must be in the left column and the h1 in the right column, using display: contents removes the box contention, without having to eliminate the html semantics

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

• Use methodology bem and first challenge than used some of JavaScript

• I managed to center the container vertically in the center, regardless of the footer

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

• When centering the container, it was centered along with the footer, so the container itself was a little higher, I solved it by using position:absolute in the footer

• Use JS for call at file .json, I used promise for it

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

• Tips to improve the code especially the JS, since I feel that it can improve the cleaner code

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

I am proud to have made my first design template for frontend mentor, and made use of grid and flex to organize certain elements, next time I would do it using some methodology like bem or itcss

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

Organize some elements and how to rearrange them as the screen size changes

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

Tips to refactor the code and polish it better

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

I am proud to have made my first design template for frontend mentor, and made use of grid and flex to organize certain elements, next time I would do it using some methodology like bem or itcss

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

Organize some elements and how to rearrange them as the screen size changes

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

Tips to refactor the code and polish it better

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

I liked this challenge and it made me proud to learn how to use tabindex so I could move between questions using only the keyboard.

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

• To navigate using only the keyboard: I solved it using the html tabindex property

• For functionality: In JS I used event handling, I think it was better than using a listener looping through the matrix, even though it was also valid

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

I thought it was good how I placed the background image on the desktop version.

In the mobile version I tried to be as faithful as possible to the sample image, for this I used background-image, with repetition-x, and background-size so that the image is on top and the color on the bottom. Still as you can see the image doesn't start from the top, I saw an option using width height but this way when you get to the FAQ box the image was distorted so I didn't use this option.

I don't know if there is any way to solve it, without using photoshop or without distorting the image.

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

Being able to make it responsive without media queries

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

To make the text responsive I used the calc function with the unit of measurement vw in the html tag and to make the width of the boxes responsive I used maximum width, minimum width and width

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

The alignment of elements, next time I would use flex.

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

Vertically center the content, to do this use 100vh in the html tag, 100% size and align-content: center in the body tag

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

What I am most proud of is the use of semantic tags.

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

• Being an easy challenge, the most challenging was changing the color bullets, to solve it I used the ::marker pseudo-element.
• And also make the last row of the table not have a bottom border, use not(:last-child)

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

Let's see if I really solved it well and if not, what would be better to change or improve?