Submitted almost 3 years ago

Responsive landing page using CSS Grid and Flexbox

Abed Fetrat•450

@abedfetrat

Preview site View code

This is a solution for...Easybank landing page

HTML
CSS
JS

3intermediate

Design comparison

SolutionDesign

Solution retrospective

Hey all! This is my first FEM project. Took me some time to complete because I tried to match it to the design as best as I could. My questions are:

When using BEM, to avoid long class names would it be OK in this example below to write more like feature__heading instead of features__feature-heading:

<div class="features__features-list">
                    <div class="features__feature">
                        <img class="features__feature-icon" src="./images/icon-online.svg" alt="">
                        <h3 class="features__feature-heading">Online Banking</h3>
                        <p class="features__feature-description">
                            Our modern web and mobile applications allow you to keep track of your finances wherever you are in the world.
                        </p>
                    </div>
</div>

Any suggestions on how I can make more/better use of CSS custom properties?
What do you think of the overall code quality?

Thank you for checking my solution!

Community feedback

Rio Cantre•9,690
@RioCantrePosted almost 3 years ago
Hello there! Awesome work with this one. Looking at your solution, I would suggest the following for you...

Import the attribution style in the CSS file and remove style tag

Wrap the navbar with a div instead of header which is already use to wrap the whole content of js-primary-header

Include description with the alt in img tag

I'm not familiar in BEM, but if you want to make it simple, use the simplest form or refer it with this BEM Naming

Overall, you did great, the CSS file is well organized. Hope this helps and Keep up the good work!
Marked as helpful
0
Abed Fetrat•450
@abedfetratPosted almost 3 years ago
@RioCantre Thank you for your feedback! I will adjust accordingly
1

Please log in to post a comment

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