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 html, css and bootstrap)

@BobbyOffiong

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


all positive feedback are welcomed. Please feel free to comment, thank you.

Community feedback

@VCarames

Posted

Hey there! 👋 Here are some suggestions to help improve your code:

  • DO NOT FORGET ⚠️ to check your FEM report (It provides value information), to see what is incorrect and update your code with it. This should be done immediately after submitting your challenge.
  • Bootstrap is unnecessary for this challenge… Unless your company requires⚠️ you to use a library/framework, I strongly suggest you stay away ❌ from using libraries until you fully grasp the fundamentals of HTML, CSS and JS. By using a library/framework, you are robbing yourself from actually learning how to code.
  • This LINK should all be in the CSS stylesheet.
  • Avoid skipping heading levels ⚠️. Always start with the h1 (which can only be used once) and you will go down the hierarchy level depending on the heading’s level of importance.
  • The “Reliable, efficient delivery Powered by Technology” is one single heading ⚠️ so the entire thing should be wrapped in a single h1 heading and either the top/bottom text will have a span element.
  • The intro heading and paragraph ⚠️ should be wrapped inside a header element.
  • Every site should always have ✅ a main element not only for semantic purposes but also to help assistive technology find the main content of your content. For this challenge, it will wrap all the cards together ⚠️.

More Info: 📚

MDN Main Element

  • The picture element is being used incorrectly ⚠️ and not needed for this challenge.
  • This is a great challenge to practice using CSS Grid ⚠️ If you are not comfortable using it, here is a link that is all about how to use CSS Grid:

https://css-tricks.com/snippets/css/complete-guide-grid/

  • Implement a "Mobile First" approach 📱 > 🖥

Mobile devices are now the dominant 👑 way in which people browse the web, it is critical that your website/content looks perfect on all mobile devices.

More Info: 📚

Mobile First

If you have any questions or need further clarification, you can always check out my submission and/or feel free to reach out to me.

Happy Coding! 👾

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