All solutions

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

• I am most proud of the responsive design, a was able to create
• Next time I want to make the CSS more structured

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

• The bigest challange was to make the header image full width on mobile phone. It was hard, because the element a placed the image inside has a padding, and I spent a lot of time to figure out how to make the image full width, without removing the padding on mobile device. ChatGPT and a lot of trial-error helped to overcome this problem. Here is the solution:

/* Remove border radius on mobile screens */
@media (max-width: 768px) {
  /* Adjust the breakpoint as needed */
  .container {
    border-radius: 0; /* Remove border radius on mobile */
    margin: 0;
    padding-top: 0;
    /* box-sizing: content-box; */
  }

  .container img {
    border-radius: 0;
    width: 100vw;
    height: auto;
    margin-left: calc((-100vw + 100%) / 2);
    /* margin-left: -32px; */
  }
}

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

• In the "Instruction section" the numbers wont change to Outfit font family. I don't know why.

• In inspection mode (FireFox developer edition) if I change the view to "Galaxy S20 Android 11" and "Galaxy S10/S10+ Android 11" there is a few pixel wide stripe at the right, and looks like the page is a bit wider than the screen. I don't know why.

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

• I start to understand how different elements connect to each other, and how can I place them to the right place.

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

• Creating semantic tags is a bit problematic, but with YouTube and ChatGPT nothing is hard

• Currently I dont know, how to make these lements totally responsive, but in the future project I will focus on this important topic

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

• Are my semantic tags good?
• Is that ok, if I give exact width and height to this panel, or should I only use responsive parameters?

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

I'm most proud of the fact, that I was able to solve this exercise without watching others solutions.

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

• Making stuff responsive is always a big challenge for me, but fortunatelly the ChatGPT helped a lot

• Understanding exactly what HTML elements should I use is also hard at the beginning, but I'm sure, that in the futur this will be second nature

• Placing the items in the right place was also challanging, but watching YouTube videos and using ChatGPT makes everyting possible

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

• How can I make the fonts responsive without media queries?

• Is there any any system, that helps to make the CSS file look more organised? (for example margins first, font-size next etc.)

When should I use id, and when should I use class?

Is it better practice to use semantic elements instead of divs?