Responsive landing page with CSS Flexbox

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

This is my first front-end project and I was able to complete it myself. I had no idea about how to get started, even understanding what I need to do after reading the problem statement, however, after searching lots of resources online, I was able to figure out how to do it step by step. This whole process built up my confidence towards my future career in the tech field.

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

Initially, I had trouble with how to get started, and I asked chatGPT about some advice. Then I focus on one step at a time and gradually, I was able to complete the whole task.

Secondly, I was not sure how to integrate stylesheet with html file. I was not familiar with the various styles and which one to pick first. I read through the resources provided on front end mentor website about css. The major one is container class and the meaning of various key and values, such as background-color, padding, width, border-radius(how to make rounded corners), etc.

Thirdly, one major challenge I had was to make the design automatically adjust itself based on the viewport size. It took me sometime to understand the difference between "actual screen size" vs "viewport size". I learned how to accomplish it through "@media".

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

1. In the "width" attribute of the "qr-container" class, I set the value as 25% which is basically an arbitrary number I choose based on the given desktop design image. Is there a standard way of finding out the best percentage to use here?

2. To what extent css grid might improve the design in this project? I am not familiar with css grid and I would like to get some suggestions from the community first. If it's worth to implement css grid, I would like to spend time learning it.