Meet landing page with BEM, Variable, Hosting own fonts

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

Hello, I'm Steven and this is my solution for this challenge using Native CSS, Variables, Responsive units and BEM!😊

🛠️ Built with:

• HTML 🧾
• Native CSS 🎨
• BEM Notation 🅱️
• CSS Variables 💾

Thank you to the Front-End Mentor team that creates these challenges that help us learning journey to front-end.💟

I gained significant insights into layout design through this challenge, and it certainly tested my skills. Moving forward, I plan to streamline my process by leveraging the text presets provided in the Figma file. I’ll convert these presets into reusable classes and apply them directly to the relevant elements. This approach will help reduce complexity and optimize the CSS file size.

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

I encountered some challenges incorporating the image in the footer, as it didn’t behave as expected, which is why it remains incomplete. Additionally, I found it difficult to fully translate the spacing variables provided in the Figma file into the design, particularly as some appeared to be missing for fonts and spacing. I recognize the need for a more efficient workflow. Moving forward, I plan to improve this by using meaningful images in HTML and reserving decorative images for CSS. In the past, I would typically place all images in the HTML, but I now understand the importance of this distinction.

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

I faced challenges aligning the footer image with the Figma design, as it seemed like the photo might not be the correct size. In an effort to reduce the amount of CSS, I tried condensing styles by utilizing utility classes, grouping elements with similar properties (such as font sizes), and applying shorthand properties where possible. However, I recognize there's significant room for improvement. I would greatly appreciate extensive feedback on how to streamline my approach and achieve more efficient solutions. I understand there are much better methods to implement this design, and I am eager to learn and refine my workflow.