This is a solution to the Four card feature section challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

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

Users should be able to:

• View the optimal layout for the site depending on their device's screen size

• Solution URL: GitHub
• Live Site URL: GitHub Pages

• Semantic HTML5 markup
• CSS
• BEM
• Add more...

I learned to make first one component and then apply the classes to the other HTML elements. Also trying to avoid as much as possible duplication of CSS selectors.

This was also the first (beside following tutorials) that I used the grid system, but tutorials are not triggering.

I'm also starting to become more comfortable with the Dev Tools in Firefox.

I'm still a beginner, i set up a gooed workflow but to become comfortable I simply need to build more projects. With the CSS Flexbox and Grid system i need much more hands-on before I can create everyhthing without referencing my Notion documentation or online Search.

• Grid Layoutit - I'm a visual learner, in the process o learning this helps me to focus on implementing the concept without having to struggle on the CSS details. A promise to myself; next one i write from scratch.
• CSS Trick Complete Grid Guide I had seen and bookmarked this one before, but now I had to read it again, to understand and extract what i needed to make the grid look as the design wanted!

• Frontend Mentor - @Drallas
• Dev.to - @Drallas

This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit.