about me
I am a web developer with a vast array of knowledge in many different front end and back end languages, responsive frameworks, databases and best code practices. My objective is simply to be the good web developer that I can be and to contribute to the technology industry all that I know and can do. I am dedicated to perfecting my craft by learning from more seasoned developers, remaining humble, and continuously making strides to learn all that I can about development. I believe that my understanding of problem-solving skills that have and will continue to contribute to my overall success as a developer.
skills
bachelor of engineering - RGPV University
Percentage: 75.6%
Higher Secondary School Certificate (12th) - St. Jones Convent H.S. School
Percentage: 83.4%
Higher School Certificate (10th) - St. Jones Convent H.S. School
Percentage: 80%
Trained on Full-Stack Javascript Developer - iLoveCoding Inc.
Technologies that I learned :
HTML5: Basic HTML and modern HTML FeaturesCSS3: CSS basics to modern CSS features
JavaScript: Beginner to Advanced
ES6+: Modern JavaScript features
ESLint: Improve code quality
DOM: Tame the browser with vanilla JavaScript
jQuery: The defacto library for DOM manipulation
React: Build modern web UI applications
Redux: State management for modern apps
NPM: Use third-party libraries
Webpack/Parcel: Module bundlers for todays developer
Babel: Write cross-browser compatible code
Node.js: Using JavaScript in the backend
Express.js: Backend robust RESTful API
Passport.js: authentication middleware for Node.js
Git: Distributed code management and Version control system
GitHub: Internet hosting & version control using Git.
Recent Work
Note Taking App
In this Note Taking application here users can register their account, login and create notes within this app. I applied following concept while making this application. Following stuff is done in projet : Setting Routes | Installing Body Parser | Setup Mongoose.js | Creating Note | Validating input when creating note | Get Note | Delete Note | Update Note | Validating input when updating note | Register User | Validating input when registering user | Enforcing Unique Email | Password Protection - hashing | Login: Validating Input, Find User, Check Password, Issue Access Token | Authentication & Authorization | Passport.js: Configuration, Verify Function, Check User, Refactor Code, Apply Strategy Everywhere | Note with Author ID Note Author Rights
- Module - Mongoose, Chance, Body-Parser, Passport-Http-Bearer, Nodemon, File-System
- Technologies used - NodeJS, ExpressJS, BcryptJS, PassportJS, Javascript
- View Repository - click here
HTTP Server
I created a simple HTTP Server with Node.js. The server is going to be able to take a request that you sent via the browser and also respond to those requests that you sent to it.
- Module - HTTP Module, Query String Module, URL Module, FS Module
- Technologies used - NodeJS, Javascript, HTML
- View Repository - click here
Web Scrapper
I created a node application which can scraper a website It could be any website. In this project I scrap data from Craigslist & store in a JSON file. Module & Stuff done: 2 External Node modules (Cherrio & Request) | Package.Json > Bulk Installing Dependencies | Scrape a Website | Save data to JSON | Node's Asynchronous Behavior works
- Module - Cherrio, Request
- Technologies used - NodeJS, Javascript, HTML
- View Repository - click here
To-Do-List App
In this project, created To-do List App using ReactJS. The steps that I followed in this project are : Creating a new React app with create-react-app, Creating a static Todo list with mockup data, create a form in React, Refactor and rearrange code to get better data flow, Adding functionality for adding a todo to the list, Adding functionality for removing a completed todo from the list.
- Technologies used - ReactJS, Javascript, CSS, HTML
- View Live - faizanfsdevtodolist.netlify.app
Timer App
I created a Timer App in React Js. It have basic button like clear timer. We will use the setInterval function which repeats a given function after every given time interval. I made two component one is SetTimer and other is CountDown.
- Technologies used - ReactJS, Javascript, CSS, HTML
- View Live - faizanfsdevtimer.netlify.app
Song Search App
I created a fully functional song search app with React. It leverage the iTunes API to find song. I made component like ResultItem, SeachApp, SearchForm
- Technologies used - ReactJS, Javascript, CSS, HTML
- View Live - faizanfsdevsongsearchapp.netlify.app
Calculator
In this project I build a fully functioning Basic Calculator with jQuery. I used the basic concepts of JavaScript, Array, DOM and building something practical and ready for launch.
- Technologies used - jQuery, Javascript, CSS, HTML
- View Live - faizanfsdev.github.io/jQuery-Calculator/
Tab Functionality
In this project I created tabs functionality with jQuery. It has three tabs, if I click on tab 1, the tab 1 will show up, if I click on the 2nd, the tab 2 will show up and same for the 3rd tab
- Technologies used - jQuery, Javascript, CSS, HTML
- View Live - faizanfsdev.github.io/jQuery-Tabs-Functionality/
Top widget (Hello Bar)
In this project I created a top bar widget with jQuery. It is called the hello bar feature. You notice at the top, there's a top bar as shown below. If you click on the right hand side at the top, you will see the lever, if you click on it, it will close the bar and will pull down the lever so visitors can reopen the top bar. In the top bar, you can also add some text or links for your visitors or anything that you want to promote.
- Technologies used - jQuery, Javascript, CSS, HTML
- View Live - faizanfsdev.github.io/jQuery-Top-Widget-Bar/
Photo Slider
In this project I created an Image Carousel Slider with jQuery which has an image gallery and when you hit the next button, the next photo shows and so on.
- Technologies used - jQuery, Javascript, CSS, HTML
- View Repository - click here
Snake Game
In this project I build the classic snake game using pure JavaScript. I didn't use any libraries or frameworks at all. I didn't even need to use canvas, since CSS grid makes working with snake incredibly easy. Concepts:- How to create a game loop - How to position elements in a CSS grid - Best practices for game development - Best practices for breaking up large files
- Technologies used - Javascript, CSS, HTML
- View Live - faizanfsdev.github.io/Snake-Game/
To-Do List
I made this project with Vanilla JavaScript. Apply concept of DOM and functions.
- Technologies used - Javascript, CSS, HTML
- View Live - faizanfsdev.github.io/To-Do-List/
Stopwatch
In this project I made buttons to trigger and stop action. I used concepts such as setTimeOut() and Date()
- Technologies used - Javascript, CSS, HTML
- View Live - https://faizanfsdev.github.io/Stopwatch/
Rock-Paper-Scissors Game
This game is made in vanilla JavaScript. In this project I used several JavaScript concepts like Function, Callback Function, Switch Statement, Set Timeout Fn, Math. floor, Math. random() etc. when a user move and make it choice, then the program compare user choice with computer choice. The program compares the choices and took a decision based on logic.
- Technologies used - Javascript, CSS, HTML
- View Live - https://faizanfsdev.github.io/Rock-Paper-Scissors-Game
Counter
In this project, Follower on Instagram is counted by Javascript app. The Counter starts from 0 to 1000. Once counting is complete the CSS properties are also changed and text is appended by DOM.
- Technologies used - Javascript, CSS, HTML
- View Live - https://faizanfsdev.github.io/Counter/
Color Changer
In this project, I used JavaScript to make a color changer app. When the user placed a cursor on the given color, the same color will be shown below in a circular shape.
- Technologies used - Javascript, CSS, HTML
- View Live - https://faizanfsdev.github.io/Color-Changer/
Tool Tip
This is the ToolTip project. When a user takes cursor any of tab it will show some tip regarding tab function.
- Technologies used - Javascript, CSS, HTML
- View Live - faizanfsdev.github.io/Tool-Tip/
HTML Form
I build a small html form project, animated html page using CSS. Concepts: - Label tag attributes- Input tag attributes - All important input tag types- Select and option tag - Textarea tag - Submit button- HTML form validation - Form accessibility best practices.
- Technologies used - Javascript, CSS, HTML
- View Live - https://faizanfsdev.github.io/Html-Form/
Contact Me
faizanunique5@gmail.com
Phone
+91 8770071985