Submitted 10 months ago

Four Cards

Konrad•200

@ExtendoGH

A solution to the Four card feature section challenge

Preview Code

Solution retrospective

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

Using the grid to position elements on the page in an interesting layout – using the grid allowed me to create a flexible, attractive layout that adapts to different screen resolutions, ensuring an aesthetic appearance and consistency in every view.
Project completion time – I managed to deliver the project within the set timeframe despite the challenges encountered. Efficient work organization helped me maintain punctuality.
Using CSS variables and BEM methodology in HTML for class naming – implementing CSS variables improved flexibility and code organization, while BEM methodology helped maintain readability and order in class names.

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

Creating the grid, but drawing the layout in Paint helped in precisely adjusting the columns and rows of the grid – initial difficulties in creating a cohesive layout were overcome through visualizing the project, which helped better understand proportions and made grid implementation in the code easier.

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

Responsiveness of the project – I care about the page functioning correctly on various devices, from phones to desktops. Please check if all elements scale properly and maintain an aesthetic look across different resolutions.
Correctness of the grid implementation and potential optimizations – please verify if the grid was implemented according to best practices and if there are any opportunities to improve its performance, both in terms of code and layout structure.
Correctness of class naming with BEM methodology – please assess whether the classes have been correctly named according to BEM principles, which ensures better code organization and facilitates further development.

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on Konrad's solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord