Frontend Mentor Solutions 👨🏻‍💻

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

Order Summary Component

• 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

3 Column Preview Card Component

• 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

Profile Card Component

• 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

FAQ Accordion Card

• 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-

Stats Preview Card Component

• 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

Social Proof Section

• 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

Article Preview Component

• 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

Four Card Feature Section

• 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

Base Apparel Coming Soon

• 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

Intro Component With Signup Form

• 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

Single Price Grid Component

• 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

Ping Coming Soon Page

• 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

Huddle Landing Page

• 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

QR Code Generator

• 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

Interactive Rating Component

• 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

Advice Generator App

• 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

NFT Preview Card Generator

• 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

Time Tracking Dashboard

• 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

Tip Calculator App

• 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

Sunnyside Agency Landing Page

• 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

Blogr Landing Page

• 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-

Crowdfunding Product Page

• 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

Interactive Pricing Component

• 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

Loopstudios Landing Page

• 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

Testimonials Grid Section

• 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

Fylo Data Storage Component

• 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

Coding Bootcamp Testimonials Slider

• 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

Social Media Dashboard with Theme Switcher

• 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

Insure Landing Page

• 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

Pricing Component with Toggle

• 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

Project Tracking Intro Component

• 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

Clipboard Landing Page

• 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

Huddle Landing Page with Blocks

• 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

Fylo Dark Theme Landing Page

• 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

Fylo Landing Page

• 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

Huddle Landing Page with Curves

• 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

E-Commerce Product Page

• 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

Calculator App

• 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

Todo App

• 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

Markdown Notes App

• Live Site URL: https://markdown-notes-app-delta.vercel.app/
• Repository URL: https://github.com/kens-visuals/markdown-notes-app
• Solution URL: https://www.frontendmentor.io/solutions/markdown-editor-app-built-with-nextjs-tailwindcss-and-firebase-N-SvSRipHi