Frontend Mentor Challenge Solutions

Frontend Mentor: A showcase of my front-end skills and learning progress. This collection features my solutions to various Frontend Mentor challenges, each providing a real-life workflow experience.

Contributions

This project serves as a showcase of my personal skills. I do not accept any contributions like pull requests to this project. If you have any suggestions or ideas, feel free to message me or submit an idea. The projects marked as [PUBLIC ARCHIVE] are no longer maintained and updated.

Full List

A - B - C - D - E - F - G - H - I - M - N - O - P- Q - R - S - T - U - W

A

• [PUBLIC ARCHIVE] Advice generator - advice generator block made with HTML, CSS, Vanilla JavaScript & API
• [PUBLIC ARCHIVE] Article preview - a simple article preview block made with HTML, CSS & Vanilla JavaScript

B

• [PUBLIC ARCHIVE] Base apparel coming soon page - coming soon page made with HTML, CSS & Vanilla JavaScript
• Blog preview card - built with semantic HTML and CSS using the desktop-first approach

C

• [PUBLIC ARCHIVE] Calculator - single page calculator website with theme switcher made with HTML, CSS, React & Styled Components
• [PUBLIC ARCHIVE] Crowdfunding product page - a landing page made with HTML, CSS & Vanilla JavaScript

F

• [PUBLIC ARCHIVE] FAQ accordion card - FAQ block made with HTML, CSS & Vanilla JavaScript

• [PUBLIC ARCHIVE] Four card feature section - a simple four card feature section made with HTML & CSS

• [PUBLIC ARCHIVE] Fylo dark theme - landing page made with HTML, CSS & Vanilla JavaScript

• [PUBLIC ARCHIVE] Fylo data storage component - a single block of data storage component made with HTML & CSS

• [PUBLIC ARCHIVE] Fylo landing page with two-column layout - landing page made with HTML, CSS & Vanilla JavaScript

H

• [PUBLIC ARCHIVE] Huddle landing page - landing page with a single introductory section made with HTML & CSS
• [PUBLIC ARCHIVE] Huddle with alternating feature blocks - This is my solution to the Huddle landing page with alternating feature blocks challenge on Frontend Mentor

I

• [PUBLIC ARCHIVE] Interactive rating component - interactive rating component made with HTML, CSS, Vanilla JavaScript
• [PUBLIC ARCHIVE] Intro component with sign-up form - sign-up form with input validation with HTML, CSS & Vanilla JavaScript
• [PUBLIC ARCHIVE] Intro section with dropdown navigation - testing ability to create dropdown navigation menus with HTML and CSS
• [PUBLIC ARCHIVE] IP address tracker - IP address tracker made with HTML, CSS, Vanilla JavaScript & API

N

• Multi-step form - build with Vite, React, CSS
• [PUBLIC ARCHIVE] News homepage - practiced CSS Grid skills
• [PUBLIC ARCHIVE] NFT preview card - a single block of NFT preview card made with HTML & CSS

O

• [PUBLIC ARCHIVE] Order summary - a single block of order summary made with HTML & CSS

P

• [PUBLIC ARCHIVE] Ping coming soon page - coming soon page made with HTML, CSS & Vanilla JavaScript
• [PUBLIC ARCHIVE] Product Preview Card - a single product preview card made with HTML5 and CSS with a desktop-first workflow
• [PUBLIC ARCHIVE] Profile card - a single block of profile card made with HTML & CSS
• [PUBLIC ARCHIVE] Pricing component - a simple pricing component made with HTML, CSS, Vanilla JavaScript

Q

• [PUBLIC ARCHIVE] QR code block - QR code component made with HTML & CSS

S

• [PUBLIC ARCHIVE] Single price grid - a single block of price grid made with HTML & CSS
• Social links profile - built with Semantic HTML5 and Tailwind CSS
• [PUBLIC ARCHIVE] Social proof section - a simple social proof section component made with HTML & CSS
• [PUBLIC ARCHIVE] Stats preview card - a single block of stats preview card made with HTML & CSS
• [PUBLIC ARCHIVE] Sunny Side agency - landing page made with HTML, CSS & Vanilla JavaScript

T

• [PUBLIC ARCHIVE] Testimonials grid section - testimonials component made with HTML & CSS
• [PUBLIC ARCHIVE] Three column card component - a single block of 3-column card component made with HTML & CSS

U

• [PUBLIC ARCHIVE] URL shortening API - desktop-first Vanilla JS project integrated with URL shortener API Ulvis

W

• [PUBLIC ARCHIVE] REST Countries API - countries data page along with color theme switcher made with HTML, CSS, React & API