All solutions

I invested a lot of time in solving this challenge.

And the presented solution is the desktop version only.

My knowledge of image manipulation and absolute positioning was very poor. I learned a lot from this challenge.

My doubts are:

• I converted the .svg images to .png. Is there a problem with that?
• I've used and abused relative/absolute positioning. I couldn't fit the images into the normal flow of the page. I took the coordinates from the Figma file and positioned the images in the code using x/y coordinates. This is causing me problems when making the mobile version. Any suggestions on how I could make this positioning of the images better?

Let me make some remarks about the challenges faced and lessons learned.

• It took me a few days trying to dissect the design in Figma and plan the solution using pencil and paper.

• The colors used in the design made this process very difficult, as they are very subtle. The background color in the course grid is very confused with the white color. I often had to increase the contrast in Figma to be able to see the different colors present in the design.

.courses {
  ...
  background: linear-gradient(#FFFFFF, #F0F1FF);
}

• It took me a few days to reproduce the exact effect on the image (image-hero-desktop.png). Being more specific: (a) define its size, (b) position it correctly and (c) cut it to the exact size. I had to learn to play with Crohme's development tools to exhaustion in order to reproduce the design. This applies not just to the images but to the design as a whole.

• To crop it I used this article which helped me understand the technique used.

.hero img {
  ...
  object-fit: none;
  object-position: left bottom;
  ...
}

• It was very challenging to correctly design the course listing using grid. To get the exact dimensions it is critical to inspect the design provided in Figma in detail. And reproducing in code with perfect alignment was quite challenging. Being more specific to position the "Get Started" link I looked for a function in flexbox that doesn't exist: justify-self. Reading this article on MDN I came to understand why there is no justify-self in Flexbox. The article explains what should be done in this case: use automatic margins in the child elements of a flex container.

.course a {
  ...
  /* The automatic top margin occupies all free space in the flex container. */
  margin-top: auto;
}

• I also encountered challenges with the different left margins of page sections. The footer takes up all the horizontal space on the screen, while the other sections are limited to the width provided for the desktop (1440px width).

• Some icons in SVG didn't appear correctly. I had to convert them to png and the problem was solved.

• Lastly, I had to bring the first button (in the header) to the front of the image in order to trigger the :hover event.

• All of this involved a lot of learning and experimentation (trial and error). You have to be patient at this stage because the speed of development drops to practically zero. These challenges were great for revealing the knowledge gaps I had.

Not all content present in HTML needs to be displayed at all times.

For example, depending on the screen size (desktop and mobile) the component image changes.

I placed the two images in the HTML and in the CSS I controlled the visibility using the display property.

And you? How did you solve this problem?

I had doubts whether I should use the <article> semantic HTML tag to encapsulate the QR Code component.

After reading this article I was sure I was in the right direction.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article

Does anyone have a different opinion?