panugr/frontendmentor-challenges

This repo contains all the challenges that I am completing from frontendmentor.io

Projects Directory

This repo contains all the challenges that I am completing from frontendmentor.io

Collection of all projects

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

A

• Age Calculator:
  • A calculator with form-validation, both client-validation and custom javascript validation.
• Apparel coming soon page:
  • This layout looks simple enough, but there are some interesting details to it. I also practice basic form validation.Made with HTML, CSS & JavaScript
• Article preview
  • a simple article preview block made with HTML, SCSS & JavaScript

B

• Blogr landing page
  • Landing page. I'm mostly working with HTML & CSS for this project with a tiny bit of JS for the mobile menu

C

• Calculator
  • This small app calculates the tips. Made with HTML(form inputs), CSS & javascript

F

• FAQ accordion card
  • FAQ block made with details tag
• Four card feature section
  • a simple four card feature section made with HTML & CSS grid

H

• Huddle
  • Landing page with a single section and a two-column layout

I

• Interactive pricing component
  • In this project, I build an interactive pricing component with custom range input slider and pricing toggle. Made with TailwindCss, daisyui library and the prettier plugin
• Interactive rating component
  • interactive rating component made with the dialog element

N

• Newsletter sign-up
  • a sign-up form with basic form structure, validation, and submission, success/error states.
• NFT preview card
  • a single block of NFT preview card made TailwindCss/CLI

O

• Order summary component
  • a single block of order summary made Foundation CSS

P

• Ping coming soon page
  • coming soon page with basic client-side form validation
• Product preview card
  • An HTML & CSS-only challenge made with TailwindCSS
• Profile card
  • a single block of profile card made with HTML & SCSS

Q

• QR code block
  • QR code component made TailwindCSS

S

• Sign-up form
  • sign-up form with input validation with HTML, CSS & JavaScript
• Social proof section
  • a simple social proof section component made with HTML & SCSS
• Stats preview card
  • a single block of stats preview card made with HTML, SCSS & CSS Grid
• Sunny Side agency
  • landing page made with Bootstrap 5

T

• Time-tracking dashboard - A time-tracking dashboard, made with HTML, SCSS, Javascript & grid