Frontend Mentor | used HTML and CSS Flexbox coding challenge solution

Community feedback

@pikapikamart

Posted almost 3 years ago

Hey, great work on this one. Layout is good both desktop and mobile. Hafizan already state useful thing, just going to add some.

Avoid multiple usage of h1 on a single page. What you could done is wrap both the "Reliable,efficient delivery" and the "Powered by Technology" on a single h1 element, then wrap the second text on a span then just give it a display: block so that it will go below the first text like on the original.

  <h1>
    Reliable,efficient delivery
    <span> Powered by Technology</span>
 </h1>

The same goes for the p tag below the h1. You could wrap both in p tag then do the same thing, span and display: block

the images could have alt="" empty alt text since they are just for decorations.
have a main tag that wraps the whole content

 <body> 
   <main>
      {wrap everything by main}
  </main>
</body>

Aside from those, good job.

Marked as helpful

Rohan deshmukh• 70

@Rrdesh07

Posted almost 3 years ago

@pikamart thanks for suggestions I will surely try to remember them while making projects

Hafizan Adli• 1,190

@hafizanadli

Posted almost 3 years ago

I think you already solve to align that img properly.

But supervisor, team-build, karma , calculator element have similar styling. So you can make same classname for those four, instead of select it one by one and apply same styling.

Marked as helpful

used HTML and CSS Flexbox

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community