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.

🚀 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	Date	🔗 Links	📝 Summary
#1	Jun 12th, 2023	💾 Challenge 📨 Entry 👨‍💻 My Code 🖥️ Preview	- background-color:rgba(0,0,0,0)
#2	Aug 8th, 2023	💾 Challenge 📨 Entry 👨‍💻 My Code 🖥️ Preview	- tailwind css
#3	Aug 29th, 2023	💾 Challenge 📨 Entry 👨‍💻 My Code 🖥️ Preview	- ReactJS - TailwindCSS

Advice Generator App

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

Age Calculator App

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

Article Preview Component

Trial	Tech Stack	Date	🔗 Links	📝 Summary
#1		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		Sept 14th, 2023	💾 Challenge 📨 Entry 👨‍💻 My Code 🖥️ Preview

Expenses Chart Component

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

FAQ Accordion Card

Trial	Tech Stack	Date	🔗 Links	📝 Summary
#1		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		Jul 16th, 2023	💾 Challenge 📨 Entry 👨‍💻 My Code 🖥️ Preview

Fylo Dark Theme Landing Page

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

Fylo Data Storage Component

Trial	Tech Stack	Date	🔗 Links	📝 Summary
#1		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		Aug 26th, 2023	💾 Challenge 📨 Entry 👨‍💻 My Code 🖥️ Preview

Interactive Rating Component

Trial	Tech Stack	Date	🔗 Links	📝 Summary
#1		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		Aug 1st, 2023	💾 Challenge 📨 Entry 👨‍💻 My Code 🖥️ Preview	- scss

IP Address Tracker

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

News Homepage

Trial	Tech Stack	Date	🔗 Links	📝 Summary
#1		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		Jul 1st, 2023	💾 Challenge 📨 Entry 👨‍💻 My Code 🖥️ Preview	- linear-gradient(to right,,) - email-regex
#2		Sept 3rd, 2023	💾 Challenge 📨 Entry 👨‍💻 My Code 🖥️ Preview	- ReactJS - Tailwind CSS

NFT Preview Card Component

Trial	Tech Stack	Date	🔗 Links	📝 Summary
#1		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		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		Sept 16th, 2023	💾 Challenge 📨 Entry 👨‍💻 My Code 🖥️ Preview

Pod Request Access Landing Page

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

Product Preview Card Component

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

Profile Card Component

Trial	Tech Stack	Date	🔗 Links	📝 Summary
#1		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		Aug 13th, 2023	💾 Challenge 📨 Entry 👨‍💻 My Code 🖥️ Preview

QR Code Component

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

Recipe Page

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

Results Summary Component

Trial	Tech Stack	Date	🔗 Links	📝 Summary
#1		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		Aug 11th, 2023	💾 Challenge 📨 Entry 👨‍💻 My Code 🖥️ Preview	- animations - transitions

Room Homepage

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

Single Price Grid Component

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

Social Links Profile

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

Social Proof Section

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

Space Tourism Website

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

Stats Preview Card Component

Trial	Tech Stack	Date	🔗 Links	📝 Summary
#1		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		Jul 3rd, 2023	💾 Challenge 📨 Entry 👨‍💻 My Code 🖥️ Preview	- css-grid

Time Tracking Dashboard

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

Tip Calculator App

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

Name		Name	Last commit message	Last commit date
Latest commit History 131 Commits
3-column-preview-card-component		3-column-preview-card-component
advice-generator-app/my-work		advice-generator-app/my-work
age-calculator-app/my-work		age-calculator-app/my-work
article-preview-component/my-work		article-preview-component/my-work
blog-preview-card/my-work		blog-preview-card/my-work
clipboard-landing-page/my-work		clipboard-landing-page/my-work
expenses-chart-component/my-work		expenses-chart-component/my-work
faq-accordion-card/my-work		faq-accordion-card/my-work
four-card-feature-section/my-work		four-card-feature-section/my-work
frontend-mentor-mywork-directory		frontend-mentor-mywork-directory
fylo-dark-theme-landing-page/my-work		fylo-dark-theme-landing-page/my-work
fylo-data-storage-component/my-work		fylo-data-storage-component/my-work
huddle-landing-page-with-alternating-feature-blocks/my-work		huddle-landing-page-with-alternating-feature-blocks/my-work
interactive-rating-component		interactive-rating-component
ip-address-tracker/my-work		ip-address-tracker/my-work
news-homepage/my-work		news-homepage/my-work
newsletter-sign-up-with-success-message/my-work		newsletter-sign-up-with-success-message/my-work
nft-preview-card-component/my-work		nft-preview-card-component/my-work
order-summary-component/my-work		order-summary-component/my-work
ping-coming-soon-page/my-work		ping-coming-soon-page/my-work
pod-request-access-landing-page/my-work		pod-request-access-landing-page/my-work
product-preview-card-component/my-work		product-preview-card-component/my-work
profile-card-component		profile-card-component
qr-code-component		qr-code-component
recipe-page/my-work		recipe-page/my-work
results-summary-component/my-work		results-summary-component/my-work
rock-paper-scissors/my-work		rock-paper-scissors/my-work
room-homepage/my-work		room-homepage/my-work
single-price-grid-component/my-work		single-price-grid-component/my-work
social-links-profile/my-work		social-links-profile/my-work
social-proof-section/my-work		social-proof-section/my-work
space-tourism-website/my-work		space-tourism-website/my-work
stats-preview-card-component/my-work		stats-preview-card-component/my-work
testimonials-grid-section/my-work		testimonials-grid-section/my-work
time-tracking-dashboard/my-work		time-tracking-dashboard/my-work
tip-calculator-app/my-work		tip-calculator-app/my-work
z-readme-assets		z-readme-assets
README.md		README.md
index.html		index.html

Zy8712/frontend-mentor-challenges

Folders and files

Latest commit

History

Repository files navigation