Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Four card feature section (using only floats properties for layout)

@alfonsosuarezg

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Is my code readable? That is, I want to know if my HTML code is intuitive and my CSS style sheet well-documented.

Community feedback

@MohamedElidrissi

Posted

I'm in no way an expert, but if I'm using floats I'd make sure it displays properly on IE, here's how it looks on IE11: https://imgur.com/a/Dnc3Xgq

2

@alfonsosuarezg

Posted

@MohamedElidrissi Ohhh, I didn't knew it. Sorry, I can't test with IE because I'm working on Linux.

Thanks for notify the issue! I will need to research why that happen...

0

@MohamedElidrissi

Posted

@alfonsosuarezg a Windows VM should do you fine

0

@alfonsosuarezg

Posted

@MohamedElidrissi Yeah. Although I don't if my little notebook might run it.

Thanks a lot for your help!!!

0
Joshua Briley• 415

@somecallmejosh

Posted

Nice job on this project. I agree with Mohamed's comments about using floats. There are more effective ways to lay this out, primarily CSS Grid. Flexbox is another option. You can avoid the clearfix hack by using grid. And, it's much easier to maintain once you learn the syntax.

The HTML looks good to me. The W3C validator isn't returning any errors. My only recommendation would be to have a closer look at the <h1> tag.

<h1>
      Reliable, efficient delivery<br>
      <strong>Powered by Technology</strong>
    </h1>

I think you can make a good case for coding this like you did. When I read the two lines out loud, it makes sense that they go together and could be combined into a single <h1> element like you have them.

When I look at the design, I wonder if the intent is for them to be separate thoughts. Based on the differences in capitalization, it could be argued that the phrase Reliable, efficient, delivery is one thought, and Powered by Technology is a different one—each standalone pieces of content.

Your code is probably correct. But, this is something I would definitely ask the designer to clarify. Again, nice work on this project.

1

@alfonsosuarezg

Posted

@somecallmejosh Thanks for your words!!! I appreciate that.

Yes, in fact, I love CSS Grids and Flexbox. I went to try make it retro-compatible, but I notice that doesn't work on IE.

Also, I thought to convert Reliable, efficient, delivery to a paragraph, but was a little confused.

However, I had split <h1> tag to increase readability for myself. Due to I'm working with 80 columns width for the text editor. From now, I will avoid it.

Thanks a lot!!!

1

Please log in to post a comment

Log in with GitHub
Discord logo

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