frontend-mentor-challenges Tailwind Templates

Frontend Mentor Challenges

My code for Frontend Mentor projects, built without frameworks. Shared for my portfolio and as a reference for others. Copying or redistribution is not allowed.

#css #css3 #html #html-css-javascript #javascript #bootstrap #bootstrap5 #front-end-development #frontend #js
Demo Download

Bryan's Projects - Frontend Mentor [Vanilla Ver.]



  LinkedIn Credly GitHub LeetCode Frontend Mentor Personal Portfolio

[!IMPORTANT] This repository contains my work on Frontend Mentor projects (vanilla/no frameworks). Projects written using frameworks can be found in separate repositories.

Table of Contents

View Custom Directory (Completed Challenges Only): HERE

🚀 About

Usage

[!WARNING] This repository is for portfolio reference only. Copying or redistribution is not permitted.

Projects

Project Name Difficulty Attempt Details Official Source
3 Column Preview Card Component Newbie
Advice Generator App Junior
Age Calculator App Junior
Article Preview Component Newbie
Blog Preview Card Newbie
Clipboard Landing Page Junior
Expenses Chart Component Junior
FAQ Accordion Card Newbie
Four Card Feature Section Newbie
Fylo Dark Theme Landing Page Junior
Fylo Data Storage Component Junior
Huddle Landing Page with Alternating Feature Blocks Junior
Interactive Rating Component Newbie
IP Address Tracker Intermediate
News Homepage Junior
Newsletter Sign Up with Success Message Junior
NFT Preview Card Component Newbie
Order Summary Component Newbie
Ping Coming Soon Page Newbie
Pod Request Access Landing Page Newbie
Product Preview Card Component Newbie
Profile Card Component Newbie
QR Code Component Newbie
Recipe Page Newbie
Results Summary Component Newbie
Rock Paper Scissors Advanced
Room Homepage Intermediate
Single Price Grid Component Newbie
Social Links Profile Newbie
Social Proof Section Newbie
Space Tourism Website Intermediate
Stats Preview Card Component Newbie
Testimonials Grid Section Junior
Time Tracking Dashboard Junior
Tip Calculator App Junior

Feedback

License

Contact

Acknowledgements

Details

3 Column Preview Card Component

Trial Tech Stack Date 🔗 Links 📝 Summary
#1 HTML5 CSS3 Jun 12th, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview		 - background-color:rgba(0,0,0,0)
#2 HTML5 CSS3 Sass Tailwind CSS Aug 8th, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview		 - tailwind css
#3 HTML5 CSS3 React Tailwind CSS Aug 29th, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview		 - ReactJS
- TailwindCSS

Advice Generator App

Trial Tech Stack Date 🔗 Links 📝 Summary
#1 HTML5 CSS3 JavaScript Jul 27th, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview		 - api-access
- button:disabled
- cursor:none-allowed
- setTimeout
- rotate
- transform
#2 HTML5 CSS3 JavaScript React Tailwind CSS Aug 14th, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview		 - ReactJS
#3 HTML5 CSS3 JavaScript Tailwind CSS Oct 6th, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview		 - ReactJS

Age Calculator App

Trial Tech Stack Date 🔗 Links 📝 Summary
#1 HTML5 CSS3 JavaScript Jul 23rd, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview		 - localStorage
- :focus
- outline:none

Article Preview Component

Trial Tech Stack Date 🔗 Links 📝 Summary
#1 HTML5 CSS3 JavaScript Jul 1st, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview		 - triangle-shape-made-using-border

Blog Preview Card

Clipboard Landing Page

Trial Tech Stack Date 🔗 Links 📝 Summary
#1 HTML5 CSS3 SCSS Sept 14th, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview

Expenses Chart Component

Trial Tech Stack Date 🔗 Links 📝 Summary
#1 HTML5 CSS3 JavaScript SCSS JSON Aug 11th, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview		 - ChartJS

FAQ Accordion Card

Trial Tech Stack Date 🔗 Links 📝 Summary
#1 HTML5 CSS3 Jun 30th, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview		 - transform:rotate(-180deg)
- min-height
- summary::-webkit-details-marker
- [open]
- customizing details & summary

Four Card Feature Section

Trial Tech Stack Date 🔗 Links 📝 Summary
#1 HTML5 CSS3 Jul 16th, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview

Fylo Dark Theme Landing Page

Trial Tech Stack Date 🔗 Links 📝 Summary
#1 HTML5 CSS3 JavaScript Sass Aug 5th, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview		 - scss

Fylo Data Storage Component

Trial Tech Stack Date 🔗 Links 📝 Summary
#1 HTML5 CSS3 Jul 7th, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview		 - background-position: bottom 0px right 0px
- progress bar
- postion:relative
- position:absolute

Huddle Landing Page with Alternating Feature Blocks

Trial Tech Stack Date 🔗 Links 📝 Summary
#1 HTML5 CSS3 Scss Aug 26th, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview

Interactive Rating Component

Trial Tech Stack Date 🔗 Links 📝 Summary
#1 HTML5 CSS3 JavaScript Jun 8th, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview		 - justify-content:space-between
- display:none
- horizontal centering
- vertical centering
- display:flex
- flex-direction:column
- align-items: center
- min-height:100vh
#2 HTML5 CSS3 JavaScript Sass Aug 1st, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview		 - scss

IP Address Tracker

Trial Tech Stack Date 🔗 Links 📝 Summary
#1 HTML5 CSS3 JavaScript Scss Aug 7th, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview		 - Leaflet-Library
- Geo Ipify
- nth-of-type()

News Homepage

Trial Tech Stack Date 🔗 Links 📝 Summary
#1 HTML5 CSS3 JavaScript Jul 14th, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview		 - navbar-overlay
- CSS NESTING

Newsletter Sign-up with Success Message

Trial Tech Stack Date 🔗 Links 📝 Summary
#1 HTML5 CSS3 JavaScript Jul 1st, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview		 - linear-gradient(to right,,)
- email-regex
#2 HTML5 CSS3 JavaScript React Tailwind CSS Sept 3rd, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview		 - ReactJS
- Tailwind CSS

NFT Preview Card Component

Trial Tech Stack Date 🔗 Links 📝 Summary
#1 HTML5 CSS3 Jun 14th, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview		 - "curtain" mechanic
- gradient overlay on hover
- "inset: 0"

Order Summary Component

Trial Tech Stack Date 🔗 Links 📝 Summary
#1 HTML5 CSS3 Jun 9th, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview		 - background-image:url()
- background-repeat:no-repeat
- background-size:contain
- @media(max-width: 720px)
- horizontal centering
- vertical centering
- display:flex
- flex-direction:column
- justify-content:center
- align-items:center
- min-height:100vh

Ping Coming Soon Page

Trial Tech Stack Date 🔗 Links 📝 Summary
#1 HTML5 CSS3 Scss Sept 16th, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview

Pod Request Access Landing Page

Trial Tech Stack Date 🔗 Links 📝 Summary
#1 HTML5 CSS3 JavaScript Oct 9th, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview		 - order (flex-box)

Product Preview Card Component

Trial Tech Stack Date 🔗 Links 📝 Summary
#1 HTML5 CSS3 Jun 13th, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview

Profile Card Component

Trial Tech Stack Date 🔗 Links 📝 Summary
#1 HTML5 CSS3 Jun 10th, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview		 - postion:relative
- top:-55px
- background-image:url(),url()
- background-position:
- horizontal centering
- vertical centering
- display:flex
- flex-direction:column
- justify-content:center
- align-items:center
- min-height:100vh
#2 HTML5 CSS3 Scss Tailwind CSS Aug 13th, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview

QR Code Component

Trial Tech Stack Date 🔗 Links 📝 Summary
#1 HTML5 CSS3 Jun 5th, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview		 - horizontal centering
- vertical centering
- display:flex
- justify-content:center
- align-items:center
- min-height:100vh
#2 HTML5 CSS3 Scss Jul 31st, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview		 - scss
#3 HTML5 CSS3 JavaScript React Tailwind CSS Aug 14th, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview		 - ReactJS
#4 HTML5 JavaScript React Tailwind CSS Oct 7th, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview

Recipe Page

Trial Tech Stack Date 🔗 Links 📝 Summary
#1 HTML5 CSS3 JavaScript Jun 5th, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview

Results Summary Component

Trial Tech Stack Date 🔗 Links 📝 Summary
#1 HTML5 CSS3 Jun 11th, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview		 - gradient-backgrounds
- working-with-2column-format
- postion:relative
- @media(max-width: 720px)
- horizontal centering
- vertical centering
- display:flex
- flex-direction:column
- justify-content:center
- align-items:center
- min-height:100vh

Rock Paper Scissors

Trial Tech Stack Date 🔗 Links 📝 Summary
#1 HTML5 CSS3 JavaScript Scss Aug 11th, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview		 - animations
- transitions

Room Homepage

Trial Tech Stack Date 🔗 Links 📝 Summary
#1 HTML5 CSS3 JavaScript Scss Sept 7th, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview

Single Price Grid Component

Trial Tech Stack Date 🔗 Links 📝 Summary
#1 HTML5 CSS3 Jul 17th, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview
#2 HTML5 CSS3 React Tailwind CSS Aug 31st, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview		 - ReactJS
- Tailwind CSS
Trial Tech Stack Date 🔗 Links 📝 Summary
#1 HTML5 CSS3 JavaScript Jun 5th, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview

Social Proof Section

Trial Tech Stack Date 🔗 Links 📝 Summary
#1 HTML5 CSS3 Jul 11th, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview		 - annoying diagonal layout

Space Tourism Website

Trial Tech Stack Date 🔗 Links 📝 Summary
#1 HTML5 CSS3 JavaScript Scss Oct 2nd, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview		 - backdrop-filter

Stats Preview Card Component

Trial Tech Stack Date 🔗 Links 📝 Summary
#1 HTML5 CSS3 Jun 16th, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview		 - "curtain" mechanic
- mix-blend-mode
- content:url()

Testimonials Grid Section

Trial Tech Stack Date 🔗 Links 📝 Summary
#1 HTML5 CSS3 Jul 3rd, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview		 - css-grid

Time Tracking Dashboard

Trial Tech Stack Date 🔗 Links 📝 Summary
#1 HTML5 CSS3 JavaScript Jul 6th, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview		 - css-grid
- top:
- right:

Tip Calculator App

Trial Tech Stack Date 🔗 Links 📝 Summary
#1 HTML5 CSS3 JavaScript Jul 30th, 2023 💾 Challenge
📨 Entry
👨‍💻 My Code
🖥️ Preview		 - button:disabled
- textbox-outline
- regex

Top categories

tailwind daisyui resume portfolio email blog dashboard landing-page admin ecommerce
Loading Svelte Themes