Basic Projects of Frontend

Basic projects made with html css javascript...

html css and javascript fundamentals

When I learn fundamentals of frontend I make a lot of projects so I decide to put together each of them. At website I put some of them.

Javascript Projects

1- A realtime age calculator

• Calculate your age and renew every second like a timer

2- Image search app

• Fetch api from pixabay with search functions detailed
• Styled with bootstrap and improved Css
• Responsive design

3- Responsive image search App

• Styled with bootstrap5 and improved css
• Fetch api from pixabay
• Detailed search functions
• Simple pagination with javascript

4-Simple score Keeper

• A counter and changable winner score
• When reach to winner score buttons deactivated until reset

5- Checkout page javascript template

• Checkout page example with javascript
• Delete, increase, decrease functions
• Automated calculate costs

6- Movie Seat App

• Movie seat booking app
• calculate cost according to selected seats and movie
• dom selector based
• Use Local storage to get selected seats later

7- Weather Api

• Fetch weather data from openweathermap.org
• Encrypted apikey saved to local storage
• Read response, get necessary items and manipulate data to show
• Create custom errors

8- Library Register Books

• Book registery project used local storage
• Control new books from isbn number to prevent duplicate records
• Styled scss

9- Calculator

• Basic calculator with lots of control
• Detailed mathematical functions
• Control abnormal user inputs then eliminates them
• pure Javascript

10- Guess number game

• User guess a number to find a random number created by ui
• ui alerts near, far, bigger or smaller than random number
• A counter decrease for each guess and if user not find the number, finish game

11- Lottery Game

• Create Random number list, without duplication with same length
• Array methods, loops used

12- Responsive digital clock

• Date dom element moves according to whole page movements

13 Search & Filter page

• Search in data on key events
• search by categories filter from data
• show filtered data

14- Stopwatch

• Change button reactions with toggle
• setinterval functions

15- Todo App

• Pure javascript functions
• Add, delete, update, isDone functions

SASS & SCSS Projects

1- Sass Portfolio Page

• Styled with SASS & SCSS
• Responsive design

Html & CSS Projects

1- Responsive Website Template

• Responsive design
• Pure Html & Css
• Grid system

2- Team members page

• Used bootstrap 5 and some deep css
• used dark mode switch

3- Flex responsive design landing page

• Responsive design with flex
• Pure Html & Css

4- Complex Grid design landing page

• Grid design nested boxes

5- Parallax website

• Used css parallax system

6- Checkout page template

• Simple html form styled with css