View the optimal layout for the site depending on their device's screen size.

Four Card Feature Section

Build out the project to the designs provided.

Profile Card Component

The challenge is to build out this advice generator app using the Advice Slip API and get it looking as close to the design as possible.

Advice Generator App

A product preview card component that is responsive. It also has hover and focus states for interactive elements.

Product Preview Card Component

A modern full-stack ecommerce NextJs application using Stripe and Sanity.

Modern Ecommerce App

The challenge is to build out this QR code component and get it looking as close to the design as possible.

QR Code Component

View the optimal layout for the site depending on their device's screen size and see hover states for all interactive elements on the page.

Clipboard Landing Page

Huddle Landing Page with Curved Sections

A web app that displays all countries from the API. A user can search a country and filter by region. Also, a user can click on a country to display more information. The app also has dark mode.

REST Countries App

The challenge is to build out this IP Address Tracker app and get it looking as close to the design as possible.

IP Address Tracker

Users should be able to see hover states for interactive elements

Sunnyside Agency Landing Page

View the optimal layout for the section depending on their device's screen size.

Social Proof Section

View the optimal layout for the component depending on their device's screen size and see the social media share links when they click the share icon.

Article Preview Component

Survey Form

A responsive calculator app that can perform mathematical operations like addition, subtraction, multiplication, and division. The app's theme can be adjusted based on user's preference. Also, the app checks user's initial theme preference by inspecting their operating system/browser preference. The app was designed by Frontend Mentor. Test Cases used were from FreeCodeCamp.

Calculator

View the optimal layout for the site depending on their device's screen size and see hover states for all interactive elements on the page. A user receives an error message when the form is submitted incorrectly.

Ping Single Column Page

A simple recipe app that fetches data from an API. A user is able to search for a specific ingredient and app displays it once search button is pressed. Utilizes the use of useState and useEffect.

Recipe App

A countdown timer with flip animation effect using React and TailwindCSS.

Launch Countdown Timer

Storit is a peer to peer distributed cloud storage mobile application. It is available on Android and IOS. Storit provides an alternate cloud storage platform to help reduce e-waste by utilizing existing mobile devices storage medium. Storit users can choose to run their device as servers and earn some currency. Users can also pay the monthly fee and gain access to reliable and secure cloud storage.

StorIt

A clone of an arcade game called Space Invaders.

Space Invaders (HTML/SCSS/JS)

A tribute page for the loving memory of Kobe Bryant.

Tribute Page

View the optimal layout depending on their device's screen size.

Stats Preview Card Component

The challenge is to build out this NFT preview card component and get it looking as close to the design as possible.

NFT Preview Card Component

View the optimal layout for the page depending on their device's screen size and see hover states for all interactive elements on the page.

Huddle Landing Page with Single Section

A technical documentation page clone of Javascript.

Technical Documentation Page

Testimonials Grid Section

A Full Stack MERN Application using React, Node.js, Express & MongoDB. It is a simple social media app that allows users to post interesting events that happened in their lives.

Memories (MERN)

A simple app that displays a random quote. A user can receive a new quote once 'get quote' is pressed. Utilizes useState and useEffect.

Random Quote Generator

Fylo Data Storage Component

View the optimal layout for the component depending on their device's screen size and see the chat interface animate on the initial load.

Chat App CSS

View the optimal layout for the site depending on their device's screen size and see hover states for all interactive elements on the page. Also, created the background shape using code.

Project Tracking Intro Component

View the optimal layout for the site depending on their device's screen size. Also, calculate the correct tip and total cost of the bill per person

Tip Calculator

View the optimal layout depending on their device's screen size and see hover states for interactive elements.

3 Column Preview Card Component

Created 50 projects in 50 days regarding HTML, CSS, and JS

50 Projects in 50 Days

View the optimal layout for the component depending on their device's screen size and see a hover state on desktop for the Sign Up call-to-action.

Single Price Grid Component

Order Summary Component

The pomodoro timer app is based on pomodoro technique. It is a time management method based on 25-minute stretches of focused work broken by five-minute breaks. Longer breaks, typically 15 to 30 minutes, are taken after four consecutive work intervals.

Pomodoro Timer

A clone of Netlflix product landing page.

Product Landing Page (Netflix)

Base Apparel Coming Soon Page

A simple result summary component using the Svelte framework.

Result Summary Component

Signup Form Intro Component

An app that allows users to listen to sounds of instruments

Drum Machine

A web app for displaying markdown based on user's input.

Markdown Previewer

Business Landing Page

This is a responsive landing page created using ReactJs. It has an optimal layout for the site depending on the user's device screen. The website also showcases multiple animations with the help of Framer Motion. 

Hoobank Landing Page

View the optimal layout for the component depending on their device's screen size and see hover states for all interactive elements on the page. Also, hide/show the answer to a question when the question is clicked.