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 Project using HTML and CSS

P

@myrojoylee

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


After a small break to continue some lessons, completed this challenge! I am slowly learning about margins...if there is a better way to do this card design let me know! I still need to streamline my coding so if there are any suggestions to lessen the millions of lines I have, I would love the feedback. Thank you all :)

Community feedback

@Jeen-Presh

Posted

Hey Myro, welcome back from your break, and congratulations on completing this fem challenge.

Some few suggestions to help improve your project

  • The code below should be in a header tag, not a section tag. since the content is an introductory content
<section id="title">
        <h1>
          <p>Reliable, efficient delivery</p>
          <p class="title-bold">Powered by Technology</p>
        </h1>
        <p class="content">
          Our Artificial Intelligence-powered tools use millions of project data
          points to ensure that your project is successful
        </p>
      </section>

more info on header tags https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header

  • You should use a span tag and include your class in the span tag. also wrapping a p tag in your h1tag is not the best practice.
<h1>
          <p>Reliable, efficient delivery</p>
          <p class="title-bold">Powered by Technology</p>
        </h1>

code should look like this

<h1>
          Reliable, efficient delivery <span class="title-bold">Powered by Technology</span>
</h1>

Happy coding. if you found this helpful, make sure to mark as helpful thanks.

Marked as helpful

0
Martin 240

@TheMrBombastic

Posted

You did a good job there. Only thing that i noticed the the two headings, which are paragraphs nested in a h1. I would use the h1 h2 instead, that what they are for. I dont know your's works well in terms of serach engine optimization. greetings

Notice from front-end mentor, ergo fk the police: This looks like a short comment

Please ensure you’re providing helpful feedback and answering any questions the solution author might have. You can read our community guidelines if you’re unsure what to post.

Marked as helpful

0

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