This is a solution to the Stats preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Implement the project matching the design specifications as closely as possible.
Users should be able to:
- View the optimal layout depending on their device's screen size
- Solution URL: Add solution URL here
- Live Site URL: https://jaycgreenwald.github.io/stats-preview-card-component/
- GitHub URL: https://github.com/jaycgreenwald/stats-preview-card-component
- First, add html tags with class names.
- Use Adobe Illustrator to calculate dimensions.
- Code mobile design first.
- Create the desktop version next using a media query to invoke the desktop css.
- Reviewed final versions - checked style guide and design images to ensure accuracy.
- Update GitHub with changes and published to GitHub pages.
- Write README.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
I continued to work on using BEM methodology for my CSS and also used CSS to swap images based on screen size. I learned that there is (for me at least) a specific way to work through the css. Get fonts, font sizes, and line heights correct first. Then work on horizontal margins, then work from top down on vertical margins. I also learned how to add a media query with two conditions.
Work on BEM. Work deliberately through the css styling. (Don't rush!)
- Website - My GitHub Profile
- Frontend Mentor - @jaycgreenwald
- Twitter - @jaycgreenwald
I have no specific acknowledgments, but want to thank the developer community for all of the amazing knowledge they make available to the public.