I'm particularly proud of this platform because it offers a valuable opportunity for me to learn and advance in front-end development. I see it as an ideal chance to take on new challenges and grow my skills.
Initially, my focus will be on accurately replicating the webpage view as specified. After completing these challenges, if time allows, I plan to explore ways to improve the design in a more creative and efficient manner.
What challenges did you encounter, and how did you overcome them?Challenges faced and it's respective solutions :
-
Ensuring Correct Number of Div Blocks: To address this challenge, the design files in the Figma folder were observed and then identified the required number of div blocks. Created the necessary div elements in the HTML structure to match the design also verified each div block's placement and ensured that they align with the layout specified in the design files.
-
Adjusting Pixel Values for Gaps: For this challenge, I used CSS styling to set the appropriate margin and padding values for the div blocks, QR image, and text content. Utilized tools like browser developer tools to fine-tune the spacing and ensured that it matches the design.
-
Making the Design Mobile Responsive: To achieve mobile responsiveness, CSS media queries were used to adjust the layout for different screen sizes. Ensured that the content remains visible and readable on smaller devices by modifying styles such as font size, padding, and layout alignment.
Although I made an effort to match the exact dimensions specified in the Figma design files, I believe that the HTML code could be simplified. It seems that the implementation could be made more efficient, for instance, by reducing the number of div blocks used.
Additionally, it appears that the CSS styling might be more complex than necessary. Any suggestions for improving the code, particularly in terms of CSS styling, would be greatly appreciated. Use this link to visit the webpage.
