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

 

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

• About
• Projects
• Project Details
• Usage
• Feedback
• License
• Contact
• Acknowledgements

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
Advice Generator App
Age Calculator App
Article Preview Component
Blog Preview Card
Clipboard Landing Page
Expenses Chart Component
FAQ Accordion Card
Four Card Feature Section
Fylo Dark Theme Landing Page
Fylo Data Storage Component
Huddle Landing Page with Alternating Feature Blocks
Interactive Rating Component
IP Address Tracker
News Homepage
Newsletter Sign Up with Success Message
NFT Preview Card Component
Order Summary Component
Ping Coming Soon Page
Pod Request Access Landing Page
Product Preview Card Component
Profile Card Component
QR Code Component
Recipe Page
Results Summary Component
Rock Paper Scissors
Room Homepage
Single Price Grid Component
Social Links Profile
Social Proof Section
Space Tourism Website
Stats Preview Card Component
Testimonials Grid Section
Time Tracking Dashboard
Tip Calculator App

Feedback

License

Contact

Acknowledgements

Details

3 Column Preview Card Component

Trial	Tech Stack	Date	🔗 Links	📝 Summary
#1		Jun 12th, 2023	💾 Challenge 📨 Submission 👨‍💻 My Code 🖥️ Preview	- background-color:rgba(0,0,0,0)
#2		Aug 8th, 2023	💾 Challenge 📨 Submission 👨‍💻 My Code 🖥️ Preview	- tailwind css

Advice Generator App

Age Calculator App

Article Preview Component

Blog Preview Card

Clipboard Landing Page

Expenses Chart Component

Project Name	Languages/Frameworks	Links	Date Completed	Learned	Trial#
Pod Request Access Landing Page		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Oct 9th, 2023	📝 order (flex-box)	#1
QR Code Component		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Oct 7th, 2023	📝	#4
Advice Generator App		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Oct 6th, 2023	📝	#3
Space Tourism Website		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Oct 2nd, 2023	📝 backdrop-filter	#1
Ping Single Column Coming Soon Page		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Sept 16th, 2023	📝	#1
Clipboard Landing Page		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Sept 14th, 2023	📝	#1
Room Homepage		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Sept 7th, 2023	📝	#1
Newsletter Sign-up Form With Success Message		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Sept 3rd, 2023	📝 ReactJS Tailwind CSS	#2
Single Price Grid Component		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Aug 31st, 2023	📝 ReactJS Tailwind CSS	#2
3 Column Preview Card Component		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Aug 29th, 2023	📝 ReactJS TailwindCSS	#3
Huddle Landing Page with Alternating Feature Blocks		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Aug 26th, 2023	📝	#1
Advice Generator App		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Aug 14th, 2023	📝 ReactJS	#2
QR Code Component		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Aug 14th, 2023	📝 ReactJS	#3
Profile Card Component		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Aug 13th, 2023	📝	#2
Rock, Paper, Scissors Game		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Aug 11th, 2023	📝 animations transition	#1
Expenses Chart Component		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Aug 11th, 2023	📝 ChartJS	#1
IP Address Tracker		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Aug 7th, 2023	📝 Leaflet-Library Geo Ipify nth-of-type()	#1
Fylo Dark Theme Landing Page		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Aug 5th, 2023	📝 scss	#1
Interactive Rating Component		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Aug 1st, 2023	📝 scss	#2
QR Code Component		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Jul 31st, 2023	📝 scss	#2
Tip Calculator App		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Jul 30th, 2023	📝 button:disabled textbox-outline regex	#1
Advice Generator App		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Jul 27th, 2023	📝 api-access button:disabled cursor:none-allowed setTimeout rotate transform	#1
Age Calculator App		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Jul 23rd, 2023	📝 localstorage :focus outline:none	#1
Single Price Grid Component		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Jul 17th, 2023	📝	#1
Four Card Feature Section		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Jul 16th, 2023	📝	#1
News Homepage		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Jul 14th, 2023	📝 navbar-overlay CSS NESTING	#1
Social Proof Section		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Jul 11th, 2023	📝 annoying diagonal layout	#1
Fylo Data Storage Component		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Jul 7th, 2023	📝 background-position: bottom 0px right 0px; progress bar postion:relative position:absolute	#1
Time Tracking Dashboard		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Jul 6th, 2023	📝 css-grid top: right:	#1
Testimonials Grid Section		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Jul 3rd, 2023	📝 css-grid	#1
Article Preview Component		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Jul 1st, 2023	📝 triangle-shape-made-using-border	#1
Newsletter Sign-up Form With Success Message		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Jul 1st, 2023	📝 linear-gradient(to right,,) email-regex	#1
Faq Accordion Card		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Jun 30th, 2023	📝 transform:rotate(-180deg) min-height summary::-webkit-details-marker [open] customizing details & summary	#1
Stats Preview Card Component		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Jun 16th, 2023	📝 "curtain" mechanic mix-blend-mode content:url()	#1
NFT Preview Card Component		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Jun 14th, 2023	📝 "curtain" mechanic gradient overlay on hover "inset: 0"	#1
Product Preview Card Component		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Jun 13th, 2023	📝	#1
Results Summary Component		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Jun 11th, 2023	📝 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	#1
Profile Card Component		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Jun 10th, 2023	📝 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	#1
Order Summary Component		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Jun 9th, 2023	📝 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	#1
Interactive Rating Component		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Jun 8th, 2023	📝 justify-content:space-between display:none horizontal centering vertical centering display:flex flex-direction:column justify-content:center align-items:center min-height:100vh	#1
QR Code Component		🔗 💾 Challenge 📨 Submission 👨‍💻 My_Code 🖥️ Preview	Jun 5th, 2023	📝 horizontal centering vertical centering display:flex justify-content:center align-items:center min-height:100vh	#1

challenge preview screenshots provided

Ping Coming Soon Page

Room Homepage

Huddle Landing Page with Alternating Feature Blocks

Rock, Paper, Scissors Game

IP Address Tracker

Fylo Dark Theme Landing Page

Tip Calculator App

Single Price Grid Component

Four Card Feature Section

News Homepage

Social Proof Section Preview

Fylo Data Storage Component Preview

Time Tracking Dashboard Preview

Testimonials Grid Section Preview

Newsletter Signup With Success Message Preview

Faq Accordion Card Preview

Stats Preview Card Component Preview

NFT Preview Card Component Preview

Product Preview Card Component Preview

Results Summary Component Preview

Profile Card Component Preview

Order Summary Component Preview

Interactive Rating Component Preview

QR Code Component Preview