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.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- Solution URL: [https://github.com/joelsalmeida/four-card-feature-section]
- Live Site URL: [https://joelsalmeida.github.io/four-card-feature-section/]
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Sass - Syntactically Awesome Style Sheets: [https://sass-lang.com/]
Despite being a small project, in this my first Frontend Mentor challenge I tried to use as many of the tools and concepts I learned in CSS, HTML, and Sass as possible. "Semantic markup, grid, variables, mixins with arguments, etc."
I tried naming my classes following BEM naming convention."But honestly... I don't know if I did it right"
This was also my first experience using Git and Github, so... Please, if you have tips on how I can improve my future projects, leave a comment.
In the future, I would like to be more comfortable working with:
- Alignment of objects vertically.
- More complex grids.
I'm also studying Javascript, I hope to be able to work on more complex challenges soon.
-
A Complete Guide to Grid - CSS-Tricks - "Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements."
-
Site Shot - As the name suggests... This site is for taking screenshots of web pages. "You can choose the resolution, format, and other settings"
-
Box-Shadow CSS Generator - HTML-CSS-JS - Creating box shadows is much easier with this tool.
- CodePen - @joelsalmeida
- Frontend Mentor - @joelsalmeida