Responsive QR Code component

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

The process of turning figma design into html and CSS files

• plan through the project
• complete basic html files - include all elements related to content
• complete general style - include color and typography
• complete layout setting - include the size and layout
• test and make the design responsive - Inspect in the browser to check from min-size to check if it is responsive; fix the code
• check if it meets WCAG requirements and fix the code
• complete README.md

how to use val to define global color

:root {
  --color-primary: #2c7dfa;
  --color-primary-shade: #3685ff;
  --color-dark-navy: #1f314f;
  --color-grey: #7d889e;
  --color-light-grey: #d5e1ef;
}

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

how to use github pages

Check online and follow the guide.

practice how to add online font into the page

Check Resource 1 - This helped me for adding online google font into my files.

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

How to manage layout in a more effective way?

I was struggling to choose between flexbox and grid systems. Sometimes, I thought it was ok to use both but it was not. It is still confusing to me.

How to manage margin and fix margin collapse?

I thought margin collapse would happen naturally, but in this case margin between elements are not doing margin collapse. Instead, the margin between the elements are added together. I am still confusing how to manage the margin to make it neat.