vikramvi / 3-column-preview-card-component

https://www.frontendmentor.io/challenges/3column-preview-card-component-pH92eAR2- This challenge is perfect if you're just getting started. The shift between the layouts will be a nice test if you're new to building responsive projects. - [LIVE WEBSITE - CLICK BELOW]

Frontend Mentor - 3-column preview card component solution

This is a solution to the 3-column preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

This is 5th project from "Frontend Mentor" to sharpen HTML & CSS skills along with responsive web design and it's build with BEM and Grid layout 1st time.

The challenge

Learnt BEM and Grid Layout first and later implemented first time in a project.

Screenshot

Links

• Solution URL

My process

• Use Google drawing to draw boxes as per design
• Add BEM class names against each of the boxes
• Create HTML -> add BEM class names
• Mobile screen styling first
• Use media query to design for desktop

Built with

• Semantic HTML5 markup
• BEM
• CSS
• Grid
• Mobile First workflow

Useful resources

• Check Acknowledgments section

Author

• Frontend Mentor - @vikramvi

Acknowledgments

Kevin Powell

• Learn CSS Grid the easy way
• Make CSS Grid soooo much easier to understand and use
• GH Repo

BEM References

• https://github.com/annaindistress/frontend-mentor-stats-preview-card-component
  • https://www.frontendmentor.io/solutions/stats-preview-card-component-postcss-ry7pkJvLq
• https://github.com/jaycgreenwald/stats-preview-card-component
  • https://www.frontendmentor.io/solutions/statspreviewcardcomponent-H1YSRb_Uc

Mobile First Approach

• https://www.frontendmentor.io/solutions/mobile-first-css-grid-stat-preview-card-component-rkwwkZOL5
  • https://github.com/serhii-maliutin/stats-preview-card-component

BEM Documentation

• http://getbem.com/introduction/
• http://getbem.com/naming/

3-column-preview-card-component's Issues

Element summary not allowed as child of element section in this context. (Suppressing further errors from this subtree.)

Category: HTML

<summary class=card__info>

Consider using the h1 element as a top-level heading only (all h1 elements are treated as top-level headings by many screen readers and other tools).

Category: HTML

> <h1 class=card__header>

Ensures landmarks are unique

Category : Accessibility

<nav class=" card__button-container">
          <button class="card__button card__button-bright-orange-color">Learn More</button>
        </nav>

Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.

Category: HTML

ain> <section class=cards-container>
`