These are some of the basic projects that i practiced while learning basic front-end. They helped me a lot in my learning journey. They are basically a compilation of some projects available on the internet from various resources like Youtube Github etc.
You can check live working of all the projects here
Practice is the key, keep practicing ✌️
| Projects | Demo | Description |
|---|---|---|
| Project-01 | live site | Food Menu filter |
| Project-02 | live site | Responsive grocery list |
| Project-03 | live site | Responsive tabs |
| Project-04 | live site | Calculator App |
| Project-05 | live site | NFT Card |
| Project-06 | live site | Advice Generator App |
| Project-07 | live site | Animated website |
| Project-08 | live site | Animated Cards |
| Project-09 | live site | Remote Work landing page |
| Project-10 | live site | Expense tracker chart component |
| Project-11 | live site | Order Summary Component |
| Project-12 | live site | Room Home Page |
| Project-13 | live site | 3-Column Card Component |
| Project-14 | live site | profile card component |
| Project-15 | live site | Bookmark Landing Page |
| Project-16 | live site | Time Tracking Dashboard |
| Project-17 | live site | Product Preview Card |
| Project-18 | live site | QR Code Generator |
| Project-19 | live site | Email Validator |
| Project-20 | live site | Speech To Text |
| Project-21 | live site | News Homepage |
| Project-22 | live site | Sudoku |
Food Menu Filter
In this project We have a food menu filter that allows the user to filter food menu according to their preferences.
- HTML
- CSS
- JAVASCRIPT
Code
Live - Live website URL here
Grocery Bud
In this project i have build a grocery bud app. It uses the local storage to create and retain the list.
- HTML
- CSS
- JAVASCRIPT
Code
Live - Live website URL here
Responsive Tabs
In this project I have made responsive tabs, which switch using javascript. It is a very basic project and will help beginners learning web development.
- HTML
- CSS
- JAVASCRIPT
Code
Live - Live website URL here
Calculator App
In this project I have made a basic calculator App. It is in completion of frontend mentor challenge. App has three different themes which can changed using a single toggle switch.
- HTML
- CSS
- SASS/SCSS
- JAVASCRIPT
- Mobile first Workflow
- CSS Grid
- CSS Flexbox
Code
Solution Url - Solution URL here
Live Website - Live Website URL here
NFT Card
This project is a challenge completed by me at Frontendmentor. It is a NFT Card for Eutherium with some cool UI.
- HTML
- CSS
Code
Solution Url - Solution URL here
Live Website - Live Website URL here
Advice Generator App
This is another challenge completed by me of Frontendmentor. It is an amazing website to practice front end. the following project is Advice Generator App, displaying different advices using an API.
- HTML
- CSS
- SASS/SCSS
- JAVASCRIPT
- API
Code
Solution Url - Solution URL here
Live Website - Live Website URL here
Animated website
This is an animated website. Website is divided into two partitions which change sizes and translate on hover which make it look very beautiful. Hope you like it.
- HTML
- CSS
- Javascript
Code
Live Website - Live Website URL here
Animated Cards
In this project I have made animated cards which expands and contracts after being clicked. Do check it out.
- HTML
- CSS
- Javascript
Code
Live Website - Live Website URL here
Remote work landing page
In this project I have completed one of the challenges of Front end mentor. Challenge was to design a landing page for Remote work website.
- HTML
- CSS
- SCSS
- Javascript
Code
Solution Url - Solution URL here
Live Website - Live Website URL here
Expense tracker chart component
In this project I have completed one of the challenges of Front end mentor. Challenge was to design a static chart component of an expense tracker app. Files and style guide were provided for the challenge below is my solution link.
- HTML
- CSS
- SCSS
Code
Solution Url - Solution URL here
Live Website - Live Website URL here
Order Summary Component
In this project I have completed one of the challenges of Front end mentor. Challenge was to design a static order summary component. Files and style guide were provided for the challenge below is my solution link.
- HTML
- CSS
- SCSS
Code
Solution Url - Solution URL here
Live Website - Live Website URL here
Room Home Page
In this project I have completed one of the challenges of Front end mentor. Challenge was to design a static remote home page. Files and style guide were provided for the challenge below is my solution link.
- HTML
- CSS
- SCSS
- JS
Code
Solution Url - Solution URL here
Live Website - Live Website URL here
3-Column Card Component
In this project I have completed one of the challenges of Front end mentor. Challenge was to design a static 3-Column Card Component. Files and style guide were provided for the challenge below is my solution link.
- HTML
- CSS
- SCSS
Code
Solution Url - Solution URL here
Live Website - Live Website URL here
Profile-Card-Component
In this project I have completed one of the challenges of Front end mentor. Challenge was to design a static Profile Card Component. Files and style guide were provided for the challenge below is my solution link.
- Semantic HTML5 markup
- tailwind css
Code
Solution Url - Solution URL here
Live Website - Live Website URL here
Bookmark Landing Page
In this project I have completed one of the challenges of Front end mentor. Challenge was to design a static Bookmark Landing-Page. Files and style guide were provided for the challenge below is my solution link.
- Semantic HTML5 markup
- tailwind css
- netlify
Code
Solution Url - Solution URL here
Live Website - Live Website URL here
Time Tracking dashboard
In this project I have completed one of the challenges of Front end mentor. Challenge was to design a static Time Tracking dashboard. Files and style guide were provided for the challenge below is my solution link.
- Semantic HTML5 markup
- tailwind css
- netlify
Code
Solution Url - Solution URL here
Live Website - Live Website URL here
Project preview card component
In this project I have completed one of the challenges of Front end mentor. Challenge was to design a static Product Preview Card Component. Files and style guide were provided for the challenge below is my solution link.
- Semantic HTML5 markup
- tailwind css
- netlify
Code
Solution Url - Solution URL here
Live Website - Live Website URL here
QR Code Generator
In this project I have built a QR Code generator. The app requires a text, url from the user and then converts it to a qr code. Which the user can then scan and have fun.
- Semantic HTML5 markup
- CSS
- Javascript
Code
Live Website - Live Website URL here
Email Validator
A simple email validation application that verifies given url.
Check live Demo
- Semantic HTML5 markup
- CSS
- Javascript
Code
Live Website - Live Website URL here
Speech To Text
A Speech to text application, the converted text can be copied to clipboard and can be pasted.
- Semantic HTML5 markup
- CSS
- Javascript
Code
Live Website - Live Website URL here
News Homepage
Frontend mentor challenge that I attempted, it is a beautiful news homepage.
- Semantic HTML5 markup
- CSS
- Javascript
Code
Live Website - Live Website URL here
Solution - Solution
Sudoku
A simple sudoku app made using ReactJs.
- Create React App
Code
Live Website - Live Website URL here
Frontend Mentor - @sourabh358
GitHub - @Sourabh358
❤ Sourabh Yadav