I've challenged myself to a 30-DAY-CSS-CHALLENGE, and what other way than using Frontend Mentor's beautiful designs. I wanted this to be as challenging as it gets, hence I purposely didn't buy the pro version of Frontend Mentor's subscription, so I don't have access to any design files relying only on my vision and approximation.
Programming is like any other sport. You might know the rules, but you have to play to learn. -- Mark Zuckerberg
- Live Site URL: https://kens-visuals.github.io/order-summary-component/
- Repository URL: https://github.com/kens-visuals/order-summary-component
- Solution URL: https://www.frontendmentor.io/solutions/basic-card-component-using-sass-preprocessor-and-bem-naming-convention-029xmfY6X
- Live Site URL: https://kens-visuals.github.io/3-column/
- Repository URL: https://github.com/kens-visuals/3-column
- Solution URL: https://www.frontendmentor.io/solutions/css-custom-properties-css-flexbox-css-grid-xOljzZQUJ
- Live Site URL: https://kens-visuals.github.io/profile-card-component/
- Repository URL: https://github.com/kens-visuals/profile-card-component
- Solution URL: https://www.frontendmentor.io/solutions/simple-profile-card-component-built-with-scss-HwtVCsqjH
- Live Site URL: https://kens-visuals.github.io/faq-accordion-card/
- Repository URL: https://github.com/kens-visuals/faq-accordion-card
- Solution URL: https://www.frontendmentor.io/solutions/faq-accordion-card-in-pure-html-and-scss-9OePi0oj-
- Live Site URL: https://kens-visuals.github.io/stats-preview/
- Repository URL: https://github.com/kens-visuals/stats-preview
- Solution URL: https://www.frontendmentor.io/solutions/stats-card-component-using-bem-and-scss-Xoknc8IAa
- Live Site URL: https://kens-visuals.github.io/social-proof-section/
- Repository URL: https://github.com/kens-visuals/social-proof-section
- Solution URL: https://www.frontendmentor.io/solutions/social-proof-section-with-css-grid-flexbox-bem-and-scss-h-SsLpwkF
- Live Site URL: https://kens-visuals.github.io/article-preview-component/#
- Repository URL: https://github.com/kens-visuals/article-preview-component
- Solution URL: https://www.frontendmentor.io/solutions/article-preview-comp-with-bem-sass-and-vanilla-js-vtLeoLZH4
- Live Site URL: https://kens-visuals.github.io/four-card-feature-section/
- Repository URL: https://github.com/kens-visuals/four-card-feature-section
- Solution URL: https://www.frontendmentor.io/solutions/four-card-feature-section-with-bem-and-scss-YfhlZvokE
- Live Site URL: https://kens-visuals.github.io/base-apparel-coming-soon/
- Repository URL: https://github.com/kens-visuals/base-apparel-coming-soon
- Solution URL: https://www.frontendmentor.io/solutions/base-apparel-coming-soon-with-vanilla-js-scss-and-bem-mbo9r7UHp
- Live Site URL: https://kens-visuals.github.io/intro-component-with-signup-form/
- Repository URL: https://github.com/kens-visuals/intro-component-with-signup-form
- Solution URL: https://www.frontendmentor.io/solutions/intro-comp-with-signup-form-built-with-scss-bem-and-vanilla-js-aIoqL7r_n
- Live Site URL: https://kens-visuals.github.io/single-price-grid-component/
- Repository URL: https://github.com/kens-visuals/single-price-grid-component
- Solution URL: https://www.frontendmentor.io/solutions/single-price-grid-component-with-no-media-queries-dcVj96LxV
- Live Site URL: https://kens-visuals.github.io/ping-coming-soon-page/
- Repository URL: https://github.com/kens-visuals/ping-coming-soon-page
- Solution URL: https://www.frontendmentor.io/solutions/ping-coming-soon-page-with-bem-scss-and-vanilla-js-Zoi6yA_6s
- Live Site URL: https://kens-visuals.github.io/huddle-landing-page/
- Repository URL: https://github.com/kens-visuals/huddle-landing-page#screenshot
- Solution URL: https://www.frontendmentor.io/solutions/huddle-landing-page-with-scss-bem-and-css-flexbox-xDNM9FSFX
- Live Site URL: https://kens-visuals.github.io/qr-code-generator/
- Repository URL: https://github.com/kens-visuals/qr-code-generator
- Solution URL: https://www.frontendmentor.io/solutions/qr-code-generator-with-react-and-material-ui-XpZA7o_Ke
- Live Site URL: https://kens-visuals.github.io/interactive-rating-component/
- Repository URL: https://github.com/kens-visuals/interactive-rating-component
- Solution URL: https://www.frontendmentor.io/solutions/interactive-rating-component-solution-built-with-react-and-tailwindcss-B19iTMpG9
- Live Site URL: https://kens-visuals.github.io/advice-generator-app/
- Repository URL: https://github.com/kens-visuals/advice-generator-app
- Solution URL: https://www.frontendmentor.io/solutions/advice-generator-app-with-react-and-styled-components-CkRsCR7Q9
- Live Site URL: https://kens-visuals.github.io/nft-preview-generator/
- Repository URL: https://github.com/kens-visuals/nft-preview-generator
- Solution URL: https://www.frontendmentor.io/solutions/nft-preview-card-generator-built-with-react-and-styledcomponents-iLzEaKy_X
- Live Site URL: https://kens-visuals.github.io/time-tracking-dashboard/
- Repository URL: https://github.com/kens-visuals/time-tracking-dashboard
- Solution URL: https://www.frontendmentor.io/solutions/time-tracking-dashboard-with-bem-scss-and-vanilla-js--5P53ADEz
- Live Site URL: https://kens-visuals.github.io/tip-calculator-app/
- Repository URL: https://github.com/kens-visuals/tip-calculator-app
- Solution URL: https://www.frontendmentor.io/solutions/splitter-tip-calculator-app-with-vanilla-js-scss-and-bem-4c6nu5szo
- Live Site URL: https://kens-visuals.github.io/sunnyside-agency-landing-page/
- Repository URL: https://github.com/kens-visuals/sunnyside-agency-landing-page
- Solution URL: https://www.frontendmentor.io/solutions/sunnyside-agency-landing-page-with-scss-bem-css-grid-and-vanilla-js-uekvq0GuT
- Live Site URL: https://kens-visuals.github.io/blogr-landing-page/
- Repository URL: https://github.com/kens-visuals/blogr-landing-page
- Solution URL: https://www.frontendmentor.io/solutions/blogr-landin-page-with-scss-bem-and-vanilla-js-qyv7Cq02-
- Live Site URL: https://kens-crowdfund.netlify.app/
- Repository URL: https://github.com/kens-visuals/crowdfunding-product-page
- Solution URL: https://www.frontendmentor.io/solutions/crowdfunding-product-page-with-vanilla-js-scss-and-bem-TWbk3JbR1
- Live Site URL: https://kens-visuals.github.io/interactive-pricing-component/
- Repository URL: https://github.com/kens-visuals/interactive-pricing-component
- Solution URL: https://www.frontendmentor.io/solutions/interactive-pricing-component-with-vanilla-js-scss-and-bem-TKxK-gb_9
- Live Site URL: https://kens-visuals.github.io/loopstudios-landing-page/
- Repository URL: https://github.com/kens-visuals/loopstudios-landing-page
- Solution URL: https://www.frontendmentor.io/solutions/loopstudios-landing-page-with-vanilla-js-scss-and-bem-RUVC6Bett
- Live Site URL: https://kens-visuals.github.io/testimonials-grid-section/
- Repository URL: https://github.com/kens-visuals/testimonials-grid-section
- Solution URL: https://www.frontendmentor.io/solutions/testimonials-grid-section-with-scss-bem-and-css-grid-dr2f83Qua
- Live Site URL: https://kens-visuals.github.io/fylo-data-storage-component/
- Repository URL: https://github.com/kens-visuals/fylo-data-storage-component
- Solution URL: https://www.frontendmentor.io/solutions/fylo-data-storage-component-with-css-animations-scss-and-bem-Jc1s4LmUs
- Live Site URL: https://kens-visuals.github.io/coding-bootcamp-testimonials-slider/
- Repository URL: https://github.com/kens-visuals/coding-bootcamp-testimonials-slider
- Solution URL: https://www.frontendmentor.io/solutions/coding-bootcamp-testimonials-slider-with-vanilla-js-scss-and-bem-pHSco0Ue0
- Live Site URL: https://kens-visuals.github.io/social-media-dashboard/
- Repository URL: https://github.com/kens-visuals/social-media-dashboard
- Solution URL: https://www.frontendmentor.io/solutions/social-media-dashboard-with-theme-switcher-built-with-vanilla-js-VHewUlX1Y
- Live Site URL: https://kens-visuals.github.io/insure-landing-page/
- Repository URL: https://github.com/kens-visuals/insure-landing-page
- Solution URL: https://www.frontendmentor.io/solutions/insure-landing-page-with-scss-bem-css-animations-and-vanilla-js-tlFb95NjO
- Live Site URL: https://kens-visuals.github.io/pricing-component-with-toggle/
- Repository URL: https://github.com/kens-visuals/pricing-component-with-toggle
- Solution URL: https://www.frontendmentor.io/solutions/pricing-component-with-toggle-with-vanilla-js-scss-and-bem-ylbwbfjvO
- Live Site URL: https://kens-visuals.github.io/project-tracking-intro-component/
- Repository URL: https://github.com/kens-visuals/project-tracking-intro-component
- Solution URL: https://www.frontendmentor.io/solutions/project-tracking-intro-component-with-scss-css-animations-and-bem-pdiPZBEWn
- Live Site URL: https://kens-visuals.github.io/clipboard-landing-page/
- Repository URL: https://github.com/kens-visuals/clipboard-landing-page
- Solution URL: https://www.frontendmentor.io/solutions/clipboard-landing-page-with-scss-bem-and-vanilla-js-5i5L0KYqw
- Live Site URL: https://kens-visuals.github.io/huddle-landing-page-with-blocks/
- Repository URL: https://github.com/kens-visuals/huddle-landing-page-with-blocks
- Solution URL: https://www.frontendmentor.io/solutions/huddle-landing-page-with-blocks-built-with-scss-bem-and-vanilla-js-Z6zhfo-X8
- Live Site URL: https://kens-visuals.github.io/fylo-dark-theme-landing-page/
- Repository URL: https://github.com/kens-visuals/fylo-dark-theme-landing-page
- Solution URL: https://www.frontendmentor.io/solutions/fylo-dark-theme-landing-page-with-vanilla-js-scss-and-bem-KaoA6v6wj
- Live Site URL: https://kens-visuals.github.io/fylo-landing-page/
- Repository URL: https://github.com/kens-visuals/fylo-landing-page
- Solution URL: https://www.frontendmentor.io/solutions/fylo-landing-page-with-vanilla-js-scss-and-bem-j3_o-hMup
- Live Site URL: https://kens-visuals.github.io/huddle-landing-page-with-curves/
- Repository URL: https://github.com/kens-visuals/huddle-landing-page-with-curves
- Solution URL: https://www.frontendmentor.io/solutions/huddle-landing-page-with-curves-built-with-vanilla-js-scss-and-bem-AUV7QIWYs
- Live Site URL: https://kens-visuals.github.io/ecommerce-product-page/
- Repository URL: https://github.com/kens-visuals/ecommerce-product-page
- Solution URL: https://www.frontendmentor.io/solutions/ecommerce-product-page-built-w-react-and-tailwind-css-Ska7C_9N9
- Live Site URL: https://kens-visuals.github.io/calculator-app/
- Repository URL: https://github.com/kens-visuals/calculator-app
- Solution URL: https://www.frontendmentor.io/solutions/calculator-app-built-with-react-and-tailwindcss-S1tYTCe85
- Live Site URL: https://kens-visuals.github.io/todo-app/
- Repository URL: https://github.com/kens-visuals/todo-app
- Solution URL: https://www.frontendmentor.io/solutions/todo-app-built-with-react-and-tailwind-css-rJrsKyJPc
