Created using flex-box. Mobile compatible.

Hey, awesome work on this one. Layout in desktop is fine just the box-shadow I think is too much? The responsiveness could be better since right now, if you resize the width the screen hides the element from the left and right. You could have a 2x2 layout on this as well if you like, so that it will scale smoother. The mobile layout is fine as well.

Your questions:

• Yep, you could make just one repository and per challenges, you create a separate branch and you put the challenge in there. That way you would have one repo with bunch of branches that points to different challenges. Though you can't use github pages on this one, since it only points to one branch per page. Try netlify to host each branches.

Some other suggestions would be:

• Both the text in the upper part should have used a single h1 since those text are just related to one another, they are just wrapped in their own row.
• Each topic title for each card could have used h2 since those are meaningful enough to be heading.
• Also, I wouldn't use header inside the main directly. What I mean is that, if you were to use header inside the main, the usage will be like the header is inside a article of some sort. Because header as a direct child of main just renders it useless.
• Avoid using height: 100vh on a large container like the body tag, because this will limit the element's height to the remaining viewport/screen's height. If you inspect your layout in dev tools at the bottom, you will notice that if you hover on the body tag, it doesn't really captures the whole layout, because its height is limited. Instead, you could remove this or replace it with min-height: 100vh this takes full viewport and will expand if it needs to.

Other than those, great job.